|
@@ -13,9 +13,9 @@
|
|
|
<el-button size="small" @click="bigSize" type="primary">+ 放大</el-button>
|
|
|
</div>
|
|
|
<div v-show="menuShow" id="menu" ref="menu">
|
|
|
- <p v-if="pointShow" @click="getDatails">编辑该标签</p>
|
|
|
- <p v-if="pointShow" @click="clearXY">清除该点位的坐标</p>
|
|
|
- <p v-if="pointShow" @click="noLocate">修改为无法定位到楼层的点位</p>
|
|
|
+ <p @click="getDatails">编辑该标签</p>
|
|
|
+ <p @click="clearXY">清除该点位的坐标</p>
|
|
|
+ <p @click="noLocate">修改为无法定位到楼层的点位</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -23,13 +23,15 @@
|
|
|
<script>
|
|
|
import axios from "axios";
|
|
|
//引擎的引用
|
|
|
-import { mainScene } from "@/assets/graphy";
|
|
|
+import { SGraphyImgItem } from '@/assets/graphy/SGraphy/newItems/SGraphyImgItem.js'
|
|
|
+import SGraphyPolygonItem from '@/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.js'
|
|
|
import { SGraphyView } from "@sybotan-web/graphy";
|
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
import { SPoint } from '@sybotan-web/base/lib';
|
|
|
import { SPen, SPainter, SColor } from "@sybotan-web/draw";
|
|
|
import pako from '@/assets/pako/pako'
|
|
|
import tools from "@/utils/scan/tools";
|
|
|
+import { LocationPointScene } from './utils/LocationPointScene.js'
|
|
|
import {
|
|
|
formBIMToPri,
|
|
|
updateBusiness,
|
|
@@ -39,6 +41,9 @@ let colorArr = [
|
|
|
'#00f5ff0d', '#ffdab90d', '#8470ff0d', '#7fff000d', '#ee5c420d',
|
|
|
'#ffffe00d', '#eee9e90d', '#9c9c9c0d', '#90ee900d', '#b4cdcd0d'
|
|
|
];
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
export default {
|
|
|
props: {
|
|
|
param: null
|
|
@@ -68,7 +73,7 @@ export default {
|
|
|
mounted() {
|
|
|
this.resize()
|
|
|
document.getElementById("canvas").oncontextmenu = (e) => {
|
|
|
- this.contextMenu(e)
|
|
|
+ e.preventDefault();
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -96,10 +101,11 @@ export default {
|
|
|
this.mainScene = null;
|
|
|
// 初始化view类
|
|
|
this.view = new SGraphyView("canvas");
|
|
|
- this.mainScene = new mainScene(null);
|
|
|
+ console.log(LocationPointScene)
|
|
|
+ this.mainScene = new LocationPointScene(null);
|
|
|
this.mainScene.urlGetData(url).then(() => {
|
|
|
this.view.scene = this.mainScene;
|
|
|
- this.mainScene.addImageList(this.list)
|
|
|
+ this.mainScene.addFlagList(this.list)
|
|
|
this.view.fitSceneToView();
|
|
|
this.initGraphy()
|
|
|
});
|
|
@@ -125,16 +131,19 @@ export default {
|
|
|
},
|
|
|
//右键菜单的编辑该标签
|
|
|
getDatails() {
|
|
|
+ this.menuShow = false
|
|
|
this.$emit("getDetails", { Id: this.point.id });
|
|
|
},
|
|
|
//右键的清除该点位的坐标
|
|
|
clearXY() {
|
|
|
+ this.menuShow = false
|
|
|
this.point.X = 0
|
|
|
this.point.Y = 0
|
|
|
this.updatePoint()
|
|
|
},
|
|
|
//右键的修改为无法定位到楼层的点位
|
|
|
noLocate() {
|
|
|
+ this.menuShow = false
|
|
|
delete this.point.FloorId
|
|
|
this.updatePoint()
|
|
|
},
|
|
@@ -149,7 +158,6 @@ export default {
|
|
|
//实例化视图
|
|
|
initGraphy(data) {
|
|
|
this.resetSize();
|
|
|
- this.mainScene.click(this, this.setNewFlag)
|
|
|
let items = this.mainScene.root.children;
|
|
|
items.map((t, i) => {
|
|
|
this.drawText(t)
|
|
@@ -202,50 +210,11 @@ export default {
|
|
|
this.setFlag = true
|
|
|
},
|
|
|
//右键菜单
|
|
|
- contextMenu(e) {
|
|
|
- //取消默认的浏览器自带的右键
|
|
|
- e.preventDefault();
|
|
|
- //将canvas的坐标转换成数据坐标
|
|
|
- //设立falg判断是否在标签上
|
|
|
- let falg = false,
|
|
|
- index = 0,
|
|
|
- wallIndex = 0,
|
|
|
- wallFalg = false;
|
|
|
- let items = this.view.scene.root.children;
|
|
|
- for (let i = 0; i < items.length; i++) {
|
|
|
- if (items[i].type == 1) {
|
|
|
- if (items[i].contains(point.x, point.y)) {
|
|
|
- index = i;
|
|
|
- falg = true;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //如果在标签上
|
|
|
- if (falg || wallFalg) {
|
|
|
- this.menuShow = true;
|
|
|
- let el = this.$refs.graphyMain;
|
|
|
- if (falg) {
|
|
|
- this.detaleItem = items[index];
|
|
|
- this.pointShow = true;
|
|
|
- } else if (wallFalg) {
|
|
|
- this.detaleLine = items[wallIndex];
|
|
|
- this.lineShow = true;
|
|
|
- }
|
|
|
- if (el.offsetWidth < e.layerX + 200) {
|
|
|
- this.$refs.menu.style.left = e.layerX - 200 + "px";
|
|
|
- this.$refs.menu.style.top = e.layerY + "px";
|
|
|
- } else if (el.offsetHeight < e.layerY + 150) {
|
|
|
- this.$refs.menu.style.left = e.layerX + "px";
|
|
|
- this.$refs.menu.style.top = e.layerY - 100 + "px";
|
|
|
- } else {
|
|
|
- this.$refs.menu.style.left = e.layerX + "px";
|
|
|
- this.$refs.menu.style.top = e.layerY + "px";
|
|
|
- }
|
|
|
- // this.mainScene.removeItem(items[index]);
|
|
|
- } else {
|
|
|
- this.lineShow = this.pointShow = false;
|
|
|
- this.menuShow = false;
|
|
|
- }
|
|
|
+ showRightClick(e) {
|
|
|
+ this.menuShow = true
|
|
|
+ let el = this.$refs.graphyMain;
|
|
|
+ this.$refs.menu.style.left = e.screenX - 240 + "px";
|
|
|
+ this.$refs.menu.style.top = e.screenY - 246 + "px";
|
|
|
},
|
|
|
//合适比例
|
|
|
suitableSize() {
|
|
@@ -265,32 +234,39 @@ export default {
|
|
|
},
|
|
|
//插旗 item - 点击的空间item
|
|
|
setNewFlag(item, event) {
|
|
|
- console.log(event)
|
|
|
- if (this.setFlag) {
|
|
|
- if (item.businessType=='space') {
|
|
|
- this.mainScene.addImageList([{
|
|
|
- img: this.imageUrl,
|
|
|
- X: event[0].x,
|
|
|
- Y: event[0].y,
|
|
|
- width: 5000,
|
|
|
- height: 5000
|
|
|
- }])
|
|
|
- this.view.canvasView.style.cursor = `default`;
|
|
|
+ this.menuShow = false
|
|
|
+ console.log(item)
|
|
|
+ if (item instanceof SGraphyPolygonItem) {
|
|
|
+ if (this.setFlag) {
|
|
|
+ if (item.businessType == 'space') {
|
|
|
+ this.mainScene.addImageList([{
|
|
|
+ img: this.imageUrl,
|
|
|
+ X: event[0].x,
|
|
|
+ Y: event[0].y,
|
|
|
+ width: 5000,
|
|
|
+ height: 5000
|
|
|
+ }])
|
|
|
+ this.view.canvasView.style.cursor = `default`;
|
|
|
|
|
|
- this.point.X = event[0].x
|
|
|
- this.point.Y = -event[0].y
|
|
|
- this.updatePoint()
|
|
|
- } else {
|
|
|
- this.$message.warning('请在空间内选择')
|
|
|
+ this.point.X = event[0].x
|
|
|
+ this.point.Y = -event[0].y
|
|
|
+ this.updatePoint()
|
|
|
+ } else {
|
|
|
+ this.$message.warning('请在空间内选择')
|
|
|
+ }
|
|
|
}
|
|
|
+ this.setFlag = false
|
|
|
+ } else if (item instanceof SGraphyImgItem) {
|
|
|
+ this.point = item
|
|
|
+ this.showRightClick(event[0])
|
|
|
}
|
|
|
- this.setFlag = false
|
|
|
},
|
|
|
//更新位置标签
|
|
|
updatePoint() {
|
|
|
let pa = {
|
|
|
Content: [this.point]
|
|
|
}
|
|
|
+ console.log(pa)
|
|
|
updateLocationPoint(pa, res => {
|
|
|
this.$message.success('修改成功')
|
|
|
})
|