index.vue 37 KB

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