|
@@ -7,11 +7,16 @@
|
|
|
<div style="width:100%;height:100%;" v-show="type==3" ref="canvasContainer" v-loading="canvasLoading">
|
|
|
<canvas id="canvas" :width="canvasW" :height="canvasH"></canvas>
|
|
|
</div>
|
|
|
- <div v-if="type == 3" style="height: 40px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;">
|
|
|
+ <!-- <div v-if="type == 3" style="height: 40px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;">
|
|
|
<el-button size="small" @click="smallSize" type="primary">- 缩小</el-button>
|
|
|
<el-button size="small" @click="suitableSize" type="primary">合适比例</el-button>
|
|
|
<el-button size="small" @click="bigSize" type="primary">+ 放大</el-button>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- 底部操作按钮 -->
|
|
|
+ <el-row v-if="type == 3" class="canvas-actions-box">
|
|
|
+ <canvasFun @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo"
|
|
|
+ @redo="redo" @scale="scale" :isEdit="isEdit" ref="canvasFun"></canvasFun>
|
|
|
+ </el-row>
|
|
|
<div v-show="menuShow" id="menu" ref="menu">
|
|
|
<p @click="getDatails">编辑该标签</p>
|
|
|
<p @click="clearXY">清除该点位的坐标</p>
|
|
@@ -21,6 +26,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import canvasFun from "@/components/business_space/newGraphy/canvasFun"
|
|
|
//引擎的引用
|
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
import tools from "@/utils/scan/tools";
|
|
@@ -38,13 +44,17 @@ let colorArr = [
|
|
|
|
|
|
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ canvasFun
|
|
|
+ },
|
|
|
props: {
|
|
|
param: null
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- view: "",
|
|
|
- scene: null,
|
|
|
+ isEdit: false, //是否为编辑态
|
|
|
+ view: null, //视图
|
|
|
+ scene: null, //场景
|
|
|
dataMax: "", //最大值最小值数据
|
|
|
menuShow: false, //右键菜单的显示
|
|
|
lineShow: false,
|
|
@@ -104,7 +114,9 @@ export default {
|
|
|
that.view.maxScale = that.view.scale * 10;
|
|
|
that.view.minScale = that.view.scale;
|
|
|
that.view.fitSceneToView();
|
|
|
- // that.$refs.canvasFun.everyScale = that.view.scale;
|
|
|
+ console.log(that.view)
|
|
|
+ console.log(that.$refs.canvasFun)
|
|
|
+ that.$refs.canvasFun.everyScale = that.view.scale;
|
|
|
})
|
|
|
},
|
|
|
//画点位坐标
|
|
@@ -153,48 +165,11 @@ export default {
|
|
|
}
|
|
|
this.view = new SGraphyView("canvas");
|
|
|
},
|
|
|
- //实例化视图
|
|
|
- initGraphy(data) {
|
|
|
- this.resetSize();
|
|
|
- let items = this.scene.root.children;
|
|
|
- items.map((t, i) => {
|
|
|
- this.drawText(t)
|
|
|
- this.applyColor(t, i)
|
|
|
- })
|
|
|
- },
|
|
|
//初始化canvas大小
|
|
|
resetSize() {
|
|
|
this.canvasH = document.getElementsByClassName("canvasGraphy")[0].offsetHeight;
|
|
|
this.$refs.canvasContainer.style.height = this.canvasH + "px";
|
|
|
},
|
|
|
- // 绘出文案
|
|
|
- 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;
|
|
|
- }
|
|
|
- },
|
|
|
- //分配随机颜色
|
|
|
- applyColor(t, i) {
|
|
|
- t.fillColor = new SColor(colorArr[i % 10]);
|
|
|
- },
|
|
|
// 定位
|
|
|
locationGraphy(point) {
|
|
|
let centerX = (this.view.width / 2) - point.X * this.view.scale;
|
|
@@ -214,22 +189,6 @@ export default {
|
|
|
this.$refs.menu.style.left = e.screenX - 240 + "px";
|
|
|
this.$refs.menu.style.top = e.screenY - 246 + "px";
|
|
|
},
|
|
|
- //合适比例
|
|
|
- suitableSize() {
|
|
|
- this.view.fitSceneToView();
|
|
|
- },
|
|
|
- //缩小
|
|
|
- smallSize() {
|
|
|
- let centerX = this.view.width / 2
|
|
|
- let centerY = this.view.height / 2
|
|
|
- this.view.scaleByPoint(0.9, centerX, centerY)
|
|
|
- },
|
|
|
- //放大
|
|
|
- bigSize() {
|
|
|
- let centerX = this.view.width / 2
|
|
|
- let centerY = this.view.height / 2
|
|
|
- this.view.scaleByPoint(1.1, centerX, centerY)
|
|
|
- },
|
|
|
//插旗 item - 点击的空间item
|
|
|
setNewFlag(item, event) {
|
|
|
this.menuShow = false
|
|
@@ -280,12 +239,68 @@ export default {
|
|
|
//
|
|
|
markClick() {
|
|
|
console.log(arguments)
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 工具栏操作
|
|
|
+ // 移动底图
|
|
|
+ moveCanvas(move) {
|
|
|
+ // todo
|
|
|
+ let canvas = document.getElementById(`floorCanvas`);
|
|
|
+ if (move) {
|
|
|
+ canvas.style.cursor = 'move';
|
|
|
+ } else {
|
|
|
+ canvas.style.cursor = 'default';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 适配底图到窗口
|
|
|
+ fit() {
|
|
|
+ console.log(this.view.scale)
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ },
|
|
|
+ // 保存为png
|
|
|
+ savePng() {
|
|
|
+ this.view.saveImage(`${this.buildMess.code}.png`, 'png');
|
|
|
+ },
|
|
|
+ // 保存为svg
|
|
|
+ saveSvg() {
|
|
|
+ this.view.saveSceneSvg(`${this.buildMess.code}.svg`, 6400, 4800);
|
|
|
+ },
|
|
|
+ // 切割划分
|
|
|
+ divide() {
|
|
|
+ this.drawMainScene.isMarking = true;
|
|
|
+ },
|
|
|
+ // 清除切割划分
|
|
|
+ clearDivide() {
|
|
|
+ this.drawMainScene.clearSceneMark()
|
|
|
+ },
|
|
|
+ // 撤销
|
|
|
+ undo() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 反撤销
|
|
|
+ redo() { },
|
|
|
+ // 缩放
|
|
|
+ scale(val) {
|
|
|
+ // return
|
|
|
+ if (!this.view) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(val)
|
|
|
+ // let scale = this.view.scale;
|
|
|
+ // this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
projectId() {
|
|
|
this.type = 1
|
|
|
this.resize()
|
|
|
+ },
|
|
|
+ "view.scale": {
|
|
|
+ handler(n) {
|
|
|
+ console.log(n)
|
|
|
+ // if (this.$refs.canvasFun) {
|
|
|
+ // this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
|
|
|
+ // }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -325,5 +340,12 @@ export default {
|
|
|
#menu p:hover {
|
|
|
background-color: aqua;
|
|
|
}
|
|
|
+ .canvas-actions-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|