更新一下

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

@@ -402,7 +402,7 @@ export default {
   top: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 999999999;
+  z-index: 2001;
 }
 .table-wrapper {
   position: fixed;

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

@@ -67,10 +67,15 @@
               </template>
             </el-table-column>
 
-            <el-table-column prop="alarmTime" label="安装时间" width="140">
-              <template slot-scope="scope">
-                <div class="zzz" v-unValue>
+            <el-table-column prop="alarmTime" label="操作" width="140">
+              <template v-slot="scope">
+                <!-- <div class="zzz" v-unValue>
                   {{ scope.row.deviceInstallTime }}
+                </div> -->
+                <div class="detail">
+                  <el-button type="text" @click="goDetail(scope.row.code)"
+                    >详情</el-button
+                  >
                 </div>
               </template>
             </el-table-column>
@@ -88,6 +93,7 @@
           </div>
         </div>
       </div>
+      <ViewBottleTrackInfo ref="view" />
     </div>
   </transition>
 </template>
@@ -97,6 +103,7 @@
 // import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
 import { yhqlistDetectorInfo } from "@/api/detector/detectorInfo";
 import { deviceUserList } from "@/api/bigWindow/getDevice";
+import ViewBottleTrackInfo from "@/views/bigWindow/components/ViewBottleTrackInfo.vue";
 export default {
   props: {
     detcetorList: {
@@ -119,6 +126,9 @@ export default {
       type: Number,
     },
   },
+  components: {
+    ViewBottleTrackInfo,
+  },
   data() {
     return {
       // 动画效果的切换
@@ -170,6 +180,11 @@ export default {
         this.title
       );
     },
+
+    goDetail(code) {
+      this.$refs.view.bottleId = code;
+      this.$refs.view.detailOpen = true;
+    },
     // close() {
     //   // this.fade = "fade";
     //   this.$parent.otherCenterShow = false;
@@ -191,7 +206,7 @@ export default {
   // display: flex;
   // justify-content: space-between;
   // margin-top: 10px;
-  z-index: 9999;
+  z-index: 2001;
 
   & > div {
   }

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

+<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>
+      <div v-if="record.processesName == '1'">
+        <div>气瓶配送</div>
+        <div style="margin: 15px 0px">{{ record.messageInfo }}</div>
+      </div>
+      <div v-if="record.processesName == '2'">
+        <div>气瓶回收</div>
+        <div style="margin: 15px 0px">{{ record.messageInfo }}</div>
+      </div>
+    </el-timeline-item>
+  </el-timeline>
+</template>
+
+<script>
+  import { bottleTrackRecordList } from "@/api/gasBottleTrack/bottleTrackRecord";
+  export default {
+    name: "processes",
+    props: {
+        bottleId: {
+          type:Number
+        }
+    },
+    data(){
+      return{
+        trackRecordList: []
+      }
+    },
+    created(){
+      this.getTrackRecordInfo();
+    },
+    methods:{
+      getTrackRecordInfo(){
+        bottleTrackRecordList({bottleId : this.bottleId}).then(res =>{
+          if(res.code == 200){
+            this.trackRecordList = res.data;
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -228,7 +228,7 @@ export default {
   width: 840px;
   // height: 96px;
   // height: 56px;
-  z-index: 9999;
+  z-index: 2000;
   position: fixed;
   top: 90px;
   margin-left: calc((100% - 840px) / 2);

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

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2024-10-25 15:11:18
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2024-10-25 17:36:21
+ * @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
+-->
+<template>
+  <el-dialog
+    title="气瓶追溯查看"
+    :visible.sync="detailOpen"
+    width="900px"
+    append-to-body
+    class="big-window-dlg"
+  >
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="气瓶信息" name="first">
+        <BottleInfo />
+      </el-tab-pane>
+      <el-tab-pane label="流转过程" name="second">
+        <Processes />
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+</template>
+
+<script>
+import BottleInfo from "./BottleInfo";
+import Processes from "./Processes";
+export default {
+  name: "view-bottle-track-info",
+  components: {
+    BottleInfo,
+    Processes,
+  },
+  data() {
+    return {
+      detailOpen: false,
+      activeName: "first",
+      bottleId: null,
+    };
+  },
+  watch:{
+    bottleId(newData){
+      console.log(newData)
+
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+      this.activeName = tab;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.big-window-dlg {
+  // .el-dialog {
+  //   background: rgba(2, 26, 51, 0.9);
+  //   border: 1px solid #127bd1;
+  // }
+  // .el-dialog__title{
+
+  // }
+}
+</style>
+<style scoped lang="scss">
+.el-tab-pane {
+  margin-top: 20px;
+  height: 350px;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    /* 设置滚动条宽度 */
+    width: 4px;
+    /* 设置滚动条背景色 */
+    //background: black;
+  }
+
+  //滚动条轨道
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+
+  //滚动条滑块
+  &::-webkit-scrollbar-thumb {
+    background-color: rgb(147, 147, 153, 0.5);
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+}
+</style>