diff --git a/ruoyi-module/src/main/java/com/ruoyi/base/controller/BaseCabinetInfoController.java b/ruoyi-module/src/main/java/com/ruoyi/base/controller/BaseCabinetInfoController.java
index d0de36b..3bdeb06 100644
--- a/ruoyi-module/src/main/java/com/ruoyi/base/controller/BaseCabinetInfoController.java
+++ b/ruoyi-module/src/main/java/com/ruoyi/base/controller/BaseCabinetInfoController.java
@@ -3,7 +3,9 @@ package com.ruoyi.base.controller;
 import java.util.List;
 import javax.servlet.http.HttpServletResponse;
 
+import com.ruoyi.base.domain.CabinetAndBusbarTree;
 import com.ruoyi.base.domain.baseCabinetInfoTreeSelects;
+import com.ruoyi.base.service.ICabinetAndBusbarTreeService;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -36,6 +38,9 @@ public class BaseCabinetInfoController extends BaseController
     @Autowired
     private IBaseCabinetInfoService baseCabinetInfoService;
 
+   @Autowired
+   private ICabinetAndBusbarTreeService cabinetAndBusbarTreeService;
+
     /**
      * 查询电柜信息列表
      */
@@ -105,11 +110,21 @@ public class BaseCabinetInfoController extends BaseController
     }
 
     /**
-     * 查询计量设备信息下拉树结构
+     * 查询电柜信息下拉树结构
      * */
     @PostMapping("/getBaseCabinetInfoTree")
     public AjaxResult getBaseCabinetInfoTree(@RequestBody BaseCabinetInfo baseCabinetInfo) {
         List<baseCabinetInfoTreeSelects> list = baseCabinetInfoService.selectCabinetInfoTreeList(baseCabinetInfo);
         return success(list);
     }
+    /**
+     * 查询电柜和母排信息下拉树结构
+     * 电柜信息的子节点是母排信息
+     * */
+    @PostMapping("/CabinetAndBusbarTree")
+    public AjaxResult CabinetAndBusbarTree(@RequestBody BaseCabinetInfo baseCabinetInfo) {
+        List<CabinetAndBusbarTree> list = cabinetAndBusbarTreeService.selectCabinetAndBusbarTree(baseCabinetInfo);
+        return success(list);
+    }
+
 }
diff --git a/ruoyi-module/src/main/java/com/ruoyi/base/domain/BaseBusbarInfo.java b/ruoyi-module/src/main/java/com/ruoyi/base/domain/BaseBusbarInfo.java
index 06eb5f9..3a1cf85 100644
--- a/ruoyi-module/src/main/java/com/ruoyi/base/domain/BaseBusbarInfo.java
+++ b/ruoyi-module/src/main/java/com/ruoyi/base/domain/BaseBusbarInfo.java
@@ -91,6 +91,8 @@ public class BaseBusbarInfo extends BaseEntity
     @Excel(name = "是否旋转:1-是；0-否")
     private Long isRotate;
 
+    List<BaseBusbarInfo> children = new ArrayList<BaseBusbarInfo>();
+
     public void setObjId(Long objId)
     {
         this.objId = objId;
@@ -245,6 +247,15 @@ public class BaseBusbarInfo extends BaseEntity
         return isRotate;
     }
 
+
+    public List<BaseBusbarInfo> getChildren() {
+        return children;
+    }
+
+    public void setChildren(List<BaseBusbarInfo> children) {
+        this.children = children;
+    }
+
     @Override
     public String toString() {
         return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
diff --git a/ruoyi-module/src/main/java/com/ruoyi/base/domain/BaseCabinetInfo.java b/ruoyi-module/src/main/java/com/ruoyi/base/domain/BaseCabinetInfo.java
index 67c69d3..3e13bdb 100644
--- a/ruoyi-module/src/main/java/com/ruoyi/base/domain/BaseCabinetInfo.java
+++ b/ruoyi-module/src/main/java/com/ruoyi/base/domain/BaseCabinetInfo.java
@@ -66,8 +66,9 @@ public class BaseCabinetInfo extends BaseEntity
     /** 旋转角度 */
     @Excel(name = "旋转角度")
     private BigDecimal rotateAngle;
-/*
-    public List<BaseBusbarInfo> children = new ArrayList<BaseBusbarInfo>();*/
+
+
+    public List<BaseCabinetInfo> children = new ArrayList<BaseCabinetInfo>();
 
     public void setObjId(Long objId)
     {
@@ -169,14 +170,13 @@ public class BaseCabinetInfo extends BaseEntity
         return rotateAngle;
     }
 
-/*
-    public List<BaseBusbarInfo> getChildren() {
+    public List<BaseCabinetInfo> getChildren() {
         return children;
     }
 
-    public void setChildren(List<BaseBusbarInfo> children) {
+    public void setChildren(List<BaseCabinetInfo> children) {
         this.children = children;
-    }*/
+    }
 
     @Override
     public String toString() {
diff --git a/ruoyi-module/src/main/java/com/ruoyi/base/domain/CabinetAndBusbarTree.java b/ruoyi-module/src/main/java/com/ruoyi/base/domain/CabinetAndBusbarTree.java
new file mode 100644
index 0000000..51e6876
--- /dev/null
+++ b/ruoyi-module/src/main/java/com/ruoyi/base/domain/CabinetAndBusbarTree.java
@@ -0,0 +1,108 @@
+package com.ruoyi.base.domain;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.ruoyi.common.core.domain.entity.SysDept;
+import com.ruoyi.common.core.domain.entity.SysMenu;
+
+import java.io.Serializable;
+import java.util.List;
+import java.util.stream.Collectors;
+
+/**
+ * baseCabinetInfoTreeSelects
+ *
+ * @author zangch
+ */
+public class CabinetAndBusbarTree implements Serializable
+{
+    private static final long serialVersionUID = 1L;
+
+    /** 节点ID */
+    private Long id;
+
+    /** 节点名称 */
+    private String label;
+
+    private String code;
+
+    /** 子节点 */
+    @JsonInclude(JsonInclude.Include.NON_EMPTY)
+    private List<CabinetAndBusbarTree> children;
+
+    public CabinetAndBusbarTree()
+    {
+
+    }
+
+    public CabinetAndBusbarTree(SysDept dept)
+    {
+        this.id = dept.getDeptId();
+        this.label = dept.getDeptName();
+        this.children = dept.getChildren().stream().map(CabinetAndBusbarTree::new).collect(Collectors.toList());
+    }
+
+    public CabinetAndBusbarTree(BaseCabinetInfo baseCabinetInfo){
+        this.id = baseCabinetInfo.getObjId();
+        this.label = baseCabinetInfo.getCabinetAlias();
+        this.code = baseCabinetInfo.getCabinetCode().toString();
+        this.children = baseCabinetInfo.getChildren().stream().map(CabinetAndBusbarTree::new).collect(Collectors.toList());
+    }
+
+
+    public CabinetAndBusbarTree(BaseBusbarInfo baseBusbarInfo) {
+        this.id = baseBusbarInfo.getObjId();
+        this.label = baseBusbarInfo.getBusbarAlias();
+        this.code = baseBusbarInfo.getBusbarCode().toString();
+        this.children = baseBusbarInfo.getChildren().stream().map(CabinetAndBusbarTree::new).collect(Collectors.toList());
+    }
+
+    public CabinetAndBusbarTree(SysMenu menu)
+    {
+        this.id = menu.getMenuId();
+        this.label = menu.getMenuName();
+
+    }
+
+
+    public String getCode() {
+        return code;
+    }
+
+    public void setCode(String code) {
+        this.code = code;
+    }
+
+    public Long getId()
+    {
+        return id;
+    }
+
+    public void setId(Long id)
+    {
+        this.id = id;
+    }
+
+    public String getLabel()
+    {
+        return label;
+    }
+
+    public void setLabel(String label)
+    {
+        this.label = label;
+    }
+
+    public List<CabinetAndBusbarTree> getChildren()
+    {
+        return children;
+    }
+
+    public void setChildren(List<CabinetAndBusbarTree> children)
+    {
+        this.children = children;
+    }
+    public void addChild(CabinetAndBusbarTree child) {
+        this.children.add(child);
+    }
+
+}
diff --git a/ruoyi-module/src/main/java/com/ruoyi/base/service/IBaseCabinetInfoService.java b/ruoyi-module/src/main/java/com/ruoyi/base/service/IBaseCabinetInfoService.java
index 6723c51..65d306f 100644
--- a/ruoyi-module/src/main/java/com/ruoyi/base/service/IBaseCabinetInfoService.java
+++ b/ruoyi-module/src/main/java/com/ruoyi/base/service/IBaseCabinetInfoService.java
@@ -3,6 +3,7 @@ package com.ruoyi.base.service;
 import java.util.List;
 import com.ruoyi.base.domain.BaseCabinetInfo;
 
+import com.ruoyi.base.domain.CabinetAndBusbarTree;
 import com.ruoyi.base.domain.baseCabinetInfoTreeSelects;
 
 /**
@@ -66,5 +67,5 @@ public interface IBaseCabinetInfoService
      *
      * @return 所有电柜信息信息
      */
-    List<baseCabinetInfoTreeSelects> selectCabinetInfoTreeList(BaseCabinetInfo baseCabinetInfo);
+    public List<baseCabinetInfoTreeSelects> selectCabinetInfoTreeList(BaseCabinetInfo baseCabinetInfo);
 }
diff --git a/ruoyi-module/src/main/java/com/ruoyi/base/service/ICabinetAndBusbarTreeService.java b/ruoyi-module/src/main/java/com/ruoyi/base/service/ICabinetAndBusbarTreeService.java
new file mode 100644
index 0000000..26055ff
--- /dev/null
+++ b/ruoyi-module/src/main/java/com/ruoyi/base/service/ICabinetAndBusbarTreeService.java
@@ -0,0 +1,30 @@
+
+package com.ruoyi.base.service;
+
+import com.ruoyi.base.domain.BaseCabinetInfo;
+import com.ruoyi.base.domain.CabinetAndBusbarTree;
+import com.ruoyi.base.domain.baseCabinetInfoTreeSelects;
+
+import java.util.List;
+
+
+/**
+ * 电柜信息Service接口
+ *
+ * @author ruoyi
+ * @date 2024-10-31
+ */
+
+public interface ICabinetAndBusbarTreeService
+{
+
+
+
+/**
+     * 查询电柜和母排信息下拉树结构
+     * 电柜信息的子节点是母排信息
+     * */
+
+    public List<CabinetAndBusbarTree> selectCabinetAndBusbarTree(BaseCabinetInfo baseCabinetInfo);
+}
+
diff --git a/ruoyi-module/src/main/java/com/ruoyi/base/service/impl/CabinetAndBusbarTreeServiceImpl.java b/ruoyi-module/src/main/java/com/ruoyi/base/service/impl/CabinetAndBusbarTreeServiceImpl.java
new file mode 100644
index 0000000..fc27448
--- /dev/null
+++ b/ruoyi-module/src/main/java/com/ruoyi/base/service/impl/CabinetAndBusbarTreeServiceImpl.java
@@ -0,0 +1,112 @@
+
+package com.ruoyi.base.service.impl;
+
+
+import java.util.ArrayList;
+import java.util.Iterator;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+import com.ruoyi.base.domain.*;
+
+
+import com.ruoyi.base.mapper.*;
+import com.ruoyi.base.service.ICabinetAndBusbarTreeService;
+import com.ruoyi.common.utils.StringUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+
+
+
+@Service
+public class CabinetAndBusbarTreeServiceImpl implements ICabinetAndBusbarTreeService {
+
+    @Autowired
+    private BaseCabinetInfoMapper baseCabinetInfoMapper;
+
+    @Autowired
+    private BaseBusbarInfoMapper baseBusbarInfoMapper;
+
+
+    /**
+     * 查询电柜信息和母排信息树列表
+     * 电柜信息的子节点是母排信息
+     *
+     * @return 所有电柜信息及下级母排信息
+     */
+    @Override
+    public List<CabinetAndBusbarTree> selectCabinetAndBusbarTree(BaseCabinetInfo baseCabinetInfo) {
+        // 创建一个空的List，用于存储查询结果
+        List<CabinetAndBusbarTree> tree = new ArrayList<>();
+        /*        BaseCabinetInfo allBaseCabinetInfo = new BaseCabinetInfo();*/
+        // 根据传入的baseCabinetInfo查询所有符合条件的BaseCabinetInfo
+        List<BaseCabinetInfo> cabinets = baseCabinetInfoMapper.selectBaseCabinetInfoList(baseCabinetInfo);
+
+        // 遍历查询结果
+        for (BaseCabinetInfo cabinet : cabinets) {
+            // 创建一个CabinetAndBusbarTree对象，用于存储查询结果
+            CabinetAndBusbarTree cabinetNode = new CabinetAndBusbarTree(cabinet);
+            // 创建一个BaseBusbarInfo对象，用于存储查询条件
+            BaseBusbarInfo allBaseBusbarInfo = new BaseBusbarInfo();
+            // 设置查询条件
+            allBaseBusbarInfo.setCabinetCode(cabinet.getCabinetCode());
+            // 根据查询条件查询所有符合条件的BaseBusbarInfo
+            List<BaseBusbarInfo> busbars = baseBusbarInfoMapper.selectBaseBusbarInfoList(allBaseBusbarInfo);
+            for (BaseBusbarInfo busbar : busbars){
+                cabinetNode.addChild(new CabinetAndBusbarTree(busbar));
+            }
+            // 将查询结果添加到tree中
+            tree.add(cabinetNode);
+        }
+        // 返回查询结果
+        return tree;
+    }
+
+
+/*
+
+    public List<CabinetAndBusbarTree> selectCabinetAndBusbarTree(BaseCabinetInfo baseCabinetInfo){
+        List<BaseCabinetInfo> baseCabinetInfos = baseCabinetInfoMapper.selectBaseCabinetInfoList(baseCabinetInfo);
+        return buildCabinetAndBusbarTreeSelects(baseCabinetInfos);
+    }
+
+    private List<CabinetAndBusbarTree> buildCabinetAndBusbarTreeSelects(List<BaseCabinetInfo> baseCabinetInfos) {
+        List<CabinetAndBusbarTree> cabinetAndBusbarTrees = buildCabinetAndBusbarTree(baseCabinetInfos);
+        return cabinetAndBusbarTrees.stream().map(CabinetAndBusbarTree::new).collect(Collectors.toList());
+    }
+
+    private List<CabinetAndBusbarTree> buildCabinetAndBusbarTree(List<BaseCabinetInfo> baseCabinetInfos) {
+        List<CabinetAndBusbarTree> cabinetAndBusbarTrees = new ArrayList<>();
+
+        for (BaseCabinetInfo baseCabinetInfo : baseCabinetInfos) {
+                recursionFn(baseCabinetInfos, baseCabinetInfo);
+                cabinetAndBusbarTrees.add(baseCabinetInfo);
+
+        }
+        if (cabinetAndBusbarTrees.isEmpty()) {
+            cabinetAndBusbarTrees = baseCabinetInfos;
+        }
+        return cabinetAndBusbarTrees;
+    }
+
+    private void recursionFn(List<BaseCabinetInfo> baseCabinetInfos, BaseCabinetInfo baseCabinetInfo) {
+        List<BaseBusbarInfo> baseBusbarInfos = getChildList(list, t);
+    }
+    private List<BaseBusbarInfo> getChildList(List<BaseBusbarInfo> list, BaseBusbarInfo t) {
+        List<BaseBusbarInfo> baseBusbarInfos = new ArrayList<>();
+        Iterator<BaseBusbarInfo> it = list.iterator();
+        while(it.hasNext()) {
+            BaseBusbarInfo n = (BaseBusbarInfo)it.next();
+            if(n.getParentObjId().longValue()==t.getObjId().longValue()) {
+                baseBusbarInfos.add(n);
+            }
+        }
+        return baseBusbarInfos;
+    }
+*/
+
+
+}
+
diff --git a/ruoyi-module/src/main/java/com/ruoyi/record/controller/RecordBusbarTempController.java b/ruoyi-module/src/main/java/com/ruoyi/record/controller/RecordBusbarTempController.java
index e69ce2f..a005c59 100644
--- a/ruoyi-module/src/main/java/com/ruoyi/record/controller/RecordBusbarTempController.java
+++ b/ruoyi-module/src/main/java/com/ruoyi/record/controller/RecordBusbarTempController.java
@@ -32,7 +32,7 @@ import com.ruoyi.common.core.page.TableDataInfo;
 
 /**
  * 母排测温信息Controller
- * 
+ *
  * @author zangch
  * @date 2024-11-07
  */
@@ -203,6 +203,7 @@ public class RecordBusbarTempController extends BaseController
             return ResponseEntity.notFound().build();
         }
     }
+    
 
 
 }
diff --git a/ruoyi-ui/src/api/record/recordBusbarTemp.js b/ruoyi-ui/src/api/record/recordBusbarTemp.js
index e9c0aaa..223a48c 100644
--- a/ruoyi-ui/src/api/record/recordBusbarTemp.js
+++ b/ruoyi-ui/src/api/record/recordBusbarTemp.js
@@ -57,3 +57,13 @@ export function getThermalPhoto(filePath) {
     method: 'get'
   })
 }
+
+//查询电柜和母排树型结构
+export function CabinetAndBusbarTree(data) {
+  return request({
+    url: '/base/baseCabinetInfo/CabinetAndBusbarTree',
+    method: 'post',
+    data: data
+
+  })
+}
diff --git a/ruoyi-ui/src/views/base/baseBusbarInfo/index.vue b/ruoyi-ui/src/views/base/baseBusbarInfo/index.vue
index cbac831..7f1c3a8 100644
--- a/ruoyi-ui/src/views/base/baseBusbarInfo/index.vue
+++ b/ruoyi-ui/src/views/base/baseBusbarInfo/index.vue
@@ -35,18 +35,18 @@
         <!-- 母排信息 -->
         <div>
           <el-form :model="queryParamsBusbar" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-            <el-form-item label="母排编号" prop="busbarCode">
+<!--            <el-form-item label="母排编号" prop="busbarCode">
               <el-input
                 v-model="queryParamsBusbar.busbarCode"
                 placeholder="请输入母排编号"
                 clearable
                 @keyup.enter.native="handleQueryBusbar"
               />
-            </el-form-item>
-            <el-form-item label="母排别名" prop="busbarAlias">
+            </el-form-item>-->
+            <el-form-item label="检测位置" prop="busbarAlias">
               <el-input
                 v-model="queryParamsBusbar.busbarAlias"
-                placeholder="请输入母排别名"
+                placeholder="请输入检测位置"
                 clearable
                 @keyup.enter.native="handleQueryBusbar"
               />
@@ -61,8 +61,8 @@
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="是否快检" prop="isChecked">
-              <el-select v-model="queryParamsBusbar.isChecked" placeholder="请选择是否快检" clearable>
+            <el-form-item label="是否检测" prop="isChecked">
+              <el-select v-model="queryParamsBusbar.isChecked" placeholder="请选择是否检测" clearable>
                 <el-option
                   v-for="dict in dict.type.busbar_is_checked"
                   :key="dict.value"
@@ -340,7 +340,7 @@
         <el-form-item label="是否检测" prop="isChecked">
           <el-radio-group v-model="formBusbar.isChecked">
             <el-radio
-              v-for="dict in dict.type.is_checked"
+              v-for="dict in dict.type.busbar_is_checked"
               :key="dict.value"
               :label="parseInt(dict.value)"
             >{{dict.label}}</el-radio>
@@ -479,7 +479,7 @@ import { getBaseCabinetInfoTree } from "@/api/base/baseCabinetInfo";
 
 export default {
   name: "BaseBusbarAndAlarmInfo",
-  dicts: ['is_pictures', 'is_rotate', 'cabinet_is_checked', 'busbar_is_flag', 'busbar_is_end', 'judg_method', 'is_flag', 'alarm_type'],
+  dicts: ['is_pictures', 'is_rotate', 'cabinet_is_checked',"busbar_is_checked", 'busbar_is_flag', 'busbar_is_end', 'judg_method', 'is_flag', 'alarm_type'],
   data() {
     return {
       selectedCabinetCode: null, // 保存当前选中的电柜编
diff --git a/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue b/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue
index 8fd0c38..a0fbd20 100644
--- a/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue
+++ b/ruoyi-ui/src/views/record/recordBusbarTemp/index.vue
@@ -1,5 +1,36 @@
 <template>
   <div class="app-container">
+    <el-row :gutter="28">
+      <el-col :span="5" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="filterBoxName"
+            placeholder="请输入电柜名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <div class="tree-container">
+            <el-tree
+              :data="InfoOptions"
+              :props="props"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              ref="tree"
+              node-key="id"
+              default-expand-all
+              highlight-current
+              @node-click="handleNodeClick"
+
+            />
+
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="19" :xs="24">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 <!--      <el-form-item label="标识" prop="objId">
         <el-input
@@ -264,6 +295,11 @@
       </el-table-column>
     </el-table>
 
+
+      </el-col>
+    </el-row>
+
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -370,17 +406,6 @@
     </el-dialog>
 
 
-<!--<el-dialog :title="photoTitle" :visible.sync="photoOpen" width="500px" append-to-body>
-<template>
-  <div class="image-container">
-    <img :src="visiblePhoto" alt="显示图片" />
-  </div>
-  <div class="image-container">
-    <img :src="thermalPhoto" alt="显示图片" />
-  </div>
-</template>
-</el-dialog>-->
-
 
   </div>
 </template>
@@ -392,14 +417,27 @@ import {
   delRecordBusbarTemp,
   addRecordBusbarTemp,
   updateRecordBusbarTemp,
-  getVisiblePhoto, getThermalPhoto
+  getVisiblePhoto, getThermalPhoto, CabinetAndBusbarTree
 } from "@/api/record/recordBusbarTemp";
+import {getBaseCabinetInfoTree} from "@/api/base/baseCabinetInfo";
 
 export default {
   name: "RecordBusbarTemp",
   dicts: ['record_busbar_temp_is_alarm', 'record_busbar_temp_is_flag'],
   data() {
     return {
+
+      //电柜信息下拉树选项
+      InfoOptions: [],
+      //左侧树结构筛选框
+      filterBoxName: undefined,
+      props:{
+        children: 'children',
+        label: 'label'
+        /*        label: (data) => `(编号${data.code}) ${data.label} `*/
+      },
+
+
       // 遮罩层
       loading: true,
       // 选中数组
@@ -468,6 +506,7 @@ export default {
   },
   created() {
     this.getList();
+    this.getTreeselect();
   },
   methods: {
     /** 查询母排测温信息列表 */
@@ -633,6 +672,24 @@ export default {
       }, `recordBusbarTemp_${new Date().getTime()}.xlsx`)
     },
 
+    /** 查询电柜下拉树结构 */
+    getTreeselect() {
+      CabinetAndBusbarTree({}).then(response => {
+        this.InfoOptions = response.data
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.busbarCode = data.code
+      this.handleQuery()
+    },
+
+
   }
 };
 </script>
diff --git a/ruoyi-ui/src/views/record/recordBusbarTemp/old.vue b/ruoyi-ui/src/views/record/recordBusbarTemp/old.vue
new file mode 100644
index 0000000..ba77f03
--- /dev/null
+++ b/ruoyi-ui/src/views/record/recordBusbarTemp/old.vue
@@ -0,0 +1,695 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <!--      <el-form-item label="标识" prop="objId">
+              <el-input
+                v-model="queryParams.objId"
+                placeholder="请输入标识"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>-->
+      <el-form-item label="母排编号" prop="busbarCode">
+        <el-input
+          v-model="queryParams.busbarCode"
+          placeholder="请输入母排编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="电柜编号" prop="cabinetCode">
+        <el-input
+          v-model="queryParams.cabinetCode"
+          placeholder="请输入电柜编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!--      <el-form-item label="最高温度" prop="tempMax">
+              <el-input
+                v-model="queryParams.tempMax"
+                placeholder="请输入最高温度"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="最低温度" prop="tempMin">
+              <el-input
+                v-model="queryParams.tempMin"
+                placeholder="请输入最低温度"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="平均温度" prop="tempAvg">
+              <el-input
+                v-model="queryParams.tempAvg"
+                placeholder="请输入平均温度"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="温差" prop="tempDiff">
+              <el-input
+                v-model="queryParams.tempDiff"
+                placeholder="请输入温差"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>-->
+      <el-form-item label="是否告警" prop="isAlarm">
+        <el-select v-model="queryParams.isAlarm" placeholder="请选择是否告警" clearable>
+          <el-option
+            v-for="dict in dict.type.record_busbar_temp_is_alarm"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <!--      <el-form-item label="图像路径" prop="filePath">
+              <el-input
+                v-model="queryParams.filePath"
+                placeholder="请输入图像路径"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>-->
+      <!--      <el-form-item label="是否启用" prop="isFlag">
+              <el-select v-model="queryParams.isFlag" placeholder="请选择是否启用" clearable>
+                <el-option
+                  v-for="dict in dict.type.record_busbar_temp_is_flag"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>-->
+      <!--      <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="queryParams.remark"
+                placeholder="请输入备注"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="创建人" prop="createdBy">
+              <el-input
+                v-model="queryParams.createdBy"
+                placeholder="请输入创建人"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="创建时间">
+              <el-date-picker
+                v-model="daterangeCreatedTime"
+                style="width: 240px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item label="更新人" prop="updatedBy">
+              <el-input
+                v-model="queryParams.updatedBy"
+                placeholder="请输入更新人"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="更新时间">
+              <el-date-picker
+                v-model="daterangeUpdatedTime"
+                style="width: 240px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>-->
+      <el-form-item label="记录时间">
+        <el-date-picker
+          v-model="daterangeRecordTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['record:recordBusbarTemp:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['record:recordBusbarTemp:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['record:recordBusbarTemp:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['record:recordBusbarTemp:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="recordBusbarTempList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <!--      <el-table-column label="标识" align="center" prop="objId" />-->
+      <el-table-column label="母排编号" align="center" prop="busbarCode" />
+      <el-table-column label="电柜编号" align="center" prop="cabinetCode" />
+      <el-table-column label="最高温度" align="center" prop="tempMax" />
+      <el-table-column label="最低温度" align="center" prop="tempMin" />
+      <el-table-column label="平均温度" align="center" prop="tempAvg" />
+      <el-table-column label="温差" align="center" prop="tempDiff" />
+      <el-table-column label="是否告警" align="center" prop="isAlarm">
+        <template slot-scope="scope">
+          <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">
+              <template slot-scope="scope">
+                <el-button type="primary" @click="showPhoto(scope.row)">显示图片</el-button>
+              </template>
+            </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"/>
+              </template>
+            </el-table-column>-->
+      <el-table-column label="备注" align="center" prop="remark" />
+      <!--      <el-table-column label="创建人" align="center" prop="createdBy" />
+            <el-table-column label="创建时间" align="center" prop="createdTime" width="180">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="更新人" align="center" prop="updatedBy" />
+            <el-table-column label="更新时间" align="center" prop="updatedTime" width="180">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d}') }}</span>
+              </template>
+            </el-table-column>-->
+      <el-table-column label="记录时间" align="center" prop="recordTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </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"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['record:recordBusbarTemp:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['record:recordBusbarTemp:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改母排测温信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="母排编号" prop="busbarCode">
+          <el-input v-model="form.busbarCode" placeholder="请输入母排编号" />
+        </el-form-item>
+        <el-form-item label="电柜编号" prop="cabinetCode">
+          <el-input v-model="form.cabinetCode" placeholder="请输入电柜编号" />
+        </el-form-item>
+        <el-form-item label="最高温度" prop="tempMax">
+          <el-input v-model="form.tempMax" placeholder="请输入最高温度" />
+        </el-form-item>
+        <el-form-item label="最低温度" prop="tempMin">
+          <el-input v-model="form.tempMin" placeholder="请输入最低温度" />
+        </el-form-item>
+        <el-form-item label="平均温度" prop="tempAvg">
+          <el-input v-model="form.tempAvg" placeholder="请输入平均温度" />
+        </el-form-item>
+        <el-form-item label="温差" prop="tempDiff">
+          <el-input v-model="form.tempDiff" placeholder="请输入温差" />
+        </el-form-item>
+        <el-form-item label="是否告警" prop="isAlarm">
+          <el-radio-group v-model="form.isAlarm">
+            <el-radio
+              v-for="dict in dict.type.record_busbar_temp_is_alarm"
+              :key="dict.value"
+              :label="parseInt(dict.value)"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="图像路径" prop="filePath">
+          <el-input v-model="form.filePath" placeholder="请输入图像名称(*.jpg)" />
+        </el-form-item>
+        <el-form-item label="是否启用" prop="isFlag">
+          <el-radio-group v-model="form.isFlag">
+            <el-radio
+              v-for="dict in dict.type.record_busbar_temp_is_flag"
+              :key="dict.value"
+              :label="parseInt(dict.value)"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <!--        <el-form-item label="创建人" prop="createdBy">
+                  <el-input v-model="form.createdBy" placeholder="请输入创建人" />
+                </el-form-item>
+                <el-form-item label="创建时间" prop="createdTime">
+                  <el-date-picker clearable
+                    v-model="form.createdTime"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                    placeholder="请选择创建时间">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="更新人" prop="updatedBy">
+                  <el-input v-model="form.updatedBy" placeholder="请输入更新人" />
+                </el-form-item>
+                <el-form-item label="更新时间" prop="updatedTime">
+                  <el-date-picker clearable
+                    v-model="form.updatedTime"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                    placeholder="请选择更新时间">
+                  </el-date-picker>
+                </el-form-item>-->
+        <el-form-item label="记录时间" prop="recordTime">
+          <el-date-picker clearable
+                          v-model="form.recordTime"
+                          type="datetime"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="请选择记录时间">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+
+
+    <!-- 图片显示对话框 -->
+    <!-- 通过增加key属性来确保每次图片URL更新时，Vue都会重新渲染图片元素，从而避免显示旧的缓存图片。 -->
+    <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>
+      </div>
+    </el-dialog>
+
+
+    <!--<el-dialog :title="photoTitle" :visible.sync="photoOpen" width="500px" append-to-body>
+    <template>
+      <div class="image-container">
+        <img :src="visiblePhoto" alt="显示图片" />
+      </div>
+      <div class="image-container">
+        <img :src="thermalPhoto" alt="显示图片" />
+      </div>
+    </template>
+    </el-dialog>-->
+
+
+  </div>
+</template>
+
+<script>
+import {
+  listRecordBusbarTemp,
+  getRecordBusbarTemp,
+  delRecordBusbarTemp,
+  addRecordBusbarTemp,
+  updateRecordBusbarTemp,
+  getVisiblePhoto, getThermalPhoto
+} from "@/api/record/recordBusbarTemp";
+
+export default {
+  name: "RecordBusbarTemp",
+  dicts: ['record_busbar_temp_is_alarm', 'record_busbar_temp_is_flag'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 母排测温信息表格数据
+      recordBusbarTempList: [],
+      // 弹出层标题
+      title: "",
+      // 图片显示标题
+      photoTitle: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否显示图片显示
+      photoOpen: false,
+      // 记录时间时间范围
+      daterangeCreatedTime: [],
+      // 记录时间时间范围
+      daterangeUpdatedTime: [],
+      // 记录时间时间范围
+      daterangeRecordTime: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        objId: null,
+        busbarCode: null,
+        cabinetCode: null,
+        tempMax: null,
+        tempMin: null,
+        tempAvg: null,
+        tempDiff: null,
+        isAlarm: null,
+        filePath: null,
+        isFlag: null,
+        remark: null,
+        createdBy: null,
+        createdTime: null,
+        updatedBy: null,
+        updatedTime: null,
+        recordTime: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        busbarCode: [
+          { required: true, message: "母排编号不能为空", trigger: "blur" }
+        ],
+        cabinetCode: [
+          { required: true, message: "电柜编号不能为空", trigger: "blur" }
+        ],
+      },
+      visiblePhoto: '',
+      thermalPhoto: '',
+      thermalPhotoKey: 0,//在图片对话框中使用，更新图片时增加key值，防止缓存
+      visiblePhotoKey: 0,//在图片对话框中使用，更新图片时增加key值，防止缓存
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询母排测温信息列表 */
+    getList() {
+      this.loading = true;
+      this.queryParams.params = {};
+      if (null != this.daterangeCreatedTime && '' != this.daterangeCreatedTime) {
+        this.queryParams.params["beginCreatedTime"] = this.daterangeCreatedTime[0];
+        this.queryParams.params["endCreatedTime"] = this.daterangeCreatedTime[1];
+      }
+      if (null != this.daterangeUpdatedTime && '' != this.daterangeUpdatedTime) {
+        this.queryParams.params["beginUpdatedTime"] = this.daterangeUpdatedTime[0];
+        this.queryParams.params["endUpdatedTime"] = this.daterangeUpdatedTime[1];
+      }
+      if (null != this.daterangeRecordTime && '' != this.daterangeRecordTime) {
+        this.queryParams.params["beginRecordTime"] = this.daterangeRecordTime[0];
+        this.queryParams.params["endRecordTime"] = this.daterangeRecordTime[1];
+      }
+      listRecordBusbarTemp(this.queryParams).then(response => {
+        this.recordBusbarTempList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+      this.photoOpen = false;
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        objId: null,
+        busbarCode: null,
+        cabinetCode: null,
+        tempMax: null,
+        tempMin: null,
+        tempAvg: null,
+        tempDiff: null,
+        isAlarm: null,
+        filePath: null,
+        isFlag: null,
+        remark: null,
+        createdBy: null,
+        createdTime: null,
+        updatedBy: null,
+        updatedTime: null,
+        recordTime: null,
+        photoOpen : false,
+        visiblePhoto : null,
+        thermalPhoto : null,
+        thermalResponse : null,
+        visibleResponse : null,
+      };
+      this.resetForm("form");
+      this.photoOpen = false;
+      this.visiblePhoto = null;
+      this.thermalPhoto = null;
+      this.thermalResponse = null;
+      this.visibleResponse = null;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.daterangeCreatedTime = [];
+      this.daterangeUpdatedTime = [];
+      this.daterangeRecordTime = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.objId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加母排测温信息";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const objId = row.objId || this.ids
+      getRecordBusbarTemp(objId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改母排测温信息";
+      });
+    },
+
+    /** 图片显示操作 */
+    showPhoto(row) {
+      this.reset();
+      if(row.filePath){
+        const filePath = row.filePath ;
+
+        // 清除缓存
+        this.thermalPhoto = null;
+        this.visiblePhoto = null;
+
+        //TODO:修改为实际接口地
+        /*        const thermalResponse = `/dev-api/record/recordBusbarTemp/getVisiblePhoto/${filePath}`;
+                this.thermalPhoto = thermalResponse;
+                const visibleResponse = `/dev-api/record/recordBusbarTemp/getThermalPhoto/${filePath}`;
+                this.visiblePhoto = visibleResponse;*/
+        const thermalResponse = `/prod-api/record/recordBusbarTemp/getVisiblePhoto/${filePath}`
+        this.thermalPhoto = thermalResponse;
+        const visibleResponse = `/prod-api/record/recordBusbarTemp/getThermalPhoto/${filePath}`
+        this.visiblePhoto = visibleResponse;
+
+        this.thermalPhotoKey++; // 更新 key 以重新渲染图片
+        this.visiblePhotoKey++; // 更新 key 以重新渲染图片
+
+        this.photoOpen = true;
+        this.photoTitle = row.filePath + "图片显示";
+      }else {
+        this.$modal.msgError("暂无图像路径");
+      }
+    },
+
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.objId != null) {
+            updateRecordBusbarTemp(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addRecordBusbarTemp(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const objIds = row.objId || this.ids;
+      this.$modal.confirm('是否确认删除母排测温信息编号为"' + objIds + '"的数据项？').then(function() {
+        return delRecordBusbarTemp(objIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('record/recordBusbarTemp/export', {
+        ...this.queryParams
+      }, `recordBusbarTemp_${new Date().getTime()}.xlsx`)
+    },
+
+  }
+};
+</script>
+<!--
+上面的图像是 2688x1520，下面的图像是 1920x1080。
+<style scoped>
+/* 定义一个图像容器类，用于设置图像的布局和样式 */
+.image-container {
+  width: 100%; /* 设置容器宽度为100%，以适应父元素 */
+  max-width: 1080px; /* 设置容器的最大宽度，防止图像在大屏幕上显示过大 */
+  margin: 0 auto; /* 居中显示容器 */
+  position: relative; /* 设置相对定位，以便于在容器内进行绝对定位 */
+  aspect-ratio: 16 / 9; /* 16:9 的比例，适合 1920x1080 的图像 */
+  margin-bottom: 10px; /* 减少容器之间的间距 */
+}
+
+/* 设置图像容器内的图像样式 */
+.image-container img {
+  width: 100%; /* 设置图像宽度为100%，充满容器 */
+  height: 100%; /* 设置图像高度为100%，充满容器 */
+  object-fit: contain; /* 使用 contain 以确保图像完整显示 */
+}
+
+/* 对话框内容区域的样式 */
+.dialog-content {
+  max-height: 80vh; /* 设置最大高度为视口高度的 80% */
+  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>
+