|
@@ -1,44 +1,145 @@
|
|
|
<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 } from "vue-property-decorator";
|
|
|
+import { Vue, Component, Watch } from "vue-property-decorator";
|
|
|
import { FloorView } from "@/utils/graph/FloorView";
|
|
|
import { FloorScene } from "@/utils/graph/FloorScene";
|
|
|
+import canvasFun from "./canvasFun";
|
|
|
|
|
|
-@Component
|
|
|
+@Component({
|
|
|
+ components: { canvasFun },
|
|
|
+})
|
|
|
export default class spaceGraph extends Vue {
|
|
|
canvasWidth = 800;
|
|
|
canvasHeight = 800;
|
|
|
- view: FloorView | undefined = undefined;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
|
|
|
- init(): void {
|
|
|
- console.log('init');
|
|
|
+ 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.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") {
|
|
@@ -46,16 +147,144 @@ export default class spaceGraph extends Vue {
|
|
|
this.$message.warning("数据解析异常");
|
|
|
return;
|
|
|
}
|
|
|
- this.view?.fitSceneToView()
|
|
|
+ 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')
|
|
|
+ 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>
|
|
@@ -64,5 +293,50 @@ export default class spaceGraph extends Vue {
|
|
|
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>
|