车辆损坏排查-数据异常修改提交

src/views/vent/monitorManager/gateMonitor/components/CarDamageTable.vue

@@ -22,16 +22,23 @@
       <a-table size="small" :dataSource="dataSource" :columns="carColumns" :pagination="pagination"
         :scroll="{ y: 200, }" @change="pageChange">
         <template #bodyCell="{ column, text }">
-            <template v-if="column.dataIndex=='carNo' || column.dataIndex=='distance' || column.dataIndex=='photo' || column.dataIndex=='captureTime'">
-            <div>{{ text  ? text : '-' }}</div>
+          <template
+            v-if="column.dataIndex == 'carNo' || column.dataIndex == 'distance' || column.dataIndex == 'photo' || column.dataIndex == 'captureTime'">
+            <div>{{ text ? text : '-' }}</div>
           </template>
           <template v-if="column.dataIndex == 'type'">
             <div>{{ text == '1' ? '风门损坏' : '正常开闭' }}</div>
           </template>
+          <template v-if="column.dataIndex == 'photoC'">
+            <img :src="text" alt="" class="photo_zp" @click="preViewImg(text)">
+          </template>
         </template>
       </a-table>
     </div>
-
+    <!-- 预览抓拍图像 -->
+    <a-modal v-model:visible="visiblePhoto" width="850px" :title="titlePhoto" :footer="null" centered destroyOnClose>
+      <img :src="imgSrc" alt="">
+    </a-modal>
   </div>
 </template>
 
@@ -51,7 +58,6 @@ let props = defineProps({
 })
 
 let type = ref('0')
-
 let dataSource = ref<any[]>([])
 //分页参数配置
 let pagination = reactive({
@@ -62,11 +68,22 @@ let pagination = reactive({
   showSizeChanger: true, // 是否可改变每页显示条数
   pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
 });
+let visiblePhoto = ref(false)
+let titlePhoto = ref('抓拍图像预览')
+let imgSrc = ref('')//抓拍图像路径
+
+
 
 //查询列表
 async function getCarList() {
   let res = await props.deviceListApi({ gateIds: props.gateId, type: type.value, pageNo: pagination.current, pageSize: pagination.pageSize })
-  dataSource.value = res.records || []
+  const remoteUrl = import.meta.env.DEV ? 'http://182.92.126.35' : 'http://' + window.location.hostname;
+  dataSource.value = res.records.map(el => {
+    return {
+      photoC: `${remoteUrl}:9999/sys/common/static/${el.photo}`,
+      ...el
+    }
+  })
   pagination.total = res.total
 }
 function pageChange(val) {
@@ -85,6 +102,11 @@ function getReset() {
   pagination.current = 1
   getCarList()
 }
+//预览抓拍图像
+function preViewImg(img) {
+  visiblePhoto.value = true
+  imgSrc.value = img
+}
 onMounted(() => {
   getCarList()
 })
@@ -111,5 +133,10 @@ onMounted(() => {
     background-color: #ffffff00;
     color: #fff;
   }
+
+  .photo_zp {
+    width: 120px;
+    cursor: pointer;
+  }
 }
 </style>

src/views/vent/monitorManager/gateMonitor/gate.data.ts

@@ -128,12 +128,7 @@ export let typeList:any[] =[
 export const carColumns: BasicColumn[] = [
   {
     title: '安装位置',
-    dataIndex: 'strInstallPos',
-    align: 'center'
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'strName',
+    dataIndex: 'gateInstallPos',
     align: 'center'
   },
   {
@@ -153,7 +148,7 @@ export const carColumns: BasicColumn[] = [
   },
   {
     title: '抓拍图像路径',
-    dataIndex: 'photo',
+    dataIndex: 'photoC',
     align: 'center'
   },
   {