fix-警情动态

app/src/components/Map.vue

@@ -81,6 +81,12 @@
       </div>
     </div>
     <div id="map-container"></div>
+    <!-- 距离刻度 -->
+    <div class="map-m">
+      <span class="map-num" @click="refershMap(200)" :class="addClass(200)">200m</span>
+      <span class="map-num" @click="refershMap(500)" :class="addClass(500)">500m</span>
+      <span class="map-num" @click="refershMap(1000)" :class="addClass(1000)">1000m</span>
+    </div>
     <!-- 信息弹窗 -->
     <div class="info-window" ref="infoWindow" v-if="firePoint">
       <div class="info-content">
@@ -122,10 +128,10 @@ import mapIconSfsc from "../assets/images/map-icon-xfsc.png"; // 消防水池
 import { getZy } from "@/api/map.js";
 export default {
   name: "MapContainer",
-  components: { },
+  components: {},
   data() {
     return {
-      radius: 300,
+      radius: 200,
       center: [],
       markers: [],
       originMarkers: [],
@@ -186,18 +192,18 @@ export default {
       showType: ["currentJzKey"],
       loading: false,
       markerCache: {
-        "currentJzKey": [],
-        "xfscKey": [],
-        "trsyKey": [],
-        "xhsKey": [],
-        "szxhsKey": [],
-        "jzKey": [],
-        "xfzKey": [],
-        "jgKey": [],
-        "xfcKey": []
+        currentJzKey: [],
+        xfscKey: [],
+        trsyKey: [],
+        xhsKey: [],
+        szxhsKey: [],
+        jzKey: [],
+        xfzKey: [],
+        jgKey: [],
+        xfcKey: [],
       },
       legendWindow: null,
-      infoWindow: null
+      infoWindow: null,
     };
   },
   props: {
@@ -237,17 +243,17 @@ export default {
         return;
       }
       let showType = JSON.parse(JSON.stringify(this.showType));
-      console.log(this.markerCache)
+      console.log(this.markerCache);
       if (showType.indexOf(type) >= 0) {
         showType = showType.filter((p) => p !== type);
-        this.markerCache[type].forEach(marker => {
-          this.map.remove(marker)
-        })
+        this.markerCache[type].forEach((marker) => {
+          this.map.remove(marker);
+        });
       } else {
         showType.push(type);
-        this.markerCache[type]?.forEach(marker => {
-          this.map.add(marker)
-        })
+        this.markerCache[type]?.forEach((marker) => {
+          this.map.add(marker);
+        });
       }
       this.showType = showType;
     },
@@ -292,7 +298,7 @@ export default {
 
       // console.log(res.data);
       if (res.data) {
-        res.data.forEach((p, i) => {
+        res.data?.forEach((p, i) => {
           if (this.showType.indexOf(p.type) >= 0 && p.lon && p.lat) {
             markers.push({
               icon: p.type,
@@ -306,25 +312,37 @@ export default {
       this.markers = markers;
       this.initMap().then(() => {
         if (this.showType.length === 1 && this.showType[0] === "currentJzKey") {
-          const p = this.markerCache['currentJzKey'][0]
-          this.addLegendWindow(p._position)
-          p.on("click",  (v) =>  {
-            this.openLegendWindow(p._position)
+          const p = this.markerCache["currentJzKey"][0];
+          this.addLegendWindow(p._position);
+          p.on("click", (v) => {
+            this.openLegendWindow(p._position);
           });
-          this.map.remove(p)
-          this.map.add(p)
+          this.map.remove(p);
+          this.map.add(p);
 
           // 缓存所有的节点数据
-          this.cacheAllMarkers(res.data.filter(p => p.type !== 'currentJzKey' || p.type !== 'jzKey').map(p => ({
-            icon: p.type,
-            position: [p.lon, p.lat],
-            anchor: "bottom-center",
-            data: JSON.parse(p.data),
-          })))
-          
+          this.cacheAllMarkers(
+            res.data
+              .filter((p) => p.type !== "currentJzKey" || p.type !== "jzKey")
+              .map((p) => ({
+                icon: p.type,
+                position: [p.lon, p.lat],
+                anchor: "bottom-center",
+                data: JSON.parse(p.data),
+              }))
+          );
         }
       });
     },
+    //刷新地图
+    refershMap(val){
+      if(this.radius==val) return
+      this.radius=val
+      this.getData()
+    },
+    addClass(item){
+     return this.radius==item?'map-num active':'map-num '
+    },
     async initMap() {
       await AMapLoader.load({
         key: "4776c927b5ebe35e9e33e5b14ec78b8f", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -403,8 +421,6 @@ export default {
                 offset: new AMap.Pixel(0, -70),
               });
 
-
-
               marker.on("mouseover", (e) => {
                 infoWindow.open(this.map, p.position); //后面的参数指的是经纬度，在此显示窗口
               });
@@ -413,7 +429,7 @@ export default {
                 infoWindow.close();
               });
               this.markerCache[type].push(marker);
-              
+
               markers.push(marker);
             });
             this.map.add(markers);
@@ -441,18 +457,22 @@ export default {
         position: this.firePoint.position,
         anchor: "center",
       });
-      markerFire.on("click",  (v) =>  {
-        this.openLegendWindow(this.firePoint.position)
+      markerFire.on("click", (v) => {
+        this.openLegendWindow(this.firePoint.position);
       });
-      markerFire.on("mouseout",  (v) =>  {
-        this.infoWindow && this.infoWindow.close()
+      markerFire.on("mouseout", (v) => {
+        this.infoWindow && this.infoWindow.close();
       });
-      markerFire.on("mouseover",  (v) =>  {
+      markerFire.on("mouseover", (v) => {
         // console.log()
-        this.infoWindow && this.infoWindow.open(
-          this.map,
-          new AMap.LngLat(this.firePoint.position[0], this.firePoint.position[1])
-        );
+        this.infoWindow &&
+          this.infoWindow.open(
+            this.map,
+            new AMap.LngLat(
+              this.firePoint.position[0],
+              this.firePoint.position[1]
+            )
+          );
       });
       this.map.add(markerFire);
 
@@ -470,8 +490,8 @@ export default {
         fillOpacity: 0.08, // 填充透明度
       });
       this.map.add(circle);
-      this.addLegendWindow(this.firePoint.position)
-      this.addInfoWindow()
+      this.addLegendWindow(this.firePoint.position);
+      this.addInfoWindow();
     },
     addInfoWindow() {
       if (!this.firePoint) {
@@ -490,17 +510,65 @@ export default {
       // );
     },
     addLegendWindow(position) {
-      console.log(position)
+      console.log(position);
       const legend = [
-        { name: '消防车', key: 'xfcKey', icon: mapIconCar, width: '47.24px', height: '31px' },
-        { name: '微型消防站', key: 'xfzKey', icon: mapIconMicstation, width: '27.54px', height: '34px'  },
-        { name: '消防站', key: 'jgKey', icon: mapIconStation, width: '25.2px', height: '31px'  },
-        { name: '高层建筑', key: 'jzKey', icon: mapIconBuild, width: '25px', height: '34px'  },
-        { name: '市政消火栓', key: 'szxhsKey', icon: mapIconSzxhs, width: '25px', height: '32px'  },
-        { name: '天然水源', key: 'trsyKey', icon: mapIconTrsy, width: '25px', height: '34px' },
-        { name: '消防水池', key: 'xfscKey', icon: mapIconSfsc, width: '25px', height: '32px' },
-        { name: '室外消火栓', key: 'xhsKey', icon: mapIconSwxhs, width: '29px', height: '39px' }
-      ]
+        {
+          name: "消防车",
+          key: "xfcKey",
+          icon: mapIconCar,
+          width: "47.24px",
+          height: "31px",
+        },
+        {
+          name: "微型消防站",
+          key: "xfzKey",
+          icon: mapIconMicstation,
+          width: "27.54px",
+          height: "34px",
+        },
+        {
+          name: "消防站",
+          key: "jgKey",
+          icon: mapIconStation,
+          width: "25.2px",
+          height: "31px",
+        },
+        {
+          name: "高层建筑",
+          key: "jzKey",
+          icon: mapIconBuild,
+          width: "25px",
+          height: "34px",
+        },
+        {
+          name: "市政消火栓",
+          key: "szxhsKey",
+          icon: mapIconSzxhs,
+          width: "25px",
+          height: "32px",
+        },
+        {
+          name: "天然水源",
+          key: "trsyKey",
+          icon: mapIconTrsy,
+          width: "25px",
+          height: "34px",
+        },
+        {
+          name: "消防水池",
+          key: "xfscKey",
+          icon: mapIconSfsc,
+          width: "25px",
+          height: "32px",
+        },
+        {
+          name: "室外消火栓",
+          key: "xhsKey",
+          icon: mapIconSwxhs,
+          width: "29px",
+          height: "39px",
+        },
+      ];
       // 信息窗口
       // this.addInfoWindow();
 
@@ -508,129 +576,145 @@ export default {
         isCustom: true,
         content: `<div id="legendContainer" class='legend-container show-box'>
           <div class="legend-list">
-            ${legend.map((item,idx) => {
-              const rotate = 360 / legend.length * idx;
-              return (`
-              <div class='legend-item show ${ this.showType.indexOf(item.key) > 0 ? "active": ""}' index='${idx}'
-              onclick='onClickLegendItem(${JSON.stringify({item, idx}).toString()})' style="--rotate: ${rotate}deg;" >
+            ${legend
+              .map((item, idx) => {
+                const rotate = (360 / legend.length) * idx;
+                return `
+              <div class='legend-item show ${
+                this.showType.indexOf(item.key) > 0 ? "active" : ""
+              }' index='${idx}'
+              onclick='onClickLegendItem(${JSON.stringify({
+                item,
+                idx,
+              }).toString()})' style="--rotate: ${rotate}deg;" >
                 <div class='legend-content' style="transform: rotate(-${rotate}deg)">
-                  <img src="${item.icon}" width="${item.width}" height="${item.height}"/>
+                  <img src="${item.icon}" width="${item.width}" height="${
+                  item.height
+                }"/>
                   <div>${item.name}</div>
                 </div>
             </div>
-            `)
-            }).join('')}
+            `;
+              })
+              .join("")}
         </div>
     <div onclick="closeMapLegend()" class="center-pointer"></div>
           </div>`,
         center: new AMap.LngLat(position[0], position[1]),
       });
       window.closeMapLegend = (e) => {
-        document.querySelector('#legendContainer').className = document.querySelector('#legendContainer').className.replace('show-box','close-box')
-        document.querySelectorAll('#legendContainer .legend-item').forEach(ele => {
-          ele.className = ele.className.replace('show','close')
-        })
+        document.querySelector("#legendContainer").className = document
+          .querySelector("#legendContainer")
+          .className.replace("show-box", "close-box");
+        document
+          .querySelectorAll("#legendContainer .legend-item")
+          .forEach((ele) => {
+            ele.className = ele.className.replace("show", "close");
+          });
         setTimeout(() => {
-          this.legendWindow.close()
-        }, 650)
-      }
+          this.legendWindow.close();
+        }, 650);
+      };
       window.onClickLegendItem = (e) => {
-        const ele = this.legendWindow.dom.querySelector(`div.legend-item[index="${e.idx}"]`)
+        const ele = this.legendWindow.dom.querySelector(
+          `div.legend-item[index="${e.idx}"]`
+        );
         if (ele.className.indexOf("active") >= 0) {
-          ele.className = ele.className.replace('active', '')
+          ele.className = ele.className.replace("active", "");
         } else {
-          ele.className += ' active'
+          ele.className += " active";
         }
-        this.changeType(e.item.key)
-      }
+        this.changeType(e.item.key);
+      };
     },
     openLegendWindow(position) {
-      if (!this.legendWindow) return
+      if (!this.legendWindow) return;
       this.legendWindow.open(
         this.map,
         new AMap.LngLat(position[0], position[1])
       );
-      document.querySelector('#legendContainer').className = document.querySelector('#legendContainer').className.replace('close-box', 'show-box')
-      document.querySelectorAll('#legendContainer .legend-item').forEach(ele => {
-        ele.className = ele.className.replace('close', 'show')
-      })
+      document.querySelector("#legendContainer").className = document
+        .querySelector("#legendContainer")
+        .className.replace("close-box", "show-box");
+      document
+        .querySelectorAll("#legendContainer .legend-item")
+        .forEach((ele) => {
+          ele.className = ele.className.replace("close", "show");
+        });
     },
     cacheAllMarkers(markerInfos) {
       if (markerInfos && markerInfos.length > 0) {
-            const markers = [];
-            markerInfos.forEach((p, i) => {
-              const type = p.icon;
-              let infoContent = [];
-              if (type === "jzKey" || type === "currentJzKey") {
-                infoContent.push(p.data.gcjzmc);
-                infoContent.push(p.data.xxdz);
-                infoContent.push(p.data.jzdx);
-                infoContent.push("建筑高度：" + p.data.gd + "m");
-                infoContent.push("建成年代：" + p.data.jcnd + "年");
-              } else if (type === "xhsKey") {
-                infoContent.push(p.data.code);
-                infoContent.push(p.data.sylx);
-                infoContent.push(p.data.address);
-              } else if (type === "szxhsKey") {
-                infoContent.push(p.data.code);
-                infoContent.push(p.data.sylx);
-                infoContent.push(p.data.address);
-              } else if (type === "trsyKey") {
-                infoContent.push(p.data.code);
-                infoContent.push(p.data.sylx);
-                infoContent.push(p.data.address);
-              } else if (type === "xfscKey") {
-                infoContent.push(p.data.code);
-                infoContent.push(p.data.sylx);
-                infoContent.push(p.data.address);
-              } else if (type === "xfcKey") {
-                infoContent.push(p.data.cph);
-                infoContent.push(p.data.speed + "公里/小时");
-              } else if (type === "lldKey") {
-                infoContent.push(p.data.deviceName);
-                infoContent.push(p.data.cameraType);
-              } else if (type === "xfzKey") {
-                infoContent.push(p.data.mc);
-                infoContent.push("消防站（队站）");
-                infoContent.push(p.data.fzr + " " + p.data.fzrLxdh);
-              } else if (type === "jgKey") {
-                infoContent.push(p.data.dwmc);
-                infoContent.push("微型消防站");
-                infoContent.push(p.data.lxr + " " + p.data.lxdh);
-              }
+        const markers = [];
+        markerInfos.forEach((p, i) => {
+          const type = p.icon;
+          let infoContent = [];
+          if (type === "jzKey" || type === "currentJzKey") {
+            infoContent.push(p.data.gcjzmc);
+            infoContent.push(p.data.xxdz);
+            infoContent.push(p.data.jzdx);
+            infoContent.push("建筑高度：" + p.data.gd + "m");
+            infoContent.push("建成年代：" + p.data.jcnd + "年");
+          } else if (type === "xhsKey") {
+            infoContent.push(p.data.code);
+            infoContent.push(p.data.sylx);
+            infoContent.push(p.data.address);
+          } else if (type === "szxhsKey") {
+            infoContent.push(p.data.code);
+            infoContent.push(p.data.sylx);
+            infoContent.push(p.data.address);
+          } else if (type === "trsyKey") {
+            infoContent.push(p.data.code);
+            infoContent.push(p.data.sylx);
+            infoContent.push(p.data.address);
+          } else if (type === "xfscKey") {
+            infoContent.push(p.data.code);
+            infoContent.push(p.data.sylx);
+            infoContent.push(p.data.address);
+          } else if (type === "xfcKey") {
+            infoContent.push(p.data.cph);
+            infoContent.push(p.data.speed + "公里/小时");
+          } else if (type === "lldKey") {
+            infoContent.push(p.data.deviceName);
+            infoContent.push(p.data.cameraType);
+          } else if (type === "xfzKey") {
+            infoContent.push(p.data.mc);
+            infoContent.push("消防站（队站）");
+            infoContent.push(p.data.fzr + " " + p.data.fzrLxdh);
+          } else if (type === "jgKey") {
+            infoContent.push(p.data.dwmc);
+            infoContent.push("微型消防站");
+            infoContent.push(p.data.lxr + " " + p.data.lxdh);
+          }
 
-              const icon = JSON.parse(JSON.stringify(this.icons[p.icon]));
-              icon.size = new AMap.Size(icon.size[0], icon.size[1]);
-              icon.imageSize = new AMap.Size(
-                icon.imageSize[0],
-                icon.imageSize[1]
-              );
-              p.icon = new AMap.Icon(icon);
-              var marker = new AMap.Marker(p);
-              // // this.map.add(marker);
-              let content = [
-                "<div class='info_box_contant' style=\"line-height: 30px;min-width: 250px; padding: 20px; font-size: 20px; color: #7ea2ff; font-family: 'Abel';  background: rgba(0, 0, 0, 0.82);\">" +
-                  infoContent.join("<br />") +
-                  " </div>",
-              ];
-              const infoWindow = new AMap.InfoWindow({
-                isCustom: true, //使用自定义窗体
-                content: content.join("<br>"),
-                offset: new AMap.Pixel(0, -70),
-              });
+          const icon = JSON.parse(JSON.stringify(this.icons[p.icon]));
+          icon.size = new AMap.Size(icon.size[0], icon.size[1]);
+          icon.imageSize = new AMap.Size(icon.imageSize[0], icon.imageSize[1]);
+          p.icon = new AMap.Icon(icon);
+          var marker = new AMap.Marker(p);
+          // // this.map.add(marker);
+          let content = [
+            "<div class='info_box_contant' style=\"line-height: 30px;min-width: 250px; padding: 20px; font-size: 20px; color: #7ea2ff; font-family: 'Abel';  background: rgba(0, 0, 0, 0.82);\">" +
+              infoContent.join("<br />") +
+              " </div>",
+          ];
+          const infoWindow = new AMap.InfoWindow({
+            isCustom: true, //使用自定义窗体
+            content: content.join("<br>"),
+            offset: new AMap.Pixel(0, -70),
+          });
 
-              marker.on("mouseover", (e) => {
-                infoWindow.open(this.map, p.position); //后面的参数指的是经纬度，在此显示窗口
-              });
+          marker.on("mouseover", (e) => {
+            infoWindow.open(this.map, p.position); //后面的参数指的是经纬度，在此显示窗口
+          });
 
-              marker.on("mouseout", (e) => {
-                infoWindow.close();
-              });
-              this.markerCache[type].push(marker)
-              markers.push(marker);
-            });
-            return markers;
-          }
+          marker.on("mouseout", (e) => {
+            infoWindow.close();
+          });
+          this.markerCache[type].push(marker);
+          markers.push(marker);
+        });
+        return markers;
+      }
     },
     closeInfoWindow() {
       this.map.clearInfoWindow();
@@ -693,7 +777,32 @@ export default {
       cursor: pointer;
     }
   }
-
+  .map-m {
+    width: 355px;
+    height: 13px;
+    background: url("../assets/images/Vector (4).png") no-repeat;
+    position: absolute;
+    bottom: 30px;
+    left: 26%;
+    display: flex;
+    justify-content: space-between;
+    .map-num{
+      display: inline-block;
+     margin-top: -15px;
+     margin-left: 22px;
+     cursor: pointer;
+     color: #45a4ab;
+    }
+    .map-num:last-child{
+      margin-right: 5px;
+    }
+    .active{
+      color: #fff;
+    }
+    .last-num{
+      margin-right: 5px;
+    }
+  }
   #map-container {
     width: 100%;
     height: 100%;
@@ -845,7 +954,6 @@ export default {
 }
 </style>
 
-
 <style lang="less">
 @keyframes show-layer {
   from {
@@ -864,7 +972,7 @@ export default {
   }
 }
 
-@keyframes show-box  {
+@keyframes show-box {
   from {
     transform: translate(-50%, -50%) scale(0);
     opacity: 0;
@@ -874,7 +982,7 @@ export default {
     opacity: 1;
   }
 }
-@keyframes close-box  {
+@keyframes close-box {
   from {
     transform: translate(-50%, -50%) scale(1);
     opacity: 1;
@@ -886,17 +994,17 @@ export default {
 }
 
 .show-box {
-  animation: .8s linear show-box;
+  animation: 0.8s linear show-box;
 }
 .close-box {
-  animation: .8s linear close-box;
+  animation: 0.8s linear close-box;
 }
 
 .show {
-  animation: .8s linear show-layer;
+  animation: 0.8s linear show-layer;
 }
 .close {
-  animation: .8s linear close-layer;
+  animation: 0.8s linear close-layer;
 }
 
 .center-pointer {
@@ -913,7 +1021,7 @@ export default {
   position: fixed;
   width: 507px;
   height: 336px;
-  background: url('@/assets/images/legend-bg.png') no-repeat;
+  background: url("@/assets/images/legend-bg.png") no-repeat;
   transform: translate(-50%, -50%);
 }
 .legend-list {
@@ -940,13 +1048,13 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: all .8s;
+  transition: all 0.8s;
   /*改变旋转基点*/
   transform-origin: 150px 150px;
   /*最开始让小菜单隐藏*/
   transform: scale(0);
   border-radius: 50%;
-  background: url('@/assets/images/legend-icon-bg.png') no-repeat;
+  background: url("@/assets/images/legend-icon-bg.png") no-repeat;
   opacity: 1;
   cursor: pointer;
   transform: rotate(var(--rotate));
@@ -954,6 +1062,6 @@ export default {
 }
 
 .legend-item.active {
-  background: url('@/assets/images/legend-active-bg.png') no-repeat;
+  background: url("@/assets/images/legend-active-bg.png") no-repeat;
 }
 </style>

app/src/views/Home/components/AlarmingSituationDynamics/ModalContent.vue

@@ -34,7 +34,13 @@
       </border-panel>
     </div>
     <div style="width: 1000px">
-      <Map :data="mapData" v-if="mapData" />
+      <Map :data="mapData" v-if="mapData&& Mapflag == false" />
+      <img
+          v-if="Mapflag == true"
+          class="map-null"
+          src="../../../../assets/images/map-null1.png"
+          alt=""
+        />
     </div>
     <div>
       <border-panel
@@ -132,6 +138,7 @@ export default {
       mapData: null,
       middleType: "map",
       flag: "",
+      Mapflag:false
     };
   },
   methods: {
@@ -144,12 +151,16 @@ export default {
       }
     },
     getMapData() {
+      var latreg =
+        /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,15}|180)$/;
+      var longrg =
+        /^(\-|\+)?([0-8]?\d{1}\.\d{0,15}|90\.0{0,15}|[0-8]?\d{1}|90)$/;
+
       // console.log(this.params.id);
       this.mapData = null;
       getZhd({
         id: this.params.id,
       }).then((res) => {
-        console.log(res);
         if (res.data && res.data.data) {
           this.mapData = {
             jd: res.data.data.dqjd1,
@@ -159,6 +170,14 @@ export default {
             showzhd: true,
           };
         }
+        if (
+          !longrg.test(Number(res.data.data.dqwd1)) &&
+          !latreg.test(Number(res.data.data.dqjd1))
+        ) {
+          this.Mapflag = true;
+        } else {
+          this.Mapflag = false;
+        }
       });
     },
     getQueryString(name) {
@@ -296,4 +315,9 @@ export default {
     no-repeat;
   background-size: 78px 72px;
 }
+.map-null {
+  display: inline-block;
+  margin-top: 380px;
+  margin-left: 280px;
+}
 </style>

app/src/views/Home/components/AlarmingSituationDynamics/index.vue

@@ -85,6 +85,7 @@
         ref="alarmingSituationDynamics"
       >
         <ModalContent :selectTimes="times" :type="flag"></ModalContent>
+       
       </basic-modal>
     </div>
   </div>
@@ -129,6 +130,7 @@ export default {
       times: [],
       list: [],
       flag: "",
+      Mapflag:false
     };
   },
   watch: {
@@ -175,12 +177,11 @@ export default {
     },
     onClickHandler(idx) {
       if (idx == 5) {
-		this.times = []
-        this.flag = "text";
-      }else{
-		this.times = []
-		this.flag = null;
-	  }
+       this.$router.push('/police')
+      } else {
+        this.times = [];
+        this.flag = null;
+      }
       const date = new Date();
       if (idx === 0) {
         this.times = [moment(date).format("YYYY-MM-DD")];

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

@@ -77,54 +77,56 @@
       <div class="tab" :class="addClass(2)" @click="changeTab(2)">火灾预测</div>
     </div>
     <div style="display: flex; flex-direction: column" v-show="idx == 1">
+      
       <div
-        style="
-          border: 1px solid #ccc;
+       style="display: flex; align-items: center; justify-content: space-between; margin: 0px 15px;"
+      >
+      <img style="width:162px; height: 6px;" src="../../../assets/images/Group11.png" alt="">
+       <div  style="
+          
           height: 20px;
           width: 50px;
-          margin-left: 370px;
           line-height: 20px;
-        "
-      >
-        单位：栋
+        "> 单位：栋</div>
       </div>
       <!-- 风险预警 -->
       <div
-        style="display: flex; flex-wrap: wrap; justify-content: space-around"
+        style="display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 20px;"
       >
         <div class="card" >
           <div class="left-card" @click="$emit('click-label', 'ZDFX')">
-            <div class="card-item">重大风险</div>
+            <div class="card-item">重大<br>风险</div>
           </div>
-          <div class="right-card" @click="showStice('重大风险')">
+          <div class="right-card" @click="showStice('重大风险')" style="color: red;">
             {{ showValue("重大风险") }}
           </div>
         </div>
-        <div class="card">
-          <div class="left-card" @click="$emit('click-label', 'JDFX')" style="background: #ff833d">
-            <div class="card-item">较大风险</div>
+        <div class="card card1" >
+          <div class="left-card" @click="$emit('click-label', 'JDFX')" >
+            <div class="card-item card-item1" style="color: #FF6B00; ">较大 <br>风险</div>
           </div>
-          <div class="right-card" @click="showStice('较大风险')">
+          <div class="right-card" @click="showStice('较大风险')" style="color: #FF6B00;">
             {{ showValue("较大风险") }}
           </div>
         </div>
-        <div class="card">
-          <div class="left-card" @click="$emit('click-label', 'YBFX')" style="background: #fbff3d">
-            <div class="card-item">一般风险</div>
+        <div class="card card2">
+          <div class="left-card" @click="$emit('click-label', 'YBFX')">
+            <div class="card-item" style="color: #FFE600; text-align: center;">一般<br>风险</div>
           </div>
-          <div class="right-card" @click="showStice('一般风险')">
+          <div class="right-card" @click="showStice('一般风险')" style="color: #FFE600;">
             {{ showValue("一般风险") }}
           </div>
         </div>
-        <div class="card">
-          <div class="left-card" @click="$emit('click-label', 'DFX')" style="background: #35c2ff">
-            <div class="card-item">低风险</div>
+        <div class="card card3">
+          <div class="left-card" @click="$emit('click-label', 'DFX')" >
+            <div class="card-item" style="color: #0085FF; text-align: center;">低风<br>险</div>
           </div>
-          <div class="right-card" @click="showStice('低风险（蓝色）')">
+          <div class="right-card" @click="showStice('低风险（蓝色）')" style="color: #0085FF;">
             {{ showValue("低风险") }}
           </div>
         </div>
       </div>
+      <img style="width:162px; height: 6px; margin-left:60%;" src="../../../assets/images/Group (1).png" alt="">
     </div>
     <!-- 预测 -->
     <div
@@ -139,6 +141,7 @@
           align-items: center;
           font-size: 16px;
           margin-left: 5px;
+          margin-top: 6px;
         "
       >
         <div class="time-on">近期防火重点预测</div>
@@ -222,7 +225,7 @@ export default {
           formatter: function (params) {
             const item = params[0]
             if (item.dataIndex === 11) {
-              return `${item.name}预测值:${item.data}`
+              return `${item.name}预测值:${item.data.value}`
             }
             return `${item.name}:${item.data}`
           },
@@ -359,13 +362,23 @@ export default {
               null,
               null,
               srcData[11].hzqs,
-              srcData[12].hzqs,
+              {
+                value: srcData[12].hzqs,
+                symbolSize:6,
+                itemStyle: {
+                  color: 'red',
+                  shadowBlur: 2,
+                  shadowColor: 'red'
+                }
+              },
             ],
+            
             lineStyle: {
               normal: {
                 type: "dotted",
                 color: "#fd87ab",
               },
+           
             },
           },
         ],
@@ -442,54 +455,82 @@ export default {
   // background: rgb(93, 169, 231);
   color: #fff;
 }
+
 .card {
   width: 200px;
-  height: 70px;
+  height: 61px;
+  background: url('../../../assets/images/dfxk (4).png') no-repeat;
+  background-size: 100% 99%;
   display: flex;
   margin-top: 16px;
-  .left-card {
-    width: 100px;
-    background: red;
-  }
+  // .left-card {
+  //   width: 100px;
+  //   background: red;
+  // }
   .right-card {
     flex: 1;
-    background: #fff;
-    color: #000;
-    font-size: 28px;
-    font-weight: 600;
-    text-align: center;
-    line-height: 70px;
+    // background: #fff;
+    // color: red;
+    font-size: 36px;
+    text-align: right;
+    padding-right: 10px;
+    line-height: 60px;
   }
   .card-item {
-    color: #000;
-    border: 1px solid rgb(194, 231, 234);
-    height: 40px;
-    width: 80%;
-    margin: auto;
-    line-height: 40px;
-    font-size: 14px;
-    margin-top: 15px;
-    text-align: center;
+    color: red;
+    font-size: 18px;
+   margin-left: 30px;
+   margin-top: 10px;
+   letter-spacing: 1px;
+    // margin: auto;
+    // line-height: 40px;
+    // font-size: 14px;
+    // margin-top: 15px;
+    // text-align: center;
   }
 }
+.card1{
+  // width: 200px;
+  // height: 61px;
+  background: url('../../../assets/images/dfxk (2).png') no-repeat ;
+ background-size: 100% 100%;
+//   display: flex;
+  
+}
+.card3{
+  // width: 200px;
+  // height: 61px;
+  background: url('../../../assets/images/dfxk (1).png') no-repeat ;
+ background-size: 100% 100%;
+//   display: flex;
+}
+.card2{
+  // width: 200px;
+  // height: 61px;
+  background: url('../../../assets/images/dfxk (3).png') no-repeat ;
+background-size: 100% 100%;
+//   display: flex;
+}
 .time-on {
   width: 120px;
-  height: 40px;
-  border: 1px solid rgb(10, 98, 171);
-  background: rgb(23, 114, 225);
+  height: 35px;
+  border: 1px solid rgb(105, 193, 208);
+  background: rgba(9, 204, 230, 0.3);
   font-size: 14px;
-  line-height: 40px;
+  line-height: 35px;
   text-align: center;
   margin-right: 5px;
 }
 .qhyy{
     width: 290px;
-    height: 40px;
-    line-height: 40px;
+    height: 37px;
+    line-height: 37px;
     font-size: 16px;
     text-align: left;
     padding: 0 10px;
-    background: #fff;
-    color: #000;
+    background: rgba(0, 213, 255, 0.18);
+    border: 1px solid rgba(0, 213, 255, 0.24);;
+    color: #FF4F4F;
+    text-align: center;
   }
 </style>