index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590
  1. <template>
  2. <div class='overview'>
  3. <!-- <van-button @click='openPreview' type='primary'>测试</van-button> -->
  4. <!-- <ImagePreview1 class='overview-img-preview' :visible.sync='showImgPreview' :imgList='imgList' /> -->
  5. <!-- 轮播 -->
  6. <div class='my-swipe'>
  7. <van-swipe :autoplay='3000' indicator-color='white' v-show='imgList.length'>
  8. <van-swipe-item v-for='(image, index) in imgList' :key='index'>
  9. <span class='type-name' v-show='image.typename'>{{ image.typename }}</span>
  10. <van-image fit='contain' :src='image.url' />
  11. </van-swipe-item>
  12. </van-swipe>
  13. </div>
  14. <!-- tab页签 -->
  15. <van-tabs class='overview-tabs' v-model='active' color='#025BAA' title-active-color='#025BAA' :line-width='120' :line-height='2'>
  16. <!-- 建筑综合信息 -->
  17. <van-tab class='buiding-tab' title='建筑综合信息'>
  18. <div class='building-info'>
  19. <!-- <div class='cell'>
  20. <span class='left'>项目名称:</span>
  21. <span class='right'>{{plazaName}}</span>
  22. </div>-->
  23. <div class='cell' v-for='(item, index) in build' :key='index'>
  24. <span class='left'>{{ item.project }}:</span>
  25. <span class='right'>{{ item.basic }}</span>
  26. </div>
  27. <!-- <div class='cell'>
  28. <span class='left'>项目地址:</span>
  29. <span class='right'>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼办公室</span>
  30. </div>
  31. <div class='cell'>
  32. <span class='left'>建筑面积:</span>
  33. <span class='right'>13.07万㎡,其中地上9.09万㎡、地下3.55万㎡</span>
  34. </div>
  35. <div class='cell'>
  36. <span class='left'>建筑高度:</span>
  37. <span class='right'>裙房31.22万m</span>
  38. </div>
  39. <div class='cell'>
  40. <span class='left'>楼层分布:</span>
  41. <span class='right'>地上5层/地下2层</span>
  42. </div>
  43. <div class='cell'>
  44. <span class='left'>车位信息:</span>
  45. <span class='right'>地下823个/地上0个</span>
  46. </div>
  47. <div class='cell'>
  48. <span class='left'>租赁面积:</span>
  49. <span class='right'>6.45㎡,其中地上5.82万㎡、地下0.63万㎡</span>
  50. </div>
  51. <div class='cell'>
  52. <span class='left'>开业时间:</span>
  53. <span class='right'>2016年11月21日</span>
  54. </div>
  55. <div class='cell'>
  56. <span class='left'>移交时间:</span>
  57. <span class='right'>6.45㎡,其中地上5.82万㎡、地下0.63万㎡</span>
  58. </div>-->
  59. </div>
  60. </van-tab>
  61. <!-- 施工单位信息 -->
  62. <van-tab title='施工单位信息' class='sgdw-info'>
  63. <van-tabs type='card' color='#E5EEF6' title-active-color='#025baa' title-inactive-color='#666666'>
  64. <van-tab title='总包'>
  65. <ul class='zb' v-if='showTotalContractInfo'>
  66. <li class='title'>
  67. <!-- <i>icon</i>中国建筑第二工程局有限公司 -->
  68. <i class='iconfont wanda-gongsiqiye'></i>
  69. {{ totalContractInfo.unit }}
  70. </li>
  71. <li class='system'>
  72. <!-- <span class='card'>消防电</span>
  73. <span class='card'>土建</span>
  74. <span class='card'>弱电</span>
  75. <span class='card'>机电</span>
  76. <span class='card'>给排水</span>-->
  77. <span class='card' v-for='(item, index) in totalContractInfo.professional' :key='index'>{{ item }}</span>
  78. </li>
  79. <li class='name'>
  80. <i class='iconfont wanda-renwu-ren'></i>
  81. {{ totalContractInfo.name }}
  82. </li>
  83. <li class='phone'>
  84. <i class='iconfont wanda-dianhua'></i>
  85. {{ totalContractInfo.phone }}
  86. </li>
  87. </ul>
  88. <ul class='zb' v-else>
  89. <!-- TODO: 暂无数据 -->
  90. <van-empty description='暂无数据' />
  91. </ul>
  92. </van-tab>
  93. <van-tab title='分包'>
  94. <ul class='fb' v-if='subcontractInfo.length'>
  95. <li class='fb-card' v-for='(item, index) in subcontractInfo' :key='index'>
  96. <div class='card-left'>{{ item[0].professional }}</div>
  97. <div class='card-right'>
  98. <div class='info' v-for='(detail, dIndex) in item' :key='dIndex'>
  99. <p class='company'>{{ detail.unit }}</p>
  100. <p class='name-phone'>
  101. <span>{{ detail.lxr || '--' }}</span>
  102. <span>{{ detail.lxdh || '--' }}</span>
  103. </p>
  104. <!-- <p class='name-phone'>
  105. <span>张伟</span>
  106. <span>0411-86666924</span>
  107. </p>-->
  108. </div>
  109. </div>
  110. </li>
  111. <!-- <li class='fb-card' v-for='i in 5' :key='i'>
  112. <div class='card-left'>消防水</div>
  113. <div class='card-right'>
  114. <div class='info'>
  115. <p class='company'>大连金帝建设工程有限公司</p>
  116. <p class='name-phone'>
  117. <span>日立电梯(中国)有限公司</span>
  118. <span>0411-86666924</span>
  119. </p>
  120. <p class='name-phone'>
  121. <span>张伟</span>
  122. <span>0411-86666924</span>
  123. </p>
  124. </div>
  125. </div>
  126. </li>
  127. <li class='fb-card'>
  128. <div class='card-left'>幕墙</div>
  129. <div class='card-right'>
  130. <div class='info'>
  131. <p class='company'>大连建工机电安装工程有限公司</p>
  132. <p class='name-phone'>
  133. <span>张伟</span>
  134. <span>18612349786</span>
  135. </p>
  136. <p class='name-phone'>
  137. <span>张伟</span>
  138. <span>18612349786</span>
  139. </p>
  140. </div>
  141. <div class='info'>
  142. <p class='company'>大连建工机电安装工程有限公司</p>
  143. <p class='name-phone'>
  144. <span>张伟</span>
  145. <span>18612349786</span>
  146. </p>
  147. </div>
  148. </div>
  149. </li>-->
  150. </ul>
  151. <ul class='fb' v-else>
  152. <!-- TODO: 暂无数据 -->
  153. <van-empty description='暂无数据' />
  154. </ul>
  155. </van-tab>
  156. </van-tabs>
  157. </van-tab>
  158. </van-tabs>
  159. <div class='bottom'>
  160. <!-- <span v-if='false'>近一个月,重要维保8条,重要维修3条,其他事项5条,综合事项10条</span> -->
  161. <van-notice-bar
  162. v-if='showNoticeBar'
  163. class='bottom-notice'
  164. background='#e5eef6'
  165. color='#025baa'
  166. speed='50'
  167. scrollable
  168. :text='noticeBarText'
  169. @click='goToUpdateRecord'
  170. />
  171. <span v-else>近一个月,说明书无更新</span>
  172. <van-icon v-show='showNoticeBar' class='building-arrow' name='arrow' size='14px' />
  173. </div>
  174. </div>
  175. </template>
  176. <script>
  177. import Vue from 'vue'
  178. // vant 按需引入
  179. import { Button, Icon, Swipe, SwipeItem, Lazyload, Image as VanImage, Tab, Tabs, Empty, NoticeBar } from 'vant'
  180. Vue.use(Button).use(Icon).use(Swipe).use(SwipeItem).use(Lazyload).use(VanImage)
  181. Vue.use(Tab).use(Tabs)
  182. Vue.use(NoticeBar)
  183. Vue.use(Empty)
  184. import { mapGetters } from 'vuex'
  185. // lodash
  186. import { isEmpty } from 'lodash'
  187. // moment
  188. import moment from 'moment'
  189. import ImagePreview1 from '@/components/ImagePreview'
  190. // 接口
  191. import { queryFact, queryRecordCount } from '@/api/overview'
  192. export default {
  193. name: 'Overview',
  194. props: {},
  195. components: { ImagePreview1 },
  196. data() {
  197. return {
  198. showImgPreview: true,
  199. imgList: [],
  200. active: 0, // 激活的tab页 0:建筑综合信息 1:施工单位信息
  201. plazaName: '', //广场名称
  202. build: [], //建筑综合信息
  203. totalContractInfo: {}, //总包信息
  204. showTotalContractInfo: true, //是否显示总包信息
  205. subcontractInfo: [], //分包信息
  206. showNoticeBar: true, //底部noticeBar 显隐
  207. noticeBarText: '', //底部noticeBar 文本
  208. objtypeDict: {
  209. 1: '重要维保',
  210. 3: '综合事项',
  211. 4: '重要维修',
  212. 5: '其他事项',
  213. },
  214. }
  215. },
  216. computed: {
  217. ...mapGetters(['plazaId']),
  218. },
  219. watch: {
  220. showImgPreview(val) {
  221. console.log('========')
  222. console.log(val)
  223. },
  224. },
  225. created() {
  226. this.queryBaseInfo()
  227. this.queryRecordCountFunc()
  228. },
  229. beforeMount() {},
  230. mounted() {
  231. console.log('项目概况页面mounted')
  232. console.table({ a: 'sssss' })
  233. console.error('sdfasdfasdf')
  234. // debugger
  235. this.openPreview()
  236. },
  237. methods: {
  238. /**
  239. * 查询广场概况
  240. */
  241. async queryBaseInfo() {
  242. let getParams = {
  243. plazaId: this.plazaId,
  244. }
  245. let data = await queryFact({ getParams })
  246. console.log(data)
  247. // 顶部轮播图
  248. this.imgList = data.pic2.concat(data.pic1)
  249. this.plazaName = data.plazaName
  250. // 建筑综合信息
  251. this.build = data.build
  252. //总包信息
  253. let totalContractInfoArr = data.constructions.filter((v) => v.type === '总包')
  254. if (totalContractInfoArr) {
  255. this.showTotalContractInfo = true
  256. } else {
  257. this.showTotalContractInfo = false
  258. }
  259. let totalContractInfo = {
  260. unit: totalContractInfoArr[0]?.unit || '--',
  261. name: totalContractInfoArr[0]?.lxr || '--',
  262. phone: totalContractInfoArr[0]?.lxdh || '--',
  263. professional: [],
  264. }
  265. totalContractInfoArr.map((item) => {
  266. item.professional && totalContractInfo.professional.push(item.professional)
  267. })
  268. this.totalContractInfo = totalContractInfo
  269. //分包信息,组合页面需要展示的分包信息
  270. let subcontractInfoArr = data.constructions.filter((v) => v.type === '分包')
  271. subcontractInfoArr.sort((a, b) => b.professional.localeCompare(a.professional, 'zh'))
  272. let subcontractInfo = []
  273. /**
  274. * 构造二维数组
  275. */
  276. subcontractInfo[0] = [subcontractInfoArr[0]]
  277. let __index = 0
  278. subcontractInfoArr.map((item, index) => {
  279. if (index >= 1) {
  280. if (item.professional === subcontractInfo[__index][0].professional) {
  281. subcontractInfo[__index].push(item)
  282. } else {
  283. __index++
  284. subcontractInfo[__index] = [item]
  285. }
  286. }
  287. })
  288. this.subcontractInfo = subcontractInfo
  289. console.log(subcontractInfo)
  290. },
  291. /**
  292. * 查询近三十天说明书更新记录
  293. *
  294. */
  295. async queryRecordCountFunc() {
  296. let getParams = {
  297. plazaId: this.plazaId, //广场id 必填
  298. changeDateStartDate: moment().subtract(1, 'months').format('YYYYMMDD000000'), //变更记录开始时间 格式yyyyMMddHHmiss 必填
  299. changeDateEndDate: moment().format('YYYYMMDD000000'), //变更记录结束时间 格式yyyyMMddHHmiss 必填
  300. }
  301. let data = await queryRecordCount({ getParams })
  302. console.log(data)
  303. if (!data || data.result !== 'success') {
  304. this.showNoticeBar = false //底部noticeBar 显隐
  305. this.noticeBarText = ''
  306. return true
  307. }
  308. data = data.data
  309. data.sort((a, b) => a.objtype - b.objtype)
  310. this.showNoticeBar = true
  311. this.noticeBarText = ''
  312. /*
  313. // 测试数据
  314. data = [
  315. {
  316. cnt: 6,
  317. objtype: 4, //变更内容类型(1:重要维保 3:综合事项 4:重要维修 5:其他事项)
  318. },
  319. { cnt: 10, objtype: 1 },
  320. { cnt: 45, objtype: 3 },
  321. { cnt: 4, objtype: 5 },
  322. ] */
  323. // 文本处理
  324. let noticeBarText = '近一个月,'
  325. data.map((item) => {
  326. noticeBarText += `${this.objtypeDict[item.objtype]} ${item.cnt} 条,`
  327. })
  328. this.noticeBarText = noticeBarText.slice(0, noticeBarText.length - 1)
  329. },
  330. openPreview() {
  331. this.showImgPreview = true
  332. // this.imgList = [
  333. // 'https://img.yzcdn.cn/vant/apple-1.jpg',
  334. // 'https://img.yzcdn.cn/vant/apple-2.jpg',
  335. // 'https://img.yzcdn.cn/vant/apple-1.jpg',
  336. // 'https://img.yzcdn.cn/vant/apple-2.jpg',
  337. // 'https://img.yzcdn.cn/vant/apple-1.jpg',
  338. // 'https://img.yzcdn.cn/vant/apple-2.jpg',
  339. // 'https://img.yzcdn.cn/vant/apple-1.jpg',
  340. // 'https://img.yzcdn.cn/vant/apple-2.jpg',
  341. // ].slice(0, parseInt(Math.random() * 8 + 1))
  342. },
  343. /**
  344. * 跳转说明书更新记录
  345. */
  346. goToUpdateRecord() {
  347. this.$router.push({ name: 'UpdateRecord' })
  348. },
  349. },
  350. }
  351. </script>
  352. <style lang="less" scoped>
  353. .overview {
  354. width: 100%;
  355. height: calc(100% - 150px);
  356. // background-color: lightblue;
  357. // display: flex;
  358. // flex-direction: column;
  359. // 轮播图
  360. .my-swipe {
  361. display: block;
  362. width: 343px;
  363. height: 160px;
  364. margin: 12px auto;
  365. .van-swipe {
  366. width: 100%;
  367. height: 100%;
  368. .van-swipe-item {
  369. position: relative;
  370. .type-name {
  371. display: inline-block;
  372. width: 70px;
  373. padding: 5px 0 5px 10px;
  374. position: absolute;
  375. z-index: 10;
  376. left: 0;
  377. background: linear-gradient(270deg, rgba(4, 22, 39, 0) 0%, #020d18 100%);
  378. color: #fff;
  379. font-size: 16px;
  380. border-radius: 4px;
  381. }
  382. .van-image {
  383. height: 100%;
  384. }
  385. }
  386. }
  387. }
  388. // tabs切换
  389. .overview-tabs {
  390. width: 100%;
  391. height: calc(100% - 180px);
  392. display: flex;
  393. flex-direction: column;
  394. /deep/ .van-tabs__content {
  395. flex: 1;
  396. overflow: auto;
  397. }
  398. // 建筑综合信息
  399. .buiding-tab {
  400. width: 100%;
  401. height: 100%;
  402. .building-info {
  403. width: 100%;
  404. overflow: auto;
  405. padding: 16px;
  406. .cell {
  407. width: 100%;
  408. min-height: 20px;
  409. margin-top: 12px;
  410. display: flex;
  411. .left {
  412. width: 70px;
  413. color: #666;
  414. font-size: 14px;
  415. }
  416. .right {
  417. flex: 1;
  418. color: #333;
  419. font-size: 14px;
  420. }
  421. }
  422. }
  423. }
  424. // 施工单位信息
  425. .sgdw-info {
  426. margin-top: 10px;
  427. height: calc(100% - 10px);
  428. // tab样式修改
  429. /deep/.van-tabs__nav {
  430. width: 50%;
  431. margin: 0 auto;
  432. border-color: #d4d4d4;
  433. .van-tab--active {
  434. border: 1px solid #025baa !important;
  435. background-color: rgb(229, 238, 246);
  436. }
  437. }
  438. & > .van-tabs {
  439. display: flex;
  440. flex-direction: column;
  441. height: 100%;
  442. .van-tabs__content {
  443. flex: 1;
  444. overflow: auto;
  445. }
  446. }
  447. // 总包
  448. .zb {
  449. padding: 10px 18px;
  450. li {
  451. height: 25px;
  452. line-height: 25px;
  453. margin-bottom: 10px;
  454. display: flex;
  455. align-items: center;
  456. }
  457. i {
  458. display: inline-block;
  459. overflow: hidden;
  460. margin-right: 10px;
  461. }
  462. .title {
  463. color: #333333;
  464. font-size: 16px;
  465. font-weight: 600;
  466. }
  467. .system {
  468. padding-left: 20px;
  469. height: auto;
  470. .card {
  471. display: inline-block;
  472. height: 25px;
  473. background-color: #eff0f1;
  474. border-radius: 2px;
  475. color: #666;
  476. padding: 0 10px;
  477. margin-right: 5px;
  478. margin-bottom: 5px;
  479. }
  480. }
  481. .name,
  482. .phone {
  483. color: #333333;
  484. font-size: 14px;
  485. }
  486. }
  487. // 分包
  488. .fb {
  489. padding: 10px 18px;
  490. .fb-card {
  491. width: 100%;
  492. height: auto;
  493. display: flex;
  494. border-radius: 4px;
  495. border: 1px solid #d4d4d4;
  496. margin-bottom: 13px;
  497. .card-left {
  498. width: 65px;
  499. display: flex;
  500. justify-content: center;
  501. align-items: center;
  502. background: #eff0f1;
  503. border-radius: 4px 0px 0px 4px;
  504. padding: 8px;
  505. font-size: 16px;
  506. font-weight: 500;
  507. color: #333333;
  508. }
  509. .card-right {
  510. padding: 8px 16px;
  511. flex: 1;
  512. .info {
  513. .company {
  514. font-size: 14px;
  515. font-weight: 400;
  516. color: #333333;
  517. padding: 3px 0;
  518. }
  519. .name-phone {
  520. display: flex;
  521. justify-content: space-between;
  522. padding: 3px 0;
  523. font-size: 14px;
  524. font-weight: 400;
  525. color: #666666;
  526. height: auto;
  527. & > :nth-child(1) {
  528. flex: 1;
  529. padding-right: 10px;
  530. }
  531. & > :nth-child(2) {
  532. width: 100px;
  533. text-align: right;
  534. height: auto;
  535. display: inline-block;
  536. align-items: center;
  537. }
  538. }
  539. }
  540. .info + .info {
  541. border-top: 1px solid #aaa;
  542. margin-top: 5px;
  543. padding-top: 5px;
  544. }
  545. }
  546. }
  547. }
  548. }
  549. }
  550. // 底部固定条
  551. .bottom {
  552. width: 100%;
  553. position: fixed;
  554. display: flex;
  555. align-items: center;
  556. bottom: 50px;
  557. left: 0;
  558. height: 44px;
  559. // padding-right:16px;
  560. background: #e5eef6;
  561. color: #025baa;
  562. font-size: 14px;
  563. .bottom-notice {
  564. flex: 1;
  565. }
  566. .building-arrow {
  567. // position: absolute;
  568. width: 20px;
  569. // right: 16px;
  570. }
  571. }
  572. }
  573. @media screen and (orientation: portrait) {
  574. .test {
  575. color: lightcoral;
  576. }
  577. }
  578. @media screen and (orientation: landscape) {
  579. .test {
  580. color: lightgreen;
  581. }
  582. }
  583. </style>