123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563 |
- <template>
- <div>
- <Head :headText="headText"></Head>
- <div class="appealBox">
- <div class="left">
- <div class="title">
- <span>可申诉的未执行策略</span>
- <span>{{data.length}}</span>
- </div>
- <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'">
- <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">
- <div class="title">
- <span>审核中</span>
- <span>{{review.length}}</span>
- </div>
- <div class="card" v-for="(item,index) in review" :key="index" @click="menu">
- <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">
- <div class="title">审核完成/超时未申诉</div>
- <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">
- <span :class="item.sign>5?'backout':(item.sign>2?'backout1':'backout2')">
- <img :src="item.img" />
- {{item.text}}
- </span>
- </div>
- </div>
- <div class="time">
- <span>{{item.time}}</span>
- <span>{{item.date}}</span>
- <span>{{item.title}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import Head from "../main/index";
- import {
- queryAppeals,
- queryAuditCompleted,
- queryInAudit
- } from "@/api/appeal/appeal.js";
- export default {
- data() {
- return {
- headText: "申诉",
- appealsArr: [],
- InAuditArr: [],
- auditCompletedArr: [],
- data: [
- {
- 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: "冷水温度过高,没有及时按策略执行"
- }
- ]
- },
- {
- 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.02.12 08:30",
- title: "策略未执行申诉",
- reason: "策略原因",
- advice: "冷水温度过高,没有及时按策略执行"
- }
- ],
- complete: [
- {
- date: "08:30",
- title: "策略未执行申诉",
- time: "2020.01.30",
- sign: 7,
- img: require("../../assets/completed.png"),
- text: "申诉成功"
- },
- {
- date: "08:30",
- title: "策略未执行申诉",
- time: "2020.01.30",
- sign: 5,
- img: require("../../assets/gray.png"),
- text: "未申诉"
- },
- {
- date: "08:30",
- title: "策略未执行申诉",
- time: "2020.01.30",
- sign: 2,
- img: require("../../assets/error.png"),
- text: "申诉失败"
- }
- ]
- };
- },
- components: {
- Head
- },
- mounted() {
- this.init();
- },
- methods: {
- menu() {
- this.$router.push("/appeal/appealDetail");
- },
- init() {
- this.appealsIng();
- this.auditCompletedIng();
- this.InAuditIng();
- },
- appealsIng() {
- let params = {
- postParams: {
- criteria: {
- projectId: "Pj4419000005",
- date: {
- $gte: "20200216"
- },
- isExecuted: false,
- appealStatus: [1, 5]
- }
- }
- };
- queryAppeals(params).then(res => {
- this.appealsArr = res.content ? res.content : [];
- });
- },
- auditCompletedIng() {
- this.appealsArr = [];
- let params = {
- postParams: {
- criteria: {
- projectId: "Pj4419000005",
- date: {
- $gte: "20200216"
- },
- isExecuted: false,
- appealStatus: [3, 4, 6]
- }
- }
- };
- queryAuditCompleted(params).then(res => {
- this.auditCompletedArr = res.content ? res.content : [];
- });
- },
- InAuditIng() {
- let params = {
- postParams: {
- criteria: {
- projectId: "Pj1101080002",
- trackerId: 3,
- status: 301
- },
- withColumns: ["customAttribute"]
- }
- };
- queryInAudit(params).then(res => {
- this.InAuditArr = res.content ? res.content : [];
- });
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .appealBox {
- background: #fff;
- display: flex;
- 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;
- cursor: pointer;
- .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;
- }
- .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;
- 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;
- }
- }
- }
- }
- .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;
- display: none;
- img {
- height: 15px;
- width: 18px;
- }
- }
- }
- .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;
- }
- }
- .card:hover {
- border: 1px solid rgba(0, 145, 255, 1);
- }
- .card:hover .backout {
- display: block;
- }
- }
- .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;
- cursor: pointer;
- .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-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>
|