syy

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

@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div>
+	 
     <div class="map">
       <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
                 :yxtSltProps="sltProps"></supermap>
@@ -11,12 +12,13 @@
     <!--头部开始-->
     <div class="header">
       <h1>城市运行一网统管指挥中心</h1>
-      <div class="map_tab">
-        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>
-        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>
-      </div>
+			<div class="map_tab">
+				<button @click="sltHandle" class="on">矢量图</button>
+				<button @click="yxtHandle">影像图</button>
+			</div>
     </div>
-    <!--头部结束-->
+    <!--头部结束-->
+
     <!--左侧开始-->
     <div class="left_con sprh-left">
       <div class="top_txt">
@@ -60,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">
@@ -77,10 +79,10 @@
           </div>
         </div>
       </div>
-      <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:220px;"></div>
+      <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:240px;"></div>
       <!-- 资源分布-->
       <div class="qkq_tdzy">
-        <div class="qkq_tit" style="margin-top: -35px">设备实时在线情况</div>
+        <div class="qkq_tit ">设备实时在线情况</div>
       </div>
       <div class="sbzs">
         <p>设备总数：</p>
@@ -102,12 +104,14 @@
           <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="footer">
       <div class="nav-bottom">
@@ -118,7 +122,7 @@
           <div class="nav-li-left">
             <span>城市管理</span>
           </div>
-          <div class="nav-li-left on" @click="handleNavigation('jtzl')">
+          <div class="nav-li-left on">
             <span>交通治理</span>
           </div>
           <div class="nav-li-left" @click="handleNavigation('jczl')">
@@ -170,9 +174,7 @@ export default {
       dropdownVisible: false,
       cameras: [],
       sltProps: null,
-      currentTime: '',
-      btnOne: false,
-      btnTwo: false
+      currentTime: ''
     };
     // 可根据实际情况添加更多设备列表
   },
@@ -183,7 +185,6 @@ export default {
     this.deviceOnline();
     this.deviceOffline();
     this.cameraList();
-    this.regionTop();
     // 每秒刷新时间
     setInterval(() => {
       this.getCurrentTime();
@@ -192,14 +193,10 @@ export default {
 
   methods: {
     sltHandle() {
-      this.btnOne = true
-      this.btnTwo = false
-      this.$refs.supermap.getSupermap(null, null, null, "slt", null, null)
+      this.$refs.supermap.getSupermap(null,null,null,"slt",null,null)
     },
     yxtHandle() {
-      this.btnTwo = true
-      this.btnOne = false
-      this.$refs.supermap.getSupermap(null, null, null, "yxt", null, null)
+      this.$refs.supermap.getSupermap(null,null,null,"yxt",null,null)
     },
     handleNavigation(route) {
       this.$router.push({path: route});
@@ -219,12 +216,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: {
@@ -328,7 +325,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'
@@ -339,8 +336,8 @@ export default {
 
           return {
             value,
-            label: {color},
-            itemStyle: {color}
+            label: { color },
+            itemStyle: { color }
           };
         });
 
@@ -421,8 +418,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'],
                 ],
@@ -601,133 +598,6 @@ 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: '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);
-      }
-    },
   }
 };