index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.05.26
  4. *@info 项目概况主页
  5. */
  6. <template>
  7. <div class='overview'>
  8. <div class='view-title'>
  9. <nav>
  10. <span></span>
  11. <span>项目基本信息</span>
  12. </nav>
  13. <!-- <el-button type='info' plain disabled> -->
  14. <div title='数字化移交系统上线后可用'>
  15. <div class='view-button' :disabled='true' @click='findxmzl'>
  16. <img src='../../assets/imgs/wd.png' alt />
  17. 项目资料
  18. </div>
  19. </div>
  20. <!-- </el-button> -->
  21. </div>
  22. <div class='view-box'>
  23. <div class='view-left'>
  24. <div class='lb-left'>
  25. <div v-if='pic2.length>0' style='height:100%'>
  26. <rotation :key='2' type='2' :rotationImg='pic2' @scan='scan'></rotation>
  27. <div class='lb-icon' @click='picClick("2")'></div>
  28. <img class='lb-img' @click='picClick("2")' src='../../assets/imgs/zk.png' alt />
  29. </div>
  30. <img v-else class='lb-left-noImg' src='@/assets/imgs/nkt.jpg' alt />
  31. </div>
  32. <div class='lb-bottom'>
  33. <nav>
  34. <span></span>
  35. <span>建筑综合信息</span>
  36. </nav>
  37. <!-- <p class='place-p1'>
  38. <span>
  39. <img src='@/assets/imgs/jz.png' alt />
  40. {{build.length>0?formatter('项目名称',build):'--'}}
  41. </span>
  42. </p>-->
  43. <p class='place-p2'>
  44. <span>
  45. <img src='@/assets/imgs/didian.png' alt />
  46. {{build.length>0?formatter('项目地址',build):'--'}}
  47. </span>
  48. </p>
  49. <div class='place-bottom'>
  50. <div class='place-box'>
  51. <div class='place-left'>
  52. <span>建筑面积</span>
  53. <span>建筑高度</span>
  54. <span>楼层分布</span>
  55. <span>车位信息</span>
  56. </div>
  57. <div class='place-right'>
  58. <span :title='`${build.length>0?formatter("建筑面积",build):"--"}`'>{{build.length>0?formatter('建筑面积',build):'--'}}</span>
  59. <span :title='`${build.length>0?formatter("建筑高度",build):"--"}`'>{{build.length>0?formatter('建筑高度',build):'--'}}</span>
  60. <span :title='`${build.length>0?formatter("楼层分布",build):"--"}`'>{{build.length>0?formatter('楼层分布',build):'--'}}</span>
  61. <span :title='`${build.length>0?formatter("车位信息",build):"--"}`'>{{build.length>0?formatter('车位信息',build):'--'}}</span>
  62. </div>
  63. </div>
  64. <div class='place-box'>
  65. <div class='place-left'>
  66. <span>租赁面积</span>
  67. <span>竣工日期</span>
  68. <span>开业日期</span>
  69. <span>移交日期</span>
  70. </div>
  71. <div class='place-right'>
  72. <span :title='`${build.length>0?formatter("租赁面积",build):"--"}`'>{{build.length>0?formatter('租赁面积',build):'--'}}</span>
  73. <span :title='`${build.length>0?formatter("竣工日期",build):"--"}`'>{{build.length>0?formatter('竣工日期',build):'--'}}</span>
  74. <span :title='`${build.length>0?formatter("开业日期",build):"--"}`'>{{build.length>0?formatter('开业日期',build):'--'}}</span>
  75. <span :title='`${build.length>0?formatter("移交日期",build):"--"}`'>{{build.length>0?formatter('移交日期',build):'--'}}</span>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <div class='view-right'>
  82. <div class='view-right-box'>
  83. <div class='lb-right'>
  84. <div v-if='pic1.length>0' style='height:100%'>
  85. <rotation type='2' :rotationImg='pic1' :key='1' @scan='scan'></rotation>
  86. <div class='lb-icon' @click='picClick("1")'></div>
  87. <img class='lb-img' @click='picClick("1")' src='../../assets/imgs/zk.png' alt />
  88. </div>
  89. <img v-else class='lb-left-noImg' src='@/assets/imgs/qwt.jpg' alt />
  90. </div>
  91. <div class='lb-right-bottom'>
  92. <nav>
  93. <span></span>
  94. <span>施工单位信息</span>
  95. </nav>
  96. <div class='view-right-bottom'>
  97. <el-table
  98. :data='constructions'
  99. :height='350'
  100. :cell-class-name='addClass'
  101. :span-method='objectSpanMethod'
  102. border
  103. style='font-size:12px'
  104. :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
  105. v-loading='loading'
  106. >
  107. <el-table-column label='序号' width='50' type='index' align='center'></el-table-column>
  108. <el-table-column label='总包/分包' prop='type' width='96' align='center'>
  109. <template slot-scope='{row}'>{{row.type||'--'}}</template>
  110. </el-table-column>
  111. <el-table-column label='专业' width='70' prop='professional'>
  112. <template slot-scope='{row}'>{{row.professional||'--'}}</template>
  113. </el-table-column>
  114. <el-table-column prop='unit ' label='施工单位'>
  115. <template slot-scope='{row}'>{{row.unit ||'--'}}</template>
  116. </el-table-column>
  117. <el-table-column label='联系人' prop width='70' :show-overflow-tooltip='true'>
  118. <template slot-scope='{row}'>
  119. <div>{{row.lxr||'--'}}</div>
  120. </template>
  121. </el-table-column>
  122. <el-table-column prop label='联系电话' width='110' :show-overflow-tooltip='true'>
  123. <template slot-scope='{row}'>
  124. <div>{{row.lxdh||'--'}}</div>
  125. </template>
  126. </el-table-column>
  127. </el-table>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <PicModal ref='picModal'></PicModal>
  134. </div>
  135. <!-- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
  136. <div class='view-right-bottom-l'>{{item.type}}</div>
  137. <div class='view-right-bottom-r'>{{item.company}}</div>
  138. </div>-->
  139. <!-- <div class='view-left-box'>
  140. <div class='view-left-top'>
  141. <div class='view-top-imgL'>
  142. <rotation :rotationImg='rotationImg'></rotation>
  143. </div>
  144. <div class='view-top-imgR'>
  145. <rotation :rotationImg='rotationImg'></rotation>
  146. </div>
  147. </div>
  148. <div class='view-left-bottom'>
  149. <nav>
  150. <span></span>
  151. <span>建筑综合信息</span>
  152. </nav>
  153. <p class='place-p'>
  154. <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
  155. </p>
  156. <span class='place-hr'></span>
  157. <div class='place-bottom'>
  158. <div class='place-bottom-row'>
  159. <div>
  160. <span>项目名称</span>
  161. <span>建筑高度</span>
  162. <span>楼层分布</span>
  163. <span>车位信息</span>
  164. </div>
  165. <div style='min-width:172px;'>
  166. <span>三明万达广场</span>
  167. <span>裙房31.22m</span>
  168. <span>地上5层/地下2层</span>
  169. <span>地上832个/地下0个</span>
  170. </div>
  171. </div>
  172. <div class='place-bottom-row'>
  173. <div>
  174. <span>竣工日期</span>
  175. <span>开业日期</span>
  176. <span>移交日期</span>
  177. </div>
  178. <div style='min-width:172px;'>
  179. <span>2016年11月21日</span>
  180. <span>2016年12月30日</span>
  181. <span>2017年04月30日</span>
  182. </div>
  183. </div>
  184. <div class='place-bottom-row'>
  185. <div>
  186. <span style='margin-bottom:32px'>建筑面积</span>
  187. <span>租赁面积</span>
  188. </div>
  189. <div>
  190. <span>
  191. 13.07万㎡
  192. 其中地上9.90万㎡、地下3.55万㎡
  193. </span>
  194. <span>
  195. 6.45㎡
  196. 其中地上5.82万㎡,地下0.63万㎡
  197. </span>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>-->
  203. </template>
  204. <script>
  205. import PicModal from './picModal'
  206. import { queryFact } from '@/api/overview'
  207. import { mapGetters } from 'vuex'
  208. import {
  209. query
  210. } from "@/utils/query"
  211. export default {
  212. data() {
  213. return {
  214. loading: true,
  215. pic1: [], //区位图
  216. pic2: [], //鸟瞰图
  217. build: {}, //左下信息
  218. constructions: [], //右下数组
  219. shuzihuayijiao: '',
  220. va: '',
  221. spanArr: [], //二维数组,用于存放单元格合并规则
  222. position: 0, //用于存储相同项的开始index
  223. }
  224. },
  225. methods: {
  226. /**
  227. *联系人,联系电话样式设置
  228. */
  229. addClass({ columnIndex }) {
  230. if (columnIndex === 4 || columnIndex === 5) {
  231. return 'contact'
  232. }
  233. },
  234. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  235. for (let i = 1; i <= 5; i++) {
  236. if (columnIndex === i) {
  237. const _row = this.spanArr[i][rowIndex]
  238. const _col = _row > 0 ? 1 : 0
  239. // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
  240. return {
  241. rowspan: _row,
  242. colspan: _col,
  243. }
  244. }
  245. }
  246. },
  247. /**
  248. * 返回的数据处理
  249. */
  250. handelTableData(data) {
  251. let dict = {
  252. 总包: 0,
  253. 分包: 1,
  254. }
  255. data = data.sort((a, b) => {
  256. // 按总分包排序
  257. if (a.type !== b.type) {
  258. return dict[a.type] - dict[b.type]
  259. }
  260. // 按专业排序
  261. if (a.professional !== b.professional) {
  262. return b.professional.localeCompare(a.professional)
  263. }
  264. // 按施工单位排序
  265. if (a.unit !== b.unit) {
  266. return b.unit.localeCompare(a.unit)
  267. }
  268. // 按联系人排序
  269. if (a.lxr !== b.lxr) {
  270. return b.lxr.localeCompare(a.lxr)
  271. }
  272. })
  273. data.map((item) => {
  274. console.log(item)
  275. // return
  276. if (item.lxr) {
  277. let lxr = item.lxr.split(',').join('\n\r')
  278. item.lxr = lxr
  279. }
  280. if (item.lxdh) {
  281. let lxdh = item.lxdh.split(',').join('\n\r')
  282. item.lxdh = lxdh
  283. }
  284. return item
  285. })
  286. return data
  287. },
  288. rowspan(idx, prop) {
  289. // 第一列 总包合并一格,分包按照 第二列专业的单元格规则进行合并
  290. if (idx === 1) {
  291. // 初始化数组
  292. this.spanArr[1] = new Array(this.constructions.length).fill(0)
  293. let totalTypeLen = this.constructions.filter((a) => a.type === '总包').length
  294. this.spanArr[1][0] = totalTypeLen
  295. this.spanArr[1] = this.spanArr[1].map((item, index) => {
  296. if (index > totalTypeLen - 1) {
  297. item = this.spanArr[2][index]
  298. }
  299. return item
  300. })
  301. return true
  302. }
  303. // 其他列单元格合并规则
  304. this.spanArr[idx] = []
  305. this.position = 0
  306. this.constructions.forEach((item, index) => {
  307. if (index === 0) {
  308. this.spanArr[idx].push(1)
  309. this.position = 0
  310. } else {
  311. if (this.constructions[index][prop] === this.constructions[index - 1][prop]) {
  312. this.spanArr[idx][this.position] += 1 //有相同项
  313. this.spanArr[idx].push(0) // 名称相同后往数组里面加一项0
  314. } else {
  315. this.spanArr[idx].push(1) //同列的前后两行单元格不相同
  316. this.position = index
  317. }
  318. }
  319. })
  320. },
  321. scan(val) {
  322. this.va = val
  323. },
  324. picClick(type) {
  325. if (type === '1') {
  326. this.$refs.picModal.showModal(this.pic1)
  327. // if (this.pic1.length >= this.va) {
  328. // this.$refs.picModal.showModal([this.pic1[this.va - 1]])
  329. // } else {
  330. // this.$refs.picModal.showModal(this.pic1)
  331. // }
  332. } else {
  333. this.$refs.picModal.showModal(this.pic2)
  334. // if (this.pic2.length >= this.va) {
  335. // this.$refs.picModal.showModal([this.pic2[this.va - 1]])
  336. // } else {
  337. // this.$refs.picModal.showModal(this.pic2)
  338. // }
  339. }
  340. },
  341. findxmzl() {
  342. // if (this.shuzihuayijiao) {
  343. // window.open(`${this.shuzihuayijiao}`, true)
  344. // }
  345. },
  346. query() {
  347. let plazaId = this.$route.query.plazaId ?this.$route.query.plazaId:this.plazaId
  348. let params = {
  349. getParams: {
  350. plazaId: plazaId,
  351. // plazaId: '1000303'//这个id有3条数据
  352. },
  353. }
  354. queryFact(params).then((res) => {
  355. if (res.result == 'success') {
  356. this.loading = false
  357. this.pic1 = []
  358. this.pic2 = []
  359. this.build = {}
  360. this.constructions = []
  361. this.shuzihuayijiao = ''
  362. this.pic1 = res.pic1 ? res.pic1 : []
  363. this.pic2 = res.pic2 ? res.pic2 : []
  364. this.build = res.build ? res.build : {}
  365. let constructions = []
  366. constructions = res.constructions ? res.constructions : []
  367. if (constructions.length > 0) {
  368. // this.parseTableData(constructions)
  369. let handleData = this.handelTableData(constructions)
  370. this.constructions = handleData
  371. this.rowspan(2, 'professional')
  372. this.rowspan(3, 'unit')
  373. this.rowspan(4, 'lxr')
  374. this.rowspan(5, 'lxdh')
  375. this.rowspan(1, 'type')
  376. }
  377. console.log(this.constructions)
  378. this.shuzihuayijiao = res.shuzihuayijiao ? res.shuzihuayijiao : ''
  379. if (res.plazaName) {
  380. this.$store.commit('SETPLAZENAME', res.plazaName)
  381. }else{
  382. this.$store.commit('SETPLAZENAME','')
  383. }
  384. }
  385. })
  386. },
  387. getImages(_url) {
  388. if (_url !== undefined) {
  389. let _u = _url.substring(7)
  390. return 'https://images.weserv.nl/?url=' + _u
  391. }
  392. },
  393. formatter(str, arrv) {
  394. if (str && arrv) {
  395. const Objs = arrv.find((e) => e && e.project == str)
  396. return Objs ? Objs.basic : '--'
  397. } else {
  398. return ''
  399. }
  400. },
  401. init() {
  402. //预览是否开启
  403. // let previewUrl = location.href.split('?')[1]
  404. // if (previewUrl) {
  405. // previewUrl = Boolean(previewUrl.split('=')[1])
  406. // this.$store.commit('SETISPREVIEW', previewUrl)
  407. // }
  408. // let previewUrl = location.href.split('=')[1] ? location.href.split('=')[1].split('&')[0] : false,
  409. // plazaId = location.href.split('=')[2] ? location.href.split('=')[2] : '1000423'
  410. },
  411. },
  412. mounted() {
  413. this.query()
  414. },
  415. created() {
  416. this.init()
  417. },
  418. computed: {
  419. ...mapGetters(['isPreview', 'pic', 'plazaId']),
  420. },
  421. components: {
  422. PicModal,
  423. },
  424. watch: {
  425. '$store.state.plazaId': {
  426. handler(val,nel){
  427. console.log('val',val,nel)
  428. this.query()
  429. },
  430. immediate:true
  431. }
  432. },
  433. }
  434. </script>
  435. <style lang="less" scoped>
  436. // 联系人,联系电话样式
  437. .contact {
  438. div {
  439. // word-break: break-all !important;
  440. white-space: pre !important;
  441. overflow: hidden;
  442. text-overflow: ellipsis;
  443. }
  444. }
  445. @import '../../assets/css/rotation.less';
  446. .overview {
  447. .view-box .view-left {
  448. overflow: hidden;
  449. .lb-left {
  450. margin-bottom: 0;
  451. }
  452. }
  453. }
  454. @media screen and (max-width: 1366px) {
  455. /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
  456. .overview .view-box .view-left .lb-bottom .place-bottom .place-box .place-right span {
  457. width: 200px;
  458. }
  459. }
  460. </style>
  461. <style lang="less">
  462. .view-right-bottom {
  463. .el-table td,
  464. .el-table th {
  465. padding: 3px 0;
  466. }
  467. }
  468. </style>