update

src/components/uploadImg.vue

@@ -1,174 +1,187 @@
 <template>
-    <div>
-        <div class='detail-enclosure-img'>
-            <div>
-                <div class='img-box' v-for='(image,ind) in distinctFile(souseArr)' :key='ind'>
-                    <zoom-image :url='`/image-service/common/image_get?systemId=saas&secret=46f869eea8b31d14&key=${image}`'></zoom-image>
-                    <i class='el-icon-delete' @click='handleRemove(image,ind)'></i>
-                </div>
-            </div>
-            <div v-if='loading' class='img-bg'>
-                <i class='el-icon-loading'></i>
-            </div>
-            <el-upload :on-change='getImage' action='string' list-type='picture-card' accept='image/*' capture='camera'>
-                <img src='../assets/addimg.png' alt />
-            </el-upload>
+  <div>
+    <div class="detail-enclosure-img">
+      <div>
+        <div class="img-box" v-for="(image,ind) in distinctFile(souseArr)" :key="ind">
+          <zoom-image
+            :url="`/image-service/common/image_get?systemId=saas&secret=46f869eea8b31d14&key=${image}`"
+          ></zoom-image>
+          <i class="el-icon-delete" @click="handleRemove(image,ind)"></i>
         </div>
+      </div>
+      <div v-if="loading" class="img-bg">
+        <i class="el-icon-loading"></i>
+      </div>
+      <el-upload
+        :on-change="getImage"
+        action="string"
+        list-type="picture-card"
+        accept="image/*"
+        capture="camera"
+      >
+        <img src="../assets/addimg.png" alt />
+      </el-upload>
     </div>
+  </div>
 </template>
 <script>
-import zoomImage from './zoomImage'
-import { deleteFile } from '@/api/appeal/appeal.js'
+import zoomImage from "./zoomImage";
+import { deleteFile } from "@/api/appeal/appeal.js";
 export default {
-    data() {
-        return {
-            showTrue: true,
-            loading: false,
-            tempArr: []
-        }
+  data() {
+    return {
+      showTrue: true,
+      loading: false,
+      tempArr: []
+    };
+  },
+  components: { zoomImage },
+  props: ["souseArr"],
+  mounted() {},
+  methods: {
+    distinctFile(a) {
+      return Array.from(new Set(a));
     },
-    components: { zoomImage },
-    props: ['souseArr',],
-    mounted() {},
-    methods: {
-        distinctFile(a) {
-            return Array.from(new Set(a))
-        },
-        getImage(event) {
-            this.loading = true
-            this.fileName = new Date().getTime() + '_' + event.name
-            let url = '/image-service/common/image_upload?systemId=saas&secret=46f869eea8b31d14&key=' + this.fileName
-            let _this = this
-            let reader = new FileReader()
-            reader.readAsArrayBuffer(event.raw)
-            reader.onload = function(e) {
-                var xhr = new XMLHttpRequest()
-                xhr.open('POST', url)
-                xhr.send(reader.result)
-                xhr.onreadystatechange = function() {
-                    if (xhr.readyState == 4) {
-                        if (xhr.status == 200) {
-                            let src = _this.getPreviewSrc(event.raw)
-                            _this.tempArr.push(_this.fileName)
-                            _this.souseArr.push(_this.fileName)
-                            _this.$emit('setPic', this.souseArr)
-                            _this.loading = false
-                            _this.showTrue = true
-                        }
-                    }
-                }
+    getImage(event) {
+      this.loading = true;
+      this.fileName = new Date().getTime() + "_" + event.name;
+      let url =
+        "/image-service/common/image_upload?systemId=saas&secret=46f869eea8b31d14&key=" +
+        this.fileName;
+      let _this = this;
+      let reader = new FileReader();
+      reader.readAsArrayBuffer(event.raw);
+      reader.onload = function(e) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", url);
+        xhr.send(reader.result);
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+              let src = _this.getPreviewSrc(event.raw);
+              _this.tempArr.push(_this.fileName);
+              _this.souseArr.push(_this.fileName);
+              _this.$emit("setPic", this.souseArr);
+              _this.loading = false;
+              _this.showTrue = true;
             }
-        },
-        getPreviewSrc(file) {
-            if ('URL' in window) {
-                var src = window.URL.createObjectURL(file)
-                return src
+          }
+        };
+      };
+    },
+    getPreviewSrc(file) {
+      if ("URL" in window) {
+        var src = window.URL.createObjectURL(file);
+        return src;
+      }
+    },
+    handleRemove(file, ind) {
+      this.$confirm("您确认删除此图片吗?", "确认删除", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "text",
+        center: true,
+        showClose: false,
+        closeOnClickModal: false
+      })
+        .then(() => {
+          let fileParams = {
+            postParams: {
+              keys: [file]
+            }
+          };
+          deleteFile(fileParams).then(res => {
+            this.souseArr.splice(ind, 1);
+            this.$emit("setPic", this.souseArr);
+            if (res.result == "success") {
+              this.$message({
+                type: "success",
+                message: "删除成功!"
+              });
+            } else {
+              this.$message({
+                type: "error",
+                message: "删除失败"
+              });
             }
-        },
-        handleRemove(file, ind) {
-            this.$confirm('您确认删除此图片吗?', '确认删除', {
-                confirmButtonText: '删除',
-                cancelButtonText: '取消',
-                type: 'text',
-                center: true,
-                showClose: false,
-                closeOnClickModal: false
-            })
-                .then(() => {
-                    let fileParams = {
-                        postParams: {
-                            keys: [file]
-                        }
-                    }
-                    deleteFile(fileParams).then(res => {
-                        this.souseArr.splice(ind, 1)
-                        this.$emit('setPic', this.souseArr)
-                        if (res.result == 'success') {
-                            this.$message({
-                                type: 'success',
-                                message: '删除成功!'
-                            })
-                        } else {
-                            this.$message({
-                                type: 'error',
-                                message: '删除失败'
-                            })
-                        }
-                    })
-                })
-                .catch(() => {
-                    this.$message({
-                        type: 'info',
-                        message: '已取消删除'
-                    })
-                })
-        }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+        });
     }
-}
+  }
+};
 </script>
 <style lang="scss" scoped>
 .detail-enclosure-img {
-    display: flex;
-    flex-wrap: wrap;
-    .img-box {
-        width: 80px;
-        height: 80px;
-        display: inline-block;
-        margin-right: 15px;
-        margin-bottom: 15px;
-        border-radius: 12px;
-        position: relative;
-        .bigImg {
-            width: 80px;
-            height: 80px;
-        }
-        i {
-            border-radius: 3px;
-            cursor: pointer;
-        }
-        .el-icon-delete {
-            font-size: 20px;
-            position: absolute;
-            top: 0;
-            right: 0;
-            background: #ffffff;
-        }
+  width: 112px;
+  height: 112px;
+  display: flex;
+  flex-wrap: wrap;
+  .img-box {
+    width: 112px;
+    height: 112px;
+    display: inline-block;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    border-radius: 12px;
+    position: relative;
+    .bigImg {
+      width: 112px;
+      height: 112px;
+    }
+    i {
+      border-radius: 3px;
+      cursor: pointer;
     }
-    .img-bg {
-        width: 78px;
-        height: 78px;
-        line-height: 78px;
-        text-align: center;
-        display: inline-block;
-        i {
-            font-size: 40px;
-        }
+    .el-icon-delete {
+      font-size: 20px;
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: #ffffff;
     }
-    div {
-        display: inline-block;
+  }
+  .img-bg {
+    width: 112px;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    display: inline-block;
+    i {
+      font-size: 40px;
     }
+  }
+  div {
+    display: inline-block;
+  }
 }
 </style>
 <style lang="scss">
 .detail-enclosure-img {
-    .el-upload--picture-card {
-        width: 80px;
-        height: 80px;
-        background: #ececf0;
-        position: relative;
-        .el-icon-plus {
-            padding-bottom: 20px;
-            position: absolute;
-            top: 80px;
-            left: 80px;
-        }
-        img {
-            width: 100%;
-            height: 100%;
-        }
+  .el-upload--picture-card {
+    width: 112px;
+    height: 112px;
+    background: #ececf0;
+    position: relative;
+    box-sizing: content-box;
+    .el-icon-plus {
+      padding-bottom: 20px;
+      position: absolute;
+      top: 112px;
+      left: 112px;
     }
-    .is-uploading {
-        display: none;
+    img {
+      width: 112px;
+      height: 112px;
     }
+  }
+  .is-uploading {
+    display: none;
+  }
 }
 </style>

src/router/index.js

@@ -3,7 +3,8 @@ import Router from 'vue-router'
 const Main = () => import('@/views/main/index')
 const Strategy = () => import('@/views/strategy/index')
 const Appeal = () => import('@/views/appeal/index')
-const AppealDeatil = () =>import('@/views//appeal/detail')
+const AppealDetail = () => import('@/views/appeal/appealDetail')
+const Audit = () => import('@/views/audit/index')
 const DoBusiness = () => import('@/views/doBusiness/index')
 const Evaluate = () => import('@/views/evaluate/index')
 const EvTwoLevelMenu = () => import('@/views/evaluate/evTwoLevelMenu')
@@ -32,16 +33,21 @@ export default new Router({
       component: Appeal
     },
     {
-      path:'/detail',
-      name:"appealDeatil",
-      component:AppealDeatil
+      path: '/appeal/appealDetail',
+      name: 'appealDetail',
+      component: AppealDetail
+    },
+    {
+      path: '/audit',
+      name: 'audit',
+      component: Audit
     },
     {
       path: '/doBusiness',
       name: 'doBusiness',
       component: DoBusiness
     },
-     {
+    {
       path: '/evaluate',
       name: 'evaluate',
       component: Evaluate

src/views/appeal/appealDetail.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <Head :headText="headText"></Head>
+    <div class="detailContainer">
+      <div class="title">未执行申诉单</div>
+      <div class="nav">
+        <span>项目名称：大连万达广场</span>
+        <span>申请人：张三</span>
+        <span>申请时间：2020.01.13</span>
+      </div>
+      <div class="cont1">申诉未执行指令：2020.01.13 14:30 推送策略未执行</div>
+      <div class="cont2">
+        <audit-table></audit-table>
+      </div>
+      <div class="cont3">
+        <span>策略评价</span>
+        <span>执行策略的评价，判断项目执行策略的好坏，执行策略的评价，判断项目执行策略的好最多50个字</span>
+      </div>
+      <div class="cont4">
+        <span>申请原因</span>
+        <span>
+          <el-select size="mini" v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </span>
+        <span>
+          <textarea placeholder="填写申请原因"></textarea>
+        </span>
+      </div>
+      <div class="foot">
+        <upload-img></upload-img>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Head from "../main/index";
+import AuditTable from "../audit/auditTable";
+import UploadImg from "../../components/uploadImg";
+export default {
+  data() {
+    return {
+      headText: "申诉审核",
+      options: [
+        {
+          value: "选项1",
+          label: "策略原因"
+        },
+        {
+          value: "选项2",
+          label: "策略原因"
+        },
+        {
+          value: "选项3",
+          label: "策略原因"
+        }
+      ],
+      value: ""
+    };
+  },
+  components: {
+    Head,
+    AuditTable,
+    UploadImg
+  },
+  methods: {}
+};
+</script>
+<style lang="scss" scoped>
+.detailContainer {
+  max-width: 762px;
+  width: 60%;
+  margin: 0 auto;
+  padding-top: 36px;
+  padding-bottom: 24px;
+  .title {
+    height: 32px;
+    font-size: 24px;
+    font-family: MicrosoftYaHeiSemibold;
+    color: rgba(31, 36, 41, 1);
+    line-height: 32px;
+    text-align: center;
+  }
+  .nav {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 40px;
+    margin-bottom: 12px;
+    span {
+      height: 22px;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: rgba(31, 36, 41, 1);
+      line-height: 19px;
+    }
+  }
+  .cont1 {
+    height: 22px;
+    font-size: 14px;
+    font-family: MicrosoftYaHei;
+    color: rgba(31, 36, 41, 1);
+    line-height: 19px;
+    margin-bottom: 16px;
+  }
+  .cont2 {
+    margin-bottom: 24px;
+    height: 180px;
+  }
+  .cont3 {
+    margin-bottom: 24px;
+    span:nth-of-type(1) {
+      height: 24px;
+      font-size: 16px;
+      font-family: MicrosoftYaHeiSemibold;
+      color: rgba(31, 36, 41, 1);
+      line-height: 21px;
+      margin-bottom: 8px;
+    }
+    span:nth-of-type(2) {
+      height: 22px;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: rgba(100, 108, 115, 1);
+      line-height: 19px;
+    }
+  }
+  .cont4 {
+    margin-bottom: 8px;
+    span {
+      display: block;
+    }
+    span:nth-of-type(1) {
+      height: 24px;
+      font-size: 16px;
+      font-family: MicrosoftYaHeiSemibold;
+      color: rgba(31, 36, 41, 1);
+      line-height: 21px;
+    }
+    span:nth-of-type(2) {
+      margin: 8px 0;
+    }
+    span:nth-of-type(3) {
+      textarea {
+        width: 762px;
+        height: 64px;
+        border-radius: 4px;
+        border: 1px solid rgba(195, 199, 203, 1);
+        color: rgba(195, 199, 203, 1);
+      }
+    }
+  }
+  .foot {
+    width: 112px;
+    height: 112px;
+    background: rgba(248, 249, 250, 1);
+  }
+}
+</style>
+<style lang="scss">
+.detailContainer {
+  .el-input--mini .el-input__inner {
+    height: 32px;
+    border: 1px solid rgba(195, 199, 203, 1);
+  }
+}
+</style>

src/views/appeal/appealTable.vue

@@ -1,112 +0,0 @@
-<template>
-    <el-table
-    :data="list"
-    border
-    style="width: 100%">
-    <el-table-column
-      prop="title"
-      label=''>
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="冷机开启台数"
-      >
-    </el-table-column>
-    <el-table-column
-      prop="province"
-      label="冷机出水温度"
-      >
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="冷冻泵台数"
-      >
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="冷冻泵频率"
-     >
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="冷却泵台数"
-      >
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="冷却泵频率"
-      >
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="冷却塔台数"
-      >
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="冷却塔频率"
-      >
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="室内平均温度"
-      >
-    </el-table-column>
-     <el-table-column
-      prop="hign"
-      label="室内最高温度"
-      >
-    </el-table-column>
-     <el-table-column
-      prop="load"
-      label="冷机负载率"
-      >
-    </el-table-column>
-    
-  </el-table>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            list: [
-                    {
-                        name: '12',
-                        province: '12℃',
-                        city: ' 2大1小',
-                        address: '32.2Hz',
-                        zip: 2,
-                        hign:'25.6℃',
-                        load:"32.2Hz",
-                        title:'当前运行状态'
-                    },
-                    {
-                        name: '12',
-                        province: '12℃',
-                        city: ' 2大1小',
-                        address: '32.2Hz',
-                        zip: 2,
-                        hign:'25.6℃',
-                        load:"32.2Hz",
-                        title:'推送策略'
-                    },
-                    {
-                        name: '12',
-                        province: '12℃',
-                        city: ' 2大1小',
-                        address: '32.2Hz',
-                        zip: 2,
-                        hign:'25.6℃',
-                        load:"32.2Hz",
-                        title:'执行策略'
-                    }
-            ]
-        }
-    }
-}
-</script>
-
-<style>
-
-</style>

src/views/appeal/detail.vue

@@ -1,215 +0,0 @@
-<template>
-  <div>
-    <Head :headText="headText"></Head>
-    <div class="appealContainer">
-      <div class="appeal-left">
-        <div class="appeal-left-top">
-          <span class="appeal-left-top-span">待审核</span>
-           <el-select v-model="value" placeholder="请选择">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-           </el-select>
-        </div>
-         <div class="appeal-left-box" v-for="(item,index) in data" :key='index'>
-           <p class="date">{{item.date}}</p>
-           <div class="appeal-left-div" v-for="(eve,index) in item.value" :key='"o"+index'>
-             <div class="time">{{eve.time}}{{eve.title}}<span class="time-file">{{eve.files}}</span></div>
-             <p>申请人：{{eve.name}}</p>
-             <p>申请时间：{{eve.appealTime}}</p>
-             <p>申请原因：{{eve.reson}}</p>
-           </div>
-         </div>
-      </div>
-      <div class="appeal-right">
-        <div class="appeal-right-top">
-            <p class="appeal-right-title">未执行申诉单</p>
-            <div class="appeal-right1">
-                <span class="san1">项目名称：大连万达广场</span>
-                <span class="span2">申请人：张三</span>
-                <span class="span3">申请时间：2020.01.23</span>
-            </div>
-            <p class="p1">申诉未执行指令：20202.01.13 14:30 推送策略未执行</p>
-            <appeal-table></appeal-table>
-            <p class="evaluate">策略评价</p>
-            <p class="content">执行策略的评价，判断项目执行策略的好坏，执行策略的评价，判断项目执行策略的好最多50个字</p>
-            <p class="evaluate">申请原因</p>
-            <p>
-              <el-select v-model="resonValue" placeholder="请选择">
-                  <el-option
-                    v-for="item in resonOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-            </p>
-            <p><el-input placeholder="这里是申请原因的备注，可以修改"></el-input></p>
-            <upload-img :souseArr='souseArr'></upload-img>
-          </div>
-          <div class="appeal-right-bottom">
-            <div class="advice">
-              审批意见
-            </div>
-            <div>
-              <el-input></el-input>
-              <el-button>同意</el-button>
-              <el-button>不同意</el-button>
-            </div>
-          </div>
-       </div>
-    </div>
-  </div>
-</template>
-<script>
-import Head from "../main/index";
-import appealTable from './appealTable'
-import uploadImg from '../../components//uploadImg'
-export default {
-  data() {
-    return {
-      headText: "申诉审核",
-      resonOptions:[{
-        value:"1",
-        label:"策略原因"
-      }],
-      resonValue:"1",
-      options:[{
-        value:"1",
-        label:"按未执行策略的时间"
-      }],
-      value:"1",
-      data:[
-        {
-          date:"2020.01.12 昨天",
-          value:[
-            {time:"2020.01.12 08:30",title:"策略未执行申诉",name:"张三",
-            appealTime:"2020.01.12 12:45",reson:"策略原因",files:5},
-            {time:"2020.01.12 08:30",title:"策略未执行申诉",name:"张三",
-            appealTime:"2020.01.12 12:45",reson:"策略原因",files:5},
-          ]
-        },
-         {
-          date:"2020.01.12 昨天",
-          value:[
-            {time:"2020.01.12 08:30",title:"策略未执行申诉",name:"张三",
-            appealTime:"2020.01.12 12:45",reson:"策略原因",files:5},
-            {time:"2020.01.12 08:30",title:"策略未执行申诉",name:"张三",
-            appealTime:"2020.01.12 12:45",reson:"策略原因",files:5},
-          ]
-        },
-         {
-          date:"2020.01.12 昨天",
-          value:[
-            {time:"2020.01.12 08:30",title:"策略未执行申诉",name:"张三",
-            appealTime:"2020.01.12 12:45",reson:"策略原因",files:5}
-          ]
-        },
-      ],
-      souseArr:[]
-    };
-  },
-  components: {
-    Head,appealTable,uploadImg
-  }
-};
-</script>
-<style lang="scss" scoped>
-.appealContainer {
-  background: #fff;
-  display: flex;
-  .appeal-left{
-    width:408px;
-    padding-left:24px;
-    border-right:1px solod #ccc;
-    background:rgba(247,249,250,1);
-    .appeal-left-top{
-      margin:16px 0 12px 0;
-      .appeal-left-top-span{
-        margin-right:127px;
-        font-size: 16px;
-        color: #1F2429;
-      }
-    }
-     .appeal-left-box{
-       padding-right:20px;
-        .date{
-          color: #8D9399;
-          font-size: 12px;
-          text-align: center;
-        }
-        .appeal-left-div{
-          width:355px;
-          height:142px;
-          border-radius:4px;
-          border:1px solid rgba(0,145,255,1);
-          margin-bottom: 8px;
-          padding-left: 18px;
-          .time{
-            color:#1F2429;
-            font-size:16px;
-            height: 52px;
-            line-height: 52px;
-          }
-          .time-file{
-            float: right;
-            margin-right:20px;
-            font-size: 14px;
-          }
-          p{
-            color: #646C73;
-            font-size: 14px;
-            margin:0;
-            line-height: 26px;
-          }
-        }
-      }
-  }
-  .appeal-right{
-    margin-left:98px;
-    margin-bottom: 24px;
-    .appeal-right-top{
-        .appeal-right-title{
-            font-size:24px;
-            font-family:MicrosoftYaHeiSemibold;
-            color:rgba(31,36,41,1);
-            line-height:32px;
-            text-align: center;
-        }
-        .appeal-right1{
-            font-size:14px;
-            font-family:MicrosoftYaHei;
-            color:rgba(31,36,41,1);
-            line-height:19px;
-            .span2{
-                margin:0 198px 0 171px;
-            }
-        }
-        .p1{
-            font-size:14px;
-            font-family:MicrosoftYaHei;
-            color:rgba(31,36,41,1);
-            line-height:19px;
-        }
-        .evaluate{
-            font-size:16px;
-            font-family:MicrosoftYaHeiSemibold;
-            color:rgba(31,36,41,1);
-            line-height:21px;
-        }
-        .content{
-            font-size:14px;
-            font-family:MicrosoftYaHei;
-            color:rgba(100,108,115,1);
-            line-height:19px;
-        }
-    }
-    .appeal-right-bottom{
-        display: none;
-    }
-  }
-}
-</style>

src/views/appeal/index.vue

@@ -7,10 +7,10 @@
           <span>可申诉的未执行策略</span>
           <span>{{data.length}}</span>
         </div>
-        <div class="execute" v-for="(item,index) in data" :key="index">
+        <div class="execute" v-for="(item,index) in data" :key="index" @click="menu">
           <p class="date">{{item.date}}</p>
           <div class="card-box">
-            <div class="card" v-for="(item2,index) in item.info" :key="index+'i'" @click="dump">
+            <div class="card" v-for="(item2,index) in item.info" :key="index+'i'">
               <div class="time">执行时间：{{item2.time}}</div>
               <div class="advice">
                 <span>策略建议</span>
@@ -40,7 +40,7 @@
           <span>审核中</span>
           <span>{{review.length}}</span>
         </div>
-        <div class="card" v-for="(item,index) in review" :key="index" @click="dump">
+        <div class="card" v-for="(item,index) in review" :key="index" @click="menu">
           <div class="time">
             {{item.date}} {{item.title}}
             <span class="backout">
@@ -53,7 +53,7 @@
       </div>
       <div class="right">
         <div class="title">审核完成/超时未申诉</div>
-        <div class="card" v-for="(item,index) in complete" :key="index" @click="dump">
+        <div class="card" v-for="(item,index) in complete" :key="index" @click="menu">
           <div class="remark">
             <div class="remark-left">审批时间：{{item.time}}</div>
             <div class="remark-right">
@@ -78,7 +78,7 @@ import Head from "../main/index";
 export default {
   data() {
     return {
-      headText: "申诉审核",
+      headText: "申诉",
       data: [
         {
           date: "20202.01.13",
@@ -187,8 +187,8 @@ export default {
     Head
   },
   methods: {
-    dump() {
-      this.$router.push("detail");
+    menu() {
+      this.$router.push("/appeal/appealDetail");
     }
   }
 };
@@ -246,6 +246,7 @@ export default {
           border: 1px solid rgba(228, 230, 231, 1);
           margin-top: 8px;
           padding: 16px 20px;
+          cursor: pointer;
           .time {
             height: 24px;
             font-size: 16px;
@@ -378,6 +379,7 @@ export default {
           color: rgba(0, 145, 255, 1);
           float: right;
           margin-right: 20px;
+          display: none;
           img {
             height: 15px;
             width: 18px;
@@ -394,7 +396,14 @@ export default {
         line-height: 20px;
       }
     }
+    .card:hover {
+      border: 1px solid rgba(0, 145, 255, 1);
+    }
+    .card:hover .backout {
+      display: block;
+    }
   }
+
   .right {
     flex: 1;
     min-width: 310px;
@@ -407,6 +416,7 @@ export default {
       border-radius: 4px;
       border: 1px solid rgba(228, 230, 231, 1);
       padding: 16px 20px;
+      cursor: pointer;
       .remark {
         margin-bottom: 14px;
         display: flex;

src/views/audit/auditTable.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="detailTable">
+    <el-table :data="list" border height="180">
+      <el-table-column prop="title" label width="105"></el-table-column>
+      <el-table-column prop="name" label="冷机开启台数" align="center" width="55"></el-table-column>
+      <el-table-column prop="province" label="冷机出水温度" align="center" width="55"></el-table-column>
+      <el-table-column prop="city" label="冷冻泵台数" align="center" width="60"></el-table-column>
+      <el-table-column prop="address" label="冷冻泵频率" align="center" width="65"></el-table-column>
+      <el-table-column prop="zip" label="冷却泵台数" align="center" width="60"></el-table-column>
+      <el-table-column prop="zip" label="冷却泵频率" align="center" width="65"></el-table-column>
+      <el-table-column prop="zip" label="冷却塔台数" align="center" width="60"></el-table-column>
+      <el-table-column prop="zip" label="冷却塔频率" align="center" width="65"></el-table-column>
+      <el-table-column prop="zip" label="室内平均温度" align="center" width="55"></el-table-column>
+      <el-table-column prop="hign" label="室内最高温度" align="center" width="60"></el-table-column>
+      <el-table-column prop="load" label="冷机负载率" align="center" width="55"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          name: "12",
+          province: "12℃",
+          city: " 2大1小",
+          address: "32.2",
+          zip: 2,
+          hign: "25.6℃",
+          load: "32.2",
+          title: "当前运行状态"
+        },
+        {
+          name: "12",
+          province: "12℃",
+          city: " 2大1小",
+          address: "32.2",
+          zip: 2,
+          hign: "25.6℃",
+          load: "32.2",
+          title: "推送策略"
+        },
+        {
+          name: "12",
+          province: "12℃",
+          city: " 2大1小",
+          address: "32.2",
+          zip: 2,
+          hign: "25.6℃",
+          load: "32.2",
+          title: "执行策略"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+ <style lang="scss">
+.detailTable {
+  .el-table {
+    font-size: 12px;
+  }
+  .el-table th {
+    padding: 6px 0;
+    font-size: 12px;
+  }
+  .el-table td {
+    padding: 8px 0;
+  }
+  .el-table th > .cell {
+    padding-right: 2px;
+    padding-left: 2px;
+  }
+}
+</style>

src/views/audit/index.vue

@@ -0,0 +1,416 @@
+<template>
+  <div>
+    <Head :headText="headText"></Head>
+    <div class="appealContainer">
+      <div class="appeal-left">
+        <div class="appeal-left-top">
+          <span class="appeal-left-top-span">待审核</span>
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </div>
+        <div class="appeal-left-box" v-for="(item,index) in data" :key="index">
+          <p class="date">{{item.date}}</p>
+          <div class="appeal-card">
+            <div class="appeal-left-div" v-for="(eve,index) in item.value" :key="index">
+              <div class="time">
+                <span>{{eve.time}}{{eve.title}}</span>
+                <span>
+                  <img src="../../assets/tp.png" alt />
+                  {{eve.files}}
+                </span>
+              </div>
+              <div class="content">
+                <span>申请人：{{eve.name}}</span>
+                <span>申请时间：{{eve.appealTime}}</span>
+                <span>申请原因：{{eve.reson}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="appeal-right">
+        <div class="detailContainer">
+          <div class="title">未执行申诉单</div>
+          <div class="nav">
+            <span>项目名称：大连万达广场</span>
+            <span>申请人：张三</span>
+            <span>申请时间：2020.01.13</span>
+          </div>
+          <div class="cont1">申诉未执行指令：2020.01.13 14:30 推送策略未执行</div>
+          <div class="cont2">
+            <audit-table></audit-table>
+          </div>
+          <div class="cont3">
+            <span>策略评价</span>
+            <span>执行策略的评价，判断项目执行策略的好坏，执行策略的评价，判断项目执行策略的好最多50个字</span>
+          </div>
+          <div class="cont4">
+            <span>申请原因</span>
+            <span>
+              <el-select size="mini" v-model="value" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </span>
+            <span>
+              <textarea placeholder="填写申请原因"></textarea>
+            </span>
+          </div>
+          <div class="foot">
+            <upload-img></upload-img>
+          </div>
+        </div>
+        <div class="opinion">
+          <span class="opinion-title">审批意见</span>
+          <div class="opinion-bottom">
+            <input type="text" />
+            <span>不同意</span>
+            <span>同意</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Head from "../main/index";
+import AuditTable from "./auditTable";
+import uploadImg from "../../components/uploadImg";
+export default {
+  data() {
+    return {
+      headText: "申诉审核",
+      resonOptions: [
+        {
+          value: "1",
+          label: "策略原因"
+        }
+      ],
+      resonValue: "1",
+      options: [
+        {
+          value: "1",
+          label: "按未执行策略的时间"
+        }
+      ],
+      value: "1",
+      data: [
+        {
+          date: "2020.01.12 昨天",
+          value: [
+            {
+              time: "2020.01.12 08:30",
+              title: "策略未执行申诉",
+              name: "张三",
+              appealTime: "2020.01.12 12:45",
+              reson: "策略原因",
+              files: 5
+            },
+            {
+              time: "2020.01.12 08:30",
+              title: "策略未执行申诉",
+              name: "张三",
+              appealTime: "2020.01.12 12:45",
+              reson: "策略原因",
+              files: 5
+            },
+            {
+              time: "2020.01.12 08:30",
+              title: "策略未执行申诉",
+              name: "张三",
+              appealTime: "2020.01.12 12:45",
+              reson: "策略原因",
+              files: 5
+            },
+            {
+              time: "2020.01.12 08:30",
+              title: "策略未执行申诉",
+              name: "张三",
+              appealTime: "2020.01.12 12:45",
+              reson: "策略原因",
+              files: 5
+            }
+          ]
+        },
+        {
+          date: "2020.01.12 昨天",
+          value: [
+            {
+              time: "2020.01.12 08:30",
+              title: "策略未执行申诉",
+              name: "张三",
+              appealTime: "2020.01.12 12:45",
+              reson: "策略原因",
+              files: 5
+            },
+            {
+              time: "2020.01.12 08:30",
+              title: "策略未执行申诉",
+              name: "张三",
+              appealTime: "2020.01.12 12:45",
+              reson: "策略原因",
+              files: 5
+            }
+          ]
+        },
+        {
+          date: "2020.01.12 昨天",
+          value: [
+            {
+              time: "2020.01.12 08:30",
+              title: "策略未执行申诉",
+              name: "张三",
+              appealTime: "2020.01.12 12:45",
+              reson: "策略原因",
+              files: 5
+            }
+          ]
+        }
+      ],
+      souseArr: []
+    };
+  },
+  components: {
+    Head,
+    AuditTable,
+    uploadImg
+  }
+};
+</script>
+<style lang="scss" scoped>
+.appealContainer {
+  display: flex;
+  background: rgba(247, 249, 250, 1);
+  border-top: 1px solid #e4e5e7;
+  margin-top: 5px;
+
+  .appeal-left {
+    width: 360px;
+    padding: 16px 24px;
+
+    .appeal-left-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      .appeal-left-top-span {
+        height: 24px;
+        font-size: 16px;
+        font-family: MicrosoftYaHeiSemibold;
+        color: rgba(31, 36, 41, 1);
+        line-height: 21px;
+      }
+    }
+    .appeal-left-box {
+      margin-bottom: 24px;
+      .date {
+        height: 18px;
+        font-size: 12px;
+        font-family: MicrosoftYaHei;
+        color: rgba(141, 147, 153, 1);
+        line-height: 16px;
+        text-align: center;
+      }
+      .appeal-card {
+        height: 300px;
+        overflow: scroll;
+        .appeal-left-div {
+          margin-bottom: 8px;
+          padding: 16px 20px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 4px;
+          border: 1px solid rgba(228, 230, 231, 1);
+          .time {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 12px;
+            span:nth-of-type(1) {
+              height: 24px;
+              font-size: 16px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: rgba(31, 36, 41, 1);
+              line-height: 22px;
+            }
+            span:nth-of-type(2) {
+              display: flex;
+              align-items: center;
+              height: 22px;
+              font-size: 14px;
+              font-family: ArialMT;
+              color: rgba(31, 36, 41, 1);
+              line-height: 16px;
+              img {
+                width: 16px;
+                height: 16px;
+                margin-right: 6px;
+              }
+            }
+          }
+          .content {
+            span {
+              display: block;
+              height: 22px;
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: rgba(100, 108, 115, 1);
+              line-height: 20px;
+            }
+            span:nth-of-type(2) {
+              margin: 4px 0;
+            }
+          }
+        }
+      }
+    }
+  }
+  .appeal-right {
+    flex: 1;
+    .detailContainer {
+      min-width: 762px;
+      padding: 0 100px;
+      margin: 0 auto;
+      padding-top: 36px;
+      padding-bottom: 24px;
+      background: rgba(255, 255, 255, 1);
+      .title {
+        height: 32px;
+        font-size: 24px;
+        font-family: MicrosoftYaHeiSemibold;
+        color: rgba(31, 36, 41, 1);
+        line-height: 32px;
+        text-align: center;
+      }
+      .nav {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 40px;
+        margin-bottom: 12px;
+        span {
+          height: 22px;
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: rgba(31, 36, 41, 1);
+          line-height: 19px;
+        }
+      }
+      .cont1 {
+        height: 22px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        line-height: 19px;
+        margin-bottom: 16px;
+      }
+      .cont2 {
+        margin-bottom: 24px;
+        height: 180px;
+      }
+      .cont3 {
+        margin-bottom: 24px;
+        span:nth-of-type(1) {
+          height: 24px;
+          font-size: 16px;
+          font-family: MicrosoftYaHeiSemibold;
+          color: rgba(31, 36, 41, 1);
+          line-height: 21px;
+          margin-bottom: 8px;
+        }
+        span:nth-of-type(2) {
+          height: 22px;
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: rgba(100, 108, 115, 1);
+          line-height: 19px;
+        }
+      }
+      .cont4 {
+        margin-bottom: 8px;
+        span {
+          display: block;
+        }
+        span:nth-of-type(1) {
+          height: 24px;
+          font-size: 16px;
+          font-family: MicrosoftYaHeiSemibold;
+          color: rgba(31, 36, 41, 1);
+          line-height: 21px;
+        }
+        span:nth-of-type(2) {
+          margin: 8px 0;
+        }
+        span:nth-of-type(3) {
+          textarea {
+            width: 762px;
+            height: 64px;
+            border-radius: 4px;
+            border: 1px solid rgba(195, 199, 203, 1);
+            color: rgba(195, 199, 203, 1);
+          }
+        }
+      }
+      .foot {
+        width: 112px;
+        height: 112px;
+        background: rgba(248, 249, 250, 1);
+      }
+    }
+    .opinion {
+      background: rgba(247, 249, 250, 1);
+      box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.08);
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      padding: 16px 32px;
+      .opinion-title {
+        height: 24px;
+        font-size: 16px;
+        font-family: MicrosoftYaHeiSemibold;
+        color: rgba(31, 36, 41, 1);
+        line-height: 21px;
+        margin-bottom: 8px;
+        display: block;
+      }
+      .opinion-bottom {
+        display: flex;
+        align-items: center;
+        input {
+          width: 697px;
+          height: 32px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 4px;
+          border: 1px solid rgba(195, 199, 203, 1);
+          margin-right: 32px;
+        }
+        span {
+          display: inline-block;
+          width: 80px;
+          height: 32px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 4px;
+          border: 1px solid rgba(195, 199, 203, 1);
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: rgba(31, 35, 41, 1);
+          line-height: 32px;
+          text-align: center;
+        }
+        span:nth-of-type(1) {
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/main/index.vue

@@ -89,16 +89,20 @@ export default {
           path: "/strategy"
         },
         {
-          name: "申诉审核",
+          name: "运行评价",
+          path: "/evaluate"
+        },
+        {
+          name: "申诉",
           path: "/appeal"
         },
         {
-          name: "营业时间",
-          path: "/doBusiness"
+          name: "申诉审核",
+          path: "/audit"
         },
         {
-          name: "运行评价",
-          path: "/evaluate"
+          name: "营业时间调整",
+          path: "/doBusiness"
         }
       ],
       options: [
@@ -263,8 +267,7 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      .nav-left {
-      }
+  
     }
   }
   .mainContainerTop {