|
@@ -1,99 +1,104 @@
|
|
|
<template>
|
|
|
- <div ref="graphyMain" class="canvasGraphy" style="width:100%;" v-loading="loading.show" :element-loading-text="loading.num + '/' + loading.total">
|
|
|
- <div v-show="hasMap" class="header-search">
|
|
|
- <!-- 初始两个按钮 -->
|
|
|
- <div v-show="type == 1">
|
|
|
- <el-button @click=" type = 2" icon="el-icon-search">查找业务空间</el-button>
|
|
|
- <el-button @click="myDialogVisible = true">创建业务空间</el-button>
|
|
|
- <span style="font-size:13px;color:#606266;margin-left:40px;display:inline-block;">
|
|
|
- 提示:
|
|
|
- <i style="color:red;">红色字体</i>的业务空间为不相邻元空间组成,请检查是否要修改
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <!-- 搜索下拉列表定位 -->
|
|
|
- <div v-show="type == 2">
|
|
|
- <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" @click="handleIconClick"></i>
|
|
|
- <template slot-scope="{ item }">
|
|
|
- <div class="name" style="position: relative;">
|
|
|
- {{ item.infos.RoomLocalName |cutString(8) }}
|
|
|
- <span
|
|
|
- class="addr"
|
|
|
- style="position: absolute;right:10px;color:#409EFF;"
|
|
|
- >定位</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-autocomplete>
|
|
|
- <el-button style="margin-left:10px;" type="text" @click="clearDimension">收起</el-button>
|
|
|
- </div>
|
|
|
- <!-- 点击元空间显示 -->
|
|
|
- <div v-show="type == 3">
|
|
|
- <div class="div50">
|
|
|
- <el-button
|
|
|
- class="float-right"
|
|
|
-
|
|
|
- @click="SpaceDialog"
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- >从未关联元空间的业务空间中选择</el-button>
|
|
|
- </div>
|
|
|
- <div class="div50">
|
|
|
- <el-button @click="clearDimension" plain>取 消</el-button>
|
|
|
- <el-button @click="createSP" type="primary">创建新的业务空间</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 点击业务空间显示 -->
|
|
|
- <div v-show="type == 4">
|
|
|
- <div class="div50">
|
|
|
- <el-button class="float-right" @click="divide" type="primary" plain>重新划分业务空间</el-button>
|
|
|
- </div>
|
|
|
- <div class="div50">
|
|
|
- <el-button @click="clearDimension" plain>取 消</el-button>
|
|
|
- <el-button @click="bussinDea" type="primary">查看详情</el-button>
|
|
|
+ <div
|
|
|
+ ref="graphyMain"
|
|
|
+ class="canvasGraphy"
|
|
|
+ style="width:100%;"
|
|
|
+ v-loading="loading.show"
|
|
|
+ :element-loading-text="loading.num + '/' + loading.total"
|
|
|
+ >
|
|
|
+ <div v-show="hasMap" class="header-search">
|
|
|
+ <!-- 初始两个按钮 -->
|
|
|
+ <div v-show="type == 1">
|
|
|
+ <el-button @click=" type = 2" icon="el-icon-search">查找业务空间</el-button>
|
|
|
+ <el-button @click="myDialogVisible = true">创建业务空间</el-button>
|
|
|
+ <span style="font-size:13px;color:#606266;margin-left:40px;display:inline-block;">
|
|
|
+ 提示:
|
|
|
+ <i style="color:red;">红色字体</i>的业务空间为不相邻元空间组成,请检查是否要修改
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <!-- 搜索下拉列表定位 -->
|
|
|
+ <div v-show="type == 2">
|
|
|
+ <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" @click="handleIconClick"></i>
|
|
|
+ <template slot-scope="{ item }">
|
|
|
+ <div class="name" style="position: relative;">
|
|
|
+ {{ item.infos.RoomLocalName |cutString(8) }}
|
|
|
+ <span
|
|
|
+ class="addr"
|
|
|
+ style="position: absolute;right:10px;color:#409EFF;"
|
|
|
+ >定位</span>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ <el-button style="margin-left:10px;" type="text" @click="clearDimension">收起</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 点击元空间显示 -->
|
|
|
+ <div v-show="type == 3">
|
|
|
+ <div class="div50">
|
|
|
+ <el-button class="float-right" @click="SpaceDialog" type="primary" plain>从未关联元空间的业务空间中选择</el-button>
|
|
|
</div>
|
|
|
- <!-- 点击业务空间后点击元空间 -->
|
|
|
- <div v-show="type == 5">
|
|
|
- <div class="div50">
|
|
|
- <el-button @click="clearDimension" class="float-right" plain>取 消</el-button>
|
|
|
- </div>
|
|
|
- <div class="div50">
|
|
|
- <el-button @click="saveChange" type="primary">保存修改</el-button>
|
|
|
- </div>
|
|
|
+ <div class="div50">
|
|
|
+ <el-button @click="clearDimension" plain>取 消</el-button>
|
|
|
+ <el-button @click="createSP" type="primary">创建新的业务空间</el-button>
|
|
|
</div>
|
|
|
- <el-button
|
|
|
- v-show="type == 1"
|
|
|
- @click="getPiss"
|
|
|
- style="position: absolute;top: 10px;right: 10px;"
|
|
|
- type="text"
|
|
|
- >未关联元空间的业务空间 {{num}} 条</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 点击业务空间显示 -->
|
|
|
+ <div v-show="type == 4">
|
|
|
+ <div class="div50">
|
|
|
+ <el-button class="float-right" @click="divide" type="primary" plain>重新划分业务空间</el-button>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-show="hasMap"
|
|
|
- ref="canvasWidth"
|
|
|
- class="canvasWidth"
|
|
|
- v-loading="myLoading"
|
|
|
- style="width:100%;"
|
|
|
- >
|
|
|
- <canvas :id="canvasId + 'canvas' " :width="canvasW" :height="canvasH"></canvas>
|
|
|
- <div
|
|
|
- style="height: 35px;overflow: hidden;z-index:99;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;"
|
|
|
- >
|
|
|
- <el-button @click="smallSize" type="primary">- 缩小</el-button>
|
|
|
- <el-button @click="suitableSize" type="primary">合适比例</el-button>
|
|
|
- <el-button @click="bigSize" type="primary">+ 放大</el-button>
|
|
|
- <el-button @click="exportJson" type="primary" icon="el-icon-download">
|
|
|
- 导出json文件
|
|
|
- </el-button>
|
|
|
+ <div class="div50">
|
|
|
+ <el-button @click="clearDimension" plain>取 消</el-button>
|
|
|
+ <el-button @click="bussinDea" type="primary">查看详情</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 点击业务空间后点击元空间 -->
|
|
|
+ <div v-show="type == 5">
|
|
|
+ <div class="div50">
|
|
|
+ <el-button @click="clearDimension" class="float-right" plain>取 消</el-button>
|
|
|
</div>
|
|
|
+ <div class="div50">
|
|
|
+ <el-button @click="saveChange" type="primary">保存修改</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ v-show="type == 1"
|
|
|
+ @click="getPiss"
|
|
|
+ style="position: absolute;top: 10px;right: 10px;"
|
|
|
+ type="text"
|
|
|
+ >未关联元空间的业务空间 {{num}} 条</el-button>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-show="hasMap"
|
|
|
+ ref="canvasWidth"
|
|
|
+ class="canvasWidth"
|
|
|
+ v-loading="myLoading"
|
|
|
+ style="width:100%;"
|
|
|
+ >
|
|
|
+ <canvas :id="canvasId + 'canvas' " :width="canvasW" :height="canvasH"></canvas>
|
|
|
+ <div
|
|
|
+ style="height: 35px;overflow: hidden;z-index:99;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;"
|
|
|
+ >
|
|
|
+ <el-button @click="smallSize" type="primary">- 缩小</el-button>
|
|
|
+ <el-button @click="suitableSize" type="primary">合适比例</el-button>
|
|
|
+ <el-button @click="bigSize" type="primary">+ 放大</el-button>
|
|
|
+ <el-button @click="exportJson" type="primary" icon="el-icon-download">导出json文件</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div
|
|
|
v-show="!hasMap"
|
|
|
class="center"
|
|
|
style="height: 400px;padding-top:200px;box-sizing:border-box;"
|
|
|
>
|
|
|
- <i class="icon-wushuju iconfont"></i>
|
|
|
- {{!!buildMess ? '请初始化平面图' : '请选择楼层'}}
|
|
|
+ <i class="icon-wushuju iconfont"></i>
|
|
|
+ {{!!buildMess ? '请初始化平面图' : '请选择楼层'}}
|
|
|
</div>
|
|
|
<el-dialog title="提示" :visible.sync="dialogVisible" :before-close="clearDimension" width="30%">
|
|
|
<p style="color:red;line-height:24px;margin-bottom: 10px;" v-show="isAbutMsg">注意:您选择的元空间并未相邻!</p>
|
|
@@ -643,7 +648,6 @@
|
|
|
// this.view.canvasView.addEventListener("click", this.checkSpace);
|
|
|
//这里说是点击事件`
|
|
|
this.getGraphy();
|
|
|
- console.log(data)
|
|
|
},
|
|
|
/** canvas事件------------------------------------------------------------------------------------*/
|
|
|
//点击元空间
|
|
@@ -741,9 +745,10 @@
|
|
|
if (item.isBusiness == 5) {
|
|
|
this.$message("该空间为业务空间,请勿点击");
|
|
|
};
|
|
|
- // 点击之后对所有色块重新着色
|
|
|
+ // 点击之后对所有色块重新着色 以及文字
|
|
|
items.forEach((a)=>{
|
|
|
- this.isBusinessToColor(a)
|
|
|
+ this.isBusinessToColor(a);
|
|
|
+ this.drawText(a)
|
|
|
});
|
|
|
},
|
|
|
//isbusiness转换相应的颜色
|
|
@@ -773,8 +778,8 @@
|
|
|
item.width = item.cacheWidth;
|
|
|
item.fillColor = new SColor(11,12,12,.2) || new SColor('#F2F6FC')
|
|
|
} else if (item.isBusiness == 6) {
|
|
|
- item.color = new SColor(68,161,140,.4) || new SColor('#000');
|
|
|
- item.width = item.cacheWidth;
|
|
|
+ item.color = new SColor(68,161,140,.4) || new SColor('#000');
|
|
|
+ // item.width = 10;
|
|
|
item.fillColor =new SColor('#1abc9c');
|
|
|
console.log('click item isbusiness',item)
|
|
|
} else if (item.isBusiness == 7) {
|
|
@@ -783,6 +788,30 @@
|
|
|
item.fillColor = item.cacheFillColor || new SColor('#F2F6FC');
|
|
|
}
|
|
|
},
|
|
|
+ // 绘出文案
|
|
|
+ drawText(item) {
|
|
|
+ if (item.initName) {
|
|
|
+ if (this.isBusiness == 1) {
|
|
|
+ item.fillColor = new SColor(111,111,111,.5)
|
|
|
+ } else if (this.isBusiness == 2) {
|
|
|
+ item.fillColor = new SColor("#333");
|
|
|
+ } else if (this.isBusiness == 3) {
|
|
|
+ //业务空间异常状态
|
|
|
+ item.fillColor = new SColor('#fff')
|
|
|
+ } else if (this.isBusiness == 4) {
|
|
|
+ item.fillColor = new SColor('#cacaca')
|
|
|
+ } else if (this.isBusiness == 6) {
|
|
|
+ item.fillColor = new SColor('#fff')
|
|
|
+ } else if (this.isBusiness == 7) {
|
|
|
+ item.fillColor = new SColor('red')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (item.businessName || item.businessId) {
|
|
|
+ item.viewText = "👇 " + item.businessName;
|
|
|
+ } else {
|
|
|
+ item.viewText = "⬇️ " + item.initName;
|
|
|
+ }
|
|
|
+ },
|
|
|
/** 搜索 ------------------------------------------------------------------------------ */
|
|
|
querySearch(queryString, cb) {
|
|
|
var restaurants = this.restaurants;
|
|
@@ -913,6 +942,9 @@
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+ items.forEach((a)=>{
|
|
|
+ this.drawText(a)
|
|
|
+ })
|
|
|
},
|
|
|
spaceIsAbut(list) {
|
|
|
let data = list.map(item => {
|
|
@@ -988,19 +1020,20 @@
|
|
|
},
|
|
|
//调整到合适比例
|
|
|
suitableSize() {
|
|
|
- //获取中心点
|
|
|
- let rect = this.view.scene.worldRect();
|
|
|
- //计算缩放比例
|
|
|
- this.view.scale = Math.min(
|
|
|
- this.view.width / (rect.width * 1.2),
|
|
|
- this.view.height / (rect.height * 1.2)
|
|
|
- );
|
|
|
- // 移动画布
|
|
|
- this.view.pos.x =
|
|
|
- (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
|
|
|
- this.view.pos.y =
|
|
|
- (-(rect.bottom + rect.top) / 2) * this.view.scale +
|
|
|
- this.view.height / 2;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ // //获取中心点
|
|
|
+ // let rect = this.view.scene.worldRect();
|
|
|
+ // //计算缩放比例
|
|
|
+ // this.view.scale = Math.min(
|
|
|
+ // this.view.width / (rect.width * 1.2),
|
|
|
+ // this.view.height / (rect.height * 1.2)
|
|
|
+ // );
|
|
|
+ // // 移动画布
|
|
|
+ // this.view.pos.x =
|
|
|
+ // (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
|
|
|
+ // this.view.pos.y =
|
|
|
+ // (-(rect.bottom + rect.top) / 2) * this.view.scale +
|
|
|
+ // this.view.height / 2;
|
|
|
},
|
|
|
//调整到小比例
|
|
|
smallSize() {
|
|
@@ -1329,55 +1362,55 @@
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
<style lang="less">
|
|
|
- .canvasGraphy {
|
|
|
- position: relative;
|
|
|
- // canvas {
|
|
|
- // border: 1px solid #ccc;
|
|
|
- // }
|
|
|
- .header-search {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- padding-left: 20px;
|
|
|
- background-color: rgba(205, 197, 191, 0.4);
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 99;
|
|
|
- >div {
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- .div50 {
|
|
|
- float: left;
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- .float-right {
|
|
|
- float: right;
|
|
|
- margin-top: 11px;
|
|
|
- margin-right: 10%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-autocomplete {
|
|
|
- width: 320px;
|
|
|
- }
|
|
|
- .my-autocomplete {
|
|
|
- li {
|
|
|
- line-height: normal;
|
|
|
- padding: 7px;
|
|
|
- .name {
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .addr {
|
|
|
- font-size: 12px;
|
|
|
- color: #b4b4b4;
|
|
|
- }
|
|
|
- .highlighted .addr {
|
|
|
- color: #ddd;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.canvasGraphy {
|
|
|
+ position: relative;
|
|
|
+ // canvas {
|
|
|
+ // border: 1px solid #ccc;
|
|
|
+ // }
|
|
|
+ .header-search {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ padding-left: 20px;
|
|
|
+ background-color: rgba(205, 197, 191, 0.4);
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+ > div {
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ .div50 {
|
|
|
+ float: left;
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ .float-right {
|
|
|
+ float: right;
|
|
|
+ margin-top: 11px;
|
|
|
+ margin-right: 10%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-autocomplete {
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
+ .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>
|