index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  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 class='view-button' :disabled='true' @click='findxmzl'>
  15. <img src='../../assets/imgs/wd.png' alt />
  16. 项目资料
  17. </div>
  18. <!-- </el-button> -->
  19. </div>
  20. <div class='view-box'>
  21. <div class='view-left'>
  22. <div class='lb-left'>
  23. <div v-if='pic2.length>0' style='height:100%'>
  24. <rotation :key='2' type='2' :rotationImg='pic2' @scan='scan'></rotation>
  25. <div class='lb-icon' @click='picClick("2")'></div>
  26. <img class='lb-img' @click='picClick("2")' src='../../assets/imgs/zk.png' alt />
  27. </div>
  28. <img v-else class='lb-left-noImg' src='@/assets/imgs/nkt.jpg' alt />
  29. </div>
  30. <div class='lb-bottom'>
  31. <nav>
  32. <span></span>
  33. <span>建筑综合信息</span>
  34. </nav>
  35. <!-- <p class='place-p1'>
  36. <span>
  37. <img src='@/assets/imgs/jz.png' alt />
  38. {{build.length>0?formatter('项目名称',build):'--'}}
  39. </span>
  40. </p>-->
  41. <p class='place-p2'>
  42. <span>
  43. <img src='@/assets/imgs/didian.png' alt />
  44. {{build.length>0?formatter('项目地址',build):'--'}}
  45. </span>
  46. </p>
  47. <div class='place-bottom'>
  48. <div class='place-box'>
  49. <div class='place-left'>
  50. <span>建筑面积</span>
  51. <span>建筑高度</span>
  52. <span>楼层分布</span>
  53. <span>车位信息</span>
  54. </div>
  55. <div class='place-right'>
  56. <span :title='`${build.length>0?formatter("建筑面积",build):"--"}`'>{{build.length>0?formatter('建筑面积',build):'--'}}</span>
  57. <span :title='`${build.length>0?formatter("建筑高度",build):"--"}`'>{{build.length>0?formatter('建筑高度',build):'--'}}</span>
  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. </div>
  61. </div>
  62. <div class='place-box'>
  63. <div class='place-left'>
  64. <span>租赁面积</span>
  65. <span>竣工日期</span>
  66. <span>开业日期</span>
  67. <span>移交日期</span>
  68. </div>
  69. <div class='place-right'>
  70. <span :title='`${build.length>0?formatter("租赁面积",build):"--"}`'>{{build.length>0?formatter('租赁面积',build):'--'}}</span>
  71. <span :title='`${build.length>0?formatter("竣工日期",build):"--"}`'>{{build.length>0?formatter('竣工日期',build):'--'}}</span>
  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. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <div class='view-right'>
  80. <div class='view-right-box'>
  81. <div class='lb-right'>
  82. <div v-if='pic1.length>0' style='height:100%'>
  83. <rotation type='2' :rotationImg='pic1' :key='1' @scan='scan'></rotation>
  84. <div class='lb-icon' @click='picClick("1")'></div>
  85. <img class='lb-img' @click='picClick("1")' src='../../assets/imgs/zk.png' alt />
  86. </div>
  87. <img v-else class='lb-left-noImg' src='@/assets/imgs/qwt.jpg' alt />
  88. </div>
  89. <div class='lb-right-bottom'>
  90. <nav>
  91. <span></span>
  92. <span>施工单位信息</span>
  93. </nav>
  94. <div class='view-right-bottom'>
  95. <el-table
  96. :data='constructions'
  97. :height='350'
  98. style='font-size:12px'
  99. :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
  100. v-loading='loading'
  101. >
  102. <el-table-column label='序号' width='50' type='index' align='left'></el-table-column>
  103. <el-table-column label='专业' width='70' prop='professional'>
  104. <template slot-scope='{row}'>{{row.professional||'--'}}</template>
  105. </el-table-column>
  106. <el-table-column prop='unit ' label='施工单位'>
  107. <template slot-scope='{row}'>{{row.unit ||'--'}}</template>
  108. </el-table-column>
  109. <el-table-column label='联系人' prop width='65' :show-overflow-tooltip='true'>
  110. <template slot-scope='{row}'>{{row.lxr||'--'}}</template>
  111. </el-table-column>
  112. <el-table-column prop='phone' label='联系电话' width='110'>
  113. <template slot-scope='{row}'>{{row.lxdh||'--'}}</template>
  114. </el-table-column>
  115. </el-table>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. <PicModal ref='picModal'></PicModal>
  122. </div>
  123. <!-- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
  124. <div class='view-right-bottom-l'>{{item.type}}</div>
  125. <div class='view-right-bottom-r'>{{item.company}}</div>
  126. </div>-->
  127. <!-- <div class='view-left-box'>
  128. <div class='view-left-top'>
  129. <div class='view-top-imgL'>
  130. <rotation :rotationImg='rotationImg'></rotation>
  131. </div>
  132. <div class='view-top-imgR'>
  133. <rotation :rotationImg='rotationImg'></rotation>
  134. </div>
  135. </div>
  136. <div class='view-left-bottom'>
  137. <nav>
  138. <span></span>
  139. <span>建筑综合信息</span>
  140. </nav>
  141. <p class='place-p'>
  142. <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
  143. </p>
  144. <span class='place-hr'></span>
  145. <div class='place-bottom'>
  146. <div class='place-bottom-row'>
  147. <div>
  148. <span>项目名称</span>
  149. <span>建筑高度</span>
  150. <span>楼层分布</span>
  151. <span>车位信息</span>
  152. </div>
  153. <div style='min-width:172px;'>
  154. <span>三明万达广场</span>
  155. <span>裙房31.22m</span>
  156. <span>地上5层/地下2层</span>
  157. <span>地上832个/地下0个</span>
  158. </div>
  159. </div>
  160. <div class='place-bottom-row'>
  161. <div>
  162. <span>竣工日期</span>
  163. <span>开业日期</span>
  164. <span>移交日期</span>
  165. </div>
  166. <div style='min-width:172px;'>
  167. <span>2016年11月21日</span>
  168. <span>2016年12月30日</span>
  169. <span>2017年04月30日</span>
  170. </div>
  171. </div>
  172. <div class='place-bottom-row'>
  173. <div>
  174. <span style='margin-bottom:32px'>建筑面积</span>
  175. <span>租赁面积</span>
  176. </div>
  177. <div>
  178. <span>
  179. 13.07万㎡
  180. 其中地上9.90万㎡、地下3.55万㎡
  181. </span>
  182. <span>
  183. 6.45㎡
  184. 其中地上5.82万㎡,地下0.63万㎡
  185. </span>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>-->
  191. </template>
  192. <script>
  193. import PicModal from './picModal'
  194. import { queryFact } from '@/api/overview'
  195. import { mapGetters } from 'vuex'
  196. export default {
  197. data() {
  198. return {
  199. loading: true,
  200. pic1: [], //区位图
  201. pic2: [], //鸟瞰图
  202. build: {}, //左下信息
  203. constructions: [], //右下数组
  204. shuzihuayijiao: '',
  205. va: ''
  206. }
  207. },
  208. methods: {
  209. scan(val) {
  210. this.va = val
  211. },
  212. picClick(type) {
  213. if (type === '1') {
  214. if (this.pic1.length >= this.va) {
  215. this.$refs.picModal.showModal([this.pic1[this.va - 1]])
  216. } else {
  217. this.$refs.picModal.showModal(this.pic1)
  218. }
  219. } else {
  220. if (this.pic2.length >= this.va) {
  221. this.$refs.picModal.showModal([this.pic2[this.va - 1]])
  222. } else {
  223. this.$refs.picModal.showModal(this.pic2)
  224. }
  225. }
  226. },
  227. findxmzl() {
  228. // if (this.shuzihuayijiao) {
  229. // window.open(`${this.shuzihuayijiao}`, true)
  230. // }
  231. },
  232. query() {
  233. let params = {
  234. getParams: {
  235. plazaId: this.$store.state.plazaId
  236. // plazaId: '1000303'//这个id有3条数据
  237. }
  238. }
  239. queryFact(params).then(res => {
  240. if (res.result == 'success') {
  241. this.loading = false
  242. this.pic1 = []
  243. this.pic2 = []
  244. this.build = {}
  245. this.constructions = []
  246. this.shuzihuayijiao = ''
  247. this.pic1 = res.pic1 ? res.pic1 : []
  248. this.pic2 = res.pic2 ? res.pic2 : []
  249. this.build = res.build ? res.build : {}
  250. this.constructions = res.constructions ? res.constructions : []
  251. this.shuzihuayijiao = res.shuzihuayijiao ? res.shuzihuayijiao : ''
  252. if (res.plazaName) {
  253. this.$store.commit('SETPLAZENAME', res.plazaName)
  254. }
  255. }
  256. })
  257. },
  258. getImages(_url) {
  259. if (_url !== undefined) {
  260. let _u = _url.substring(7)
  261. return 'https://images.weserv.nl/?url=' + _u
  262. }
  263. },
  264. formatter(str, arrv) {
  265. if (str && arrv) {
  266. const Objs = arrv.find(e => e && e.project == str)
  267. return Objs ? Objs.basic : '--'
  268. } else {
  269. return ''
  270. }
  271. },
  272. init() {
  273. //预览是否开启
  274. // let previewUrl = location.href.split('?')[1]
  275. // if (previewUrl) {
  276. // previewUrl = Boolean(previewUrl.split('=')[1])
  277. // this.$store.commit('SETISPREVIEW', previewUrl)
  278. // }
  279. let previewUrl = this.$route.query.isPreview,
  280. plazaId = this.$route.query.plazaId
  281. if (previewUrl != '') {
  282. console.log(previewUrl)
  283. this.$store.commit('SETISPREVIEW', previewUrl)
  284. }
  285. if (plazaId) {
  286. localStorage.setItem('PLAZAID', plazaId)
  287. this.$store.commit('STOREPLAZAID', plazaId)
  288. }
  289. // let previewUrl = location.href.split('=')[1] ? location.href.split('=')[1].split('&')[0] : false,
  290. // plazaId = location.href.split('=')[2] ? location.href.split('=')[2] : '1000423'
  291. }
  292. },
  293. mounted() {
  294. this.query()
  295. },
  296. created() {
  297. this.init()
  298. },
  299. computed: {
  300. ...mapGetters(['isPreview', 'pic', 'plazaId'])
  301. },
  302. components: {
  303. PicModal
  304. }
  305. }
  306. </script>
  307. <style lang="less" scoped>
  308. @import '../../assets/css/rotation.less';
  309. .overview {
  310. .view-box .view-left {
  311. overflow: hidden;
  312. .lb-left {
  313. margin-bottom: 0;
  314. }
  315. }
  316. }
  317. </style>
  318. <style lang="less">
  319. .view-right-bottom {
  320. .el-table td,
  321. .el-table th {
  322. padding: 3px 0;
  323. }
  324. }
  325. </style>