分类:vue

vue开发笔记

hls流视频播放海康视频

hls流视频播放海康视频
数据可视化大屏项目开发中,需要播放监控,这里我们通过hls.js来播放我们的监控视频。 测试在线 我们在写代码前,先使用在线工具测试一下,看看我们收到的视频流地址是否可以播放,之前客户提供的视频一直不能播放,使用IINA可以播放,但是使用网页无法播放,通过在线播放器测试也不能播...

2年前 (2024-09-13) 喜欢

vue项目巧用gui工具快速调试效果

vue项目巧用gui工具快速调试效果
数据可视化大屏项目开发中,ui设计师做了一个下面的效果,文字是下面的3d倾斜效果,因为这些文字是要根据实际情况实时变化的,我们需要通过代码来达到这种文字效果。通过css修改一点调效果的话,显然是太慢了。文字3d倾斜调试。 我们需要一个快速达到预期效果的功能,这里我们知道通过tr...

2年前 (2024-09-07) 喜欢

vue高德地图实现轨迹回放

vue高德地图实现轨迹回放
数据可视化大屏项目开发中,有一个需求是实现汽车的轨迹回放效果,今天我们实现这个功能 动态效果 功能介绍 主要包含以下功能: 车辆选择 地图展示 路线绘制 车辆动画 车辆信息展示 核心实现 1. 初始化地图 initMap() { if (this.map) { ...

2年前 (2024-09-03) 喜欢

css实现渐变色文字添加阴影

css实现渐变色文字添加阴影
数据可视化大屏项目开发中,会遇到ui设计图中文字是渐变色加阴影的效果。 ui设计图效果如下 css实现 我们通过蓝湖生成的css生成出来的样式效果,这和我们的预期差别太大了。 这里我们可以使用伪类来实现我们想要的效果 使用伪元素 通过使用伪元素 ::before 或 ::af...

2年前 (2024-09-01) 喜欢

vue 实现vr全景看房并添加标注

vue 实现vr全景看房并添加标注
项目开发中,我们会遇到各种需求,今天我们的需求是实现全景看房,并给房间里对应的场景物品添加标注。 准备素材 我们需要准备各个房间的全景图,为渲染做准备 动态效果 移动端兼容 移动端测试可以正常浏览 配置房间信息 我们通过 roomList来配置房间, image为房间全景图,...

2年前 (2024-08-23) 喜欢

vue项目中使用openweathermap获取天气

vue项目中使用openweathermap获取天气
数据可视化大屏项目开发中,需要显示天气,客户提供的是openweathermap平台的key,查询天气时需要使用到key 经纬度,这里将请求方式记录下来。 <!-- WeatherForecast.vue --> <template> <div...

2年前 (2024-08-22) 喜欢

百度地图使用自定义地图json文件渲染地图

百度地图使用自定义地图json文件渲染地图
数据可视化大屏项目开发中,需要使用两种主题切换地图样式的效果,所以使用百度地图,然后监听主题,切换主题样式,这里是使用的主题色id然后通过styleId来切换,但是在交付的时候遇到问题,开发时使用的是自己的百度账号生成的主题色,切换为客户的地图id后主题色id失效了。所以这里我们...

2年前 (2024-08-22) 喜欢

数据可视化大屏完整端配置

数据可视化大屏完整端配置
本文介绍基于数据可视化大屏项目后端配置。 api端 文件夹名api 本项目基于lin-cms-koa框架开发 项目运行环境 nodejs 14 安装依赖 pnpm install 启动项目 node index.js 或者使用pm2进行启动 数据库配置 数据库使用的mysql 5...

2年前 (2024-08-16) 喜欢

element-plus 如何修改主题色?

element-plus 如何修改主题色?
要将 Element Plus 的主题色设置为红色,您可以按照以下步骤进行操作: 方法一:使用 SCSS 文件全局配置 在项目的 src/styles 目录下创建一个 index.scss 文件(如果没有,请创建相应的目录和文件)。 在 index.scss 文件中添加...

2年前 (2024-08-13) 喜欢

vue3上传图片到七牛云cdn

vue3上传图片到七牛云cdn
在后台项目开发过程中,客户反应图片加载太慢,限于服务器带宽只有1M,大的图片加载会比较慢,于是将图片上传到七牛云,这样记在速度就会明显提升。 后台开发 后端使用的是lin-cms-koa框架 方法封装,我们安装qiniu插件,通过key和密钥换取token返回给前端,用于文件上...

2年前 (2024-08-11) 喜欢