地图对接

src/api/index.js

@@ -7,3 +7,11 @@ export function getStatistic (query) {
         params: query
     })
 }
+
+export function getThreeList (query) {
+    return request({
+        url: '/api/asset/three/listNoParams',
+        method: 'get',
+        params: query
+    })
+}

src/main.js

@@ -13,6 +13,7 @@ import message from '@/utils/message.js';
 // import '@/permission'; // permission control
 import VScaleScreen from 'v-scale-screen';
 import { getDicts } from "@/api/system/dict/data";
+import { selectDictLabel } from "@/utils/common";
 // 过滤器
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key]);
@@ -37,6 +38,8 @@ Vue.use(ElementUI);
 // Vue.use(Dropdown);
 Vue.use(VScaleScreen);
 
+Vue.prototype.selectDictLabel = selectDictLabel
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 new Vue({

src/utils/common.js

@@ -11,7 +11,7 @@ export function startAnim (ev) {
 
 /**
  * 生成uuid
- * @returns 
+ * @returns
  */
 export function generateUUID () {
   var d = new Date().getTime(); //Timestamp
@@ -140,3 +140,16 @@ export function getDay (_date, fmt) {
   }
   return fmt;
 }
+
+// 回显数据字典
+export function selectDictLabel(datas, value) {
+
+  var actions = [];
+  Object.keys(datas).some((key) => {
+    if (datas[key].dictValue == ('' + value)) {
+      actions.push(datas[key].dictLabel);
+      return true;
+    }
+  })
+  return actions.join('');
+}

src/views/sanqing/index.html

@@ -11,7 +11,6 @@
   <div class="row">
     <component :is="item.name" v-for="(item, index) in currentComp.buttom" :key="index" :data="item.data"></component>
   </div>
-  <Popover v-if="false"></Popover>
   <Left></Left>
   <Right></Right>
   <Footer></Footer>

src/views/sanqing/main-gis/index.html

@@ -7,7 +7,7 @@
 <!--      </div>-->
 <!--    </div>-->
 <!--  </Legend>-->
-  <div v-if="showResourceDetail" class="gl_pop_cash pop_statistical_desc">
+  <div v-if="false" class="gl_pop_cash pop_statistical_desc">
     <div class="head_main">
       <div class="title">{{resourceDetail.name}}详情</div>
       <div class="close" @click="showResourceDetail = false"></div>
@@ -84,6 +84,7 @@
 
   </div>
   <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
+  <Popover v-if="showResourceDetail" :data="resourceDetail" @closePopover="closePopover"></Popover>
   <!--选择地址-->
   <div class="select_address">
     <div class="dot left"></div>

src/views/sanqing/main-gis/index.js

@@ -11,10 +11,14 @@ import { attachmentList } from "@/api/common/uploadAttachment.js";
 import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept";
 import { getConfigKey } from "@/api/system/config";
 import { treeselectByDeptId } from "@/api/system/dept";
+import { getThreeList } from "@/api/index";
+
+import Popover from '../popover/index.vue';
 let gis = null;
 export default {
   components: {
-    Legend
+    Legend,
+    Popover
   },
   data () {
     return {
@@ -178,6 +182,7 @@ export default {
         checkStrictly: true,
       },
       addrOptions: [],
+      resourceDetail: {},
       //资产信息详情弹窗
       showResourceDetail: false,
       mapGeoServerUrl: "",            // geoserver地址
@@ -221,11 +226,35 @@ export default {
           name: '其他'
         }
       ],
+      threeAssetTypeOptions: [],
+      threeJtzyzcTypeOptions: [],
+      threeNysssbTypeOptions: [],
+      threeNhTypeOptions: [],
+      natureOwnershipTypeOptions: [],
+      sysYesNoOptions: [],
     };
   },
   computed: {
   },
   created () {
+    this.getDicts("three_asset_type").then((response) => {
+      this.threeAssetTypeOptions = response.data;
+    });
+    this.getDicts("three_jtzyzc_type").then((response) => {
+      this.threeJtzyzcTypeOptions = response.data;
+    });
+    this.getDicts("three_nysssb_type").then((response) => {
+      this.threeNysssbTypeOptions = response.data;
+    });
+    this.getDicts("three_nh_type").then((response) => {
+      this.threeNhTypeOptions = response.data;
+    });
+    this.getDicts("nature_ownership").then((response) => {
+      this.natureOwnershipTypeOptions = response.data;
+    });
+    this.getDicts("sys_yes_no").then((response) => {
+      this.sysYesNoOptions = response.data;
+    });
     this.getGeoServerUrl();
   },
   mounted () {
@@ -251,14 +280,13 @@ export default {
         this.resourceListQueryParams.deptId = res.user.loginDeptId;
         this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId;
         //列表请求
-        this.getAllList();
+        this.getAllList(res.user.deptId);
         // 加载地图
         this.initMap(res.user.loginDeptId);
 
         // 获取村边界的图层名称
         this.getVillageBorderLayerName();
       });
-
     })
     // treeselect().then((resp) => {
     //   this.addrOptions = resp.data
@@ -435,6 +463,22 @@ export default {
               duration: 1000, // 缩放持续时间，默认不需要设置
             });
           } else {
+
+
+            feature.values_.detail.threeDetailType =
+                feature.values_.detail.threeAssetType == '1' ?
+                this.selectDictLabel(this.threeJtzyzcTypeOptions, feature.values_.detail.threeDetailType):
+                feature.values_.detail.threeAssetType == '2' ?
+                this.selectDictLabel(this.threeNysssbTypeOptions, feature.values_.detail.threeDetailType):
+                feature.values_.detail.threeAssetType == '3' ?
+                this.selectDictLabel(this.threeNhTypeOptions, feature.values_.detail.threeDetailType):''
+            ;
+            feature.values_.detail.threeAssetType = this.selectDictLabel(this.threeAssetTypeOptions, feature.values_.detail.threeAssetType);
+            feature.values_.detail.natureOwnership = this.selectDictLabel(this.natureOwnershipTypeOptions, feature.values_.detail.natureOwnership);
+            feature.values_.detail.qssfczzy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.qssfczzy);
+            feature.values_.detail.sfwtdg = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfwtdg);
+            feature.values_.detail.sfnzcsy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfnzcsy);
+
             this.listDialogHidden('detail');
             this.openResourceDialog(feature.values_.detail);
           }
@@ -500,9 +544,10 @@ export default {
     },
     openResourceDialog (data) {
       data.fileList = [];
+      console.log(data)
       let parmasData = {
         tableId: data.id,
-        tableName: 't_asset_resource',
+        tableName: 't_asset_three',
         bizPath: 'asset',
       };
       attachmentList(parmasData).then((res) => {
@@ -554,19 +599,25 @@ export default {
     },
     // 获取资源列表
     getResourceList (deptId) {
-      getResourceListByDeptId(deptId).then(response => {
-        if (response.data && response.data.length > 0) {
-          this.addResourceLayer(response.data);
+      getThreeList({ deptId: deptId }).then(response => {
+        if (response.rows && response.rows.length > 0) {
+          this.addResourceLayer(response.rows);
         }
       });
+      // getResourceListByDeptId(deptId).then(response => {
+      //   if (response.data && response.data.length > 0) {
+      //     this.addResourceLayer(response.data);
+      //   }
+      // });
     },
     // 添加资源图层
     addResourceLayer (resourceList) {
       let features = [];
       resourceList.forEach(item => {
         if (item.theGeom != null && item.theGeom !== '') {
-          const { useType } = item
-          let color = this.LegendData[useType - 1 + '']
+          const { threeAssetType } = item
+          console.log(222, threeAssetType, item);
+          let color = this.LegendData[threeAssetType - 1 + '']
           let fs = gis.getFeature3(item, color.iconStyle.background, color.iconStyle.borderColor)
           features.push(fs);
         }
@@ -576,13 +627,13 @@ export default {
     },
     // 获取资产列表
     getPermanentList (deptId) {
-      getPermanentListByDeptId(deptId).then(response => {
+      getThreeList({ deptId: deptId }).then(response => {
         if (response.data && response.data.length > 0) {
           this.addPermanentLayer(response.data);
         }
       });
     },
-    getAllList () {
+    getAllList (deptId) {
       //三务公开
       // this.getList(null);
       // //零工公开
@@ -599,6 +650,16 @@ export default {
       // this.getContractionByPermanentList();
       // //资金情况
       // this.getFundAndBankAmountByDeptIdArray();
+      //this.getThreeList(deptId);
+    },
+    getThreeList(deptId){
+
+      getThreeList({ deptId: deptId }).then(response => {
+
+      });
     },
+    closePopover(){
+      this.showResourceDetail = false;
+    }
   }
 };

src/views/sanqing/popover/index.html

@@ -1,79 +1,94 @@
 <div class="popover_main">
-  <h1><i></i>B镇详情<span>×</span></h1>
+  <h1><i></i>B镇详情<span @click="closePopover">×</span></h1>
   <div>
     <p>资产编码</p>
-    <p>11111111</p>
+    <p>{{data.zcdm}}</p>
     <p>资产名称</p>
-    <p>11111111</p>
+    <p>{{data.zcmc}}</p>
   </div>
   <div>
     <p>三清类型</p>
-    <p>11111111</p>
+    <p>{{data.threeAssetType}}</p>
     <p>资产类型</p>
-    <p>11111111</p>
+    <p>{{data.threeDetailType}}</p>
   </div>
   <div>
-    <p>用地面积</p>
-    <p>11111111</p>
+    <p>用地面积(亩)</p>
+    <p>{{data.ydmj}}</p>
     <p>建筑面积(㎡)</p>
-    <p>11111111</p>
+    <p>{{data.jzmj}}</p>
   </div>
   <div>
     <p>所在组</p>
-    <p>11111111</p>
+    <p>{{data.szz}}</p>
     <p>权属性质</p>
-    <p>11111111</p>
+    <p>{{data.natureOwnership}}</p>
   </div>
   <div>
     <p>权属是否存在争议</p>
-    <p>11111111</p>
+    <p>{{data.qssfczzy}}</p>
     <p>权属主体</p>
-    <p>11111111</p>
+    <p>{{data.qszt}}</p>
   </div>
   <div>
     <p>是否委托代管</p>
-    <p>11111111</p>
+    <p>{{data.sfwtdg}}</p>
     <p>联系电话</p>
-    <p>11111111</p>
+    <p>{{data.lxdh}}</p>
   </div>
   <div>
     <p>23年盘活方式</p>
-    <p>11111111</p>
+    <p>{{data.phfs23}}</p>
     <p>23年效益(万元)</p>
-    <p>11111111</p>
+    <p>{{data.xy23}}</p>
   </div>
   <div>
     <p>24年盘活方式</p>
-    <p>11111111</p>
+    <p>{{data.phfs24}}</p>
     <p>24年效益(万元)</p>
-    <p>11111111</p>
+    <p>{{data.xy24}}</p>
   </div>
   <div>
     <p>盘活情况</p>
-    <p>11111111</p>
+    <p>{{data.phqk}}</p>
     <p>资产闲置原因</p>
-    <p>11111111</p>
+    <p>{{data.xzyy}}</p>
   </div>
   <div>
     <p>是否能正常使用</p>
-    <p>11111111</p>
+    <p>{{data.sfnzcsy}}</p>
     <p>完善后使用</p>
-    <p>11111111</p>
+    <p>{{data.wshsy}}</p>
   </div>
   <div>
     <p>不能使用</p>
-    <p>11111111</p>
+    <p>{{data.bnsy}}</p>
     <p>盘活措施</p>
-    <p>11111111</p>
+    <p>{{data.phcs}}</p>
   </div>
   <div>
     <p>盘活时限</p>
-    <p>11111111</p>
+    <p>{{data.phsx}}</p>
     <p>资产统计年度</p>
-    <p>11111111</p>
+    <p>{{data.zctjnd}}</p>
   </div>
   <div>
     <p>备注</p>
-    <p>11111111</p>
+    <p>{{data.bz}}</p>
+  </div>
+  <div style="justify-content: left">
+    <p>附件</p>
+    <p>
+      <block v-for="(item,index) in data.fileList">
+        <a :href="item.urlApi" v-if="item.type != 'image'">
+          <img :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt="">
+        </a>
+        <img v-else :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)">
+      </block>
+    </p>
+  </div>
+  <div class="imgBox" v-if="showImg">
+    <div class="box_bg" @click="showImg = false"></div>
+    <img :src="fileUrl" alt="">
   </div>
 </div>

src/views/sanqing/popover/index.js

@@ -1,15 +1,17 @@
 export default {
   props: {
     data: {
-      type: Array,
+      type: Object,
       default: function () {
-        return []
+        return {}
       }
     }
   },
   data () {
     return {
-
+      fileList: [],
+      fileUrl:'',
+      showImg:false,
     };
   },
   created () {
@@ -17,5 +19,12 @@ export default {
   mounted () {
   },
   methods: {
+    closePopover(){
+      this.$emit('closePopover');
+    },
+    openImage(url){
+      this.fileUrl = url;
+      this.showImg = true;
+    }
   }
 };

src/views/sanqing/popover/index.scss

@@ -26,6 +26,7 @@
     span{
       margin-left: auto;
       font-size: 24px;
+      cursor: pointer;
     }
   }
   div{
@@ -43,3 +44,22 @@
     }
   }
 }
+
+.imgBox{
+  position: fixed;
+  z-index: 999999;
+  width: 100vw;
+  height: 100vh;
+  .box_bg{
+    background-color: rgba(0,0,0,0.5);
+    width: 100%;
+    height: 100vh;
+  }
+  img{
+    height: 60vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+}