123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.05.26
- *@info 项目概况主页
- */
- <template>
- <div class='overview'>
- <div class='view-title'>
- <nav>
- <span></span>
- <span>项目基本信息</span>
- </nav>
- <!-- <el-button type='info' plain disabled> -->
- <div class='view-button' :disabled='true' @click='findxmzl' title='数字化移交系统上线后可用'>
- <img src='../../assets/imgs/wd.png' alt />
- 项目资料
- </div>
- <!-- </el-button> -->
- </div>
- <div class='view-box'>
- <div class='view-left'>
- <div class='lb-left'>
- <div v-if='pic2.length>0' style='height:100%'>
- <rotation :key='2' type='2' :rotationImg='pic2' @scan='scan'></rotation>
- <div class='lb-icon' @click='picClick("2")'></div>
- <img class='lb-img' @click='picClick("2")' src='../../assets/imgs/zk.png' alt />
- </div>
- <img v-else class='lb-left-noImg' src='@/assets/imgs/nkt.jpg' alt />
- </div>
- <div class='lb-bottom'>
- <nav>
- <span></span>
- <span>建筑综合信息</span>
- </nav>
- <!-- <p class='place-p1'>
- <span>
- <img src='@/assets/imgs/jz.png' alt />
- {{build.length>0?formatter('项目名称',build):'--'}}
- </span>
- </p>-->
- <p class='place-p2'>
- <span>
- <img src='@/assets/imgs/didian.png' alt />
- {{build.length>0?formatter('项目地址',build):'--'}}
- </span>
- </p>
- <div class='place-bottom'>
- <div class='place-box'>
- <div class='place-left'>
- <span>建筑面积</span>
- <span>建筑高度</span>
- <span>楼层分布</span>
- <span>车位信息</span>
- </div>
- <div class='place-right'>
- <span :title='`${build.length>0?formatter("建筑面积",build):"--"}`'>{{build.length>0?formatter('建筑面积',build):'--'}}</span>
- <span :title='`${build.length>0?formatter("建筑高度",build):"--"}`'>{{build.length>0?formatter('建筑高度',build):'--'}}</span>
- <span :title='`${build.length>0?formatter("楼层分布",build):"--"}`'>{{build.length>0?formatter('楼层分布',build):'--'}}</span>
- <span :title='`${build.length>0?formatter("车位信息",build):"--"}`'>{{build.length>0?formatter('车位信息',build):'--'}}</span>
- </div>
- </div>
- <div class='place-box'>
- <div class='place-left'>
- <span>租赁面积</span>
- <span>竣工日期</span>
- <span>开业日期</span>
- <span>移交日期</span>
- </div>
- <div class='place-right'>
- <span :title='`${build.length>0?formatter("租赁面积",build):"--"}`'>{{build.length>0?formatter('租赁面积',build):'--'}}</span>
- <span :title='`${build.length>0?formatter("竣工日期",build):"--"}`'>{{build.length>0?formatter('竣工日期',build):'--'}}</span>
- <span :title='`${build.length>0?formatter("开业日期",build):"--"}`'>{{build.length>0?formatter('开业日期',build):'--'}}</span>
- <span :title='`${build.length>0?formatter("移交日期",build):"--"}`'>{{build.length>0?formatter('移交日期',build):'--'}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class='view-right'>
- <div class='view-right-box'>
- <div class='lb-right'>
- <div v-if='pic1.length>0' style='height:100%'>
- <rotation type='2' :rotationImg='pic1' :key='1' @scan='scan'></rotation>
- <div class='lb-icon' @click='picClick("1")'></div>
- <img class='lb-img' @click='picClick("1")' src='../../assets/imgs/zk.png' alt />
- </div>
- <img v-else class='lb-left-noImg' src='@/assets/imgs/qwt.jpg' alt />
- </div>
- <div class='lb-right-bottom'>
- <nav>
- <span></span>
- <span>施工单位信息</span>
- </nav>
- <div class='view-right-bottom'>
- <el-table
- :data='constructions'
- :height='350'
- :cell-class-name='addClass'
- :span-method='objectSpanMethod'
- border
- style='font-size:12px'
- :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
- v-loading='loading'
- >
- <el-table-column label='序号' width='45' type='index' align='left'></el-table-column>
- <el-table-column label='总包/分包' prop='type' width='80' align='center'>
- <template slot-scope='{row}'>{{row.type||'--'}}</template>
- </el-table-column>
- <el-table-column label='专业' width='70' prop='professional'>
- <template slot-scope='{row}'>{{row.professional||'--'}}</template>
- </el-table-column>
- <el-table-column prop='unit ' label='施工单位'>
- <template slot-scope='{row}'>{{row.unit ||'--'}}</template>
- </el-table-column>
- <el-table-column label='联系人' prop width='70' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.lxr||'--'}}</template>
- </el-table-column>
- <el-table-column prop='phone' label='联系电话' width='110'>
- <template slot-scope='{row}'>{{row.lxdh||'--'}}</template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- </div>
- <PicModal ref='picModal'></PicModal>
- </div>
- <!-- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
- <div class='view-right-bottom-l'>{{item.type}}</div>
- <div class='view-right-bottom-r'>{{item.company}}</div>
- </div>-->
- <!-- <div class='view-left-box'>
- <div class='view-left-top'>
- <div class='view-top-imgL'>
- <rotation :rotationImg='rotationImg'></rotation>
- </div>
- <div class='view-top-imgR'>
- <rotation :rotationImg='rotationImg'></rotation>
- </div>
- </div>
- <div class='view-left-bottom'>
- <nav>
- <span></span>
- <span>建筑综合信息</span>
- </nav>
- <p class='place-p'>
- <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
- </p>
- <span class='place-hr'></span>
- <div class='place-bottom'>
- <div class='place-bottom-row'>
- <div>
- <span>项目名称</span>
- <span>建筑高度</span>
- <span>楼层分布</span>
- <span>车位信息</span>
- </div>
- <div style='min-width:172px;'>
- <span>三明万达广场</span>
- <span>裙房31.22m</span>
- <span>地上5层/地下2层</span>
- <span>地上832个/地下0个</span>
- </div>
- </div>
- <div class='place-bottom-row'>
- <div>
- <span>竣工日期</span>
- <span>开业日期</span>
- <span>移交日期</span>
- </div>
- <div style='min-width:172px;'>
- <span>2016年11月21日</span>
- <span>2016年12月30日</span>
- <span>2017年04月30日</span>
- </div>
- </div>
- <div class='place-bottom-row'>
- <div>
- <span style='margin-bottom:32px'>建筑面积</span>
- <span>租赁面积</span>
- </div>
- <div>
- <span>
- 13.07万㎡
- 其中地上9.90万㎡、地下3.55万㎡
- </span>
- <span>
- 6.45㎡
- 其中地上5.82万㎡,地下0.63万㎡
- </span>
- </div>
- </div>
- </div>
- </div>
- </div>-->
- </template>
- <script>
- import PicModal from './picModal'
- import { queryFact } from '@/api/overview'
- import { mapGetters } from 'vuex'
- export default {
- data() {
- return {
- loading: true,
- pic1: [], //区位图
- pic2: [], //鸟瞰图
- build: {}, //左下信息
- constructions: [], //右下数组
- shuzihuayijiao: '',
- va: '',
- spanArr: [], //二维数组,用于存放单元格合并规则
- position: 0 //用于存储相同项的开始index
- }
- },
- methods: {
- addClass({ columnIndex }) {
- if (columnIndex === 4) {
- return 'contact'
- }
- },
- objectSpanMethod({ row, column, rowIndex, columnIndex }) {
- for (let i = 1; i <= 5; i++) {
- if (columnIndex === i) {
- const _row = this.spanArr[i][rowIndex]
- const _col = _row > 0 ? 1 : 0
- // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
- return {
- rowspan: _row,
- colspan: _col
- }
- }
- }
- },
- /**
- * 返回的数据处理
- */
- handelTableData(data) {
- let dict = {
- 总包: 0,
- 分包: 1
- }
- data = data.sort((a, b) => {
- // 按总分包排序
- if (a.type !== b.type) {
- return dict[a.type] - dict[b.type]
- }
- // 按专业排序
- if (a.professional !== b.professional) {
- return b.professional.localeCompare(a.professional)
- }
- // 按施工单位排序
- if (a.unit !== b.unit) {
- return b.unit.localeCompare(a.unit)
- }
- // 按联系人排序
- if (a.lxr !== b.lxr) {
- return b.lxr.localeCompare(a.lxr)
- }
- })
- data.map(item => {
- console.log(item)
- // return
- if (item.lxr) {
- let lxr = item.lxr.split(',').join('\n\r')
- item.lxr = lxr
- }
- return item
- })
- return data
- },
- rowspan(idx, prop) {
- // 第一列 总包合并一格,分包按照 第二列专业的单元格规则进行合并
- if (idx === 1) {
- // 初始化数组
- this.spanArr[1] = new Array(this.constructions.length).fill(0)
- let totalTypeLen = this.constructions.filter(a => a.type === '总包').length
- this.spanArr[1][0] = totalTypeLen
- this.spanArr[1] = this.spanArr[1].map((item, index) => {
- if (index > totalTypeLen - 1) {
- item = this.spanArr[2][index]
- }
- return item
- })
- return true
- }
- // 其他列单元格合并规则
- this.spanArr[idx] = []
- this.position = 0
- this.constructions.forEach((item, index) => {
- if (index === 0) {
- this.spanArr[idx].push(1)
- this.position = 0
- } else {
- if (this.constructions[index][prop] === this.constructions[index - 1][prop]) {
- this.spanArr[idx][this.position] += 1 //有相同项
- this.spanArr[idx].push(0) // 名称相同后往数组里面加一项0
- } else {
- this.spanArr[idx].push(1) //同列的前后两行单元格不相同
- this.position = index
- }
- }
- })
- },
- scan(val) {
- this.va = val
- },
- picClick(type) {
- if (type === '1') {
- this.$refs.picModal.showModal(this.pic1)
- // if (this.pic1.length >= this.va) {
- // this.$refs.picModal.showModal([this.pic1[this.va - 1]])
- // } else {
- // this.$refs.picModal.showModal(this.pic1)
- // }
- } else {
- this.$refs.picModal.showModal(this.pic2)
- // if (this.pic2.length >= this.va) {
- // this.$refs.picModal.showModal([this.pic2[this.va - 1]])
- // } else {
- // this.$refs.picModal.showModal(this.pic2)
- // }
- }
- },
- findxmzl() {
- // if (this.shuzihuayijiao) {
- // window.open(`${this.shuzihuayijiao}`, true)
- // }
- },
- query() {
- let params = {
- getParams: {
- plazaId: this.$store.state.plazaId
- // plazaId: '1000303'//这个id有3条数据
- }
- }
- queryFact(params).then(res => {
- if (res.result == 'success') {
- this.loading = false
- this.pic1 = []
- this.pic2 = []
- this.build = {}
- this.constructions = []
- this.shuzihuayijiao = ''
- this.pic1 = res.pic1 ? res.pic1 : []
- this.pic2 = res.pic2 ? res.pic2 : []
- this.build = res.build ? res.build : {}
- let constructions = []
- constructions = res.constructions ? res.constructions : []
- if (constructions.length > 0) {
- // this.parseTableData(constructions)
- let handleData = this.handelTableData(constructions)
- this.constructions = handleData
- this.rowspan(2, 'professional')
- this.rowspan(3, 'unit')
- this.rowspan(4, 'lxr')
- this.rowspan(5, 'lxdh')
- this.rowspan(1, 'type')
- }
- console.log(this.constructions)
- this.shuzihuayijiao = res.shuzihuayijiao ? res.shuzihuayijiao : ''
- if (res.plazaName) {
- this.$store.commit('SETPLAZENAME', res.plazaName)
- }
- }
- })
- },
- getImages(_url) {
- if (_url !== undefined) {
- let _u = _url.substring(7)
- return 'https://images.weserv.nl/?url=' + _u
- }
- },
- formatter(str, arrv) {
- if (str && arrv) {
- const Objs = arrv.find(e => e && e.project == str)
- return Objs ? Objs.basic : '--'
- } else {
- return ''
- }
- },
- init() {
- //预览是否开启
- // let previewUrl = location.href.split('?')[1]
- // if (previewUrl) {
- // previewUrl = Boolean(previewUrl.split('=')[1])
- // this.$store.commit('SETISPREVIEW', previewUrl)
- // }
- let previewUrl = this.$route.query.isPreview,
- plazaId = this.$route.query.plazaId
- if (previewUrl != '') {
- console.log(previewUrl)
- this.$store.commit('SETISPREVIEW', previewUrl)
- }
- if (plazaId) {
- localStorage.setItem('PLAZAID', plazaId)
- this.$store.commit('STOREPLAZAID', plazaId)
- }
- // let previewUrl = location.href.split('=')[1] ? location.href.split('=')[1].split('&')[0] : false,
- // plazaId = location.href.split('=')[2] ? location.href.split('=')[2] : '1000423'
- }
- },
- mounted() {
- this.query()
- },
- created() {
- this.init()
- },
- computed: {
- ...mapGetters(['isPreview', 'pic', 'plazaId'])
- },
- components: {
- PicModal
- }
- }
- </script>
- <style lang="less" scoped>
- .contact {
- div {
- word-break: break-all !important;
- white-space: pre !important;
- }
- }
- @import '../../assets/css/rotation.less';
- .overview {
- .view-box .view-left {
- overflow: hidden;
- .lb-left {
- margin-bottom: 0;
- }
- }
- }
- @media screen and (max-width: 1366px) {
- /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
- .overview .view-box .view-left .lb-bottom .place-bottom .place-box .place-right span {
- width: 200px;
- }
- }
- </style>
- <style lang="less">
- .view-right-bottom {
- .el-table td,
- .el-table th {
- padding: 3px 0;
- }
- }
- </style>
|