视频监控数据大屏 数据可视化大屏 vue3

数据大屏 yekong 263℃

视频监控数据大屏 数据可视化大屏 vue3

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

开发环境

vue3+vite+js nodejs 16

分辨率

1920*1080

关联项目

当前项目为视频监控智能分析系统精简版,如果需要更加完善的项目请访问视频监控智能分析系统

视频监控数据大屏 数据可视化大屏 vue3

演示地址

视频监控数据大屏 数据可视化大屏 vue3

效果截图

视频监控智能分析系统-电子地图

动画效果

视频监控智能分析系统-电子地图模块介绍

中间地图

中间地图,采用百度地图,自定义图片渲染,渲染设备到地图中,点击放大缩小图标,可以实现地图的缩放,全屏图标点击后可以进入全屏,再次点击后退出全屏。

中间地图

摄像头定位

显示摄像头的信息,可以通过搜索输入框,选择设备,地图会将选择的设备在地图中心展示。

动态图片装饰,渲染自定义数据。

摄像头定位

告警信息

告警信息,以滚动列表的形式展示,并设有三级,以三种不同的颜色展示。

告警信息

故障列表

故障列表滚动展示故障信息。

故障列表

视图预览

使用video.js自动播放视频。

视图预览

视频监控数据大屏-登录

演示地址

视频监控数据大屏-登录

效果截图

视频监控智能分析系统-登录

数据交互

使用mockjs 来生成模拟数据,使用axios来进行接口请求。

mockjs数据生成部分代码

// 故障列表
//vue3 使用mockjs 生成故障列表接口 title 'xxxx发生故障故障原因:xxxx' 日期随机日期 今年日期格式(YYYY-MM-DD) 生成20条数据
{
    url: '/api/fault-list',
    method: 'get',
    response: () => {
        const faultList = [];

        function getRandomDateThisYear() {
            const startOfYear = dayjs().startOf('year');
            const endOfYear = dayjs().endOf('year');
            const randomMillisecond = Math.random() * (endOfYear.valueOf() - startOfYear.valueOf()) + startOfYear.valueOf();
            return dayjs(randomMillisecond).format('YYYY-MM-DD');
        }

        for (let i = 0; i < 20; i++) {
            const faultTitle = `设备``{Mock.Random.integer(1, 100)}发生故障,故障原因:``{Mock.Random.cword(5, 10)}`;
            const faultDate = getRandomDateThisYear();

            faultList.push({
                title: faultTitle,
                date: faultDate,
            });
        }

        return {
            data: faultList,
            message: '成功',
            code: 0
        }
    },
},

接口请求封装部分代码

// 故障列表
export function faultList(data) {
    return request({
        url: '/api/fault-list',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求

async getData() {
  try {
    const res = await cameraLocation();
    this.list = res.data;
  } catch (err) {
    console.error(err);
  }
},

更多可视化数据大屏

前端可视化大屏demo

源码下载

项目基于vue3+vite+js开发 nodejs 16,购买代码请确保有相关开发基础

虚拟产品一经售出 概不退款请谅解

相关文件下载地址
此资源需支付 ¥60 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
视频监控数据大屏 数据可视化大屏 vue3