index.vue 36 KB

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