change(record): 重构记录模块的图片和视频显示逻辑

- 修改了 recordBusbarTemp 和 recordInspectionCabinet 两个组件
- 修改了图片和视频的打开显示按钮
- 调整了对话框样式，图片并列显示

ruoyi-ui/src/views/record/recordBusbarTemp/index.vue

@@ -208,12 +208,12 @@
           <dict-tag :options="dict.type.record_busbar_temp_is_alarm" :value="scope.row.isAlarm"/>
         </template>
       </el-table-column>
-<!--      <el-table-column label="图像路径" align="center" prop="filePath" />-->
-      <el-table-column label="打开文件" align="center">
+      <el-table-column label="图像路径" align="center" prop="filePath" />
+<!--      <el-table-column label="打开文件" align="center">
         <template slot-scope="scope">
           <el-button type="primary" @click="showPhoto(scope.row)">显示图片</el-button>
         </template>
-      </el-table-column>
+      </el-table-column>-->
       <el-table-column label="是否启用" align="center" prop="isFlag">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.record_busbar_temp_is_flag" :value="scope.row.isFlag"/>
@@ -239,6 +239,13 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="showPhoto(scope.row)"
+            v-hasPermi="['record:recordBusbarTemp:list']"
+          >打开文件</el-button>
           <el-button
             size="mini"
             type="text"
@@ -352,13 +359,13 @@
 <!-- 图片显示对话框 -->
 <!--    上面的图像是 2688x1520，下面的图像是 1920x1080。-->
 <!-- 通过增加key属性来确保每次图片URL更新时，Vue都会重新渲染图片元素，从而避免显示旧的缓存图片。 -->
-    <el-dialog :title="photoTitle" :visible.sync="photoOpen" width="800px" append-to-body>
+    <el-dialog :title="photoTitle" :visible.sync="photoOpen" width="1333px" append-to-body>
       <div class="dialog-content">
         <div class="image-container" v-if="visiblePhoto">
           <img :src="visiblePhoto" alt="显示可见光图片" v-show="photoOpen" :key="visiblePhotoKey" />
         </div>
-        <div class="image-container"  v-if="thermalPhoto">
-          <img :src="thermalPhoto" alt="显示热成像图片"  v-show="photoOpen" :key="thermalPhotoKey" />
+        <div class="image-container" v-if="thermalPhoto">
+          <img :src="thermalPhoto" alt="显示热成像图片" v-show="photoOpen" :key="thermalPhotoKey" />
         </div>
       </div>
     </el-dialog>
@@ -579,10 +586,6 @@ export default {
         this.thermalPhoto = thermalResponse;
         const visibleResponse = `/prod-api/record/recordBusbarTemp/getThermalPhoto/${filePath}`
         this.visiblePhoto = visibleResponse;
-/*        const thermalResponse = getVisiblePhoto(filePath);
-        this.thermalPhoto = thermalResponse;
-        const visibleResponse = getThermalPhoto(filePath);
-        this.visiblePhoto = visibleResponse;*/
 
         this.thermalPhotoKey++; // 更新 key 以重新渲染图片
         this.visiblePhotoKey++; // 更新 key 以重新渲染图片
@@ -634,27 +637,8 @@ export default {
   }
 };
 </script>
-
-
-<!--<style scoped>
-/* 定义一个图像容器类，用于设置图像的布局和样式 */
-.image-container {
-  width: 100%; /* 设置容器宽度为100%，以适应父元素 */
-  max-width: 1080px; /* 设置容器的最大宽度，防止图像在大屏幕上显示过大 */
-  margin: 0 auto; /* 居中显示容器 */
-  position: relative; /* 设置相对定位，以便于在容器内进行绝对定位 */
-}
-
-/* 设置图像容器内的图像样式 */
-.image-container img {
-  width: 100%; /* 设置图像宽度为100%，充满容器 */
-  height: 100%; /* 设置图像高度为100%，充满容器 */
-  object-fit: cover; /* 或者使用 contain，这里选择 cover 以保持图像的宽高比并覆盖整个容器 */
-}
-</style>-->
-
-
-<!--上面的图像是 2688x1520，下面的图像是 1920x1080。-->
+<!--
+上面的图像是 2688x1520，下面的图像是 1920x1080。
 <style scoped>
 /* 定义一个图像容器类，用于设置图像的布局和样式 */
 .image-container {
@@ -679,4 +663,34 @@ export default {
   overflow-y: auto; /* 添加垂直滚动条 */
 }
 </style>
+-->
+
+<style scoped>
+.dialog-content {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%; /* 增大对话框的宽度 */
+  max-width: 1920px; /* 设置对话框的最大宽度 */
+}
+
+.image-container {
+  text-align: center;
+  margin-bottom: 10px;
+  width: 49%; /* 修改为100%以充满父容器 */
+  max-width: 100%; /* 增加最大宽度 */
+  aspect-ratio: 16/9;
+  position: relative;
+}
+
+.image-container img {
+  max-width: 100%;
+  height: auto;
+  border: 1px solid #ddd;
+  padding: 5px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  object-fit: contain;
+}
+</style>
 

ruoyi-ui/src/views/record/recordInspectionCabinet/index.vue

@@ -164,11 +164,12 @@
           <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
         </template>
       </el-table-column>-->
-      <el-table-column label="打开文件" align="center">
+      <el-table-column label="文件路径" align="center" prop="filePath" />
+<!--      <el-table-column label="打开文件" align="center">
         <template slot-scope="scope">
           <el-button type="primary" @click="openVideoPage(scope.row.filePath)">播放视频</el-button>
         </template>
-      </el-table-column>
+      </el-table-column>-->
       <el-table-column label="是否标识" align="center" prop="isFlag">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.record_inspection_cabinet_is_flag" :value="scope.row.isFlag"/>
@@ -189,6 +190,13 @@
       </el-table-column>-->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="openVideoPage(scope.row.filePath)"
+            v-hasPermi="['record:recordInspectionCabinet:edit']"
+          >打开文件</el-button>
           <el-button
             size="mini"
             type="text"