wanda-bm-guide/src/views/equipment/eqDialog.vue

<template>
    <!-- 设备设施的三级路由的tabs ,八大系统和7个二级菜单共用了一个全屏弹框-->
    <div class='dialog-container'>
        <el-dialog :visible.sync='visible' :fullscreen='true' @close='closeModal'>
            <!-- 除了清单和原理页面，别的都有记录事项detailDialog页面 -->
            <div slot='title' class='header-title' v-if='Object.keys(dialogInfo).length>0'>
                <span class='title-name'>{{systemName}}-{{dialogInfo.label}}</span>
                <!-- 2020-7-12 查看图纸时 隐藏图标(查看入口) -->
                <!-- v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL" && dialogInfo.id.slice(0,4)!="GJSP"' -->
                <img
                    v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL" && dialogInfo.id.slice(0,4)!="GJSP" && dialogInfo.label !== "查看图纸"'
                    src='../../assets/imgs/zy1.png'
                    @click='visibalBox'
                    style='margin-top:-4px;'
                    alt
                />
            </div>
            <!-- 没有tab的页面 -->
            <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length==0' style='margin:16px 0 0 24px;height:100%'>
                <!-- 原理图 -->
                <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:100%;overflow:auto;height:100%;margin:0 auto'>
                    <rotation type='3' v-if='rotationImg.length>0' :size='sizePic' :rotationImg='rotationImg'></rotation>
                </div>
                <!-- 土建装饰主要材料清单 -->
                <tj-table v-else-if='dialogInfo.id.slice(0,4)=="TJQD"' :param='param'></tj-table>
                <!-- 主要设备清单 标准设备表格 -->
                <!-- 内部设备清单 -->
                <standTable v-else-if='dialogInfo.id.slice(2,4)=="QD"' :param='param' :major='dialogInfo.id'></standTable>
                <!-- 电井商铺范围清单 -->
                <djsp-table v-else-if='dialogInfo.id.slice(0,4)=="GJSP"' :param='param'></djsp-table>
                <!-- 查看图纸 -->
                <look-page v-else-if='dialogInfo.id.slice(2,4)=="TZ"' param major></look-page>
            </div>
            <!-- 有tab的页面 -->
            <div v-else style='margin:16px 0 0 24px;height:100%;'>
                <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
                    <el-tab-pane
                        v-for='(value,index) in dialogInfo.children'
                        v-if='value.id.slice(2,4)!="YL"'
                        :key='"u"+index'
                        :label='`${value.label}`'
                        :name='`${value.param.tab_code}`'
                    >
                        <!-- 主要设备清单 标准设备表格加tab -->
                        <tableList v-if='value.id.slice(0,4)=="RDQD"' :param='param' ref='list1' major='弱电'></tableList>
                        <tableList v-else-if='value.id.slice(0,4)=="NTQD"' :param='param' ref='list2' major='暖通'></tableList>
                        <!-- 维保表格 -->
                        <wb-table v-else-if='value.id.slice(2,4)=="WB"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :major='dialogInfo.id'></wb-table>
                        <!-- 维修的表格 -->
                        <wx-table v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :major='dialogInfo.id'></wx-table>
                        <!-- 专维 -->
                        <zw-table v-else-if='value.id.slice(2,4)=="ZW"' :smsxt='smsxt' :tabLabel='tabLabel' :diff='diff' :major='dialogInfo.id'></zw-table>
                        <!-- 其他 -->
                        <other-table v-else-if='value.id.slice(2,4)=="QT"' ref='qtList' :tabLabel='tabLabel' :smsxt='smsxt' :major='dialogInfo.id'></other-table>
                    </el-tab-pane>
                    <template v-for='(value,index) in dialogInfo.children'>
                        <template v-for='(eve,index1) in tabCount'>
                            <template v-if='eve.typecode == value.param.type_code'>
                                <!-- 原理图分出来写，因为要判断没有图片的时候不显示tab,如果都没有则都不显示系统原理图 -->
                                <el-tab-pane
                                    :key='index1+index'
                                    :label='`${value.label}`'
                                    :name='`${value.param.type_code}`'
                                    v-if='value.id.slice(2,4)=="YL" && eve.count>0 && value.param.type_code.slice(0,3)!="FBT"'
                                >
                                    <!-- 有tab的原理图 -->
                                    <div style='width:100%;height:600px;'>
                                        <rotation :size='sizePic' v-if='rotationImg.length>0' type='3' :rotationImg='rotationImg'></rotation>
                                    </div>
                                </el-tab-pane>
                                <!-- 发布之后的编辑器的分支图 -->
                                <el-tab-pane
                                    :key='index1+index'
                                    :label='`${value.label}`'
                                    :name='`${value.param.type_code}`'
                                    v-if='value.id.slice(2,4)=="YL" && value.param.type_code.slice(0,3)=="FBT"'
                                >
                                    <fenbuPic ref='fenbutu' v-if='showFenbuPic' :typecode='value.param.type_code'></fenbuPic>
                                </el-tab-pane>
                            </template>
                        </template>
                    </template>
                </el-tabs>
            </div>
        </el-dialog>
        <!--记录表格 -->
        <record-dialog ref='Dialog'></record-dialog>
    </div>
</template>
<script>
import tableList from './table/eqListTable'
import tjTable from './table/tjTable'
import wbTable from './table/wbTable'
import zwTable from './table/zwTable'
import lookPage from './table/lookPageTable'
import standTable from './table/standTable'
import otherTable from './table/otherTable'
import wxTable from './table/wxTable'
import recordDialog from './table/recordDialog'
import djspTable from './table/djspTable'
import { queryPic, queryTab } from '@/api/public.js'
import fenbuPic from './fenbuPic'
export default {
    props: ['systemName', 'smsxt'],
    data() {
        return {
            activeName: '',
            visible: false,
            dialogInfo: {},
            param: '', //区分清单tab
            typecode: '', //区分原理图的tab
            diff: '', //区分给水排水
            rotationImg: [],
            tabLabel: '',
            tabCount: [],
            sizePic: '',
            imgInfo: {},
            showFenbuPic: false //显示楼层分布组件
        }
    },
    mounted() {},
    components: { tableList, tjTable, wbTable, zwTable, lookPage, standTable, otherTable, wxTable, recordDialog, djspTable, fenbuPic },
    methods: {
        //打开弹窗
        showModal(item) {
            this.visible = true
            this.dialogInfo = item
            if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
                this.activeName = this.dialogInfo.children[0].param.tab_code
                this.diff = this.dialogInfo.children[0].param.diff
                if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL') {
                    this.typecode = this.dialogInfo.children[0].param.type_code
                    this.activeName = this.typecode
                    this.isShowTab()
                    this.initImage(this.typecode)
                }
            } else {
                this.activeName = this.dialogInfo.param.tab_code
                if (this.dialogInfo.id.slice(2, 4) == 'YL') {
                    this.typecode = this.dialogInfo.param.type_code
                    this.activeName = this.typecode
                    this.isShowTab()
                    this.initImage(this.typecode)
                }
            }
            this.param = this.activeName
        },
        //点击tab函数
        handleClick(tab) {
            if (this.param) {
                this.param = tab.name
            } else if (this.smsxt) {
                this.smsxt = tab.name
            }
            this.activeName = tab.name
            //原理图的tab怎么传typecode
            if (this.dialogInfo.children.length > 0) {
                this.typecode = this.dialogInfo.children[`${tab.index}`].param.type_code
                this.diff = this.dialogInfo.children[`${tab.index}`].param.diff
            }
            if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL' && this.typecode.slice(0, 3) != 'FBT') {
                this.initImage(this.typecode)
            }
            if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL' && this.typecode.slice(0, 3) == 'FBT') {
                this.showFenbuPic = true
                this.$nextTick(() => {
                    this.$refs.fenbutu[0] && this.$refs.fenbutu[0].openFloorMap()
                })
            }
            this.tabLabel = tab.label
        },

        visibalBox() {
            this.$refs.Dialog.open(this.smsxt)
        },
        //系统原理图接口
        initImage(typecode) {
            let getParams = {
                plazaId: this.$store.state.plazaId,
                // system: this.systemName.slice(0, 2),
                // system: this.systemName,
                plazaId: this.$store.state.plazaId,
                module: '1002',
                neTypename: '位置布置图',
                typecode: typecode
            }
            switch (this.systemName) {
                case '暖通系统':
                    getParams.system = '1002'
                    break
                case '消防系统':
                    getParams.system = '1003'
                    break
                case '弱电系统':
                    getParams.system = '1004'
                    break
                case '电梯系统':
                    getParams.system = '1006'
                    break
                case '燃气系统':
                    getParams.system = '1007'
                    break
                case '土建装饰':
                    getParams.system = '1008'
                    break
            }
            if (this.systemName == '给排水系统') {
                getParams.system = '1005'
            }
            if (this.systemName == '供电系统') {
                getParams.system = '1001'
            }
            queryPic({ getParams }).then(res => {
                this.rotationImg = res.data || []
                this.rotationImg[0].url
                let img = new Image()
                img.src = this.rotationImg[0].url
                const vm = this
                img.onload = function() {
                    vm.$set(vm.imgInfo, 'width', img.width)
                    vm.$set(vm.imgInfo, 'height', img.height)
                    if (vm.imgInfo.width > vm.imgInfo.height) {
                        vm.sizePic = 'width'
                    } else {
                        vm.sizePic = 'height'
                    }
                }
            })
        },
        //原理图没图片不显示tab 因为供电和燃气系统没有tab所以分开判断
        //这个方法是判断有tab的count>0的时候显示tab
        isShowTab() {
            let data = {
                plazaId: this.$store.state.plazaId,
                major: this.systemName.slice(0, 2)
            }
            let postParams = []
            if (this.dialogInfo.children.length == 0) {
                postParams.push({
                    params: {
                        typecode: this.dialogInfo.param.type_code,
                        system: this.smsxt,
                        module: '1002'
                    },
                    tableName: 'glsms_proimgup'
                })
            } else {
                this.dialogInfo.children.forEach(el => {
                    postParams.push({
                        params: {
                            typecode: el.param.type_code,
                            system: this.smsxt,
                            module: '1002'
                        },
                        tableName: 'glsms_proimgup'
                    })
                })
            }
            queryTab({ data, postParams }).then(res => {
                this.tabCount = []
                let data = res.data.data || []
                data.forEach(el => {
                    this.tabCount.push({
                        count: el.count,
                        system: el.params.system,
                        typecode: el.params.typecode
                    })
                })
                this.$emit('emitCount', this.tabCount)
            })
        },
        /**
         *  关闭弹窗,传回父组件,在父组件内 处理逻辑(关闭弹窗)
         */
        closeModal() {
            this.showFenbuPic = false
            this.$emit('closeModal', true)
        }
    }
}
</script>
<style lang="less" scoped>
.dialog-container {
    .title-name {
        font-size: 16px;
        padding-right: 6px;
        padding-left: 24px;
        color: #000;
        font-weight: bold;
        color: #646a73;
        font-weight: normal;
    }
}
.top {
    width: 1366px;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}
</style>
<style lang="less" >
.dialog-container {
    .el-dialog__header {
        padding: 16px 24px;
    }
    .el-dialog__title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
    }
    .el-dialog__body {
        padding: 0 24px;
        height: 90%;
    }
    .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
    .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 16px;
    }
    .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
    .el-tabs--bottom .el-tabs__item.is-top:last-child,
    .el-tabs--top .el-tabs__item.is-bottom:last-child,
    .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 16px;
    }
    .el-tabs__nav-wrap::after {
        height: 0;
    }
    .el-tabs,
    .el-tabs__content {
        height: calc(100% - 45px);
        /deep/ .el-tab-pane > div {
            height: 100% !important;
        }
    }
    .el-tabs__item {
        padding: 5px 16px;
        height: 30px;
        line-height: 22px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(31, 36, 41, 1);
        border: 1px solid rgba(195, 199, 203, 1);
    }

    /deep/ .el-tabs__item:last-child {
        border-radius: 0px 4px 4px 0px;
    }
    /deep/ .el-tabs__item:nth-child(2) {
        border-radius: 4px 0px 0px 4px;
    }
    .el-tab-pane {
        height: 100% !important;
    }

    .el-tabs__active-bar {
        background-color: transparent !important;
    }
    .is-active {
        color: #025baa;
        border-color: #025baa;
    }
    //动画
    .el-dialog__wrapper {
        transition-duration: 0.3s;
    }
    .dialog-fade-enter-active {
        animation: none !important;
    }
    .dialog-fade-leave-active {
        transition-duration: 0.15s !important;
        animation: none !important;
    }

    .dialog-fade-enter-active .el-dialog,
    .dialog-fade-leave-active .el-dialog {
        animation-fill-mode: forwards;
    }

    .dialog-fade-enter-active .el-dialog {
        animation-duration: 0.3s;
        animation-name: anim-open;
        animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    }

    .dialog-fade-leave-active .el-dialog {
        animation-duration: 0.3s;
        animation-name: anim-close;
    }

    @keyframes anim-open {
        0% {
            opacity: 0;
            transform: scale3d(0, 0, 1);
        }
        100% {
            opacity: 1;
            transform: scale3d(1, 1, 1);
        }
    }

    @keyframes anim-close {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale3d(0.5, 0.5, 1);
        }
    }
}
@media screen and (max-width: 1366px) {
    /*当屏幕尺寸小于1366px时，应用下面的CSS样式*/
    .el-tabs,
    .el-tabs__content {
        height: 700px;
    }
}
</style>