地图数据

src/views/zdsz/bigscreen/index.vue

@@ -67,19 +67,20 @@
       <!-- 中间地图 -->
       <div class="mainMap">
         <div id="echartsMap" ref="mainMap" class="ditu"></div>
-        <span class="map_dw_dh">25642</span><!--德惠市 -->
-        <span class="map_dw_ys">25642</span><!--榆树市-->
-        <span class="map_dw_na">25642</span><!--农安县-->
-        <span class="map_dw_gzl">25642</span><!--公主岭市-->
-        <span class="map_dw_jt">25642</span><!--九台区-->
-        <span class="map_dw_kc">25642</span><!--宽城区-->
-        <span class="map_dw_ly">25642</span><!--绿园区-->
-        <span class="map_dw_ed">25642</span><!--二道区-->
-        <span class="map_dw_cy">25642</span><!--朝阳区-->
-        <span class="map_dw_sy">25642</span><!--双阳区-->
-        <span class="map_dw_ng">25642</span><!--南关区-->
+        <span class="map_dw_dh">{{ mapData.map_dw_dh }}</span><!--德惠市 -->
+        <span class="map_dw_ys">{{ mapData.map_dw_ys }}</span><!--榆树市-->
+        <span class="map_dw_na">{{ mapData.map_dw_na }}</span><!--农安县-->
+        <span class="map_dw_gzl">{{ mapData.map_dw_gzl }}</span><!--公主岭市-->
+        <span class="map_dw_jt">{{ mapData.map_dw_jt }}</span><!--九台区-->
+        <span class="map_dw_kc">{{ mapData.map_dw_kc }}</span><!--宽城区-->
+        <span class="map_dw_ly">{{ mapData.map_dw_ly }}</span><!--绿园区-->
+        <span class="map_dw_ed">{{ mapData.map_dw_ed }}</span><!--二道区-->
+        <span class="map_dw_cy">{{ mapData.map_dw_cy }}</span><!--朝阳区-->
+        <span class="map_dw_sy">{{ mapData.map_dw_sy }}</span><!--双阳区-->
+        <span class="map_dw_ng">{{ mapData.map_dw_ng }}</span><!--南关区-->
+        <!--<span class="25642">25642</span>&lt;!&ndash;25642&ndash;&gt;-->
       </div>
-      
+
       <!-- 中间地图 结束 -->
       <!-- 右边俩 -->
       <div class="mainRight">
@@ -175,6 +176,19 @@
           doing: 658, // 在建
           done: 658, // 完工
         },
+        mapData: {
+          map_dw_dh: 0, // 德惠市
+          map_dw_ys: 0, // 榆树市
+          map_dw_na: 0, // 农安县
+          map_dw_gzl: 0, // 公主岭市
+          map_dw_jt: 0, // 九台区
+          map_dw_kc: 0, // 宽城区
+          map_dw_ly: 0, // 绿园区
+          map_dw_ed: 0, // 二道区
+          map_dw_cy: 0, // 朝阳区
+          map_dw_sy: 0, // 双阳区
+          map_dw_ng: 0, // 南关区
+        },
         totalRight_1: 0, // 今日施工数
         totalRight_1s: [0,0,0,0], // 今日施工数
         totalRight_2: 0, // 今日使用人数
@@ -315,7 +329,31 @@
       getConstructionMap(){ // 地图施工数据分布
         getConstructionMap(this.queryParams).then(res => {
           console.log("地图施工数据分布", res);
+          let name = ["朝阳区", "二道区", "绿园区", "南关区", "宽城区", "汽开区", "经开区", "净月区", "长春新区", "九台经济开发区", "莲花山旅游度假区", "中韩国际合作示范区", "北湖新区", "门市房"];
+          let mapData = res.data.value;
+          this.mapData.map_dw_cy = mapData[0]; // 朝阳区
+          this.mapData.map_dw_ed = mapData[1]; // 二道区
+          this.mapData.map_dw_ly = mapData[2]; // 绿园区
+          this.mapData.map_dw_ng = mapData[3]; // 南关区
+          this.mapData.map_dw_kc = mapData[4]; // 宽城区
+          // this.mapData.map_dw_kc = mapData[5]; // 汽开区
+          // this.mapData.map_dw_kc = mapData[6]; // 经开区
+          // this.mapData.map_dw_kc = mapData[7]; // 净月区
+          // this.mapData.map_dw_kc = mapData[8]; // 长春新区
+          this.mapData.map_dw_jt = mapData[9]; // 九台区
+        //   <span class="map_dw_cy">{{ mapData.map_dw_cy }}</span><!--朝阳区-->
+        //   <span class="map_dw_ed">{{ mapData.map_dw_ed }}</span><!--二道区-->
+        //   <span class="map_dw_ly">{{ mapData.map_dw_ly }}</span><!--绿园区-->
+        //   <span class="map_dw_ng">{{ mapData.map_dw_ng }}</span><!--南关区-->
+        //   <span class="map_dw_kc">{{ mapData.map_dw_kc }}</span><!--宽城区-->
+
+        //   <span class="map_dw_jt">{{ mapData.map_dw_jt }}</span><!--九台区-->
 
+        // <span class="map_dw_dh">{{ mapData.map_dw_dh }}</span><!--德惠市 -->
+        //   <span class="map_dw_ys">{{ mapData.map_dw_ys }}</span><!--榆树市-->
+        //   <span class="map_dw_na">{{ mapData.map_dw_na }}</span><!--农安县-->
+        //   <span class="map_dw_gzl">{{ mapData.map_dw_gzl }}</span><!--公主岭市-->
+        //   <span class="map_dw_sy">{{ mapData.map_dw_sy }}</span><!--双阳区-->
         })
       },
       getConstructionNew(){ // 各个区今日施工数
@@ -666,16 +704,18 @@
           tooltip: {
             trigger: 'axis',
             axisPointer: {
-              type: 'shadow',
+              // type: 'shadow',
+              type: 'none',
 
               textStyle: {
-                color: '#05294D',
+                // color: '#05294D',
+                color: '#fff',
               },
             },
-            backgroundColor: '#05294D',
-            borderColor: '#135469',
-            borderWidth: 2,
-            padding: [20, 20, 20, 20],
+            // backgroundColor: '#05294D',
+            // borderColor: '#135469',
+            // borderWidth: 2,
+            // padding: [20, 20, 20, 20],
           },
           legend: {
             show:false,
@@ -751,7 +791,6 @@
           ],
           series: [
             {//柱底圆片
-              // name: "整体输出RPS趋势",
               name: "今日使用人数",
               yAxisIndex: 0,
               type: "pictorialBar",
@@ -782,7 +821,7 @@
             },
             //柱体
             {
-              name: '整体输出RPS趋势',
+              name: '今日使用人数',
               type: 'bar',
               barWidth: 20,
               yAxisIndex: 0,
@@ -811,7 +850,7 @@
             },
             //柱顶圆片
             {
-              name: "整体输出RPS趋势",
+              name: "今日使用人数",
               type: "pictorialBar",
               yAxisIndex: 0,
               symbolSize: [20, 10],//调整截面形状
@@ -850,7 +889,7 @@
           return;
         }
         this.intervalArr.push("今日使用人数");
-        let dataLength = option.series[0].data.length;
+        let dataLength = option.series[1].data.length;
         let currentIndex = -1;
         setInterval(function () {
           currentIndex = (currentIndex + 1) % dataLength;
@@ -1504,15 +1543,15 @@
     }
     .mainMap span.map_dw_ys{
       right: 127px;
-      top: 58px 
+      top: 58px
     }
     .mainMap span.map_dw_na{
       left: 263px;
-      top: 169px 
+      top: 169px
     }
     .mainMap span.map_dw_gzl{
       bottom: 174px;
-      left: 176px 
+      left: 176px
     }
     .mainMap span.map_dw_jt{
       right: 220px;
@@ -1528,7 +1567,7 @@
     }
     .mainMap span.map_dw_ed{
       right: 297px;
-      bottom: 179px 
+      bottom: 179px
     }
     .mainMap span.map_dw_cy{
       left: 318px;