wanda-bm-guide/src/views/overview/index.vue

/**
*@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 title='数字化移交系统上线后可用'>
                <div class='view-button' :disabled='true' @click='findxmzl'>
                    <img src='../../assets/imgs/wd.png' alt />
                    项目资料
                </div>
            </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='5' :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='50' type='index' align='center'></el-table-column>
                                <el-table-column label='总包/分包' prop='type' width='96' 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}'>
                                        <div>{{row.lxr||'--'}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop label='联系电话' width='110' :show-overflow-tooltip='true'>
                                    <template slot-scope='{row}'>
                                        <div>{{row.lxdh||'--'}}</div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <PicModal ref='picModal'></PicModal>
    </div>
</template>
<script>
import PicModal from './picModal'
import { queryFact } from '@/api/overview'
import { mapGetters } from 'vuex'
import { query } from '@/utils/query'
export default {
    data() {
        return {
            loading: true,
            pic1: [], //区位图
            pic2: [], //鸟瞰图
            build: {}, //左下信息
            constructions: [], //右下数组
            shuzihuayijiao: '',
            va: '',
            spanArr: [], //二维数组，用于存放单元格合并规则
            position: 0, //用于存储相同项的开始index
        }
    },
    methods: {
        /**
         *联系人，联系电话样式设置
         */
        addClass({ columnIndex }) {
            if (columnIndex === 4 || columnIndex === 5) {
                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) => {
                if (item.lxr) {
                    let lxr = item.lxr.split(',').join('\n\r')
                    item.lxr = lxr
                }
                if (item.lxdh) {
                    let lxdh = item.lxdh.split(',').join('\n\r')
                    item.lxdh = lxdh
                }

                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, type)
            } else {
                this.$refs.picModal.showModal(this.pic2, type)
            }
        },
        findxmzl() {
            if (this.shuzihuayijiao) {
                window.open(`${this.shuzihuayijiao}`, true)
            }
        },
        query() {
            let plazaId = this.$route.query.plazaId ? this.$route.query.plazaId : this.plazaId
            let params = {
                getParams: {
                    plazaId: plazaId,
                },
            }
            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')
                    }
                    this.shuzihuayijiao = res.shuzihuayijiao ? res.shuzihuayijiao : ''
                    if (res.plazaName) {
                        this.$store.commit('SETPLAZENAME', res.plazaName)
                    } else {
                        this.$store.commit('SETPLAZENAME', '')
                    }
                }
            })
        },
        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 = 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,
    },
    watch: {
        '$store.state.plazaId': {
            handler(val, nel) {
                this.query()
            },
            immediate: true,
        },
    },
}
</script>
<style lang="less" scoped>
// 联系人，联系电话样式
.contact {
    div {
        // word-break: break-all !important;
        white-space: pre !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@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>