详情图片可查看 附件可下载

src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue

@@ -36,7 +36,17 @@
               <a-descriptions-item label="判读时间">{{ identification_time }}</a-descriptions-item>
               <a-descriptions-item label="案件备注">{{ remark }}</a-descriptions-item>
               <a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
-              <a-descriptions-item label="案件图片">{{ anjianzhaopian }}</a-descriptions-item>
+              <a-descriptions-item label="案件图片">
+                <template  v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex" >
+                  <a-image
+                    v-if="imageItem"
+                    width="100px"
+                    height="100px"
+                    :src="`http://192.168.10.102:9023/${imageItem}`"
+                  ></a-image>
+                </template>
+                <!-- {{ anjianzhaopian }} -->
+              </a-descriptions-item>
             </a-descriptions>
           </a-tab-pane>
           <a-tab-pane key="2" tab="线索填报" force-render>
@@ -58,8 +68,30 @@
               <a-descriptions-item label="违法联系人">{{ illegal_contact }}</a-descriptions-item>
               <a-descriptions-item label="违法人身份证号">{{ illegal_shenfenzhenghao }}</a-descriptions-item>
               <a-descriptions-item label="判定依据说明">{{ pandingyijushuoming }}</a-descriptions-item>
-              <a-descriptions-item label="附件">{{ fujian }}</a-descriptions-item>
+              <a-descriptions-item label="附件">
-              <a-descriptions-item label="照片">{{ casepic }}</a-descriptions-item>
+                <template  v-for="(item, itemIndex) in fujianList" :key="itemIndex" >
+                  <div v-if="item">
+                    <Icon
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="downLoadFile(item)" 
+                    />
+                    {{ item }}
+                  </div>
+                </template>
+                <!-- {{ fujian }} -->
+              </a-descriptions-item>
+              <a-descriptions-item label="照片">
+                <template  v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex" >
+                  <a-image
+                    v-if="imageItem"
+                    width="100px"
+                    height="100px"
+                    :src="`http://192.168.10.102:9023/${imageItem}`"
+                  ></a-image>
+                </template>
+                <!-- {{ casepic }} -->
+              </a-descriptions-item>
               <a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
               <a-descriptions-item label="填报时间">{{ examine_time }}</a-descriptions-item>
             </a-descriptions>
@@ -74,9 +106,43 @@
                 'word-break': 'break-all'
               }">
               <a-descriptions-item label="整改措施">{{ measure_name }}</a-descriptions-item>
-              <a-descriptions-item label="验收表">{{ yanshoubiao }}</a-descriptions-item>
+              <a-descriptions-item label="验收表">
-              <a-descriptions-item label="拆除复耕后照片">{{ chaichufugenghoupic }}</a-descriptions-item>
+                <template  v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex" >
-              <a-descriptions-item label="附件">{{ zhenggaifujian }}</a-descriptions-item>
+                  <div v-if="item">
+                    <Icon
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="downLoadFile(item)" 
+                    />
+                    {{ item }}
+                  </div>
+                </template>
+                <!-- {{ yanshoubiao }} -->
+              </a-descriptions-item>
+              <a-descriptions-item label="拆除复耕后照片">
+                <template  v-for="(imageItem, imageIndex) in chaichufugenghoupicList" :key="imageIndex" >
+                  <a-image
+                    v-if="imageItem"
+                    width="100px"
+                    height="100px"
+                    :src="`http://192.168.10.102:9023/${imageItem}`"
+                  ></a-image>
+                </template>
+                <!-- {{ chaichufugenghoupic }} -->
+              </a-descriptions-item>
+              <a-descriptions-item label="附件">
+                <template  v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex" >
+                  <div v-if="item">
+                    <Icon
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="downLoadFile(item)" 
+                    />
+                    {{ item }}
+                  </div>
+                </template>
+                <!-- {{ zhenggaifujian }} -->
+              </a-descriptions-item>
               <a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
               <a-descriptions-item label="办理时间">{{ transact_time }}</a-descriptions-item>
             </a-descriptions>
@@ -100,10 +166,11 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps,ref, } from "vue"
+import { defineProps,ref,computed } from "vue"
 import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
 import {getConfig} from '@/api/sys/layerManagement'
 import { getGeom } from '@/api/sys/layerManagement';
+import Icon from '@/components/Icon/Icon.vue';
 
 const MapboxComponent = ref();
 const mapConfig = ref({})
@@ -215,6 +282,24 @@ const {
   is_jieshou, 
   anjianzhaopian
 } = props.showInfoData
+const anjianzhaopianList = computed(() => {
+  return anjianzhaopian?anjianzhaopian.split(','):[]
+})
+const casepicList = computed(() => {
+  return casepic?casepic.split(','):[]
+})
+const chaichufugenghoupicList = computed(() => {
+  return chaichufugenghoupic?chaichufugenghoupic.split(','):[]
+})
+const fujianList = computed(() => {
+  return fujian?fujian.split(','):[]
+})
+const zhenggaifujianList = computed(() => {
+  return zhenggaifujian?zhenggaifujian.split(','):[]
+})
+const yanshoubiaoList = computed(() => {
+  return yanshoubiao?yanshoubiao.split(','):[]
+})
 
 function onMapboxLoad(){
   changeTask();
@@ -252,6 +337,9 @@ function changeTask() {
       createMessage.error('当前数据没有图斑！');
     }
 }
+const downLoadFile = (url) => {
+  window.open(`http://192.168.10.102:9023/${rul}`,'_self')
+}
 
 </script>