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

<template>
    <div class='overview'>
        <!-- 照片预览 -->
        <ImagePreview class='overview-img-preview' :key='imgKey' :visible.sync='showImgPreview' :imgList='imgPreviewList' />
        <!-- 轮播 -->
        <div class='my-swipe'>
            <van-swipe ref='mSwipe' :autoplay='autoplay' indicator-color='white' v-show='imgList.length'>
                <van-swipe-item v-for='(image, index) in imgList' :key='index' @click='openImgPreview(image,index)'>
                    <span class='type-name' v-show='image.typename'>{{ image.typename }}</span>
                    <van-image fit='contain' :src='image.url' />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- tab页签 -->
        <van-tabs class='overview-tabs' v-model='active' color='#025BAA' title-active-color='#025BAA' :line-width='110' :line-height='2'>
            <!-- 建筑综合信息 -->
            <van-tab class='buiding-tab' title='建筑综合信息'>
                <div class='building-info'>
                    <!-- <div class='cell'>
                        <span class='left'>项目名称:</span>
                        <span class='right'>{{plazaName}}</span>
                    </div>-->
                    <div class='cell' v-for='(item, index) in build' :key='index'>
                        <span class='left'>{{ item.project }}:</span>
                        <span class='right'>{{ item.basic }}</span>
                    </div>
                    <!-- <div class='cell'>
                        <span class='left'>项目地址:</span>
                        <span class='right'>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼办公室</span>
                    </div>
                    <div class='cell'>
                        <span class='left'>建筑面积:</span>
                        <span class='right'>13.07万㎡，其中地上9.09万㎡、地下3.55万㎡</span>
                    </div>

                    <div class='cell'>
                        <span class='left'>建筑高度:</span>
                        <span class='right'>裙房31.22万m</span>
                    </div>
                    <div class='cell'>
                        <span class='left'>楼层分布:</span>
                        <span class='right'>地上5层/地下2层</span>
                    </div>
                    <div class='cell'>
                        <span class='left'>车位信息:</span>
                        <span class='right'>地下823个/地上0个</span>
                    </div>
                    <div class='cell'>
                        <span class='left'>租赁面积:</span>
                        <span class='right'>6.45㎡，其中地上5.82万㎡、地下0.63万㎡</span>
                    </div>
                    <div class='cell'>
                        <span class='left'>开业时间:</span>
                        <span class='right'>2016年11月21日</span>
                    </div>
                    <div class='cell'>
                        <span class='left'>移交时间:</span>
                        <span class='right'>6.45㎡，其中地上5.82万㎡、地下0.63万㎡</span>
                    </div>-->
                </div>
            </van-tab>
            <!-- 施工单位信息 -->
            <van-tab title='施工单位信息' class='sgdw-info'>
                <van-tabs type='card' color='#E5EEF6' title-active-color='#025baa' title-inactive-color='#666666'>
                    <van-tab title='总包'>
                        <ul class='zb' v-if='showTotalContractInfo'>
                            <li class='title'>
                                <!-- <i>icon</i>中国建筑第二工程局有限公司 -->
                                <i class='iconfont wanda-gongsiqiye'></i>
                                {{ totalContractInfo.unit }}
                            </li>
                            <li class='system'>
                                <!-- <span class='card'>消防电</span>
                                <span class='card'>土建</span>
                                <span class='card'>弱电</span>
                                <span class='card'>机电</span>
                                <span class='card'>给排水</span>-->
                                <span class='card' v-for='(item, index) in totalContractInfo.professional' :key='index'>{{ item }}</span>
                            </li>
                            <li class='name'>
                                <i class='iconfont wanda-renwu-ren'></i>
                                {{ totalContractInfo.name }}
                            </li>
                            <li class='phone'>
                                <i class='iconfont wanda-dianhua'></i>
                                {{ totalContractInfo.phone }}
                            </li>
                        </ul>
                        <ul class='zb' v-else>
                            <!--  暂无数据 -->
                            <van-empty class='m-empty' description='暂无数据'>
                                <template #image>
                                    <img class='no-data' src='../../assets/images/search_null.png' alt />
                                </template>
                            </van-empty>
                        </ul>
                    </van-tab>
                    <van-tab title='分包'>
                        <ul class='fb' v-if='subcontractInfo.length'>
                            <li class='fb-card' v-for='(item, index) in subcontractInfo' :key='index'>
                                <div class='card-left'>{{ item[0].professional }}</div>
                                <div class='card-right'>
                                    <div class='info' v-for='(detail, dIndex) in item' :key='dIndex'>
                                        <p class='company'>{{ detail.unit }}</p>
                                        <p class='name-phone'>
                                            <span>{{ detail.lxr || '--' }}</span>
                                            <span>{{ detail.lxdh || '--' }}</span>
                                        </p>
                                        <!-- <p class='name-phone'>
                                            <span>张伟</span>
                                            <span>0411-86666924</span>
                                        </p>-->
                                    </div>
                                </div>
                            </li>
                            <!-- <li class='fb-card' v-for='i in 5' :key='i'>
                                <div class='card-left'>消防水</div>
                                <div class='card-right'>
                                    <div class='info'>
                                        <p class='company'>大连金帝建设工程有限公司</p>
                                        <p class='name-phone'>
                                            <span>日立电梯（中国）有限公司</span>
                                            <span>0411-86666924</span>
                                        </p>
                                        <p class='name-phone'>
                                            <span>张伟</span>
                                            <span>0411-86666924</span>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class='fb-card'>
                                <div class='card-left'>幕墙</div>
                                <div class='card-right'>
                                    <div class='info'>
                                        <p class='company'>大连建工机电安装工程有限公司</p>
                                        <p class='name-phone'>
                                            <span>张伟</span>
                                            <span>18612349786</span>
                                        </p>
                                        <p class='name-phone'>
                                            <span>张伟</span>
                                            <span>18612349786</span>
                                        </p>
                                    </div>
                                    <div class='info'>
                                        <p class='company'>大连建工机电安装工程有限公司</p>
                                        <p class='name-phone'>
                                            <span>张伟</span>
                                            <span>18612349786</span>
                                        </p>
                                    </div>
                                </div>
                            </li>-->
                        </ul>
                        <ul class='fb' v-else>
                            <!--   暂无数据 -->
                            <van-empty class='m-empty' description='暂无数据'>
                                <template #image>
                                    <img class='no-data' src='../../assets/images/search_null.png' alt />
                                </template>
                            </van-empty>
                        </ul>
                    </van-tab>
                </van-tabs>
            </van-tab>
        </van-tabs>
        <div class='bottom' @click='goToUpdateRecord'>
            <!-- <span v-if='false'>近一个月,重要维保8条,重要维修3条,其他事项5条,综合事项10条</span> -->
            <van-notice-bar
                v-if='showNoticeBar && noticeBarText.length>=25'
                class='bottom-notice'
                background='#e5eef6'
                color='#025baa'
                speed='50'
                scrollable
                :text='noticeBarText'
                :key='`notice_${noticeKey}`'
                @replay='noticeKey++'
            />
            <span v-else-if='noticeBarText && noticeBarText.length<25'>{{noticeBarText}}</span>
            <span class='text' v-else>近一个月,说明书无更新</span>
            <van-icon v-show='showNoticeBar' class='building-arrow' name='arrow' size='14px' />
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
// vant 按需引入
import { Button, Icon, Swipe, SwipeItem, Lazyload, Image as VanImage, Tab, Tabs, Empty, NoticeBar } from 'vant'
Vue.use(Button).use(Icon).use(Swipe).use(SwipeItem).use(Lazyload).use(VanImage)
Vue.use(Tab).use(Tabs)
Vue.use(NoticeBar)
Vue.use(Empty)
import { mapGetters } from 'vuex'
// lodash
import { isEmpty, cloneDeep } from 'lodash'
// moment
import moment from 'moment'
import ImagePreview from '@/components/ImagePreview'
// 接口
import { queryFact, queryRecordCount } from '@/api/overview'
export default {
    name: 'Overview',
    props: {},
    components: { ImagePreview },
    data() {
        return {
            imgList: [], //轮播图数组

            showImgPreview: false, //是否显示预览大图
            imgKey: `img_${new Date().getTime()}`, //预览大图key值
            imgPreviewList: [], //预览图数组
            autoplay: 3000, //轮播时长,为0时停止轮播

            active: 0, //  激活的tab页 0:建筑综合信息 1:施工单位信息
            plazaName: '', //广场名称
            build: [], //建筑综合信息
            totalContractInfo: {}, //总包信息
            showTotalContractInfo: true, //是否显示总包信息
            subcontractInfo: [], //分包信息
            showNoticeBar: true, //底部noticeBar 显隐
            noticeBarText: '', //底部noticeBar 文本
            objtypeDict: {
                1: '重要维保',
                3: '综合事项',
                4: '重要维修',
                5: '其他事项',
            },
            noticeKey: 1,
        }
    },
    computed: {
        ...mapGetters(['plazaId']),
    },
    watch: {
        /**
         * 关闭预览大图之后,启动自动轮播
         */
        showImgPreview(newV, oldV) {
            if (newV !== oldV && !newV) {
                this.autoplay = 3000
            }
            // 预览大图切换横竖屏之后,主页面轮播图,位置错乱,重新resize恢复位置
            this.$refs.mSwipe.resize()
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$refs.mSwipe.resize()
                }, 1000)
            })
        },
    },
    created() {
        this.queryBaseInfo()
        this.queryRecordCountFunc()
    },

    beforeMount() {},
    mounted() {},
    methods: {
        /**
         * 显示预览大图,同时停止swipe轮播
         */
        openImgPreview(img, index) {
            this.imgKey = `img_${new Date().getTime()}`
            this.autoplay = 0 //点击大图预览之后,停止swiper轮播
            // 按照index,处理图片数组
            let imgPreviewList = cloneDeep(this.imgList).map((v) => v.url)
            imgPreviewList = [...imgPreviewList.slice(index), ...imgPreviewList.slice(0, index)]
            this.$nextTick(() => {
                this.imgPreviewList = imgPreviewList
                this.showImgPreview = true
            })
        },
        /**
         * 查询广场概况
         */
        async queryBaseInfo() {
            let getParams = {
                plazaId: this.plazaId,
            }
            let data = await queryFact({ getParams })
            // console.log(data)
            // 顶部轮播图
            this.imgList = data.pic2.concat(data.pic1)
            this.plazaName = data.plazaName
            // 建筑综合信息
            this.build = data.build
            //总包信息
            let totalContractInfoArr = data.constructions.filter((v) => v.type === '总包')
            if (totalContractInfoArr) {
                this.showTotalContractInfo = true
            } else {
                this.showTotalContractInfo = false
            }
            let totalContractInfo = {
                unit: totalContractInfoArr[0]?.unit || '--',
                name: totalContractInfoArr[0]?.lxr || '--',
                phone: totalContractInfoArr[0]?.lxdh || '--',
                professional: [],
            }
            totalContractInfoArr.map((item) => {
                item.professional && totalContractInfo.professional.push(item.professional)
            })
            this.totalContractInfo = totalContractInfo
            //分包信息,组合页面需要展示的分包信息
            let subcontractInfoArr = data.constructions.filter((v) => v.type === '分包')
            subcontractInfoArr.sort((a, b) => b.professional.localeCompare(a.professional, 'zh'))
            let subcontractInfo = []
            /**
             * 构造二维数组
             */
            subcontractInfo[0] = [subcontractInfoArr[0]]
            let __index = 0
            subcontractInfoArr.map((item, index) => {
                if (index >= 1) {
                    if (item.professional === subcontractInfo[__index][0].professional) {
                        subcontractInfo[__index].push(item)
                    } else {
                        __index++
                        subcontractInfo[__index] = [item]
                    }
                }
            })
            this.subcontractInfo = subcontractInfo
            // console.log(subcontractInfo)
        },
        /**
         * 查询近三十天说明书更新记录
         *
         */
        async queryRecordCountFunc() {
            let getParams = {
                plazaId: this.plazaId, //广场id 必填
                changeDateStartDate: moment().subtract(1, 'months').format('YYYYMMDD000000'), //变更记录开始时间 格式yyyyMMddHHmiss 必填
                changeDateEndDate: moment().format('YYYYMMDD000000'), //变更记录结束时间 格式yyyyMMddHHmiss 必填
            }
            let data = await queryRecordCount({ getParams })
            // console.log(data)
            // 测试数据
            // data = {
            //     data: [
            //         {
            //             cnt: 6,
            //             objtype: 4, //变更内容类型（1：重要维保 3：综合事项 4：重要维修 5：其他事项）
            //         },
            //         { cnt: 10, objtype: 1 },
            //         { cnt: 45, objtype: 3 },
            //         { cnt: 4, objtype: 5 },
            //     ],
            //     result: 'success',
            // }
            if (!data || data.result !== 'success' || !data.data.length) {
                this.showNoticeBar = false //底部noticeBar 显隐
                this.noticeBarText = ''
                return true
            }
            data = data.data
            data.sort((a, b) => a.objtype - b.objtype)
            this.showNoticeBar = true
            this.noticeBarText = ''
            // 文本处理
            let noticeBarText = '近一个月,'
            data.map((item) => {
                noticeBarText += `${this.objtypeDict[item.objtype]} ${item.cnt} 条,`
            })
            this.noticeBarText = noticeBarText.slice(0, noticeBarText.length - 1)
        },
        /**
         * 跳转说明书更新记录
         */
        goToUpdateRecord() {
            if (this.showNoticeBar) {
                this.$router.push({ name: 'UpdateRecord', params: { initPage: true } })
            }
        },
    },
}
</script>
<style lang="less" scoped>
.overview {
    width: 100%;
    height: calc(100% - 150px);
    // background-color: lightblue;
    // display: flex;
    // flex-direction: column;
    // 轮播图
    .my-swipe {
        display: block;
        width: 343px;
        height: 160px;
        margin: 12px auto;
        .van-swipe {
            width: 100%;
            height: 100%;
            .van-swipe-item {
                position: relative;
                .type-name {
                    display: inline-block;
                    width: 70px;
                    padding: 5px 0 5px 10px;
                    position: absolute;
                    z-index: 10;
                    left: 1px;
                    background: linear-gradient(270deg, rgba(4, 22, 39, 0) 0%, #020d18 100%);
                    color: #fff;
                    font-size: 16px;
                    border-radius: 4px;
                }
                .van-image {
                    height: 100%;
                }
            }
        }
    }
    // tabs切换
    .overview-tabs {
        width: 100%;
        height: calc(100% - 180px);
        display: flex;
        flex-direction: column;
        /deep/ .van-tabs__content {
            flex: 1;
            overflow: auto;
        }
        /deep/ .van-tabs__wrap {
            border-bottom: 1px solid #eaeaea;
            .van-tabs__nav--line {
                box-sizing: content-box;
                height: 100%;
                width: 80%;
                margin: 0 auto;
            }
            .van-tab__text {
                font-size: 16px;
            }
        }

        // 建筑综合信息
        .buiding-tab {
            width: 100%;
            height: 100%;
            .building-info {
                width: 100%;
                overflow: auto;
                padding: 16px;
                .cell {
                    width: 100%;
                    min-height: 20px;
                    margin-top: 12px;
                    display: flex;
                    .left {
                        width: 75px;
                        color: #666;
                        font-size: 14px;
                    }
                    .right {
                        flex: 1;
                        color: #333;
                        font-size: 14px;
                    }
                }
            }
        }
        // 施工单位信息
        .sgdw-info {
            margin-top: 15px;
            height: calc(100% - 15px);
            // tab样式修改
            /deep/.van-tabs__nav {
                width: 50%;
                margin: 0 auto;
                border-color: #d4d4d4;
                .van-tab--active {
                    border: 1px solid #025baa !important;
                    background-color: rgb(229, 238, 246);
                }
            }
            /deep/.van-tabs__wrap {
                border-bottom: none;
                // margin: 15px 0;
                .van-tabs__nav--card {
                    border-radius: 2px;
                    border-color: #d4d4d4 !important;
                }
                .van-tab {
                    border-radius: 2px;
                }
            }
            & > .van-tabs {
                display: flex;
                flex-direction: column;
                height: 100%;
                .van-tabs__content {
                    flex: 1;
                    overflow: auto;
                }
            }
            // 总包
            .zb {
                padding: 15px 18px 10px 18px;
                li {
                    height: 25px;
                    line-height: 25px;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                }
                i {
                    display: inline-block;
                    overflow: hidden;
                    margin-right: 10px;
                }

                .title {
                    color: #333333;
                    font-size: 16px;
                    font-weight: 600;
                }
                .system {
                    padding-left: 20px;
                    height: auto;
                    .card {
                        display: inline-block;
                        height: 25px;
                        font-size: 14px;
                        background-color: #eff0f1;
                        border-radius: 2px;
                        color: #666;
                        padding: 0 10px;
                        margin-right: 5px;
                        margin-bottom: 5px;
                    }
                }
                .name,
                .phone {
                    color: #333333;
                    font-size: 14px;
                }
            }
            // 分包
            .fb {
                padding: 15px 18px 10px 18px;

                .fb-card {
                    width: 100%;
                    height: auto;
                    display: flex;
                    border-radius: 4px;
                    border: 1px solid #d4d4d4;
                    margin-bottom: 13px;
                    .card-left {
                        width: 65px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #eff0f1;
                        border-radius: 4px 0px 0px 4px;
                        padding: 8px;
                        font-size: 16px;
                        font-weight: 500;
                        color: #333333;
                    }
                    .card-right {
                        padding: 8px 16px;
                        flex: 1;
                        .info {
                            .company {
                                font-size: 14px;
                                font-weight: 400;
                                color: #333333;
                                padding: 3px 0;
                            }
                            .name-phone {
                                display: flex;
                                justify-content: space-between;
                                padding: 3px 0;
                                font-size: 14px;
                                font-weight: 400;
                                color: #666666;
                                height: auto;
                                & > :nth-child(1) {
                                    flex: 1;
                                    padding-right: 10px;
                                }
                                & > :nth-child(2) {
                                    width: 100px;
                                    text-align: right;
                                    height: auto;
                                    display: inline-block;
                                    align-items: center;
                                }
                            }
                        }
                        .info + .info {
                            border-top: 1px solid #e6e6e6;
                            margin-top: 5px;
                            padding-top: 5px;
                        }
                    }
                }
            }
        }
    }
    // 空状态
    .m-empty {
        // position: fixed;
        // top: 0;
        // left: 0;
        // width: 100%;
        // height: 100%;
        display: flex;
        align-items: center;
        /deep/ .van-empty__image {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            img {
                width: auto !important;
                height: auto !important;
            }
        }
    }
    // 底部固定条
    .bottom {
        width: 100%;
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        bottom: 50px;
        left: 0;
        height: 44px;
        // padding-right:16px;
        background: #e5eef6;
        color: #025baa;
        font-size: 14px;
        .bottom-notice {
            flex: 1;
        }
        .building-arrow {
            // position: absolute;
            width: 20px;
            // right: 16px;
        }
        .text {
            // padding-left: 15px;
        }
    }
}

@media screen and (orientation: portrait) {
    .test {
        color: lightcoral;
    }
}

@media screen and (orientation: landscape) {
    .test {
        color: lightgreen;
    }
}
</style>