更新一下

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/BottleInfo.vue

+<template>
+  <el-form label-width="180px">
+    <el-row class="el-row-table">
+      <el-col :span="12">
+        <el-form-item label="燃气企业">
+          <span v-if="detailInfo.enterpriseName">{{
+            detailInfo.enterpriseName
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="生产(制造)单位">
+          <span v-if="detailInfo.makeInfo">{{ detailInfo.makeInfo }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="气瓶条码">
+          <span v-if="detailInfo.qrcode">{{ detailInfo.qrcode }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="产品编号">
+          <span v-if="detailInfo.equNo">{{ detailInfo.equNo }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="设备类型">
+          <span v-if="detailInfo.equType">{{ detailInfo.equType }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="充装介质">
+          <span v-if="detailInfo.medium">{{ detailInfo.medium }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="生产日期">
+          <span v-if="detailInfo.productDate">{{
+            detailInfo.productDate
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="登记证号">
+          <span v-if="detailInfo.regCode">{{ detailInfo.regCode }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="单位内编号">
+          <span v-if="detailInfo.selfId">{{ detailInfo.selfId }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="公称工作压力(MPa)">
+          <span v-if="detailInfo.pressure">{{ detailInfo.pressure }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="容积(L)">
+          <span v-if="detailInfo.volume">{{ detailInfo.volume }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="使用单位">
+          <span v-if="detailInfo.buildUser">{{ detailInfo.buildUser }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="上检日期">
+          <span v-if="detailInfo.pchkDate">{{ detailInfo.pchkDate }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="下检日期">
+          <span v-if="detailInfo.nchkDate">{{ detailInfo.nchkDate }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="生产日期">
+          <span v-if="detailInfo.productDate">{{
+            detailInfo.productDate
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="报废日期">
+          <span v-if="detailInfo.discardDate">{{
+            detailInfo.discardDate
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="安全评定日期">
+          <span v-if="detailInfo.safeJudgeDate">{{
+            detailInfo.safeJudgeDate
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="公称压力">
+          <span v-if="detailInfo.gpressure">{{ detailInfo.gpressure }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="水试验压力">
+          <span v-if="detailInfo.wpressure">{{ detailInfo.wpressure }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="标准重量">
+          <span v-if="detailInfo.selfWeight">{{ detailInfo.selfWeight }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="壁厚">
+          <span v-if="detailInfo.thickness">{{ detailInfo.thickness }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="气瓶许可证号">
+          <span v-if="detailInfo.permitNo">{{ detailInfo.permitNo }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="阀类型名称">
+          <span v-if="detailInfo.valveName">{{ detailInfo.valveName }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="钢瓶交付文件照片">
+          <el-image
+            :src="detailInfo.payImage"
+            :preview-src-list="[detailInfo.payImage]"
+            v-if="detailInfo.payImage != '' && detailInfo.payImage != null"
+            :z-index="5000"
+            style="width: 200px; height: 200px"
+          ></el-image>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="检验质量证明书照片">
+          <el-image
+            :src="detailInfo.batchImage"
+            :preview-src-list="[detailInfo.batchImage]"
+            v-if="detailInfo.batchImage != '' && detailInfo.batchImage != null"
+            :z-index="5000"
+            style="width: 200px; height: 200px"
+          ></el-image>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="制造监督检验证书照片">
+          <el-image
+            :src="detailInfo.deviceImage"
+            :preview-src-list="[detailInfo.deviceImage]"
+            v-if="
+              detailInfo.deviceImage != '' && detailInfo.deviceImage != null
+            "
+            :z-index="5000"
+            style="width: 200px; height: 200px"
+          ></el-image>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="检验报告照片">
+          <el-image
+            :src="detailInfo.checkImage"
+            :preview-src-list="[detailInfo.checkImage]"
+            v-if="detailInfo.checkImage != '' && detailInfo.checkImage != null"
+            :z-index="5000"
+            style="width: 200px; height: 200px"
+          ></el-image>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <!-- <el-col :span="12"> 2024-09-13 wh 去掉 界面不展示了
+            <el-form-item label="产品编号照片">
+              <el-image
+                :src="detailInfo.equNoImage"
+                :preview-src-list="[detailInfo.equNoImage]"
+                v-if="detailInfo.equNoImage != '' && detailInfo.equNoImage != null"
+                :z-index=5000
+                style="width: 200px;height: 200px;"
+                ></el-image>
+                <span v-else>-</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="单位内编号照片">
+              <el-image
+                :src="detailInfo.selfIdImage"
+                :preview-src-list="[detailInfo.selfIdImage]"
+                v-if="detailInfo.selfIdImage != '' && detailInfo.selfIdImage != null"
+                :z-index=5000
+                style="width: 200px;height: 200px;"
+                ></el-image>
+                <span v-else>-</span>
+            </el-form-item>
+          </el-col> -->
+      <el-col :span="12">
+        <el-form-item label="钢瓶信息照片">
+          <el-image
+            :src="detailInfo.botImage"
+            :preview-src-list="[detailInfo.botImage]"
+            v-if="detailInfo.botImage != '' && detailInfo.botImage != null"
+            :z-index="5000"
+            style="width: 200px; height: 200px"
+          ></el-image>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="钢瓶规格名称">
+          <span v-if="detailInfo.botSpecName">{{
+            detailInfo.botSpecName
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="钢瓶型号">
+          <span v-if="detailInfo.bottleType">{{ detailInfo.bottleType }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="已检验次数">
+          <span v-if="detailInfo.inspectedTimes">{{
+            detailInfo.inspectedTimes
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <!-- <el-col :span="12"> 2024-09-13 wh 去掉，感觉监管不需要
+            <el-form-item label="是否专用">
+              <span v-if="detailInfo.isSpecialized">{{detailInfo.isSpecialized}}</span>
+              <span v-else>-</span>
+            </el-form-item>
+          </el-col> -->
+      <el-col :span="12">
+        <el-form-item label="阀厂家">
+          <span v-if="detailInfo.valveManuFacturer">{{
+            detailInfo.valveManuFacturer
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="检验标牌">
+          <span v-if="detailInfo.inspectionLabel">{{
+            detailInfo.inspectionLabel
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="第三方标签">
+          <span v-if="detailInfo.thirdPartyLabel">{{
+            detailInfo.thirdPartyLabel
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="孔洞码">
+          <span v-if="detailInfo.holeCode">{{ detailInfo.holeCode }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="存储类型">
+          <span v-if="detailInfo.bottleStorageType">{{
+            detailInfo.bottleStorageType
+          }}</span>
+          <span v-else>-</span>
+        </el-form-item>
+      </el-col>
+      <!-- <el-col :span="12"> 2024-09-13 wh 去掉，感觉监管不需要
+            <el-form-item label="钢瓶状态">
+              <span v-if="detailInfo.state">{{ detailInfo.state}}</span>
+              <span v-else>-</span>
+            </el-form-item>
+          </el-col> -->
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import { getFiles } from "@/api/lpgRegulation/files";
+export default {
+  name: "lpg-gasbottlefiles-info",
+  data() {
+    return {
+      detailInfo: {
+        fImageList: [],
+      },
+      detailOpen: false,
+    };
+  },
+  computed: {
+    fImageListSplitAfter() {
+      return this.detailInfo.fImageList.split(",");
+    },
+  },
+  created() {},
+  methods: {
+    getDetailInfo(id) {
+      getFiles(id).then((res) => {
+        if (res.code == 200 && res.data) {
+          this.detailInfo = res.data;
+          this.detailOpen = true;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

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>