效果图展示
1.动态实时更新数据效果图
说明: 其中 今日抓拍，抓拍总数，预警信息统计，监控点位统计图表 做了动态实时更新处理。
2.静态切片效果图
一、确定需求方案
1、确定产品上线部署的屏幕LED分辨率
本案例基于16:9 屏宽比，F11全屏显示。
**2、**部署方式
基于免安装可执行程序：支持Windows、Linux、Mac等各种操作系统；将程序复制到服务器上即可，无需其它环境依赖；
观看方式：既可在服务器上直接观看程序界面，也可在远程用浏览器打开播放，例如Chrome浏览器、360浏览器等。
二、整体架构设计
- 前端基于Echarts开源库设计，使用WebStorm编辑器；
- 后端基于Python Flask实现，使用 Vscode 编辑器；
- 数据传输格式：JSON；
- 数据源类型：目前采用JSON文件方式，可自行添加支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加pandas支持Excel表格等，还可以定制HTTP API接口方式。
- **数据更新方式：**采用http get 轮询方式。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；
三、编码实现 （关键代码）
1、前端html代码 - 页面布局主要基于div
<body>
<div class="body">
<div class="head-box">
<div class="logout-box"></div>
<div class="link-box"></div>
南方软件视频平台大屏中心
<div class="time-box" id="time">2022年9月1日</div>
</div>
<div class="main">
<!--left-->
<div class="col">
<!--巡查视频问题-->
<div class="col-box1">
<div class="col-title">巡查视频问题</div>
<div class="col-main">
<ul class="xcspwt-box js-xcspwt">
<li>
<span>张三丰</span>
<span title="南京信息工程大学地铁站1号出口监控点">南京信息工程大学地铁站1号出口监控点</span>
<span title="视频信号不稳定">视频信号不稳定</span>
</li>
.......
</ul>
</div>
</div>
<!--巡查视频问题统计-->
<div class="col-box1">
<div class="col-title">巡查视频问题统计</div>
<div class="col-main">
<!--视频问题统计-->
<ul class="spwtzgtj-box">
<li>
<span>问题总数</span>
<span>234</span>
</li>
<li>
<span>已整改</span>
<span>34</span>
最低0.47元/天 解锁文章
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
