大屏气瓶列表以及详情以及详情样式更改完成

zh-baseversion-web/src/api/bigWindow/getDevice.js

 /*
  * @Author: your name
  * @Date: 2022-02-23 15:28:07
- * @LastEditTime: 2024-07-18 15:13:55
+ * @LastEditTime: 2024-10-28 11:14:31
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
@@ -118,6 +118,19 @@ export function deviceUserList(query) {
     params: query,
   });
 }
+
+// 气瓶详情
+
+export function getqpDetail(query) {
+  return request({
+    url: '/supervise/user/getLpgGasBottleFilesBackToByCode',
+    method: "get",
+    params: query,
+  })
+}
+
+
+
 // 监控
 export function getVideo(query) {
   return request({

zh-baseversion-web/src/components/bigWindow/UserCenter.vue

@@ -104,7 +104,9 @@
       >
         <div class="table-wrapper">
           <div class="list-top">
-            <div class="title">设备列表</div>
+            <div class="title">
+              {{ safetyDeviceList.length > 0 ? "设备列表" : "气瓶列表" }}
+            </div>
 
             <div class="close" @click="close">
               <i
@@ -262,6 +264,7 @@ export default {
   // justify-content: space-between;
   margin-top: 2px;
   z-index: 9999;
+  overflow: hidden;
 
   & > div {
   }

zh-baseversion-web/src/components/bigWindow/UserCenterQiping.vue

 <template>
   <transition>
-    <div v-show="show" class="wrapper myCenter">
+    <div v-show="show" class="wrapper myCenter ">
       <div class="left">
         <!-- <div class="title-wrapper">
           <div class="title">{{ title }}报警器列表</div>

zh-baseversion-web/src/views/bigWindow/components/BottleInfo.vue

@@ -326,12 +326,20 @@
 import { getFiles } from "@/api/lpgRegulation/files";
 export default {
   name: "lpg-gasbottlefiles-info",
-  data() {
-    return {
+  props: {
     detailInfo: {
-        fImageList: [],
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
   },
-      detailOpen: false,
+  data() {
+    return {
+      // detailInfo: {
+      //   fImageList: [],
+      // },
+      // detailOpen: false,
     };
   },
   computed: {
@@ -341,14 +349,14 @@ export default {
   },
   created() {},
   methods: {
-    getDetailInfo(id) {
-      getFiles(id).then((res) => {
-        if (res.code == 200 && res.data) {
-          this.detailInfo = res.data;
-          this.detailOpen = true;
-        }
-      });
-    },
+    // getDetailInfo(id) {
+    //   getFiles(id).then((res) => {
+    //     if (res.code == 200 && res.data) {
+    //       this.detailInfo = res.data;
+    //       this.detailOpen = true;
+    //     }
+    //   });
+    // },
   },
 };
 </script>

zh-baseversion-web/src/views/bigWindow/components/Processes.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2024-10-25 15:11:18
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2024-10-28 11:25:48
+ * @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Processes.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <el-timeline>
     <el-timeline-item
       v-for="(record, index) in trackRecordList"
       :key="index"
-      :timestamp="record.operateDate">
-      <div v-if="record.processesName == '0'">
-        <div>气瓶充装</div>
-        <div style="margin: 15px 0px">{{ record.messageInfo }}</div>
-      </div>
+      :timestamp="record.time"
+    >
+      <!-- <div v-if="record.processesName == '0'"> -->
+        <div>{{record.title}}</div>
+        <div style="margin: 15px 0px">{{ record.message }}</div>
+      <!-- </div>
       <div v-if="record.processesName == '1'">
         <div>气瓶配送</div>
-        <div style="margin: 15px 0px">{{ record.messageInfo }}</div>
+        <div style="margin: 15px 0px">{{ record.message }}</div>
       </div>
       <div v-if="record.processesName == '2'">
         <div>气瓶回收</div>
-        <div style="margin: 15px 0px">{{ record.messageInfo }}</div>
-      </div>
+        <div style="margin: 15px 0px">{{ record.message }}</div>
+      </div> -->
     </el-timeline-item>
   </el-timeline>
 </template>
 
 <script>
-  import { bottleTrackRecordList } from "@/api/gasBottleTrack/bottleTrackRecord";
-  export default {
+// import { bottleTrackRecordList } from "@/api/gasBottleTrack/bottleTrackRecord";
+export default {
   name: "processes",
   props: {
-        bottleId: {
-          type:Number
-        }
+    trackRecordList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-    data(){
-      return{
-        trackRecordList: []
-      }
   },
-    created(){
-      this.getTrackRecordInfo();
+  data() {
+    return {
+      // trackRecordList: [],
+    };
   },
-    methods:{
-      getTrackRecordInfo(){
-        bottleTrackRecordList({bottleId : this.bottleId}).then(res =>{
-          if(res.code == 200){
-            this.trackRecordList = res.data;
-          }
-        })
-      }
-    }
-  }
+  created() {
+    // this.getTrackRecordInfo();
+  },
+  methods: {
+    // getTrackRecordInfo() {
+    //   bottleTrackRecordList({ bottleId: this.bottleId }).then((res) => {
+    //     if (res.code == 200) {
+    //       this.trackRecordList = res.data;
+    //     }
+    //   });
+    // },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

zh-baseversion-web/src/views/bigWindow/components/ViewBottleTrackInfo.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2024-10-25 15:11:18
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2024-10-25 17:36:21
+ * @LastEditTime: 2024-10-28 11:21:52
  * @FilePath: /zh-baseversion-web/src/views/bigWindow/components/ViewBottleTrackInfo.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -16,10 +16,10 @@
   >
     <el-tabs v-model="activeName">
       <el-tab-pane label="气瓶信息" name="first">
-        <BottleInfo />
+        <BottleInfo :detailInfo="itemData"/>
       </el-tab-pane>
       <el-tab-pane label="流转过程" name="second">
-        <Processes />
+        <Processes :trackRecordList="itemData.backToMessage"/>
       </el-tab-pane>
     </el-tabs>
   </el-dialog>
@@ -28,6 +28,7 @@
 <script>
 import BottleInfo from "./BottleInfo";
 import Processes from "./Processes";
+import { getqpDetail } from "@/api/bigWindow/getDevice.js";
 export default {
   name: "view-bottle-track-info",
   components: {
@@ -39,18 +40,30 @@ export default {
       detailOpen: false,
       activeName: "first",
       bottleId: null,
+      itemData:{
+        backToMessage:[],
+      },
     };
   },
-  watch:{
-    bottleId(newData){
-      console.log(newData)
-
-    }
+  watch: {
+    bottleId(newData) {
+      console.log(newData);
+      this.getqpDetail(newData);
+    },
   },
   methods: {
+    getqpDetail(code) {
+      getqpDetail({ code }).then((res) => {
+        console.log("气瓶详情", res);
+        this.itemData = res.data;
+
+      });
+    },
     handleClick(tab, event) {
       console.log(tab, event);
+    
       this.activeName = tab;
+
     },
   },
 };
@@ -58,10 +71,62 @@ export default {
 
 <style lang="scss">
 .big-window-dlg {
-  // .el-dialog {
-  //   background: rgba(2, 26, 51, 0.9);
-  //   border: 1px solid #127bd1;
-  // }
+  .el-dialog {
+    background: rgba(2, 26, 51, 0.9);
+    border: 1px solid #127bd1;
+    .el-dialog__header {
+      border-bottom: 1px solid #127bd1;
+    }
+    .el-dialog__body {
+      padding-top: 10px;
+    }
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #1890ff;
+      font-size: 22px;
+    }
+    .el-dialog__title {
+      color: #1890ff;
+    }
+  }
+  // background-color: #dfe4ed;
+  .el-tabs__nav-wrap::after {
+    // background-color: #127bd1;
+    // background-color: #606266;
+    opacity: 0;
+  }
+  .el-tabs__active-bar {
+    // background-color:#49d8ff;
+    // background-color:#49d8ff;
+  }
+  .el-tabs__item {
+    // 标签的字
+    color: #fff;
+    &.el-tabs__item.is-active {
+      // 选中的字的颜色
+      color: #1890ff;
+    }
+  }
+  // 文本内容的字的颜色
+  .el-form-item__label {
+    color: #fff;
+  }
+  // 右边的颜色
+  .el-form-item__content span {
+    color: #fff;
+  }
+
+  // 圆圈
+  .el-timeline-item__node {
+    // background: #1890ff;
+  }
+  // 左边框
+  .el-timeline-item__tail {
+    // border: 1px solid #1890ff;
+  }
+  // 字
+  .el-timeline-item__content {
+    color: #fff;
+  }
   // .el-dialog__title{
 
   // }