大型安保交互

README.md

@@ -3,6 +3,7 @@
 ### https://docs.apipost.cn/preview/61b2861af42252f6/a453b7fa01ec4c0f?target_id=2c54712b-9b38-4642-b3a9-7205d58072ca
 ### 地图 https://docs.qq.com/doc/p/45a9e62baebdf0205ee8e062dc788a6ab99f9386?pub=1&dver=2.1.0
 ## node-module插件模块引入
+## node 14.16.4
 
 ### 坐标系
 我们通常用经纬度来表示一个地理位置，但是由于一些原因，我们从不同渠道得到的经纬度信息可能并不是在同一个坐标系下。

package.json

@@ -54,4 +54,4 @@
         "terser-webpack-plugin": "^5.1.3",
         "vue-cli-plugin-element-plus": "0.0.13"
     }
-}
+}

src/assets/js/dataFormate.js

@@ -123,9 +123,13 @@ function getLastHalfYear() {
     let dateObj = {};
     if (month < 10) {
         month1 = '0' + month
+    } else {
+        month1 = month
     }
     if (day < 10) {
         day1 = '0' + day
+    } else {
+        day1 = day
     }
     dateObj.now = year + '-' + month1 + '-' + day1;
     //当前月的总天数

src/components/mixins/map-data1.js

@@ -50,7 +50,7 @@ export default {
             // 地图背景样式
             window.jMap.switchBaseLayer("blue");
 
-             /**
+            /**
              * 获取街镇信息
              */
             var options = {
@@ -77,7 +77,7 @@ export default {
             };
 
             window.jMap.addLayer("mh_dyn_district", [1], options);
-            
+
 
             // 街镇标题绘制
             // var qp = new JMapQueryParam({
@@ -101,14 +101,15 @@ export default {
             // new JMapQuery(window.jMap).execQuery(qp)
 
 
-           
+
         },
         /**
          * 安保区域
-         * @param {*} id 1大网格 2小网格 
          * @param {*} status 是否有图层
+         * @param {*} id 1大网格 2小网格 
+         * @param {*} query 搜索内容
          */
-        anbao(status,id){
+        anbao(status, id, query) {
             var that = this
             var color = [
                 // "#2c6395",
@@ -126,35 +127,35 @@ export default {
                 // "#4d6700",
                 // "#729900",
                 // "#729900",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", 
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", 
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", 
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", 
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", 
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", 
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", 
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", 
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", 
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", 
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", 
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", 
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", 
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", 
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", 
+                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
                 "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
 
 
-              ];
+            ];
             var JmapQuery = new JMapQuery(window.jMap); // JMap为初始化地图时，实例化的JMap对象
-            if(status){
+            if (status) {
                 window.jMap.Locate.clearLocate(); //清楚分布
                 // window.jMap.removeLayer();    //  空值清除所有已添加图层
             }
-            
+
 
             //大网格
-            if(id ==1){
-                setTimeout(()=>{
+            if (id == 1) {
+                setTimeout(() => {
                     // 例： 8.1 2 查询图层列表
                     var qp2 = new JMapQueryParam({
                         queryMapService: "mh_dyn_cywg",
@@ -167,17 +168,18 @@ export default {
                     JmapQuery.execQuery(qp2);
                     // 图层查询完毕的回调函数
                     function testQueryCallBack2(obj) {
+
                         var bigNewArr = [];
                         var name = [];
                         var bigArr = obj.features.filter(function(el) {
-                            return el.attributes.name.indexOf('新虹街道') > -1 
-                            || el.attributes.name.indexOf('华漕') > -1 
-                            || el.attributes.name.indexOf('七宝中片') > -1 
-                            || el.attributes.name.indexOf('航华网格') > -1 
-                            || el.attributes.name.indexOf('七宝北片网格') > -1 
-                            || el.attributes.name.indexOf('紫藤、红松') > -1 
-                            || el.attributes.name.indexOf('虹梅区域') > -1 
-    
+                            return el.attributes.name.indexOf('新虹街道') > -1 ||
+                                el.attributes.name.indexOf('华漕') > -1 ||
+                                el.attributes.name.indexOf('七宝中片') > -1 ||
+                                el.attributes.name.indexOf('航华网格') > -1 ||
+                                el.attributes.name.indexOf('七宝北片网格') > -1 ||
+                                el.attributes.name.indexOf('紫藤、红松') > -1 ||
+                                el.attributes.name.indexOf('虹梅区域') > -1
+
                         })
                         bigArr.forEach(function(item, index) {
                             var aaa = item.geometry.rings[0];
@@ -191,94 +193,69 @@ export default {
                             })
                             bigNewArr.push(newArr);
                             name.push(item.attributes.name)
-    
+
                         })
                         let arrayAll = [];
                         bigNewArr.forEach(function(item, index) {
                             var idx = index + 1;
                             setTimeout(() => {
-                                // 2区域分布
-                                var target = {
-                                    id: idx,
-                                    attributes: {
-                                        name: 
-                                        name[index] ==  "华漕镇处置网格二（纪王西片区）" ? "闵S1-1（纪王西网格）" 
-                                        : name[index] ==  "华漕镇处置网格一（纪王东片区）" ? "闵S1-2（纪王东网格）"
-                                        : name[index] ==  "华漕镇处置网格四（诸翟北片区）" ? "闵S1-3（诸翟北网格）"
-                                        : name[index] ==  "华漕镇处置网格五（诸翟南片区）" ? "闵S1-4（诸翟南网格）"
-                                        : name[index] ==  "华漕镇处置网格三（老华漕片区）" ? "闵S1-5（老华漕网格）"
-                                        : name[index] ==  "新虹街道处置网格二（爱博）" ? "闵S2-1（爱博网格）"
-                                        : name[index] ==  "新虹街道处置网格三（华美）" ? "闵S2-2（华美网格）"
-                                        : name[index] ==  "新虹街道处置网格一（枢纽）" ? "闵S2-3（枢纽网格）"
-                                        : name[index] ==  "新虹街道处置网格四（航华）" ? "闵S2-4（航华网格）"
-                                        : name[index] ==  "七宝镇处置网格一（七宝北片网格）" ? "闵S3-1（七宝北片网格）"
-                                        : name[index] ==  "七宝镇处置网格二（七宝中片网格）" ? "闵S3-2（七宝吴宝路网格）"
-                                        : name[index] ==  "七宝镇处置网格五（航华网格）" ? "闵S3-3（七宝航华网格）"
-                                        : name[index] ==  "虹桥镇处置网格四（紫藤、红松区域）" ? "闵S4-1（紫藤红松网格）"
-                                        : name[index] ==  "虹桥镇处置网格二（虹梅区域）" ? "闵S4-2（虹梅网格）"
-                                        : name[index]
-                                    },
-                                    position: item,
-                                    label: {
-                                        text:  
-                                        name[index] ==  "华漕镇处置网格二（纪王西片区）" ? "闵S1-1（纪王西网格）" 
-                                        : name[index] ==  "华漕镇处置网格一（纪王东片区）" ? "闵S1-2（纪王东网格）"
-                                        : name[index] ==  "华漕镇处置网格四（诸翟北片区）" ? "闵S1-3（诸翟北网格）"
-                                        : name[index] ==  "华漕镇处置网格五（诸翟南片区）" ? "闵S1-4（诸翟南网格）"
-                                        : name[index] ==  "华漕镇处置网格三（老华漕片区）" ? "闵S1-5（老华漕网格）"
-                                        : name[index] ==  "新虹街道处置网格二（爱博）" ? "闵S2-1（爱博网格）"
-                                        : name[index] ==  "新虹街道处置网格三（华美）" ? "闵S2-2（华美网格）"
-                                        : name[index] ==  "新虹街道处置网格一（枢纽）" ? "闵S2-3（枢纽网格）"
-                                        : name[index] ==  "新虹街道处置网格四（航华）" ? "闵S2-4（航华网格）"
-                                        : name[index] ==  "七宝镇处置网格一（七宝北片网格）" ? "闵S3-1（七宝北片网格）"
-                                        : name[index] ==  "七宝镇处置网格二（七宝中片网格）" ? "闵S3-2（七宝吴宝路网格）"
-                                        : name[index] ==  "七宝镇处置网格五（航华网格）" ? "闵S3-3（七宝航华网格）"
-                                        : name[index] ==  "虹桥镇处置网格四（紫藤、红松区域）" ? "闵S4-1（紫藤红松网格）"
-                                        : name[index] ==  "虹桥镇处置网格二（虹梅区域）" ? "闵S4-2（虹梅网格）"
-                                        : name[index],
-                                        font: "14px Helvetica",
-                                        color: "#fff",
-                                        pixelOffset: [0, -40]
-                                    }
-                                };
-                                var options = {
-                                    isZoom: 10,
-                                    camera: {
-                                        x: 121.4175597,
-                                        y: 31.119248,
-                                        radius: 18000.0,
-                                        offset: { heading: -4, pitch: -70, range: 0 },
-                                    },
-                                    click: regionLocateCallBack,
-                                    style: {
-                                        color: color[index],
-                                        transparency: 0.6,
-                                        outline: true,
-                                        outlineColor: 'blue',
+                                    // 2区域分布
+                                    var target = {
+                                        id: idx,
+                                        attributes: {
+                                            position: item[0],
+                                            name: name[index] == "华漕镇处置网格二（纪王西片区）" ? "闵S1-1（纪王西网格）" : name[index] == "华漕镇处置网格一（纪王东片区）" ? "闵S1-2（纪王东网格）" : name[index] == "华漕镇处置网格四（诸翟北片区）" ? "闵S1-3（诸翟北网格）" : name[index] == "华漕镇处置网格五（诸翟南片区）" ? "闵S1-4（诸翟南网格）" : name[index] == "华漕镇处置网格三（老华漕片区）" ? "闵S1-5（老华漕网格）" : name[index] == "新虹街道处置网格二（爱博）" ? "闵S2-1（爱博网格）" : name[index] == "新虹街道处置网格三（华美）" ? "闵S2-2（华美网格）" : name[index] == "新虹街道处置网格一（枢纽）" ? "闵S2-3（枢纽网格）" : name[index] == "新虹街道处置网格四（航华）" ? "闵S2-4（航华网格）" : name[index] == "七宝镇处置网格一（七宝北片网格）" ? "闵S3-1（七宝北片网格）" : name[index] == "七宝镇处置网格二（七宝中片网格）" ? "闵S3-2（七宝吴宝路网格）" : name[index] == "七宝镇处置网格五（航华网格）" ? "闵S3-3（七宝航华网格）" : name[index] == "虹桥镇处置网格四（紫藤、红松区域）" ? "闵S4-1（紫藤红松网格）" : name[index] == "虹桥镇处置网格二（虹梅区域）" ? "闵S4-2（虹梅网格）" : name[index]
+                                        },
+                                        position: item,
+                                        label: {
+                                            text: name[index] == "华漕镇处置网格二（纪王西片区）" ? "闵S1-1（纪王西网格）" : name[index] == "华漕镇处置网格一（纪王东片区）" ? "闵S1-2（纪王东网格）" : name[index] == "华漕镇处置网格四（诸翟北片区）" ? "闵S1-3（诸翟北网格）" : name[index] == "华漕镇处置网格五（诸翟南片区）" ? "闵S1-4（诸翟南网格）" : name[index] == "华漕镇处置网格三（老华漕片区）" ? "闵S1-5（老华漕网格）" : name[index] == "新虹街道处置网格二（爱博）" ? "闵S2-1（爱博网格）" : name[index] == "新虹街道处置网格三（华美）" ? "闵S2-2（华美网格）" : name[index] == "新虹街道处置网格一（枢纽）" ? "闵S2-3（枢纽网格）" : name[index] == "新虹街道处置网格四（航华）" ? "闵S2-4（航华网格）" : name[index] == "七宝镇处置网格一（七宝北片网格）" ? "闵S3-1（七宝北片网格）" : name[index] == "七宝镇处置网格二（七宝中片网格）" ? "闵S3-2（七宝吴宝路网格）" : name[index] == "七宝镇处置网格五（航华网格）" ? "闵S3-3（七宝航华网格）" : name[index] == "虹桥镇处置网格四（紫藤、红松区域）" ? "闵S4-1（紫藤红松网格）" : name[index] == "虹桥镇处置网格二（虹梅区域）" ? "闵S4-2（虹梅网格）" : name[index],
+                                            font: "14px Helvetica",
+                                            color: "#fff",
+                                            pixelOffset: [0, -40]
+                                        }
+                                    };
+                                    var options = {
+                                        isZoom: 10,
+                                        camera: {
+                                            x: 121.4175597,
+                                            y: 31.119248,
+                                            radius: 18000.0,
+                                            offset: { heading: -4, pitch: -70, range: 0 },
+                                        },
+                                        click: regionLocateCallBack,
+                                        style: {
+                                            color: color[index],
+                                            transparency: 0.6,
+                                            outline: true,
+                                            outlineColor: 'blue',
+                                        }
+
+                                    };
+                                    setTimeout(() => {
+                                        jMap.Locate.regionLocate(target, options);
+                                    }, 500)
+
+
+                                    // 分布点点击事件的回调函数
+                                    function regionLocateCallBack(obj) {
+                                        that.stores.gridDataChange(obj._attributes);
                                     }
-    
-                                };
-                                setTimeout(()=>{
-                                    jMap.Locate.regionLocate(target, options);
-                                },500)
-                                
-    
-                                // 分布点点击事件的回调函数
-                                function regionLocateCallBack(obj) {
-                                    that.stores.gridNameChange( obj._attributes.name);
-                                }
-    
-                            }, idx * 1)
-                            // item.forEach(function(i) {
-                            //     arrayAll.push(i)
-                            // })
+
+                                }, idx * 1)
+                                // item.forEach(function(i) {
+                                //     arrayAll.push(i)
+                                // })
                         })
                     }
-                },1000)
+                }, 1000)
             }
-            
+
             //居委会
-            if(id==2){
+            if (id == 2 && query) {
+                let queryName = ""
+                for (let i = 0; i < query.length; i++) {
+                    queryName = queryName ? `${queryName},'${query[i].mapGridName}'` : `'${query[i].mapGridName}'`
+                }
                 setTimeout(() => {
                     var name2 = [];
                     var qp3 = new JMapQueryParam({
@@ -287,97 +264,98 @@ export default {
                         //  queryGeometry: result[0],         //  默认进行属性查询，放开该段注释将在选定的几何空间内进行空间查询
                         // queryWhere: "name like '%纪东村村委会%' ", //  可自定义查询条件，也可不传该参数
                         // queryWhere: "grid_type in ('居委网格','村委网格') and subdistrict like '%华漕镇%' ", //  可自定义查询条件，也可不传该参数
-                        queryWhere: `name in ('沪星村村委会','九星村村委会','新龙村经济合作社','中春路第二居委会',
-'万科第四居委会',
-'万科城市花园第二居委会',
-'中春路居委会',
-'佳宝新村第一居委会',
-'万科城市花园第三居委会',
-'万科城市花园居委会',
-'沪星村村委会',
-'新龙村经济合作社',
-'吴宝路第一居委会',
-'塘北居委会',
-'塘南居委会',
-'吴宝路第二居委会',
-'吴宝路第三居委会',
-'蒲汇新村居委会',
-'京都苑居委会',
-'号上村经济合作社',
-'新龙村经济合作社',
-'航华一村第三居委会',
-'航华一村第四居委会',
-'航华二村第一居委会',
-'航华二村第四居委会',
-'航华一村第一居委会',
-'航华二村第三居委会',
-'航华四村第一居委会',
-'航华四村第四居委会',
-'航华四村第三居委会',
-'七韵美地苑居委会',
-'航华四村第二居委会',
-'航华三村第一居委会',
-'漕宝路居委会',
-'龙柏一村第一居委会',
-'龙柏一村第二居委会',
-'龙柏二村居委会',
-'兰竹居委会',
-'金汇华光城居委会',
-'西郊居委会',
-'虹鹿居委会',
-'红春公司',
-'华光花园居委会',
-'虹华苑居委会',
-'测绘院地图网格名称',
-'许浦村村委会',
-'西郊城第一居委会',
-'华漕村村委会',
-'南华路居委会',
-'王泥浜村村委会',
-'紫薇新村居委会',
-'诸翟村村委会',
-'诸翟居委会',
-'九韵城居委会',
-'诸新路居委会',
-'金丰城第一居委会',
-'美邻苑居委会',
-'爱博六村居委会',
-'杨家巷村村委会',
-'闵北路居委会(筹)',
-'西郊虹韵城居委会',
-'陈家角村村委会',
-'石皮弄村村委会',
-'纪东村村委会',
-'纪王居委会',
-'纪王村村委会',
-'银杏新村居委会',
-'红卫村村委会',
-'卫星村村委会',
-'纪西村村委会',
-'赵家村村委会',
-'鹫山村村委会',
-'爱博一村居委会',
-'爱博二村居委会',
-'爱博三村居委会',
-'爱博四村居委会',
-'华美路第二居委会',
-'航华一村第二居委会',
-'航华一村第五居委会',
-'航华一村第六居委会'
-                            ) and subdistrict in ('华漕镇','新虹街道','虹桥镇','七宝镇')`, //  可自定义查询条件，也可不传该参数
+                        // queryWhere: `name in ('沪星村村委会','九星村村委会','新龙村经济合作社','中春路第二居委会',
+                        //         '万科第四居委会',
+                        //         '万科城市花园第二居委会',
+                        //         '中春路居委会',
+                        //         '佳宝新村第一居委会',
+                        //         '万科城市花园第三居委会',
+                        //         '万科城市花园居委会',
+                        //         '沪星村村委会',
+                        //         '新龙村经济合作社',
+                        //         '吴宝路第一居委会',
+                        //         '塘北居委会',
+                        //         '塘南居委会',
+                        //         '吴宝路第二居委会',
+                        //         '吴宝路第三居委会',
+                        //         '蒲汇新村居委会',
+                        //         '京都苑居委会',
+                        //         '号上村经济合作社',
+                        //         '新龙村经济合作社',
+                        //         '航华一村第三居委会',
+                        //         '航华一村第四居委会',
+                        //         '航华二村第一居委会',
+                        //         '航华二村第四居委会',
+                        //         '航华一村第一居委会',
+                        //         '航华二村第三居委会',
+                        //         '航华四村第一居委会',
+                        //         '航华四村第四居委会',
+                        //         '航华四村第三居委会',
+                        //         '七韵美地苑居委会',
+                        //         '航华四村第二居委会',
+                        //         '航华三村第一居委会',
+                        //         '漕宝路居委会',
+                        //         '龙柏一村第一居委会',
+                        //         '龙柏一村第二居委会',
+                        //         '龙柏二村居委会',
+                        //         '兰竹居委会',
+                        //         '金汇华光城居委会',
+                        //         '西郊居委会',
+                        //         '虹鹿居委会',
+                        //         '红春公司',
+                        //         '华光花园居委会',
+                        //         '虹华苑居委会',
+                        //         '测绘院地图网格名称',
+                        //         '许浦村村委会',
+                        //         '西郊城第一居委会',
+                        //         '华漕村村委会',
+                        //         '南华路居委会',
+                        //         '王泥浜村村委会',
+                        //         '紫薇新村居委会',
+                        //         '诸翟村村委会',
+                        //         '诸翟居委会',
+                        //         '九韵城居委会',
+                        //         '诸新路居委会',
+                        //         '金丰城第一居委会',
+                        //         '美邻苑居委会',
+                        //         '爱博六村居委会',
+                        //         '杨家巷村村委会',
+                        //         '闵北路居委会(筹)',
+                        //         '西郊虹韵城居委会',
+                        //         '陈家角村村委会',
+                        //         '石皮弄村村委会',
+                        //         '纪东村村委会',
+                        //         '纪王居委会',
+                        //         '纪王村村委会',
+                        //         '银杏新村居委会',
+                        //         '红卫村村委会',
+                        //         '卫星村村委会',
+                        //         '纪西村村委会',
+                        //         '赵家村村委会',
+                        //         '鹫山村村委会',
+                        //         '爱博一村居委会',
+                        //         '爱博二村居委会',
+                        //         '爱博三村居委会',
+                        //         '爱博四村居委会',
+                        //         '华美路第二居委会',
+                        //         '航华一村第二居委会',
+                        //         '航华一村第五居委会',
+                        //         '航华一村第六居委会'
+                        //     ) and subdistrict in ('华漕镇','新虹街道','虹桥镇','七宝镇')`, //  可自定义查询条件，也可不传该参数
+                        queryWhere: `name in (${queryName}) and subdistrict in ('华漕镇','新虹街道','虹桥镇','七宝镇')`, //  可自定义查询条件，也可不传该参数
                         outFields: ["*"], //  返回字段信息
                         callBack: testQueryCallBack3
                     });
                     JmapQuery.execQuery(qp3);
+
                     function testQueryCallBack3(obj) {
                         let a = []
-                        for(let i =0;i<obj.features.length;i++){
-                            console.log(obj.features[i].attributes.grid_type)
+                        for (let i = 0; i < obj.features.length; i++) {
                             a[i] = {
-                                name:obj.features[i].attributes.name,
-                                subdistrict:obj.features[i].attributes.subdistrict,
-                            }
-                            // name2.push(obj.features[i].attributes.name)
+                                    name: obj.features[i].attributes.name,
+                                    subdistrict: obj.features[i].attributes.subdistrict,
+                                }
+                                // name2.push(obj.features[i].attributes.name)
                         }
                         var big2Arr = []
                         obj.features.forEach(function(item, index) {
@@ -395,49 +373,81 @@ export default {
                                 name2.push(item.attributes.name)
                             })
                         })
-                        
+
                         big2Arr.forEach(function(item, index) {
                             var idx = index + 1;
+                            setTimeout(() => {
+                                // 2区域分布
+                                var target = {
+                                    id: idx,
+                                    attributes: {
+                                        position: item[0],
+                                        name: name2[index]
+                                    },
+                                    position: item,
+                                    label: {
+                                        text: name2[index],
+                                        font: "12px Helvetica",
+                                        color: "#ccc",
+                                        pixelOffset: [0, -40]
+                                    }
+                                };
+                                var options = {
+                                    isZoom: true,
+                                    click: regionLocateCallBack2,
+                                    style: {
+                                        color: "#68afc1",
+                                        transparency: 0.6,
+                                        outline: true,
+                                        outlineColor: 'blue',
+                                    }
+
+                                };
                                 setTimeout(() => {
-                                    // 2区域分布
-                                    var target = {
-                                        id: idx,
-                                        attributes: {
-                                            name:  name2[index]
-                                        },
-                                        position: item,
-                                        label: {
-                                            text:  name2[index],
-                                            font: "12px Helvetica",
-                                            color: "#ccc",
-                                            pixelOffset: [0, -40]
-                                        }
-                                    };
-                                    var options = {
-                                        isZoom: true,
-                                        click: regionLocateCallBack2,
-                                        style: {
-                                            color: "#68afc1",
-                                            transparency: 0.6,
-                                            outline: true,
-                                            outlineColor: 'blue',
-                                        }
-    
-                                    };
-                                    setTimeout(()=>{
                                         jMap.Locate.regionLocate(target, options);
-                                    },500)
+                                    }, 500)
                                     // 分布点点击事件的回调函数
-                                    function regionLocateCallBack2(obj) {
-                                        console.log(obj); // obj为返回值
-                                    }
-    
-                                }, idx * 1)
+                                function regionLocateCallBack2(obj) {
+                                    that.stores.gridDataChange(obj._attributes);
+                                }
+
+                            }, idx * 1)
                         })
                     }
-                }, 2000); 
+                }, 2000);
+            }
+
+        },
+        /**
+         * 安保气泡窗
+         * @param {*} data 
+         */
+        anbaoPopup(data) {
+            var children = []
+
+            if (data.type == 15) {
+                children = [
+                    ["街道：", data.content.streetTown, 12],
+                    ["安监所人员：", data.content[0].type1, 12],
+                    ["城运中心人员：", data.content[0].type2, 12],
+                    ["消防助理员：", data.content[0].type3, 12],
+                ]
             }
-            
+            if (data.type == 16) {
+                children = [
+                    ["街道：", data.content[0].streetTown, 12],
+                    ["小网格人员：", data.content[0].type1, 12],
+                    ["小网格长：", data.content[0].type2, 12],
+                ]
+            }
+            let arrayList = [{
+                title: [data.name, true],
+                children: []
+            }]
+            arrayList[0].children = children
+            data.gisX = data.position.x
+            data.gisY = data.position.y
+            this.popup(data, arrayList, true, null, 1)
         },
         /**
          *添加动态图层
@@ -501,9 +511,7 @@ export default {
         // },
 
         // 安保分布点点击事件的回调函数
-        regionLocateCallBack(obj) {
-            console.log(obj); // obj为返回值
-        },
+        regionLocateCallBack(obj) {},
 
         /**
          * @聚合撒点
@@ -525,9 +533,7 @@ export default {
             };
             jMap.ClusterMap.show(data, options);
         },
-        clickFlag(val) {
-            console.log(val);
-        },
+        clickFlag(val) {},
         randomColor() {
             var color = "#";
             //for循环中，如果后面仅有一条语句，{}可省略不写
@@ -542,7 +548,6 @@ export default {
          *街镇切换
          */
         streetTownSwitch(data) {
-            //     console.log(data);
             let sf = 2800.0;
             if (data.id == 12) {
                 //区缩放比例调整
@@ -637,12 +642,13 @@ export default {
 
                                 type == "三合一" ? this.stores.sadianIcon.shy : type == "实时警情" ? this.stores.sadianIcon.ssjq :
 
-                                type == "本年度重点事项推进情况" && val.status == 1 ? this.stores.sadianIcon.ywc : type == "本年度重点事项推进情况" && val.status == 2 ? this.stores.sadianIcon.jxz : type == "本年度重点事项推进情况" && val.status == 3 ? this.stores.sadianIcon.zbz : 
+                                type == "本年度重点事项推进情况" && val.status == 1 ? this.stores.sadianIcon.ywc : type == "本年度重点事项推进情况" && val.status == 2 ? this.stores.sadianIcon.jxz : type == "本年度重点事项推进情况" && val.status == 3 ? this.stores.sadianIcon.zbz :
 
-                                type == "高风险" ? this.stores.sadianIcon.gfx : type == "较高风险" ? this.stores.sadianIcon.jgfx : type == "一般风险" ? this.stores.sadianIcon.ybfx : type == "低风险" ? this.stores.sadianIcon.dfx : 
+                                type == "高风险" ? this.stores.sadianIcon.gfx : type == "较高风险" ? this.stores.sadianIcon.jgfx : type == "一般风险" ? this.stores.sadianIcon.ybfx : type == "低风险" ? this.stores.sadianIcon.dfx :
 
                                 type == "单位巡检" ? this.stores.sadianIcon.dwxj : type == "物联网设备" ? this.stores.sadianIcon.dwxj :
-                                
+
+
                                 this.stores.sadianIcon.trsy,
 
                             // this.jqzhczIcon3 : val.type == "4" ?
@@ -920,7 +926,7 @@ export default {
                                     ],
                                 }, ];
                                 this.popup(val._attrbutes, arrayList, true)
-                            }else if (val.attrbutes.facilityType == "22") {
+                            } else if (val.attrbutes.facilityType == "22") {
                                 let msgParse = JSON.parse(val.attrbutes.extendData)
                                 let arrayList = [{
                                     title: [val.attrbutes.facilityName, true],
@@ -931,11 +937,11 @@ export default {
                                         ["巡检部位：", msgParse.test1, 24],
                                         ["巡检人员：", msgParse.test2, 24],
                                         ["巡检情况：", msgParse.test3, 24],
-                                        
+
                                     ],
                                 }, ];
                                 this.popup(val._attrbutes, arrayList, true)
-                            }else if(type == "物联网设备"){
+                            } else if (type == "物联网设备") {
                                 let arrayList = [{
                                     title: [val.attrbutes.buildName, true],
                                     children: [
@@ -945,7 +951,7 @@ export default {
                                         ["地上（层）：", val.attrbutes.aboveFloor, 24],
                                         ["地下（层）：", val.attrbutes.underFloor, 24],
 
-                                        
+
                                     ],
                                 }, ];
                                 this.popup(val._attrbutes, arrayList, true)
@@ -964,7 +970,7 @@ export default {
 
                         }
                         //大型安保 、火灾数据分析
-                        if (pageType == "security-plan" || pageType == "fire-data-analysis") {
+                        if (pageType == "security-plan") {
                             let arrayList = [{
                                 title: ["案件详情", true],
                                 children: [
@@ -989,6 +995,51 @@ export default {
                                 this.popup(val._attrbutes, arrayList, true)
                             }
                         }
+                        //火灾数据分析
+                        if (pageType == "fire-data-analysis") {
+                            if (type == "历史火灾") {
+                                let arrayList = [{
+                                    title: ["案件详情", true],
+                                    children: [
+                                        ["案件编号：", val.attrbutes.ajbh, 24],
+                                        ["案件描述：", val.attrbutes.bcxx, 24],
+                                        ["报警时间：", val.attrbutes.tzsj, 24],
+                                        ["案件类型：", val.attrbutes.ajlx, 24],
+                                        ["警情类别：", type, 24],
+                                        ["警情等级：", val.attrbutes.ajdj, 24],
+                                        ["调动车辆：", val.attrbutes.cdcl, 24],
+                                        ["处置对象：", val.attrbutes.czdx, 24],
+                                        ["主责中队：", val.attrbutes.zhongdui, 24],
+                                        ["案件状态：", val.attrbutes.ajzt, 24],
+                                        ["到场时间：", val.attrbutes.cssj, 24],
+                                        ["控制时间：", val.attrbutes.kzsj, 24],
+                                        ["熄灭时间：", val.attrbutes.xmsj, 24],
+                                        ["返队时间：", val.attrbutes.fdsj, 24],
+                                        ["所属街道：", val.attrbutes.streettown, 24],
+                                    ],
+                                }, ];
+                                this.popup(val._attrbutes, arrayList, true)
+                            }
+                            if (type == "伤人火灾" || type == "亡人火灾") {
+                                let arrayList = [{
+                                    title: ["案件详情", true],
+                                    children: [
+                                        ["火灾序号：", val.attrbutes.fireNumber, 24],
+                                        ["所属街道：", val.attrbutes.street, 24],
+                                        ["起火地点：", val.attrbutes.fireAddress, 24],
+                                        ["起火时间：", val.attrbutes.fireTime, 24],
+                                        ["直接财产损失：", val.attrbutes.directPropertyLoss + "万", 24],
+                                        ["过火面积：", val.attrbutes.burnedArea + "㎡", , 24],
+                                        ["受灾户数：", val.attrbutes.affectedHouse + "户", 24],
+                                        ["受灾人数：", val.attrbutes.victimNumber + "人", 24],
+                                        ["死亡人数：", val.attrbutes.deathToll + "人", 24],
+                                        ["受伤人数：", val.attrbutes.injuredNumber + "人", 24],
+                                        ["起火经过：", val.attrbutes.fireProcess, 24],
+                                    ],
+                                }, ];
+                                this.popup(val._attrbutes, arrayList, true)
+                            }
+                        }
                         //消防救援站点
                         if (pageType == "rescue-station") {
                             if (type == "科普教育基地") {
@@ -1142,7 +1193,6 @@ export default {
                     },
                 });
             }
-
         },
         //聚合点击事件
         clusterMapCallBack(clusterPointArr, clickPoint) {
@@ -1175,7 +1225,10 @@ export default {
                 this.popup(val, arrayList, true)
             }
         },
-
+        /**
+         * 热力图
+         * @param {} data 
+         */
         heatMap(data) {
             let target = []
             if (data.length > 0) {
@@ -1187,22 +1240,25 @@ export default {
                     target[i].x = x
                     target[i].y = y
                 }
+                let options = {
+                    style: {
+                        minOpacity: 0.6,
+                        maxOpacity: 0.9,
+                        radius: 50,
+                        gradient: {
+                            '.10': 'green',
+                            '.45': 'yellow',
+                            '.65': 'orange',
+                            '.80': 'red'
+                        }
+                    },
+                    isZoom: false
+                }
+                jMap.HeatMap.show(target, options)
+            } else {
+                jMap.HeatMap.hide()
             }
-            let options = {
-                style: {
-                    minOpacity: 0.6,
-                    maxOpacity: 0.9,
-                    radius: 50,
-                    gradient: {
-                        '.10': 'green',
-                        '.45': 'yellow',
-                        '.65': 'orange',
-                        '.80': 'red'
-                    }
-                },
-                isZoom: false
-            }
-            jMap.HeatMap.show(target, options)
+
         },
         // 无经纬度创建标点和点击事件
         addMarkerAddress(lnglats) {
@@ -1520,10 +1576,14 @@ export default {
         },
 
         /**
-         *
-         *气泡窗
+         * 气泡窗
+         * @param {*} data  
+         * @param {*} arrayList  展示数据
+         * @param {*} type 
+         * @param {*} other 
+         * @param {*} zb  坐标类型
          */
-        popup(data, arrayList, type, other) {
+        popup(data, arrayList, type, other, zb) {
             if (type) {
                 if (!other) {
                     var html = document.createElement('div');
@@ -1532,7 +1592,11 @@ export default {
                     line.className = 'line';
                     var main = document.createElement('div');
                     main.className = 'main';
-                    main.setAttribute('style', 'position: absolute;top:50%;max-height:500px;overflow-y: scroll;background:none;width:400px;bottom:auto; padding:10px 10px 5px 0 !important; border-radius: 0.05rem;border:1px solid rgba(115, 251, 253, 1);box - shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1); background:rgba(0, 0, 0, 0.6)');
+                    if (zb) {
+                        main.setAttribute('style', 'position: fixed;top:120px;left:39%;max-height:500px;overflow-y: scroll;background:none;width:400px;bottom:auto; padding:10px 10px 5px 0 !important; border-radius: 0.05rem;border:1px solid rgba(115, 251, 253, 1);box - shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1); background:rgba(0, 0, 0, 0.6)');
+                    } else {
+                        main.setAttribute('style', 'position: absolute;top:50%;max-height:500px;overflow-y: scroll;background:none;width:400px;bottom:auto; padding:10px 10px 5px 0 !important; border-radius: 0.05rem;border:1px solid rgba(115, 251, 253, 1);box - shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1); background:rgba(0, 0, 0, 0.6)');
+                    }
                     var click = document.createElement('div');
                     click.setAttribute('style', 'float: right;width: 13px;height: 13px;position: absolute;top:8px;right:16px;cursor: pointer');
                     var img = document.createElement('img');
@@ -1568,10 +1632,19 @@ export default {
                     setTimeout(() => {
                         main.appendChild(click)
                         main.appendChild(contain)
-                        html.appendChild(line)
+                        if (zb) {
+
+                        } else {
+                            html.appendChild(line)
+                        }
+
                         html.appendChild(main)
                         let text = html.innerHTML.replace(/"click"/g, '"click" onclick="vue.popup(false, false, false)"')
-                        var wgs84 = CoordUtil.gcj02towgs84(Number(data.gisX) || Number(data.longitude), Number(data.gisY) || Number(data.latitude))
+                        if (zb) {
+                            var wgs84 = [Number(data.gisX), Number(data.gisY)]
+                        } else {
+                            var wgs84 = CoordUtil.gcj02towgs84(Number(data.gisX) || Number(data.longitude), Number(data.gisY) || Number(data.latitude))
+                        }
                         var x = wgs84[0]
                         var y = wgs84[1]
                         var target = {

src/http/api.js

@@ -17,6 +17,9 @@ let api = {
         hazardsNoticeStatistic: "/prod-api/service-fire/demFireHazardsNotice/hazardsNoticeStatistic", //挂牌督改统计情况
         infoList: "/prod-api/service-fire/demFireTypicalCase/infoList", //典型火灾案例
         adLicenseStatistic: "/prod-api/service-fire/demNewLaw/adLicenseStatistic", //行政许可情况统计
+        fireStatisticCollect: "/prod-api/service-fire/demFireStatisticsAttach/fireStatisticCollect", //火灾信息统计
+        fireStatisticScattor: "/prod-api/service-fire/demFireStatisticsAttach/fireStatisticScattor", //亡人、伤人撒点
+
 
     },
     siaeall: {
@@ -79,10 +82,8 @@ let api = {
         demStreetMicroStationList: "/prod-api/service-fire/demStreetMicroStation/demStreetMicroStationList", //微型消防站撒点
         demHighRiseList: "/prod-api/service-fire/demHighRise/demHighRiseList", //高层建筑撒点
         // gridMemberList: "/prod-api/service-fire/demNewInspectRecord/siAeAllCollect", //网格人员 SAA
-        // gridMemberList: "/prod-api/service-fire/demNewInspectRecord/siAeAllCollect", //网格人员 SAA
         gridMemberScatter: "/prod-api/service-fire/demGridMember/gridMemberScatter", //网格人员 SAA
         regionInfo: "/prod-api/service-fire/baseRegionStatistic/regionInfo", //闵行区基本情况
-
     },
 
     jqzhcz: {

src/store/modules/public.js

@@ -195,11 +195,11 @@ const useStore = defineStore("public", {
         zddwId: 111,
         xfzfdt: {}, //执法记录仪
         arrayList: [], //撒点弹框数据存储,
-        gridName:1,
+        gridData: {},
     }),
     actions: {
-        gridNameChange(name){
-            this.gridName = name
+        gridDataChange(data) {
+            this.gridData = data
         },
 
         /**

src/views/fire-data-analysis.vue

@@ -6,35 +6,21 @@
                     <h4>火灾信息统计</h4>
                     <div class="threeBox">
                         <div class="flexBoxE11">
-                            <el-row class="hzxxtj">
-                                <el-col :span="8" >
-                                    财产损失：<Strong>{{ hzxxtj.a1 }}</Strong> 万
-                                </el-col>
-                                <el-col :span="8">
-                                    火灾总数：<Strong>{{ hzxxtj.a2 }}</Strong> 起
-                                </el-col>
-                                <el-col :span="8">
-                                    重大火灾：<Strong>{{ hzxxtj.a3 }}</Strong> 起
-                                </el-col>
-                                <el-col :span="8">
-                                    亡人数：<Strong>{{ hzxxtj.a4 }}</Strong> 人
-                                </el-col>
-                                <el-col :span="8">
-                                    过火面积：<Strong>{{ hzxxtj.a5 }}</Strong>㎡
-                                </el-col>
-                                <el-col :span="8">
-                                    较大火灾：<Strong>{{ hzxxtj.a6 }}</Strong> 起
-                                </el-col>
-                                <el-col :span="8">
-                                    伤人数：<Strong>{{ hzxxtj.a7 }}</Strong>人
-                                </el-col>
-                                <el-col :span="8">
-                                   特大火灾：<Strong>{{ hzxxtj.a8 }}</Strong>起
-                                </el-col>
-                                <el-col :span="8">
-                                    轻微火灾：<Strong>{{ hzxxtj.a9 }}</Strong> 起
-                                </el-col>
-                            </el-row>
+                                <el-row>
+                                        <el-col :span="7" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%);box-sizing: border-box;" v-for="(item,index) in hzxxtj" :key="index">
+                                                <div style="padding: 0.1475rem 0;text-align: center;">
+                                                        <span  style="display: block">
+                                                                <Strong :style="{
+                                                                        color: item.color,
+                                                                        fontWeight: 600,
+                                                                        fontSize: '0.3rem',}">
+                                                                        <CountTo :startVal='0' :endVal='item.value || 0' :duration='3000'>{{ item.value || 0 }}</CountTo>
+                                                                </Strong> {{ item.unit }}
+                                                        </span>
+                                                        {{ item.name }}
+                                                </div>
+                                        </el-col>
+                                </el-row>
                         </div>
                     </div>
                 </div>
@@ -281,17 +267,17 @@
 
                         <p>类型筛选</p>
                         <div class="selectType">
-                             <div @click="checkboxChange(0)" :class="checkedArray.checkedData[0] == 0 ? 'checkTypeSelect' : ''">
+                                <div @click="checkboxChange(1)" :class="checkedArray.checkedData[0] == 1 ? 'checkTypeSelect' : ''">
+                                <img :src="stores.sadianIcon.lshz" alt="" />
+                                <span>历史火灾</span>
+                            </div>
+                             <div @click="checkboxChange(2)" :class="checkedArray.checkedData[0] == 2 ? 'checkTypeSelect' : ''">
                                 <img :src="stores.sadianIcon.wrhz" alt="" />
-                                <span>亡人火灾</span>
+                                <span>亡人火灾({{ deathTollTotal || 0 }})</span>
                             </div>
-                            <div @click="checkboxChange(2)" :class="checkedArray.checkedData[0] == 2 ? 'checkTypeSelect' : ''">
+                            <div @click="checkboxChange(3)" :class="checkedArray.checkedData[0] == 3 ? 'checkTypeSelect' : ''">
                                 <img :src="stores.sadianIcon.srhz" alt="" />
-                                <span>伤人火灾</span>
-                            </div>
-                            <div @click="checkboxChange(1)" :class="checkedArray.checkedData[0] == 1 ? 'checkTypeSelect' : ''">
-                                <img :src="stores.sadianIcon.lshz" alt="" />
-                                <span>历史火灾</span>
+                                <span>伤人火灾({{ injuredNumberTotal || 0 }})</span>
                             </div>
                         </div>
                     </div>
@@ -459,24 +445,22 @@ import categoryLine from "@c/category-line";
 import firePie from "@c/fire-pie";
 import scatter from "@c/scatter";
 import map from "@c/mixins/map-data1";
+import CountTo from '@/components/count-to/index.js'
 // import map from "@c/mixins/map-gaode-public";
 export default {
-    components: { categoryLine, firePie, scatter, pie5 },
+    components: { categoryLine, firePie, scatter, pie5, CountTo },
     mixins: [linstener, map, ],
     data() {
         return {
-            hzxxtj:{
-                a1:100,
-                a2:200,
-                a3:100,
-                a4:100,
-                a5:100,
-                a6:100,
-                a7:100,
-                a8:100,
-                a9:100,
-
-            },//火灾信息统计
+                hzxxtj:[
+                        {name:"火灾总数",value:0,unit:"起",color:"#058DFE"},
+                        {name:"亡人数",value:0,unit:"人",color:"#FC0609"},
+                        {name:"过火面积",value:0,unit:"㎡",color:"#FD843A"},
+                        {name:"伤人数",value:0,unit:"人",color:"#7DD807"},
+                        {name:"财产损失",value:0,unit:"万",color:"#01C3B4"},
+                ],//火灾信息统计
+                deathTollTotal:0,//死亡人数
+                injuredNumberTotal:0,//伤人人数
             fireCaseData:[],//火灾案例
             pieData:[
                 {value:2,name:"亡人火灾数"},
@@ -489,23 +473,14 @@ export default {
             checkedArray: {
                 checkedData: [1],
                 checkedList: [
-                    { value: 0, label: "亡人火灾" },
-                    { value: 1, label: "历史火灾" },
-                    { value: 2, label: "伤人火灾" },
+                        { value: 1, label: "历史火灾" },
+                        { value: 2, label: "亡人火灾" },
+                        { value: 3, label: "伤人火灾" },
                 ],
             }, //类型筛选
 
             box: null,
-            tableData: [
-                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
-                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
-                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
-                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
-                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
-                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
-                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
-                // {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
-            ],
+            tableData: [],
             headerData: [
                 { prop: "address", name: "火灾地址" },
                 { prop: "burnedArea", name: "过火面积" },
@@ -552,7 +527,6 @@ export default {
                 address2: "",
             },
             timeData: [],
-            fireBubbleList: [],
             barForm: {
                 fireType: "",
                 fireType2: "",
@@ -635,11 +609,11 @@ export default {
         //     if (res1.data.length > 0) {
         //         this.fireAddressList = res1.data;
         //     }
-            this.getTrend();
-            this.getFireCause();
+            this.getTrend();//火灾趋势图火灾原图下拉数据
+            this.getFireCause();//火灾原因占比
             // this.getFireStatis();
-            this.policeInfo();
-            this.sadianSelect(1)
+            this.sadianSelect(this.checkedArray.checkedData[0])
+            this.fireStatisticCollect()//火灾信息统计
            
             // this.getPage();
         },
@@ -668,36 +642,11 @@ export default {
                         data = this.stroes.$state.mhjz[0];
                 }
                 if (this.stroes.$state.mapBool == 2) {
-                        this.streetTownSwitch(data);
+                        // this.streetTownSwitch(data);
                 }
-                this.sadianSelect(this.checkedArray.checkedData[0]);
-        },
-        /* 火灾情况分析 气泡图*/
-        async policeInfo() {
-            await this.$axios
-                .get(
-                    this.$api.fire.fireBubble +
-                        "?" +
-                        this.$qs.stringify({
-                            unitId: "",
-                            fireType: "",
-                            startTime:
-                                dayjs()
-                                    .subtract(90, "day")
-                                    .format("YYYY-MM-DD HH:mm:ss")
-                                    .slice(0, 10) + " 00:00:00",
-                            endTime:
-                                dayjs()
-                                    .subtract(0, "day")
-                                    .format("YYYY-MM-DD HH:mm:ss")
-                                    .slice(0, 10) + " 00:00:00",
-                            // startTime: this.stores.$state.timeList[0] || "",
-                            // endTime: this.stores.$state.timeList[1] || "",
-                        })
-                )
-                .then((res) => {
-                    this.fireBubbleList = res.data;
-                });
+                // this.sadianSelect(this.checkedArray.checkedData[0]);
+                this.fireStatisticCollect()//火灾信息统计
+                this.sadianSelect(this.checkedArray.checkedData[0])//撒点
         },
         /* 火灾趋势图 折线图 */
         async getTrend() {
@@ -730,6 +679,48 @@ export default {
                     this.timeData = res.data;
                 });
         },
+        /* 火灾信息统计 */
+        async fireStatisticCollect() {
+            await this.$axios
+                .get(
+                    this.$api.fire.fireStatisticCollect +
+                        "?" +
+                        this.$qs.stringify({
+                            startTime: this.stores.$state.timeList[0] || "",
+                            endTime: this.stores.$state.timeList[1] || "",
+                            street:this.stroes.$state.streetTown, //街镇
+                        })
+                )
+                .then((res) => {
+                        if(res.data.length>0){
+                                for(let i =0;i<this.hzxxtj.length;i++){
+                                        if(this.hzxxtj[i].name =="火灾总数" ){
+                                                this.hzxxtj[i].value =  res.data[0].fireCount
+                                        }
+                                        if(this.hzxxtj[i].name =="亡人数" ){
+                                                this.hzxxtj[i].value =  res.data[0].deathTollTotal
+                                        }
+                                        if(this.hzxxtj[i].name =="过火面积" ){
+                                                this.hzxxtj[i].value =  res.data[0].burnedAreaTotal
+                                        }
+                                        if(this.hzxxtj[i].name =="伤人数" ){
+                                                this.hzxxtj[i].value =  res.data[0].injuredNumberTotal
+                                        }
+                                        if(this.hzxxtj[i].name =="财产损失" ){
+                                                this.hzxxtj[i].value =  res.data[0].directPropertyLossTotal
+                                        }
+                                        this.deathTollTotal = res.data[0].deathTollTotal
+                                        this.injuredNumberTotal = res.data[0].injuredNumberTotal
+                                }
+
+                        }else{
+                                for(let i =0;i<this.hzxxtj.length;i++){
+                                        this.hzxxtj[i].value = 0
+                                }
+                        }
+
+                });
+        },
         /* 火灾原因占比 饼图 */
         async getFireCause(val) {
             await this.$axios
@@ -818,9 +809,10 @@ export default {
                         streetTown: this.stroes.$state.streetTown, //街镇
                         current: 1,
                         size: 1000,
-                        // startTime: monthDay,
-                        startTime: "2022-08-31 00:00:00",
-                        endTime: today,
+                        // startTime: "2022-08-31 00:00:00",
+                        // endTime: today,
+                        startTime: this.stores.$state.timeList[0] || "",
+                        endTime: this.stores.$state.timeList[1] || "",
                     })
             )
           },
@@ -856,26 +848,25 @@ export default {
          * 撒点测绘院、高德
          */
         sadianSelect(id) {
-                console.log(id)
                        //1.高德 2.测绘院
                 if (this.stroes.$state.mapBool == 1) {
                         if(id == 1){
                                 this.historicalWarning().then(res=>{
                                         let data = res.data.records
                                         let arr = []
-                                        // console.log(this.stroes.$state.streetTown)
                                         for(let i =0;i<data.length;i++){
                                                 if(data[i].ajlxdm == 1 && data[i].gisX && data[i].gisY  ){
                                                         arr.push(data[i])
                                                 }
                                         }
-                                         this.initMarkers(arr,"fire-data-analysis",this.checkedArray.checkedList[id].label)
+                                        this.initMarkers(arr,"fire-data-analysis",this.checkedArray.checkedList[id].label)
                                 })
                         }else{
                                 this.initMarkers([],"fire-data-analysis",this.checkedArray.checkedList[id].label)
                         }
                 } else if (this.stroes.$state.mapBool == 2) {
                         if(id == 1){
+                               //历史火灾
                                 this.historicalWarning().then(res=>{
                                         let data = res.data.records
                                         let arr = []
@@ -884,10 +875,29 @@ export default {
                                                         arr.push(data[i])
                                                 }
                                         }
-                                         this.sadian(arr,"fire-data-analysis",this.checkedArray.checkedList[id].label)
+                                        this.addMarker([])
+                                        this.sadian(arr,"fire-data-analysis",this.checkedArray.checkedList[id].label)
                                 })
-                        }else{
-                                this.sadian([],"fire-data-analysis",this.checkedArray.checkedList[id].label)
+                        }else if(id == 2 || id == 3){
+                                this.$axios
+                                .get(
+                                this.$api.fire.fireStatisticScattor +
+                                        "?" +
+                                        this.$qs.stringify({
+                                        startTime: this.stores.$state.timeList[0] || "",
+                                        endTime: this.stores.$state.timeList[1] || "",
+                                        street:this.stroes.$state.streetTown, //街镇
+                                        lossType:id ==2 ? "亡人火灾" : id ==3 ? "伤人火灾" : ""
+                                        })
+                                )
+                                .then((res) => {
+                                        this.heatMap([]);//热力图清除
+                                        this.addMarker(res.data,"fire-data-analysis",this.checkedArray.checkedList[id-1].label)
+                                });
+                                
+                        }else {
+                                 this.heatMap([]);//热力图清除
+                                this.sadian([],"fire-data-analysis","")
                         }
                 }
                 
@@ -896,6 +906,7 @@ export default {
          * 撒点
          */
         sadian(data,pageType,type){
+                this.heatMap([]);
                 if(data.length>0){
                         this.heatMap(data,pageType,type);
                 }else{
@@ -922,7 +933,6 @@ export default {
                 regionType:regionType
             }))
             this.fireCaseData = res.data
-            console.log(11,res)
 
         }
     },

src/views/security-plan.vue

@@ -5,11 +5,27 @@
                 <div class="leftTop">
                     <h4>疏导区基本情况</h4>
                     <div class="leftTopContent2">
-                        <el-row>
+                        <!-- <el-row>
                             <div v-for="(item,index) in diversionArea" :key="index">
                                 <p>{{ item.name }}</p>
                                 <p><strong><CountTo :startVal='0' :endVal='item.value' :duration='5000'> {{   item.value || 0 }}</CountTo></strong>{{ item.unit }}</p>
                             </div>
+                        </el-row> -->
+                        <el-row>
+                                <el-col :span="5" style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 4px 10px; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%);box-sizing: border-box;" v-for="(item,index) in diversionArea" :key="index">
+                                        <div style="padding: 0.03rem 0;text-align: center;">
+                                                <span  style="display: block">
+                                                        <Strong :style="{
+                                                                color: item.color,
+                                                                fontWeight: 600,
+                                                                fontSize: '0.3rem',}">
+                                                                <CountTo :startVal='0' :endVal='item.value || 0' :duration='3000' v-if="!isNaN(item.value)">{{ item.value || 0 }}</CountTo>
+                                                                <span v-if="isNaN(item.value)" style="fontSize: 0.2rem">{{ item.value || 0 }}</span>
+                                                        </Strong> {{ item.unit }}
+                                                </span>
+                                                <span >{{ item.name }}</span>
+                                        </div>
+                                </el-col>
                         </el-row>
                     </div>
                 </div>
@@ -303,10 +319,10 @@
                 <div class="rightBot">
                     <h4>网格人员信息</h4>
                     <div class="rightBotContent" v-if="erpData.length > 0">
-                        <el-table :data="rightArray.tableData" class="transparentTableRow" height="100%" :empty-text="dataNo" ref="reportTable" @mouseenter="autoScroll(true)"
+                        <el-table :data="rightArray.tableData" class="transparentTableRow" height="100%" :empty-text="dataNo2" ref="reportTable" @mouseenter="autoScroll(true)"
                         @mouseleave="autoScroll()">
                             <el-table-column v-for="item in rightArray.headerData2" show-overflow-tooltip :key="item.prop" 
-                                :prop="item.prop" align="center" min-width="20" :label="item.name">
+                                :prop="item.prop" align="left" min-width="20" :label="item.name">
                                 <template #default="scope">
                                     {{
                                         item.prop === "type"
@@ -325,6 +341,29 @@
             </el-col>
         </transition>
 
+          <!-- 普通弹框 -->
+      <div class="tableTooltipwt sadianTankang" v-show="stores.$state.arrayList.length > 0">
+        <img src="~@a/img/icon/close.png" alt="" class="close" @click="close" />
+        <el-row class="tableContent">
+          <el-col class="mk" v-for="li in stores.$state.arrayList" :key="li" v-show="li.title[1]">
+            <p v-show="li.title[1]">{{ li.title[0] }}</p>
+            <el-row>
+              <el-col v-for="ch in li.children" :key="ch" :span="ch[2]" v-show="li.title[1] && ch[1]">
+                <span class="color1">{{ ch[0] }}</span>
+                <span class="color2">{{ ch[1] }}</span>
+              </el-col>
+              <el-row style="margin-top: 10px" v-if="li.type">
+                        <iframe
+                        :src="li.url"
+                        allowfullscreen="true"
+                        style="width: 100%"
+                        ></iframe>
+                </el-row>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+
     </el-row>
 </template>
 
@@ -340,55 +379,22 @@ export default {
     components: { category, gauge, CountTo },
     data() {
         return {
-            diversionArea:[
-                {
-                    name:"华漕镇",
-                    value:28.2,
-                    unit:"km²",
-                },
-                {
-                    name:"新虹街道",
-                    value:19.26,
-                    unit:"km²",
-                },
-                {
-                    name:"七宝镇",
-                    value:7.51,
-                    unit:"km²",
-                },
-                {
-                    name:"虹桥镇",
-                    value:4.03,
-                    unit:"km²",
-                },
-                {
-                    name:"大网格",
-                    value:4,
-                    unit:"个",
-                },
-                {
-                    name:"中网格",
-                    value:14,
-                    unit:"个",
-                },
-                {
-                    name:"小网格",
-                    value:103,
-                    unit:"个",
-                },
-                {
-                    name:"分管领导",
-                    value:20,
-                    unit:"位",
-                },
-                {
-                    name:"增援干部",
-                    value:11,
-                    unit:"位",
-                },
-            ],//疏导区
-            gridStatus:2,
+                diversionArea:[
+                        {name:"疏导区总面积",value:61.46,unit:"km²",color:"#7DD807"},
+                        {name:"华漕镇",value:28.2,unit:"km²",color:"#01C3B4"},
+                        {name:"新虹街道",value:19.26,unit:"km²",color:"#01C3B4"},
+                        {name:"七宝镇",value:7,unit:"㎡",color:"#01C3B4"},
+                        {name:"虹桥镇",value:7,unit:"km²",color:"#01C3B4"},
+                        {name:"大网格",value:4,unit:"个",color:"#FC0609 "},
+                        {name:"中网格",value:14,unit:"个",color:"#FD843A"},
+                        {name:"小网格",value:103,unit:"个",color:"#7DD807"},
+                        {name:"分管领导",value:20,unit:"人",color:"#058DFE"},
+                        {name:"增援干部",value:11,unit:"人",color:"#058DD1"},   
+                        // {name:"人员力量",value:41,unit:"人",color:"#058DD1"},   
+                ],//疏导区基本情况
+            gridStatus:15,
             dataNo: "加载中...",
+            dataNo2: "加载中...",
             stores: this.$useStore(),
             proptionList: [
                 {
@@ -729,7 +735,7 @@ export default {
         };
     },
     mounted() {
-        this.grid(2)
+        this.grid(15)
         setTimeout(()=>{
             this.autoScroll()
         })
@@ -882,11 +888,11 @@ export default {
             if (id == 15) {
                 this.gridStatus = id
                 this.anbao(1, 1)
-                this.grid(2)
+                this.grid(id)
             } else if (id == 16) {
                 this.gridStatus = id
+                this.grid(16,null,null,1)
                 this.anbao(1, 2)
-                this.grid(3)
             } else {
                 this.sadianSelect(id);
             }
@@ -1163,103 +1169,271 @@ export default {
 
         /**
          * 网格人员
-         * id 2中网格 3小网格
+         * id 15中网格 
+         * area 区域名称
+         * position 坐标
+         * query 查询居委会名称
          */
-        grid(id,area) {
-            if(id == 2){
-                this.rightArray.headerData2 =  [
-                    { prop: "gridArea", name: "网格区域" },
-                    { prop: "streetTown", name: "街道" },
-                    { prop: "type1", name: "安监所人员" },
-                    { prop: "type2", name: "城运中心人员" },
-                    { prop: "type3", name: "消防助理员" },
-                ]
-            }
-            if(id == 3){
-                this.rightArray.headerData2 =  [
-                    { prop: "gridArea", name: "网格区域" },
-                    { prop: "streetTown", name: "街道" },
-                    { prop: "type1", name: "小网格人员" },
-                    { prop: "type2", name: "小网格长" },
-                ]
-            }
-            this.$axios.get(this.$api.fireSite.gridMemberScatter +
+        grid(id,area,position,query) {
+                let querySearch = {}
+                if(id == 15){
+                        this.rightArray.headerData2 =  [
+                        { prop: "gridArea", name: "网格区域" },
+                        { prop: "streetTown", name: "街道" },
+                        { prop: "type1", name: "安监所人员" },
+                        { prop: "type2", name: "城运中心人员" },
+                        { prop: "type3", name: "消防助理员" },
+                        ]
+                        querySearch = {
+                                gridArea: area,
+                                gridGrade: 2,
+                        }
+                }
+                if(id == 16){
+                        this.rightArray.headerData2 =  [
+                        { prop: "gridArea", name: "网格区域" },
+                        { prop: "streetTown", name: "街道" },
+                        { prop: "type1", name: "小网格人员" },
+                        { prop: "type2", name: "小网格长" },
+                        ]
+                        querySearch = {
+                                mapGridName: area,
+                                gridGrade: 3,
+                        }
+                }
+                this.$axios.get(this.$api.fireSite.gridMemberScatter +
+                "?" +
+                this.$qs.stringify(querySearch)).then(res => {
+                        let data = res.data
+                        let gridData = []
+                        if (data.length > 0) {
+                                for (let i = 0; i < data.length; i++) {
+                                        if (data[i].gridMemderViceList && data[i].gridMemderViceList.length > 0) {
+                                                gridData[i] = {
+                                                        gridArea: data[i].gridArea,
+                                                        streetTown: data[i].streetTown,
+                                                        mapGridName:data[i].mapGridName,
+                                                        seniorGrid:data[i].seniorGrid,
+                                                        type1: undefined,
+                                                        type2: undefined,
+                                                        type3: undefined,
+                                                        
+                                                }
+                                                if(data[i].gridMemderViceList){
+                                                        for (let ii = 0; ii < data[i].gridMemderViceList.length; ii++) {
+                                                                if(id == 15){
+                                                                        if (data[i].gridMemderViceList[ii].personnelType == 7) {
+                                                                        if (gridData[i].type1) {
+                                                                                gridData[i].type1 = `${gridData[i].type1}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        } else {
+                                                                                gridData[i].type1 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        }
+                                                                        }
+                                                                        if (data[i].gridMemderViceList[ii].personnelType == 8) {
+                                                                        if (gridData[i].type2) {
+                                                                                gridData[i].type2 = `${gridData[i].type2}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        } else {
+                                                                                gridData[i].type2 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        }
+                                                                        }
+                                                                        if (data[i].gridMemderViceList[ii].personnelType == 9) {
+                                                                        if (gridData[i].type3) {
+                                                                                gridData[i].type3 = `${gridData[i].type3}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        } else {
+                                                                                gridData[i].type3 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        }
+                                                                        }
+                                                                }
+                                                                if(id == 16){
+                                                                        if (data[i].gridMemderViceList[ii].personnelType == 10) {
+                                                                        if (gridData[i].type1) {
+                                                                                gridData[i].type1 = `${gridData[i].type1}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        } else {
+                                                                                gridData[i].type1 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        }
+                                                                        }
+                                                                        if (data[i].gridMemderViceList[ii].personnelType == 11) {
+                                                                        if (gridData[i].type2) {
+                                                                                gridData[i].type2 = `${gridData[i].type2}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        } else {
+                                                                                gridData[i].type2 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                                        }
+                                                                        }
+                                                                }  
+                                                        }
+                                                }
+                                        }
+                                }
+                                if(position){
+                                        let arr = {}
+                                        arr.type = id
+                                        arr.name = area
+                                        arr.position = position
+                                        arr.content = gridData
+                                        this.anbaoPopup(arr)
+                                        this.superiorGrid(gridData[0].seniorGrid,id == 15 ? 1 : id == 16 ? 2 : "")
+                                }else{
+                                        
+                                }
+                                this.rightArray.tableData = gridData
+                        }else{
+                                this.dataNo2 = "暂无数据"
+                        }
+                        //用于地图居委会区块查询
+                        if(query && id == 16){
+                                var queryData = []
+                                for(let i=0;i<gridData.length;i++){
+                                        if(gridData[i].mapGridName){
+                                                queryData.push(gridData[i])
+                                        }
+                                }
+                                this.anbao(1,2,queryData)
+                        }
+                })   
+       
+        },
+        /**
+         * 上级网格
+         * @param {*网格上级id} id 
+         * @param {*等级} type   1镇级 2片区
+         */
+        superiorGrid(id,type){
+                this.$axios.get(this.$api.fireSite.gridMemberScatter +
                 "?" +
                 this.$qs.stringify({
-                    gridArea: area,
-                    gridGrade: id,
+                        seniorGrid:id
                 })).then(res => {
-                    let data = res.data
-                    let gridData = []
-                    if (data.length > 0) {
-                        for (let i = 0; i < data.length; i++) {
-                            if (data[i].gridMemderViceList && data[i].gridMemderViceList.length > 0) {
-                                gridData[i] = {
-                                    gridArea: data[i].gridArea,
-                                    streetTown: data[i].streetTown,
-                                    type1: undefined,
-                                    type2: undefined,
-                                    type3: undefined
-                                }
-                                if(data[i].gridMemderViceList){
-                                    for (let ii = 0; ii < data[i].gridMemderViceList.length; ii++) {
-                                        if(id == 2){
-                                            if (data[i].gridMemderViceList[ii].personnelType == 7) {
-                                                if (gridData[i].type1) {
-                                                    gridData[i].type1 = `${gridData[i].type1}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
-                                                } else {
-                                                    gridData[i].type1 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                        
+                        this.diversionArea = []
+                        if(res.data.length>0){
+                                let data = res.data[0]
+                                console.log(111,data,type)
+                                if(type == 1){//镇级
+                                        this.diversionArea[0] = {
+                                                name:`${data.gridArea}面积`,
+                                                value:data.gridArea == "华漕镇" ? 61.46 : data.gridArea == "新虹街道" ? "19.26" : data.gridArea == "七宝镇" ? "7" : data.gridArea == "虹桥镇" ? "17" : "",
+                                                unit:"km²",color:"#7DD807"
+                                        }
+                                        this.diversionArea[1] = {
+                                                name:"分管领导",
+                                                value:0,
+                                                unit:"人",color:"#01C3B4"
+                                        }
+                                        this.diversionArea[2] = {
+                                                name:"城运中心主任",
+                                                value:0,
+                                                unit:"人",color:"#FD843A"
+                                        }
+                                        this.diversionArea[3] = {
+                                                name:"安监所所长",
+                                                value:0,
+                                                unit:"人",color:"#7DD807"
+                                        }
+                                        this.diversionArea[4] = {
+                                                name:"支队外勤参谋",
+                                                value:0,
+                                                unit:"人",color:"#058DFE"
+                                        }
+                                        this.diversionArea[5] = {
+                                                name:"中网格",
+                                                value:data.gridArea == "华漕镇" ? 5 : data.gridArea == "新虹街道" ? "4" : data.gridArea == "七宝镇" ? "3" : data.gridArea == "虹桥镇" ? "2" : "",
+                                                unit:"个",color:"#058DFE"
+                                        }
+                                        this.diversionArea[6] = {
+                                                name:"小网格",
+                                                value:data.gridArea == "华漕镇" ? 36 : data.gridArea == "新虹街道" ? "22" : data.gridArea == "七宝镇" ? "34" : data.gridArea == "虹桥镇" ? "11" : "",
+                                                unit:"个",color:"#058DFE"
+                                        }
+                                        
+                                        for(let i=0;i<data.gridMemderViceList.length;i++){
+                                                if(data.gridMemderViceList[i].personnelType == 3){//分管领导
+                                                        this.diversionArea[1].value ++
                                                 }
-                                            }
-                                            if (data[i].gridMemderViceList[ii].personnelType == 8) {
-                                                if (gridData[i].type2) {
-                                                    gridData[i].type2 = `${gridData[i].type2}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
-                                                } else {
-                                                    gridData[i].type2 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                if(data.gridMemderViceList[i].personnelType == 4){//城运中心主任
+                                                        this.diversionArea[2].value ++
                                                 }
-                                            }
-                                            if (data[i].gridMemderViceList[ii].personnelType == 9) {
-                                                if (gridData[i].type3) {
-                                                    gridData[i].type3 = `${gridData[i].type3}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
-                                                } else {
-                                                    gridData[i].type3 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                if(data.gridMemderViceList[i].personnelType == 5){//安监所所长
+                                                        this.diversionArea[3].value ++
                                                 }
-                                            }
+                                                if(data.gridMemderViceList[i].personnelType == 6){//支队外勤参谋
+                                                        this.diversionArea[4].value ++
+                                                }
+                                        }
+                                }
+                                if(type == 2){//片区
+                                        console.log(11,data)
+                                        this.diversionArea[0] = {
+                                                name:"",
+                                                value:data.gridArea,
+                                                unit:"",color:"#7DD807"
+                                        }
+                                        this.diversionArea[1] = {
+                                                name:"安监所人员",
+                                                value:0,
+                                                unit:"人",color:"#01C3B4"
+                                        }
+                                        this.diversionArea[2] = {
+                                                name:"城运中心人员",
+                                                value:0,
+                                                unit:"人",color:"#FD843A"
+                                        }
+                                        this.diversionArea[3] = {
+                                                name:"消防助理员",
+                                                value:0,
+                                                unit:"人",color:"#7DD807"
                                         }
-                                        if(id == 3){
-                                            if (data[i].gridMemderViceList[ii].personnelType == 10) {
-                                                if (gridData[i].type1) {
-                                                    gridData[i].type1 = `${gridData[i].type1}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
-                                                } else {
-                                                    gridData[i].type1 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                        this.diversionArea[4] = {
+                                                name:"小网格",
+                                                value:
+                                                data.gridArea == "闵S1-1（纪王西网格）" ? "4" : data.gridArea == "闵S1-2（纪王东网格）" ?  "6" :
+                                                data.gridArea == "闵S1-3（诸翟北网格）" ? "12" : data.gridArea == "闵S1-4（诸翟南网格）" ?  "8" :
+                                                data.gridArea == "闵S1-5（老华漕网格）" ? "6" : data.gridArea == "闵S2-1（爱博网格）" ?  "4" :
+                                                data.gridArea == "闵S2-2（华美网格）" ? "6" : data.gridArea == "闵S2-3（枢纽网格）" ?  "6" :
+                                                data.gridArea == "闵S2-4（航华网格）" ? "6" : data.gridArea == "闵S3-1（七宝北片网格）" ?  "10" :
+                                                data.gridArea == "闵S3-2（七宝吴宝路网格）" ? "9" : data.gridArea == "闵S3-3（七宝航华网格）" ?  "15" :
+                                                data.gridArea == "闵S4-1（紫藤红松网格）" ? "6" : data.gridArea == "闵S4-2（虹梅网格）" ?  "5" : "0"
+                                                ,
+                                                unit:"个",color:"#7DD807"
+                                        }
+                                        
+                                        for(let i=0;i<data.gridMemderViceList.length;i++){
+                                                if(data.gridMemderViceList[i].personnelType == 7){//安监所人员
+                                                        this.diversionArea[1].value ++
                                                 }
-                                            }
-                                            if (data[i].gridMemderViceList[ii].personnelType == 11) {
-                                                if (gridData[i].type2) {
-                                                    gridData[i].type2 = `${gridData[i].type2}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
-                                                } else {
-                                                    gridData[i].type2 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
+                                                if(data.gridMemderViceList[i].personnelType == 8){//城运中心人员
+                                                        this.diversionArea[2].value ++
+                                                }
+                                                if(data.gridMemderViceList[i].personnelType == 9){//消防助理员
+                                                        this.diversionArea[3].value ++
                                                 }
-                                            }
                                         }
-                                            
-                                    }
                                 }
-                               
-                            }
                         }
-                    }
-                    this.rightArray.tableData = gridData
+
+                //         diversionArea:[
+                //         {name:"疏导区总面积",value:61.46,unit:"km²",color:"#7DD807"},
+                //         {name:"华漕镇",value:28.2,unit:"km²",color:"#01C3B4"},
+                //         {name:"新虹街道",value:19.26,unit:"km²",color:"#01C3B4"},
+                //         {name:"七宝镇",value:7,unit:"㎡",color:"#01C3B4"},
+                //         {name:"虹桥镇",value:7,unit:"km²",color:"#01C3B4"},
+                //         {name:"大网格",value:4,unit:"个",color:"#FC0609 "},
+                //         {name:"中网格",value:14,unit:"个",color:"#FD843A"},
+                //         {name:"小网格",value:103,unit:"个",color:"#7DD807"},
+                //         {name:"分管领导",value:20,unit:"人",color:"#058DFE"},
+                //         {name:"增援干部",value:11,unit:"人",color:"#058DD1"},   
+                // ],//疏导区基本情况
+                        
                 })
         }
+
     },
     watch:{
-        "stores.$state.gridName": function(newValue, oldValue) {
-            if(this.gridStatus == 2){
-                this.grid(2,newValue)
+        "stores.$state.gridData": function(newValue, oldValue) {
+            if(this.gridStatus == 15){
+                this.grid(15,newValue.name,newValue.position)
             }
-            if(this.gridStatus == 3){
-                this.grid(2,newValue)
+            if(this.gridStatus == 16){
+                this.grid(16,newValue.name,newValue.position)
             }
             
         }

src/views/self-management.vue

@@ -144,7 +144,6 @@
                         <el-col class="contentOne" :span="12" v-for="(score, index) in streetDynamicData1" :key="index">
                             <el-row style="width: 100%; flex-flow: nowrap; border: 1px solid rgba(48, 207, 255, 0.6); margin: auto 0; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%)">
                                 <img style="width: 0.7375rem; height: 0.7375rem; padding: 0 0.125rem; margin: auto 0" :src="require('@/assets/img/self-management/' + (index + 10) + '.png')" alt="" />
-
                                 <div style="margin: auto 0; padding: 0.1875rem 0">
                                     <span
                                         :style="{
@@ -154,7 +153,7 @@
                                             display: 'block',
                                         }"
                                     >
-                                        {{ score.value }} {{ score.mark }}
+                                   {{ score.value }} {{ score.mark }}
                                     </span>
                                     <span style="font-size: 0.175rem; color: #ffffff"> {{ score.name }}</span>
                                 </div>