sagacloud
/
sagacloud-cwc-pages


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
							<template>
  <div class="appealBoxContainer">
    <div class="top">
      <Head :headText="headText"></Head>
    </div>
    <div class="bottom">
      <div class="appealBox">
        <div class="appealBoxLeft">
          <div class="title">
            <span class="Micbold">可申诉的未执行策略</span>
            <span v-if="appealsArr.length>0">{{appealsArr.length}}</span>
          </div>
          <p class="date MicrYaHei">{{appealsDate?formatterStr(appealsDate):'--'}}</p>
          <div class="left">
            <div class="execute">
              <div class="card" v-for="(item,index) in appealsArr" :key="index+'i'">
                <div class="time">执行时间：{{item.recommend?formatterStr2(item.recommend.time):'--'}}</div>
                <div class="advice MicrYaHei">
                  <span>策略建议</span>
                  <span>冷机台数</span>
                  <span>{{item.recommend.chillerNumSetL||'--'}}大{{item.recommend.chillerNumSetS||'--'}}小</span>
                  <span>冷机出水温度</span>
                  <span>{{item.recommend.chillWaterOutTempSet||'--'}}°C</span>
                </div>
                <div class="advice">
                  <span>实际执行</span>
                  <span>冷机台数</span>
                  <span>{{item.real?item.real.chillerNumSetLOrg:'--'}}大{{item.real?item.real.chillerNumSetSOrg:'--'}}小</span>
                  <span>冷机出水温度</span>
                  <span>{{item.real?item.real.chillWaterOutTempSetOrg:'--'}}°C</span>
                </div>
                <div class="remark">备注：{{item.remarks||'--'}}</div>
                <div class="refuteBox">
                  <div class="refute" v-if="item.status=='305'">
                    <img src="../../assets/error.png" alt />
                    <span>已驳回</span>
                  </div>
                  <div v-else class="refute2"></div>
                  <div class="btn">
                    <el-button size="mini" @click="viewSnapshots = true">查看快照</el-button>
                    <el-button size="mini" type="primary" @click="menu(item)">申诉</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="appealBoxCenter">
          <div class="title">
            <span class="Micbold">审核中</span>
            <span v-if="InAuditArr.length>0">{{InAuditArr.length}}</span>
          </div>
          <div class="center">
            <div class="card" v-for="(item,index) in InAuditArr" :key="index">
              <div class="time">
                <span class="time-box">
                  <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
                  <span>{{item.title||'--'}}</span>
                </span>
                <span class="backout" @click="backoutClick(item,'revoke')">
                  <img src="../../assets/backout.png" />撤销申请
                </span>
              </div>
              <div class="remark">申请原因：{{item.reasonType||'--'}}</div>
              <div class="remark">{{item.reason||'--'}}</div>
            </div>
          </div>
        </div>
        <div class="appealBoxRight" ref="appealBoxRight">
          <div class="title Micbold">审核完成/超时未申诉</div>
          <div class="right">
            <div class="card" v-for="(item,index) in auditCompletedArr" :key="index">
              <div class="remark">
                <div class="remark-left">审批时间：{{item.updateTime?formatter1(item.updateTime):'--'}}</div>
                <div class="remark-right Micbold">
                  <span
                    :class="item.status=='303'?'backout':(item.status=='306'?'backout1':'backout2')"
                  >
                    <img
                      :src="item.status=='303'?require('../../assets/completed.png'):(item.status=='306'?require('../../assets/gray.png'):require('../../assets/error.png'))"
                    />
                    {{item.status=='303'?'申诉成功':(item.status=='306'?'未申诉':'申诉失败')}}
                  </span>
                </div>
              </div>
              <div class="time">
                <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
                <span>{{item.title||'--'}}</span>
              </div>
            </div>
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
              <div
                class="loadingIcon"
                style="width: 50px;
            text-align: center;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 30px;"
              >
                <i class="el-icon-loading"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="view-dialog">
      <el-dialog
        title="策略推出时状况"
        :visible.sync="viewSnapshots"
        :close-on-click-modal="false"
        width="1260px"
      >
        <ev-snapshots-dialog></ev-snapshots-dialog>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Head from "../main/index";
import {
  queryWorkflow,
  queryChillerExecuteInfo,
  querySimpleInfo
} from "@/api/appeal/appeal.js";
import EvSnapshotsDialog from "../evaluate/evSnapshotsDialog";
import { updateWorkflow } from "@/api/audit/audit.js";

var moment = require("moment");
import "moment/locale/zh-cn";

export default {
  data() {
    return {
      headText: "未执行申诉",
      appealsArr: [], //可申诉的未执行策略
      InAuditArr: [], //审核中
      auditCompletedArr: [], //审核完成，超时未申诉
      appealsDate: "",
      viewSnapshots: false,
      newArr: [],
      busy: true,
      page: 1,
      pageSize: 15
    };
  },
  components: {
    Head,
    EvSnapshotsDialog
  },
  mounted() {
    this.init();
  },
  methods: {
    backoutClick(item, type) {
      let params = {
        postParams: {
          id: item.id,
          commit: type,
          roles: [1002],
          updateUser: "594e95e50abc4b6c9bdda985d313c1b9"
        }
      };
      updateWorkflow(params).then(res => {
        if (res.result == "success") {
          this.$message.success("撤销成功");
        } else {
          this.$message.error("撤销失败: " + res.message);
        }
        this.init();
      });
    },
    formatter(date) {
      return moment.unix(date / 1000).format("YYYY.MM.DD hh:mm");
    },
    formatter1(date) {
      return moment.unix(date / 1000).format("YYYY.MM.DD");
    },
    formatterStr(str) {
      if (str) {
        return (
          str.substring(0, 4) +
          "." +
          str.substring(4, 6) +
          "." +
          str.substring(6, 8)
        );
      }
    },
    formatterStr2(str) {
      if (str) {
        return str.substring(0, 2) + ":" + str.substring(2, 4);
      }
    },
    menu(item) {
      this.$router.push({
        path: "/appeal/appealDetail",
        query: { item: JSON.stringify(item) }
      });
    },
    init() {
      this.appealsIng();
      this.auditCompletedIng(true);
      this.InAuditIng();
    },
    // 可申诉的未执行策略
    appealsIng() {
      let params = {
        postParams: {
          criteria: {
            projectId: this.$store.state.projectId,
            trackerId: 3, //固定为3
            status: [301, 305] //固定为未申诉和已驳回
          },
          withColumns: ["customAttribute"]
        }
      };
      queryWorkflow(params).then(res => {
        let arr = [];
        arr = res.content ? res.content : [];
        if (arr.length > 0) {
          arr.forEach(item => {
            arr.push(item.commandId);
            this.newArr.push(item);
          });
          this.queryExecute(arr);
        }
      });
    },
    queryExecute(id) {
      this.appealsArr = [];
      let params = {
        postParams: {
          criteria: {
            id: id
          }
        }
      };
      queryChillerExecuteInfo(params).then(res => {
        let arr1 = [],
          arr2 = [];
        arr1 = res.data ? res.data : [];
        if (arr1.length > 0) {
          arr1.forEach(item => {
            this.newArr.forEach(item2 => {
              if (item.recommend.appealId == item2.id) {
                let obj = Object.assign(item, item2);
                this.appealsArr.push(obj);
                this.appealsDate = this.appealsArr[0].recommend.date;
              }
            });
          });
        }
        console.log(this.appealsArr);
      });
    },
    // 审核完成、超时未申诉
    auditCompletedIng(flag) {
      let params = {
        postParams: {
          criteria: {
            projectId: this.$store.state.projectId,
            trackerId: 3,
            status: [303, 304, 306],
            createTime: {
              $gte: "20200216000000" //三天以内
            }
          },
          size: this.pageSize,
          page: this.page,
          withColumns: ["customAttribute"]
        }
      };
      queryWorkflow(params).then(res => {
        // this.auditCompletedArr = res.content ? res.content : [];
        if (flag) {
          // 多次加载数据
          this.auditCompletedArr = this.auditCompletedArr.concat(res.content);
          if (res.content.length == 0) {
            this.busy = true;
          } else {
            this.busy = false;
          }
        } else {
          this.auditCompletedArr = res.content;
          this.busy = false;
        }
      });
    },
    loadMore: function() {
      this.busy = true;
      setTimeout(() => {
        this.page++;
        this.auditCompletedIng(true);
      }, 1000);
    },
    // 审核中
    InAuditIng() {
      let params = {
        postParams: {
          criteria: {
            projectId: this.$store.state.projectId,
            trackerId: 3,
            status: 302
          },
          withColumns: ["customAttribute"]
        }
      };
      queryWorkflow(params).then(res => {
        this.InAuditArr = res.content ? res.content : [];
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.appealBoxContainer {
  height: 100%;
  display: flex;
  .top {
    height: 100px;
  }
  .bottom {
    flex: 1;
    .appealBox {
      height: 100%;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 0 24px;
      .appealBoxLeft {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        // overflow: scroll;
        .title {
          display: flex;
          align-items: center;
          padding-top: 116px;
          span:nth-of-type(1) {
            height: 24px;
            font-size: 16px;
            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;
          }
        }
        .date {
          height: 18px;
          font-size: 12px;
          color: rgba(141, 147, 153, 1);
          line-height: 16px;
          margin: 0;
          text-align: center;
        }
        .left {
          flex: 1;
          overflow: scroll;
          .execute {
            .card {
              min-width: 470px;
              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: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(3) {
                  width: 115px;
                  display: inline-block;
                }
                span:nth-of-type(5) {
                  width: 65px;
                  display: inline-block;
                }
                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;
              }
              .refuteBox {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .refute {
                  padding: 0 12px;
                  // width: 85px;
                  height: 24px;
                  background: #fde3e2;
                  border-radius: 12px;
                  display: flex;
                  align-items: center;
                  img {
                    width: 14px;
                    height: 14px;
                    margin-right: 4px;
                  }
                  span {
                    display: inline-block;
                    height: 22px;
                    font-size: 14px;
                    font-family: MicrosoftYaHeiSemibold;
                    color: rgba(245, 78, 69, 1);
                    line-height: 22px;
                  }
                }
                .refute2 {
                  padding: 0 12px;
                  // width: 85px;
                  height: 24px;
                  background: #fff;
                  border-radius: 12px;
                  display: flex;
                  align-items: center;
                }
                .btn {
                  // display: flex;
                  // justify-content: flex-end;
                  .el-button {
                    width: 80px;
                    height: 28px;
                  }
                }
              }
            }
          }

          .card:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0;
          }
        }
      }
      .appealBoxCenter {
        flex: 1;
        height: 100%;
        margin: 0 24px;
        // overflow: scroll;
        //  height: 100%;
        display: flex;
        flex-direction: column;
        .title {
          display: flex;
          margin-bottom: 16px;
          padding-top: 116px;
          span:nth-of-type(1) {
            height: 24px;
            font-size: 16px;
            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);
          }
        }
        .center {
          margin: 0 18px;
          min-width: 410px;
          flex: 1;
          overflow: scroll;
          .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;
              .time-box {
                display: flex;
                align-items: center;
                span:nth-of-type(1) {
                  width: 140px;
                }
              }
              .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;
          }
          .loadingIcon {
            width: 50px;
            text-align: center;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 30px;
          }
        }
      }
      .appealBoxRight {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        .title {
          padding-top: 116px;
          margin-bottom: 16px;
        }
        .right {
          flex: 1;
          overflow: scroll;
          min-width: 310px;
          .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;
                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>
<style lang="scss">
.view-dialog {
  .el-dialog__header {
    padding: 16px 28px 0 32px;
    .el-dialog__title {
      height: 24px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(31, 36, 41, 1);
      line-height: 24px;
    }
  }
  .el-dialog__body {
    padding-top: 0;
  }
}
</style>