chore: 风险预警样式统一

app/src/views/Home/index.vue

@@ -81,7 +81,6 @@ import BasicInfo from "./components/BasicInfo.vue";
 import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics/index.vue";
 import AutonomousManagement from "./components/AutonomousManagement/index.vue";
 import HiddenDangerDetection from "./components/HiddenDangerDetection/index.vue";
-import MapCharts from "./components/MapCharts.vue";
 import MapChartsCategory from "./components/MapChartsCategory.vue";
 import RiskWarning from "./components/RiskWarning.vue";
 import WisdomFire from "./components/WisdomFire.vue";

app/src/views/Risk/index.vue

@@ -44,7 +44,7 @@
     </div>
     <div>
       <border-panel height="521px" style="margin-bottom: 6px" title="风险分布">
-        <Riskdistribution :qx="qx" @selectData="loadData" />
+        <Riskdistribution :qx="qx"  />
       </border-panel>
       <border-panel height="421px" style="margin-bottom: 6px" title="风险隐患">
         <RiskDanger :qx="qx" />
@@ -75,12 +75,12 @@ import Rectification from "./components/Rectification.vue";
 import Riskdistribution from "./components/Riskdistribution.vue";
 import RiskDanger from "./components/RiskDanger.vue";
 import SearchBox from "@/components/SearchBox.vue";
-import MapCharts from "../Home/components/MapCharts.vue";
+import MapCharts from "../Home/components/MapChartsCategory.vue";
 import fxyjCont from "./components/fxyjCont.vue";
 import YhModalContent from "../Detail/components/YhModalContent.vue";
 import BasicInfoModalContent from "../Home/components/BasicInfoModalContent.vue";
 import { formatCityData, createMapChartWindowInfo } from "../../utils";
-
+import { getDtskgzList } from '@/api/index'
 export default {
   name: "RiskPage",
   components: {
@@ -101,8 +101,18 @@ export default {
       fxyjIdex: 1,
       heatMap: [],
       params: {},
+      mapType: {
+        "红色": 90,
+        "橙色": 70,
+        "黄色": 50,
+        "蓝色": 30,
+        "绿色": 10
+      },
     };
   },
+  created() {
+    this.loadMapData()
+  },
   methods: {
     switchTo(params) {
       this.params = params;
@@ -117,21 +127,33 @@ export default {
     showLabel(params) {
       return createMapChartWindowInfo(
         { title: params.name },
-        () =>
-          `风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`
+        () => {
+          const item = params.data.meta
+          let res = `火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.火灾起数 || 0}</span>起 <br />`;
+          res += `亡人数 <span style="font-size: 24px;color:red;font-weight:bold;">${item.亡人数 || 0}</span>人 <br />`;
+          res += `直接财产损失 <span style="font-size: 24px;color:red;font-weight:bold;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元`;
+          return res;
+        }
       );
     },
     openBasicModal(val) {
       this.fxyjIdex = val;
       this.showModal("basicInfoModal");
     },
-    loadData(val) {
-      this.heatMap = formatCityData(
-        val.map((item) => ({
-          name: item.qy,
-          value: item.sl,
-        }))
-      );
+    loadMapData() {
+      getDtskgzList({
+        pageNum: 1,
+        pageSize: 42,
+      }).then((res) => {
+        let tempData = res.data.rows;
+        this.heatMap = formatCityData(
+          tempData.map((item) => ({
+            name: item.qx,
+            value: this.mapType[item.分区颜色],
+            meta: item
+          }))
+        );
+      });
     },
   },
 };