Merge branch '王立生' of sckj/mz-cloud into master

ruoyi-ui/src/views/bigScreen/resources/index.vue

@@ -53,13 +53,7 @@
         </div>
       </div>
       <div id="container"></div>
-      <div class="input-card" style="width: 20rem">
-        <div class="input-item">
-          <div class="input-item-prepend"><span class="input-item-text" >区划选择</span></div>
-          <select id='mypic' style="width:11rem" onchange='setpic(this)'></select>
-        </div>
 
-      </div>
       <div class="func-wrap">
         <svg-icon :icon-class="hideTopNav ? 'exit-fullscreen' : 'fullscreen'" class="full-btn" @click="clickScreen" />
         <!--<svg-icon icon-class="form" class="info-btn" @click="showInfo" />-->
@@ -76,9 +70,17 @@
     </div>
     <el-radio-group class="bottom-group" :class="{hide:!hideTopNav}" v-model="pattern" @input="patternChange">
       <el-radio :label="0">资源分布</el-radio>
-      <el-radio :label="1" :disabled="true">资源密度</el-radio>
+      <el-radio :label="1" >资源密度</el-radio>
       <el-radio :label="2">生活圈模式</el-radio>
       <el-radio :label="3">区划钻取</el-radio>
+      <el-select v-show="pattern==9" v-model="mapxzqh" @change="mapxzqhcg">
+        <el-option
+          v-for="item in mapxzqhsub"
+          :key="item.adcode"
+          :label="item.name"
+          :value="{adcode:item.adcode,name:item.name,level:item.level}"
+        ></el-option>
+      </el-select>
     </el-radio-group>
 
     <div class="drawer" :class="{'showDrawer':showDrawer}">
@@ -90,11 +92,11 @@
         <smart v-if="sideActive === 4"></smart>
       </el-scrollbar>
     </div>
-	  <oldman-info v-if="sideActive === 0" :id="jgId" :visible.sync="isShowInfo"></oldman-info>
-	  <org-info v-if="sideActive === 1" :id="jgId" :visible.sync="isShowInfo"></org-info>
-	  <service-info v-if="sideActive === 2" :id="jgId" :visible.sync="isShowInfo"></service-info>
-	  <monitor-info v-if="sideActive === 3" :id="jgId" :visible.sync="isShowInfo"></monitor-info>
-	  <smart-info v-if="sideActive === 4" :id="jgId" :visible.sync="isShowInfo"></smart-info>
+    <oldman-info v-if="sideActive === 0" :id="jgId" :visible.sync="isShowInfo"></oldman-info>
+    <org-info v-if="sideActive === 1" :id="jgId" :visible.sync="isShowInfo"></org-info>
+    <service-info v-if="sideActive === 2" :id="jgId" :visible.sync="isShowInfo"></service-info>
+    <monitor-info v-if="sideActive === 3" :id="jgId" :visible.sync="isShowInfo"></monitor-info>
+    <smart-info v-if="sideActive === 4" :id="jgId" :visible.sync="isShowInfo"></smart-info>
   </div>
 </template>
 
@@ -159,16 +161,16 @@ export default {
 
       showDrawer: false,  // 右侧模块显隐
       pattern: 0,   // 模式选择
-	    // 获取点位图参数
-	    PTParams: {
-		    code: null,   // 默认选账号loacationCode，区域下钻模式会改变
-	    },
+      // 获取点位图参数
+      PTParams: {
+        code: null,   // 默认选账号loacationCode，区域下钻模式会改变
+      },
 
-	    // 区划下钻模式的接口参数
-	    RegionParams: {
-		    code: null, // 本级code
-		    parentCode: null  // 下级code
-	    },
+      // 区划下钻模式的接口参数
+      RegionParams: {
+        code: null, // 本级code
+        parentCode: null  // 下级code
+      },
 
       // 地图相关参数
       jgId: '',
@@ -177,6 +179,9 @@ export default {
         yljg: null,
         sqyljg: null
       },
+      mpcolor: [ "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
+        "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
+        "#651067", "#329262", "#5574a6", "#3b3eac"],
       mapCenter: null,
       mapZoom: null,
       currentlXY: null,
@@ -197,6 +202,11 @@ export default {
       locationCode:'',
       xfxzqhid:'',
       currsqData:[],
+      mapxzqhsub: [],
+      mapxzqh:'',
+      polygons:[],
+      tiptext:'中国',
+      tipMarker:{}
     }
   },
 
@@ -236,6 +246,12 @@ export default {
     this.getXfxzqhida()
   },
   methods: {
+    mapxzqhcg(rows)
+    {
+      this.searchdistrict(rows)
+      alert(rows.name)
+
+    },
     async getTotalList() {
       const retdata = await getstatisticaldata(this.queryParams)
       if (retdata.code === 200) {
@@ -253,7 +269,6 @@ export default {
     async getSqxqa() {
       const retdata = await getSqxq({code:this.locationcurrCode})
       if (retdata.code === 200) {
-        console.log(retdata.data);
         this.currsqData=retdata.data;
         this.heatmapData=[];
         this.currsqData.forEach((item) => {
@@ -264,28 +279,28 @@ export default {
       }
     },
     getheatdata(fl) {
-        this.heatmapData=[];
-        this.currsqData.forEach((item) => {
-          let coluts = Math.floor(Math.random() * 101) + 1;
-          if (fl==0)
-          {
-            coluts=parseInt(item.sixtym)+parseInt(item.sixtyw);
-          }
+      this.heatmapData=[];
+      this.currsqData.forEach((item) => {
+        let coluts = Math.floor(Math.random() * 101) + 1;
+        if (fl==0)
+        {
+          coluts=parseInt(item.sixtym)+parseInt(item.sixtyw);
+        }
 
-          if (fl==1)
-          {  coluts=parseInt(item.yljg)+parseInt(item.sqyljg);}
+        if (fl==1)
+        {  coluts=parseInt(item.yljg)+parseInt(item.sqyljg);}
 
-          if (fl==2)
-          {  coluts=parseInt(item.wlfws);}
+        if (fl==2)
+        {  coluts=parseInt(item.wlfws);}
 
-          if (fl==3)
-          {  coluts=parseInt(item.jklx);}
+        if (fl==3)
+        {  coluts=parseInt(item.jklx);}
 
-          if (fl==4)
-          {  coluts=parseInt(item.znsb);}
+        if (fl==4)
+        {  coluts=parseInt(item.znsb);}
 
-          this.heatmapData.push({"lng": item.lng, "lat": item.lat, "count": coluts})
-        })
+        this.heatmapData.push({"lng": item.lng, "lat": item.lat, "count": coluts})
+      })
 
     },
     clearMap()
@@ -642,7 +657,7 @@ export default {
         key: '0445c169f4b9ffcf20cb016aa8e9f165',
         version: '2.0',
         plugins: [
-					'AMap.ToolBar',
+          'AMap.ToolBar',
           'AMap.ControlBar',
           'AMap.DistrictSearch',
           'AMap.HeatMap' ,
@@ -692,27 +707,11 @@ export default {
             locate: true
           })
         )
-      /*  var opts = {
+        this.district = new AMap.DistrictSearch({
           subdistrict: 1,
           extensions:'all',
           showbiz:false
-        };
-        this.district = new AMap.DistrictSearch(opts);
-        this.district.search(this.deptcurrxzqh, function(status, result) {
-          if(status=='complete'){
-
-            var bounds = result.boundaries;
-            if (bounds) {
-              // alert(bounds);
-            }
-            var subList = result.districtList;
-            if (subList) {
-              //  alert(subList.length);
-            }
-
-            //getData(result.districtList[0]);
-          }
-        });*/
+        });
         this.setIcon();
 
         if (this.deptcurrlevel<this.deptmaxlevel)
@@ -741,24 +740,24 @@ export default {
         let markeroption={};
         let markerExtData={};
         let coluts= Math.floor(Math.random() * 101)+1;
-       // this.heatmapData.push({"lng": item.lng,"lat": item.lat,"count":coluts})
+        // this.heatmapData.push({"lng": item.lng,"lat": item.lat,"count":coluts})
         if (fl == 0) { //老人
           if (item.photoAndLocation && item.photoAndLocation.split("/").length==3) {
 
 
-          markeroption= {
-            position: new AMap.LngLat(item.photoAndLocation.split("/")[0], item.photoAndLocation.split("/")[1]),
-            icon:  this.Icons.oldman,
-            label: {
-              content: item.name,
-              direction: 'bottom',
-              extData: item._id
-            },
-            anchor: 'bottom-center'
-          }
-          markerExtData={
-            style:  this.Icons.oldman._opts.image
-          }
+            markeroption= {
+              position: new AMap.LngLat(item.photoAndLocation.split("/")[0], item.photoAndLocation.split("/")[1]),
+              icon:  this.Icons.oldman,
+              label: {
+                content: item.name,
+                direction: 'bottom',
+                extData: item._id
+              },
+              anchor: 'bottom-center'
+            }
+            markerExtData={
+              style:  this.Icons.oldman._opts.image
+            }
           }
         }
         if (fl == 1) {//养老机构
@@ -841,7 +840,7 @@ export default {
       data.forEach((item) => {
         if ((item.lat && item.lng) || item.photoAndLocation) {
           let coluts= Math.floor(Math.random() * 101)+1;
-         // this.heatmapData.push({"lng": item.lng,"lat": item.lat,"count":coluts});
+          // this.heatmapData.push({"lng": item.lng,"lat": item.lat,"count":coluts});
           if (fl == 0) { //老人
             if (item.photoAndLocation && item.photoAndLocation.split("/").length==3) {
               this.latdata.push({
@@ -891,9 +890,7 @@ export default {
       this.addCluster(3);
     },
     markerClick(e) {
-	    console.log(e.target._opts.extData.id)
-      // this.jgId = e.target._opts.label.extData
-	    this.jgId =  e.target._opts.extData.id
+      this.jgId = e.target._opts.extData.id
       this.isShowInfo = true
     },
 
@@ -914,6 +911,132 @@ export default {
 
       //	alert(this.sideActive);
     },
+    //创建右键菜单 删（删除多边形）
+    mapmenufun(lnglat, onePolygon, item,event) {
+      var rightMenu = new AMap.ContextMenu();
+      rightMenu.addItem('上钻('+item.name+')',  (e)=> {
+        if (item.level=="district")
+        {
+          item.level="city";
+          item.adcode=item.adcode.substring(0,4)+'00';
+          this.searchdistrict(item);
+        }
+        if (item.level=="city")
+        {
+          item.level="province";
+          item.adcode=item.adcode.substring(0,2)+'0000';
+          this.searchdistrict(item);
+        }
+        if (item.level=="street")
+        {
+          item.level="district";
+          item.adcode=item.adcode;
+          this.searchdistrict(item);
+        }
+
+        rightMenu.close()
+
+      }, 0);
+      rightMenu.addItem('下钻('+item.name+')',  (e)=> {
+
+        this.searchdistrict(item);
+        rightMenu.close()
+
+      }, 0);
+
+      rightMenu.open(this.map, lnglat);
+    },
+    drawdistrict()
+    {
+
+      // this.tipMarker.hide();
+      for (var i = 0, l = this.polygons.length; i < l; i++) {
+        this.polygons[i].setMap(null);
+      }
+      this.mapxzqhsub.forEach((item) => {
+          this.district.setLevel(item.level); //行政区级别
+          this.district.setExtensions('all');
+          this.district.search(item.adcode, (status, result) => {
+            if(status=='complete'){
+              let subresultlist=result.districtList[0]
+              var bounds = subresultlist.boundaries;
+              if (bounds) {
+                for (var i = 0, l = bounds.length; i < l; i++) {
+                  var polygon = new AMap.Polygon({
+                    map: this.map,
+                    strokeWeight: 1,
+                    strokeColor: '#0091ea',
+                    fillColor: this.mpcolor[item.idx],
+                    fillOpacity: 0.2,
+                    path: bounds[i]
+                  });
+                  polygon.setExtData(item);
+                  polygon.on('mousemove',  (e)=> {
+                    // this.tiptext=item.name;
+                    // this.tipMarker.setPosition(e.lnglat);
+                  });
+                  polygon.on('mouseout',  (e)=> {
+                    this.tipMarker.hide();
+                    this.tipMarker.getExtData().hide=true;
+                  });
+                  polygon.on('mouseover',  (e)=> {
+                    this.tipMarker.setLabel({ content:item.name})
+                    //   if (this.tipMarker.getExtData().hide==true) {
+                    //   this.tipMarker.show();
+                    //   this.tipMarker.getExtData().hide=false;
+                    // }
+                  });
+
+
+                  polygon.on('rightclick',  (e)=> {
+                    this.mapmenufun(e.lnglat, polygon,item); //创建右键菜单menu 删（删除多边形）
+                  });
+                  this.polygons.push(polygon);
+                }
+                this.map.setFitView();//地图自适应
+
+              }}})
+
+        }
+      )
+
+    },
+    searchdistrict(opt)
+    {
+      this.tipMarker = new AMap.Marker({
+        position: this.map.getCenter(),
+        //  icon:  this.Icons.znsb,
+        label: {
+          content:this.tiptext,
+          direction: 'bottom'
+        },
+        anchor: 'bottom-center'
+      });
+      this.tipMarker.setMap(this.map);
+      this.tipMarker.hide();
+      this.tipMarker.setExtData({hide:true});
+      this.mapxzqhsub=[];
+      this.district.setLevel(opt.level); //行政区级别
+      this.district.setExtensions('all');
+
+      this.district.search(opt.adcode, (status, result) => {
+        if(status=='complete'){
+          let subresultlist=result.districtList[0]
+
+
+          var subList = subresultlist.districtList;
+          if (subList) {
+            for (var i = 0, l = subList.length; i < l; i++) {
+              this.mapxzqhsub.push({idx:i,adcode:subList[i].adcode,name:subList[i].name,level:subList[i].level});
+            }
+
+          }
+          this.drawdistrict();
+          //getData(result.districtList[0]);
+        }
+      });
+
+    },
     patternChange(value) {
 
       //  this.viewmode=value;
@@ -944,7 +1067,8 @@ export default {
       if (value=='3')//区域下钻
       {
         this.clearMap();
-        // this.map.add(this.setMarker(this.querydata,this.sideActive))
+        this.searchdistrict({level:"district",adcode:this.deptcurrxzqh});
+
       }
     },
     handleClose() {
@@ -1023,7 +1147,7 @@ $drawerWidth: 450px;
   white-space: nowrap;
   background-color: #e9ecef;
   border: 1px solid #ced4da;
-	border-radius: .25rem 0 0 .25rem;
+  border-radius: .25rem 0 0 .25rem;
 }
 
 .wrap {
@@ -1033,8 +1157,8 @@ $drawerWidth: 450px;
     width: 100%;
     color: #fff;
     background-image: linear-gradient(to bottom, #548cd6, #033447 200%);
-	  box-shadow: 0 0 20px 0 #275a85;
-	  //background-color: #4c83c8;
+    box-shadow: 0 0 20px 0 #275a85;
+    //background-color: #4c83c8;
     position: absolute;
     top: 0;
     left: 0;
@@ -1154,21 +1278,21 @@ $drawerWidth: 450px;
 }
 
 .bottom-group {
-	background-color: rgba(0, 0, 0, .8);
-	box-shadow: 0 0 5px 0 #000;
-	padding: 10px;
+  background-color: rgba(0, 0, 0, .8);
+  box-shadow: 0 0 5px 0 #000;
+  padding: 10px;
   //width: calc(100% - #{$drawerWidth});
   text-align: center;
   position: absolute;
   bottom: 2%;
   left: 36%;
-	transform: translateX(-50%);
-	transition: all .5s;
+  transform: translateX(-50%);
+  transition: all .5s;
 
-	&.hide {
-		left: 50%;
-		//width: 100%;
-	}
+  &.hide {
+    left: 50%;
+    //width: 100%;
+  }
   .el-radio {
     color: #fff;
   }