田长制画面

src/views/tianzhangzhi.vue

@@ -8,23 +8,17 @@
       <div class="leftbar" ref="left">
         <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;"/>
+            <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;"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
             </div>
             <div class="i-list-con h-27">
-              <el-input
-                v-model="name"
-                placeholder="请输入姓名"
-                clearable
-                size="small"
-                prefix-icon="el-icon-search"
-                style="margin-bottom: 20px"
-              />
+              <el-input v-model="name" placeholder="请输入姓名" clearable size="small" prefix-icon="el-icon-search"
+                style="margin-bottom: 20px" />
               <div class="d-l-con-icon">
                 <div class="icon-con" :class="{on:listCurrentIndex1==item.gridId}"
-                     v-for="(item,index) in visuTianzhangList2" @click="getGridList(item.gridId)">
+                  v-for="(item,index) in visuTianzhangList2" @click="getGridList(item.gridId)">
                   <div class="icon icon-mid el-icon-user"></div>
                   <div class="icon-text personnel-name">
                     <h6>姓名：{{ item.name }} </h6>
@@ -37,15 +31,15 @@
         </div>
         <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;"/>
+            <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;"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
             </div>
             <div class="i-list-con h-27">
               <div class="d-l-con-icon">
                 <div class="icon-con" :class="{on:listCurrentIndex2==item. gridId}"
-                     v-for="(item,index) in visuGridLengthList" @click="selectGridLandInfo(item)">
+                  v-for="(item,index) in visuGridLengthList" @click="selectGridLandInfo(item)">
                   <div class="icon icon-mid el-icon-user"></div>
                   <div class="icon-text personnel-name">
                     <h6>网格名称：{{ item.gridNetworkName }}</h6>
@@ -58,23 +52,22 @@
         </div>
       </div>
       <!-- 地图 -->
-<!--      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
-<!--                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;" ></supermap>
+      <!--      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
+      <!--                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
+      <supermap ref="supermap" style="width: 100%;height: 100vh;"></supermap>
       <!-- 右侧 -->
       <div class="rightbar" 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;"/>
+            <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;"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
             </div>
             <div class="i-list-con h-27">
               <div class="h-19 overflow-y">
-                <div class="d-l-con" :class="{on:listCurrentIndex3==item.id}"
-                     v-for="(item,index) in gengdiList"
-                     @click="getFlagList(item.id,1)">
+                <div class="d-l-con" :class="{on:listCurrentIndex3==item.id}" v-for="(item,index) in gengdiList"
+                  @click="getFlagList(item.id,1)">
                   <div class="d-l-l-text">
                     <i class="i-small"></i>
                     <h4>{{ item.name }}</h4>
@@ -86,16 +79,15 @@
         </div>
         <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;"/>
+            <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;"/>
+              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
             </div>
             <div class="i-list-con h-27">
               <div class="h-19 overflow-y">
-                <div class="d-l-con" :class="{on:listCurrentIndex4==item.id}"
-                     v-for="(item,index) in yongjiutianList"
-                     @click="getFlagList(item.id,2)">
+                <div class="d-l-con" :class="{on:listCurrentIndex4==item.id}" v-for="(item,index) in yongjiutianList"
+                  @click="getFlagList(item.id,2)">
                   <div class="d-l-l-text">
                     <i class="i-small"></i>
                     <h4>{{ item.name }}</h4>
@@ -114,60 +106,59 @@
 </template>
 
 <script>
-import {
-  getTianzhangList,
-  selectVisuGridLength,
-  selectGridLandInfo,
-  getTianList,
-  getFlagList,
-  getGridList,
-  getFarmList,
-  getLandList,
-  remoteGetRegionalFlag
-} from '@/api/tianzhangzhi'
+  import {
+    getTianzhangList,
+    selectVisuGridLength,
+    selectGridLandInfo,
+    getTianList,
+    getFlagList,
+    getGridList,
+    getFarmList,
+    getLandList,
+    remoteGetRegionalFlag
+  } from '@/api/tianzhangzhi'
 
-import supermap from '@/components/supermap-2.5d' //超图
-import vheader from '@/components/v-header.vue' //一体化共用头部
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-import TVWall from '@/components/TVWall.vue'
+  import supermap from '@/components/supermap-2.5d' //超图
+  import vheader from '@/components/v-header.vue' //一体化共用头部
+  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
+  import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
+  import TVWall from '@/components/TVWall.vue'
 
-let echarts = require('echarts')
-export default {
-  components: {
-    supermap,
-    vheader,
-    vBottomMenu,
-    eventLocation,
-    TVWall
-  },
-  data() {
-    return {
-      listCurrentIndex1: '',
-      listCurrentIndex2: '',
-      name: '',
-      listCurrentIndex3: '',
-      listCurrentIndex4: '',
-      visuTianzhangList: [], //田长列表
-      visuTianzhangList2: [], //田长列表
-      visuGridLengthList: [], //网格网格长列表
-      gengdiList: [], //耕地列表
-      yongjiutianList: [], //永久田列表
-    }
-  },
-  created() {
-    this.getTianList()
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-  },
-  mounted() {
-    this.bottomMenuList() //获取底部公共组件消息和任务
-  },
-  watch:
-    {
+  let echarts = require('echarts')
+  export default {
+    components: {
+      supermap,
+      vheader,
+      vBottomMenu,
+      eventLocation,
+      TVWall
+    },
+    data() {
+      return {
+        listCurrentIndex1: '',
+        listCurrentIndex2: '',
+        name: '',
+        listCurrentIndex3: '',
+        listCurrentIndex4: '',
+        visuTianzhangList: [], //田长列表
+        visuTianzhangList2: [], //田长列表
+        visuGridLengthList: [], //网格网格长列表
+        gengdiList: [], //耕地列表
+        yongjiutianList: [], //永久田列表
+      }
+    },
+    created() {
+      this.getTianList()
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      window.showDialog = this.showDialog
+      window.choseLayerSwitching = this.choseLayerSwitching
+      window.choseLayerSwitchingList = this.choseLayerSwitchingList
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    },
+    mounted() {
+      this.bottomMenuList() //获取底部公共组件消息和任务
+    },
+    watch: {
       name(val) {
         this.visuTianzhangList2 = [];
         for (let i in this.visuTianzhangList) {
@@ -177,188 +168,211 @@ export default {
         }
       }
     },
-  methods: {
-    selectGridLandInfo(data) {
-      if (data.gridFarmId != undefined) {
-        this.getLandList(data.gridFarmId)
-      }
-      if (data.gridLandId != undefined) {
-        this.getFarmList(data.gridLandId)
-      }
-    },
-    getGridList(gridId) {
-      let that = this
-      getGridList({leadType: "6", gridId: gridId}).then(function (response) {
-        console.log(JSON.stringify(response.data));
-        that.visuGridLengthList = response.data
-      })
-    },
+    methods: {
+      selectGridLandInfo(data) {
+        this.$refs.supermap.clearG()
+        if (data.gridFarmId != undefined) {
+          this.getLandList(data.gridFarmId)
+        }
+        if (data.gridLandId != undefined) {
+          this.getFarmList(data.gridLandId)
+        }
+      },
+      getGridList(gridId) {
+        let that = this
 
-    getLandList(gridLandId) {
-      let that = this
-      getLandList({gridLandId: gridLandId}).then(function (response) {
-        console.log(JSON.stringify(response.data));
-        that.gengdiList = response.data
-      })
-    },
+        this.gengdiList = []
+        this.yongjiutianList = []
+        this.visuGridLengthList = []
+        that.$refs.supermap.clearG()
+        getGridList({
+          leadType: "6",
+          gridId: gridId
+        }).then(function(response) {
+          console.log(JSON.stringify(response.data));
+          that.visuGridLengthList = response.data
+        })
+      },
 
-    getFarmList(gridFarmId) {
-      let that = this
-      getFarmList({gridFarmId: gridFarmId}).then(function (response) {
-        console.log(JSON.stringify(response.data));
-        that.yongjiutianList = response.data
-      })
-    },
+      getLandList(gridLandId) {
+        let that = this
+        getLandList({
+          gridLandId: gridLandId
+        }).then(function(response) {
+          console.log(JSON.stringify(response.data));
+          that.gengdiList = response.data
+        })
+      },
 
-    getFlagList(id, type) {
-      let that = this
-      getFlagList({id: id}).then(function (response) {
-        console.log(JSON.stringify(response.data));
+      getFarmList(gridFarmId) {
+        let that = this
+        getFarmList({
+          gridFarmId: gridFarmId
+        }).then(function(response) {
+          console.log(JSON.stringify(response.data));
+          that.yongjiutianList = response.data
+        })
+      },
 
-        that.$refs.supermap.clearG()
-        if (type == 1) {
+      getFlagList(id, type) {
+        let that = this
+        getFlagList({
+          id: id
+        }).then(function(response) {
+          console.log(JSON.stringify(response.data));
+          let list = []
+          for (var i = 0; i < response.data.length; i++) {
+            list.push(response.data[i].lng)
+            list.push(response.data[i].lat)
+          }
+          that.$refs.supermap.clearG()
+          if (type == 1) {
 
-          that.$refs.supermap.setGraphicsList(response.data, "green")
-        }
-        if (type == 2) {
+            that.$refs.supermap.setGraphicsList(list, "green", 0.8)
+          }
+          if (type == 2) {
 
-          that.$refs.supermap.setGraphicsList(response.data, "red")
-        }
+            that.$refs.supermap.setGraphicsList(list, "red", 0.8)
+          }
 
-      })
-    },
+        })
+      },
 
-    getTianList() {
-      let that = this
-      getTianList({leadType: "6"}).then(function (response) {
-        console.log(JSON.stringify(response.data));
-        that.visuTianzhangList = response.data
-        that.visuTianzhangList2 = response.data
-      })
-    },
-    getPointListByGd(id) {
-      //耕地地图展示区域
-      remoteGetRegionalFlag(id).then(res => {
-        this.listCurrentIndex3 = id
-        this.$refs.supermap.clearG()
-        this.$refs.supermap.setGraphicsList(res.data, "green")
-      })
-    },
-    getPointListByYjt(id) {
-      //永久田地图展示区域
-      remoteGetRegionalFlag(id).then(res => {
-        this.listCurrentIndex4 = id
-        this.$refs.supermap.clearGTwo()
-        this.$refs.supermap.setGraphicsTwoList(res.data, "red")
-      })
-    },
-    selectVisuGridLength(id) {
-      //田长获取网格网格长列表
-      selectVisuGridLength({chiefTianId: id}).then(res => {
-        this.$refs.supermap.clearGTwo()
-        this.$refs.supermap.clearG()
-        this.visuGridLengthList = res.data
-        this.listCurrentIndex1 = id
-      })
-    },
-    // selectGridLandInfo(id) {
-    //   //网格获取耕地和基本田列表
-    //   selectGridLandInfo({gridId: id}).then(res => {
-    //     this.$refs.supermap.clearGTwo()
-    //     this.$refs.supermap.clearG()
-    //     this.gengdiList = res.data.gd
-    //     this.yongjiutianList = res.data.yjt
-    //     this.listCurrentIndex2 = id
-    //   })
-    // },
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    bottomMenuList() {
-      this.$refs.bottomMenu.selectTaskList()//获取任务列表
-      this.$refs.bottomMenu.selectMessageList()//获取消息列表
-    },
-    showDialog(click) {
-      if (click == 'eventLocation') {
-        this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'editableLayers') {
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
-        } else {
+      getTianList() {
+        let that = this
+        getTianList({
+          leadType: "6"
+        }).then(function(response) {
+          console.log(JSON.stringify(response.data));
+          that.visuTianzhangList = response.data
+          that.visuTianzhangList2 = response.data
+        })
+      },
+      getPointListByGd(id) {
+        //耕地地图展示区域
+        remoteGetRegionalFlag(id).then(res => {
+          this.listCurrentIndex3 = id
+          this.$refs.supermap.clearG()
+          this.$refs.supermap.setGraphicsList(res.data, "green")
+        })
+      },
+      getPointListByYjt(id) {
+        //永久田地图展示区域
+        remoteGetRegionalFlag(id).then(res => {
+          this.listCurrentIndex4 = id
+          this.$refs.supermap.clearGTwo()
+          this.$refs.supermap.setGraphicsTwoList(res.data, "red")
+        })
+      },
+      selectVisuGridLength(id) {
+        //田长获取网格网格长列表
+        selectVisuGridLength({
+          chiefTianId: id
+        }).then(res => {
+          this.$refs.supermap.clearGTwo()
+          this.$refs.supermap.clearG()
+          this.visuGridLengthList = res.data
+          this.listCurrentIndex1 = id
+        })
+      },
+      // selectGridLandInfo(id) {
+      //   //网格获取耕地和基本田列表
+      //   selectGridLandInfo({gridId: id}).then(res => {
+      //     this.$refs.supermap.clearGTwo()
+      //     this.$refs.supermap.clearG()
+      //     this.gengdiList = res.data.gd
+      //     this.yongjiutianList = res.data.yjt
+      //     this.listCurrentIndex2 = id
+      //   })
+      // },
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      bottomMenuList() {
+        this.$refs.bottomMenu.selectTaskList() //获取任务列表
+        this.$refs.bottomMenu.selectMessageList() //获取消息列表
+      },
+      showDialog(click) {
+        if (click == 'eventLocation') {
+          this.$refs.eventLocation.showEventLocation()
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'editableLayers') {
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.supermap.isEditableLayers) {
+            this.$refs.supermap.isEditableLayers = true
+          } else {
+            this.$refs.supermap.isEditableLayers = false
+          }
+        } else if (click == 'layerSwitching') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.bottomMenu.showChild) {
+            this.$refs.bottomMenu.showChild = true
+          } else {
+            this.$refs.bottomMenu.showChild = false
+          }
+        } else if (click == 'TVWall') {
+          this.$refs.TVWall.showTVWall()
           this.$refs.supermap.isEditableLayers = false
-        }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
-        } else {
           this.$refs.bottomMenu.showChild = false
-        }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showBanChild) {
-          this.$refs.bottomMenu.showBanChild = true
-        } else {
           this.$refs.bottomMenu.showBanChild = false
-        }
-      } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChild = false
-        if (!this.$refs.bottomMenu.showChangChild) {
-          this.$refs.bottomMenu.showChangChild = true
-        } else {
           this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'forestban') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.bottomMenu.showBanChild) {
+            this.$refs.bottomMenu.showBanChild = true
+          } else {
+            this.$refs.bottomMenu.showBanChild = false
+          }
+        } else if (click == 'forestchang') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChild = false
+          if (!this.$refs.bottomMenu.showChangChild) {
+            this.$refs.bottomMenu.showChangChild = true
+          } else {
+            this.$refs.bottomMenu.showChangChild = false
+          }
         }
-      }
 
-    },
-    //选择图层
-    choseLayerSwitching(url, isClear) {
-      this.$refs.supermap.layerSwitching(url, isClear)
-    },
-    //选择图层(传递数组)
-    choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+      },
+      //选择图层
+      choseLayerSwitching(url, isClear) {
+        this.$refs.supermap.layerSwitching(url, isClear)
+      },
+      //选择图层(传递数组)
+      choseLayerSwitchingList(urlList) {
+        this.$refs.supermap.layerSwitchingList(urlList)
+      },
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
 
-    //初始化
-    getInit() {
-      let that = this
-      this.listCurrentIndex1 = ''
-      this.listCurrentIndex2 = ''
-      this.listCurrentIndex3 = ''
-      this.listCurrentIndex4 = ''
-      //获取田长列表
-      getTianzhangList().then(res => {
-        that.visuTianzhangList = res.data
-      })
-    },
-  }
+      //初始化
+      getInit() {
+        let that = this
+        this.listCurrentIndex1 = ''
+        this.listCurrentIndex2 = ''
+        this.listCurrentIndex3 = ''
+        this.listCurrentIndex4 = ''
+        //获取田长列表
+        getTianzhangList().then(res => {
+          that.visuTianzhangList = res.data
+        })
+      },
+    }
 
-}
+  }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
+  @import '@/assets/styles/base.scss';
 
-.h-27 {
-  height: 27rem;
-}
-</style>
+  .h-27 {
+    height: 27rem;
+  }
+</style>