wanda-adm/src/views/maintain/space/components/spaceGraph.vue

<template>
    <div id="graphContainer" ref="graphContainer">
        <el-row class="buttons-box">
            <div>
                <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
                    width="180px" @select="handleSelect">
                    <i class="el-icon-search el-input__icon" slot="suffix"></i>
                    <template slot-scope="{ item }">
                        <div class="name" style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
                            :title="item.data.RoomLocalName">
                            {{ item.data.RoomLocalName }}
                            <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
                        </div>
                    </template>
                </el-autocomplete>
            </div>
            <div class="button-group">
                <!-- 默认操作模式 -->
                <div v-show="type==1">
                    <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
                        创建业务空间
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- 点击已经关联的业务空间 -->
                    <el-button plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">重新划分业务空间</el-button>
                    <el-button plain :disabled="zoneDisable" style="margin-left:10px;">维护空间信息</el-button>
                    <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button>
                </div>
                <!-- 点击未关联的业务空间 -->
                <div v-show="type==3">
                    <el-button plain @click="createNewZone">创建单个全新的业务空间</el-button>
                    <el-button plain @click="cancelGraphy">取 消</el-button>
                </div>
                <!-- 重新划分业务空间 -->
                <div v-show="type==4">
                    <el-button plain @click="cancelGraphy">取 消</el-button>
                    <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
                </div>
                <!-- 批量创建所选业务空间 -->
                <div v-show="type==5">
                    <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
                    <el-button plain @click="cancelGraphy">取 消</el-button>
                </div>
            </div>
        </el-row>

        <canvas id="spaceCanvas" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>

        <el-row class="canvas-actions-box">
            <canvas-fun :config="config" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" ref="canvasFun"
                @saveJson="saveJson" @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" />
        </el-row>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { FloorView } from "@/utils/graph/FloorView";
import { FloorScene } from "@/utils/graph/FloorScene";
import canvasFun from "./canvasFun.vue";

@Component({
    components: { canvasFun },
})
export default class spaceGraph extends Vue {
    canvasWidth = 800;
    canvasHeight = 800;
    view: FloorView | null = null;
    scene: FloorScene | null = null;
    floorMap =
        "/image-service/common/file_get?systemId=revit&key=base/76233a3214dd11eb94d469663ce1649a.jsonz";
    canvasLoading = false;
    type = 1;
    config = {
        isEdit: false,
        divide: true,
        groupSelect: false,
    };
    search = ""; //搜索
    zoneDisable = true;
    curZoneItem = {};
    zoneList = [];
    buildFloor: string[] = [];
    // 挂载
    mounted(): void {
        this.canvasWidth = this.$refs.graphContainer.offsetWidth;
        this.canvasHeight = this.$refs.graphContainer.offsetHeight;
        this.getGraph();
    }
    // 初始化
    init(initType: number): void {
        this.type = 1;
        if (this.scene) {
            // this.scene.clearSpaceSelection();
            // this.scene.clearZoneSelection();
            // this.scene.clearLikeSpaces();
            // this.zoneDisable = true;
            // this.scene.isZoneSelectable = true;
            // this.scene.isSpaceSelectable = false;
        }
        if (
            this.buildFloor.indexOf("all") > -1 ||
            this.buildFloor.indexOf("noKnow") > -1
        ) {
            return;
        }

        if (initType == 1) {
            // 底图
            // this.getGraphy();
        } else {
            // 业务空间
            // this.getBusinessSpace();
        }
        this.config = {
            isEdit: false,
            divide: true,
            groupSelect: true,
        };
        // 获取当前楼层的元空间
        // this.getFloorISpace();
        // 查询未关联业务空间的元空间
        // this.getISPSPUnrelaBSP();
        // 查询未关联平面图的业务空间
        // this.getBSPunrelaISP();
    }
    // 获取底图
    getGraph(): void {
        const scene = new FloorScene();
        this.canvasLoading = true;
        this.clearGraphy();
        this.scene = null;
        scene.loadUrl(this.floorMap).then((res) => {
            if (this.view) {
                this.view.scene = scene;
            }
            this.scene = scene;
            this.getGraphSuc(res);
        });
    }
    // 获取底图成功
    getGraphSuc(res: any): void {
        this.canvasLoading = false;
        if (res == "error") {
            this.floorMap = "";
            this.$message.warning("数据解析异常");
            return;
        }
        this.view?.fitSceneToView();
        this.view!.minScale = this.view!.scale;
        if (this.$refs.canvasFun) {
            // @ts-ignore
            this.$refs.canvasFun.everyScale = this.view.scale;
        }
    }
    // 清除canvas
    clearGraphy() {
        if (this.view) {
            this.view.scene = null;
            return;
        }
        this.view = new FloorView("spaceCanvas");
    }

    // 搜索
    querySearch(queryString: string, cb: Function) {
        let restaurants = this.zoneList;
        let results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    }

    // 过滤器
    createFilter(queryString: any) {
        return (restaurant: any) => {
            return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
        };
    }

    // 查询选中,定位
    handleSelect(zone) {
        //   // 清空选中
        //   this.scene.clearSpaceSelection();
        //   this.scene.clearZoneSelection();
        //   // 选中当前
        //   zone.selected = true;
        //   this.curZoneItem = zone;
        //   this.zoneDisable = false;
        //   this.view.fitSelectedToView();
    }

    // 点击创建业务空间
    editGraphy() {
        this.type = 3;
        this.config.isEdit = true;
        this.config.groupSelect = false;
        this.config.divide = true;
        this.scene!.isSpaceSelectable = true;
        this.scene!.isZoneSelectable = false;
        this.view?.update();
    }
    // 创建新的业务空间
    createNewZone() {
        //   let arr = this.scene.getSelectedSpaces();
        //   if (arr.length) {
        //     let tempArr = [];
        //     arr.map(t => {
        //       tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
        //     })
        //     this.$refs.createBSP.showDialog(tempArr.toString());
        //   } else {
        //     this.$message.warning('请至少选择一个空间');
        //   }
    }

    handleCommand() {}

    refactorBSP() {}

    editeSpaceDetail() {}

    // 取消(所有取消公用)
    cancelGraphy() {
        this.init(2);
    }

    saveRefactorBSP() {}

    groupCreateZone() {}

    // 适配底图到窗口
    fit() {
        this.view?.fitSceneToView();
    }
    // 保存为png
    savePng() {
        this.view?.saveImage(`1.png`, "png");
    }
    // 保存为svg
    saveSvg() {
        this.view?.saveSceneSvg(`1.svg`, 6400, 4800);
    }
    // 保存json
    saveJson() {
        this.view?.saveFloorJson(`1.json`);
    }
    // 切割划分
    divide() {
        this.scene.isCutting = true;
    }
    // 清除切割划分
    clearDivide() {
        // @ts-ignore
        this.view!.scene.clearCut();
    }
    // 缩放
    scale(val: number) {
        if (!this.view) {
            return;
        }
        let scale = this.view.scale;
        this.view.scaleByPoint(
            val / scale,
            this.canvasWidth / 2,
            this.canvasHeight / 2
        );
    }

    groupSelect() {
        console.log("groupSelect");
    }

    changeAbsorb() {
        console.log("changeAbsorb");
    }

    @Watch("view.scale", { immediate: true, deep: true })
    onScaleChange(n: number) {
        if (this.$refs.canvasFun) {
            // @ts-ignore
            let s = (n * 10) / this.view.minScale;
            // @ts-ignore
            this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
        }
    }
}
</script>
<style lang="scss">
#graphContainer {
    position: relative;
    width: 100%;
    height: 100%;
    .canvas-actions-box {
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
    }
    .buttons-box {
        position: absolute;
        top: 16px;
        left: 0;
        padding: 0 16px;
        width: 100%;
        z-index: 999;
        & > div {
            float: left;
        }
        .el-autocomplete {
            display: inline-block;
            width: 320px;
            margin-right: 10px;
        }
        .button-group button,
        .button-group .el-dropdown {
            display: block;
            float: left;
        }
        .my-autocomplete {
            li {
                line-height: normal;
                padding: 7px;
                .name {
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .addr {
                    font-size: 12px;
                    color: #b4b4b4;
                }
                .highlighted .addr {
                    color: #ddd;
                }
            }
        }
    }
}
</style>