Prechádzať zdrojové kódy

申诉审核的完成

zhulizhen 5 rokov pred
rodič
commit
3c0cc29b3a

+ 2 - 1
package-lock.json

@@ -12182,7 +12182,8 @@
     "vuex": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
-      "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
+      "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==",
+      "dev": true
     },
     "watchpack": {
       "version": "1.6.0",

+ 1 - 1
package.json

@@ -15,7 +15,6 @@
     "element-ui": "^2.9.1",
     "moment": "^2.24.0",
     "vue": "^2.5.2",
-    "vuex": "^3.1.1",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
@@ -53,6 +52,7 @@
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
+    "vuex": "^3.1.2",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",

+ 6 - 0
src/api/appeal/appeal.js

@@ -0,0 +1,6 @@
+import httputils from '@/api/httputils'
+export function deleteFile({
+    postParams
+}) {
+    return httputils.postJson(`/image-service/common/files_delete?systemId=saas&secret=46f869eea8b31d14`, postParams)
+}

+ 183 - 0
src/api/httputils.js

@@ -0,0 +1,183 @@
+import axios from 'axios'
+//import store from '@/store'
+import { MessageBox } from 'element-ui'
+
+var CancelToken = axios.CancelToken
+var cancel
+
+// 创建axios实例
+const axiosservice = axios.create({
+    timeout: 30000, // 请求超时时间
+    retry: 4, //重新请求次数
+    retryDelay: 1000, //重新请求的间隔
+    credentials: true, // 接口每次请求会跨域携带cookie
+    cancelToken: new CancelToken(function executor(c) {
+        // executor 函数接收一个 cancel 函数作为参数
+        cancel = c
+    })
+})
+
+// axiosservice.interceptors.request.use(
+//     config => {
+//         config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
+//         let token = store.getters['ssoToken']
+//         if (token) {
+//             config.headers = {
+//                 'sso-token': token
+//             }
+//         }
+//         return config
+//     },
+//     error => {
+//         return Promise.reject(error)
+//     }
+// )
+
+// axiosservice.interceptors.response.use(
+//     function(res) {
+//         //在这里对返回的数据进行处理
+//         //console.log('axios interceptors res = ', res.status, res)
+//         let resp = res.data
+//         if (resp.result === 'unauthc') {
+//             store.commit('logined', false)
+//             MessageBox.confirm('未登陆或登陆信息已失效, 是否重新登陆?', '提示', {
+//                 confirmButtonText: '确定',
+//                 cancelButtonText: '取消',
+//                 type: 'error'
+//             })
+//                 .then(resp => {
+//                     //console.log('--------------------------- confirm', resp)
+//                     //router.push('/login')
+//                     window.location.reload()
+//                 })
+//                 .catch(error => {
+//                     //console.log('--------------------------- cancel', error)
+//                     console.log('')
+//                 })
+//         } else if (resp.result == 'unauthorization') {
+//             MessageBox.alert('无权操作', { title: '警告', type: 'error' })
+//         }
+//         //console.log('axios interceptors resp2 = ', resp.success, resp.errorCode, resp.errorMessage, res)
+//         return res
+//     },
+//     function(err) {
+//         //Do something with response error
+//         console.log('axios interceptors err = ', err)
+//         return Promise.reject(err)
+//     }
+// )
+
+/* 下载方法 */
+function downFile(blob, fileName) {
+    // 非IE下载
+    if ('download' in document.createElement('a')) {
+        let link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob) // 创建下载的链接
+        link.download = fileName // 下载后文件名
+        link.style.display = 'none'
+        document.body.appendChild(link)
+        link.click() // 点击下载
+        window.URL.revokeObjectURL(link.href) // 释放掉blob对象
+        document.body.removeChild(link) // 下载完成移除元素
+    } else {
+        // IE10+下载
+        window.navigator.msSaveBlob(blob, fileName)
+    }
+}
+
+export default {
+    //获取cookie
+    getCookie(name) {
+        var arr,
+            reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
+        if ((arr = document.cookie.match(reg))) {
+            return unescape(arr[2])
+        } else {
+            /* 如果没有参数,那么就获取本域下的所有cookie */
+            return document.cookie
+        }
+    },
+
+    async getJson(url, params) {
+        try {
+            let response = await axiosservice({
+                url,
+                params,
+                method: 'get'
+            })
+            return response.data
+        } catch (err) {
+            throw err
+        }
+    },
+    async postJson(url, data) {
+        try {
+            let response = await axiosservice({
+                url,
+                data,
+                method: 'post'
+            })
+            return response.data
+        } catch (err) {
+            throw err
+        }
+    },
+    async fetchJson(url, params, data) {
+        try {
+            let response = await axiosservice({
+                url,
+                params,
+                data,
+                method: 'post'
+            })
+            return response
+        } catch (err) {
+            throw err
+        }
+    },
+    async postupload(url, data) {
+        try {
+            let response = await axiosservice({
+                url,
+                data,
+                method: 'post',
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            })
+            return response.data
+        } catch (err) {
+            throw err
+        }
+    },
+    download(url, requestData) {
+        // 响应类型:arraybuffer, blob
+        axiosservice
+            .post(url, requestData, { responseType: 'blob' })
+            .then(resp => {
+                let headers = resp.headers
+                let contentType = headers['content-type']
+
+                console.log('响应头信息', headers)
+                if (!resp.data) {
+                    console.error('响应异常:', resp)
+                    return false
+                } else {
+                    console.log('下载文件:', resp)
+                    const blob = new Blob([resp.data], { type: contentType })
+
+                    const contentDisposition = resp.headers['content-disposition']
+                    let fileName = 'unknown'
+                    if (contentDisposition) {
+                        fileName = window.decodeURI(resp.headers['content-disposition'].split('=')[1])
+                    }
+                    console.log('文件名称:', fileName)
+                    downFile(blob, fileName)
+                }
+            })
+            .catch(function(error) {
+                console.log(error)
+            })
+    },
+    axios: axiosservice
+}

BIN
src/assets/addimg.png


BIN
src/assets/backout.png


BIN
src/assets/gray.png


+ 174 - 0
src/components/uploadImg.vue

@@ -0,0 +1,174 @@
+<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>
+</template>
+<script>
+import zoomImage from './zoomImage'
+import { deleteFile } from '@/api/appeal/appeal.js'
+export default {
+    data() {
+        return {
+            showTrue: true,
+            loading: false,
+            tempArr: []
+        }
+    },
+    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
+                        }
+                    }
+                }
+            }
+        },
+        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: '删除失败'
+                            })
+                        }
+                    })
+                })
+                .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;
+        }
+    }
+    .img-bg {
+        width: 78px;
+        height: 78px;
+        line-height: 78px;
+        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%;
+        }
+    }
+    .is-uploading {
+        display: none;
+    }
+}
+</style>

+ 60 - 0
src/components/zoomImage.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class='zoom-image'>
+        <img :src='url' @click='imagePreview(url)' />
+        <div id='tbody'></div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {}
+    },
+    props: ['url'],
+    methods: {
+        imagePreview(src) {
+            let body = document.querySelector('#tbody')
+            let mask = document.createElement('div')
+            let img = document.createElement('img')
+            img.src = src+'&width=1000'
+            mask.classList.add('mask')
+            this.setStyle(mask, img)
+            this.setEventListener(body, mask)
+            img.onload = function() {
+                mask.appendChild(img)
+                body.appendChild(mask)
+            }
+        },
+        setStyle(mask, img) {
+            mask.style.position = 'fixed'
+            mask.style.top = 0
+            mask.style.left = 0
+            mask.style.right = 0
+            mask.style.bottom = 0
+            mask.style.background = 'rgba(0,0,0,0.8)'
+            mask.style.zIndex = '99'
+            img.style.position = 'absolute'
+            img.style.top = '50%'
+            img.style.left = '50%'
+            img.style.width = '100%'
+            img.style.transform = 'translate(-50%, -50%)'
+        },
+        setEventListener(body, mask) {
+            mask.addEventListener('click', function() {
+                body.removeChild(mask)
+            })
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.zoom-image {
+    width: 80px;
+    height: 80px;
+    display: inline-block;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

+ 8 - 1
src/router/index.js

@@ -3,6 +3,7 @@ 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 DoBusiness = () => import('@/views/doBusiness/index')
 const Evaluate = () => import('@/views/evaluate/index')
 const EvTwoLevelMenu = () => import('@/views/evaluate/evTwoLevelMenu')
@@ -31,10 +32,16 @@ export default new Router({
       component: Appeal
     },
     {
+      path:'/detail',
+      name:"appealDeatil",
+      component:AppealDeatil
+    },
+    {
       path: '/doBusiness',
       name: 'doBusiness',
       component: DoBusiness
-    }, {
+    },
+     {
       path: '/evaluate',
       name: 'evaluate',
       component: Evaluate

+ 112 - 0
src/views/appeal/appealTable.vue

@@ -0,0 +1,112 @@
+<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>

+ 215 - 0
src/views/appeal/detail.vue

@@ -0,0 +1,215 @@
+<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>

+ 295 - 126
src/views/appeal/index.vue

@@ -1,172 +1,341 @@
 <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 class="appealBox">
+       <div class="left">
+        <p class="title">可申诉的未知性策略</p>
+        <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>
-            <p>申诉未执行指令:20202.01.13 14:30 推送策略未执行</p>
-            <today-strategy></today-strategy>
-            <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>
-          </div>
-          <div class="appeal-right-bottom">
             <div class="advice">
-              审批意见
+              实际执行 <span>冷机台数</span> {{item2.re1}}大{{item2.re2}}小<span>冷机出水温度</span> {{item2.temp2}}°C
+            </div>
+            <div class="remark">
+              备注:{{item2.remark}}
             </div>
-            <div>
-              <el-input></el-input>
-              <el-button>同意</el-button>
-              <el-button>不同意</el-button>
+            <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="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}}
+          </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>
+          <div class="time">
+            {{item.date}} {{item.title}}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import Head from "../main/index";
-import todayStrategy from '../../components/todayStrategy'
 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:'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:"冷水温度过高,没有及时按策略执行" 
+            }
           ]
         },
          {
-          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:'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:"冷水温度过高,没有及时按策略执行" 
+            }
           ]
         },
+      ],
+      review:[
+        {
+          date:'2020.02.12 08:30',
+          title:"策略未执行申诉",
+          reason:'策略原因',
+          advice:'冷水温度过高,没有及时按策略执行'
+        },
          {
-          date:"2020.01.12 昨天",
-          value:[
-            {time:"2020.01.12 08:30",title:"策略未执行申诉",name:"张三",
-            appealTime:"2020.01.12 12:45",reson:"策略原因",files:5}
-          ]
+          date:'2020.02.12 08:30',
+          title:"策略未执行申诉",
+          reason:'策略原因',
+          advice:'冷水温度过高,没有及时按策略执行'
+        },
+      ],
+      complete:[
+        {
+          date:'2020.02.12 08:30',
+          title:"策略未执行申诉",
+          time:'2020.01.30',
+          sign:0
+        },
+        {
+          date:'2020.02.12 08:30',
+          title:"策略未执行申诉",
+          time:'2020.01.30',
+          sign:1
+        },
+        {
+          date:'2020.02.12 08:30',
+          title:"策略未执行申诉",
+          time:'2020.01.30',
+          sign:2
         },
       ]
     };
   },
   components: {
-    Head,todayStrategy
+    Head
+  },
+  methods:{
+    dump(){
+      this.$router.push('detail')
+    }
   }
 };
 </script>
 <style lang="scss" scoped>
-.appealContainer {
+.appealBox{
   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;
+ .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;
-          text-align: center;
+          margin-bottom:24px;
         }
-        .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;
+        .btn{
+          float: right;
+          margin-right:20px;
+          .el-button{
+            width:80px;
+            height:28px;
           }
-          .time-file{
+        } 
+     }
+      .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;
-            font-size: 14px;
+            img{
+              height: 22px;
+              vertical-align: bottom;
+              margin-right: 2px;
+            }
           }
-          p{
-            color: #646C73;
-            font-size: 14px;
-            margin:0;
-            line-height: 26px;
+        }
+        .remark{
+          margin-top: 12px;
+          color: #646C73;
+          font-size: 12px;
+          margin-bottom:4px;
+        }
+   }
+ }
+ .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: 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;
+            }
           }
         }
-      }
-  }
-  .appeal-right{
-    margin-left:98px;
-  }
+   }
+ }
 }
 </style>