多元化地图

src/views/modules/visual/measure/volunteer.vue

@@ -2,7 +2,8 @@
   <div class="warning-box">
     <cpt-card class="card-wr">
       <div class="card-title">
-        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <img class="title-icon"
+             src="../../../../assets/img/shuju/title-tip.png" />
         <div class="title-label">
           志愿者服务情况
         </div>
@@ -26,11 +27,12 @@
           </div>
           <div class="echart-wr">
             <!-- <div class="echart-cicle"></div> -->
-            <div id="echartService" class="echart-org"></div>
+            <div id="echartService"
+                 class="echart-org"></div>
           </div>
-          
+
         </div>
-        
+
       </div>
 
       <div class="card-echart">
@@ -51,17 +53,19 @@
           </div>
           <div class="echart-wr">
             <!-- <div class="echart-cicle"></div> -->
-            <div id="echartCount" class="echart-org"></div>
+            <div id="echartCount"
+                 class="echart-org"></div>
           </div>
-          
+
         </div>
-        
+
       </div>
 
     </cpt-card>
-    <cpt-card class="card-wr">
+    <cpt-card class="card-wr card-wr-map">
       <div class="card-title">
-        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <img class="title-icon"
+             src="../../../../assets/img/shuju/title-tip.png" />
         <div class="title-label">
           多元化治理平面图
         </div>
@@ -91,7 +95,10 @@
       </div>
 
       <div class="card-map">
-        这里是地图容器
+        <screen-map class="map"
+                    ref="map"
+                    @clickFeature="clickProject"
+                    :showIconLayer="true"></screen-map>
       </div>
 
     </cpt-card>
@@ -103,6 +110,7 @@ import { requestPost } from "@/js/dai/request";
 import screenTable from "../components/screen-table/index";
 import cptCard from "@/views/modules/visual/cpts/card";
 import nextTick from "dai-js/tools/nextTick";
+import screenMap from "@/views/modules/visual/components/screen-map";
 
 import * as echarts from 'echarts';
 export default {
@@ -110,8 +118,9 @@ export default {
   components: {
     cptCard,
     screenTable,
+    screenMap
   },
-  data() {
+  data () {
     return {
       warningList: [],
       headerList: [
@@ -135,16 +144,62 @@ export default {
       total: 0,
       activeIndex: 0,
       activeLevel: "1",
+
+      //地图相关数据
+      isfirstInit: true,//记录是否是首次加载地图
+      agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
+      unitMapList: [],
+      unitMapList1: [
+        {
+          type: '党建楼宇',
+          name: '建联单位1',
+          latitude: 36.062227,
+          longitude: 120.389455,
+        },
+        {
+          type: '党建楼宇',
+          name: '建联单位2',
+          latitude: 36.082227,
+          longitude: 120.389455,
+        },
+        {
+          type: '机关直属部门',
+          name: '建联单位3',
+          latitude: 36.062227,
+          longitude: 120.379455,
+        },
+        {
+          type: '两新党建',
+          name: '建联单位4',
+          latitude: 36.082227,
+          longitude: 120.379455,
+        },
+        {
+          type: '辖区单位',
+          name: '建联单位5',
+          latitude: 36.092227,
+          longitude: 120.379455,
+        },
+        {
+          type: '其他',
+          name: '建联单位6',
+          latitude: 36.102227,
+          longitude: 120.379455,
+        }
+      ],
     };
   },
-  async mounted() {
+  async mounted () {
     await nextTick(100);
     this.initCharts()
     this.initCount()
     this.getBuildingwarnlist();
+
+    await this.getWorkUserInfo()
+    await this.getMapUnitList()
   },
   methods: {
-    initCharts() {
+    initCharts () {
       const eId = document.getElementById('echartService')
       let _charts = echarts.init(eId)
       let option = {
@@ -192,21 +247,21 @@ export default {
                 fontWeight: 'bold'
               }
             },
-            
+
             data: [
-              { 
-                value: 104, 
-                name: '党员', 
+              {
+                value: 104,
+                name: '党员',
                 itemStyle: {
                   color: 'rgba(26, 178, 255, 1)'
-                } 
+                }
               },
-              { 
-                value: 735, 
-                name: '居民', 
+              {
+                value: 735,
+                name: '居民',
                 itemStyle: {
                   color: 'rgba(250, 193, 38, 1)'
-                } 
+                }
               }
             ]
           }
@@ -215,7 +270,7 @@ export default {
       option && _charts.setOption(option);
 
     },
-    initCount() {
+    initCount () {
       const eId = document.getElementById('echartCount')
       let _charts = echarts.init(eId)
       let option = {
@@ -266,21 +321,21 @@ export default {
                 fontWeight: 'bold'
               }
             },
-            
+
             data: [
-              { 
-                value: 1048, 
-                name: '党员', 
+              {
+                value: 1048,
+                name: '党员',
                 itemStyle: {
                   color: 'rgba(26, 178, 255, 1)'
-                } 
+                }
               },
-              { 
-                value: 735, 
-                name: '居民', 
+              {
+                value: 735,
+                name: '居民',
                 itemStyle: {
                   color: 'rgba(250, 193, 38, 1)'
-                } 
+                }
               }
             ]
           }
@@ -289,15 +344,15 @@ export default {
       option && _charts.setOption(option);
 
     },
-    
-    onClickList(index, level) {
+
+    onClickList (index, level) {
       this.activeIndex = index;
       this.activeLevel = level;
       this.pageNo = 1;
       this.getUserwarnlist();
     },
     //具体人员列表
-    async getUserwarnlist() {
+    async getUserwarnlist () {
       const { activeIndex, activeLevel, warningList } = this;
       const reqItem = warningList[activeIndex];
       let tableData = [];
@@ -323,7 +378,7 @@ export default {
       }
     },
     // 【人员预警】 楼宇预警数量列表
-    async getBuildingwarnlist() {
+    async getBuildingwarnlist () {
       const url = "/epmetuser/statsresiwarn/buildingwarnlist";
       let params = {
         agencyId: this.$store.state.user.agencyId,
@@ -336,14 +391,109 @@ export default {
       } else {
       }
     },
-    pageSizeChangeHandleNew(val) {
+    pageSizeChangeHandleNew (val) {
       this.pageNo = 1;
       this.pageSize = val;
     },
-    pageCurrentChangeHandleNew(val) {
+    pageCurrentChangeHandleNew (val) {
       this.pageNo = val;
       this.getUserwarnlist();
     },
+
+    // 获取当前管理员信息
+    getWorkUserInfo () {
+      const url = '/epmetuser/customerstaff/staffbasicinfo'
+      let params = {}
+      window.app.ajax.post(
+        url,
+        params,
+        (data, rspMsg) => {
+          this.agencyInfo = data
+          if (!data.latitude) {
+            this.agencyInfo.latitude = 36.072227
+          }
+          if (!data.longitude) {
+            this.agencyInfo.longitude = 120.389455
+          }
+          if (!data.level) {
+            this.agencyInfo.level = 'street'
+          }
+
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+        }
+      )
+
+    },
+
+    //获取联建单位分布图
+    async getMapUnitList () {
+      // const url = "/heart/icpartyunit/distribution"
+      const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+      let params = {
+        agencyId: this.$store.state.user.agencyId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        // this.unitMapList = data
+        this.unitMapList = this.unitMapList1
+
+        this.unitMapList.forEach(item => {
+
+          if (item.type === '党建楼宇') {
+            item.urlIndex = 0
+          } else if (item.type === '两新党建') {
+            item.urlIndex = 1
+          } else if (item.type === '辖区单位') {
+            item.urlIndex = 2
+          } else if (item.type === '机关直属部门') {
+            item.urlIndex = 3
+          } else if (item.type === '其他') {
+            item.urlIndex = 4
+          }
+        });
+
+
+        this.iconUrlArray = [
+          require('../../../../assets/img/shuju/measure/ly@2x.png'),//未处理
+          require('../../../../assets/img/shuju/measure/jgzs@2x.png'),//已处理
+          require('../../../../assets/img/shuju/measure/lxdj@2x.png'),//已处理
+          require('../../../../assets/img/shuju/measure/xq@2x.png'),//已处理
+          require('../../../../assets/img/shuju/measure/qita.png')//已处理
+        ]
+
+
+        //第一次加载完置为false
+        this.loadMap()
+
+        this.isfirstInit = false
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+
+    //加载地图数据
+    loadMap () {
+      if (this.isfirstInit) {
+        //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
+        this.$refs.map.loadMap(this.agencyInfo, null, null, this.unitMapList, this.iconUrlArray, null)
+      } else {
+        this.$refs.map.refreshMap(null, this.unitMapList)
+
+      }
+    },
+
+    //点击项目
+    clickProject (feature) {
+      console.log('标注信息', feature.values_.properties)
+    },
   },
 };
 </script>
@@ -383,12 +533,11 @@ export default {
     color: #fff;
     font-weight: 800;
   }
-  
 }
 .card-echart {
   display: flex;
   margin-top: 40px;
-  
+
   .card-left {
     position: relative;
     flex: 1;
@@ -432,7 +581,8 @@ export default {
     box-sizing: border-box;
     margin-top: 20px;
     // padding-left: 192px;
-    background: url('../../../../assets/img/shuju/measure/dangyuan.png') center no-repeat;
+    background: url("../../../../assets/img/shuju/measure/dangyuan.png") center
+      no-repeat;
     background-size: cover;
     .card-count-content {
       position: relative;
@@ -447,14 +597,14 @@ export default {
       .card-count-label {
         margin-top: 6px;
         font-size: 16px;
-        color: rgba(255, 255, 255, .72);
+        color: rgba(255, 255, 255, 0.72);
       }
     }
     .card-count-content::after {
       position: absolute;
       top: 50%;
       left: 0;
-      content: '';
+      content: "";
       width: 1px;
       height: 50px;
       margin-top: -25px;
@@ -462,7 +612,8 @@ export default {
     }
   }
   .card-count-item:last-child {
-    background: url('../../../../assets/img/shuju/measure/jumin.png') center no-repeat;
+    background: url("../../../../assets/img/shuju/measure/jumin.png") center
+      no-repeat;
   }
 }
 
@@ -472,6 +623,7 @@ export default {
   flex-wrap: wrap;
   padding-top: 10px;
   padding-bottom: 20px;
+
   .map-tips-item {
     display: flex;
     align-items: center;
@@ -482,7 +634,7 @@ export default {
       height: 10px;
       box-sizing: border-box;
       margin-right: 10px;
-      background: #DD2719;
+      background: #dd2719;
       border-radius: 2px;
     }
     .map-tips-label {
@@ -492,4 +644,17 @@ export default {
   }
 }
 
+.card-wr-map {
+  height: calc(100vh - 110px);
+
+  .card-map {
+    width: 100%;
+    height: calc(100vh - 255px);
+
+    .map {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>