修改植树造林任务显示和图层双显示问题

src/api/afforestation.js

@@ -15,3 +15,20 @@ export function getAfforestationArea(afforestationId) {
   })
 }
 
+// 获取植树造林任务列表
+export function listPublishTask(param) {
+  return request({
+    url: '/center-fire/VisuAfforestationController/listPublishTask',
+    method: 'post',
+    data: param
+  })
+}
+
+// 工作统计详情
+export function selectWorkCountById(id) {
+  return request({
+    url: '/center-fire/VisuAfforestationController/selectWorkCountById/'+id,
+    method: 'post',
+  })
+}
+

src/components/supermap.vue

@@ -121,6 +121,7 @@ export default {
       connectLayer: [],
       connectLayerTwo: [],
       graphicsLayer: [],
+      graphicsLayerTwo: [],
       latLngLayers: [],
       latLngGroup: [],
       isEditableLayers: false, //绘图控件
@@ -676,6 +677,12 @@ export default {
       }
       this.graphicsLayer = []
     },
+    clearGTwo: async function() { //清理地图图形
+      if (this.graphicsLayerTwo != undefined && this.graphicsLayerTwo != false) {
+        this.graphicsLayerTwo.clearLayers()
+      }
+      this.graphicsLayerTwo = []
+    },
     clearP: async function() { //清理点击事件落点
       if (this.latLngGroup != undefined && this.latLngGroup != false) {
         this.latLngGroup.clearLayers()
@@ -1223,6 +1230,23 @@ export default {
         _that.graphicsLayer.addLayer(polygon)
       }
     },
+    setGraphicsListTwo: function(graphicsList, color) { //地图图形(林业植树造林双图层用)
+      const _that = this
+      let points = []
+      for (let i = 0; i < graphicsList.length; i++) {
+        points.push([graphicsList[i].lat, graphicsList[i].lng]) //创建点
+      }
+      let polygon = window.L.polygon(points, {
+        color: color
+      })
+      polygon.addTo(this.map)
+      if (this.graphicsLayerTwo != undefined && this.graphicsLayerTwo != false) {
+        _that.graphicsLayerTwo.addLayer(polygon)
+      } else {
+        _that.graphicsLayerTwo = window.L.featureGroup().addTo(this.map)
+        _that.graphicsLayerTwo.addLayer(polygon)
+      }
+    },
     dropLocation: function(lat, lng) { //落点定位
       this.map.flyTo([lat, lng], 13, { duration: 2 })
     },

src/views/afforestation.vue

@@ -44,8 +44,33 @@
       <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'" class="indexSupermapClass"
                 :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
       <!--底部 -->
-      <vBottomMenu ref="bottomMenu"></vBottomMenu>
 
+      <!-- 右侧 -->
+      <div class="rightbar" :class="indentright" ref="right">
+        <div class="forthis">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
+            <div class="this-title">
+              <span>植树任务</span>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+            </div>
+            <div class="i-list-con h-73">
+              <div class="overflow-y" style="height: 72vh">
+                <div class="d-l-con"
+                     v-for="(item,index) in forestationTaskList"
+                     v-on:click="selectWorkCountById(item.points)">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{ item.name }}</h4>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
     </div>
     <eventLocation ref="eventLocation"></eventLocation>
     <TVWall ref="TVWall"></TVWall>
@@ -54,7 +79,7 @@
 
 <script>
 import {
-  getAfforestation, getAfforestationArea
+  getAfforestation, getAfforestationArea,listPublishTask,selectWorkCountById
 } from '@/api/afforestation'
 /** ----------------------------------摄像头预览开始------------------------------------- */
 import {
@@ -87,7 +112,8 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.getInit()
+    this.getInit();
+    this.listPublishTask();
   },
   data() {
     return {
@@ -102,8 +128,12 @@ export default {
       indentleft: '',
       indentright: '',
       indentText: '收起左右栏',
-      indentdisabled: false
+      indentdisabled: false,
 
+
+      //植树造林任务集合
+      forestationTaskList:[],
+      forestationDone: {}
     }
   },
 
@@ -185,6 +215,16 @@ export default {
         }, 1000)
       })
     },
+    listPublishTask() {
+      listPublishTask({}).then(res => {
+        this.forestationTaskList = res.data
+      })
+    },
+    selectWorkCountById(points){
+      const graphicsList = JSON.parse( points );
+      this.$refs.supermap.clearGTwo();
+      this.$refs.supermap.setGraphicsListTwo(graphicsList, 'blue');
+    },
     getAfforestationArea(afforestationId) {
       this.listCurrentIndex1 = afforestationId
       let that = this

vue.config.js

@@ -53,7 +53,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://127.0.0.1:3031`,
-        target: `http://117.78.49.164:3031`,
+        target: `http://192.168.2.118:3031`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''