摄像头统计

zhsq_qk-ui/src/views/fusion/sprh.vue

@@ -77,10 +77,10 @@
           </div>
         </div>
       </div>
-      <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:240px;"></div>
+      <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:220px;"></div>
       <!-- 资源分布-->
       <div class="qkq_tdzy">
-        <div class="qkq_tit ">设备实时在线情况</div>
+        <div class="qkq_tit" style="margin-top: -35px">设备实时在线情况</div>
       </div>
       <div class="sbzs">
         <p>设备总数：</p>
@@ -102,6 +102,10 @@
           <h2 class="lxsb_sl">234<i>个</i></h2>
         </div>
       </div>
+      <div class="qkq_bmfw">
+        <div class="qkq_tit ">摄像头统计</div>
+        <div id="jczl-bmfw" style="margin: 20px auto 0px auto; width: 350px; height: 220px"></div>
+      </div>
     </div>
     <!--右侧结束-->
     <!--底部开始-->
@@ -179,6 +183,7 @@ export default {
     this.deviceOnline();
     this.deviceOffline();
     this.cameraList();
+    this.regionTop();
     // 每秒刷新时间
     setInterval(() => {
       this.getCurrentTime();
@@ -596,6 +601,133 @@ export default {
 
       this.currentTime = `${year}年${formattedMonth}月${formattedDate}日 ${weekDays[day]} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
     },
+
+    regionTop() {
+      //摄像头统计
+      var myChart = echarts.init(document.getElementById('jczl-bmfw'));
+      let data = ['小区建设', '路面建设', '已有']
+      let valueData = [];
+      let labelData = []
+      for (var i = 0; i < data.length; i++) {
+        labelData.push(data[i]);
+        var lineNumber = Math.floor(Math.random() * 2000);
+        valueData.push(lineNumber);
+      }
+      var option = {
+        title: {
+          show: true,
+          text: '',
+          textStyle: {
+            color: '#fff',
+            fontSize: '14',
+          },
+          top: '0%',
+          left: 'bottom',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '10%',
+          right: '5%',
+          buttom: '0',
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)',
+            },
+          },
+          axisLabel: {
+            margin: 10,
+            color: '#e2e9ff',
+            textStyle: {
+              fontSize: 14
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: labelData
+        },
+        yAxis: {
+          name: '',
+          nameTextStyle: {
+            color: '#fff',
+          },
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)'
+            },
+          },
+          axisLabel: {
+            formatter: '{value}',
+            color: '#e2e9ff',
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)'
+            }
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#fff',
+            },
+          },
+        },
+        series: [{
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: 'rgba(30, 129, 204, 1.0)'
+            }, {
+              offset: 1,
+              color: 'rgba(21, 37, 126, 1.0)'
+            }], false),
+            barBorderRadius: 8,
+            opacity: 0.8
+          },
+          barWidth: 14,
+          label: {
+            show: true,
+            position: ['0', '-12'],
+            color: '#fff',
+          },
+          data: valueData,
+          type: 'bar',
+        }]
+      };
+      var currentIndex = -1;
+      var timer = setInterval(function () {
+        // 生成新的随机数据
+        currentIndex++;
+        if (currentIndex >= 3) {
+          currentIndex = 0;
+          for (var i = 0; i < valueData.length; i++) {
+            valueData[i] = Math.floor(Math.random() * 2000);
+          }
+        } else {
+          valueData[currentIndex] = Math.floor(Math.random() * 2000);
+        }
+
+        // 更新 option 中的数据
+        option.series[0].data = valueData;
+
+        // 重新渲染图表
+        myChart.setOption(option);
+      }, 1000); // 每秒更新一次数据
+      if (option) {
+        myChart.setOption(option);
+      }
+    },
   }
 };