资源弹窗

src/utils/gis.js

@@ -184,7 +184,7 @@ class GisUtils {
   }
 
 
-  getFeature3 (item) {
+  getFeature3 (item, fill, stroke) {
     let feature = new Feature({
       geometry: new MultiPolygon(JSON.parse(item.theGeom).coordinates),
       // name: item.centerName,
@@ -192,19 +192,19 @@ class GisUtils {
       level: 'resource',
       detail: item
     })
-    feature.setStyle(this.createMultiPolygonFeatureStyle());
+    feature.setStyle(this.createMultiPolygonFeatureStyle(fill, stroke));
     return feature;
   }
 
-  createMultiPolygonFeatureStyle () {
+  createMultiPolygonFeatureStyle (fill, stroke) {
     return new Style({
       fill: new Fill({
         //矢量图层填充颜色，以及透明度
-        color: "rgba(255, 255, 0, 0.3)",
+        color: fill,
       }),
       stroke: new Stroke({
         //边界样式
-        color: "#ffff00",
+        color: stroke,
         width: 2,
       })
     });

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

@@ -7,9 +7,86 @@
       </div>
     </div>
   </Legend>
+       <!--资产信息详情-弹窗-->
+       <div v-if="showPermanentDetail" class="gl_pop_cash pop_statistical_desc">
+        <div class="head_main">
+          <div class="title">{{permanentDetail.name}}详情</div>
+          <div class="close" @click="showPermanentDetail = false"></div>
+          <div class="xs_main">
+            <div class="block">
+              <div class="point p1"></div>
+              <div class="point p2"></div>
+              <div class="point p3"></div>
+            </div>
+            <div class="xs_x"></div>
+          </div>
+        </div>
+        <div class="echarts_main">
+          <div>
+            <p>资产编码</p>
+            <p>{{permanentDetail.code}}</p>
+          </div>
+          <div>
+            <p>资产名称</p>
+            <p>{{permanentDetail.name}}</p>
+          </div>
+          <div>
+            <p>资产类别</p>
+            <p>{{permanentDetail.assetType}}</p>
+          </div>
+          <div>
+            <p>经营属性</p>
+            <p>{{permanentDetail.operationType}}</p>
+          </div>
+          <div>
+            <p>增加方式</p>
+            <p>{{permanentDetail.addType}}</p>
+          </div>
+          <div>
+            <p>购建时间</p>
+            <p>{{permanentDetail.buildTime}}</p>
+          </div>
+          <div>
+            <p>使用情况</p>
+            <p>{{permanentDetail.useType}}</p>
+          </div>
+          <div>
+            <p>资产状态</p>
+            <p>{{permanentDetail.assetStatus}}</p>
+          </div>
+          <div>
+            <p>数量/面积</p>
+            <p>{{permanentDetail.quantity}}</p>
+          </div>
+          <div>
+            <p>计量单位</p>
+            <p>{{permanentDetail.unit}}</p>
+          </div>
+          <div>
+            <p>原值(元)</p>
+            <p>{{permanentDetail.originalValue}}</p>
+          </div>
+          <div>
+            <p>折旧方式</p>
+            <p>{{permanentDetail.depreciationType}}</p>
+          </div>
+          <div>
+            <p>附件</p>
+            <p>
+              <block v-for="(item,index) in permanentDetail.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>
+
+      </div>
   <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
   <!--选择地址-->
-  <div class="select_address">
+  <!-- <div class="select_address">
     <div class="dot left"></div>
     <div class="dot right"></div>
     <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader">
@@ -18,6 +95,6 @@
         <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
       </template>
     </el-cascader>
-  </div>
+  </div> -->
 </div>
 

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

@@ -7,6 +7,7 @@ import { getUserGeo, getUserGeoList } from "@/api/dataScreen/stockCooperative/in
 import { getInfo } from "@/api/login";
 import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js";
 import Legend from '@/components/legend/index.vue';
+import { attachmentList } from "@/api/common/uploadAttachment.js";
 let gis = null;
 export default {
   components: {
@@ -14,10 +15,13 @@ export default {
   },
   data () {
     return {
+      //资产信息详情弹窗
+      showPermanentDetail: false,
       LegendData: [
         {
           iconStyle: {
             background: 'rgba(38,252,128,0.45)',
+            borderColor: '#26FC80',
             border: '2px solid #26FC80'
           },
           name: '自用'
@@ -25,6 +29,7 @@ export default {
         {
           iconStyle: {
             background: 'rgba(232,246,0,0.45)',
+            borderColor: '#E8F600',
             border: '2px solid #E8F600'
           },
           name: '闲置'
@@ -32,6 +37,7 @@ export default {
         {
           iconStyle: {
             background: 'rgba(16,252,252,0.45)',
+            borderColor: '#10FCFC',
             border: '2px solid #10FCFC'
           },
           name: '出租'
@@ -39,6 +45,7 @@ export default {
         {
           iconStyle: {
             background: 'rgba(198,0,255,0.45)',
+            borderColor: '#C600FF',
             border: '2px solid #C600FF'
           },
           name: '其他'
@@ -63,7 +70,6 @@ export default {
       gis = new GisUtils('map2')
       gis.addTianDiTuLayer()
       gis.addAnnotationLayer()
-      const initZoom = 11;
       // // 获取资源列表
       this.getResourceList(deptId);
       //初始加载当前用户级别的geojson数据
@@ -138,17 +144,10 @@ export default {
               rotation: undefined, // 缩放完成view视图旋转弧度
               duration: 1000, // 缩放持续时间，默认不需要设置
             });
-            //根据镇级deptID获取下级部门集合，并创建坐标点
-            getUserGeoList(feature.get('deptId')).then((res) => {
-              if (res.code == 200) {
-                let content = res.data;
-                if (this.villagePointLayer) {
-                  gis.getMapContainer().removeLayer(this.villagePointLayer);
-                  this.villagePointLayer = "";
-                }
-                this.villagePointLayer = this.addDeptLayer(content, require('./icon/green.png'));
-              }
-            });
+
+          } else {
+            this.listDialogHidden('detail');
+            this.openPermanentDialog(feature.values_.detail);
           }
         }
       });
@@ -162,6 +161,99 @@ export default {
         }
       });
     },
+    listDialogHidden (type) {
+      if (type == 'detail') {
+        //合同信息详情弹窗
+        this.showInfoDetail = false;
+        //资源信息详情弹窗
+        this.showResourceDetail = false;
+        //资产信息详情弹窗
+        this.showPermanentDetail = false;
+        //农业补贴详情弹窗
+        this.showSubsidyFundsDetail = false;
+        //重大事项详情弹窗
+        this.showMajorEventDetail = false;
+        //零工公开详情弹窗
+        this.showTempWorkerDetail = false;
+        //三务公开详情弹窗
+        this.showAffairsDetail = false;
+      } else {
+        //三务公开列表弹窗
+        this.showAffairs = false;
+        //零工公开列表弹窗
+        this.showTempWorker = false;
+        //重大事项列表弹窗
+        this.showMajorEvent = false;
+        //农业补贴列表弹窗
+        this.showSubsidyFunds = false;
+        //资产信息列表弹窗
+        this.showPermanent = false;
+        //资源信息列表弹窗
+        this.showResource = false;
+        //合同信息列表弹窗
+        this.showInfo = false;
+        //合同信息详情弹窗
+        this.showInfoDetail = false;
+        //资源信息详情弹窗
+        this.showResourceDetail = false;
+        //资产信息详情弹窗
+        this.showPermanentDetail = false;
+        //农业补贴详情弹窗
+        this.showSubsidyFundsDetail = false;
+        //重大事项详情弹窗
+        this.showMajorEventDetail = false;
+        //零工公开详情弹窗
+        this.showTempWorkerDetail = false;
+        //三务公开详情弹窗
+        this.showAffairsDetail = false;
+      }
+
+    },
+    openPermanentDialog (data) {
+      console.log(data, 999);
+      data.fileList = [];
+      let parmasData = {
+        tableId: data.id,
+        tableName: 't_asset_permanent',
+        bizPath: 'asset',
+      };
+      attachmentList(parmasData).then((res) => {
+        if (res.code == 200) {
+          let UattachmentList = res.rows;
+          for (let i = 0; i < UattachmentList.length; i++) {
+            let fileName = UattachmentList[i].fileName;
+            let subIndex = fileName.lastIndexOf(".");
+            let ext = fileName.substring(subIndex + 1, fileName.length);
+            let urls = "";
+            let type = "";
+            if (ext == "xlsx" || ext == "xls") {
+              urls = require("@/assets/images/icon_excel.jpg");
+              type = 'excel';
+            } else if (ext == "doc" || ext == "docx") {
+              urls = require("@/assets/images/icon_word.jpg");
+              type = 'word';
+            } else if (ext == "pdf") {
+              urls = require("@/assets/images/icon_pdf.jpg");
+              type = 'pdf';
+            } else if (ext == "zip") {
+              urls = require("@/assets/images/icon_zip.jpg");
+              type = 'zip';
+            } else {
+              urls = '/api' + UattachmentList[i].fileUrl;
+              type = 'image';
+            }
+            data.fileList.push({
+              url: urls,
+              urlApi: '/api' + UattachmentList[i].fileUrl,
+              type: type
+            })
+          }
+          this.showPermanentDetail = true;
+          this.permanentDetail = data;
+          console.log(22222, this.permanentDetail);
+        }
+      });
+    },
     // 创建矢量数据源
     addDeptLayer (nextDeptSet, locationIcon) {
       let features = [];
@@ -175,7 +267,6 @@ export default {
     // 获取资源列表
     getResourceList (deptId) {
       getResourceListByDeptId(deptId).then(response => {
-        console.log(22222, response);
         if (response.data && response.data.length > 0) {
           this.addResourceLayer(response.data);
         }
@@ -186,13 +277,12 @@ export default {
       let features = [];
       resourceList.forEach(item => {
         if (item.theGeom != null && item.theGeom !== '') {
-          let fs = gis.getFeature3(item)
+          const { useType } = item
+          let color = this.LegendData[useType - 1 + '']
+          let fs = gis.getFeature3(item, color.iconStyle.background, color.iconStyle.borderColor)
           features.push(fs);
         }
-
       });
-
-
       gis.getVectorLayerByFs(features)
       gis.mapSetFit(features)
     },

src/views/resources/main-gis/index.scss

@@ -79,4 +79,166 @@
       }
     }
   }
+}
+
+.gl_pop_cash {
+  background: rgba(10, 25, 47, 0.8);
+  position: absolute;
+  border: 1px solid #063a95;
+  border-left: 0.15vw solid #357dfa;
+  padding: 0 1vw;
+  z-index: 11;
+
+  .head_main {
+    height: 4.62vh;
+    padding-top: 0.55vh;
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: space-between;
+
+    .title {
+      color: #ffad00;
+      font-size: 1.66vh;
+    }
+
+    .close {
+      background: url('./close.png');
+      // border: 1px solid red;
+      background-size: 100% 100%;
+      width: 1.48vh;
+      height: 1.48vh;
+      cursor: pointer;
+    }
+
+    .xs_main {
+      height: 0.55vh;
+      position: absolute;
+      width: 100%;
+      bottom: -0.55vh;
+      display: flex;
+      align-items: center;
+
+      .block {
+        width: 2.34vw;
+        display: flex;
+
+        .point {
+          width: .55vh;
+          height: .55vh;
+          margin-right: 0.36vw;
+
+          &.p1 {
+            background: rgba(53, 125, 250, 1)
+          }
+
+          &.p2 {
+            background: rgba(53, 125, 250, .7)
+          }
+
+          &.p3 {
+            background: rgba(53, 125, 250, .4)
+          }
+        }
+
+      }
+
+      .xs_x {
+        height: 1px;
+        flex: 1;
+        background: #214284;
+      }
+    }
+  }
+
+  .echarts_main {
+    .headers {
+      height: 3.33vh;
+      font-size: 1.48vh;
+      color: #0befca;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 0.53vw;
+      background: rgba(11, 239, 202, .2);
+      margin-bottom: 0.9vh
+    }
+
+    .desc_main {
+      overflow-y: scroll;
+      padding-right: 0.33vw;
+
+      .analysisTable_list {
+        margin: 0;
+        padding: 0;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .flex_item {
+          cursor: pointer;
+          list-style: none;
+          margin: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          color: #fff;
+          font-size: 1.29vh;
+          position: relative;
+          height: 3.2vh;
+
+          &:nth-child(2n) {
+            background: rgba(53, 125, 250, .1);
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.pop_statistical_desc {
+  width: 20.2vw;
+  margin: 0;
+  right: 23vw;
+  top: 35vh;
+  padding-bottom: 1.04vw !important;
+
+  .head_main {
+    .title {
+      color: #fff;
+    }
+  }
+
+  .echarts_main {
+    margin-top: 1.66vh;
+
+    div {
+      display: flex;
+      align-items: center;
+
+      &:nth-child(even) {
+        background: rgba(32, 89, 188, 0.2);
+      }
+
+      p {
+        &:nth-child(1) {
+          width: 8vw;
+          padding-left: 1vw;
+          flex-shrink: 0;
+        }
+
+        &:nth-child(2) {
+          color: #ffad00;
+        }
+
+        margin: 0;
+        color: #ffffff;
+        font-size:1.33vh;
+        line-height: 3.92vh;
+      }
+    }
+  }
 }