index.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688
  1. <template>
  2. <main class='homepage'>
  3. <section class='homepage-cards-content'>
  4. <div v-for='(arr , index) in cardsList' :key='index' class="items-container">
  5. <section v-for="(item ,index) in arr" :key="index" class='cards-item' >
  6. <section class="card-item-title">
  7. <div>
  8. <img class="title-img" :src="imgSrc(item.smsxt)" />
  9. <h4>{{item.smsxtname}}</h4>
  10. </div>
  11. <img class="warning-img" :style='itemStyle(item)' src="../../assets/images/icons/warning.png" />
  12. </section>
  13. <section class='equipment-list-container'>
  14. <div class="more" @click.stop.capture="expandRestItems(item, index)" v-if="item.hasArrow" :style="{transform: item.expand ? 'rotate(0)' : 'rotate(180deg)'}">
  15. <img v-if="item.showColor" src="../../assets/images/icons/arrow.png">
  16. <img v-else src="../../assets/images/icons/grey.png">
  17. </div>
  18. <div class='equipment-list' v-if='item.assetTypeList'>
  19. <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.assetTypeList' :key="index">
  20. <div class='equip-name' >
  21. <h5>{{equip.category_name}}</h5>
  22. <div class='exception-number' v-if="equip.is_exception_num">{{equip.is_exception_num}}</div>
  23. </div>
  24. <section >
  25. <div class='equip-statis'>
  26. <span class='equip-number'>{{equip.asset_num}}</span>
  27. <span class='equip-unit'>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span>
  28. </div>
  29. <!-- <div>
  30. <em v-if='false'>维保中</em>
  31. </div> -->
  32. </section>
  33. </div>
  34. </div>
  35. <div class='equipment-list' v-if='item.restAssetTypeList.length && item.expand' style="padding-top:0;">
  36. <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.restAssetTypeList' :key="index">
  37. <div class='equip-name' >
  38. <h5>{{equip.category_name}}</h5>
  39. <div class='exception-number' v-if="equip.is_exception_num">{{equip.is_exception_num}}</div>
  40. </div>
  41. <section>
  42. <div class='equip-statis'>
  43. <span class='equip-number'>{{equip.asset_num}}</span>
  44. <span class='equip-unit'>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span>
  45. </div>
  46. <!-- <div>
  47. <em v-if='false'>维保中</em>
  48. </div> -->
  49. </section>
  50. </div>
  51. </div>
  52. </section>
  53. <!-- <div v-else class="empty-content" style="border-top:none; height:8rem;line-height:8rem;">暂无数据</div> -->
  54. <div class="alert-list-container" v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" >
  55. <div class="alert-list" @click="navToGanttPage(item)">
  56. <div class="alert-item" v-for="(option , index) in item.rptGlsmsStatisticsList" :key="index" >
  57. <div class="content" v-if="option.total">
  58. <div class="number">
  59. <div class="left">
  60. <img :src="srcList[option.type][option.level]" >
  61. <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' : '第三方检测' }}</span>
  62. </div>
  63. <p class="line">
  64. <span>
  65. <em :style="{color:item.level == 1? '#646C73':'#C13830'}">{{option.due_num}}</em>/<em>{{option.unfinished}}</em>/<em >{{option.total}}</em>
  66. </span>
  67. </p>
  68. </div>
  69. <p class='desc'>
  70. {{option.type ===1 ? '即将逾期/未完成/当月总任务' : '即将逾期/未完成/本年总任务' }}
  71. </p>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. <div v-else class='empty-content'>暂无数据</div>
  77. </section>
  78. </div>
  79. </section>
  80. <section class='homepage-nav-list'>
  81. <div class='main-title'>
  82. <span>说明书更新记录</span>
  83. <a class="more-records" @click='navToIntroduce'>更多</a>
  84. </div>
  85. <nav>
  86. <div class='table'>
  87. <div class='row table-header'>
  88. <article>日期 </article>
  89. <article>事项类型 </article>
  90. <article>更新内容 </article>
  91. </div>
  92. <div class='table-body'>
  93. <div class='row' v-for='(item , index) in changeList' :key='index'>
  94. <article>{{item.changedate}}</article>
  95. <article>{{item.type}}</article>
  96. <article :title="item.content">{{item.content || '--'}}</article>
  97. </div>
  98. </div>
  99. </div>
  100. </nav>
  101. </section>
  102. </main>
  103. </template>
  104. <script>
  105. import { getCardList, getQueryList, getChangeList } from '@/api/homePage'
  106. import {sortBy} from 'lodash'
  107. import moment from 'moment'
  108. export default {
  109. data() {
  110. return {
  111. cardsList: [
  112. [],
  113. []
  114. ],
  115. itemsList: [],
  116. changeList: [],
  117. plazaId:'',
  118. srcList: {
  119. 0: {
  120. 1: require('../../assets/images/icons/edit_blue_b.png'), //1.正常(蓝色) 2.警告(黄色) 3.严重(红色)
  121. 2: require('../../assets/images/icons/edit_yellow_b.png'),
  122. 3: require('../../assets/images/icons/edit_red_b.png')
  123. },
  124. 1: {
  125. 1: require('../../assets/images/icons/fix_blue_b.png'),
  126. 2: require('../../assets/images/icons/fix_yellow_b.png'),
  127. 3: require('../../assets/images/icons/fix_red_b.png')
  128. },
  129. 2: {
  130. 1: require('../../assets/images/icons/search_blue_b.png'),
  131. 2: require('../../assets/images/icons/search_yellow_b.png'),
  132. 3: require('../../assets/images/icons/search_red_b.png')
  133. }
  134. },
  135. }
  136. },
  137. created () {
  138. let plazaId = localStorage.getItem('PLAZAID')
  139. if (plazaId) {
  140. this.plazaId = plazaId
  141. }
  142. },
  143. mounted() {
  144. this.testAjax()
  145. this.getItemsQuery()
  146. this.getInstructionList()
  147. },
  148. methods: {
  149. imgSrc(code) {
  150. return require('../../assets/images/icons/' + code + '.png')
  151. },
  152. expandRestItems (item, index) {
  153. this.cardsList.forEach(each => {
  154. each.forEach(eq=>{
  155. if (eq.smsxt !== item.smsxt) {
  156. eq.expand = false
  157. }
  158. eq.selected = false
  159. })
  160. })
  161. item.expand = !item.expand
  162. },
  163. /**
  164. * 点击跳转进入综合事项管理页面
  165. */
  166. navToFocusItem () {
  167. this.$router.push({path:"./other", query:{module:'comprehensive'}})
  168. },
  169. /**
  170. * 点击跳转进入 分析|报表 说明书更新记录页面
  171. */
  172. navToIntroduce () {
  173. this.$router.push({path:"./analysis", query:{module:'specification'}})
  174. },
  175. itemStyle (option) {
  176. let num = 0
  177. if (option.assetTypeList) {
  178. option.assetTypeList.forEach(item=>{
  179. if (typeof item.is_exception_num === "number") {
  180. num += item.is_exception_num
  181. }
  182. })
  183. }
  184. if (option.rptGlsmsStatisticsList) {
  185. option.rptGlsmsStatisticsList.forEach(option => {
  186. if (typeof option.due_num === "number") {
  187. num += option.due_num
  188. }
  189. })
  190. }
  191. if (num > 0) {
  192. return {
  193. display:"block"
  194. }
  195. } else {
  196. return {
  197. display:"none"
  198. }
  199. }
  200. },
  201. navToInnerPage (item, equip) {
  202. this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.category_code, module:'core'}})
  203. },
  204. /**
  205. * 跳转到甘特图详情页
  206. */
  207. navToGanttPage (item) {
  208. this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, module:'gantt'}})
  209. },
  210. testAjax() {
  211. let params = {
  212. getParams: {
  213. plazaId: this.plazaId
  214. }
  215. }
  216. getCardList(params).then(res => {
  217. if (res.result == 'success') {
  218. let result = res.data
  219. if (result && Array.isArray(result)) {
  220. result.forEach((item, index) => {
  221. item.expand = false
  222. if (item.assetTypeList) {
  223. let list = item.assetTypeList
  224. let len = list.length
  225. if (len > 3) {
  226. item.hasArrow = true
  227. item.assetTypeList = list.splice(0, 3)
  228. item.restAssetTypeList = list
  229. item.showColor = list.some(item => {return item.is_exception_num > 0})
  230. }else {
  231. item.hasArrow = false
  232. item.restAssetTypeList = []
  233. }
  234. }
  235. if (index % 2 === 0) {
  236. this.cardsList[0].push(item)
  237. } else {
  238. this.cardsList[1].push(item)
  239. }
  240. })
  241. this.cardsList.forEach(item=>{
  242. item.forEach(eq=>{
  243. if (eq.rptGlsmsStatisticsList) {
  244. eq.rptGlsmsStatisticsList.forEach(each => {
  245. if (each.type === 1) {
  246. each.sort = 0
  247. } else if (each.type === 2) {
  248. each.sort = 1
  249. } else {
  250. each.sort = 2
  251. }
  252. })
  253. console.log(eq.rptGlsmsStatisticsList)
  254. eq.rptGlsmsStatisticsList = sortBy(eq.rptGlsmsStatisticsList, (item) => {return item.sort})
  255. }
  256. })
  257. })
  258. }
  259. }
  260. })
  261. },
  262. /**
  263. * 获取说明书变更记录
  264. */
  265. getInstructionList() {
  266. let params = {
  267. getParams: {
  268. plazaId: this.plazaId,
  269. page: 1,
  270. size: 13
  271. }
  272. }
  273. getChangeList(params).then(res => {
  274. if (res.result == 'success' && res.data) {
  275. let result = res.data
  276. result.forEach(item => {
  277. item.changedate = moment.unix(item.changedate / 1000).format('YYYY.MM.DD')
  278. if (item.objtype === 0) {
  279. item.type = '专维'
  280. } else if (item.objtype === 1) {
  281. item.type = '重要维保'
  282. } else if (item.objtype === 2) {
  283. item.type = '第三方检测'
  284. } else if (item.objtype === 3) {
  285. item.type = '综合事项'
  286. } else if (item.objtype === 4) {
  287. item.type = '重要维修'
  288. } else {
  289. item.type = '其他事项'
  290. }
  291. })
  292. if (result && Array.isArray(result)) {
  293. this.changeList = result
  294. }
  295. }
  296. })
  297. },
  298. getItemsQuery() {
  299. let params = {
  300. getParams: {
  301. // department=部门 //部门
  302. // startDate: '20200208000000', //开始时间
  303. // endDate: '20200608000000', //结束时间
  304. plazaId: this.plazaId, //广场id 必填
  305. page: 1, //页数
  306. size: 10 //条数
  307. }
  308. }
  309. getQueryList(params).then(res => {
  310. moment().format('YYYY.MM.DD HH:mm')
  311. if (res.result == 'success') {
  312. if (res.data && Array.isArray(res.data)) {
  313. res.data.forEach(item => {
  314. item.createdate = moment.unix(item.createdate / 1000).format('YYYY.MM.DD')
  315. })
  316. this.itemsList = res.data
  317. }
  318. }
  319. })
  320. }
  321. }
  322. }
  323. </script>
  324. <style lang='less'>
  325. .homepage {
  326. display: flex;
  327. justify-content: space-between;
  328. height: calc(100vh - 48px);
  329. padding: 15px;
  330. background: rgba(242, 245, 247, 1);
  331. overflow: auto;
  332. .homepage-cards-content {
  333. display: flex;
  334. width: 70%;
  335. overflow: auto;
  336. .items-container{
  337. width: 50%;
  338. .cards-item {
  339. width: calc(100% - 5px);
  340. height: auto;
  341. padding-bottom: 0;
  342. margin-bottom: 1rem;
  343. transition: 0.5s;
  344. background: #fff;
  345. border-radius: 4px;
  346. box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
  347. .card-item-title{
  348. height: 42px;
  349. display: flex;
  350. align-items: center;
  351. justify-content: space-between;
  352. padding-left: 12px;
  353. padding-right: 12px;
  354. border-radius: 4px;
  355. border-bottom-left-radius: 0;
  356. border-bottom-right-radius: 0;
  357. h4 {
  358. color: white;
  359. padding: 1rem;
  360. font-size: 1.6rem;
  361. line-height: 1;
  362. font-weight: bold;
  363. }
  364. img.title-img{
  365. width: 2.4rem;
  366. height: 2.4rem;
  367. }
  368. img.warning-img{
  369. width: 1.8rem;
  370. height: 1.8rem;
  371. }
  372. >div{
  373. display: flex;
  374. align-items: center;
  375. }
  376. }
  377. .equipment-list-container{
  378. position: relative;
  379. .equipment-list {
  380. display: flex;
  381. flex-wrap: wrap;
  382. justify-content: flex-start;
  383. padding: 1rem ;
  384. padding-bottom: 0.4rem;
  385. .equipment-item {
  386. width: 31%;
  387. box-sizing: border-box;
  388. border-radius: 2px;
  389. padding: 1rem;
  390. margin-right: 0.4rem;
  391. background: #EFF0F1;
  392. cursor: pointer;
  393. .equip-name {
  394. position: relative;
  395. display: inline-block;
  396. h5 {
  397. position: relative;
  398. color: #1f2429;
  399. font-size: 1.4rem;
  400. font-weight: bold;
  401. em {
  402. margin-left: 1rem;
  403. color: #e19e51;
  404. font-size: 1.2rem;
  405. }
  406. }
  407. .exception-number {
  408. position: absolute;
  409. right: -20%;
  410. top: -5px;
  411. height: 1.6rem;
  412. border-radius: 8rem;
  413. padding: 0.2rem 0.4rem;
  414. line-height: 1.2rem;
  415. text-align: center;
  416. font-size: 1.2rem;
  417. color: #f54e45;
  418. background: #ffe0df;
  419. }
  420. }
  421. section {
  422. display: flex;
  423. justify-content: flex-start;
  424. align-items: center;
  425. .equip-statis {
  426. .equip-number {
  427. font-size: 1.8rem;
  428. font-weight: bold;
  429. color: rgba(31, 36, 41, 1);
  430. }
  431. .equip-unit {
  432. color: #ccc;
  433. font-size: 1.2rem;
  434. }
  435. }
  436. }
  437. }
  438. .equipment-item:hover {
  439. background: #f5f6f7;
  440. }
  441. }
  442. .more{
  443. position: absolute;
  444. display: flex;
  445. justify-content: center;
  446. align-items: center;
  447. width: 14px;
  448. height: 14px;
  449. right: 8px;
  450. top: 40%;
  451. border-radius: 7px;
  452. cursor: pointer;
  453. transform: rotate(0);
  454. transform-origin: center;
  455. z-index: 10000;
  456. img{
  457. width:14px;
  458. height: 14px;
  459. }
  460. }
  461. }
  462. .alert-list-container{
  463. padding:0 1rem 1rem 1rem;
  464. .alert-list {
  465. display: flex;
  466. align-items: center;
  467. justify-content: flex-start;
  468. height: auto;
  469. padding: 1rem 0;
  470. padding-left: 1rem;
  471. border-radius: 4px;
  472. background: #F5F6F7;
  473. cursor: pointer;
  474. &:hover {
  475. background: #f5f6f7;
  476. }
  477. .alert-item {
  478. display: flex;
  479. width: 33.33%;
  480. align-items: center;
  481. img {
  482. width: 2.4rem;
  483. height: 2.4rem;
  484. margin-right: 0.6rem;
  485. }
  486. .content {
  487. .number {
  488. display: flex;
  489. justify-content: space-between;
  490. align-items: center;
  491. .left{
  492. span {
  493. margin-right: 1rem;
  494. font-size: 1.2rem;
  495. color: #1f2429;
  496. font-weight: bold;
  497. white-space: nowrap;
  498. }
  499. }
  500. .line {
  501. display: flex;
  502. justify-content: space-between;
  503. align-items: center;
  504. line-height: 1;
  505. em {
  506. font-weight: normal;
  507. }
  508. em:first-child {
  509. font-size: 1.6rem;
  510. font-weight: bold;
  511. }
  512. }
  513. }
  514. .desc {
  515. padding-top: 0.6rem;
  516. color: #8d9399;
  517. font-size: 1.2rem;
  518. text-align: right;
  519. white-space: nowrap;
  520. }
  521. }
  522. }
  523. }
  524. }
  525. .empty-content {
  526. height: 8rem;
  527. line-height: 8rem;
  528. border-top: 1px solid #f5f6f7;
  529. text-align: center;
  530. color: #8d9399;
  531. }
  532. }
  533. }
  534. div:first-child.items-container{
  535. section:nth-of-type(1).cards-item{
  536. section.card-item-title{
  537. background: linear-gradient(to left, #3E64CB, #6C8BE3);
  538. }
  539. .equip-number{
  540. color: #3E64CB!important;
  541. }
  542. }
  543. section:nth-of-type(2).cards-item{
  544. section.card-item-title{
  545. background: linear-gradient(to left, #2BAD88, #54D6B2);
  546. }
  547. .equip-number{
  548. color: #2BAD88!important;;
  549. }
  550. }
  551. section:nth-of-type(3).cards-item{
  552. section.card-item-title{
  553. background: linear-gradient(to left, #3998DB, #70BBF0);
  554. }
  555. .equip-number{
  556. color: #3998DB!important;;
  557. }
  558. }
  559. section:nth-of-type(4).cards-item{
  560. section.card-item-title{
  561. background: linear-gradient(to left, #3E64CB, #6C8BE3);
  562. }
  563. .equip-number{
  564. color: #3E64CB!important;;
  565. }
  566. }
  567. }
  568. div:last-child.items-container{
  569. section:nth-of-type(1).cards-item{
  570. section.card-item-title{
  571. background: linear-gradient(to left, #3998DB, #70BBF0);
  572. }
  573. .equip-number{
  574. color: #3998DB!important;;
  575. }
  576. }
  577. section:nth-of-type(2).cards-item{
  578. section.card-item-title{
  579. background: linear-gradient(to left, #3E64CB, #6C8BE3);
  580. }
  581. .equip-number{
  582. color: #3E64CB!important;;
  583. }
  584. }
  585. section:nth-of-type(3).cards-item{
  586. section.card-item-title{
  587. background: linear-gradient(to left, #3998DB, #70BBF0);
  588. }
  589. .equip-number{
  590. color: #3998DB!important;;
  591. }
  592. }
  593. section:nth-of-type(4).cards-item{
  594. section.card-item-title{
  595. background: linear-gradient(to left, #2BAD88, #54D6B2);
  596. }
  597. .equip-number{
  598. color: #2BAD88!important;;
  599. }
  600. }
  601. }
  602. }
  603. .homepage-nav-list {
  604. width: calc(30% - 10px);
  605. height: 97%;
  606. background: white;
  607. .main-title {
  608. display: flex;
  609. justify-content: space-between;
  610. padding: 6px 12px;
  611. margin-bottom: 12px;
  612. background:#8D9399;
  613. span:first-child {
  614. color: #ffffff;
  615. font-weight: bold;
  616. font-size: 1.6rem;
  617. }
  618. a{
  619. color: white;
  620. line-height: 1;
  621. }
  622. }
  623. nav {
  624. height: 94%;
  625. padding: 14px 16px;
  626. overflow: auto;
  627. .table {
  628. .row {
  629. display: flex;
  630. align-items: center;
  631. padding: 6px;
  632. border-bottom: 1px solid #e4e6e7;
  633. font-size: 1.4rem;
  634. article {
  635. margin-right: 10px;
  636. }
  637. article:nth-of-type(1) {
  638. width: 20%;
  639. }
  640. article:nth-of-type(2) {
  641. width: 20%;
  642. padding-left: 1.2rem;
  643. white-space: nowrap;
  644. overflow: hidden;
  645. text-overflow: ellipsis;
  646. }
  647. article:nth-of-type(3) {
  648. width: calc(60% - 30px);
  649. overflow: hidden;
  650. text-overflow: ellipsis;
  651. display: -webkit-box;
  652. -webkit-line-clamp: 2;
  653. -webkit-box-orient: vertical;
  654. }
  655. }
  656. .table-header {
  657. height: 3.2rem;
  658. padding: 6px;
  659. line-height: 3.2rem;
  660. color: #646a73;
  661. font-weight: 600;
  662. border-bottom: none;
  663. background: #f8f9fa;
  664. }
  665. .table-body {
  666. overflow: auto;
  667. }
  668. }
  669. }
  670. nav:first-child {
  671. height: 96%;
  672. .table-body {
  673. height: 75vh;
  674. overflow-y: auto;
  675. }
  676. }
  677. }
  678. }
  679. </style>