index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760
  1. <template>
  2. <div class="appealBoxContainer">
  3. <div class="top">
  4. <Head :headText="headText"></Head>
  5. </div>
  6. <div class="bottom">
  7. <div class="appealBox">
  8. <div class="appealBoxLeft">
  9. <div class="title">
  10. <span class="Micbold">可申诉的未执行策略</span>
  11. <span v-if="appealsArr.length>0">{{appealsArr.length}}</span>
  12. </div>
  13. <div class="left">
  14. <div style="margin-bottom:24px" v-for="(item2,index) in appealsArr1" :key="index">
  15. <p class="date MicrYaHei">{{item2.date?formatterStr(item2.date):'--'}}</p>
  16. <div class="execute">
  17. <div class="card" v-for="(item,index) in item2.children" :key="index+'i'">
  18. <div class="time">执行时间:{{item.recommend?formatterStr2(item.recommend.time):'--'}}</div>
  19. <div class="advice MicrYaHei">
  20. <span>策略建议</span>
  21. <span>冷机台数</span>
  22. <span>{{item.recommend.chillerNumSetL||'--'}}大{{item.recommend.chillerNumSetS||'--'}}小</span>
  23. <span>冷机出水温度</span>
  24. <span>{{item.recommend.chillWaterOutTempSet||'--'}}°C</span>
  25. </div>
  26. <div class="advice">
  27. <span>实际执行</span>
  28. <span>冷机台数</span>
  29. <span>{{item.real?item.real.chillerNumSetLOrg:'--'}}大{{item.real?item.real.chillerNumSetSOrg:'--'}}小</span>
  30. <span>冷机出水温度</span>
  31. <span>{{item.real?item.real.chillWaterOutTempSetOrg:'--'}}°C</span>
  32. </div>
  33. <div class="remark">备注:{{item.remarks||'--'}}</div>
  34. <div class="refuteBox">
  35. <div class="refute" v-if="item.status=='305'">
  36. <img src="../../assets/error.png" alt />
  37. <span>已驳回</span>
  38. </div>
  39. <div v-else class="refute2"></div>
  40. <div class="btn">
  41. <el-button size="mini" @click="viewSnapshots = true">查看快照</el-button>
  42. <el-button size="mini" type="primary" @click="menu(item)">申诉</el-button>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="appealBoxCenter">
  51. <div class="title">
  52. <span class="Micbold">审核中</span>
  53. <span v-if="InAuditArr.length>0">{{InAuditArr.length}}</span>
  54. </div>
  55. <div class="center">
  56. <div class="card" v-for="(item,index) in InAuditArr" :key="index">
  57. <div class="time">
  58. <span class="time-box">
  59. <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
  60. <span>{{item.title||'--'}}</span>
  61. </span>
  62. <span class="backout" @click="backoutClick(item,'revoke')">
  63. <img src="../../assets/backout.png" />撤销申请
  64. </span>
  65. </div>
  66. <div class="remark">申请原因:{{item.reasonType||'--'}}</div>
  67. <div class="remark">{{item.reason||'--'}}</div>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="appealBoxRight" ref="appealBoxRight">
  72. <div class="title Micbold">审核完成/超时未申诉</div>
  73. <div class="right">
  74. <div class="card" v-for="(item,index) in auditCompletedArr" :key="index">
  75. <div class="remark">
  76. <div class="remark-left">审批时间:{{item.updateTime?formatter1(item.updateTime):'--'}}</div>
  77. <div class="remark-right Micbold">
  78. <span
  79. :class="item.status=='303'?'backout':(item.status=='306'?'backout1':'backout2')"
  80. >
  81. <img
  82. :src="item.status=='303'?require('../../assets/completed.png'):(item.status=='306'?require('../../assets/gray.png'):require('../../assets/error.png'))"
  83. />
  84. {{item.status=='303'?'申诉成功':(item.status=='306'?'未申诉':'申诉失败')}}
  85. </span>
  86. </div>
  87. </div>
  88. <div class="time">
  89. <span>{{item.pushTime?formatter(item.pushTime):'--'}}</span>
  90. <span>{{item.title||'--'}}</span>
  91. </div>
  92. </div>
  93. <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
  94. <div
  95. class="loadingIcon"
  96. style="width: 50px;
  97. text-align: center;
  98. margin: 0 auto;
  99. margin-top: 20px;
  100. margin-bottom: 30px;"
  101. >
  102. <i v-if="loading" class="el-icon-loading"></i>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="view-dialog">
  110. <el-dialog
  111. title="策略推出时状况"
  112. :visible.sync="viewSnapshots"
  113. :close-on-click-modal="false"
  114. width="1260px"
  115. >
  116. <ev-snapshots-dialog :appealsDate="appealsDate"></ev-snapshots-dialog>
  117. </el-dialog>
  118. </div>
  119. </div>
  120. </template>
  121. <script>
  122. import Head from "../main/index";
  123. import {
  124. queryWorkflow,
  125. queryChillerExecuteInfo,
  126. querySimpleInfo
  127. } from "@/api/appeal/appeal.js";
  128. import EvSnapshotsDialog from "../evaluate/evSnapshotsDialog";
  129. import { updateWorkflow } from "@/api/audit/audit.js";
  130. var moment = require("moment");
  131. import "moment/locale/zh-cn";
  132. export default {
  133. data() {
  134. return {
  135. headText: "未执行申诉",
  136. appealsArr: [], //可申诉的未执行策,
  137. appealsArr1: [],
  138. InAuditArr: [], //审核中
  139. auditCompletedArr: [], //审核完成,超时未申诉
  140. appealsDate: "",
  141. viewSnapshots: false,
  142. newArr: [],
  143. busy: true,
  144. page: 1,
  145. pageSize: 15,
  146. loading: false
  147. };
  148. },
  149. components: {
  150. Head,
  151. EvSnapshotsDialog
  152. },
  153. mounted() {
  154. this.init();
  155. },
  156. methods: {
  157. backoutClick(item, type) {
  158. let params = {
  159. postParams: {
  160. id: item.id,
  161. commit: type,
  162. roles: [1002],
  163. updateUser: this.$store.state.userInfo.userId
  164. }
  165. };
  166. updateWorkflow(params).then(res => {
  167. if (res.result == "success") {
  168. this.$message.success("撤销成功");
  169. } else {
  170. this.$message.error("撤销失败: " + res.message);
  171. }
  172. this.init();
  173. });
  174. },
  175. formatter(date) {
  176. return moment.unix(date / 1000).format("YYYY.MM.DD hh:mm");
  177. },
  178. formatter1(date) {
  179. return moment.unix(date / 1000).format("YYYY.MM.DD");
  180. },
  181. formatterStr(str) {
  182. if (str) {
  183. return (
  184. str.substring(0, 4) +
  185. "." +
  186. str.substring(4, 6) +
  187. "." +
  188. str.substring(6, 8)
  189. );
  190. }
  191. },
  192. formatterStr2(str) {
  193. if (str) {
  194. return str.substring(0, 2) + ":" + str.substring(2, 4);
  195. }
  196. },
  197. menu(item) {
  198. this.$router.push({
  199. path: "/appeal/appealDetail",
  200. query: { item: JSON.stringify(item) }
  201. });
  202. },
  203. init() {
  204. this.appealsIng();
  205. this.auditCompletedIng();
  206. this.InAuditIng();
  207. },
  208. // 可申诉的未执行策略
  209. appealsIng() {
  210. let params = {
  211. postParams: {
  212. criteria: {
  213. projectId: this.$store.state.projectId,
  214. trackerId: 3, //固定为3
  215. status: [301, 305] //固定为未申诉和已驳回
  216. },
  217. withColumns: ["customAttribute"]
  218. }
  219. };
  220. queryWorkflow(params).then(res => {
  221. let arr = [];
  222. arr = res.content ? res.content : [];
  223. if (arr.length > 0) {
  224. arr.forEach(item => {
  225. arr.push(item.commandId);
  226. this.newArr.push(item);
  227. });
  228. console.log(this.newArr);
  229. this.queryExecute(arr);
  230. }
  231. });
  232. },
  233. queryExecute(id) {
  234. this.appealsArr = [];
  235. let params = {
  236. postParams: {
  237. criteria: {
  238. id: id
  239. }
  240. }
  241. };
  242. queryChillerExecuteInfo(params).then(res => {
  243. let arr1 = [],
  244. arr2 = [],
  245. arr3 = [];
  246. arr1 = res.data ? res.data : [];
  247. if (arr1.length > 0) {
  248. arr1.forEach(item => {
  249. this.newArr.forEach(item2 => {
  250. if (item.recommend.appealId == item2.id) {
  251. let obj = Object.assign(item, item2);
  252. this.appealsArr.push(obj);
  253. this.appealsDate = this.appealsArr[0].recommend.date;
  254. }
  255. });
  256. });
  257. if (this.appealsArr.length > 0) {
  258. this.appealsArr.forEach(el => {
  259. arr3.push(el.recommend.date);
  260. });
  261. }
  262. let arrNew = this.unique(arr3);
  263. arrNew.forEach(item => {
  264. let obj1 = {
  265. date: item,
  266. children: []
  267. };
  268. this.appealsArr1.push(obj1);
  269. });
  270. this.appealsArr1.forEach(item1 => {
  271. this.appealsArr.forEach(item2 => {
  272. if (item1.date == item2.recommend.date) {
  273. item1.children.push(item2);
  274. }
  275. });
  276. });
  277. }
  278. });
  279. },
  280. unique(array) {
  281. var res = [];
  282. for (var i = 0, len = array.length; i < len; i++) {
  283. var current = array[i];
  284. if (res.indexOf(current) === -1) {
  285. res.push(current);
  286. }
  287. }
  288. return res;
  289. },
  290. formatt(str) {
  291. return str.moment().format("d");
  292. },
  293. // 审核完成、超时未申诉
  294. auditCompletedIng(flag) {
  295. let params = {
  296. postParams: {
  297. criteria: {
  298. projectId: this.$store.state.projectId,
  299. trackerId: 3,
  300. status: [303, 304, 306],
  301. createTime: {
  302. $gte: "20200216000000" //三天以内
  303. }
  304. },
  305. size: this.pageSize,
  306. page: this.page,
  307. withColumns: ["customAttribute"]
  308. }
  309. };
  310. queryWorkflow(params).then(res => {
  311. // this.auditCompletedArr = res.content ? res.content : [];
  312. if (flag) {
  313. this.loading = true;
  314. // 多次加载数据
  315. this.auditCompletedArr = this.auditCompletedArr.concat(
  316. res.content || []
  317. );
  318. if (res.content && res.content.length > 0) {
  319. this.busy = false;
  320. } else {
  321. this.loading = false;
  322. this.busy = true;
  323. }
  324. } else {
  325. this.auditCompletedArr = res.content;
  326. this.busy = false;
  327. }
  328. });
  329. },
  330. loadMore: function() {
  331. this.busy = true;
  332. this.loading = true;
  333. setTimeout(() => {
  334. this.page++;
  335. this.auditCompletedIng(true);
  336. }, 1000);
  337. },
  338. // 审核中
  339. InAuditIng() {
  340. let params = {
  341. postParams: {
  342. criteria: {
  343. projectId: this.$store.state.projectId,
  344. trackerId: 3,
  345. status: 302
  346. },
  347. withColumns: ["customAttribute"]
  348. }
  349. };
  350. queryWorkflow(params).then(res => {
  351. this.InAuditArr = res.content ? res.content : [];
  352. });
  353. }
  354. }
  355. };
  356. </script>
  357. <style lang="scss" scoped>
  358. .appealBoxContainer {
  359. height: 100%;
  360. display: flex;
  361. .top {
  362. height: 100px;
  363. }
  364. .bottom {
  365. flex: 1;
  366. .appealBox {
  367. height: 100%;
  368. background: #fff;
  369. display: flex;
  370. justify-content: space-between;
  371. padding: 0 24px;
  372. .appealBoxLeft {
  373. flex: 1;
  374. height: 100%;
  375. display: flex;
  376. flex-direction: column;
  377. // overflow: scroll;
  378. .title {
  379. display: flex;
  380. align-items: center;
  381. padding-top: 116px;
  382. span:nth-of-type(1) {
  383. height: 24px;
  384. font-size: 16px;
  385. color: rgba(31, 36, 41, 1);
  386. line-height: 21px;
  387. margin-right: 8px;
  388. }
  389. span:nth-of-type(2) {
  390. width: 18px;
  391. height: 18px;
  392. background: rgba(245, 74, 69, 1);
  393. border-radius: 9px;
  394. border: 1px solid rgba(255, 255, 255, 1);
  395. font-size: 12px;
  396. font-family: ArialMT;
  397. color: rgba(255, 255, 255, 1);
  398. line-height: 18px;
  399. text-align: center;
  400. }
  401. }
  402. .date {
  403. height: 18px;
  404. font-size: 12px;
  405. color: rgba(141, 147, 153, 1);
  406. line-height: 16px;
  407. margin: 0;
  408. text-align: center;
  409. }
  410. .left {
  411. flex: 1;
  412. overflow: scroll;
  413. .execute {
  414. .card {
  415. min-width: 470px;
  416. background: rgba(255, 255, 255, 1);
  417. border-radius: 4px;
  418. border: 1px solid rgba(228, 230, 231, 1);
  419. margin-top: 8px;
  420. padding: 16px 20px;
  421. cursor: pointer;
  422. .time {
  423. height: 24px;
  424. font-size: 16px;
  425. font-family: PingFangSC-Regular, PingFang SC;
  426. font-weight: 400;
  427. color: rgba(31, 36, 41, 1);
  428. line-height: 22px;
  429. margin-bottom: 8px;
  430. }
  431. .advice {
  432. margin-top: 4px;
  433. height: 40px;
  434. background: rgba(245, 246, 247, 1);
  435. border-radius: 1px;
  436. display: flex;
  437. justify-content: space-between;
  438. padding-left: 16px;
  439. padding-right: 20px;
  440. align-items: center;
  441. span:nth-of-type(1),
  442. span:nth-of-type(3),
  443. span:nth-of-type(5) {
  444. height: 22px;
  445. font-size: 14px;
  446. color: rgba(31, 36, 41, 1);
  447. }
  448. span:nth-of-type(3) {
  449. width: 115px;
  450. display: inline-block;
  451. }
  452. span:nth-of-type(5) {
  453. width: 65px;
  454. display: inline-block;
  455. }
  456. span:nth-of-type(2),
  457. span:nth-of-type(4) {
  458. height: 18px;
  459. font-size: 12px;
  460. color: rgba(141, 147, 153, 1);
  461. }
  462. span:nth-of-type(1) {
  463. width: 56px;
  464. margin-right: 36px;
  465. }
  466. span:nth-of-type(2) {
  467. margin-right: 8px;
  468. }
  469. span:nth-of-type(3) {
  470. margin-right: 24px;
  471. }
  472. span:nth-of-type(4) {
  473. margin-right: 8px;
  474. }
  475. }
  476. .remark {
  477. height: 22px;
  478. font-size: 14px;
  479. font-family: PingFangSC-Regular, PingFang SC;
  480. font-weight: 400;
  481. color: rgba(100, 108, 115, 1);
  482. line-height: 20px;
  483. margin-top: 16px;
  484. margin-bottom: 24px;
  485. }
  486. .refuteBox {
  487. display: flex;
  488. justify-content: space-between;
  489. align-items: center;
  490. .refute {
  491. padding: 0 12px;
  492. // width: 85px;
  493. height: 24px;
  494. background: #fde3e2;
  495. border-radius: 12px;
  496. display: flex;
  497. align-items: center;
  498. img {
  499. width: 14px;
  500. height: 14px;
  501. margin-right: 4px;
  502. }
  503. span {
  504. display: inline-block;
  505. height: 22px;
  506. font-size: 14px;
  507. font-family: MicrosoftYaHeiSemibold;
  508. color: rgba(245, 78, 69, 1);
  509. line-height: 22px;
  510. }
  511. }
  512. .refute2 {
  513. padding: 0 12px;
  514. // width: 85px;
  515. height: 24px;
  516. background: #fff;
  517. border-radius: 12px;
  518. display: flex;
  519. align-items: center;
  520. }
  521. .btn {
  522. // display: flex;
  523. // justify-content: flex-end;
  524. .el-button {
  525. width: 80px;
  526. height: 28px;
  527. }
  528. }
  529. }
  530. }
  531. }
  532. .card:after {
  533. display: block;
  534. clear: both;
  535. content: "";
  536. visibility: hidden;
  537. height: 0;
  538. }
  539. }
  540. }
  541. .appealBoxCenter {
  542. flex: 1;
  543. height: 100%;
  544. margin: 0 24px;
  545. // overflow: scroll;
  546. // height: 100%;
  547. display: flex;
  548. flex-direction: column;
  549. .title {
  550. display: flex;
  551. margin-bottom: 16px;
  552. padding-top: 116px;
  553. span:nth-of-type(1) {
  554. height: 24px;
  555. font-size: 16px;
  556. color: rgba(31, 36, 41, 1);
  557. line-height: 21px;
  558. margin-right: 8px;
  559. }
  560. span:nth-of-type(2) {
  561. text-align: center;
  562. line-height: 18px;
  563. width: 18px;
  564. height: 18px;
  565. background: rgba(245, 74, 69, 1);
  566. border-radius: 9px;
  567. border: 1px solid rgba(255, 255, 255, 1);
  568. font-size: 12px;
  569. font-family: ArialMT;
  570. color: rgba(255, 255, 255, 1);
  571. }
  572. }
  573. .center {
  574. margin: 0 18px;
  575. min-width: 410px;
  576. flex: 1;
  577. overflow: scroll;
  578. .card {
  579. margin-top: 8px;
  580. cursor: pointer;
  581. background: rgba(255, 255, 255, 1);
  582. border-radius: 4px;
  583. border: 1px solid rgba(228, 230, 231, 1);
  584. padding: 16px 20px;
  585. .time {
  586. margin-bottom: 6px;
  587. height: 24px;
  588. font-size: 16px;
  589. font-family: PingFangSC-Regular, PingFang SC;
  590. font-weight: 400;
  591. color: rgba(31, 36, 41, 1);
  592. line-height: 22px;
  593. .time-box {
  594. display: flex;
  595. align-items: center;
  596. span:nth-of-type(1) {
  597. width: 140px;
  598. }
  599. }
  600. .backout {
  601. display: flex;
  602. align-items: center;
  603. font-size: 14px;
  604. font-family: MicrosoftYaHei;
  605. color: rgba(0, 145, 255, 1);
  606. float: right;
  607. margin-right: 20px;
  608. display: none;
  609. img {
  610. height: 15px;
  611. width: 18px;
  612. }
  613. }
  614. }
  615. .remark {
  616. margin-top: 4px;
  617. height: 22px;
  618. font-size: 14px;
  619. font-family: PingFangSC-Regular, PingFang SC;
  620. font-weight: 400;
  621. color: rgba(100, 108, 115, 1);
  622. line-height: 20px;
  623. }
  624. }
  625. .card:hover {
  626. border: 1px solid rgba(0, 145, 255, 1);
  627. }
  628. .card:hover .backout {
  629. display: block;
  630. }
  631. .loadingIcon {
  632. width: 50px;
  633. text-align: center;
  634. margin: 0 auto;
  635. margin-top: 20px;
  636. margin-bottom: 30px;
  637. }
  638. }
  639. }
  640. .appealBoxRight {
  641. flex: 1;
  642. height: 100%;
  643. display: flex;
  644. flex-direction: column;
  645. .title {
  646. padding-top: 116px;
  647. margin-bottom: 16px;
  648. }
  649. .right {
  650. flex: 1;
  651. overflow: scroll;
  652. min-width: 310px;
  653. .card {
  654. margin-bottom: 8px;
  655. background: rgba(255, 255, 255, 1);
  656. border-radius: 4px;
  657. border: 1px solid rgba(228, 230, 231, 1);
  658. padding: 16px 20px;
  659. cursor: pointer;
  660. .remark {
  661. margin-bottom: 14px;
  662. display: flex;
  663. justify-content: space-between;
  664. align-items: center;
  665. .remark-left {
  666. height: 22px;
  667. font-size: 14px;
  668. font-family: PingFangSC-Regular, PingFang SC;
  669. font-weight: 400;
  670. color: rgba(100, 108, 115, 1);
  671. line-height: 20px;
  672. }
  673. .remark-right {
  674. height: 24px;
  675. height: 22px;
  676. font-size: 14px;
  677. line-height: 22px;
  678. img {
  679. width: 14px;
  680. height: 14px;
  681. margin-right: 4px;
  682. }
  683. .backout {
  684. display: flex;
  685. justify-content: space-between;
  686. align-items: center;
  687. padding-left: 12px;
  688. padding-right: 14px;
  689. background: rgba(217, 245, 214, 1);
  690. color: rgba(52, 199, 36, 1);
  691. border-radius: 12px;
  692. }
  693. .backout1 {
  694. display: flex;
  695. justify-content: space-between;
  696. align-items: center;
  697. padding-left: 12px;
  698. padding-right: 14px;
  699. background: rgba(239, 240, 241, 1);
  700. color: rgba(141, 147, 153, 1);
  701. border-radius: 12px;
  702. }
  703. .backout2 {
  704. display: flex;
  705. justify-content: space-between;
  706. align-items: center;
  707. padding-left: 12px;
  708. padding-right: 14px;
  709. background: rgba(253, 227, 226, 1);
  710. color: rgba(245, 78, 69, 1);
  711. border-radius: 12px;
  712. }
  713. }
  714. }
  715. .time {
  716. padding: 8px 12px;
  717. background: rgba(248, 249, 250, 1);
  718. border-radius: 1px;
  719. height: 22px;
  720. font-size: 14px;
  721. font-family: PingFangSC-Regular, PingFang SC;
  722. font-weight: 400;
  723. color: rgba(31, 36, 41, 1);
  724. line-height: 20px;
  725. span:nth-of-type(2) {
  726. margin-left: 10px;
  727. margin-right: 5px;
  728. }
  729. }
  730. }
  731. }
  732. }
  733. }
  734. }
  735. }
  736. </style>
  737. <style lang="scss">
  738. .view-dialog {
  739. .el-dialog__header {
  740. padding: 16px 28px 0 32px;
  741. .el-dialog__title {
  742. height: 24px;
  743. font-size: 16px;
  744. font-family: PingFangSC-Medium, PingFang SC;
  745. font-weight: 500;
  746. color: rgba(31, 36, 41, 1);
  747. line-height: 24px;
  748. }
  749. }
  750. .el-dialog__body {
  751. padding-top: 0;
  752. }
  753. }
  754. </style>