index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. <template>
  2. <div>
  3. <Head :headText="headText"></Head>
  4. <div class="appealBox">
  5. <div class="left">
  6. <div class="title">
  7. <span>可申诉的未执行策略</span>
  8. <span>{{data.length}}</span>
  9. </div>
  10. <div class="execute" v-for="(item,index) in data" :key="index" @click="menu">
  11. <p class="date">{{item.date}}</p>
  12. <div class="card-box">
  13. <div class="card" v-for="(item2,index) in item.info" :key="index+'i'">
  14. <div class="time">执行时间:{{item2.time}}</div>
  15. <div class="advice">
  16. <span>策略建议</span>
  17. <span>冷机台数</span>
  18. <span>{{item2.ad1}}大{{item2.ad2}}小</span>
  19. <span>冷机出水温度</span>
  20. <span>{{item2.temp1}}°C</span>
  21. </div>
  22. <div class="advice">
  23. <span>实际执行</span>
  24. <span>冷机台数</span>
  25. <span>{{item2.re1}}大{{item2.re2}}小</span>
  26. <span>冷机出水温度</span>
  27. <span>{{item2.temp2}}°C</span>
  28. </div>
  29. <div class="remark">备注:{{item2.remark}}</div>
  30. <div class="btn">
  31. <el-button size="mini">查看快照</el-button>
  32. <el-button size="mini" type="primary">申诉</el-button>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="center">
  39. <div class="title">
  40. <span>审核中</span>
  41. <span>{{review.length}}</span>
  42. </div>
  43. <div class="card" v-for="(item,index) in review" :key="index" @click="menu">
  44. <div class="time">
  45. {{item.date}} {{item.title}}
  46. <span class="backout">
  47. <img src="../../assets/backout.png" />撤销申请
  48. </span>
  49. </div>
  50. <div class="remark">申请原因:{{item.reason}}</div>
  51. <div class="remark">{{item.advice}}</div>
  52. </div>
  53. </div>
  54. <div class="right">
  55. <div class="title">审核完成/超时未申诉</div>
  56. <div class="card" v-for="(item,index) in complete" :key="index" @click="menu">
  57. <div class="remark">
  58. <div class="remark-left">审批时间:{{item.time}}</div>
  59. <div class="remark-right">
  60. <span :class="item.sign>5?'backout':(item.sign>2?'backout1':'backout2')">
  61. <img :src="item.img" />
  62. {{item.text}}
  63. </span>
  64. </div>
  65. </div>
  66. <div class="time">
  67. <span>{{item.time}}</span>
  68. <span>{{item.date}}</span>
  69. <span>{{item.title}}</span>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. </template>
  76. <script>
  77. import Head from "../main/index";
  78. import {
  79. queryAppeals,
  80. queryAuditCompleted,
  81. queryInAudit
  82. } from "@/api/appeal/appeal.js";
  83. export default {
  84. data() {
  85. return {
  86. headText: "申诉",
  87. appealsArr: [],
  88. InAuditArr: [],
  89. auditCompletedArr: [],
  90. data: [
  91. {
  92. date: "20202.01.13",
  93. info: [
  94. {
  95. time: "08:30",
  96. ad1: 1,
  97. ad2: 1,
  98. temp1: "8.0",
  99. re1: 1,
  100. re2: 0,
  101. temp2: "10.0",
  102. remark: "冷水温度过高,没有及时按策略执行"
  103. },
  104. {
  105. time: "08:30",
  106. ad1: 1,
  107. ad2: 1,
  108. temp1: "8.0",
  109. re1: 1,
  110. re2: 0,
  111. temp2: "10.0",
  112. remark: "冷水温度过高,没有及时按策略执行"
  113. },
  114. {
  115. time: "08:30",
  116. ad1: 1,
  117. ad2: 1,
  118. temp1: "8.0",
  119. re1: 1,
  120. re2: 0,
  121. temp2: "10.0",
  122. remark: "冷水温度过高,没有及时按策略执行"
  123. }
  124. ]
  125. },
  126. {
  127. date: "20202.01.13",
  128. info: [
  129. {
  130. time: "08:30",
  131. ad1: 1,
  132. ad2: 1,
  133. temp1: "8.0",
  134. re1: 1,
  135. re2: 0,
  136. temp2: "10.0",
  137. remark: "冷水温度过高,没有及时按策略执行"
  138. },
  139. {
  140. time: "08:30",
  141. ad1: 1,
  142. ad2: 1,
  143. temp1: "8.0",
  144. re1: 1,
  145. re2: 0,
  146. temp2: "10.0",
  147. remark: "冷水温度过高,没有及时按策略执行"
  148. }
  149. ]
  150. }
  151. ],
  152. review: [
  153. {
  154. date: "2020.02.12 08:30",
  155. title: "策略未执行申诉",
  156. reason: "策略原因",
  157. advice: "冷水温度过高,没有及时按策略执行"
  158. },
  159. {
  160. date: "2020.02.12 08:30",
  161. title: "策略未执行申诉",
  162. reason: "策略原因",
  163. advice: "冷水温度过高,没有及时按策略执行"
  164. }
  165. ],
  166. complete: [
  167. {
  168. date: "08:30",
  169. title: "策略未执行申诉",
  170. time: "2020.01.30",
  171. sign: 7,
  172. img: require("../../assets/completed.png"),
  173. text: "申诉成功"
  174. },
  175. {
  176. date: "08:30",
  177. title: "策略未执行申诉",
  178. time: "2020.01.30",
  179. sign: 5,
  180. img: require("../../assets/gray.png"),
  181. text: "未申诉"
  182. },
  183. {
  184. date: "08:30",
  185. title: "策略未执行申诉",
  186. time: "2020.01.30",
  187. sign: 2,
  188. img: require("../../assets/error.png"),
  189. text: "申诉失败"
  190. }
  191. ]
  192. };
  193. },
  194. components: {
  195. Head
  196. },
  197. mounted() {
  198. this.init();
  199. },
  200. methods: {
  201. menu() {
  202. this.$router.push("/appeal/appealDetail");
  203. },
  204. init() {
  205. this.appealsIng();
  206. this.auditCompletedIng();
  207. this.InAuditIng();
  208. },
  209. appealsIng() {
  210. let params = {
  211. postParams: {
  212. criteria: {
  213. projectId: "Pj4419000005",
  214. date: {
  215. $gte: "20200216"
  216. },
  217. isExecuted: false,
  218. appealStatus: [1, 5]
  219. }
  220. }
  221. };
  222. queryAppeals(params).then(res => {
  223. this.appealsArr = res.content ? res.content : [];
  224. });
  225. },
  226. auditCompletedIng() {
  227. this.appealsArr = [];
  228. let params = {
  229. postParams: {
  230. criteria: {
  231. projectId: "Pj4419000005",
  232. date: {
  233. $gte: "20200216"
  234. },
  235. isExecuted: false,
  236. appealStatus: [3, 4, 6]
  237. }
  238. }
  239. };
  240. queryAuditCompleted(params).then(res => {
  241. this.auditCompletedArr = res.content ? res.content : [];
  242. });
  243. },
  244. InAuditIng() {
  245. let params = {
  246. postParams: {
  247. criteria: {
  248. projectId: "Pj1101080002",
  249. trackerId: 3,
  250. status: 301
  251. },
  252. withColumns: ["customAttribute"]
  253. }
  254. };
  255. queryInAudit(params).then(res => {
  256. this.InAuditArr = res.content ? res.content : [];
  257. });
  258. }
  259. }
  260. };
  261. </script>
  262. <style lang="scss" scoped>
  263. .appealBox {
  264. background: #fff;
  265. display: flex;
  266. justify-content: space-between;
  267. padding: 20px;
  268. .left {
  269. flex: 1;
  270. min-width: 420px;
  271. .title {
  272. display: flex;
  273. align-items: center;
  274. span:nth-of-type(1) {
  275. height: 24px;
  276. font-size: 16px;
  277. font-family: MicrosoftYaHeiSemibold;
  278. color: rgba(31, 36, 41, 1);
  279. line-height: 21px;
  280. margin-right: 8px;
  281. }
  282. span:nth-of-type(2) {
  283. width: 18px;
  284. height: 18px;
  285. background: rgba(245, 74, 69, 1);
  286. border-radius: 9px;
  287. border: 1px solid rgba(255, 255, 255, 1);
  288. font-size: 12px;
  289. font-family: ArialMT;
  290. color: rgba(255, 255, 255, 1);
  291. line-height: 18px;
  292. text-align: center;
  293. }
  294. }
  295. .execute {
  296. .date {
  297. height: 18px;
  298. font-size: 12px;
  299. font-family: MicrosoftYaHei;
  300. color: rgba(141, 147, 153, 1);
  301. line-height: 16px;
  302. margin: 0;
  303. text-align: center;
  304. }
  305. .card-box {
  306. height: 500px;
  307. overflow: scroll;
  308. margin-bottom: 24px;
  309. .card {
  310. background: rgba(255, 255, 255, 1);
  311. border-radius: 4px;
  312. border: 1px solid rgba(228, 230, 231, 1);
  313. margin-top: 8px;
  314. padding: 16px 20px;
  315. cursor: pointer;
  316. .time {
  317. height: 24px;
  318. font-size: 16px;
  319. font-family: PingFangSC-Regular, PingFang SC;
  320. font-weight: 400;
  321. color: rgba(31, 36, 41, 1);
  322. line-height: 22px;
  323. margin-bottom: 8px;
  324. }
  325. .advice {
  326. margin-top: 4px;
  327. height: 40px;
  328. background: rgba(245, 246, 247, 1);
  329. border-radius: 1px;
  330. display: flex;
  331. justify-content: space-between;
  332. padding-left: 16px;
  333. padding-right: 20px;
  334. align-items: center;
  335. span {
  336. font-family: MicrosoftYaHei;
  337. }
  338. span:nth-of-type(1),
  339. span:nth-of-type(3),
  340. span:nth-of-type(5) {
  341. height: 22px;
  342. font-size: 14px;
  343. color: rgba(31, 36, 41, 1);
  344. }
  345. span:nth-of-type(2),
  346. span:nth-of-type(4) {
  347. height: 18px;
  348. font-size: 12px;
  349. color: rgba(141, 147, 153, 1);
  350. }
  351. span:nth-of-type(1) {
  352. width: 56px;
  353. margin-right: 36px;
  354. }
  355. span:nth-of-type(2) {
  356. margin-right: 8px;
  357. }
  358. span:nth-of-type(3) {
  359. margin-right: 24px;
  360. }
  361. span:nth-of-type(4) {
  362. margin-right: 8px;
  363. }
  364. }
  365. .remark {
  366. height: 22px;
  367. font-size: 14px;
  368. font-family: PingFangSC-Regular, PingFang SC;
  369. font-weight: 400;
  370. color: rgba(100, 108, 115, 1);
  371. line-height: 20px;
  372. margin-top: 16px;
  373. margin-bottom: 24px;
  374. }
  375. .btn {
  376. display: flex;
  377. justify-content: flex-end;
  378. .el-button {
  379. width: 80px;
  380. height: 28px;
  381. }
  382. }
  383. }
  384. }
  385. .card:after {
  386. display: block;
  387. clear: both;
  388. content: "";
  389. visibility: hidden;
  390. height: 0;
  391. }
  392. }
  393. }
  394. .center {
  395. flex: 1;
  396. margin: 0 18px;
  397. min-width: 410px;
  398. .title {
  399. display: flex;
  400. margin-bottom: 16px;
  401. span:nth-of-type(1) {
  402. height: 24px;
  403. font-size: 16px;
  404. font-family: MicrosoftYaHeiSemibold;
  405. color: rgba(31, 36, 41, 1);
  406. line-height: 21px;
  407. margin-right: 8px;
  408. }
  409. span:nth-of-type(2) {
  410. text-align: center;
  411. line-height: 18px;
  412. width: 18px;
  413. height: 18px;
  414. background: rgba(245, 74, 69, 1);
  415. border-radius: 9px;
  416. border: 1px solid rgba(255, 255, 255, 1);
  417. font-size: 12px;
  418. font-family: ArialMT;
  419. color: rgba(255, 255, 255, 1);
  420. }
  421. }
  422. .card {
  423. margin-top: 8px;
  424. cursor: pointer;
  425. background: rgba(255, 255, 255, 1);
  426. border-radius: 4px;
  427. border: 1px solid rgba(228, 230, 231, 1);
  428. padding: 16px 20px;
  429. .time {
  430. margin-bottom: 6px;
  431. height: 24px;
  432. font-size: 16px;
  433. font-family: PingFangSC-Regular, PingFang SC;
  434. font-weight: 400;
  435. color: rgba(31, 36, 41, 1);
  436. line-height: 22px;
  437. .backout {
  438. display: flex;
  439. align-items: center;
  440. font-size: 14px;
  441. font-family: MicrosoftYaHei;
  442. color: rgba(0, 145, 255, 1);
  443. float: right;
  444. margin-right: 20px;
  445. display: none;
  446. img {
  447. height: 15px;
  448. width: 18px;
  449. }
  450. }
  451. }
  452. .remark {
  453. margin-top: 4px;
  454. height: 22px;
  455. font-size: 14px;
  456. font-family: PingFangSC-Regular, PingFang SC;
  457. font-weight: 400;
  458. color: rgba(100, 108, 115, 1);
  459. line-height: 20px;
  460. }
  461. }
  462. .card:hover {
  463. border: 1px solid rgba(0, 145, 255, 1);
  464. }
  465. .card:hover .backout {
  466. display: block;
  467. }
  468. }
  469. .right {
  470. flex: 1;
  471. min-width: 310px;
  472. .title {
  473. margin-bottom: 16px;
  474. }
  475. .card {
  476. margin-bottom: 8px;
  477. background: rgba(255, 255, 255, 1);
  478. border-radius: 4px;
  479. border: 1px solid rgba(228, 230, 231, 1);
  480. padding: 16px 20px;
  481. cursor: pointer;
  482. .remark {
  483. margin-bottom: 14px;
  484. display: flex;
  485. justify-content: space-between;
  486. align-items: center;
  487. .remark-left {
  488. height: 22px;
  489. font-size: 14px;
  490. font-family: PingFangSC-Regular, PingFang SC;
  491. font-weight: 400;
  492. color: rgba(100, 108, 115, 1);
  493. line-height: 20px;
  494. }
  495. .remark-right {
  496. height: 24px;
  497. height: 22px;
  498. font-size: 14px;
  499. font-family: MicrosoftYaHeiSemibold;
  500. line-height: 22px;
  501. img {
  502. width: 14px;
  503. height: 14px;
  504. margin-right: 4px;
  505. }
  506. .backout {
  507. display: flex;
  508. justify-content: space-between;
  509. align-items: center;
  510. padding-left: 12px;
  511. padding-right: 14px;
  512. background: rgba(217, 245, 214, 1);
  513. color: rgba(52, 199, 36, 1);
  514. border-radius: 12px;
  515. }
  516. .backout1 {
  517. display: flex;
  518. justify-content: space-between;
  519. align-items: center;
  520. padding-left: 12px;
  521. padding-right: 14px;
  522. background: rgba(239, 240, 241, 1);
  523. color: rgba(141, 147, 153, 1);
  524. border-radius: 12px;
  525. }
  526. .backout2 {
  527. display: flex;
  528. justify-content: space-between;
  529. align-items: center;
  530. padding-left: 12px;
  531. padding-right: 14px;
  532. background: rgba(253, 227, 226, 1);
  533. color: rgba(245, 78, 69, 1);
  534. border-radius: 12px;
  535. }
  536. }
  537. }
  538. .time {
  539. padding: 8px 12px;
  540. background: rgba(248, 249, 250, 1);
  541. border-radius: 1px;
  542. height: 22px;
  543. font-size: 14px;
  544. font-family: PingFangSC-Regular, PingFang SC;
  545. font-weight: 400;
  546. color: rgba(31, 36, 41, 1);
  547. line-height: 20px;
  548. span:nth-of-type(2) {
  549. margin-left: 10px;
  550. margin-right: 5px;
  551. }
  552. }
  553. }
  554. }
  555. }
  556. </style>