完善首页

rtsp-vue/src/views/video/inspection/record.vue

@@ -28,7 +28,7 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -56,7 +56,7 @@
           @click="handleDelete"
           v-hasPermi="['video:inspectionRecord:remove']"
         >删除</el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -71,14 +71,18 @@
 
     <el-table v-loading="loading" :data="inspectionRecordList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="巡检任务" align="center" prop="taskId" />
+      <el-table-column label="巡检任务" align="center" prop="taskId">
+        <template #default="scope">
+          {{ findTaskName(scope.row.taskId) }}
+        </template>
+      </el-table-column>
       <el-table-column label="执行时间" align="center" prop="executeTime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.executeTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="执行时长" align="center" prop="duration" />
-      <el-table-column label="巡检结果" align="center" prop="result" />
+      <el-table-column label="巡检结果" align="center" prop="result" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column label="执行状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :options="ins_record_status" :value="scope.row.status"/>
@@ -86,8 +90,9 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['video:inspectionRecord:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspectionRecord:remove']">删除</el-button>
+          <el-button link icon="Document" @click="handleDetail(scope.row)">详情</el-button>
+          <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['video:inspectionRecord:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspectionRecord:remove']">删除</el-button> -->
         </template>
       </el-table-column>
     </el-table>
@@ -151,6 +156,36 @@
         </div>
       </template>
     </el-dialog>
+
+    <el-dialog :title="title" v-model="detailShow" width="600px" append-to-body>
+      <el-row>
+        <el-descriptions :column="3" border>
+          <el-descriptions-item label="巡检任务" prop="taskId">
+            {{ findTaskName(form.taskId) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="执行时间" prop="executeTime">
+            {{ parseTime(form.executeTime, '{y}-{m}-{d}') }}
+          </el-descriptions-item>
+          <el-descriptions-item label="执行时长" prop="duration">
+            {{ form.duration }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-row>
+
+      <el-row>
+        <div style="width: 100%; height: 100%;">
+          <h3>巡检结果</h3>
+          {{ form.result }}
+        </div>
+      </el-row>
+
+      <el-row>
+        <div style="width: 100%; height: 100%;">
+          <h3>附件</h3>
+          <video v-for="item in form.accessory.split(',')" :key="item" :src="item" controls></video>
+        </div>
+      </el-row>
+    </el-dialog>
   </div>
 </template>
 
@@ -174,6 +209,7 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
+const detailShow = ref(false);
 
 const data = reactive({
   form: {},
@@ -191,6 +227,10 @@ const data = reactive({
   }
 });
 
+const findTaskName = (taskId) => {
+  return inspectionList.value.find(item => item.taskId === taskId)?.taskName;
+}
+
 watch(() => taskId, (newVal) => {
   if (newVal) {
     queryParams.value.taskId = parseInt(newVal);
@@ -318,6 +358,11 @@ function handleExport() {
   }, `inspectionRecord_${new Date().getTime()}.xlsx`)
 }
 
+function handleDetail(row) {
+  form.value = row;
+  detailShow.value = true;
+}
+
 getInspectionList();
 getList();
 </script>