Guoxiaohuan 5 years ago
parent
commit
87dd3609ca
1 changed files with 409 additions and 265 deletions
  1. 409 265
      src/views/appeal/index.vue

+ 409 - 265
src/views/appeal/index.vue

@@ -2,59 +2,71 @@
   <div>
     <Head :headText="headText"></Head>
     <div class="appealBox">
-       <div class="left">
-        <p class="title">可申诉的未知性策略</p>
+      <div class="left">
+        <div class="title">
+          <span>可申诉的未执行策略</span>
+          <span>{{data.length}}</span>
+        </div>
         <div class="execute" v-for="(item,index) in data" :key="index">
           <p class="date">{{item.date}}</p>
-          <div class="card" v-for="(item2,index) in item.info" :key='index+"i"' @click="dump">
-            <div class="time">执行时间:{{item2.time}}</div>
-            <div class="advice">
-              策略建议 <span>冷机台数</span> {{item2.ad1}}大{{item2.ad2}}小<span>冷机出水温度</span> {{item2.temp1}}°C
-            </div>
-            <div class="advice">
-              实际执行 <span>冷机台数</span> {{item2.re1}}大{{item2.re2}}小<span>冷机出水温度</span> {{item2.temp2}}°C
-            </div>
-            <div class="remark">
-              备注:{{item2.remark}}
-            </div>
-            <div class="btn">
-              <el-button size="mini">查看快照</el-button>
-              <el-button size="mini" type="primary">申诉</el-button>
+          <div class="card-box">
+            <div class="card" v-for="(item2,index) in item.info" :key="index+'i'" @click="dump">
+              <div class="time">执行时间:{{item2.time}}</div>
+              <div class="advice">
+                <span>策略建议</span>
+                <span>冷机台数</span>
+                <span>{{item2.ad1}}大{{item2.ad2}}小</span>
+                <span>冷机出水温度</span>
+                <span>{{item2.temp1}}°C</span>
+              </div>
+              <div class="advice">
+                <span>实际执行</span>
+                <span>冷机台数</span>
+                <span>{{item2.re1}}大{{item2.re2}}小</span>
+                <span>冷机出水温度</span>
+                <span>{{item2.temp2}}°C</span>
+              </div>
+              <div class="remark">备注:{{item2.remark}}</div>
+              <div class="btn">
+                <el-button size="mini">查看快照</el-button>
+                <el-button size="mini" type="primary">申诉</el-button>
+              </div>
             </div>
           </div>
         </div>
       </div>
       <div class="center">
-        <p class='title'>审核中</p>
-        <div class="card" v-for="(item,index) in review" :key='index+"w"' @click="dump">
+        <div class="title">
+          <span>审核中</span>
+          <span>{{review.length}}</span>
+        </div>
+        <div class="card" v-for="(item,index) in review" :key="index" @click="dump">
           <div class="time">
             {{item.date}} {{item.title}}
-            <span class="backout"><img src="../../assets/backout.png"/>撤销申请</span>
-          </div>
-          <div class="remark">
-            申请原因:{{item.reason}}
-          </div>
-          <div class="remark">
-            {{item.advice}}
+            <span class="backout">
+              <img src="../../assets/backout.png" />撤销申请
+            </span>
           </div>
+          <div class="remark">申请原因:{{item.reason}}</div>
+          <div class="remark">{{item.advice}}</div>
         </div>
       </div>
       <div class="right">
-        <p class="title">审核完成/超时未审核</p>
-         <div class="card" v-for="(item,index) in complete" :key='index+"w"' @click='dump'>
-          <div class="remark">审批时间:{{item.time}}
-            <span class="backout" v-if="item.sign==0">
-              <img src="../../assets/completed.png"/> 申诉成功
-            </span>
-            <span class="backout" v-if="item.sign==1">
-              <img src="../../assets/gray.png"/> 未申诉
-            </span>
-            <span class="backout" v-if="item.sign==2">
-              <img src="../../assets/error.png"/> 申诉失败
-            </span>
+        <div class="title">审核完成/超时未申诉</div>
+        <div class="card" v-for="(item,index) in complete" :key="index" @click="dump">
+          <div class="remark">
+            <div class="remark-left">审批时间:{{item.time}}</div>
+            <div class="remark-right">
+              <span :class="item.sign>5?'backout':(item.sign>2?'backout1':'backout2')">
+                <img :src="item.img" />
+                {{item.text}}
+              </span>
+            </div>
           </div>
           <div class="time">
-            {{item.date}} {{item.title}}
+            <span>{{item.time}}</span>
+            <span>{{item.date}}</span>
+            <span>{{item.title}}</span>
           </div>
         </div>
       </div>
@@ -67,275 +79,407 @@ export default {
   data() {
     return {
       headText: "申诉审核",
-      data:[
+      data: [
         {
-          date:'20202.01.13',
-          info:[
+          date: "20202.01.13",
+          info: [
+            {
+              time: "08:30",
+              ad1: 1,
+              ad2: 1,
+              temp1: "8.0",
+              re1: 1,
+              re2: 0,
+              temp2: "10.0",
+              remark: "冷水温度过高,没有及时按策略执行"
+            },
             {
-              time:'08:30',
-              ad1:1,
-              ad2:1,
-              temp1:'8.0',
-              re1:1,
-              re2:0,
-              temp2:'10.0',
-              remark:"冷水温度过高,没有及时按策略执行"    
+              time: "08:30",
+              ad1: 1,
+              ad2: 1,
+              temp1: "8.0",
+              re1: 1,
+              re2: 0,
+              temp2: "10.0",
+              remark: "冷水温度过高,没有及时按策略执行"
             },
             {
-              time:'08:30',
-              ad1:1,
-              ad2:1,
-              temp1:'8.0',
-              re1:1,
-              re2:0,
-              temp2:'10.0',
-              remark:"冷水温度过高,没有及时按策略执行" 
+              time: "08:30",
+              ad1: 1,
+              ad2: 1,
+              temp1: "8.0",
+              re1: 1,
+              re2: 0,
+              temp2: "10.0",
+              remark: "冷水温度过高,没有及时按策略执行"
             }
           ]
         },
-         {
-          date:'20202.01.13',
-          info:[
+        {
+          date: "20202.01.13",
+          info: [
             {
-              time:'08:30',
-              ad1:1,
-              ad2:1,
-              temp1:'8.0',
-              re1:1,
-              re2:0,
-              temp2:'10.0',
-              remark:"冷水温度过高,没有及时按策略执行"    
+              time: "08:30",
+              ad1: 1,
+              ad2: 1,
+              temp1: "8.0",
+              re1: 1,
+              re2: 0,
+              temp2: "10.0",
+              remark: "冷水温度过高,没有及时按策略执行"
             },
             {
-              time:'08:30',
-              ad1:1,
-              ad2:1,
-              temp1:'8.0',
-              re1:1,
-              re2:0,
-              temp2:'10.0',
-              remark:"冷水温度过高,没有及时按策略执行" 
+              time: "08:30",
+              ad1: 1,
+              ad2: 1,
+              temp1: "8.0",
+              re1: 1,
+              re2: 0,
+              temp2: "10.0",
+              remark: "冷水温度过高,没有及时按策略执行"
             }
           ]
-        },
+        }
       ],
-      review:[
+      review: [
         {
-          date:'2020.02.12 08:30',
-          title:"策略未执行申诉",
-          reason:'策略原因',
-          advice:'冷水温度过高,没有及时按策略执行'
-        },
-         {
-          date:'2020.02.12 08:30',
-          title:"策略未执行申诉",
-          reason:'策略原因',
-          advice:'冷水温度过高,没有及时按策略执行'
+          date: "2020.02.12 08:30",
+          title: "策略未执行申诉",
+          reason: "策略原因",
+          advice: "冷水温度过高,没有及时按策略执行"
         },
+        {
+          date: "2020.02.12 08:30",
+          title: "策略未执行申诉",
+          reason: "策略原因",
+          advice: "冷水温度过高,没有及时按策略执行"
+        }
       ],
-      complete:[
+      complete: [
         {
-          date:'2020.02.12 08:30',
-          title:"策略未执行申诉",
-          time:'2020.01.30',
-          sign:0
+          date: "08:30",
+          title: "策略未执行申诉",
+          time: "2020.01.30",
+          sign: 7,
+          img: require("../../assets/completed.png"),
+          text: "申诉成功"
         },
         {
-          date:'2020.02.12 08:30',
-          title:"策略未执行申诉",
-          time:'2020.01.30',
-          sign:1
+          date: "08:30",
+          title: "策略未执行申诉",
+          time: "2020.01.30",
+          sign: 5,
+          img: require("../../assets/gray.png"),
+          text: "未申诉"
         },
         {
-          date:'2020.02.12 08:30',
-          title:"策略未执行申诉",
-          time:'2020.01.30',
-          sign:2
-        },
+          date: "08:30",
+          title: "策略未执行申诉",
+          time: "2020.01.30",
+          sign: 2,
+          img: require("../../assets/error.png"),
+          text: "申诉失败"
+        }
       ]
     };
   },
   components: {
     Head
   },
-  methods:{
-    dump(){
-      this.$router.push('detail')
+  methods: {
+    dump() {
+      this.$router.push("detail");
     }
   }
 };
 </script>
 <style lang="scss" scoped>
-.appealBox{
+.appealBox {
   background: #fff;
   display: flex;
- .left{
-   width:30%;
-   margin-right:36px;
-   margin-left:24px;
-   .title{
-      font-size:16px;
-      font-family:MicrosoftYaHeiSemibold;
-      color:rgba(31,36,41,1);
-      line-height:21px;
-   }
-   .execute{
-     .date{
-      font-size:12px;
-      font-family:MicrosoftYaHei;
-      color:rgba(141,147,153,1);
-      line-height:16px;
-      text-align: center;
-     }
-     .card{
-        width:415px;
-        background:rgba(255,255,255,1);
-        border-radius:4px;
-        border:1px solid rgba(228,230,231,1);
-        padding: 20px;
-        margin-bottom:8px;
-        cursor: pointer;
-        .time{
-          font-size:16px;
-          font-family:PingFangSC-Regular,PingFang SC;
-          font-weight:400;
-          color:rgba(31,36,41,1);
-          line-height:22px;
-        }
-        .advice{
-          width:375px;
-          height:40px;
-          background:rgba(245,246,247,1);
-          border-radius:1px;
-          line-height:40px;
-          font-size: 14px;
-          margin-bottom: 4px;
-          margin-top: 12px;
-          padding-left: 16px;
-           span{
-            margin-left:36px;
-            color:#8D9399;
-            font-size: 12px;
-          }
-        }
-        .remark{
-          margin-top: 12px;
-          color: #646C73;
-          font-size: 12px;
-          margin-bottom:24px;
-        }
-        .btn{
-          float: right;
-          margin-right:20px;
-          .el-button{
-            width:80px;
-            height:28px;
+  justify-content: space-between;
+  padding: 20px;
+  .left {
+    flex: 1;
+    min-width: 420px;
+    .title {
+      display: flex;
+      align-items: center;
+      span:nth-of-type(1) {
+        height: 24px;
+        font-size: 16px;
+        font-family: MicrosoftYaHeiSemibold;
+        color: rgba(31, 36, 41, 1);
+        line-height: 21px;
+        margin-right: 8px;
+      }
+      span:nth-of-type(2) {
+        width: 18px;
+        height: 18px;
+        background: rgba(245, 74, 69, 1);
+        border-radius: 9px;
+        border: 1px solid rgba(255, 255, 255, 1);
+        font-size: 12px;
+        font-family: ArialMT;
+        color: rgba(255, 255, 255, 1);
+        line-height: 18px;
+        text-align: center;
+      }
+    }
+    .execute {
+      .date {
+        height: 18px;
+        font-size: 12px;
+        font-family: MicrosoftYaHei;
+        color: rgba(141, 147, 153, 1);
+        line-height: 16px;
+        margin: 0;
+        text-align: center;
+      }
+      .card-box {
+        height: 500px;
+        overflow: scroll;
+        margin-bottom: 24px;
+        .card {
+          background: rgba(255, 255, 255, 1);
+          border-radius: 4px;
+          border: 1px solid rgba(228, 230, 231, 1);
+          margin-top: 8px;
+          padding: 16px 20px;
+          .time {
+            height: 24px;
+            font-size: 16px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: rgba(31, 36, 41, 1);
+            line-height: 22px;
+            margin-bottom: 8px;
           }
-        } 
-     }
-      .card:after{
-            display:block;
-            clear:both;
-            content:"";
-            visibility:
-            hidden;height:0;
-        } 
-   }
- }
- .center{
-   width:30%;
-   margin-right:36px;
-   margin-bottom:16px;
-   .title{
-      font-size:16px;
-      font-family:MicrosoftYaHeiSemibold;
-      color:rgba(31,36,41,1);
-      line-height:21px;
-   }
-   .card{
-       width:415px;
-        background:rgba(255,255,255,1);
-        border-radius:4px;
-        border:1px solid rgba(228,230,231,1);
-        padding:16px 20px;
-        margin-bottom:8px;
-        cursor: pointer;
-        .time{
-          font-size:16px;
-          font-family:PingFangSC-Regular,PingFang SC;
-          font-weight:400;
-          color:rgba(31,36,41,1);
-          line-height:22px;
-          margin-top: 16px;
-          .backout{
-            font-size:14px;
-            font-family:MicrosoftYaHei;
-            color:rgba(0,145,255,1);
-            line-height:22px;
-            float: right;
-            margin-right:20px;
-            img{
+          .advice {
+            margin-top: 4px;
+            height: 40px;
+            background: rgba(245, 246, 247, 1);
+            border-radius: 1px;
+            display: flex;
+            justify-content: space-between;
+            padding-left: 16px;
+            padding-right: 20px;
+            align-items: center;
+            span {
+              font-family: MicrosoftYaHei;
+            }
+            span:nth-of-type(1),
+            span:nth-of-type(3),
+            span:nth-of-type(5) {
               height: 22px;
-              vertical-align: bottom;
-              margin-right: 2px;
+              font-size: 14px;
+              color: rgba(31, 36, 41, 1);
+            }
+            span:nth-of-type(2),
+            span:nth-of-type(4) {
+              height: 18px;
+              font-size: 12px;
+              color: rgba(141, 147, 153, 1);
+            }
+            span:nth-of-type(1) {
+              width: 56px;
+              margin-right: 36px;
+            }
+            span:nth-of-type(2) {
+              margin-right: 8px;
+            }
+            span:nth-of-type(3) {
+              margin-right: 24px;
+            }
+            span:nth-of-type(4) {
+              margin-right: 8px;
+            }
+          }
+          .remark {
+            height: 22px;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: rgba(100, 108, 115, 1);
+            line-height: 20px;
+            margin-top: 16px;
+            margin-bottom: 24px;
+          }
+          .btn {
+            display: flex;
+            justify-content: flex-end;
+            .el-button {
+              width: 80px;
+              height: 28px;
             }
           }
         }
-        .remark{
-          margin-top: 12px;
-          color: #646C73;
-          font-size: 12px;
-          margin-bottom:4px;
+      }
+
+      .card:after {
+        display: block;
+        clear: both;
+        content: "";
+        visibility: hidden;
+        height: 0;
+      }
+    }
+  }
+  .center {
+    flex: 1;
+    margin: 0 18px;
+    min-width: 410px;
+
+    .title {
+      display: flex;
+      margin-bottom: 16px;
+      span:nth-of-type(1) {
+        height: 24px;
+        font-size: 16px;
+        font-family: MicrosoftYaHeiSemibold;
+        color: rgba(31, 36, 41, 1);
+        line-height: 21px;
+        margin-right: 8px;
+      }
+      span:nth-of-type(2) {
+        text-align: center;
+        line-height: 18px;
+        width: 18px;
+        height: 18px;
+        background: rgba(245, 74, 69, 1);
+        border-radius: 9px;
+        border: 1px solid rgba(255, 255, 255, 1);
+        font-size: 12px;
+        font-family: ArialMT;
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+    .card {
+      margin-top: 8px;
+      cursor: pointer;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 4px;
+      border: 1px solid rgba(228, 230, 231, 1);
+      padding: 16px 20px;
+
+      .time {
+        margin-bottom: 6px;
+        height: 24px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(31, 36, 41, 1);
+        line-height: 22px;
+        .backout {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: rgba(0, 145, 255, 1);
+          float: right;
+          margin-right: 20px;
+          img {
+            height: 15px;
+            width: 18px;
+          }
         }
-   }
- }
- .right{
-      .title{
-      font-size:16px;
-      font-family:MicrosoftYaHeiSemibold;
-      color:rgba(31,36,41,1);
-      line-height:21px;
-   }
-   .card{
-       width:415px;
-        background:rgba(255,255,255,1);
-        border-radius:4px;
-        border:1px solid rgba(228,230,231,1);
-        padding:16px 20px;
-        margin-bottom:8px;
-        cursor: pointer;
-        .time{
-          font-size:16px;
-          font-family:PingFangSC-Regular,PingFang SC;
-          font-weight:400;
-          color:rgba(31,36,41,1);
-          line-height:22px;
+      }
+      .remark {
+        margin-top: 4px;
+        height: 22px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(100, 108, 115, 1);
+        line-height: 20px;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    min-width: 310px;
+    .title {
+      margin-bottom: 16px;
+    }
+    .card {
+      margin-bottom: 8px;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 4px;
+      border: 1px solid rgba(228, 230, 231, 1);
+      padding: 16px 20px;
+      .remark {
+        margin-bottom: 14px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .remark-left {
+          height: 22px;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: rgba(100, 108, 115, 1);
+          line-height: 20px;
         }
-        .remark{
-          margin-top: 16px;
-          color: #646C73;
-          font-size: 12px;
-          margin-bottom:16px;
-          .backout{
-            width:100px;
-            height:24px;
-            line-height: 24px;
-            background:rgba(217,245,214,1);
-            border-radius:12px;
-            float: right;
-            margin-right:20px;
-            font-size:14px;
-            font-family:MicrosoftYaHeiSemibold;
-            color:#34C724;
-            text-align: center;
-            img{
-              width:14px;
-              height: 14px;
-             vertical-align: middle;
-            }
+        .remark-right {
+          height: 24px;
+          height: 22px;
+          font-size: 14px;
+          font-family: MicrosoftYaHeiSemibold;
+          line-height: 22px;
+
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 4px;
+          }
+          .backout {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-left: 12px;
+            padding-right: 14px;
+            background: rgba(217, 245, 214, 1);
+            color: rgba(52, 199, 36, 1);
+            border-radius: 12px;
+          }
+          .backout1 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-left: 12px;
+            padding-right: 14px;
+            background: rgba(239, 240, 241, 1);
+            color: rgba(141, 147, 153, 1);
+            border-radius: 12px;
+          }
+          .backout2 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-left: 12px;
+            padding-right: 14px;
+            background: rgba(253, 227, 226, 1);
+            color: rgba(245, 78, 69, 1);
+            border-radius: 12px;
           }
         }
-   }
- }
+      }
+      .time {
+        padding: 8px 12px;
+        background: rgba(248, 249, 250, 1);
+        border-radius: 1px;
+        height: 22px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(31, 36, 41, 1);
+        line-height: 20px;
+        span:nth-of-type(2) {
+          margin-left: 10px;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
 }
 </style>