chore: 地图联动以及风险预警中的排查统计对接

app/src/assets/json/cq.json

@@ -6584,7 +6584,7 @@
       "type": "Feature",
       "properties": {
         "adcode": 500240,
-        "name": "石柱土家族自治县",
+        "name": "石柱县",
         "center": [108.112448, 29.99853],
         "centroid": [108.298494, 30.093676],
         "childrenNum": 0,
@@ -6831,7 +6831,7 @@
       "type": "Feature",
       "properties": {
         "adcode": 500241,
-        "name": "秀山土家族苗族自治县",
+        "name": "秀山县",
         "center": [108.996043, 28.444772],
         "centroid": [109.018121, 28.491722],
         "childrenNum": 0,
@@ -7021,7 +7021,7 @@
       "type": "Feature",
       "properties": {
         "adcode": 500242,
-        "name": "酉阳土家族苗族自治县",
+        "name": "酉阳县",
         "center": [108.767201, 28.839828],
         "centroid": [108.800321, 28.89987],
         "childrenNum": 0,
@@ -7296,7 +7296,7 @@
       "type": "Feature",
       "properties": {
         "adcode": 500243,
-        "name": "彭水苗族土家族自治县",
+        "name": "彭水县",
         "center": [108.166551, 29.293856],
         "centroid": [108.266309, 29.353956],
         "childrenNum": 0,
@@ -7523,4 +7523,4 @@
       }
     }
   ]
-}
+}

app/src/components/rate3D.vue

@@ -2,270 +2,269 @@
     <div class="chart-box">
         <div ref="chart" class="item" style="width: 96px; height:138px" />
     </div>
-  </template>
+</template>
   
-  <script>
-  import * as echarts from "echarts";
-  export default {
+<script>
+import * as echarts from "echarts";
+export default {
     props: {
         data: Number,
         text: String,
         title: String
     },
     data() {
-      return {
-        chart: null,
-      };
+        return {
+            chart: null,
+        };
     },
-    mounted() {
-      const chartDom = this.$refs.chart;
-      //   // 初始化图表实例
-      this.chart = echarts.init(chartDom);
-      this.initChart();
-      
-    },
-    methods: {
-      initChart() {
-      const  option = {
-    title: [{
-        text: this.title,
-        x: 'center',
-        top: '84%',
-        textStyle: {
-            color: '#fff',
-            fontSize:12,
-            // fontWeight: '100',
+    watch: {
+        data() {
+            this.initChart();
         }
-    }, {
-        text: this.text,
-        x: 'center',
-        top: '42%',
-        textStyle: {
-            fontSize: '12',
-            color: '#fdf914',
-            fontFamily: 'Lato',
-            // foontWeight: '600',
-        },
-    }],
-    polar: {
-        radius: ['74%', '53%'],
-        center: ['50%', '50%'],
-    },
-    angleAxis: {
-        max: 100,
-        show: false,
     },
-    radiusAxis: {
-        type: 'category',
-        show: true,
-        axisLabel: {
-            show: false,
-        },
-        axisLine: {
-            show: false,
-
-        },
-        axisTick: {
-            show: false
-        },
+    mounted() {
+        const chartDom = this.$refs.chart;
+        //   // 初始化图表实例
+        this.chart = echarts.init(chartDom);
+        this.initChart();
     },
-    series: [
-        {
-            name: '',
-            type: 'bar',
-            roundCap: true,
-            barWidth: 60,
-            showBackground: true,
-            backgroundStyle: {
-                color: 'rgba(66, 66, 66, .3)',
-            },
-            data: [this.data],
-            coordinateSystem: 'polar',
-            itemStyle: {
-                normal: {
-                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                        offset: 0,
-                        color: '#fdf914'
-                    }, {
-                        offset: 1,
-                        color: '#38a700'
-                    }]),
-                }
-            }
-        }, 
-        {
-            type: 'gauge',
-            name: '',
-            radius: '100%',
-            startAngle: '0',
-            endAngle: '-359.99',
-            splitNumber: '200',
-            center: ['50%', '50%'],
-            pointer: {
-                show: false
-            },
-            title: {
-                show: false
-            },
-            detail: {
-                show: false
-            },
-            data: [{
-                value: 95,
-                name: ''
-            }],
-            axisLine: {
-                lineStyle: {
-                    width: 20,
-                    opacity: 0
-                }
-            },
-            axisTick: {
-                show: false
-            },
-            splitLine: {
-                show: true,
-                length: 0,
-                lineStyle: {
-                    color: {
-                        type: 'linear',
-                        x: 1,
-                        y: 0,
-                        x2: 0,
-                        y2: 0,
-                        colorStops: [{
-                            offset: 0,
-                            color: '#111'
-                        }, {
-                            offset: 0.5,
-                            color: 'rgba(66, 66, 66, 1)',
-                        }, {
-                            offset: 1,
-                            color: '#111'
-                        }],
-                        globalCoord: false
+    methods: {
+        initChart() {
+            const option = {
+                title: [{
+                    text: this.title,
+                    x: 'center',
+                    top: '84%',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12,
+                        // fontWeight: '100',
+                    }
+                }, {
+                    text: this.text,
+                    x: 'center',
+                    top: '42%',
+                    textStyle: {
+                        fontSize: '12',
+                        color: '#fdf914',
+                        fontFamily: 'Lato',
+                        // foontWeight: '600',
                     },
-                    width: 1,
-                    type: 'solid',
+                }],
+                polar: {
+                    radius: ['74%', '53%'],
+                    center: ['50%', '50%'],
                 },
-            },
-            axisLabel: {
-                show: false
-            }
-        },
-        {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: ['100%', '82%'],
-            hoverAnimation: false,
-            center: ['50%', '50%'],
-            itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
+                angleAxis: {
+                    max: 100,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: 'category',
+                    show: true,
+                    axisLabel: {
+                        show: false,
                     },
-                    color: 'rgba(66, 66, 66, .4)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
-            },
-            data: [{
-                value: 100,
+                    axisLine: {
+                        show: false,
 
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: ['62.5%', '64%'],
-            hoverAnimation: false,
-            center: ['50%', '50%'],
-            itemStyle: {
-                normal: {
-                    labelLine: {
+                    },
+                    axisTick: {
                         show: false
                     },
-                    color: 'rgba(66, 66, 66, .3)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
-            },
-            data: [{
-                value: 100,
+                },
+                series: [
+                    {
+                        name: '',
+                        type: 'bar',
+                        roundCap: true,
+                        barWidth: 60,
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(66, 66, 66, .3)',
+                        },
+                        data: [this.data],
+                        coordinateSystem: 'polar',
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: '#fdf914'
+                                }, {
+                                    offset: 1,
+                                    color: '#38a700'
+                                }]),
+                            }
+                        }
+                    },
+                    {
+                        type: 'gauge',
+                        name: '',
+                        radius: '100%',
+                        startAngle: '0',
+                        endAngle: '-359.99',
+                        splitNumber: '200',
+                        center: ['50%', '50%'],
+                        pointer: {
+                            show: false
+                        },
+                        title: {
+                            show: false
+                        },
+                        detail: {
+                            show: false
+                        },
+                        data: [{
+                            value: 95,
+                            name: ''
+                        }],
+                        axisLine: {
+                            lineStyle: {
+                                width: 20,
+                                opacity: 0
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: true,
+                            length: 0,
+                            lineStyle: {
+                                color: {
+                                    type: 'linear',
+                                    x: 1,
+                                    y: 0,
+                                    x2: 0,
+                                    y2: 0,
+                                    colorStops: [{
+                                        offset: 0,
+                                        color: '#111'
+                                    }, {
+                                        offset: 0.5,
+                                        color: 'rgba(66, 66, 66, 1)',
+                                    }, {
+                                        offset: 1,
+                                        color: '#111'
+                                    }],
+                                    globalCoord: false
+                                },
+                                width: 1,
+                                type: 'solid',
+                            },
+                        },
+                        axisLabel: {
+                            show: false
+                        }
+                    },
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: ['100%', '82%'],
+                        hoverAnimation: false,
+                        center: ['50%', '50%'],
+                        itemStyle: {
+                            normal: {
+                                labelLine: {
+                                    show: false
+                                },
+                                color: 'rgba(66, 66, 66, .4)',
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(253, 249, 20, .3)',
+                            }
+                        },
+                        data: [{
+                            value: 100,
 
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: ['64.5%', '65.8%'],
-            hoverAnimation: false,
-            center: ['50%', '50%'],
-            itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
+                        }]
                     },
-                    color: 'rgba(66, 66, 66, .2)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
-            },
-            data: [{
-                value: 100,
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: ['62.5%', '64%'],
+                        hoverAnimation: false,
+                        center: ['50%', '50%'],
+                        itemStyle: {
+                            normal: {
+                                labelLine: {
+                                    show: false
+                                },
+                                color: 'rgba(66, 66, 66, .3)',
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(253, 249, 20, .3)',
+                            }
+                        },
+                        data: [{
+                            value: 100,
 
-            }]
-        },
-        {
-            name: '',
-            type: 'pie',
-            startAngle: 90,
-            radius: ['66.5%', '67.5%'],
-            hoverAnimation: false,
-            center: ['50%', '50%'],
-            itemStyle: {
-                normal: {
-                    labelLine: {
-                        show: false
+                        }]
                     },
-                    color: 'rgba(66, 66, 66, .1)',
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(253, 249, 20, .3)',
-                }
-            },
-            data: [{
-                value: 100,
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: ['64.5%', '65.8%'],
+                        hoverAnimation: false,
+                        center: ['50%', '50%'],
+                        itemStyle: {
+                            normal: {
+                                labelLine: {
+                                    show: false
+                                },
+                                color: 'rgba(66, 66, 66, .2)',
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(253, 249, 20, .3)',
+                            }
+                        },
+                        data: [{
+                            value: 100,
 
-            }]
-        },
-    ]
-};
-        this.chart.setOption(option);
-        //自适应图表
-        window.onresize = this.chart.resize;
-      },
-       numb(){
-    
-    myChart.setOption(option, true)
-},
+                        }]
+                    },
+                    {
+                        name: '',
+                        type: 'pie',
+                        startAngle: 90,
+                        radius: ['66.5%', '67.5%'],
+                        hoverAnimation: false,
+                        center: ['50%', '50%'],
+                        itemStyle: {
+                            normal: {
+                                labelLine: {
+                                    show: false
+                                },
+                                color: 'rgba(66, 66, 66, .1)',
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(253, 249, 20, .3)',
+                            }
+                        },
+                        data: [{
+                            value: 100,
 
+                        }]
+                    },
+                ]
+            };
+            this.chart.setOption(option);
+            //自适应图表
+            window.onresize = this.chart.resize;
+        }
     }
-    
-  };
-  </script>
-  
-  <style scoped lang="less">
+
+};
+</script>
+<style scoped lang="less">
 .chart-box {
     position: relative;
 }
+
 .chart-box::after {
     content: "";
     position: absolute;
     bottom: -32px;
-    background: url("../assets/images/bottom-icon.png") no-repeat  center;
+    background: url("../assets/images/bottom-icon.png") no-repeat center;
     width: 98px;
     height: 62px;
 }

app/src/views/Basic/index.vue

@@ -18,25 +18,26 @@
           position: relative;
           display: flex;
           padding-top: 150px;
-        ">
-				<MapCharts />
-				<div style="position: absolute; width: 500px; top: 10px; left: -20px">
-					<SearchBox :area.sync="qy" />
-				</div>
-			</div>
-		</div>
-		<div>
-			<border-panel height="521px" style="margin-bottom: 6px" title="区域分布">
-				<Regional :list="qyfbList" :qx="qy" v-if="qyfbList && qyfbList.length > 0" />
-			</border-panel>
-			<border-panel height="421px" style="margin-bottom: 6px" title="建筑统计">
-				<BuildingStatistics :list="jztjList" v-if="jztjList && jztjList.length > 0" />
-			</border-panel>
-		</div>
-		<basic-modal top="120px" ref="basicInfoModal" title="基本信息">
-			<BasicInfoModalContent :qy="qy" />
-		</basic-modal>
-	</div>
+        "
+      >
+        <MapCharts :qx="qy" @selectArea="area => qy = area" />
+        <div style="position: absolute; width: 500px; top: 10px; left: -20px">
+          <SearchBox :area.sync="qy"/>
+        </div>
+      </div>
+    </div>
+    <div>
+      <border-panel height="521px" style="margin-bottom: 6px" title="区域分布">
+        <Regional :list="qyfbList" :qx="qy" v-if="qyfbList && qyfbList.length > 0" />
+      </border-panel>
+      <border-panel height="421px" style="margin-bottom: 6px" title="建筑统计">
+        <BuildingStatistics
+          :list="jztjList"
+          v-if="jztjList && jztjList.length > 0"
+        />
+      </border-panel>
+    </div>
+  </div>
 </template>
 <script>
 	import BuildNum from "./components/BuildNum.vue";
@@ -139,4 +140,4 @@
 	};
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

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

@@ -94,10 +94,10 @@ export default {
     qx() {
       this.manageList()
     }
-},
+  },
   methods:{
     manageList() {
-      gettotalGlxx({...this.params, qx: this.qx}).then((res) => {
+      gettotalGlxx({...this.params, qx: this.qx === '重庆市' ? "" : this.qx}).then((res) => {
         this.fierList = res.data.rows.map((item) => {
           return {
             name: item.xfaqglxs,

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

@@ -14,17 +14,23 @@ export default {
   data() {
     return {
       list: [],
-      qy: "渝北区",
       params: {
         pageSize: 100,
         pageNum: 1,
       },
     };
   },
-
+  props: {
+    qx: String,
+  },
+  watch: {
+    qx() {
+      this.getWclList()
+    }
+  },
   methods: {
     getWclList() {
-      getGlnrWcl({ ...this.params, qy: this.qy }).then((res) => {
+      getGlnrWcl({ ...this.params, qy: this.qx === '重庆市' ? "" : this.qx }).then((res) => {
         const item = res.data.rows[0];
         this.list = [
           {

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

@@ -88,91 +88,97 @@
 	</div>
 </template>
 <script>
-	import VueSeamlessScroll from "vue-seamless-scroll";
-	import {
-		getZjgldwxx
-	} from "@/api/management.js";
-	export default {
-		name: "MaintenanceSupervision",
-		data() {
-			return {
-				ZjglList: [],
-				qxs: "万州区",
-				search: "",
-				options: [{
-						value: '有管理单位 (物业)',
-						label: '有管理单位 (物业)'
-					},
-					{
-						value: '有管理单位 (非物业)',
-						label: '有管理单位 (非物业)'
-					},
-					{
-						value: '居民自主管理',
-						label: '居民自主管理'
-					},
-					{
-						value: '街道社区代表',
-						label: '街道社区代表'
-					},
-					{
-						value: '其他',
-						label: '其他'
-					},
-					{
-						value: '无管理主体',
-						label: '无管理主体'
-					}
-				],
-				value: "",
-				checked: 0,
-			};
-		},
-		components: {
-			VueSeamlessScroll,
-		},
-		computed: {
-			classOption() {
-				return {
-					singleHeight: 43,
-				};
-			},
-		},
-		methods: {
-			colos() {
-				this.search = ''
-				this.value = ''
-				this.getZjglList()
-			},
-			change(idx) {
-				this.checked = idx;
-			},
-			resultType(text) {
-				return {
-					合格: "#23f59d",
-					不合格: "#df575b",
-					是: "#23f59d",
-					否: "#df575b",
-				} [text];
-			},
-			// 管理单位信息
-			getZjglList() {
-				const params = {
-					pageSize: 100,
-					pageNum: 1,
-					qx: this.qxs,
-					glzthztjzd: this.search,
-					xfaqglxs: this.value
-				}
-				getZjgldwxx(params).then(res => {
-					this.ZjglList = res.data.rows
-				})
-			}
-		},
-		created() {
-			this.getZjglList()
-		}
-	};
+import VueSeamlessScroll from "vue-seamless-scroll";
+import { getZjgldwxx} from "@/api/management.js";
+export default {
+  name: "MaintenanceSupervision",
+  data() {
+    return {
+       ZjglList:[],
+      search: "",
+      options: [
+        {
+          value: '有管理单位 (物业)',
+          label: '有管理单位 (物业)'
+        },
+        {
+          value: '有管理单位 (非物业)',
+          label: '有管理单位 (非物业)'
+        },
+        {
+          value: '居民自主管理',
+          label: '居民自主管理'
+        },
+        {
+          value: '街道社区代表',
+          label: '街道社区代表'
+        },
+        {
+          value: '其他',
+          label: '其他'
+        },
+        {
+          value: '无管理主体',
+          label: '无管理主体'
+        }
+      ],
+      value: "",
+      checked: 0,
+    };
+  },
+  props: {
+    qx: String
+  },
+  components: {
+    VueSeamlessScroll,
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 43,
+      };
+    },
+  },
+  watch: {
+    qx() {
+      this.getZjglList()
+    }
+  },
+  methods: {
+    colos(){
+      this.search=''
+      this.value=''
+      this.getZjglList()
+    },
+    change(idx) {
+      this.checked = idx;
+    },
+    resultType(text) {
+      return {
+        合格: "#23f59d",
+        不合格: "#df575b",
+        是: "#23f59d",
+        否: "#df575b",
+      }[text];
+    },
+     // 管理单位信息
+	getZjglList(){
+    const params={
+      pageSize: 100,
+        pageNum: 1,
+        qx: this.qx === '重庆市' ? "" : this.qx,
+        glzthztjzd:this.search,
+        xfaqglxs:this.value
+    }
+		getZjgldwxx(params).then(res=>{
+			this.ZjglList=res.data.rows
+		})
+	}
+  },
+    created(){
+    this.getZjglList()
+  }
+};
 </script>
 
 <style scoped lang="less">
@@ -351,4 +357,4 @@
 	.el-select-dropdown.el-popper li.el-select-dropdown__item.hover.selected span {
 		color: #fff !important;
 	}
-</style>
+</style>

app/src/views/Fire/index.vue

@@ -9,12 +9,12 @@
         <Construction :qx="qx" :glztList="glztList" :wbxsList="wbxsList" />
       </border-panel>
       <border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
-        <ManagementContent />
+        <ManagementContent :qx="qx" />
       </border-panel>
     </div>
     <div>
       <div style="width: 900px; height: 1000px; display: flex;justify-content: center; margin-top: 150px;">
-        <MapCharts />
+        <MapCharts :qx="qx" @selectArea="area => qx = area" />
       </div>
     </div>
     <div>
@@ -30,7 +30,7 @@
         style="margin-bottom: 6px"
         title="建筑管理单位信息"
       >
-        <UnitInfo />
+        <UnitInfo :qx="qx"/>
       </border-panel>
     </div>
   </div>
@@ -49,7 +49,7 @@ import {
   getWbdwgljzpm,
 } from "@/api/management.js";
 export default {
-  name: "Fire",
+  name: "FirePage",
   components: {
     Management,
     UnitInfo,
@@ -72,13 +72,22 @@ export default {
       },
     };
   },
+  watch: {
+    qx() {
+      this.unitZt();
+      this.getWbxsList();
+      this.getDwfbList();
+      this.getDwpmList();
+      this.getWbdwList()
+    }
+  },
   methods: {
     // 管理主体
     unitZt() {
       getGlzts({
         pageSize: 100,
         pageNum: 1,
-        jzszqx: this.qx,
+        jzszqx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.glztList = res.data.rows;
       });
@@ -88,7 +97,7 @@ export default {
       getWbxxs({
         pageSize: 100,
         pageNum: 1,
-        qx: this.qx,
+        qx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.wbxsList = res.data.rows;
       });
@@ -98,7 +107,7 @@ export default {
       getGldwgljzpm({
         pageSize: 100,
         pageNum: 1,
-        qx: this.qx,
+        qx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.gldListL = res.data.rows;
       });
@@ -108,7 +117,7 @@ export default {
       getJzrzdwpms({
         pageSize: 100,
         pageNum: 1,
-        jzszqx: this.qx,
+        jzszqx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.JzrzdList = res.data.rows;
       });
@@ -118,7 +127,7 @@ export default {
 		getWbdwgljzpm({
         pageSize: 100,
         pageNum: 1,
-        qx: this.qx,
+        qx: (this.qx === '重庆市' ? '' : this.qx ),
       }).then((res) => {
         this.wbdwList = res.data.rows;
       });

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

@@ -67,14 +67,17 @@ export default {
     },
     getPercent(bn, tq) {
       if (bn - tq === 0) {
-        return '0%'
+        return '—'
       }
       if (tq === 0) {
-        return '100%'
+        return '—'
       }
       return `${(parseInt((Math.abs(bn - tq) / tq).toFixed(2) * 100 ))}%`
     },
     getIcon(bn, tq) {
+      if(tq === 0) {
+        return null;
+      }
       if (bn -tq > 0) {
         return upIcon;
       } else if (bn - tq < 0){

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

@@ -405,7 +405,8 @@ export default {
         pageSize: 12,
         xzqy: this.qx
       }).then(res => {
-        const keys = Object.keys(this.month)
+        const keys = Object.keys(this.month).sort((a,b) => parseInt(a) - parseInt(b))
+        console.log(keys)
         const ret = res.data.rows
         this.data = [
           keys.map(item => {

app/src/views/FireCondition/index.vue

@@ -18,7 +18,7 @@
       <div>
         <div>
           <div style="width: 910px; display: flex; position: relative;">
-            <MapCharts />
+            <MapCharts  :qx="qx" @selectArea="area => qx = area" />
             <div style="position: absolute;width: 500px; left: 10px;top: 10px;">
               <search-box :area.sync="qx"/>
             </div>

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

@@ -8,11 +8,13 @@ import jsonCq from "@/assets/json/cq.json";
 
 export default {
   name: "MapCharts",
+  props: {
+    qx: String
+  },
   data() {
     return {
       timed: null,
       mapName: "chongqing",
-
       mapData: {
         北碚: [106.5, 29.81],
         城口: [108.6520475, 31.90676506],
@@ -47,7 +49,7 @@ export default {
         川东: [107.3488646, 29.68233099],
       },
       activeMap: jsonCq,
-      // mapIcon: require("@/assets/images/map-icon.png"),
+      activeArea: "",
       activeName: "重庆市",
       activeMapData: [],
       heatData: [
@@ -188,22 +190,23 @@ export default {
           value: 145,
         },
         {
-          name: "石柱土家族自治县",
+          name: "石柱县",
           value: 67,
         },
         {
-          name: "秀山土家族苗族自治县",
+          name: "秀山县",
           value: 87,
         },
         {
-          name: "酉阳土家族苗族自治县",
+          name: "酉阳县",
           value: 100,
         },
         {
-          name: "彭水苗族土家族自治县",
+          name: "彭水县",
           value: 123,
         },
       ],
+      mapChart: null
     };
   },
   // props: {
@@ -216,6 +219,7 @@ export default {
   //     required: false,
   //   },
   // },
+  
   watch: {
     heatDataList(val, oldVal) {
       let heatDataList = [
@@ -279,6 +283,12 @@ export default {
         this.drawMap();
       }
     },
+    qx(val) {
+      this.mapChart.dispatchAction({
+        type: "select",
+        name: val
+      })
+    }
   },
   created() {
     const array = [];
@@ -463,78 +473,32 @@ export default {
           trigger: "item",
           // position: "inside",
           position: "top",
-          backgroundColor: "rgba(51,204,204,0)",
-          // backgroundColor: "rgba(51,204,204,0.3)",
-          // formatter: function (params) {
-          //   // let res = params.name + "<br/>";
-          //   // let res = 666 + "<br/>";
-          //   let res = "";
-          //   // res +=
-          //   //   "<img style='width:85px;height:100px; margin-top:-50px' src='" +
-          //   //   mapIcon +
-          //   //   "'/>";
-          //   res +=
-          //     "<img style='width:85px;height:100px;margin-bottom:-50px' src='" +
-          //     mapIcon +
-          //     "'/>";
-          //   return res;
-          // },
+          // backgroundColor: "rgba(51,204,204,0)",
+          backgroundColor: "rgba(51,204,204,0.8)",
+          formatter: function (params) {
+            let res = params.name + "<br/>";
+            // let res = 666 + "<br/>";
+            // let res = "";
+            res += `隐患<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+            return res;
+          },
           textStyle: {
             color: "#fff",
           },
         },
-        // visualMap: {
-        //   show: false,
-        //   min: 0,
-        //   max: 10,
-        //   pieces: [
-        //     {
-        //       min: 10,
-        //     },
-        //     {
-        //       min: 5,
-        //       max: 10,
-        //     },
-        //     {
-        //       min: 1,
-        //       max: 5,
-        //     },
-        //     {
-        //       max: 1,
-        //     },
-        //   ],
-        //   inRange: {
-        //     color: ["#ffff00", "#ff0000"],
-        //   },
-
-        //   textStyle: {
-        //     color: "#fff",
-        //   },
-        // },
         visualMap: {
           show: false,
           bottom: 20,
           left: 10,
-          // color: ["#b5f8ff", "#235d99"],
-          // min: 1000,
-          // max: 38000000,
           inRange: {
             color: [
-              // '#313695',
-              // '#4575b4',
-              // '#74add1',
-              // '#abd9e9',
-              // '#e0f3f8',
-              // '#ffffbf',
-              // '#fee090',
-              "#fdae61",
-              "#f46d43",
-              "#d73027",
-              "#a50026",
+              '#313695',
+              '#4575b4',
+              '#74add1',
+              '#abd9e9',
+              '#e0f3f8'
             ],
           },
-          // min: 0,
-          // max: maxMap > 0 ? maxMap : 1,
           calculable: true,
           textStyle: {
             color: "#fff",
@@ -543,6 +507,7 @@ export default {
         },
         series: [
           {
+            name: "总览",
             type: "map",
             label: {
               position: [0, 0],
@@ -622,85 +587,29 @@ export default {
           },
         ],
       };
-      const chart = echarts.init(mapChart, "light");
-      chart.setOption(option);
-      // chart.on('click',res=>{
-      //     return fn(res);
-      // });
+      this.mapChart = echarts.init(mapChart, "light");
+      this.mapChart.setOption(option);
       // 图表对象响应式设置
       window.addEventListener("resize", () => {
-        chart.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', "重庆市")
+            }
+          }
+        }
       });
-
-      // const myChart = this.$initCharts(mapChart, option);
-      // this.charts.setOption(option);
-      // myChart.on("click", (params) => {});
-
-      // let _this = this;
-      // let current = 0;
-      // clearInterval(_this.timed);
-
-      // _this.timed = setInterval(() => {
-      //   current++;
-      //   if (current == _this.activeMapData.length) {
-      //     current = 0;
-      //   }
-
-      //   // 取消高亮
-      //   myChart.dispatchAction({
-      //     type: "downplay",
-      //     seriesIndex: 0,
-      //   });
-      //   myChart.dispatchAction({
-      //     type: "hideTip",
-      //     seriesIndex: 0,
-      //   });
-      //   // 高亮
-      //   myChart.dispatchAction({
-      //     type: "highlight",
-      //     seriesIndex: 0,
-      //     dataIndex: current,
-      //   });
-      //   myChart.dispatchAction({
-      //     type: "showTip",
-      //     seriesIndex: 0,
-      //     dataIndex: current,
-      //   });
-      // }, 2000);
-
-      // myChart.on("mouseover", function () {
-      //   clearInterval(_this.timed);
-      // });
-      // myChart.on("mouseout", function () {
-      //   clearInterval(_this.timed);
-      //   _this.timed = setInterval(() => {
-      //     current++;
-      //     if (current == _this.activeMapData.length) {
-      //       current = 0;
-      //     }
-
-      //     // 取消高亮
-      //     myChart.dispatchAction({
-      //       type: "downplay",
-      //       seriesIndex: 0,
-      //     });
-      //     myChart.dispatchAction({
-      //       type: "hideTip",
-      //       seriesIndex: 0,
-      //     });
-      //     // 高亮
-      //     myChart.dispatchAction({
-      //       type: "highlight",
-      //       seriesIndex: 0,
-      //       dataIndex: current,
-      //     });
-      //     myChart.dispatchAction({
-      //       type: "showTip",
-      //       seriesIndex: 0,
-      //       dataIndex: current,
-      //     });
-      //   }, 2000);
-      // });
     },
   },
 };

app/src/views/Home/index.vue

@@ -18,7 +18,7 @@
     </div>
     <div class="display: flex;">
       <div class="map" style="position: relative;">
-        <MapCharts />
+        <MapCharts :qx="qy" @selectArea="area => qy = area" />
         <div style="position: absolute; top:10px; width: 500px;">
           <SearchBox :area.sync="qy"/>
         </div>

app/src/views/Iot/index.vue

@@ -29,7 +29,7 @@
       </border-panel>
     </div>
     <div class="map-container cover">
-      <MapCharts />
+      <MapCharts  :qx="qx" @selectArea="area => qx = area" />
       <div style="position: absolute;width: 500px; left:90px; top: 10px;">
         <SearchBox :area.sync="qx" />
       </div>

app/src/views/Risk/components/Investigation.vue

@@ -24,55 +24,48 @@
         </div>
         <ul class="item">
             <li class="row" >
-              <span class="time">{{ generalSituation.name }}</span>
-              <span class="person">{{ generalSituation.normalNum  }}</span>
-              <span class="result">{{ generalSituation.errorNum  }}</span>
+              <span class="time">整体情况</span>
+              <span class="person">{{ totalNumber.zcs  }}</span>
+              <span class="result">{{ totalNumber.ycs  }}</span>
             </li>
         </ul>
         <VueSeamlessScroll
-          :data="list"
+          :data="list[checked]"
           :class-option="classOption"
           class="warp"
+          v-if="reload"
         >
           <ul class="item">
-            <li class="row" v-for="(item, index) in list" :key="index">
-                <span class="time">{{ item[0] }}</span>
-                <span class="person">{{ item[1] }}</span>
-                <span class="result"
-                  :style="{
-                    color: resultType(item[2])
-                  }"
-                  >{{ item[2] }}</span
+            <li class="row" v-for="(item, index) in list[checked]" :key="index">
+                <span class="time">{{ item.yhxmxl }}</span>
+                <span class="person">{{ item.zcs }}</span>
+                <span class="result" >{{ item.ycs }}</span
                 >
               </li>
             </ul>
           </VueSeamlessScroll>
       </div>
-      
     </div>
   </template>
   <script>
   import VueSeamlessScroll from "vue-seamless-scroll";
+  import { pctj } from '@/api/risk'
   
   export default {
     name: 'MaintenanceSupervision',
+    props: {
+      qx: String
+    },
     data() {
       return {
         list: [
-          ["防火卷帘", 41, 4],
-          ["室内消火栓系统", 106, 22],
-          ["机械防、排烟系统", 365, 65],
-          ["火灾自动报警系统", 365, 65],
-          ["室内消火栓系统", 365, 65],
-          ["室内消火栓系统", 365, 65],
-          ["室内消火栓系统", 365, 65],
+          [],
+          [],
+          [],
+          []
         ],
-        generalSituation: {
-          name: '整体情况',
-          normalNum: 3700,
-          errorNum: 653,
-        },
         checked: 0,
+        reload: true
       }
     },
     components: {
@@ -81,22 +74,51 @@
     computed: {
       classOption() {
         return {
-          singleHeight: 36,
+          singleHeight: 36
         };
       },
+      totalNumber() {
+        const data = this.list[this.checked]
+        return data.reduce((item, cur) => {
+          return {
+            zcs: item.zcs + cur.zcs,
+            ycs: item.ycs + cur.ycs
+          }
+        }, {zcs: 0, ycs: 0})
+      }
+    },
+    watch: {
+      qx:{
+        handler(){
+          this.loadData()
+        },
+        immediate: true
+      }
     },
     methods: {
       change(idx) {
+        this.reload = false
         this.checked = idx
-        console.log("切换索引", idx)
+        setTimeout(() => {
+          this.reload = true
+        }, 200)
       },
-      resultType(text) {
-        return {
-          "合格": "#23f59d",
-          "不合格": "#df575b",
-          "是": "#23f59d",
-          "否": "#df575b"
-        }[text]
+      loadData() {
+        this.reload = false
+        pctj({
+          pageNum: 1,
+          pageSize: 100,
+          qx: (this.qx === "重庆市" ? "" : this.qx)
+        }).then(res => {
+          const temp = res.data.rows
+          this.list = [
+            temp.filter(item => item.yhxmdl === '消防设施'),
+            temp.filter(item => item.yhxmdl === '生命通道'),
+            temp.filter(item => item.yhxmdl === '用电用气'),
+            temp.filter(item => item.yhxmdl === '消防管理')
+          ]
+            this.reload = true
+        })
       }
     }
   }
@@ -154,6 +176,12 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      text-align: center;
+      // 超出隐藏
+      display: inline-block;
+      overflow: hidden ;
+      text-overflow: ellipsis ;
+      white-space:nowrap;
     }
 
     .result {

app/src/views/Risk/index.vue

@@ -23,7 +23,7 @@
           </div>
         <div>
           <div style="width: 950px; height: 1000px; display: flex; padding-top: 150px;position: relative;">
-            <MapCharts />
+            <MapCharts :qx="qx" @selectArea="area => qx = area" />
             <div style="position: absolute;width: 500px; left: 0px;top: 10px;">
               <search-box :area.sync="qx"/>
             </div>