修改界面

ruoyi-ui/src/views/board/index/index.vue

@@ -196,11 +196,11 @@
               :value="item.value.deviceId">
             </el-option>
           </el-select>
-<!--          <el-input v-model="formInline.name" placeholder="名称"></el-input>-->
+          <!--          <el-input v-model="formInline.name" placeholder="名称"></el-input>-->
         </el-form-item>
-<!--        <el-form-item>-->
+        <!--        <el-form-item>-->
-<!--          <el-button type="primary" @click="searchMap">查询</el-button>-->
+        <!--          <el-button type="primary" @click="searchMap">查询</el-button>-->
-<!--        </el-form-item>-->
+        <!--        </el-form-item>-->
       </el-form>
 
       <el-switch
@@ -312,9 +312,10 @@ export default {
   data() {
     return {
       containerPic,
-      value:[],
+      isTown:false,
-      loading:false,
+      value: [],
-      options:[],
+      loading: false,
+      options: [],
       isRail: true,
       monitorUnitId: null,
       equipmentInfoDialog: false,
@@ -561,7 +562,6 @@ export default {
       sortArr = sortArr.sort((a, b) => {
         return new Date(a).getTime() - new Date(b).getTime()
       })
-      console.log(sortArr)
       let x = sortArr
       let y = sortArr.map(e => {
         return onlineDevicesTrend[e]
@@ -627,7 +627,6 @@ export default {
     },
     dispose(e) {
       this.warInfo = e
-      console.log(e)
       this.textarea = ''
       this.isDispose = true
       this.disposeNo = e.no
@@ -838,10 +837,14 @@ export default {
     },
     chartClick() {
       this.$refs.mapChart.chart.on('click', async (params) => {
+        this.isTown = (this.cityJson[params.dataIndex].properties.adcode || gsByMap.features[params.dataIndex].properties.unique_id).toString().length === 9
         this.code = this.cityJson[params.dataIndex].properties.adcode || this.code || gsByMap.features[params.dataIndex].properties.unique_id
         let mapData
         if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
           mapData = {features: gsByMap.features.filter(e => e.properties.pid === this.code.toString())}
+          if (this.isTown) {
+            mapData = {features: mapData.features.filter(v => v.properties.name === params.name)}
+          }
         } else {
           let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
           mapData = this.cityJson[params.dataIndex].properties.adcode === 100000 ? ChinaMapData : data.data
@@ -853,7 +856,12 @@ export default {
       });
     },
     goBack() {
+      if(this.isTown){
+        this.getMap({features: gsByMap.features.filter(e => e.properties.pid === this.code.toString())})
+        this.isTown = false
+      }else{
         this.chartDblClick(this.code)
+      }
     },
     async chartDblClick(val) {
       let a = val.toString().substr(0, 2)
@@ -968,9 +976,9 @@ export default {
       map.remove(polygons)
       map.remove(circles)
       markers = []
-      e.forEach(v=>{
+      e.forEach(v => {
-        let arr = this.options.filter(r=>r.value.deviceId === v) || []
+        let arr = this.options.filter(r => r.value.deviceId === v) || []
-        if(arr.length >0){
+        if (arr.length > 0) {
           this.setMarker(arr[0].value)
         }
       })
@@ -988,7 +996,6 @@ export default {
         fillColor: '#1791fc',
         // fillColor: val > 0 ? '#ff0000' : '#1791fc',
       });
-      console.log(thisPolygon)
       map.add(thisPolygon)
       map.setFitView(thisPolygon)
       polygons.push(thisPolygon)
@@ -1037,18 +1044,17 @@ export default {
       map.remove(circles)
       markers = []
       this.loading = true;
-      const {data} = await selectDeviceByName({name:name})
+      const {data} = await selectDeviceByName({name: name})
       this.loading = false;
       let option = []
       data.forEach(e => {
         if (e.latitude && e.longitude) {
           option.push({
-            label:e.deviceName,
+            label: e.deviceName,
-            value:e
+            value: e
           })
         }
       })
-      console.log(option)
       this.options = option
     },
     exTable() {
@@ -1273,24 +1279,25 @@ export default {
 
 @keyframes an1 {
   0% {
-    fill:#3D93FD;
+    fill: #3D93FD;
   }
   50% {
-    fill:#ffffff;
+    fill: #ffffff;
   }
   100% {
-    fill:#3D93FD;
+    fill: #3D93FD;
   }
 }
+
 @keyframes an2 {
   0% {
-    fill:#ff0000;
+    fill: #ff0000;
   }
   50% {
-    fill:#ffffff;
+    fill: #ffffff;
   }
   100% {
-    fill:#ff0000;
+    fill: #ff0000;
   }
 }
 </style>