|
|
@@ -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>
|
heyang