提交图片修改查看方式

src/views/home/cpns/PicViewerForPhotos.vue

@@ -16,8 +16,8 @@
         <div  style="position: relative; height: 100%; width:100%;">
              <div style="position: absolute; top: 0; height: 20%; width:100%;color: #FFFFFF; ">
                {{title}}</div>
-            <el-carousel-item style="   position: absolute; top:60px; height: 80%" v-for="pic, index in props.picImg.url"   :key="pic" >
-               <img :src="pic" :alt="props.picImg.type[index]" class="pics">
+            <el-carousel-item style="   position: absolute; top:60px; height: 80%" v-for="pic, index in props.picImg"   :key="pic" >
+               <img :src="pic.imgurl" :alt="props.picImg[index].boatstatus" class="pics">
             </el-carousel-item>
          </div>
       </el-carousel>
@@ -46,7 +46,7 @@ let indexs=1
 //   return  props.picImg.type[1]
 // })
 
-const title = ref( props.picImg.type[indexs])
+const title = ref(props.picImg[indexs].boatstatus)
 
 const pic_carousel = ref(null)
 
@@ -61,7 +61,7 @@ function pcSwitch(type) {
       indexs--
     }
     pic_carousel.value.prev()
-    title.value=props.picImg.type[indexs]
+    title.value=props.picImg[indexs].boatstatus
 
   } else if(type==='right') {
     if (indexs==2)
@@ -71,13 +71,13 @@ function pcSwitch(type) {
       indexs++
     }
     pic_carousel.value.next()
-    title.value=props.picImg.type[indexs]
+    title.value=props.picImg[indexs].boatstatus
 
   }
 }
 
 function changeIndex(index) {
-  title.value=props.picImg.type[index]
+  title.value=props.picImg[index].boatstatus
 }
 
 </script>

src/views/yyjg/cpns/EntInfo.vue

@@ -67,7 +67,8 @@
         <di class="tab-table"  v-if="tableData_yun.value.length>0">
         <el-table :data="tableData_yun.value" class="table-default_UnitYunYing"  >
           <el-table-column label="序号"  type="index" :dataformatas="indexCreate" />
-          <el-table-column label="船舶动态" prop="type" min-width="90" />
+          <el-table-column label="mmsi" prop="mmsi" min-width="90" />
+          <el-table-column label="船名" prop="shipName" min-width="90" />
           <el-table-column label="图像抓取时间" min-width="80" >
             <template #default="scope">
               <span>{{ scope.row.time.slice(5,16) }}</span>
@@ -75,7 +76,7 @@
           </el-table-column>
           <el-table-column >
             <template #default="scope">
-              <el-button class="buttonForChakan" @click="showImages(scope.row.url)">查看</el-button>
+              <el-button class="buttonForChakan" @click="showImages(scope.row.imgInfo)">查看</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -140,7 +141,11 @@ export default {
 
   const vidoShow = ref(false)
   const  cameraIndexCode= ref("")
-  const imagesUrl=ref({url:[],type:['船舶作业','船舶离泊','船舶靠泊']})
+  const imagesUrl=ref([
+          {imgurl:'',boatstatus:'船舶作业'},
+          {imgurl:'',boatstatus:'船舶靠泊'},
+          {imgurl:'',boatstatus:'船舶离泊'},
+          ])
 
   // 关闭图片
   function closePicViewerOne() {
@@ -155,7 +160,7 @@ export default {
   function showImages(url)
   {
     imageShow.value=true
-    imagesUrl.value.url=url
+    imagesUrl.value=url
   }
 
 
@@ -232,33 +237,21 @@ export default {
   const tableData_video = reactive({value: []});
   const tableData_goods = reactive({value: []})
 
-  const tableData_yun = reactive({value:
-            [{type:"主厂区图片",time:"123123123"
-              ,url: [
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg"
+  const tableData_yun = reactive(
+          {value:
+            [{mmsi:'11111',shipName:'22222',type:"主厂区图片",time:"123123123"
+              ,imgInfo: [
+                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶作业'},
+                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶靠泊'},
+                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶离泊'}
               ]}
-              ,{type:"主厂区图片",time:"123",url: [
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg"
+              ,{mmsi:'11111',shipName:'22222',type:"主厂区图片",time:"123",imgInfo: [
+                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶作业'},
+                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶靠泊'},
+                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶离泊'}
               ]}
-              ,{type:"主厂区图片",time:"123",url: [
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg"
-              ]},
-              {type:"主厂区图片",time:"123",url: [
-                  "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                  "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                  "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg"
-                ]},
-              {type:"主厂区图片",time:"123",url: [
-                  "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                  "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg",
-                  "http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg"
-                ]}]})
+              ]
+          })
 
   watch(tableData_video, (val) => {
     // getData(val, pageSize.value, 1)