index.vue 12 KB

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