ibms/src/views/business_space/business_list/index.vue

<!--
  revit业务空间
 -->
<template>
    <div id="businessSpace">
        <!------------------------    头部弹窗，选择楼层信息     -------------->
        <!-- <no-model-dialog :param="param" title="选择要进行空间管理的楼层" :isShow="floor" @close="close"></no-model-dialog> -->
        <influence-dialog ref="influence" :param="param" :tabsList="tabsList" title="受元空间变化影响的业务空间" :isShow="floor"></influence-dialog>
        <details-dialog ref="details" @del="delSuccess" :param="param" :tabsList="tabsList" title="业务空间详情" :isShow="floor" :activeTabType="activeTabType"></details-dialog>
        <not-related ref="notRelated" @createSuccess="createSuccess" :isShow="floor"></not-related>
        <facility-dialog ref="facility" :activeTabType="activeTabType" :isShow="floor"></facility-dialog>
        <!--------- 页面头部   -------------->
        <div class="saga-title">
            <!-- <div class="saga-build-mess">
                <p>
                    <i class="iconfont icon-jianzhu"></i> {{buildMess.buildName}} - {{buildMess.name}}
                </p>
                <el-button class="saga-btn" type="text" @click="changeShow">切换楼层</el-button>
            </div> -->
            <div class="saga-build-mess">
                    <span style="padding-right:12px">建筑楼层</span>
                    <el-cascader
                        :options="options"
                        v-model="buildMess.selectd"
                        :props="props"
                        @change="close">
                    </el-cascader>
                </div>
            <div class="saga-build-tab">
                <!-- <div class="tab-main" @click="tabList(1)" :class="isMyTab == 1 ? 'tab-active' : ''">
                    <i class="iconfont icon-tupian"></i>
                    <span>平面图</span>
                </div>
                <div class="tab-main" @click="tabList(2)" :class="isMyTab == 2 ? 'tab-active' : ''">
                    <i class="iconfont icon-liebiao"></i>
                    <span>列表</span>
                </div> -->
                <el-radio-group v-model="isMyTab" @change="changeRadio" style="width: 136px;">
                    <el-radio-button label="1">平面图</el-radio-button>
                    <el-radio-button label="2" class="space-own-radio" style="width: 68px;">列表</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div v-show="isMyTab == 1" class="saga-business-sapce-main">
            <el-tabs v-model="activeName" @tab-click="tab1Click">
                <template v-for="(item,index) in tabsList">
                    <el-tab-pane :name="item.code" :key="index" :disabled="item.code > 3">
                    <span slot="label">{{item.name}}</span>
                    <graphy
                        @getSp="checkSpace"
                        @dimension="checkSpace"
                        @businessDetails="getBuinessDetails"
                        :ref="'graphy' + item.code"
                        :canvasId="item.code"
                    ></graphy>
                    </el-tab-pane>
                </template>
            </el-tabs>
            <!-- <space-graphy @dimension="checkSpace" :tabsList="tabsList" ref="graphy" :param="param"></space-graphy> -->
            </div>
            <div v-show="isMyTab == 2" class="saga-business-sapce-main">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <template v-for="(item,index) in tabsList">
                    <el-tab-pane :name="item.code" :key="index" :disabled="item.code > 3">
                        <span slot="label">{{item.name}}</span>
                        <handsontable-main @lookEqu="lookEqu" :ref="'handsontable' + item.code" :id="'handsontable' + item.code" :param="param"></handsontable-main>
                    </el-tab-pane>
                </template>
            </el-tabs>
      <!-- <space-handsontable :tabsList="tabsList" ref="spaceTable" :param="param"></space-handsontable> -->
    </div>
  </div>
</template>

<script>
    import noModelDialog from "@/components/business_space/dialogs/noModelDialog";
    import influenceDialog from "@/components/business_space/dialogs/influenceDialog";
    import detailsDialog from "@/components/business_space/dialogs/detailsDialog";
    import notRelated from "@/components/business_space/dialogs/notRelated";
    import facilityDialog from "@/components/business_space/dialogs/facilityDialog";
    // import spaceHandsontable from "@/components/business_space/business/spaceHandsontable";
    import graphy from "@/components/business_space/graphy/business";
    import handsontableMain from "@/components/business_space/business/handsontable";
    import {
        getTableHeader,
        getAllbusiness,
        getBussTypes,
        getSpaceFloor
    } from "@/api/scan/request";
    import tools from '@/utils/scan/tools'
    import {
        mapGetters,
        mapActions
    } from "vuex";
    export default {
        components: {
            noModelDialog,
            // spaceHandsontable,
            influenceDialog,
            detailsDialog,
            notRelated,
            graphy,
            handsontableMain,
            facilityDialog
        },
        computed: {
            ...mapGetters("peojMess", [
                "projectId",
                "secret",
                "userId"
            ])
        },
        data() {
            return {
                floor: {
                    // dialogVisible: true, //选择楼层弹窗
                    influence: false, //受影响的业务空间弹窗
                    details: false, //详情弹窗
                    notRelated: false,
                    facility: false
                },
                param: {
                    ProjId: this.projectId, //项目id
                    UserId: this.userId, //用户id
                    secret: this.secret
                },
                buildMess: {
                    name: "--",
                    code: "",
                    selectd: [],
                    map: "Fl110108000327d8f006c39f49feb40e24a7ef223232181009102258bim.json",
                    isChild: true,
                    buildName: "--",
                    buildCode: ""
                },
                isMyTab: 1,
                activeName: "GeneralZone",
                tabsList: [],
                activeTabType: {
                    "code": "GeneralZone",
                    "name": "默认分区",
                    "rel_type": "99"
                },
                options: [],
                props:{
                    value: "code",
                    label: "name",
                    children: "children"
                }
            };
        },
        created() {
            this.param.ProjId = this.projectId
            this.param.UserId = this.userId
            this.param.secret = this.secret
            this.getFloor()
            this.getTypes()
        },
        mounted() {},
        methods: {
            changeRadio(){
                if(!this.buildMess.selectd.length){
                    this.$message("请选择楼层")
                    return false
                }
                this.tabClick(this.isMyTab)
            },
            //获取楼层
            getFloor() {
                let param = {
                    ProjId: this.projectId,
                    UserId: this.UserId,
                    secret: this.secret
                };
                getSpaceFloor(param).then(res => {
                    console.log(res, 'res')
                    if (res.data.Result == 'success') {
                        let data = this.changeArr(res.data.Content).map(item => {
                            if (item.children && item.children.length) {
                                item.children = tools.sortArr(item.children, "shunxu", false)
                            }
                            return item
                        })
                        console.log(data, 'res.data')
                        this.options = data
                    } else {
                        this.$message.error(res.data.ResultMsg)
                    }
                }).catch(() => {
                    this.$message.error("请求出错")
                })
            },

            //修改已有数组
            changeArr(arr) {
                return arr.map(item => {
                    console.log(item.floors)
                    if (item.floors && item.floors.length) {
                        return {
                            code: item.id,
                            name: item.infos.BuildLocalName,
                            children: item.floors.map(i => {
                                return {
                                    code: i.id,
                                    name: (i.infos.FloorLocalName || i.infos.FloorName || "未知") + this.myMess(i),
                                    map: i.infos.FloorMap || null,
                                    affected: i.affected,
                                    isChilren: 2,
                                    buildCode: item.id,
                                    buildName: item.infos.BuildLocalName,
                                    shunxu: i.infos.FloorSequenceID || 0
                                }
                            })
                        }
                    } else {
                        return {
                            code: item.id,
                            name: item.infos.BuildLocalName,
                            children: null,
                            isChilren: 1,
                        }
                    }
                })
            },
            myMess(i) {
                if (i.affected) {
                    return "(该业务空间受元空间变化影响)"
                } else {
                    if (i.infos.FloorMap) {
                        return ''
                    } else {
                        return "(请初始化平面图)"
                    }
                }
            },
            //获取tabs的列表
            getTypes() {
                getBussTypes(res => {
                    let arr = [{
                            "code": "GeneralZone",
                            "name": "默认分区",
                            "rel_type": "99"
                        },
                        {
                            "name": "供电分区",
                            "rel_type": "1",
                            "code": "PowerSupplyZone"
                        },
                        {
                            "name": "照明分区",
                            "rel_type": "2",
                            "code": "LightingZone"
                        },
                        {
                            "name": "空调分区",
                            "rel_type": "4",
                            "code": "AirConditioningZone"
                        },
                    ]
                    this.tabsList = arr
                    // console.log(res)
                    // this.tabsList = res.Content
                })
            },
            checkSpace(list, build, graphyId) {
                this.floor.notRelated = true;
                this.$refs.notRelated.getIdList(list, build, graphyId, this.activeTabType);
                this.$refs["graphy" + this.activeName][0].getHasSpace();
            },
            changeShow() {
                this.floor.dialogVisible = true;
                console.log(this.buildMess, 'buildMess')
            },
            //成功关联平面图
            createSuccess() {
                this.$refs["graphy" + this.activeName][0].getHasSpace();
                this.$refs["graphy" + this.activeName][0].clearDimension();
                this.floor.notRelated = false;
            },
            //成功删除业务空间
            delSuccess() {
                this.floor.details = false;
                this.$refs["graphy" + this.activeName][0].getHasSpace();
                this.$refs["graphy" + this.activeName][0].clearDimension();
            },
            close() {
                this.buildMess = this.changeBuildMess(this.buildMess,this.options)
                if (this.buildMess.affected) {
                    this.floor.influence = true;
                    this.$nextTick(() => {
                        this.$refs.influence.getData(this.buildMess);
                    });
                }
                if (!this.buildMess.map) {
                    this.isMyTab = 2;
                }
                if (this.isMyTab == 2) {
                    this.initTabs(this.buildMess);
                } else {
                    let data = this.getItemForType()
                    this.$refs["graphy" + this.activeName][0].getData(this.buildMess.map, this.buildMess, this.activeTabType);
                }
            },

            //通过code查询options中的其他参数
            changeBuildMess(mess,options){
                options.map(item => {
                    if(!!item.children && item.children.length){
                        item.children.map(child => {
                            if(child.code == mess.selectd[1]){
                                console.log(child,mess)
                                mess = Object.assign(mess,child)
                            }
                        })
                    }
                })
                return mess
            },
            //查看业务空间详情
            getBuinessDetails(list) {
                this.floor.details = true;
                this.$refs.details.getData(list, this.buildMess);
            },
            lookEqu(infos) {
                this.floor.facility = true;
                this.$refs.facility.getData(infos, this.buildMess);
            },
            tabClick(num) {
                console.log(this.$refs)
                this.isMyTab = num;
                if (num == 2) {
                    this.initTabs(this.buildMess);
                } else {
                    let data = this.getItemForType()
                    this.$refs["graphy" + this.activeName][0].getData(this.buildMess.map, this.buildMess, this.activeTabType);
                }
            },
            //获取初始化信息点
            initMessage() {
                getTableHeader({
                    code: this.activeTabType.code,
                    ProjId: this.param.ProjId
                }).then(res => {
                    console.log(res)
                    if (res.data.Result == "success") {
                        console.log(res);
                        let refFlag = "handsontable" + this.activeName;
                        this.$refs[refFlag][0].getHeader(res.data.Content, this.activeTabType);
                        //   for (let i = 0; i < this.tabsList.length; i++) {
                        //   }
                        this.getTableMain();
                    } else {
                        this.$message.error("请求错误");
                    }
                });
            },
            getItemForType() {
                let data = {}
                this.tabsList.map(item => {
                    if (item.code == this.activeName) {
                        data = item
                    }
                })
                return data
            },
            tab1Click() {
                this.activeTabType = this.getItemForType()
                this.$refs["graphy" + this.activeName][0].getData(this.buildMess.map, this.buildMess, this.activeTabType);
            },
            /**
             * tab标签被点击触发后的函数
             * @param tab   tab实例
             * @param event tab的dom
             *
             */
            handleClick(tab, event) {
                this.activeTabType = this.getItemForType()
                this.initMessage();
            },
            /**
             * 选择楼层后初始化tabs
             * 由父级页面调用
             *
             * @param  floorParam  父级传入的楼层信息
             */
            initTabs(floorParam) {
                // this.floor = floorParam;
                this.initMessage();
            },
            getTableMain() {
                let refFlag = "handsontable" + this.activeName;
                this.$nextTick(() => {
                    this.$refs[refFlag][0].getData(this.buildMess);
                });
                //   for (let i = 0; i < this.tabsList.length; i++) {
                //     if (i == 0) {
                //     }
                //   }
            }
        },
        watch: {
            floor: {
                deep: true,
                handler: function() {
                    if (this.floor.notRelated) {
                        this.$refs["graphy" + this.activeName][0].clearDimension();
                    }
                }
            }
        }
    };
</script>

<style lang="less">
    #businessSpace {
        position: relative;
        display: flex;
        flex-direction: column;
        .space-own-radio{
            .el-radio-button__inner{
                padding: 9px 21px;
            }
        }
        .el-dialog__body {
            max-height: 600px;
            overflow-y: auto;
        }
        .saga-title {
            height: 54px;
            background-color: #fff;
            font-size: 14px;
            position: relative;
            line-height: 54px;
            width: 100%;
            margin-bottom:10px;
            border: 1px solid #dfe6ec;
            .saga-build-mess {
                position: absolute;
                left: 10px;
                width: 500px;
                i {
                    padding-right: 5px;
                }
                p {
                    float: left;
                }
                .saga-btn {
                    float: left;
                    height: 40px;
                    line-height: 40px;
                    padding: 0 10px;
                }
            }
            .saga-build-tab {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                .tab-main {
                    float: left;
                    width: 120px;
                    padding: 0 5px;
                    margin: 5px 0;
                    border: 1px solid #ccc;
                    background-color: #fff;
                    height: 30px;
                    box-sizing: border-box;
                    text-align: center;
                    cursor: pointer;
                    overflow: hidden;
                    i {
                        font-size: 18px;
                        padding-right: 10px;
                        float: left;
                        line-height: 30px;
                        margin-left: 10px;
                    }
                    span {
                        line-height: 30px;
                        float: left;
                    }
                }
                .tab-active {
                    background-color: #409eff;
                    color: #fff;
                }
            }
        }
        .saga-business-sapce-main {
            flex: 1;
            top: 40px;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            overflow-y: auto;
            background: #fff;
            .el-tabs__nav{
                padding-left: 10px;
            }
            .el-tabs__active-bar{
                padding-left: 24px;
            }
        }
    }
</style>