|
@@ -1,58 +1,71 @@
|
|
|
<template>
|
|
|
- <div id="graphy">
|
|
|
- <div class="canvas-box">
|
|
|
- <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
|
|
|
- </div>
|
|
|
- <!-- 初始两个按钮 -->
|
|
|
- <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" @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>
|
|
|
+ <div id="graphy" ref="graphy">
|
|
|
+ <div v-show="!FloorMap">
|
|
|
+ <div class="center" v-show="1" style="height: 400px;padding-top:182px;box-sizing:border-box;">
|
|
|
+ <i class="icon-wushuju iconfont"></i>
|
|
|
+ 暂无数据
|
|
|
</div>
|
|
|
- <div class="button-group">
|
|
|
- <!-- 默认操作模式 -->
|
|
|
- <div v-show="type==1">
|
|
|
- <el-button @click="1">创建业务空间</el-button>
|
|
|
- </div>
|
|
|
- <!-- 点击已经关联的业务空间 -->
|
|
|
- <div v-show="type==2">
|
|
|
- <el-button type="primary" plain>重新划分业务空间</el-button>
|
|
|
- <el-button type="primary">编辑空间详情</el-button>
|
|
|
- <el-button plain>取 消</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="canvas-box" v-show="FloorMap">
|
|
|
+ <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
|
|
|
+ <!-- 初始两个按钮 -->
|
|
|
+ <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" @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>
|
|
|
</div>
|
|
|
- <!-- 点击未关联的业务空间 -->
|
|
|
- <div v-show="type==3">
|
|
|
- <el-button plain>创建业务空间</el-button>
|
|
|
- <el-button type="primary">从未关联元空间的业务空间中选择</el-button>
|
|
|
+ <div class="button-group">
|
|
|
+ <!-- 默认操作模式 -->
|
|
|
+ <div v-show="type==1">
|
|
|
+ <el-button @click="1">创建业务空间</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 点击已经关联的业务空间 -->
|
|
|
+ <div v-show="type==2">
|
|
|
+ <el-button type="primary" plain>重新划分业务空间</el-button>
|
|
|
+ <el-button type="primary">编辑空间详情</el-button>
|
|
|
+ <el-button plain>取 消</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 点击未关联的业务空间 -->
|
|
|
+ <div v-show="type==3">
|
|
|
+ <el-button plain>创建业务空间</el-button>
|
|
|
+ <el-button type="primary">从未关联元空间的业务空间中选择</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 重新划分业务空间 -->
|
|
|
+ <div v-show="type==4">
|
|
|
+ <el-button type="primary" plain>从未关联元空间的业务空间中选择</el-button>
|
|
|
+ <el-button plain>取 消</el-button>
|
|
|
+ <el-button type="primary">保存</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 重新划分业务空间 -->
|
|
|
- <div v-show="type==4">
|
|
|
- <el-button type="primary" plain>从未关联元空间的业务空间中选择</el-button>
|
|
|
- <el-button plain>取 消</el-button>
|
|
|
- <el-button type="primary">保存</el-button>
|
|
|
+ <div style="position: absolute;right: 0;">
|
|
|
+ <el-button type="text">未关联平面图的业务空间 {{num}} 条</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div style="position: absolute;right: 0;">
|
|
|
- <el-button type="text">未关联元空间的业务空间 {{num}} 条</el-button>
|
|
|
- </div>
|
|
|
- </el-row>
|
|
|
- <!-- 底部操作按钮 -->
|
|
|
- <el-row class="canvas-actions-box">
|
|
|
- <canvasFun></canvasFun>
|
|
|
- </el-row>
|
|
|
+ </el-row>
|
|
|
+ <!-- 底部操作按钮 -->
|
|
|
+ <el-row class="canvas-actions-box">
|
|
|
+ <canvasFun></canvasFun>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
<!-- -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import canvasFun from "./canvasFun"
|
|
|
+import { mapGetters, mapActions } from "vuex";
|
|
|
+import {
|
|
|
+ countZone,
|
|
|
+ queryZone,
|
|
|
+ updateZone,
|
|
|
+ createZone
|
|
|
+} from "@/api/scan/request"
|
|
|
export default {
|
|
|
components: {
|
|
|
canvasFun
|
|
@@ -63,16 +76,46 @@ export default {
|
|
|
canvasHeight: 600,
|
|
|
type: 1, // 默认操作模式
|
|
|
search: '',//搜索
|
|
|
+ num: 0, // 未关联空间的业务空间条数
|
|
|
+ FloorMap: '',
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('layout', ['projectId'])
|
|
|
+ },
|
|
|
created() {
|
|
|
-
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.canvasWidth = this.$refs.graphy.clientWidth;
|
|
|
+ this.canvasHeight = this.$refs.graphy.clientHeight;
|
|
|
},
|
|
|
methods: {
|
|
|
// 搜索
|
|
|
querySearch() { },
|
|
|
// 选中
|
|
|
- handleSelect() { }
|
|
|
+ handleSelect() { },
|
|
|
+ //
|
|
|
+ handleIconClick() { },
|
|
|
+ //
|
|
|
+ getData(buildFloor, FloorMap, tab) {
|
|
|
+ this.FloorMap = FloorMap;
|
|
|
+ this.tab = tab;
|
|
|
+ this.buildFloor = buildFloor;
|
|
|
+ this.getUnrelateCount()
|
|
|
+ },
|
|
|
+ // 获取未关联平面图的业务空间统计
|
|
|
+ getUnrelateCount() {
|
|
|
+ let pa = {
|
|
|
+ data: {
|
|
|
+ Filters: `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}';Outline isNull`
|
|
|
+ },
|
|
|
+ zone: this.tab.code
|
|
|
+ }
|
|
|
+ countZone(pa, res => {
|
|
|
+ this.num = res.Count
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
filters: {
|
|
|
cutString: function (str, len) {
|
|
@@ -84,6 +127,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ projectId() {
|
|
|
+ this.FloorMap = '';
|
|
|
+ this.tab = {};
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
@@ -99,16 +148,16 @@ export default {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
- z-index: 99999999;
|
|
|
+ z-index: 999;
|
|
|
& > div {
|
|
|
float: left;
|
|
|
}
|
|
|
- /deep/ .el-autocomplete{
|
|
|
+ /deep/ .el-autocomplete {
|
|
|
display: block;
|
|
|
width: 320px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- .button-group button{
|
|
|
+ .button-group button {
|
|
|
display: block;
|
|
|
float: left;
|
|
|
}
|