|
@@ -12,10 +12,10 @@
|
|
|
<div class="small_title">风险概况</div>
|
|
|
<div class="addPage_b_t_l_b" v-if="form">
|
|
|
<li><i>事故原因:</i><i>{{form.riskReason?form.riskReason:''}}</i></li>
|
|
|
- <li v-if="form.riskReason==1"><i>风险级别:</i><i>低风险</i></li>
|
|
|
- <li v-if="form.riskReason==2"><i>风险级别:</i><i>中风险</i></li>
|
|
|
- <li v-if="form.riskReason==3"><i>风险级别:</i><i>较高风险</i></li>
|
|
|
- <li v-if="form.riskReason==4"><i>风险级别:</i><i>高风险</i></li>
|
|
|
+ <li v-if="form.riskLevel==1"><i>风险级别:</i><i>低风险</i></li>
|
|
|
+ <li v-if="form.riskLevel==2"><i>风险级别:</i><i>中风险</i></li>
|
|
|
+ <li v-if="form.riskLevel==3"><i>风险级别:</i><i>较高风险</i></li>
|
|
|
+ <li v-if="form.riskLevel==4"><i>风险级别:</i><i>高风险</i></li>
|
|
|
<li><i>发生时间:</i><i>{{form.startDate?form.startDate:''}} - {{form.endDate?form.endDate:''}}</i></li>
|
|
|
<li><i>持续时间:</i><i>{{form.riskDuration?form.riskDuration:''}}秒</i></li>
|
|
|
<li><i>风险响应人员:</i><i>{{form.handledPerson?form.handledPerson:'-'}}</i></li>
|
|
@@ -43,8 +43,8 @@
|
|
|
<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">
|
|
|
+ <ul>
|
|
|
+ <li :class="item.riskStatus==1||item.riskStatus==2?'risk_trend':'hardware'" v-for="(item,index2) in planAxis" :key="index2">
|
|
|
<p>发生风险:{{item.riskPlanName}}</p>
|
|
|
<p>{{item.sensorJsonName}}:<i>{{item.sensorJsonValue}}</i></p>
|
|
|
<p>时间:<i>{{item.createTime}}</i></p>
|
|
@@ -309,27 +309,72 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- >li:after{
|
|
|
+ >li:nth-child(2n){
|
|
|
+ margin-top:160px;
|
|
|
+ }
|
|
|
+ >li:before{
|
|
|
content: "";
|
|
|
width: 56px;
|
|
|
height: 56px;
|
|
|
border-radius: 28px;
|
|
|
background: #0183FA;
|
|
|
position: absolute;
|
|
|
- left:50%;margin-left:-64px;
|
|
|
+ left:20%;
|
|
|
+ margin-left:-64px;
|
|
|
bottom: 0;
|
|
|
bottom:-60px;
|
|
|
z-index: 1;
|
|
|
border: 20px solid #fff;
|
|
|
}
|
|
|
- >li:nth-child(2n):after{
|
|
|
+ >li:nth-child(2n):before{
|
|
|
bottom: auto;top:-60px;
|
|
|
}
|
|
|
- >li:nth-child(2n){
|
|
|
+ /*风险趋势*/
|
|
|
+ .risk_trend{
|
|
|
+
|
|
|
+ }
|
|
|
+ /*硬件执行动作*/
|
|
|
+ .hardware{
|
|
|
margin-top:160px;
|
|
|
}
|
|
|
+ >li:after{
|
|
|
+ content: ""; display: block; background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;bottom:-32%;;
|
|
|
+ }
|
|
|
+ >li:nth-child(2n):after{
|
|
|
+ top:-32%;
|
|
|
+ }
|
|
|
+ >li:last-child:after{
|
|
|
+ content: ""; display: block; background: none;height: 1px;width: 100%;position: absolute;left:0;bottom:-32%;;
|
|
|
+ }
|
|
|
+ >li:first-child:before{
|
|
|
+ content: "";
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ border: 2px solid #0183FA;
|
|
|
+ border-radius: 28px;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left:20%;
|
|
|
+ margin-left:-64px;
|
|
|
+ bottom:-44px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ >li:last-child:before{
|
|
|
+ content: "";
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ border: 2px solid #0183FA;
|
|
|
+ border-radius: 28px;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left:20%;
|
|
|
+ margin-left:-64px;
|
|
|
+ top:-44px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
- >ul:after{content: ""; display: block;background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;top:50%;}
|
|
|
+
|
|
|
|
|
|
|
|
|
}
|