修改

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

@@ -1,6 +1,6 @@
 <template>
-  <div>
-	 
+  <div>
+
     <div class="map">
       <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
                 :yxtSltProps="sltProps"></supermap>
@@ -12,12 +12,12 @@
     <!--头部开始-->
     <div class="header">
       <h1>城市运行一网统管指挥中心</h1>
-			<div class="map_tab">
-				<button @click="sltHandle" class="on">矢量图</button>
-				<button @click="yxtHandle">影像图</button>
-			</div>
+      <div class="map_tab">
+        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>
+        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>
+      </div>
     </div>
-    <!--头部结束-->
+    <!--头部结束-->
 
     <!--左侧开始-->
     <div class="left_con sprh-left">
@@ -62,8 +62,8 @@
     <div class="right_con sprh-left">
       <div class="top_txt">
         <span>{{ currentTime }}</span>
-<!--        <span>星期六</span>-->
-<!--        <b>11:16:58</b>-->
+        <!--        <span>星期六</span>-->
+        <!--        <b>11:16:58</b>-->
       </div>
       <!-- 资源分布-->
       <div class="qkq_tdzy">
@@ -104,14 +104,18 @@
           <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>
+    <!--右侧结束-->
+    <!-- 点位图例 开始 -->
+    <div class="dwtl">
+      <p><span class="jdlm"></span>街道路面</p>
+      <p><span class="xqnb"></span>小区内部</p>
     </div>
-    <!--右侧结束-->
-	<!-- 点位图例 开始 -->
-	<div class="dwtl">
-		<p><span class="jdlm"></span>街道路面</p>
-		<p><span class="xqnb"></span>小区内部</p>
-	</div>
-	<!-- 点位图例 结束 -->
+    <!-- 点位图例 结束 -->
     <!--底部开始-->
     <div class="footer">
       <div class="nav-bottom">
@@ -174,7 +178,9 @@ export default {
       dropdownVisible: false,
       cameras: [],
       sltProps: null,
-      currentTime: ''
+      currentTime: '',
+      btnOne: false,
+      btnTwo: false,
     };
     // 可根据实际情况添加更多设备列表
   },
@@ -185,6 +191,7 @@ export default {
     this.deviceOnline();
     this.deviceOffline();
     this.cameraList();
+    this.regionTop();
     // 每秒刷新时间
     setInterval(() => {
       this.getCurrentTime();
@@ -193,10 +200,14 @@ export default {
 
   methods: {
     sltHandle() {
-      this.$refs.supermap.getSupermap(null,null,null,"slt",null,null)
+      this.btnOne = true
+      this.btnTwo = false
+      this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
     },
     yxtHandle() {
-      this.$refs.supermap.getSupermap(null,null,null,"yxt",null,null)
+      this.btnOne = false
+      this.btnTwo = true
+      this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
     },
     handleNavigation(route) {
       this.$router.push({path: route});
@@ -216,12 +227,12 @@ export default {
       //资源分布
       var myChart = echarts.init(document.getElementById('sprh-zyfb'));
       let data = [
-        { value: 0, label: '前程街道' },
-        { value: 0, label: '富民街道' },
-        { value: 0, label: '广兴街道' },
-        { value: 0, label: '东风街道' },
-        { value: 0, label: '锦绣街道' },
-        { value: 0, label: '锦程街道' }
+        {value: 0, label: '前程街道'},
+        {value: 0, label: '富民街道'},
+        {value: 0, label: '广兴街道'},
+        {value: 0, label: '东风街道'},
+        {value: 0, label: '锦绣街道'},
+        {value: 0, label: '锦程街道'}
       ];
       let option = {
         grid: {
@@ -325,7 +336,7 @@ export default {
           }
         });
 
-        option.series[1].data = data.map(({ value }, index) => {
+        option.series[1].data = data.map(({value}, index) => {
           let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
             offset: 1,
             color: '#004eaf'
@@ -336,8 +347,8 @@ export default {
 
           return {
             value,
-            label: { color },
-            itemStyle: { color }
+            label: {color},
+            itemStyle: {color}
           };
         });
 
@@ -418,8 +429,8 @@ export default {
               lineStyle: {
                 color: [
                   [0.61, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                    { offset: 0, color: '#0d4470' },
-                    { offset: 1, color: '#0659c9' }
+                    {offset: 0, color: '#0d4470'},
+                    {offset: 1, color: '#0659c9'}
                   ])],
                   [1, '#15337C'],
                 ],
@@ -579,6 +590,133 @@ export default {
       }, 1000); // 每100毫秒更新一次数据，可以根据需要调整时间间隔
     },
 
+    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: '15%',
+          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);
+      }
+    },
+
     getCurrentTime() {
       const now = new Date();
       const year = now.getFullYear();

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

@@ -108,6 +108,12 @@
       </div>
     </div>
     <!--右侧结束-->
+    <!-- 点位图例 开始 -->
+    <div class="dwtl">
+      <p><span class="jdlm"></span>街道路面</p>
+      <p><span class="xqnb"></span>小区内部</p>
+    </div>
+    <!-- 点位图例 结束 -->
     <!--底部开始-->
     <div class="footer">
       <div class="nav-bottom">