|
@@ -9,28 +9,28 @@
|
|
|
<div class='condition'>
|
|
|
<p>
|
|
|
<span>建筑楼层</span>
|
|
|
- <el-select v-model='buildVlaue' placeholder='请选择' clearable>
|
|
|
- <el-option
|
|
|
- v-for='item in options'
|
|
|
- :key='item.Code'
|
|
|
- :label='item.Name'
|
|
|
+ <el-cascader
|
|
|
+ placeholder='请选择'
|
|
|
+ :options="options"
|
|
|
@active-item-change="handleItemChange"
|
|
|
+ @change="changeFloor"
|
|
|
filterable
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
+ ></el-cascader>
|
|
|
</p>
|
|
|
</div>
|
|
|
- <div class="graphy-main">
|
|
|
- <graphy-canvas v-if="show" :param="param" @getDetails="getDetails" @resetPoint="resetPoint" ref="canvas"></graphy-canvas>
|
|
|
- </div>
|
|
|
- <div class="graphy-right">
|
|
|
- <graphy-tabs v-show="show"
|
|
|
- ref="tabs"
|
|
|
- :pointParam="pointParam"
|
|
|
- @setFalg="setFalg"
|
|
|
- @getLocation="getLocation"
|
|
|
- @getPointList="sendPointList"
|
|
|
- ></graphy-tabs>
|
|
|
+ <div class="graphy-view">
|
|
|
+ <div class="graphy-main">
|
|
|
+ <graphy-canvas v-if="show" :param="param" @getDetails="getDetails" @resetPoint="resetPoint" ref="canvas"></graphy-canvas>
|
|
|
+ </div>
|
|
|
+ <div class="graphy-right">
|
|
|
+ <graphy-tabs v-show="show"
|
|
|
+ ref="tabs"
|
|
|
+ :pointParam="pointParam"
|
|
|
+ @setFalg="setFalg"
|
|
|
+ @getLocation="getLocation"
|
|
|
+ @getPointList="sendPointList"
|
|
|
+ ></graphy-tabs>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -41,7 +41,7 @@ import graphyTree from "./graphyTree";
|
|
|
import graphyTabs from "./graphyTabs";
|
|
|
import graphyCanvas from "./graphyCanvas";
|
|
|
import {mapGetters, mapActions} from 'vuex';
|
|
|
-import {getPT,getBuildSelect} from "@/api/scan/request"; //获取点位坐标
|
|
|
+import {getPT,getBuildSelect,getFloor} from "@/api/scan/request"; //获取点位坐标
|
|
|
import Handsontable from "handsontable-pro"
|
|
|
import 'handsontable-pro/dist/handsontable.full.css'
|
|
|
import zhCN from 'handsontable-pro/languages/zh-CN';
|
|
@@ -82,21 +82,67 @@ export default {
|
|
|
])
|
|
|
},
|
|
|
methods: {
|
|
|
+ //修改楼层
|
|
|
+ changeFloor(val){
|
|
|
+ console.log(val)
|
|
|
+ let floorMap = "",name = ""
|
|
|
+ this.options.map(item => {
|
|
|
+ if(!!item.children && item.children.length){
|
|
|
+ if(item.value == val[0]){
|
|
|
+ item.children.map(child => {
|
|
|
+ if(child.value == val[1]){
|
|
|
+ console.log(child,'child')
|
|
|
+ floorMap = child.map
|
|
|
+ name = child.label
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let obj = {
|
|
|
+ code: val[1],
|
|
|
+ map: floorMap,
|
|
|
+ name: name
|
|
|
+ }
|
|
|
+ this.getPoint(obj)
|
|
|
+ console.log(floorMap)
|
|
|
+ },
|
|
|
//获取建筑列表
|
|
|
getList(){
|
|
|
getBuildSelect(this.param).then(res => {
|
|
|
console.log(res)
|
|
|
this.options = res.data.BuildList.map(item => {
|
|
|
return {
|
|
|
- Code: item.BuildId,
|
|
|
- Name: item.BuildLocalName,
|
|
|
+ value: item.BuildId,
|
|
|
+ label: item.BuildLocalName,
|
|
|
children: []
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+ //点击事件
|
|
|
handleItemChange(val){
|
|
|
- console.log(val,'val')
|
|
|
+ if(val.length == 1){
|
|
|
+ let obj = Object.assign({BuildId: val[0]},this.param)
|
|
|
+ getFloor(obj).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.options = this.options.map(item => {
|
|
|
+ if(item.value == val[0]){
|
|
|
+ item.children = res.data.FloorList.map(child => {
|
|
|
+ return {
|
|
|
+ value: child.FloorId,
|
|
|
+ label: child.FloorLocalName + (child.FloorMap ? '' : '(需初始化数据)'),
|
|
|
+ map: child.FloorMap
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ console.log(this.options)
|
|
|
+ })
|
|
|
+ }else if(val.length == 2){
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
changeValue(){
|
|
|
this.$set(this.param,'ProjId',this.projectId)
|
|
@@ -105,8 +151,9 @@ export default {
|
|
|
this.$set(this.pointParam,'UserId',this.userId)
|
|
|
this.show = true
|
|
|
},
|
|
|
+
|
|
|
+ //渲染
|
|
|
getPoint(data) {
|
|
|
- console.log(data)
|
|
|
this.pointParam.FloorId = data.code;
|
|
|
this.pointParam.fllorName = data.name;
|
|
|
this.$refs.tabs.reset(this.pointParam, data.map);
|
|
@@ -157,33 +204,38 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
#graphy {
|
|
|
- position: relative;
|
|
|
+ // position: relative;
|
|
|
+ display: flex;
|
|
|
+ .graphy-view{
|
|
|
+ display: flex;
|
|
|
+ .graphy-main {
|
|
|
+ flex: 1;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 200px;
|
|
|
+ // top: 0;
|
|
|
+ // right: 400px;
|
|
|
+ // bottom: 0;
|
|
|
+ // overflow: auto;
|
|
|
+ }
|
|
|
+ .graphy-right {
|
|
|
+ // position: absolute;
|
|
|
+ // right: 0;
|
|
|
+ width: 400px;
|
|
|
+ // top: 0;
|
|
|
+ // bottom: 0;
|
|
|
+ // border-left: 1px solid #ccc;
|
|
|
+ // overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
.graphy-left {
|
|
|
- width: 200px;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- overflow-y: auto;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- border-right: 1px solid #ccc;
|
|
|
- }
|
|
|
- .graphy-main {
|
|
|
- position: absolute;
|
|
|
- left: 200px;
|
|
|
- top: 0;
|
|
|
- right: 400px;
|
|
|
- bottom: 0;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .graphy-right {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- width: 400px;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- border-left: 1px solid #ccc;
|
|
|
- overflow: hidden;
|
|
|
+ // width: 200px;
|
|
|
+ // height: 100%;
|
|
|
+ // position: absolute;
|
|
|
+ // overflow-y: auto;
|
|
|
+ // left: 0;
|
|
|
+ // top: 0;
|
|
|
+ // bottom: 0;
|
|
|
+ // border-right: 1px solid #ccc;
|
|
|
}
|
|
|
}
|
|
|
</style>
|