task 44941 BUG修改

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

@@ -1,8 +1,8 @@
   <!--资产信息详情-弹窗-->
   <div class="gl_pop_cash pop_statistical_desc">
     <div class="head_main">
-      <div class="title">{{resourceDetail.name}}</div>
-      <div class="close" @click="showResourceDetail = false"></div>
+      <div class="title"><i></i>{{resourceDetail.name}}</div>
+      <div class="close" @click="close"></div>
     </div>
     <div class="echarts_main scrollbar">
       <div>
@@ -56,14 +56,11 @@
       <div>
         <p>附件</p>
         <p>
-          <block v-for="(item,index) in resourceDetail.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>
+          <template v-for="(item,index) in resourceDetail.attachments">
+            <img :src="'/api' + item.thumUrl" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.fileUrl)">
+          </template>
         </p>
       </div>
     </div>
 
-  </div>
+  </div>

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

@@ -22,6 +22,11 @@ export default {
   mounted () {
   },
   methods: {
+    openImage (url) {
+      this.$emit('openImage',url)
+      // this.dialogImageUrl = url;
+      // this.dialogVisible = true;
+    },
     close () {
       this.$emit('close')
     }

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

@@ -1,19 +1,36 @@
 .gl_pop_cash {
   background: rgba(10, 25, 47, 0.8);
   position: absolute;
-  padding: 0 10px;
+  border: 2px solid #3181f6;
+  box-shadow: 0 0 5px #3181f6;
+  border-radius: 0 0 100px 0;
+  padding: 0!important;
+  // border-left: 0.15vw solid #357dfa;
   z-index: 11;
 
   .head_main {
-    height: 40px;
+    height: 60px;
     display: flex;
     align-items: center;
     position: relative;
     justify-content: space-between;
-
+    padding: 0 20px;
+    background: linear-gradient(to right, rgba(49, 129, 246, .8), rgba(49, 129, 246, 0));
     .title {
       color: #ffad00;
-      font-size: 16px !important;
+      font-size: 20px !important;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      text-shadow: 0 0 15px #3181f6;
+      i{
+        display: block;
+        width: 20px;
+        height: 20px;
+        background: url("tt_icon.png") no-repeat center;
+        background-size: 100% 100%;
+        margin-right: 10px;
+      }
     }
 
     .close {
@@ -127,18 +144,18 @@
 .pop_statistical_desc {
   width: 600px;
   margin: 0;
-  left: 480px !important;
-  top: 180px !important;
+  left: 480px;
+  top: 180px;
   padding-bottom: 1.04vw !important;
 
   .head_main {
+
     .title {
       color: #fff;
     }
   }
 
   .echarts_main {
-    overflow-y: auto;
     margin-top: 16px;
 
     div {
@@ -146,25 +163,22 @@
       align-items: center;
 
       &:nth-child(even) {
-        background: rgba(32, 89, 188, 0.2);
+        //background: rgba(32, 89, 188, 0.2);
       }
 
       p {
+        font-size: 16px;
         &:nth-child(1) {
           width: 8vw;
-          padding-left: 1vw;
+          padding-right: 1vw;
+          text-align: right;
           flex-shrink: 0;
+          color: #b0cfec;
         }
-
-        &:nth-child(2) {
-          color: #ffad00;
-        }
-
         margin: 0;
         color: #ffffff;
-        font-size:1.33vh;
         line-height: 3.92vh;
       }
     }
   }
-}
+}

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

@@ -7,7 +7,7 @@
       </div>
     </div>
   </Legend>
-  <AssetDetails @close="listDialogHidden('detail')" v-if="showPermanentDetail.show" :data="showPermanentDetail.id"></AssetDetails>
+  <AssetDetails @close="listDialogHidden('detail')" @openImage="openImage" v-if="showPermanentDetail.show" :data="showPermanentDetail.id"></AssetDetails>
   <!--选择地址-->
   <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
   <!--选择地址-->
@@ -21,5 +21,10 @@
       </template>
     </el-cascader>
   </div>
+
+  <div class="imgBox" v-if="dialogVisible">
+    <div class="box_bg" @click="dialogVisible = false"></div>
+    <img :src="'/api' + dialogImageUrl" alt="">
+  </div>
 </div>
 

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

@@ -184,6 +184,8 @@ export default {
         checkStrictly: true,
       },
       addrOptions: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
       //资产信息详情弹窗
       showResourceDetail: false,
       mapGeoServerUrl: "",            // geoserver地址
@@ -267,6 +269,11 @@ export default {
     })
   },
   methods: {
+    openImage (url) {
+      console.log(url)
+      this.dialogImageUrl = url;
+      this.dialogVisible = true;
+    },
     // 获取村边界的图层名称
     getVillageBorderLayerName () {
       getConfigKey("geoserver.layer.villageBorder").then(response => {

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

@@ -220,7 +220,28 @@
 
 }
 
-.pop_statistical_desc {
+.imgBox{
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 999999;
+  width: 100vw;
+  height: 100%;
+  .box_bg{
+    background-color: rgba(0,0,0,0.5);
+    width: 100%;
+    height: 100%;
+  }
+  img{
+    height: 60vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+}
+
+.a .pop_statistical_desc {
   width: 20.2vw;
   margin: 0;
   right: 23vw;