Merge branch 'master' of http://113.204.105.114:10011/TwoKe/zhgkpt-datav

app/src/api/index.js

@@ -239,3 +239,10 @@ export function getJumpList(data) {
     data
   })
 }
+export function getDtskgzList(params) {
+  return request({
+    url: '/system/dtskgz/list',
+    method: 'GET',
+    params
+  })
+}

app/src/components/Monitor3D.vue

@@ -374,6 +374,12 @@
 					}
 					return "";
 				},
+				extraCssText: "z-index: 1000;",
+				backgroundColor: "#02809a",
+				borderColor: "rgba(0,213,255, .6)",
+				textStyle: {
+					color: "#fff",
+				},
 			},
 			xAxis3D: {
 				min: -1,
@@ -467,4 +473,4 @@
 		position: relative;
 		z-index: 1;
 	}
-</style>
+</style>

app/src/components/unit3D.vue

@@ -344,6 +344,12 @@ function getPie3D(pieData, internalDiameterRatio) {
         }
         return "";
       },
+      extraCssText: "z-index: 1000;",
+      backgroundColor: "#02809a",
+      borderColor: "rgba(0,213,255, .6)",
+      textStyle: {
+        color: "#fff",
+      },
     },
     title: [
       {

app/src/mixin/unit.js

@@ -55,8 +55,8 @@ const punishmentMixin = {
 					label: "无维保",
 				},
 				{
-					value: "（无）仅消火栓",
-					label: "（无）仅消火栓",
+					value: "无（仅消火栓）",
+					label: "无（仅消火栓）",
 				},
 			],
 			//管理主体

app/src/views/Basic/components/ChronologicDistributionStatistics.vue

@@ -58,10 +58,12 @@ export default {
               value[0].data[1]
             }</span> 栋<span>`;
           },
-          backgroundColor: "rgba(0,224,255,0.46)",
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
           borderColor: "rgba(0,213,255, .6)",
-          extraCssText: "z-index: 1000px;",
-          confine: true,
+          textStyle: {
+            color: "#fff",
+          },
         },
         grid: {
           right: "10px",

app/src/views/Basic/components/HeightDistribution.vue

@@ -62,7 +62,12 @@ export default {
             // 坐标轴指示器，坐标轴触发有效
             type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
           },
-          extraCssText: "z-index: 1000;"
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)",
+          textStyle: {
+            color: "#fff",
+          },
         },
         title: {
           top: "5%",

app/src/views/Fire/components/Construction.vue

@@ -8,7 +8,7 @@
 		</div>
 		<div class="unit maintenance">
 			<span class="unit-c">管理主体</span>
-			<div class="unit-num" v-for="(item,index) in glztList" :key="index" @click="showTab">
+			<div class="unit-num" v-for="(item,index) in glztList" :key="index" @click="showTab(item)">
 				<div>
 					<LinearText style="display: inline-block" :text="item.sl" fontSize="28px"></LinearText>
 					<span>家</span>
@@ -65,7 +65,7 @@
 			<higthList :flag="flag" :qx="qx" />
 		</basic-modal>
 		<basic-modal top="120px" ref="HistoryModal" name="管理单位查询">
-			<GldwModalContent :flag="flag" :qx="qx" />
+			<GldwModalContent :flag="flag" :qx="qx" :static="static" />
 		</basic-modal>
 	</div>
 </template>
@@ -96,7 +96,8 @@
 					pageSize: 100,
 					pageNum: 1,
 				},
-				flag: 1
+				flag: 1,
+				static:''
 			};
 		},
 		watch: {
@@ -125,7 +126,8 @@
 				this.showModal("higthModal");
 
 			},
-			showTab() {
+			showTab(val) {
+				this.static=val.sfzddw
 				this.showModal("HistoryModal");
 
 			}

app/src/views/Fire/components/GldwModalContent.vue

@@ -27,7 +27,8 @@
 		props: {
 			qy: String,
 			default: Object,
-			unitName: String
+			unitName: String,
+			static:String
 		},
 		watch: {
 			default: {
@@ -50,13 +51,22 @@
 				immediate: true,
 				deep: true,
 			},
+			static: {
+				handler(val) {
+					if (val) {
+						this.params.sfzddw = val
+						this.funRzdwList();
+					}
+				},
+				immediate: true,
+				deep: true,
+			},
 		},
 		methods: {
 			funRzdwList() {
 				getRzdw({
 					...this.params,
 				}).then((res) => {
-			       console.log(res,987);
 					this.tableData = res.data.rows;
 					this.total = res.data.total;
 				});

app/src/views/FireCondition/components/FireAddressType.vue

@@ -89,8 +89,12 @@ export default {
           },
           textStyle: {
             fontSize: 12,
+            color: "#fff",
           },
           formatter: "{c} <br/>{b}",
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)"
         },
         legend: {
           show: true,
@@ -105,7 +109,7 @@ export default {
           },
           data: this.legend,
         },
-        color: ["#00a2ff", "#4605ff", "#61d266", "#15a3e0", "#15e0d4"],
+        color: ["#00a2ff", "#6421BA", "#61d266", "#F4D156", "#15e0d4"],
         series: [
           // 数据展示层
           {

app/src/views/FireCondition/components/FireIndex/Chart.vue

@@ -51,11 +51,13 @@ export default {
               // 坐标轴指示器，坐标轴触发有效
               type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
             },
-            backgroundColor: "rgba(0,224,255,0.46)",
+            confine: true,
+            extraCssText: "z-index: 1000;",
+            backgroundColor: "#02809a",
             borderColor: "rgba(0,213,255, .6)",
             textStyle: {
-              color: '#fff',
-            }
+              color: "#fff",
+            },
           },
         xAxis: {
           type: 'category',

app/src/views/FireCondition/components/FireReason.vue

@@ -29,7 +29,12 @@ export default {
   },
   computed: {
     legend() {
-      return this.data.map((item) => item.name);
+      const temp = this.data.map((item) => item.name);
+      const idx = temp.findIndex(item => item === '其他')
+      if (idx < 0) return temp;
+      const qt = temp[idx]
+      temp.splice(idx, 1);
+      return [...temp, qt]
     },
   },
   created() {
@@ -57,8 +62,12 @@ export default {
           },
           textStyle: {
             fontSize: 12,
+            color: "#fff",
           },
-          formatter: "{c} <br/>{b}",
+          confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)",
         },
         legend: {
           show: true,
@@ -142,6 +151,13 @@ export default {
             },
             tooltip: {
               show: false,
+              confine: true,
+              extraCssText: "z-index: 1000;",
+              backgroundColor: "#02809a",
+              borderColor: "rgba(0,213,255, .6)",
+              textStyle: {
+                color: "#fff",
+              },
             },
             data: this.data.map((item) => ({
               ...item,
@@ -166,6 +182,13 @@ export default {
             },
             tooltip: {
               show: false,
+              confine: true,
+              extraCssText: "z-index: 1000;",
+              backgroundColor: "#02809a",
+              borderColor: "rgba(0,213,255, .6)",
+              textStyle: {
+                color: "#fff",
+              },
             },
             data: this.data.map((item) => ({
               ...item,
@@ -191,6 +214,13 @@ export default {
             },
             tooltip: {
               show: false,
+              confine: true,
+              extraCssText: "z-index: 1000;",
+              backgroundColor: "#02809a",
+              borderColor: "rgba(0,213,255, .6)",
+              textStyle: {
+                color: "#fff",
+              },
             },
             data: this.data.map((item) => ({
               ...item,
@@ -253,7 +283,6 @@ export default {
       }).then((res) => {
        let list=res.data.rows
        if(list.length >0){
-        console.log('----------33333',list);
         this.data = list.map((item) => ({
           name: item.qhyy1,
           value: item.sl,

app/src/views/FireCondition/components/FireTime.vue

@@ -195,10 +195,10 @@ export default {
           position: function (pt) {
             return [pt[0], "30%"];
           },
-          backgroundColor: "rgba(0,224,255,0.46)",
-          borderColor: "rgba(0,213,255, .6)",
-          extraCssText: "z-index: 1000;",
           confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)",
           textStyle: {
             color: "#fff",
           },

app/src/views/FireCondition/components/KeyIndex/KeyChart.vue

@@ -38,7 +38,9 @@ export default {
             // 坐标轴指示器，坐标轴触发有效
             type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
           },
-          backgroundColor: "rgba(0,224,255,0.46)",
+          confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
           borderColor: "rgba(0,213,255, .6)",
           textStyle: {
             color: "#fff",

app/src/views/Home/components/AutonomousManagement/Maintenance3D.vue

@@ -27,6 +27,10 @@ const legendItems = ref([
   }
 ])
 
+function showValue(name) {
+  return props.wbxsList.find(item => item.name === name)?.value
+}
+
 function initChart() {
   chart = echarts.init(pieChart3d.value);
   // 传入数据生成 option
@@ -254,21 +258,6 @@ function getPie3D(pieData, internalDiameterRatio) {
     typeof internalDiameterRatio !== "undefined"
       ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
       : 1 / 3;
-      let labelSeries = {
-    id: 'labelSeries',
-    type: 'bar3D',
-    //zlevel:-9,
-    barSize: [0, 0],
-    data: [],
-    label: {
-        show: true,
-        formatter: function (params) {
-            return `${params.value[3]}`;
-        },
-        color: '#fff',
-        fontSize: '18px'
-    },
-};
   // 为每一个饼图数据，生成一个 series-surface 配置
   for (let i = 0; i < pieData.length; i += 1) {
     sumValue += pieData[i].value;
@@ -317,20 +306,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     );
     startValue = endValue;
     legendData.push(series[i].name);
-     // 判断增加 label 效果 @20210613
-     if (pieData[i].label && pieData[i].label.show) {
-        let labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
-        labelSeries.data.push({
-            name: series[i].name,
-            value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
-            itemStyle: {
-                opacity: 1,
-            },
-        });
-    }
   }
-  // 将 labelSeries 添加进去 @20210613
-  series.push(labelSeries);
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
     tooltip: {
@@ -344,11 +320,13 @@ function getPie3D(pieData, internalDiameterRatio) {
         }
         return "";
       },
-      backgroundColor: "rgba(0,224,255,0.46)",
+      confine: true,
+      extraCssText: "z-index: 1000;",
+      backgroundColor: "#02809a",
       borderColor: "rgba(0,213,255, .6)",
       textStyle: {
-        color: '#fff',
-      }
+        color: "#fff",
+      },
     },
     xAxis3D: {
       min: -1,
@@ -415,7 +393,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     <ul class="legend">
       <li v-for="(legend,idx) in legendItems"  @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}</li>
+      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
     </ul>
   </div>
 </template>
@@ -438,7 +416,6 @@ function getPie3D(pieData, internalDiameterRatio) {
   & > li {
     list-style: none;
     cursor: pointer;
-    font-size: 14px;
   }
   & > li::before {
     content: "";

app/src/views/Home/components/AutonomousManagement/Overhaul3D.vue

@@ -21,6 +21,10 @@ const legendItems = ref([
     color: '#c3c71b'
   }
 ])
+function showValue(name) {
+  return props.dxjjList.find(item => item.name === name)?.value
+}
+
 function initChart() {
   chart = echarts.init(pieChart3d.value);
   // 传入数据生成 option
@@ -247,22 +251,6 @@ function getPie3D(pieData, internalDiameterRatio) {
     typeof internalDiameterRatio !== "undefined"
       ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
       : 1 / 3;
-  
-      let labelSeries = {
-    id: 'labelSeries',
-    type: 'bar3D',
-    //zlevel:-9,
-    barSize: [0, 0],
-    data: [],
-    label: {
-        show: true,
-        formatter: function (params) {
-            return `${params.value[3]}`;
-        },
-        color: '#fff',
-        fontSize: '18px'
-    },
-};
   // 为每一个饼图数据，生成一个 series-surface 配置
   for (let i = 0; i < pieData.length; i += 1) {
     sumValue += pieData[i].value;
@@ -311,20 +299,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     );
     startValue = endValue;
     legendData.push(series[i].name);
-     // 判断增加 label 效果 @20210613
-     if (pieData[i].label && pieData[i].label.show) {
-        let labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
-        labelSeries.data.push({
-            name: series[i].name,
-            value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
-            itemStyle: {
-                opacity: 1,
-            },
-        });
-    }
   }
-  // 将 labelSeries 添加进去 @20210613
-  series.push(labelSeries);
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
     tooltip: {
@@ -338,11 +313,13 @@ function getPie3D(pieData, internalDiameterRatio) {
         }
         return "";
       },
-      backgroundColor: "rgba(0,224,255,0.46)",
+      confine: true,
+      extraCssText: "z-index: 1000;",
+      backgroundColor: "#02809a",
       borderColor: "rgba(0,213,255, .6)",
       textStyle: {
-        color: '#fff',
-      }
+        color: "#fff",
+      },
     },
     title: [
       {
@@ -409,7 +386,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     <ul class="legend">
       <li v-for="(legend,idx) in legendItems" @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}</li>
+      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
     </ul>
   </div>
 </template>
@@ -423,7 +400,7 @@ function getPie3D(pieData, internalDiameterRatio) {
 .container .legend {
   position: absolute;
   right: 10px;
-  top: 55px;
+  top: 130px;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -431,7 +408,6 @@ function getPie3D(pieData, internalDiameterRatio) {
   & > li {
     list-style: none;
     cursor: pointer;
-    font-size: 14px;
   }
   & > li::before {
     content: "";

app/src/views/Home/components/AutonomousManagement/PieChart3D.vue

@@ -33,6 +33,9 @@ const legendItems = ref([
     color: '#FF7A00'
   },
 ])
+function showValue(name) {
+  return props.glxsList.find(item => item.name === name)?.value
+}
 
 function initChart() {
   chart = echarts.init(pieChart3d.value);
@@ -259,21 +262,6 @@ function getPie3D(pieData, internalDiameterRatio) {
       ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
       : 1 / 3;
 
-  let labelSeries = {
-    id: 'labelSeries',
-    type: 'bar3D',
-    barSize: [0, 0],
-    data: [],
-    label: {
-      show: true,
-      formatter: function (params) {
-          return `${params.value[3]}`;
-      },
-      color: '#fff',
-      fontSize: '14px'
-    }
-};
-
   // 为每一个饼图数据，生成一个 series-surface 配置
   for (let i = 0; i < pieData.length; i += 1) {
     sumValue += pieData[i].value;
@@ -322,20 +310,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     );
     startValue = endValue;
     legendData.push(series[i].name);
-    // 判断增加 label 效果 @20210613
-    if (pieData[i].label && pieData[i].label.show) {
-        let labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
-        labelSeries.data.push({
-            name: series[i].name,
-            value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
-            itemStyle: {
-                opacity: 1,
-            },
-        });
-    }
   }
-  // 将 labelSeries 添加进去 @20210613
-  series.push(labelSeries);
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
     tooltip: {
@@ -349,11 +324,13 @@ function getPie3D(pieData, internalDiameterRatio) {
         }
         return "";
       },
-      backgroundColor: "rgba(0,224,255,0.46)",
+      confine: true,
+      extraCssText: "z-index: 1000;",
+      backgroundColor: "#02809a",
       borderColor: "rgba(0,213,255, .6)",
       textStyle: {
-        color: '#fff',
-      }
+        color: "#fff",
+      },
     },
     title: [
       {
@@ -419,7 +396,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     <ul class="legend">
       <li v-for="(legend,idx) in legendItems"  @click="$emit('click-item', legend.name)" :style="{
         '--bg': legend.color
-      }"  :key="idx">{{ legend.name }}</li>
+      }"  :key="idx">{{ legend.name }}({{ showValue(legend.name) }})</li>
     </ul>
   </div>
 </template>
@@ -442,7 +419,6 @@ function getPie3D(pieData, internalDiameterRatio) {
   & > li {
     list-style: none;
     cursor: pointer;
-    font-size: 14px;
   }
   & > li::before {
     content: "";
@@ -481,7 +457,7 @@ function getPie3D(pieData, internalDiameterRatio) {
 }
 
 .chart {
-  width: 440px;
+  width: 400px;
   height: 100%;
   position: relative;
   z-index: 1;

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

@@ -42,7 +42,6 @@ export default {
       getWbxs({ ...this.params, qy: this.qy === "重庆市" ? "" : this.qy }).then(
         (res) => {
           let list = res.data.rows;
-      
           list = res.data.rows.map((item) => {
             return [
               {
@@ -84,7 +83,6 @@ export default {
     getWtype() {
       getDxjj({ ...this.params, qy: this.qy === "重庆市" ? "" : this.qy }).then(
         (res) => {
-        
           let lists = res.data.rows;
           lists = res.data.rows.map((item) => {
             return [
@@ -100,7 +98,6 @@ export default {
               name: '无（消防设施有问题）',
               value: item.wdxjjxfssywt,
             },
-          
             ]
           });
           this.dxjjList =lists[0];

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

@@ -15,6 +15,7 @@ export default {
     return {
       list: [],
       BasicLsit: [],
+      listGids:{},
       // 传参
       params: {
         pageSize: 100,
@@ -44,6 +45,8 @@ export default {
               this.unitjNum = item.ljgcszhht;
               this.allNum = item.gyjz + item.zzjz + item.ggjz;
             });
+            this.listGids=res.data.rows[0]
+       
           }
         }
       );
@@ -65,7 +68,7 @@ export default {
   <div class="basic-info">
     <div class="__left">
       <FirstHight :BasicLsit="BasicLsit" :allNum="allNum" />
-      <ul style="display: flex">
+      <ul style="display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 14px;">
         <li @click="showModlus('居民建筑')">
           <span
             style="
@@ -76,9 +79,9 @@ export default {
               margin: 0 4px;
             "
           ></span>
-          <span>居民建筑</span>
+          <span>居民建筑({{ listGids.zzjz }})</span>
         </li>
-        <li @click="showModlus('公共建筑')">
+        <li @click="showModlus('公共建筑')" >
           <span
             style="
               display: inline-block;
@@ -88,9 +91,9 @@ export default {
               margin: 0 4px;
             "
           ></span>
-          <span>公共建筑</span>
+          <span>公共建筑({{ listGids.ggjz }})</span>
         </li>
-        <li @click="showModlus('工业建筑')">
+        <li @click="showModlus('工业建筑')" style="margin-top: 8px;">
           <span
             style="
               display: inline-block;
@@ -100,7 +103,7 @@ export default {
               margin: 0 4px;
             "
           ></span>
-          <span>工业建筑</span>
+          <span>工业建筑({{ listGids.gyjz }})</span>
         </li>
       </ul>
     </div>

app/src/views/Home/components/FireIndex/Chart.vue

@@ -51,11 +51,13 @@ export default {
               // 坐标轴指示器，坐标轴触发有效
               type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
             },
-            backgroundColor: "rgba(0,224,255,0.46)",
+            confine: true,
+            extraCssText: "z-index: 1000;",
+            backgroundColor: "#02809a",
             borderColor: "rgba(0,213,255, .6)",
             textStyle: {
-              color: '#fff',
-            }
+              color: "#fff",
+            },
           },
         xAxis: {
           type: 'category',

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

@@ -1,7 +1,7 @@
 <template>
- <div>
-  <div ref="chart" class="item" style="width: 220px; height: 200px" />
- </div>
+  <div>
+    <div ref="chart" class="item" style="width: 220px; height: 200px" />
+  </div>
 </template>
 
 <script>
@@ -44,7 +44,7 @@ export default {
       const option = {
         title: [
           {
-            text: this.allNum ,
+            text: this.allNum,
             top: "40%",
             textAlign: "center",
             left: "49%",
@@ -77,7 +77,13 @@ export default {
         // },
         tooltip: {
           show: true,
-          extraCssText: "z-index: 1000;"
+          confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)",
+          textStyle: {
+            color: "#fff",
+          },
         },
         series: [
           // 最外层圆
@@ -87,12 +93,11 @@ export default {
             center: ["50%", "50%"],
             hoverAnimation: false,
             data: [
-             
               {
                 value: data.map((item) => {
                   return item.gyjz;
                 }),
-                name: '居民建筑',
+                name: "居民建筑",
                 itemStyle: {
                   normal: {
                     color: {
@@ -115,7 +120,7 @@ export default {
                 value: data.map((item) => {
                   return item.ggjz;
                 }),
-                  name: '公共建筑',
+                name: "公共建筑",
                 itemStyle: {
                   normal: {
                     color: {
@@ -138,7 +143,7 @@ export default {
                 value: data.map((item) => {
                   return item.zzjz;
                 }),
-                name: '工业建筑',
+                name: "工业建筑",
                 itemStyle: {
                   normal: {
                     color: {
@@ -161,7 +166,10 @@ export default {
             label: {
               show: true,
               position: "outside",
-              formatter: "{d}%",
+              // formatter: "{d}%",
+              formatter: (params) => {
+                return `${params.value}\n ${params.percent}%`;
+              },
               color: "#FFFFFF",
             },
             labelLine: {

app/src/views/Home/components/HiddenDangerDetection/HiddenDangerType.vue

@@ -5,9 +5,9 @@
       <span>单位：条</span>
     </div>
     <div style="cursor: pointer">
-      <div ref="chart" class="item" style="width: 230px; height: 221px" />
-      <ul style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 160px; margin: auto; margin-bottom: 30px; font-size: 14px;">
-        <li @click="showModlus('消防设施')" style="margin-bottom: 5px;">
+      <div ref="chart" class="item" style="width: 240px; height: 211px" />
+      <ul style="display: flex; flex-wrap: wrap;   margin: auto; margin-bottom: 30px; font-size: 13px;">
+        <li @click="showModlus('消防设施')" style="margin-bottom: 5px; margin-right: 5px;">
           <span
             style="
               display: inline-block;
@@ -17,7 +17,7 @@
               margin: 0 4px;
             "
           ></span>
-          <span>消防设施</span>
+          <span>消防设施({{ yhType[0].value }})</span>
         </li>
         <li @click="showModlus('生命通道')">
           <span
@@ -29,9 +29,9 @@
               margin: 0 4px;
             "
           ></span>
-          <span>生命通道</span>
+          <span>生命通道({{ yhType[1].value }})</span>
         </li>
-        <li @click="showModlus('用电用气')">
+        <li @click="showModlus('用电用气')" style="margin-right: 5px;" >
           <span
             style="
               display: inline-block;
@@ -41,7 +41,7 @@
               margin: 0 4px;
             "
           ></span>
-          <span>用电用气</span>
+          <span>用电用气({{ yhType[2].value }})</span>
         </li>
         <li @click="showModlus('消防管理')">
           <span
@@ -53,7 +53,7 @@
               margin: 0 4px;
             "
           ></span>
-          <span>消防管理</span>
+          <span>消防管理({{ yhType[3].value }})</span>
         </li>
       </ul>
     </div>
@@ -84,6 +84,7 @@ export default {
   watch: {
     yhType: {
       handler(val) {
+        console.log('----隐患排序',val);
         if (val.length > 0) {
           this.$nextTick(() => {
             // 获取dom容器
@@ -116,9 +117,13 @@ export default {
           },
           textStyle: {
             fontSize: 12,
+            color: "#fff",
           },
           formatter: "{c} <br/>{b}",
-          extraCssText: "z-index: 1000;"
+          confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)"
         },
         // legend: {
         //   show: true,
@@ -148,8 +153,9 @@ export default {
                 show: true,
                 position: "outside",
                 formatter: (params) => {
-                  return `{value|${params.value}}`;
+                  return `{value|${params.value}}\n ${params.percent}%`;
                 },
+                // formatter: "{d}%",
                 padding: [0, -90],
                 align: "center",
                 rich: {
@@ -194,6 +200,14 @@ export default {
             },
             tooltip: {
               show: false,
+              formatter: "{c} <br/>{b}",
+              confine: true,
+              extraCssText: "z-index: 1000;",
+              backgroundColor: "#02809a",
+              borderColor: "rgba(0,213,255, .6)",
+              textStyle: {
+                color: "#fff",
+              },
             },
             data: data.map((item) => ({
               value: item.value,

app/src/views/Home/components/HiddenDangerDetection/RectificationChart.vue

@@ -58,9 +58,13 @@ export default {
           },
           textStyle: {
             fontSize: 12,
+                color: "#fff",
           },
           formatter: "{c} <br/>{b}",
-          extraCssText: "z-index: 1000;"
+          confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)"
         },
         title: {
           formatter: "3276存在隐患数",
@@ -140,6 +144,10 @@ export default {
             },
             tooltip: {
               show: false,
+              confine: true,
+              extraCssText: "z-index: 1000;",
+              backgroundColor: "#02809a",
+              borderColor: "rgba(0,213,255, .6)"
             },
             data: data.map((item) => ({
               value: item.value,

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

@@ -0,0 +1,553 @@
+<template>
+  <div class="map-box" ref="map"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import jsonCq from "@/assets/json/cq.json";
+import toolUtils from "@/utils/echartsTooltip";
+import { toInt } from '@/utils'
+
+
+export default {
+  name: "MapCharts",
+  props: {
+    qx: String,
+    mapHeatData: {
+      type: Array,
+      default: () => []
+    },
+    formatter: {
+      type: Function,
+      default: function (params) {
+        let res = params.name + "<br/>";
+        res += `隐患<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+        return res;
+      }
+    }
+  },
+  data() {
+    return {
+      timed: null,
+      mapName: "chongqing",
+      mapData: {
+        北碚: [106.5, 29.81],
+        城口: [108.6520475, 31.90676506],
+        大足: [105.7692868, 29.65392091],
+        垫江: [107.4004904, 30.24903189],
+        丰都: [107.7461781, 29.91492542],
+        奉节: [109.3758974, 30.98202119],
+        合川: [106.2833096, 30.09766756],
+        江北: [106.6214893, 29.64821182],
+        江津: [106.2647885, 28.98483627],
+        开州: [108.1818518, 31.29466521],
+        南岸: [106.6379653, 29.47704825],
+        南川: [107.1406799, 29.12047319],
+        彭水: [108.2573507, 29.36444557],
+        綦南: [106.8036647, 28.96872774],
+        黔江: [108.7559876, 29.44290625],
+        石柱: [108.2438988, 30.07512144],
+        市区: [106.4377397, 29.52648606],
+        市辖区: [106.4377397, 29.52648606],
+        铜梁: [106.0616035, 29.81036286],
+        潼南: [105.811692, 30.13795513],
+        万州: [108.0828876, 30.73353669],
+        巫山: [109.8779184, 31.09568937],
+        巫溪: [109.2970739, 31.48090521],
+        武隆: [107.6831317, 29.36831708],
+        秀山: [108.9997005, 28.49462861],
+        永川: [105.8347961, 29.41042605],
+        酉阳: [108.7911679, 28.88330557],
+        云阳: [108.7533957, 30.96025875],
+        长寿: [107.24, 29.95],
+        忠县: [107.9279014, 30.33522658],
+        川东: [107.3488646, 29.68233099],
+      },
+      activeMap: jsonCq,
+      activeArea: "",
+      activeName: "重庆市",
+      activeMapData: [],
+      // 区块图
+      heatData: [
+        {
+          name: "万州区",
+          value: 0
+        },
+        {
+          name: "涪陵区",
+          value: 0,
+        },
+        {
+          name: "渝中区",
+          value: 0,
+        },
+        {
+          name: "大渡口区",
+          value: 0,
+        },
+        {
+          name: "江北区",
+          value: 0,
+        },
+        {
+          name: "沙坪坝区",
+          value: 0,
+        },
+        {
+          name: "九龙坡区",
+          value: 0,
+        },
+        {
+          name: "南岸区",
+          value: 0,
+        },
+        {
+          name: "北碚区",
+          value: 0,
+        },
+        {
+          name: "綦江区",
+          value: 0,
+        },
+        {
+          name: "大足区",
+          value: 0,
+        },
+        {
+          name: "渝北区",
+          value: 0,
+        },
+        {
+          name: "巴南区",
+          value: 0,
+        },
+        {
+          name: "黔江区",
+          value: 0,
+        },
+        {
+          name: "长寿区",
+          value: 0,
+        },
+        {
+          name: "江津区",
+          value: 0,
+        },
+        {
+          name: "合川区",
+          value: 0,
+        },
+        {
+          name: "永川区",
+          value: 0,
+        },
+        {
+          name: "南川区",
+          value: 0,
+        },
+        {
+          name: "璧山区",
+          value: 0,
+        },
+        {
+          name: "铜梁区",
+          value: 0,
+        },
+        {
+          name: "潼南区",
+          value: 0,
+        },
+        {
+          name: "荣昌区",
+          value: 0,
+        },
+        {
+          name: "开州区",
+          value: 0,
+        },
+        {
+          name: "梁平区",
+          value: 0,
+        },
+        {
+          name: "武隆区",
+          value: 0,
+        },
+        {
+          name: "城口县",
+          value: 0,
+        },
+        {
+          name: "丰都县",
+          value: 0,
+        },
+        {
+          name: "垫江县",
+          value: 0,
+        },
+        {
+          name: "忠县",
+          value: 0,
+        },
+        {
+          name: "云阳县",
+          value: 0,
+        },
+        {
+          name: "奉节县",
+          value: 0,
+        },
+        {
+          name: "巫山县",
+          value: 0,
+        },
+        {
+          name: "巫溪县",
+          value: 0,
+        },
+        {
+          name: "石柱土家族自治县",
+          value: 0,
+        },
+        {
+          name: "秀山土家族苗族自治县",
+          value: 0,
+        },
+        {
+          name: "酉阳土家族苗族自治县",
+          value: 0,
+        },
+        {
+          name: "彭水苗族土家族自治县",
+          value: 0,
+        },
+      ],
+      mapChart: null
+    };
+  },
+  watch: {
+    qx(val) {
+      this.mapChart.dispatchAction({
+        type: "select",
+        name: val
+      })
+    },
+    mapHeatData: {
+      handler(val) {
+      if (val.length > 0) {
+          this.mapChart.setOption({
+            series: [
+              {
+                data: this.convertMapData(val)
+              }
+            ],
+            visualMap: {
+              max: this.calcMaxData(val),
+              pieces: (() => {
+                const maxData = this.calcMaxData(val)
+                const intData = toInt(Math.ceil(maxData / 5))
+                return [
+                  {min: intData*4, max: intData * 5, label: '重大风险'},
+                  {min: intData*3, max: intData * 4, label: '较大风险'},
+                  {min: intData*2, max: intData * 3, label: '一般风险'},
+                  {min: intData, max: intData * 2, label: '低风险'},
+                  {min: 0, max: intData, label: ' '},
+                ]
+              })()
+            }
+          })
+        }
+      },
+      deep: true
+    }
+  },
+  created() {
+    const array = [];
+    const _data = this.mapData;
+    for (const key in _data) {
+      array.push({
+        name: key,
+        value: _data[key],
+      });
+    }
+    this.activeMapData = array;
+  },
+  mounted() {
+    this.drawMap();
+  },
+  methods: {
+    convertMapData(data) {
+      const maxValue = (this.calcMaxData(data) / 5)
+      const intData = toInt(maxValue)
+      return data.map(item => ({...item,
+          label: {
+            color: item.value < intData * 3 ? '#000' : '#fff'
+          }
+        }))
+    },
+    calcMaxData(data) {
+      return Math.max(...data.map(item => item.value))
+    },
+    drawMap() {
+      const mapChart = this.$refs.map;
+      echarts.registerMap("chongqing", this.activeMap);
+      let data = this.heatData
+
+      const { mapName } = this;
+
+      const zoom = 1.27;
+      const aspectScale = 1.1;
+
+      const option = {
+        title: {
+          top: 0,
+          subtext: "",
+          x: "center",
+          textStyle: {
+            color: "#ccc",
+          },
+        },
+        geo: [
+          {
+            map: mapName,
+            zlevel: -1,
+            zoom,
+            aspectScale,
+            silent: true,
+            layoutCenter: ["50%", "50%"],
+            layoutSize: "100%",
+            roam: false,
+            itemStyle: {
+              normal: {
+                borderColor: "rgba(192,245,249,.8)",
+                borderWidth: 3,
+                shadowColor: "#6FFDFF",
+                shadowOffsetY: 0,
+                shadowBlur: 10,
+              },
+            },
+          },
+          {
+            show: true,
+            map: mapName,
+            zoom,
+            aspectScale,
+            layoutCenter: ["50%", "50%"],
+            layoutSize: "100%",
+            blur: {
+              label: { show: true, color: "#000" },
+            },
+            roam: false, // 是否开启鼠标滚轮缩放
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                color: "#fff",
+                borderColor: "#32CBE0",
+                borderWidth: 1.5,
+                areaColor: '#aaaaaa88'
+              },
+            },
+          },
+          {
+            type: "map",
+            map: mapName,
+            zlevel: -2,
+            zoom,
+            aspectScale,
+            layoutCenter: ["50%", "51.4%"],
+            layoutSize: "100%",
+            roam: false,
+            silent: true,
+            itemStyle: {
+              normal: {
+                borderColor: "rgba(35, 161, 184,0.5)",
+                shadowColor: "rgba(35, 161, 184,0.8)",
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: "#257AB2",
+              },
+            },
+          },
+          {
+            type: "map",
+            map: mapName,
+            zlevel: -3,
+            zoom,
+            aspectScale,
+            layoutCenter: ["50%", "52.4%"],
+            layoutSize: "100%",
+            roam: false,
+            silent: true,
+            itemStyle: {
+              normal: {
+                borderColor: "rgba(7, 65, 117,0.5)",
+                shadowColor: "rgba(7, 65, 117,0.8)",
+                shadowOffsetY: 15,
+                shadowBlur: 8,
+                areaColor: "#0A2763",
+              },
+            },
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+          position: "top",
+          backgroundColor: "rgba(0, 0, 0, 0.82)",
+          formatter: this.formatter,
+          textStyle: {
+            color: "#fff",
+          },
+          extraCssText: `z-index: 1000;margin:0px;padding:0px;
+  border: 1px solid rgba(61, 115, 255, 0.72);`,
+          borderWidth: 0,
+        },
+        visualMap: {
+          show: true,
+          type: 'piecewise',
+          bottom: 20,
+          right: 50,
+          max: this.calcMaxData(data),
+          inRange: {
+            color: [
+              '#ff0b0b',
+              '#ff833d',
+              '#fbff3d',
+              '#35c2ff',
+              '#5aed9f'
+            ].reverse(),
+          },
+          calculable: true,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          pieces: (() => {
+            const maxData = this.calcMaxData(data)
+            const intData = toInt(Math.ceil(maxData / 5))
+            return [
+              {min: intData*4, max: intData * 5, label: '重大风险'},
+              {min: intData*3, max: intData * 4, label: '较大风险'},
+              {min: intData*2, max: intData * 3, label: '一般风险'},
+              {min: intData, max: intData * 2, label: '低风险'},
+              {min: 0, max: intData, label: ' '},
+            ]
+          })()
+        },
+        series: [
+          {
+            name: "总览",
+            type: "map",
+            label: {
+              position: [0, 0],
+              normal: {
+                show: true,
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+              emphasis: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              color: "#fff",
+            },
+            select: {
+              label: {
+                // 选中区域的label(文字)样式
+                color: "#fff",
+              },
+              itemStyle: {
+                areaColor: "#75b9da",
+                borderColor: "#fff",
+                shadowColor: "#5a9cdd",
+                shadowBlur: 0,
+                shadowOffsetX: 0,
+                shadowOffsetY: 10,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#fff",
+                borderColor: "#75b9da", // 地图边缘线颜色
+                borderWidth: 2
+              },
+
+              emphasis: {
+                label: {
+                  fontSize: 24,
+                  textBorderColor: "#393523",
+                  textBorderWidth: 2,
+                },
+                borderColor: "#fff",
+                shadowColor: "#5a9cdd",
+                shadowBlur: 0,
+                shadowOffsetX: 0,
+                shadowOffsetY: 10,
+                areaColor: {
+                  type: "linear-gradient",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#06969d", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#1daedc",
+                    },
+                  ],
+                },
+              },
+            },
+            aspectScale, // 长宽比
+            zoom,
+            layoutCenter: ["50%", "50%"],
+            layoutSize: "100%",
+            map: mapName, // 使用
+            data: this.convertMapData(data),
+          },
+        ],
+      };
+      this.mapChart = echarts.init(mapChart, "light");
+      this.mapChart.setOption(option);
+    toolUtils.autoHover(this.mapChart, option, 24, 5000);
+      // 图表对象响应式设置
+      window.addEventListener("resize", () => {
+        this.mapChart.resize();
+      });
+      //
+      this.mapChart.on("click", (params) => {
+        if(params.seriesType === 'map'){
+          if (params.name !== this.activeArea) {
+            this.activeArea = params.name
+            this.$emit('selectArea', params.name)
+          } else {
+            if (this.activeArea === "") {
+            this.activeArea = params.name
+            this.$emit('selectArea', params.name)
+            } else {
+              this.activeArea = ""
+              this.$emit('selectArea', "重庆市")
+            }
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.map-box {
+  width: 100%;
+  /* height: 98%; */
+  height: 632px;
+  /* background: blue; */
+}
+</style>

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

@@ -12,7 +12,7 @@
             margin: 0 4px;
           "
         ></span>
-        <span>重大风险</span>
+        <span>重大风险({{ riskList[3].sl }})</span>
       </li>
       <li @click="showStice('较大风险')" style="margin-bottom: 12px;">
         <span
@@ -24,7 +24,7 @@
             margin: 0 4px;
           "
         ></span>
-        <span>较大风险</span>
+        <span>较大风险({{ riskList[2].sl }})</span>
       </li>
       <li @click="showStice('一般风险')" style="margin-bottom: 12px;">
         <span
@@ -36,7 +36,7 @@
             margin: 0 4px;
           "
         ></span>
-        <span>一般风险</span>
+        <span>一般风险({{ riskList[0].sl }})</span>
       </li>
       <li @click="showStice('低风险')">
         <span
@@ -48,7 +48,7 @@
             margin: 0 4px;
           "
         ></span>
-        <span>低风险</span>
+        <span>低风险({{ riskList[1].sl }})</span>
       </li>
     </ul>
   </div>

app/src/views/Home/index.vue

@@ -18,7 +18,7 @@
     </div>
     <div class="display: flex;">
       <div class="map" style="position: relative">
-        <MapCharts
+        <MapChartsCategory
           :mapHeatData="heatMap"
           :formatter="showLabel"
           :qx="qy"
@@ -81,14 +81,14 @@ 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";
 import FireIndex from "./components/FireIndex/index.vue";
 import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import zzglModul from "./components/zzglModul.vue";
-import { totaldata, getJqdt, getZxgjtj, getJrjzsbs } from "@/api/index.js";
+import { totaldata, getJqdt, getZxgjtj, getJrjzsbs, getDtskgzList } from "@/api/index.js";
 import { fxfb } from "@/api/risk";
 import { formatCityData, createMapChartWindowInfo } from "@/utils";
 
@@ -98,7 +98,7 @@ export default {
     BasicInfo,
     WisdomFire,
     AlarmingSituationDynamics,
-    MapCharts,
+    MapChartsCategory,
     RiskWarning,
     AutonomousManagement,
     HiddenDangerDetection,
@@ -124,6 +124,13 @@ export default {
       typeName: "",
       fxdjs:'',
       titleName:'',
+      mapType: {
+        "红色": 90,
+        "橙色": 70,
+        "黄色": 50,
+        "蓝色": 30,
+        "绿色": 10
+      },
       queryParams: {
         glxs: "", //管理形式
         wbxs: "", //维保形式
@@ -165,7 +172,10 @@ export default {
           title: params.name,
         },
         () => {
-          let res = `风险栋数 <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;
         }
       );
@@ -232,16 +242,16 @@ export default {
       this.showModal("autoManageModal");
     },
     loadMapData() {
-      fxfb({
+      getDtskgzList({
         pageNum: 1,
-        pageSize: 100,
+        pageSize: 42,
       }).then((res) => {
-        let tempData = res.data.rows.filter((item) => item.fxdj === "较大风险");
-        console.log(tempData);
+        let tempData = res.data.rows;
         this.heatMap = formatCityData(
           tempData.map((item) => ({
-            name: item.qy,
-            value: item.sl,
+            name: item.qx,
+            value: this.mapType[item.分区颜色],
+            meta: item
           }))
         );
       });

app/src/views/Iot/components/TotalityInfo.vue

@@ -20,7 +20,7 @@
 					<span class="online line">在线</span>
 				</div>
 				<div>
-					<span class="offline line">离线</span>
+					<span class="offline line">告警</span>
 				</div>
 			</div>
 		</div>
@@ -30,17 +30,17 @@
 					<img :src="item.imgs" alt="" />
 					<div style="width: 90%">
 						<div class="inline-bor">
-							<span style="font-size: 14px">{{ item.text }}</span>
+							<span style="font-size: 12px">{{ item.text }}</span>
 							<span class="calc-percent">{{ item.allnum }}/{{ item.average }}</span>个/栋
 						</div>
 						<div class="on-line">
 							<div>
 								<span class="online lines"></span>
-								<span style="font-size: 16px">{{ item.line }}/{{ item.linelds }}</span>(个/栋)
+								<span style="font-size: 14px">{{ item.line }}/{{ item.linelds }}</span>(个/栋)
 							</div>
 							<div>
 								<span class="offline lines"></span>
-								<span style="font-size: 16px">{{ item.offNum }}/{{ item.offNumlds }}</span>(个/栋)
+								<span style="font-size: 14px">{{ item.offNum }}/{{ item.offNumlds }}</span>(个/栋)
 							</div>
 						</div>
 					</div>
@@ -85,13 +85,13 @@
 				return {
 					设备总数: "#FFD74B",
 					在线: "#00FF66",
-					报警: "#FF4B23",
+					告警: "#FF4B23",
 				} [text];
 			},
 			dealData() {
 				this.list = [{
 						num: this.data.wlwlds || 0,
-						title: "已完成物联网建筑数(栋)",
+						title: "已接入物联网建筑数(栋)",
 						text: "设备总数",
 						allNum: this.data.jrsbzs || 0,
 					},

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
+          }))
+        );
+      });
     },
   },
 };