0616修改

app/src/components/Map.vue

@@ -1,5 +1,82 @@
 <template>
   <div class="map">
+    <div class="legend">
+      <div class="item selected" v-if="data && data.showzhd">
+        <img src="../assets/images/map-icon-fire.png" />火灾扑救
+      </div>
+      <div
+        class="item"
+        v-if="data && !data.showzhd"
+        :class="showType.indexOf('currentJzKey') >= 0 ? 'selected' : ''"
+        @click="changeType('currentJzKey')"
+      >
+        <img src="../assets/images/map-icon-current-build.png" />当前建筑
+      </div>
+      <div
+        class="item"
+        v-if="data"
+        :class="showType.indexOf('xfscKey') >= 0 ? 'selected' : ''"
+        @click="changeType('xfscKey')"
+      >
+        <img src="../assets/images/map-icon-xfsc.png" />消防水池
+      </div>
+      <div
+        class="item"
+        v-if="data"
+        :class="showType.indexOf('trsyKey') >= 0 ? 'selected' : ''"
+        @click="changeType('trsyKey')"
+      >
+        <img src="../assets/images/map-icon-trsy.png" />天然水源
+      </div>
+      <div
+        class="item"
+        v-if="data"
+        :class="showType.indexOf('xhsKey') >= 0 ? 'selected' : ''"
+        @click="changeType('xhsKey')"
+      >
+        <img src="../assets/images/map-icon-pressure.png" />室外消火栓
+      </div>
+      <div
+        class="item"
+        v-if="data"
+        :class="showType.indexOf('szxhsKey') >= 0 ? 'selected' : ''"
+        @click="changeType('szxhsKey')"
+      >
+        <img src="../assets/images/map-icon-szxhs.png" />市政消火栓
+      </div>
+      <div
+        class="item"
+        v-if="data"
+        :class="showType.indexOf('jzKey') >= 0 ? 'selected' : ''"
+        @click="changeType('jzKey')"
+      >
+        <img src="../assets/images/map-icon-build.png" />高层建筑
+      </div>
+      <div
+        class="item"
+        v-if="data"
+        :class="showType.indexOf('xfzKey') >= 0 ? 'selected' : ''"
+        @click="changeType('xfzKey')"
+      >
+        <img src="../assets/images/map-icon-119.png" />微信消防站
+      </div>
+      <div
+        class="item"
+        v-if="data"
+        :class="showType.indexOf('jgKey') >= 0 ? 'selected' : ''"
+        @click="changeType('jgKey')"
+      >
+        <img src="../assets/images/map-icon-micstation.png" />消防站
+      </div>
+      <div
+        class="item"
+        v-if="data"
+        :class="showType.indexOf('xfcKey') >= 0 ? 'selected' : ''"
+        @click="changeType('xfcKey')"
+      >
+        <img src="../assets/images/map-icon-car.png" style="height: 15px;" />消防车
+      </div>
+    </div>
     <div id="map-container"></div>
     <!-- 信息弹窗 -->
     <div class="info-window" ref="infoWindow" v-if="firePoint">
@@ -29,11 +106,12 @@
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
 import mapIconBuild from "../assets/images/map-icon-build.png"; // 高层建筑
+import mapIconCurrentBuild from "../assets/images/map-icon-current-build.png"; // 高层建筑
 import mapIconSwxhs from "../assets/images/map-icon-pressure.png"; // 室外消火栓
 import mapIconCar from "../assets/images/map-icon-car.png"; // 消防车
 import mapIconCamera from "../assets/images/map-icon-camera.png"; // 摄像头
-import mapIconMicstation from "../assets/images/map-icon-micstation.png"; // 微型站
-import mapIconStation from "../assets/images/map-icon-119.png"; // 消防站
+import mapIconMicstation from "../assets/images/map-icon-119.png"; // 微型站
+import mapIconStation from "../assets/images/map-icon-micstation.png"; // 消防站
 import mapIconFire from "../assets/images/map-icon-fire.png"; // 着火点
 import mapIconSzxhs from "../assets/images/map-icon-szxhs.png"; // 市政消火栓
 import mapIconTrsy from "../assets/images/map-icon-trsy.png"; // 天然水源
@@ -50,52 +128,59 @@ export default {
       markers: [],
       firePoint: null,
       icons: {
+        currentJzKey: {
+          image: mapIconCurrentBuild,
+          size: [70, 70],
+          imageSize: [70, 70],
+        },
         jzKey: {
           image: mapIconBuild,
-          size: [43, 60],
-          imageSize: [43, 60],
+          size: [21, 30],
+          imageSize: [21, 30],
         },
         xhsKey: {
           image: mapIconSwxhs,
-          size: [43, 60],
-          imageSize: [43, 60],
+          size: [21, 30],
+          imageSize: [21, 30],
         },
         szxhsKey: {
           image: mapIconSzxhs,
-          size: [43, 60],
-          imageSize: [43, 60],
+          size: [21, 30],
+          imageSize: [21, 30],
         },
         trsyKey: {
           image: mapIconTrsy,
-          size: [43, 60],
-          imageSize: [43, 60],
+          size: [21, 30],
+          imageSize: [21, 30],
         },
         xfscKey: {
           image: mapIconSfsc,
-          size: [43, 60],
-          imageSize: [43, 60],
+          size: [21, 30],
+          imageSize: [21, 30],
         },
         xfcKey: {
           image: mapIconCar,
-          size: [70, 46],
-          imageSize: [70, 46],
+          size: [35, 23],
+          imageSize: [35, 23],
         },
         lldKey: {
           image: mapIconCamera,
-          size: [48, 48],
-          imageSize: [48, 48],
+          size: [24, 24],
+          imageSize: [24, 24],
         },
         xfzKey: {
           image: mapIconMicstation,
-          size: [99, 107],
-          imageSize: [99, 107],
+          size: [49, 53],
+          imageSize: [49, 53],
         },
         jgKey: {
           image: mapIconStation,
-          size: [99, 107],
-          imageSize: [99, 107],
+          size: [49, 53],
+          imageSize: [49, 53],
         },
       },
+      showType: ["currentJzKey"],
+      loading: false,
     };
   },
   props: {
@@ -112,8 +197,34 @@ export default {
     this.getData();
   },
   methods: {
+    changeType(type) {
+      if (this.loading) {
+        return;
+      }
+      let showType = JSON.parse(JSON.stringify(this.showType));
+      if (showType.indexOf(type) >= 0) {
+        showType = showType.filter((p) => p !== type);
+      } else {
+        showType.push(type);
+      }
+
+      this.showType = showType;
+      this.getData();
+    },
     async getData() {
+      if (this.loading) {
+        return;
+      }
       this.center = [this.data.jd, this.data.wd];
+
+      // 标志物
+      this.loading = true;
+      const res = await getZy({
+        lon: this.data.jd,
+        lat: this.data.wd,
+        mi: this.radius,
+      });
+      const markers = [];
       if (this.data.showzhd) {
         // 着火点
         this.firePoint = {
@@ -121,20 +232,29 @@ export default {
           buildName: this.data.jzmc,
           depts: this.data.zl ? this.data.zl.split(",") : [],
         };
+      } else {
+        // 标识当前建筑
+        for (let i = 0; i < res.data.length; i++) {
+          const p = res.data[i];
+          if (p.type === "jzKey") {
+            try {
+              const d = JSON.parse(p.data);
+              if (d.jd === this.data.jd && d.wd === this.data.wd) {
+                console.log(d);
+                p.type = "currentJzKey";
+                break;
+              }
+            } catch (e) {
+              console.log(p);
+            }
+          }
+        }
       }
 
-      // 标志物
-      const markers = [];
-      const res = await getZy({
-        lon: this.data.jd,
-        lat: this.data.wd,
-        mi: this.radius,
-      });
-
-      // console.log(res);
+      // console.log(res.data);
       if (res.data) {
-        res.data.forEach((p) => {
-          if (p.lon && p.lat) {
+        res.data.forEach((p, i) => {
+          if (this.showType.indexOf(p.type) >= 0 && p.lon && p.lat) {
             markers.push({
               icon: p.type,
               position: [p.lon, p.lat],
@@ -145,39 +265,6 @@ export default {
         });
       }
       this.markers = markers;
-
-      // this.markers = [
-      //   {
-      //     icon: "jzKey",
-      //     position: [106.43885760313785, 29.829438307353094],
-      //     anchor: "bottom-center",
-      //   },
-      //   {
-      //     icon: "waterKey",
-      //     position: [105.612725, 37.06636],
-      //     anchor: "bottom-center",
-      //   },
-      //   {
-      //     icon: "xfcKey",
-      //     position: [105.602725, 37.079636],
-      //     anchor: "bottom-center",
-      //   },
-      //   {
-      //     icon: "lldKey",
-      //     position: [105.604725, 37.089636],
-      //     anchor: "bottom-center",
-      //   },
-      //   {
-      //     icon: "xfzKey",
-      //     position: [105.605725, 37.069636],
-      //     anchor: "bottom-center",
-      //   },
-      //   {
-      //     icon: "jgKey",
-      //     position: [105.606725, 37.079636],
-      //     anchor: "bottom-center",
-      //   },
-      // ];
       this.initMap();
     },
     initMap() {
@@ -195,7 +282,7 @@ export default {
             mapStyle: "amap://styles/grey",
           });
 
-          console.log(this.markers);
+          // console.log(this.markers);
 
           // 设置覆盖物
           if (this.markers && this.markers.length > 0) {
@@ -203,7 +290,7 @@ export default {
             this.markers.forEach((p, i) => {
               const type = p.icon;
               let infoContent = [];
-              if (type === "jzKey") {
+              if (type === "jzKey" || type === "currentJzKey") {
                 infoContent.push(p.data.gcjzmc);
                 infoContent.push(p.data.xxdz);
                 infoContent.push(p.data.jzdx);
@@ -280,6 +367,7 @@ export default {
           }
 
           this.map.setFitView();
+          this.loading = false;
         })
         .catch((e) => {
           console.log(e);
@@ -357,6 +445,45 @@ export default {
 .map {
   width: 100%;
   height: 100%;
+  position: relative;
+
+  .legend {
+    width: 152px;
+    height: 339px;
+    box-sizing: border-box;
+    background: url("../assets/images/map-legend-bg.png") center center
+      no-repeat rgba(0, 80, 153, 0.25);
+    background-size: 152px 339px;
+    position: absolute;
+    left: 10px;
+    bottom: 0;
+    border-radius: 3px;
+    z-index: 8;
+    padding: 10px 22px;
+    .item {
+      width: 100%;
+      height: 26px;
+      display: flex;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      margin-bottom: 10px;
+      color: #848484;
+      &.selected {
+        color: #ffffff;
+      }
+      img {
+        width: 20px;
+        height: 25px;
+        margin-right: 10px;
+      }
+      align-items: center;
+      align-content: center;
+      cursor: pointer;
+    }
+  }
 
   #map-container {
     width: 100%;

app/src/views/Home/components/RiskWarning.vue

@@ -51,17 +51,17 @@ export default {
         });
       });
 
-      data.forEach((a) => {
-        if (a.name === "重大风险") {
-          a.value = 1;
-        } else if (a.name === "较大风险") {
-          a.value = 2;
-        } else if (a.name === "一般风险") {
-          a.value = 3;
-        } else if (a.name === "低风险") {
-          a.value = 4;
-        }
-      });
+      // data.forEach((a) => {
+      //   if (a.name === "重大风险") {
+      //     a.value = 1;
+      //   } else if (a.name === "较大风险") {
+      //     a.value = 2;
+      //   } else if (a.name === "一般风险") {
+      //     a.value = 3;
+      //   } else if (a.name === "低风险") {
+      //     a.value = 4;
+      //   }
+      // });
 
       // 排序
       data = data.sort(function (a, b) {
@@ -75,6 +75,10 @@ export default {
           return 0;
         }
       });
+
+      data.forEach((p) => {
+        p.name = p.name + " " + p.value;
+      });
       // console.log(data);
       // const d1 = data.find((p) => p.name === "一般风险");
       // d1.value = 300;
@@ -100,21 +104,21 @@ export default {
           name: item.name,
           realValue: item.value,
           label: {
-            show: true,
+            show: false,
             color: color[index],
             fontSize: 14,
             position: index % 2 === 0 ? "left" : "right",
             formatter: () => {
-              return  `${item.name} ${item.value} 栋`;
+              return `${item.name} ${item.value} 栋`;
             },
           },
           labelLine: {
-            show: true,
+            show: false,
             length: index === 0 ? 100 : 20,
             length2: 30,
           },
           itemStyle: {
-            height: `${itemValue + 5}%`,
+            height: `${itemValue}%`,
             borderColor: color[index],
             borderWidth: 5,
             shadowColor: color[index],
@@ -131,23 +135,29 @@ export default {
             type: "funnel",
             sort: "ascending",
             data: data,
-            maxSize: "60%",
+            maxSize: "30%",
+            left: -80,
           },
         ],
         legend: {
           show: true,
-          // right: 20,
-          bottom: 10,
+          // right: 50,
+          // top: 70,
+          // x: 'right',
+          y: "center",
+          right: 30,
           itemWidth: 10,
           itemHeight: 10,
-          itemGap: 4,
+          itemGap: 20,
+          orient: "vertical",
           textStyle: {
             color: "#fff",
-            fontSize: 14,
+            fontSize: 18,
           },
           data: data.map((p) => p.name),
         },
       };
+      // console.log(option.legend);
       this.chart.setOption(option);
       //自适应图表
       window.onresize = this.chart.resize;

app/src/views/PoliceSituation/index.vue

@@ -8,7 +8,7 @@
 				<MobilizeStrength :list="cdxxList" :zlxx="zlxx" :hcws="hcws" />
 			</border-panel>
 		</div>
-		<div style="width: 1000px">
+		<div style="width: 1000px; padding-bottom: 6px;">
 			<Map :data="mapData" v-if="mapData" />
 		</div>
 		<div>