index.vue 36 KB

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