guoxiaohuan 4 rokov pred
rodič
commit
6150f80b51
1 zmenil súbory, kde vykonal 286 pridanie a 238 odobranie
  1. 286 238
      src/views/statistics/index.vue

+ 286 - 238
src/views/statistics/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class='overview'>
         <!-- 顶部路由 -->
-        <!-- <div class='menu'>
+        <div class='menu'>
             <div class='home' @click='$emit("update:modelNum", 0)'>
                 <div class='downright'></div>
                 <div class='home-box'>
@@ -14,7 +14,7 @@
                     <span class='span3'>{{times}}</span>
                 </span>
             </div>
-        </div> -->
+        </div>
         <!-- 面包屑 -->
         <nav class='navigation'>
             <section class='crumbs'>
@@ -26,13 +26,16 @@
             </section>
             <section>
                 <TreeSelect
-                    width='280'
+                    class="special-my-tree-select"
+                    ref="treeSelect"
+                    width='300'
                     :hideClear='false'
                     :isReadOnly='false'
-                    :caption='"选择管理分区"'
+                    :caption='"选择管理分区"'
                     :data='regulateDistrictData'
-                    placeholder="全部"
+                    :placeholder="placeholder"
                     :disabled='false'
+                    v-model="selectedZone"
                     @change='selectProjectItem'
                 />
             </section>
@@ -59,7 +62,7 @@
                             <div class='system-equipments' v-if='item.assetTypeList'>
                                 <div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
                                     <div class="title">
-                                        <P>{{equip.category_name}}</p>
+                                        <P :title="equip.category_name">{{equip.category_name}}</p>
                                         <span :style="{right: equip.is_exception_num > 99 ? '-2rem' :  equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
                                     </div>
                                     <p>
@@ -97,7 +100,7 @@
                         <strong>{{plazaInfoCount.zhsxChangeCount}}</strong>
                     </div>
                 </section>
-                <section class='map-container'>
+                <section class='map-container' id="map-container">
                     <div id='map'></div>
                     <div class='legend'>
                         <div class='legend-bar' v-for='(bar , index) in legendList' :key='index'>
@@ -154,6 +157,7 @@
 
 <script>
 let myMaps = null
+import { Loading } from 'element-ui';
 import { login } from '@/api/login'
 import { getPlazaInfoCount, querySystemCard, getCardList, queryEventStatus } from '@/api/homePage'
 import { formatTime } from '@/utils/format.js'
@@ -165,6 +169,7 @@ import 'leaflet-contextmenu'
 export default {
     data() {
         return {
+            placeholder:'全部',
             crumbsHtml: [], // 导航数据
             zoneNames: {   // 各个中心对应的拼音名称
                 "东北": 'dongbei',
@@ -178,45 +183,45 @@ export default {
                 "东南": 'dongnan',
                 "其他": 'Other'
             },
-            provinceCities: {  // 各个区域的的省会城市  坐标 缩放级别
-                "青岛": { province: 'shandong', center: [36.06667, 120.33333], zoom: 8 },
-                "北京": { province: 'beijing', center: [39.604882122321174, 116.43660987308282], zoom: 8 },
-                "天津": { province: 'tianjin', center: [39.130593, 117.260892], zoom: 7 },
-                "济南": { province: 'shandong', center: [36.4, 117.0], zoom: 7 },
-                "上海": { province: 'shanghai', center: [31.090574094954192, 121.46299249603001], zoom: 10 },
-                "南京": { province: 'jiangsu', center: [32.05, 118.78333], zoom: 7 },
-                "无锡": { province: 'jiangsu', center: [31.57, 120.3], zoom: 9 },
-                "厦门": { province: 'fujian', center: [24.46667, 118.1], zoom: 9 },
-                "宁波": { province: 'zhejiang', center: [29.52, 121.33], zoom: 8 },
-                "杭州": { province: 'zhejiang', center: [30.323100460201648, 120.50270908851112], zoom: 9 },
-                "福州": { province: 'fujian', center: [26.05, 119.18], zoom: 8 },
-                "合肥": { province: 'anhui', center: [31.52, 117.17], zoom: 7 },
-                "长沙": { province: 'hunan', center: [28.12, 112.59], zoom: 8 },
-                "南昌": { province: 'jiangxi', center: [28.4, 115.55], zoom: 8 },
-                "大连": { province: 'liaoning', center: [39.98974718404572, 122.66034125625548], zoom: 8 },
-                "沈阳": { province: 'liaoning', center: [41.72213058512578, 122.93479223528372], zoom: 8 },
-                "长春": { province: 'jilin', center: [42.88033923363183, 127.02188147691707], zoom: 8 },
-                "东莞": { province: 'guangdong', center: [23.644524198573688, 114.83844948916203], zoom: 8 },
-                "南宁": { province: 'guangxi', center: [22.48, 108.19], zoom: 7 },
-                "广州": { province: 'guangdong', center: [22.755920681486405, 112.01244459124548], zoom: 7 },
-                "太原": { province: 'shanxi1', center: [37.54, 112.33], zoom: 7 },
-                "武汉": { province: 'hubei', center: [31.147006308556566, 112.97898510653813], zoom: 7 },
-                "郑州": { province: 'henan', center: [34.46, 113.4], zoom: 7 },
-                "哈尔滨": { province: 'heilongjiang', center: [46.800059446787316, 128.40505022926592], zoom: 7 },
-                "乌鲁木齐": { province: 'xinjiang', center: [43.45, 87.36], zoom: 8 },
-                "呼和浩特": { province: 'neimenggu', center: [45.182036837015886, 116.82329020199336], zoom: 5 },
-                "西安": { province: 'shanxi2', center: [36.08462129606931, 109.4527754086213], zoom: 7 },
-                "银川": { province: 'ningxia', center: [38.108627664321276, 102.36578196225639], zoom: 7 },
-                "成都": { province: 'sichuan', center: [30.24957724046765, 103.4647651330231], zoom: 7 },
-                "昆明": { province: 'yunnan', center: [25.903703303407667, 105.10972266685498], zoom: 8 },
-                "重庆": { province: 'chongqing', center: [29.35, 106.33], zoom: 8 }
+            provinceCities: {  // 各个区域的的中心坐标 缩放级别 
+                "青岛": {  center: [36.06667, 120.33333], zoom: 8 },
+                "北京": {  center: [39.604882122321174, 116.43660987308282], zoom: 8 },
+                "天津": {  center: [39.130593, 117.260892], zoom: 7 },
+                "济南": {  center: [36.4, 117.0], zoom: 7 },
+                "上海": {  center: [31.090574094954192, 121.46299249603001], zoom: 10 },
+                "南京": {  center: [32.05, 118.78333], zoom: 7 },
+                "无锡": {  center: [31.57, 120.3], zoom: 9 },
+                "厦门": {  center: [24.46667, 118.1], zoom: 9 },
+                "宁波": {  center: [29.52, 121.33], zoom: 8 },
+                "杭州": {  center: [30.323100460201648, 120.50270908851112], zoom: 9 },
+                "福州": {  center: [26.05, 119.18], zoom: 8 },
+                "合肥": {  center: [31.52, 117.17], zoom: 7 },
+                "长沙": {  center: [28.12, 112.59], zoom: 8 },
+                "南昌": {  center: [28.4, 115.55], zoom: 8 },
+                "大连": {  center: [39.98974718404572, 122.66034125625548], zoom: 8 },
+                "沈阳": {  center: [41.72213058512578, 122.93479223528372], zoom: 8 },
+                "长春": {  center: [42.88033923363183, 127.02188147691707], zoom: 8 },
+                "东莞": {  center: [23.644524198573688, 114.83844948916203], zoom: 8 },
+                "南宁": {  center: [22.48, 108.19], zoom: 7 },
+                "广州": {  center: [22.755920681486405, 112.01244459124548], zoom: 7 },
+                "太原": {  center: [37.54, 112.33], zoom: 7 },
+                "武汉": {  center: [31.147006308556566, 112.97898510653813], zoom: 7 },
+                "郑州": {  center: [34.46, 113.4], zoom: 7 },
+                "哈尔滨": {  center: [46.800059446787316, 128.40505022926592], zoom: 7 },
+                "乌鲁木齐": { center: [43.45, 87.36], zoom: 8 },
+                "呼和浩特": { center: [45.182036837015886, 116.82329020199336], zoom: 5 },
+                "西安": { center: [36.08462129606931, 109.4527754086213], zoom: 7 },
+                "银川": { center: [38.108627664321276, 102.36578196225639], zoom: 7 },
+                "成都": { center: [30.24957724046765, 103.4647651330231], zoom: 7 },
+                "昆明": { center: [25.903703303407667, 105.10972266685498], zoom: 8 },
+                "重庆": { center: [29.35, 106.33], zoom: 8 }
             },
             zoneCenter: {  // 各个区域的中心坐标
                 dongbei: [43.161614, 124.396818], // 取自 东北运营中心 长春区域 四平万达广场
                 xibei: [37.999781, 106.197518], // 西北  银川区域 吴忠万达广场     zoom 5
                 huabei: [39.019075, 117.686953], // 华北中心  天津区域  天津塘沽万达广场
                 huazhong: [33.999249, 113.872131], // 华中 郑州 许昌万达广场
-                huadong: [32.477565, 119.923391], // 华东 南京 泰州
+                huadong: [31.477565, 119.923391], // 华东 南京 泰州
                 zhongnan: [28.860875644389676, 114.55131767165491],
                 huanan: [22.635788, 110.17923], // 华南 南宁 玉林万达广场
                 dongnan: [26.657907, 119.545678], //东南 福州 宁德万达广场
@@ -238,37 +243,32 @@ export default {
             currentSysId: '', // 当前系统ID
             regulateDistrictData: [], // 分区数据
             maintainList: [],  // 专维  维保  第三方检测 数据
-            circleSize: {  // 根据缩放级别 规定绘制点的尺寸  下标文字离点的距离
-                4: { inner: 50000, outer: 100000, offset: 2 },
-                5: { inner: 15000, outer: 30000, offset: 0.8 },
-                6: { inner: 15000, outer: 30000, offset: 0.8 },
-                7: { inner: 8000, outer: 16000, offset: 0.3 },
-                8: { inner: 4000, outer: 8000, offset: 0.14 },
-                9: { inner: 2000, outer: 4000, offset: 0.08 },
-                10: { inner: 1000, outer: 2000, offset: 0.04 },
-                11: { inner: 1000, outer: 2000, offset: 0.04 }
-            },
             barColors :{  // // 专维  维保  第三方检测 颜色
                 0: 'linear-gradient(to right, #369CF7 , #025BAA)',   // 蓝色
                 1: 'linear-gradient(to right, #F58300 , #F58300)',   // 黄色
                 2: 'linear-gradient(to right, #F54E45 , #F54E45)'    // 红色
-            }
+            },
+            selectedZone:'',
+            loadingInstance:null
         }
     },
     computed: {
         ...mapGetters(['plazas', 'plazaId', 'accessLevel'])
     },
-    watch: {},
+    watch: {
+         
+    },
     created() {
         this.currentTime()
     },
     mounted() {
-
+         
+        
         window.vm = this
         this.getFrameworkTreeData()
         window.addEventListener('resize', this.reinitalMap, false)
     },
-    methods: {
+    methods: {  
         showToolTip (index) {
             this.maintainList.forEach(item => {item.showToolTip = false})
             this.maintainList[index].showToolTip = true
@@ -321,7 +321,7 @@ export default {
             this.currentZoneData = data
         },
         /**
-         * @Description 通过导航进行导航
+         * @Description 通过导航进行导航 
          * @Param id 所选区域的id
          * @Param index 点击项的序号
          */
@@ -329,11 +329,14 @@ export default {
             let data = this.getDataByCityCcode(id)  // 根据
             if (!data) return
             let level = data.level    //1集团 2中心 3区域 0广场
+            if (level === this.regulateDistrictData[0].level) {
+                this.selectedZone = ''
+            } 
             this.currentZoneData = data
             this.currentLevel = level
             this.getEventStatusData(level, data.ccode)
-            this.queryPlazaInfoCount(data.ccode, data.level, data.cid)
-            this.getSystemList(data.ccode, data.level)
+            this.queryPlazaInfoCount(data.ccode, data.level, data.cid) 
+            this.getSystemList(data.ccode, data.level) 
             if (level === 1) {
                 this.pantGroupMap(data, this.currentSysId)
             } else if (level === 2) {
@@ -349,6 +352,10 @@ export default {
          * @Param data 返回选中项的数据
          */
         selectProjectItem(ids) {
+            if (!ids && this.currentZoneData) {
+                this.pantGroupMap(this.regulateDistrictData[0], this.systemList[0].smsxt)
+                this.createNavpathByData(this.regulateDistrictData[0])
+            }
             let data = this.getDataByCityCcode(ids)
             this.currentLevel = data.level
             if (data.level === 0) {  //  level=0时 plazaId必填
@@ -356,12 +363,11 @@ export default {
             } else {
                 this.queryPlazaInfoCount(data.ccode, data.level)
             }
-
-            this.getSystemList(data.ccode, data.level)
+            this.getSystemList(data.ccode, data.level) 
             this.getEventStatusData(this.currentLevel, data.ccode)
             this.createNavpathByData(data)
             this.currentZoneData = data
-
+  
             let level = data.level // //1集团 2中心 3区域 0广场
             if (level === 1) {
                 this.pantGroupMap(data, this.currentSysId)
@@ -371,22 +377,20 @@ export default {
                 this.pantProjectsMap(data, this.currentSysId)
             } else {   // 点击项为广场时 直接跳转到详情页  地图不用响应
                 let pathData = {fromGroup: 'true'}
-                let routeData = this.$router.resolve({
-                    path:'/home/overview',query:{plazaId:data.ccode}
-                     });
-                window.open(routeData.href, true);
+                let routeData = this.$router.resolve({  
+                    name:'/home/homePage',
+                })
+                window.open(routeData.href, '_blank');
                 window.__fromGroupPage = {
                     level: 0,
                     plazaName: data.cname,
                     plazaId: data.ccode
                 }
-                this.$store.commit('SETPLAZENAME', data.cname)
-                // localStorage.setItem('PLAZAID', data.ccode)
-                // this.$store.commit('STOREPLAZAID', data.ccode)
-                this.$store.commit('SETISGETMAP',true)
+                this.$store.commit('SETPLAZENAME', data.cname) 
+                localStorage.setItem('PLAZAID', data.ccode)
             }
         },
-
+   
         /**
          * @Description  查询项目信息统计数量
          * @Param  ccode  管理分区编码 必填
@@ -447,7 +451,9 @@ export default {
                     data.open = true  // 默认展开第一级
                     this.regulateDistrictData = [data]
                     this.currentDistrictData = res.treeData
-                    this.getSystemList(data.ccode, level )
+                    this.getSystemList(data.ccode, level ).then(res => {
+                        this.initMap()
+                    })
                     this.getEventStatusData(level, data.ccode)
                     if (level === 0) {  //  level=0时 plazaId必填
                         this.queryPlazaInfoCount(data.ccode, level, data.ccode)
@@ -471,7 +477,7 @@ export default {
             })
         },
          /**
-        * @Description 展开 维保 第三方检测 专维
+        * @Description 展开 维保 第三方检测 专维 
         * @Param  item 展开的某一项
         */
         toggerPanel(item) {
@@ -506,7 +512,7 @@ export default {
         /**
         *@Description 根据数据计算维保/第三方检测/专维各自颜色条的长度  维保、第三方检测是用即将逾期数据判断;专维是如果有逾期未完成直接标红,如果没有,按照即将逾期的数量显示颜色
         *@Param item 某一项的数据
-        *@Param title 标题
+        *@Param title 标题 
         */
         barStyle(item, title) {
             let bg = ''
@@ -514,7 +520,7 @@ export default {
             let ratio = 0
             if (title === '专维') {
                 if (item.unfinished>0) {
-                    bg = 'linear-gradient(to right, #F54E45 , #F54E45)'
+                    bg = 'linear-gradient(to right, #F54E45 , #F54E45)'  
                 } else {
                     bg = this.barColors[type]
                 }
@@ -529,11 +535,11 @@ export default {
             }
         },
         /**
-         * @Description 根据数据来返 维保/第三方检测/专维 三个模块中显示条的颜色
+         * @Description 根据数据来返 维保/第三方检测/专维 三个模块中显示条的颜色 
          * @Param num 即将逾期数 / 逾期未完成数
          * @Param total 总数
          */
-        selectColorByNum (num, total) {
+        selectColorByNum (num, total) {    
             let devide =  num / total
             if ( (num > 1 && num <=24  ) || (  devide > 0.1 && devide <=0.2 ) ) {
                 return 0
@@ -543,36 +549,25 @@ export default {
                 return 2
             }
         },
-
+  
         /**
         * @Description 根据数据 判定地图上图标的显示显示颜色
         * @Param data 作为判断的数据
         */
         paintColorByData(data) {
-            let color = {
-                area: '',
-                border: ''
-            }
             if (data >= 200) {
-                color.area = '#F54E45'
-                color.border = 'rgba(245,78,69,0.2)'
+                return  'level5'
             } else if (data >= 100 && data < 200) {
-                color.area = '#F58300'
-                color.border = 'rgba(245,131,0,0.2)'
+                return 'level4'
             } else if (data >= 50 && data < 100) {
-                color.area = '#FFBA6B'
-                color.border = 'rgba(255,186,107,0.2)'
+                return  'level3'
             } else if (data >= 10 && data < 50) {
-                color.area = '#0091FF'
-                color.border = 'rgba(0,145,255,0.2)'
+                return 'level2'
             } else if (data >= 1 && data < 10) {
-                color.area = '#82C7FC'
-                color.border = 'rgba(130,199,25,0.2)'
+                return 'level1'
             } else {
-                color.area = '#EEEEEE'
-                color.border = '#CCC'
+                return 'level0'
             }
-            return color
         },
         /**
         * @Description 显示当期时间
@@ -581,7 +576,7 @@ export default {
             this.times = moment().format('YYYY.MM.DD HH:mm')
             setTimeout(this.currentTime, 1000)
         },
-
+ 
          /**
         * @Description 格式化时间
         * @method param empty
@@ -601,31 +596,33 @@ export default {
         * @method param plazaId 广场id  如果是广场则此参数必填 其他情况下非必填
         */
         getSystemList(ccode, level) {
-            let params = null
+            let params = null 
             if (level === 0) {
                 params = {getParams:{plazaId: ccode, level}}
             } else {
                 params = {getParams:{ccode, level}}
             }
-            getCardList(params).then(res => {
-                if (res.result == 'success') {
-                    let result = res.data
-                    if (result && Array.isArray(result)) {
-                        result.forEach(item => {
-                            if (item.assetTypeList) {
-                                item.assetTypeList = item.assetTypeList.splice(0, 3)
-                            }
-                        })
-                        res.data.forEach(item => {
-                            item.selected = false
-                        })
-                        res.data[0].selected = true
-                        this.currentSelectedSys = res.data[0]
-                        this.currentSysId = res.data[0].smsxt
-                        this.systemList = res.data
-                        this.initMap()
+            return new Promise((resolve,reject) => {
+                getCardList(params).then(res => {
+                    if (res.result == 'success') {
+                        let result = res.data
+                        if (result && Array.isArray(result)) {
+                            result.forEach(item => {
+                                if (item.assetTypeList) {
+                                    item.assetTypeList = item.assetTypeList.splice(0, 3)
+                                }
+                            })
+                            res.data.forEach(item => {
+                                item.selected = false
+                            })
+                            res.data[0].selected = true
+                            this.currentSelectedSys = res.data[0]
+                            this.currentSysId = res.data[0].smsxt
+                            this.systemList = res.data
+                            resolve(res)
+                        }
                     }
-                }
+                })
             })
         },
         /**
@@ -633,7 +630,7 @@ export default {
          * @Param ccode 管理分区编码 必填
          * @Param level 1集团 2中心 3区域 0广场 必填
          */
-        getEventStatusData(level, ccode) {
+        getEventStatusData(level, ccode) {  
             let params = {
                 getParams: {
                     level,
@@ -643,7 +640,7 @@ export default {
             queryEventStatus(params).then(res => {
                 if (res.result === 'success') {
                     let data = res.data
-                    let orginalObj = {
+                    let orginalObj = { 
                         1:{title:'维保',data:[], expand: 0, showToolTip:false},
                         2:{title:'第三方检测',data:[], expand: 0, showToolTip:false},
                         0:{title:'专维',data:[], expand: 0, showToolTip:false},
@@ -682,17 +679,17 @@ export default {
             myMaps = L.map('map', {
                 center: new L.LatLng(38, 103),
                 zoom: 4,
-                // maxZoom:4,
-                // minZoom:4,
                 crs: L.CRS.EPSG3857,
                 zoomControl: false,
                 boxZoom: false,
                 attributionControl: false,
                 contextmenu: true,
                 contextmenuWidth: 140,
-                dragging: false,
                 closePopupOnClick:true,
-                doubleClickZoom:false
+                doubleClickZoom:false,
+                wheelPxPerZoomLevel:20
+                // scrollWheelZoom:false,
+                // dragging: false,
             })
             let JsonData = require('../../assets/geoData/china.json')
             let layer = L.geoJSON(JsonData.features, {
@@ -704,13 +701,13 @@ export default {
                     }
                 }
             }).addTo(myMaps)
-            if (this.currentLevel === 1) {//1集团
+            if (this.currentLevel === 1) {//1集团 
                 this.pantGroupMap(this.currentZoneData, this.currentSysId)
             } else if (this.currentLevel === 2) {  // 2中心
                 this.pantZonesMap(this.currentZoneData, this.currentSysId)
-            } else if (this.currentLevel === 3) {  // 3区域
+            } else if (this.currentLevel === 3) {  // 3区域 
                 this.pantProjectsMap(this.currentZoneData, this.currentSysId)
-            }
+            }  
         },
         /**
          * @Description 清空地图 并添加全国底图
@@ -768,11 +765,12 @@ export default {
             let groupLayer = new L.layerGroup()
             let promiseAll = []
             let layerArr = []
+            this.loadingInstance = Loading.service({target:'#map', fullscreen: false, text:'数据正在加载...', background:'rgba(255,255,255,.5)'})
             data.children.forEach(item => {
                 let promise = new Promise((resolve, reject) => {
                     let params = {
                         getParams: {
-                            smsxt: this.currentSysId,
+                            smsxt: this.currentSysId,  
                             level: 2,    // 中心
                             ccode: item.ccode
                         }
@@ -781,7 +779,7 @@ export default {
                         if (res.result === 'success') {
                             let num = 0
                             let name = item.cname.substr(0, 2)
-                            if (res.data) {
+                            if (res.data ) {
                                 let equip = res.data[0]
                                 if (equip.assetTypeList) {
                                     equip.assetTypeList.forEach(item => {
@@ -797,7 +795,7 @@ export default {
                                         fullName: item.cname
                                     })
                                 }
-                                resolve(item)
+                                resolve(res)
                             }
                         }
                     })
@@ -805,14 +803,17 @@ export default {
                 promiseAll.push(promise)
             })
             Promise.all(promiseAll).then(result => {
-                layerArr.forEach(item => {
-                    let zone = this.zoneNames[item.name]
-                    let center = this.zoneCenter[zone]
-                    let contentHtml = that.createPopupHtmlContent(item.list.assetTypeList, item.fullName)
-                    if (contentHtml) {
-                        this.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.name , 'group', 4)
-                    }
-                })
+                this.loadingInstance.close()
+                if (this.currentLevel === 1) {
+                    layerArr.forEach(item => {
+                        let zone = this.zoneNames[item.name]
+                        let center = this.zoneCenter[zone]
+                        let contentHtml = that.createPopupHtmlContent(item.list.assetTypeList, item.fullName)
+                        if (contentHtml) {
+                            this.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.name , 'group', 4)
+                        }
+                    })
+                }
             })
             groupLayer.addTo(myMaps)
         },
@@ -826,45 +827,70 @@ export default {
             let name = data.cname.substr(0, 2)
             let zone = this.zoneNames[name]
             let zoom, inner, outer, offset
-            if (['xibei'].includes(zone)) {
+            if (zone === 'huadong') {
+                zoom = 8
+            } else if ( zone == 'xibei') {
                 zoom = 5
             } else {
                 zoom = 6
             }
             this.flyTo(this.zoneCenter[zone], zoom)
             let groupLayer = new L.layerGroup()
+            let promiseAll = []
+            let layerArr = []
+            this.loadingInstance = Loading.service({target:'#map', fullscreen: false, text:'数据正在返回...', background:'rgba(255,255,255,.5)'})
             data.children.forEach(item => {
-                let params = {
-                    getParams: {
-                        smsxt: this.currentSysId,
-                        level: 3,   // 区域
-                        ccode: item.ccode
+                let promise = new Promise((resolve, reject) => {
+                    let params = {
+                        getParams: {
+                            smsxt: this.currentSysId, 
+                            level: 3,   // 区域
+                            ccode: item.ccode
+                        }
                     }
-                }
-                querySystemCard(params).then(res => {
-                    if (res.result === 'success') {
-                        let name = item.cname.split('区域')[0]
-                        let city = that.provinceCities[name]
-                        let num = 0
-                        let center = city.center
-                        if (res.data) {
-                            let equip = res.data[0]
-                            let contentHtml = that.createPopupHtmlContent(equip.assetTypeList, item.cname)
-                            if (equip.assetTypeList) {
-                                equip.assetTypeList.forEach(item => {
-                                    if (item.is_exception_num) {
-                                        num += item.is_exception_num
-                                    }
-                                })
+                    querySystemCard(params).then(res => {
+                        if (res.result === 'success') {
+                            let name = item.cname.split('区域')[0]
+                            
+                            let num = 0
+                            if (res.data) {
+                                let equip = res.data[0]
+                                if (equip.assetTypeList) {
+                                    equip.assetTypeList.forEach(item => {
+                                        if (item.is_exception_num) {
+                                            num += item.is_exception_num
+                                        }
+                                    })
+                                    layerArr.push({
+                                        name,
+                                        num,
+                                        list: equip,
+                                        data: item,
+                                        fullName: item.cname
+                                    })
+                                }
                             }
-                            that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'zone', 6)
+                            resolve(res)
                         }
-                    }
+                    })
                 })
+                promiseAll.push(promise)
+            })
+            Promise.all(promiseAll).then(result => {
+                this.loadingInstance.close()
+                if (this.currentLevel === 2) {
+                    layerArr.forEach(item => {
+                        let city = that.provinceCities[item.name]
+                        let center = city.center
+                        let contentHtml = that.createPopupHtmlContent(item.list.assetTypeList, item.fullName)
+                        if (contentHtml) {
+                            that.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.data.cname, 'zone', zoom)
+                        }
+                    })
+                }
             })
             groupLayer.addTo(myMaps)
         },
-
         /**
          * @Description 用于绘制项目的点
          * @Param data 数据
@@ -873,47 +899,62 @@ export default {
             this.clearAllLayers()
             let name = data.cname.split('区域')[0]
             let geo = this.provinceCities[name]
-            this.flyTo(geo.center, geo.zoom)
-            data.children.forEach(item => {
-                this.pantPlazaMap(item, geo.zoom)
-            })
-        },
-        /**
-         * @Description 用于绘制广场
-         * @Param data 数据
-         */
-        pantPlazaMap(item, zoom) {
             let that = this
+            let promiseAll = []
+            let layerArr = []
             let groupLayer = new L.layerGroup()
-            let params = {
-                getParams: {
-                    plazaId: item.cid,   // 所查对象是广场的时候plazaId必传
-                    smsxt: this.currentSysId,
-                    level: 0,   // 广场
-                    ccode: item.ccode
-                }
-            }
-            querySystemCard(params).then(res => {
-                if (res.result === 'success') {
-                    let num = 0
-                    if (item.latitude && item.longitude) {
-                        let center = [item.latitude, item.longitude]
-                        if (res.data) {
-                            let equip = res.data[0]
-                            let contentHtml = that.createPopupHtmlContent(equip.assetTypeList, item.cname)
-                            if (equip.assetTypeList) {
-                                equip.assetTypeList.forEach(item => {
-                                    if (item.is_exception_num) {
-                                        num += item.is_exception_num
-                                    }
+            this.flyTo(geo.center, geo.zoom)
+            this.loadingInstance = Loading.service({target:'#map', fullscreen: false, text:'数据正在返回...', background:'rgba(255,255,255,.5)'})
+            data.children.forEach(item => {
+                let pormise = new Promise((resolve, reject) => {
+                    let params = {
+                        getParams: {
+                            plazaId: item.cid,   // 所查对象是广场的时候plazaId必传
+                            smsxt: this.currentSysId,  
+                            level: 0,   // 广场
+                            ccode: item.ccode
+                        }
+                    }
+                    querySystemCard(params).then(res => {
+                        if (res.result === 'success') {
+                            let num = 0
+                            if (res.data && item.latitude && item.longitude) {
+                                let equip = res.data[0]
+                                if (equip.assetTypeList) {
+                                    equip.assetTypeList.forEach(item => {
+                                        if (item.is_exception_num) {
+                                            num += item.is_exception_num
+                                        }
+                                    })
+                                }
+                                layerArr.push({
+                                    name,
+                                    num,
+                                    list: equip,
+                                    data: item,
+                                    fullName: item.cname
                                 })
                             }
-                            that.createPointOnMap(num, groupLayer, contentHtml, center, item, item.cname, 'project', zoom)
+                            resolve(res)
                         }
-                    }
+                        groupLayer.addTo(myMaps)
+                    })
+                })
+                promiseAll.push(pormise)
+            })
+            Promise.all(promiseAll).then(result => {
+                this.loadingInstance.close()
+                if (this.currentLevel === 3) {
+                    layerArr.forEach(item => {
+                        let center = [item.data.latitude, item.data.longitude]
+                        let contentHtml = that.createPopupHtmlContent(item.list.assetTypeList, item.fullName)
+                        if (contentHtml) {
+                            that.createPointOnMap(item.num, groupLayer, contentHtml, center, item.data, item.data.cname, 'project', geo.zoom)
+                        }
+                    })
                 }
-                groupLayer.addTo(myMaps)
             })
+            groupLayer.addTo(myMaps)
         },
          /**
          * @Description 用于绘制广场的点
@@ -927,61 +968,60 @@ export default {
          * @param zoom 缩放级别
          */
         createPointOnMap (num, groupLayer, contentHtml, center, data,  name, type , zoom) {
-            let popup = null
-            let marker = null
-            let outCircle = null
-            let innerCircle = null
             let color = this.paintColorByData(num)
-            let myIcon = L.divIcon({
-                html: name,
+            let textIcon = L.divIcon({
+                html: type =='group' ? name :`<div>${name}</div>`,
                 className: 'my-leaflet-div-icon',
                 iconSize: 30
-            })
-            let sizes = this.circleSize[zoom]
-            if (color  && center) {
-                popup = L.popup({closeOnClick:true}).setLatLng(center).setContent(contentHtml)
-                marker = L.marker([center[0] - sizes.offset,  center[1]], { icon: myIcon }).addTo(groupLayer)
-                outCircle = L.circle(center, sizes.outer, { color: 'transparent', fillColor: color.border, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
-                innerCircle =L.circle(center, sizes.inner, { color: 'transparent', fillColor: color.area, fillOpacity: 1 }).bindPopup(contentHtml).addTo(groupLayer)
-                let feaureGroup = L.featureGroup([marker, outCircle, innerCircle, popup])
-                feaureGroup.on('mouseover', ev => {
+            }) 
+            let circleIcon = L.icon({
+                iconUrl: require(`../../assets/images/icons/${color}.png`),
+                iconSize: [24, 24],
+                iconAnchor: [16, 38],
+            });
+ 
+            if (color  && center) { 
+                let popup = L.popup({closeOnClick:true,offset: [-3,-20]}).setLatLng(center).setContent(contentHtml)
+                let marker = L.marker(center, { icon: textIcon }).addTo(groupLayer)
+                let marker2 = L.marker(center,{ icon: circleIcon} ).addTo(groupLayer)
+                let feaureGroup = L.featureGroup([marker, marker2 ])
+                marker2.on('mouseover', ev => {
                     popup.openOn(myMaps)
                 })
+                marker2.on('mouseout', ev => {
+                    myMaps.closePopup(popup)
+                })
                 feaureGroup.on('click', ev => {
                     this.currentZoneData = data
                     this.currentLevel = data.level
                     this.getEventStatusData(data.level, data.ccode)
-                    this.queryPlazaInfoCount(data.ccode, data.level)
+                    this.queryPlazaInfoCount(data.ccode, data.level) 
                     if (type !== 'project') {
                         groupLayer.clearLayers()
                     }
                     this.createNavpathByData(data)
-                    this.getSystemList(data.ccode, data.level)
+                    this.getSystemList(data.ccode, data.level)   
                     if (type === 'group') {
                         this.pantZonesMap(data, this.currentSysId)
-                    }
+                    } 
                     if (type === 'zone') {
                         this.pantProjectsMap(data, this.currentSysId)
-                    }
+                    } 
                     if (type === 'project') {
-
-                            let routeData = this.$router.resolve({
-                    path:'/home/overview',query:{plazaId:data.ccode}
-                     });
+                        let routeData = this.$router.resolve({
+                            name:'/home/homePage',
+                        })
                         window.open(routeData.href, '_blank');
                         window.__fromGroupPage = {
                             level: 0,
                             plazaName: data.cname,
                             plazaId: data.ccode
                         }
-                        this.$store.commit('SETPLAZENAME', data.cname)
-                        // localStorage.setItem('PLAZAID', data.ccode)
-                        // this.$store.commit('STOREPLAZAID', data.ccode)
-                        this.$store.commit('SETISGETMAP',true)
-                    }
+                        this.$store.commit('SETPLAZENAME', data.cname) 
+                        localStorage.setItem('PLAZAID', data.ccode)
+                    }   
                 })
             }
-
         },
         /**
          *@Description 生成弹出框HTML
@@ -995,7 +1035,7 @@ export default {
                     let item = data[i]
                     if (item.is_exception_num) {
                         html += `<div class="line">
-                            <span>${item.category_name}</span>
+                            <span>${item.category_name}</span> 
                             <span>${item.asset_num || '--'}台</span>
                             <span><span style="display: inline-block;width: 16px;height: 16px;line-height: 16px;border-radius: 8px; color: white; background : #F54E45;text-align: center;cursor: default;">!</span><em>${
                                 item.is_exception_num
@@ -1003,7 +1043,7 @@ export default {
                         </div>`
                     } else {
                         html += `<div class="line">
-                            <span>${item.category_name}</span>
+                            <span>${item.category_name}</span> 
                             <span>${item.asset_num || '--'}台</span>
                         </div>`
                     }
@@ -1013,7 +1053,7 @@ export default {
                 return ''
             }
         },
-
+        
     },
     beforeDestroy() {
         window.removeEventListener('resize', this.reinitalMap)
@@ -1038,6 +1078,9 @@ export default {
 .selectDownUpExtendTop-leave-active {
     animation: selectDownUpExtendTop .3s reverse
 }
+ /deep/ .p-tree-single-panel{
+     height: 400px!important;
+ }
 .overview {
     height: 100vh;
     background: rgba(247, 249, 250, 1);
@@ -1166,11 +1209,12 @@ export default {
             }
             span:first-child {
                 display: inline-block;
-                width: 14.4rem;
-                height: 2.8rem;
+                width: auto;
+                height: 3rem;
                 margin-right: 1.2rem;
                 border: 1px solid rgba(195, 199, 203, 1);
                 border-radius: 1.4rem;
+                padding: 0 2rem;
                 text-align: center;
                 line-height: 2.8rem;
                 font-size: 14px;
@@ -1201,7 +1245,7 @@ export default {
                 margin-left: 1.2rem;
             }
         }
-
+        
         .system-general {
             width: 25.4%;
             box-sizing: border-box;
@@ -1229,8 +1273,8 @@ export default {
                         .system-name {
                             display: flex;
                             align-items: center;
-                            width: 28%;
-                            padding: 1.2rem 0 1.2rem 1rem ;
+                            width: 25%;
+                            padding: 1.2rem 0 1.2rem 1rem ;  
                             border-right: 1px solid #EFF0F1;
                             .img {
                                 height: 2.8rem;
@@ -1258,23 +1302,22 @@ export default {
                             }
                         }
                         .system-equipments {
-                            width: 72%;
+                            width: 75%;
                             display: flex;
                             align-items: center;
                             padding-left: 1.4rem;
                             .number {
                                 width: 33.3%;
-                                margin-right: 1.2rem;
                                 .title{
                                     display: inline-block;
                                     position: relative;
                                     p{
                                         display: inline-block;
                                         position: relative;
-                                        width: 100%;
+                                        width: 12rem;
                                         color: #1f2429;
                                         font-size: 1.4rem;
-                                        line-height: 1.6rem;
+                                        line-height: 2rem;
                                         white-space: nowrap;
                                         text-overflow: ellipsis;
                                         overflow: hidden;
@@ -1298,6 +1341,7 @@ export default {
                                     }
                                 }
                             }
+                             
                         }
                     }
                     li.selected {
@@ -1308,8 +1352,8 @@ export default {
                         border-bottom: none;
                     }
                     li:hover {
-                        border-color: #66addd;
-                        box-shadow: 0 2px 10px 0px rgba(204, 100, 77, 0.4);
+                        border-color: #E4E5E7;
+                        box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
                     }
                 }
             }
@@ -1363,7 +1407,10 @@ export default {
                 #map {
                     height: 70vh;
                     overflow: hidden;
-                    pointer-events: none;
+                    
+                    svg {
+                        pointer-events: none; 
+                    }
                 }
                 .legend {
                     position: absolute;
@@ -1425,7 +1472,7 @@ export default {
                 .list {
                     margin-top: 1.4rem;
                     overflow: hidden;
-                    height: calc(100% - 3rem);
+                    height: calc(100% - 4rem);
                     ul {
                         li {
                             display: flex;
@@ -1472,4 +1519,5 @@ export default {
         }
     }
 }
-</style>
+</style> 
+