Merge branch '3.3.3-AnQuanJianCha' into web-v2-temp

src/views/oneKeyOutfire/planExecuteRecord/planExecuteRecordDetail.vue

@@ -42,22 +42,42 @@
       <div class="addPage_b_b">
         <div class="small_title">风险轨迹</div>
         <div class="addPage_b_b_b">
-          <div class="time-box">
-            <ul>
-              <li :class="(item.riskStatus==1||item.riskStatus==2)?'risk_trend':'hardware'" v-for="(item,index2) in planAxis" :key="index2">
-                <p v-if="(index2 !=0 && index2 !=planAxis.length-1)" :class="(item.riskStatus==1||item.riskStatus==2)?'dot':'dot_tow'"></p>
+          <div class="new-time-box">
+            <div class="for-planAxis" v-for="(item,index) in planAxis">
+              <div class="for-planAxis-min-box">
+                <div class="for-planAxis-top-box">
+                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">{{index == 0?item.riskPlanName+'('+item.riskPlanLevelName+')':item.riskPlanName}}</p>
+                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">{{item.sensorJsonName}}：<span>{{item.sensorJsonValue}}</span></p>
+                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">时间：{{item.createTime}}</p>
+                </div>
+                <div class="for-planAxis-center-box">
+                  <p :class="index == 0 || index == planAxis.length-1?'dot-p-A':'dot-p-B'"></p>
+                  <p class="line-p" v-if="index != planAxis.length-1"></p>
+                </div>
+                <div class="for-planAxis-bottom-box">
+                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">{{item.riskPlanName}}</p>
+                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">{{item.sensorJsonName}}：<span>{{item.sensorJsonValue}}</span></p>
+                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">时间：{{item.createTime}}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!--<div class="time-box">-->
+            <!--<ul>-->
+              <!--<li :class="(item.riskStatus==1||item.riskStatus==2)?'risk_trend':'hardware'" v-for="(item,index2) in planAxis" :key="index2">-->
+                <!--<p v-if="(index2 !=0 && index2 !=planAxis.length-1)" :class="(item.riskStatus==1||item.riskStatus==2)?'dot':'dot_tow'"></p>-->
 
-                <p v-if="(item.riskStatus==1||item.riskStatus==2) && item.riskPlanName !='风险解除'"> {{item.riskPlanName}} ({{item.riskPlanLevelName}})</p>
-                <p v-if="(item.riskStatus==1||item.riskStatus==2) && item.riskPlanName =='风险解除'"> {{item.riskPlanName}}</p>
+                <!--<p v-if="(item.riskStatus==1||item.riskStatus==2) && item.riskPlanName !='风险解除'"> {{item.riskPlanName}} ({{item.riskPlanLevelName}})</p>-->
+                <!--<p v-if="(item.riskStatus==1||item.riskStatus==2) && item.riskPlanName =='风险解除'"> {{item.riskPlanName}}</p>-->
 
-                <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">{{item.riskPlanName}}</p>
-                <p class="sensor_val">{{item.sensorJsonName}}：<i class="color: #FF3131;">{{item.sensorJsonValue}}</i></p>
-                <p class="sensor_timer">时间：<i>{{item.createTime}}</i></p>
+                <!--<p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">{{item.riskPlanName}}</p>-->
+                <!--<p class="sensor_val">{{item.sensorJsonName}}：<i class="color: #FF3131;">{{item.sensorJsonValue}}</i></p>-->
+                <!--<p class="sensor_timer">时间：<i>{{item.createTime}}</i></p>-->
 
-                <p v-if="index2 !=planAxis.length-1" :class="(item.riskStatus==1||item.riskStatus==2)?'ledgement':'ledgement_tow'"></p>
-              </li>
-            </ul>
-          </div>
+                <!--<p v-if="index2 !=planAxis.length-1" :class="(item.riskStatus==1||item.riskStatus==2)?'ledgement':'ledgement_tow'"></p>-->
+              <!--</li>-->
+            <!--</ul>-->
+          <!--</div>-->
         </div>
       </div>
     </div>
@@ -278,6 +298,88 @@ export default {
     }
     .addPage_b_b{
       margin-top: 84px;
+      .new-time-box{
+        height: 280px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
+        .for-planAxis{
+          display: inline-block;
+          font-weight:500;
+          overflow: hidden;
+          .for-planAxis-min-box{
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            .for-planAxis-top-box{
+              height:90px;
+              p{
+                margin-left:28px;
+                margin-right:40px;
+                font-size:14px;
+                line-height:30px;
+              }
+              p:nth-child(1){
+                color:#333;
+              }
+              p:nth-child(2){
+                color:#666;
+                span{
+                  color:#FF3131;
+                }
+              }
+              p:nth-child(3){
+                color:#666;
+              }
+            }
+            .for-planAxis-center-box{
+              display: flex;
+              .dot-p-A{
+                width:23px;
+                height:23px;
+                background: #fff;
+                border:2px solid #0183fa;
+                margin:17px;
+                border-radius:50%;
+              }
+              .dot-p-B{
+                width:17px;
+                height:17px;
+                margin:20px;
+                background: #0183fa;
+                border-radius:50%;
+              }
+              .line-p{
+                flex:1;
+                height:1px;
+                margin-top:28px;
+                background: #dedede;
+              }
+            }
+            .for-planAxis-bottom-box{
+              height:90px;
+              p{
+                margin-left:28px;
+                margin-right:40px;
+                font-size:14px;
+                line-height:30px;
+              }
+              p:nth-child(1){
+                color:#333;
+              }
+              p:nth-child(2){
+                color:#666;
+                span{
+                  color:#FF3131;
+                }
+              }
+              p:nth-child(3){
+                color:#666;
+              }
+            }
+          }
+        }
+      }
       .time-box{
         width: 100%;
         overflow-y: auto;
@@ -440,7 +542,6 @@ export default {
         }
 
 
-
       }
     }
   }