大屏图标

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}">
@@ -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) => {
@@ -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)
@@ -912,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;
@@ -942,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() {