heyang hace 2 años
padre
commit
31f0c76795

+ 7 - 8
src/views/oneKeyOutfire/planExecuteRecord/planExecuteRecord.vue

@@ -49,22 +49,20 @@
         @pagination="getList"
       />
     </div>
-
+    <!--详情页面-->
+    <detail-page v-if="pageType==2" :pageData="pageData"></detail-page>
   </div>
 </template>
 
 <script>
 import {
-  RFIDtagAdd,
-  listDepartments,
   labCenterPersonList,
-  labCenterPersonDelete, subjectList, recognizerAnew, recognizerAdd
 } from '@/api/gasManage3_0/gasManage'
-import { getToken } from "@/utils/auth";
+import detailPage from "./planExecuteRecordDetail"
 export default {
   name: "Approval",
   components: {
-
+    detailPage
   },
   data() {
     return {
@@ -82,6 +80,7 @@ export default {
         tagCode:'',
       },
       total:0,
+      pageData:{},
       tableData:[],
     };
   },
@@ -91,9 +90,9 @@ export default {
 
         let _this=this;
         if(doType=='detail'){//详情
-
+          _this.pageType=2;
         }else if(doType=='back'){//返回
-
+          _this.pageType=1;
         }
       },
 

+ 333 - 0
src/views/oneKeyOutfire/planExecuteRecord/planExecuteRecordDetail.vue

@@ -0,0 +1,333 @@
+<!-预案执行记录详情-->
+<template>
+  <div class="addPage">
+    <div class="addPage_title">
+      <p>详情</p>
+      <P></P>
+      <p class="button-p reset-button-one" @click="backPage">返回</p>
+    </div>
+    <div class="addPage_b">
+      <div class="addPage_b_t">
+        <div class="addPage_b_t_l">
+          <div class="small_title">风险概况</div>
+          <div class="addPage_b_t_l_b">
+            <li><i>事故原因:</i><i>甲烷气体泄露</i></li>
+            <li><i>风险级别:</i><i>中风险</i></li>
+            <li><i>发生时间:</i><i>2021年10月12日 12:02:36 - 12:03:05</i></li>
+            <li><i>持续时间:</i><i>29秒</i></li>
+            <li><i>风险响应人员:</i><i>曹秀康、杨虎城、刘波</i></li>
+            <li><i>实验室内人员:</i><i>姓名、姓名、姓名、姓名、姓名、姓名、姓名、姓名、姓名、姓名、姓名、姓名</i></li>
+          </div>
+        </div>
+        <div class="addPage_b_t_c">
+          <div class="small_title">现场记录<i>(预案发生一个月后将自动清理)</i></div>
+          <div class="addPage_b_t_c_b">
+            <img src="@/assets/images/login-background.jpg">
+          </div>
+        </div>
+        <div class="addPage_b_t_r">
+          <div class="small_title">消息推送记录</div>
+          <div class="addPage_b_t_r_b">
+            <li><i>12:05:06</i><i>语音播报</i><i>甲烷监测实验室</i></li>
+            <li><i>12:05:06</i><i>语音播报</i><i>甲烷监测实验室</i></li>
+            <li><i>12:05:06</i><i>语音播报</i><i>甲烷监测实验室</i></li>
+            <li><i>12:05:06</i><i>语音播报</i><i>甲烷监测实验室</i></li>
+            <li><i>12:05:06</i><i>语音播报</i><i>甲烷监测实验室</i></li>
+            <li><i>12:05:06</i><i>语音播报</i><i>甲烷监测实验室</i></li>
+          </div>
+        </div>
+      </div>
+      <div class="addPage_b_b">
+        <div class="small_title">风险轨迹</div>
+        <div class="addPage_b_b_b">
+          <div class="time-box">
+            <ul  >
+              <li class="active" v-for="(item,index2) in planAxis" :key="index2">
+                <p>发生风险:{{item.riskPlanName}}</p>
+                <p>甲烷传感器浓度:<i>{{item.sensorJsonValue}}</i></p>
+                <p>时间:<i>{{item.createTime}}</i></p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "addPage",
+  props:{
+    pageData:{},
+  },
+  data() {
+    return {
+      pageType:1,
+      planAxis:[
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+        {
+          riskPlanName:'甲烷泄露(低风险)',
+          sensorJsonValue:'9',
+          createTime:'2021-12-10 14:00:01',
+        },
+      ]
+
+    };
+  },
+  methods: {
+    //返回
+    backPage(){
+      this.$parent.handleClick('','','back');
+      this.$parent.getList();
+    },
+
+  },
+  mounted() {
+
+
+  }
+
+};
+</script>
+<style>
+::-webkit-scrollbar {/*滚动条整体样式*/
+  width:5px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height:5px;
+}
+::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+  border-radius:3px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: none;
+}
+::-webkit-scrollbar-track {/*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  border-radius:3px;
+  background: none;
+}
+</style>
+
+<style scoped lang="scss">
+.addPage {
+  flex:1;
+  display: flex!important;
+  flex-direction: column;
+  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
+  border-radius:10px;
+  i{font-style: normal;}
+  li{list-style-type:none;}
+  /*顶部*/
+  .addPage_title{
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #E0E0E0;
+    padding-top:20px;
+    p:nth-child(1){
+      line-height:60px;
+      color: #0045AF;
+      font-size:16px;
+      font-weight: 400;
+      margin:0 12px 0 20px;
+    }
+    p:nth-child(2){
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #999999;
+      flex: 1;
+    }
+    p:nth-child(3){
+      margin-right:20px;
+    }
+  }
+  .addPage_b{
+    flex: 1;
+    display: flex!important;
+    flex-direction: column;
+    padding: 34px 80px 0;
+    box-sizing: border-box;
+    /*小标题*/
+    .small_title{
+      font-size: 16px;
+      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      color: #333333;
+      line-height: 24px;
+      margin-bottom: 24px;
+      >i{
+        color: #666;
+      }
+    }
+    .addPage_b_t{
+      display: flex;
+      justify-content: space-between;
+      .addPage_b_t_l{
+        width: 378px;
+        .addPage_b_t_l_b{
+          >li{
+            margin-bottom: 20px;
+            >i{
+              font-size: 14px;
+              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+              font-weight: 400;
+              color: #333333;
+              line-height: 14px;
+              display: inline-block;
+              vertical-align:top;
+            }
+            >i:nth-of-type(1){
+              color: #333333;
+            }
+            >i:nth-of-type(2){
+              width: 280px;
+              color: #666666;
+              line-height: 16px;
+            }
+          }
+        }
+      }
+      .addPage_b_t_c{
+        width: 380px;
+        .addPage_b_t_c_b{
+          width: 380px;
+          height: 222px;
+          >img{
+            width: 380px;
+            height: 222px;
+          }
+        }
+      }
+      .addPage_b_t_r{
+        .addPage_b_t_r_b{
+          width: 382px;
+          >li{
+            margin-bottom: 20px;
+            >i{
+              font-size: 14px;
+              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+              font-weight: 400;
+              color: #666666;
+              line-height: 14px;
+
+              display: inline-block;
+            }
+            >i:nth-of-type(1){
+              width: 92px;
+            }
+            >i:nth-of-type(2){
+              width: 104px;
+            }
+            >i:nth-of-type(3){
+              width: 182px;
+            }
+          }
+        }
+      }
+    }
+    .addPage_b_b{
+      margin-top: 84px;
+      .time-box{
+        width: 100%;
+        overflow-y: auto;
+        >ul{
+          position: relative;
+          height:255px;
+          white-space: nowrap;
+          display: inline-flex;
+          >li{
+            width:242px;
+            height: 98px;
+            float: left;
+            position: relative;
+            cursor: pointer;
+            >p{
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+              line-height: 14px;
+              margin-bottom: 14px;
+            }
+            >p:nth-of-type(1){
+
+            }
+            >p:nth-of-type(2){
+              color: #666666;
+              >i{
+                color: #FF3131;
+              }
+            }
+            >p:nth-of-type(3){
+              color: #666666;
+              >i{
+                color: #333333;
+              }
+            }
+          }
+          >li:after{
+            content: "";
+            width: 56px;
+            height: 56px;
+            border-radius: 28px;
+            background: #0183FA;
+            position: absolute;
+            left:50%;margin-left:-64px;
+            bottom: 0;
+            bottom:-60px;
+            z-index: 1;
+            border: 20px solid #fff;
+          }
+          >li:nth-child(2n):after{
+            bottom: auto;top:-60px;
+          }
+          >li:nth-child(2n){
+            margin-top:160px;
+          }
+        }
+        >ul:after{content: "";  display: block;background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;top:50%;}
+
+
+      }
+    }
+  }
+
+}
+</style>