123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368 |
- <template>
- <div ref="graphyMain" class="canvasGraphy">
- <div style="width:100%;height:100%;" v-show="type==3" ref="canvasContainer" v-loading="canvasLoading">
- <canvas id="canvas" :width="canvasW" :height="canvasH" ref="canvas"></canvas>
- </div>
- <div v-if="type!=3" class="center" style="height: 400px;padding-top: 315px; box-sizing:border-box;">
- <i class="icon-wushuju iconfont"></i>
- <p>{{type == 1 ? '请选择楼层' : '当前楼层尚无平面图,请去空间管理根据模型生成'}}</p>
- </div>
- <!-- 底部操作按钮 -->
- <el-row v-show="type == 3" class="canvas-actions-box">
- <canvasFun @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" @divide="divide" @clearDivide="clearDivide"
- @undo="undo" @redo="redo" @scale="scale" :isEdit="isEdit" :config="config" ref="canvasFun"></canvasFun>
- </el-row>
- <div v-show="menuShow" id="menu" ref="menu">
- <p @click="getDatails">编辑该标签</p>
- <p @click="clearXY">清除该点位的坐标</p>
- <p @click="noLocate">修改为无法定位到楼层的点位</p>
- </div>
- </div>
- </template>
- <script>
- import canvasFun from "@/components/business_space/newGraphy/canvasFun"
- //引擎的引用
- import { mapGetters, mapActions } from "vuex";
- import {
- updateLocationPoint, //更新点位标签
- } from "@/api/scan/request";
- import { FloorView, LocationPointScene, MarkerItem, SpaceItem } from "@saga-web/cad-engine/lib";
- import { SPoint } from "@saga-web/draw/lib";
- export default {
- components: {
- canvasFun
- },
- data() {
- return {
- isEdit: false, //是否为编辑态
- view: null, //视图
- scene: null, //场景
- menuShow: false, //右键菜单的显示
- canvasH: 600,
- canvasW: 800,
- type: 1, //1 没有选择楼层, 2没有平面图, 3有平面图
- list: [],
- buildMess: {},
- imageUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAlCAYAAABReInxAAAEaElEQVRYhd2XTWhdRRTHf+clgb7XRbCK6MZSiS5SrVRsq6tiX1AI2LV0UejSneJGqaFFiTtxJ+7UgFCLgqJQCC+oFT/eixKhASGBSuHFiIVKbD5fX96RuXdm7ty59wbduPCEy5t7Z+b8z//M+ZjwvxcJCW40jyW/gqAoIgKafLgP5XngGeARRe+VdOsfii4KMgtcqrfav5c5LNHjxuHEZvN48qsJSiKjInIB5QVgn5tzhiRjp0LYRnlX0YuNVmetCrAWWxMoOSKwgPKSAVM0m1OHIaSvCbpZ8yKwsDlx/EiBZhlgxkzHBbkKHHJAztLwPVmpmhkqiQmHzN6tiROHC2hlDIEDCp8Zd6pj4dyi6bs7Yw9iHxLwZG5U0U+3Jk4c2BMwUSUyJchYyNtS8cxihv7xehIZA52KAeMoPSiwrDASTqof+wBJAHw0h1Gds1PvKDy0f27+hvs8HKGfBRkhUJKzSmoMNZ9l6Ogx2N2l//Ucg59+yLncAVtDRlKdvFEKCNLEbdAs5BNgEfa9Nk3t5Cm/emjyNP0P36f33juI5tllZ0ozBIyjdFztueSTVRh+6mQOzFt85iy1Bx706eEDSlMjQcbD9XGU3h26JzSl9tjjBTDv5kePZqwCI23K3FMJKMi2T2wJH0HX1wtY3pyNdZf8EFQfSb22VQkIrOAyLAh3o2jw5Sz07xTB/rzFbvvbwBdkxSEpBLJSCajoPC6R7Z+TQfcGvdfPw1pWJgerK+ycfxndWkfyGRa86Xz4PYpSvgDO2OhKLcySkP53X9H/8XuGHj6M9nvo0i8wGGQIthL5EpHq+bgSUEQ+QVkFuT+01aVIorO3w2BxIatAbiYXZH7mN0U/r3QpSg/0FV+kNB/qucIkEr1nZxe489VGq9OvBLRKZ4DLao8/rDhBX/Jdwu9TX4vdqsv1VmcmZl3WLYycE6RNUCtdoIddIyMb9MV0VVuQcwWtJXnohpvAc8ByxiLwYKAcstSxZ7lk9tZb7c0CWoGhbwYJs5sIpwS6WadPFefdabele7umdtZb7ZsFpFJAcm6xCmRSRNYIklqCsi62JKnqmqKT9Va7W0CpBNR8g7RMrln3bmf90YWU98y2iJxutDrXCgh7AubOSsOP3yh6IXflCMaqOqWqVwvaS6QAmGK5rBMPLCJvAZ30oibhgXcEebuoulwKgGR5lDFOI3FXkKkwYKw9U4ru5q4Xe0gEqMQlSvIGzAqy4C9Tqj/bb7nI3UuiShPdpvEF2PE0rGbI1n0Q3Kv+PWDcYlzzjVrVFec+Ra+ovz5K/o5aIYVaGhQxTzusq7aSrInI7Td/XV0uV1stcT+0geC6hdCY6xijRoG6/Ydm+NbTT5guLtPXu2PT17umIe6YPAX+suNKie6lQbEUaLQ6Q8DBeN3SxvZHwzXvnZo1xjx3gemn3P5HgDE7K4N405OdxUsFTXZX2foYIlsdRGRw8GawH2hYl5p/Awwr890oNw3WuNHczszVLmm4Fbr+YwH+Bv+IBpdT6d7pAAAAAElFTkSuQmCC",
- setFlag: false, //插旗标志
- point: {}, //右侧列表传来的位置标签
- canvasLoading: false, //loading
- markItem: null, // 当前选中的标签item
- config: {
- isEdit: false
- },
- };
- },
- computed: {
- ...mapGetters("layout", ["projectId", "projects"]),
- projectName() {
- let projectObj = this.projects.find(item => {
- return item.id == this.projectId
- })
- return projectObj ? projectObj.name ? projectObj.name : projectObj.id : this.projectId
- }
- },
- created() { },
- mounted() {
- this.resize()
- },
- methods: {
- resize() {
- this.canvasW =
- document.getElementsByClassName("graphy-main")[0].offsetWidth - 2;
- this.canvasH =
- document.getElementsByTagName("body")[0].offsetHeight - 167;
- },
- //获取数据
- getData(data) {
- if (!data.map) {
- this.type = 2;
- } else {
- this.buildMess = data;
- this.buildFloorName = data.buildFloorName
- this.type = 3;
- }
- },
- //下载json文件
- getJson(jsonId) {
- let that = this;
- that.clearGraphy()
- that.scene = new LocationPointScene();
- that.canvasLoading = true;
- that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${jsonId}`).then(res => {
- that.canvasLoading = false;
- if (res == 'error') {
- this.floorMap = '';
- this.$message.warning('数据解析异常');
- return;
- }
- that.view.scene = that.scene;
- that.scene.isSpaceSelectable = false;
- //添加标签显示
- that.scene.addMarkerList(that.list);
- //注册标签事件
- that.scene.markerClick(that, that.markClick);
- that.scene.spaceClick(that, that.spaceClick);
- that.view.fitSceneToView();
- that.view.minScale = that.view.scale;
- // that.view.minScale = 0.000001;
- if (that.$refs.canvasFun) {
- that.$refs.canvasFun.everyScale = that.view.scale;
- }
- this.disableRightButton();
- })
- },
- //画点位坐标
- doPoint(list) {
- this.setFlag = false;
- if (this.view) {
- this.view.canvasView.style.cursor = `default`;
- }
- this.list = list.map(t => {
- if (t.x == 0 && t.y == 0) {
- return undefined;
- } else {
- return {
- Id: t.id,
- X: t.x,
- Y: t.y * -1,
- Name: t.name
- };
- }
- }).filter(item => item);
- this.getJson(this.buildMess.map)
- },
- //右键菜单的编辑该标签
- 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('clearXY')
- },
- //右键的修改为无法定位到楼层的点位
- noLocate() {
- this.menuShow = false
- delete this.point.floorId
- this.updatePoint('noLocate')
- },
- //创建实例
- createCanvas() {
- if (this.view.scene) {
- this.view.scene.root.children = [];
- this.view = null;
- }
- this.view = new FloorView("canvas");
- },
- // 定位
- locationGraphy(point) {
- let centerX = (this.view.width / 2) - point.x * this.view.scale;
- let centerY = (this.view.height / 2) - point.y * this.view.scale;
- this.view.origin = new SPoint(centerX, centerY)
- },
- //点击按钮
- addPoint(point) {
- if (this.point.id != point.id) {
- this.point = point;
- this.view.canvasView.style.cursor = `url(${this.imageUrl}) 14 33,auto`;
- this.setFlag = true
- }
- else {//再次点击取消插旗
- this.cancelSetFlag();
- }
- },
- //取消插旗状态
- cancelSetFlag() {
- this.point = {};
- this.view.canvasView.style.cursor = `Default`;
- this.setFlag = false;
- },
- //右键菜单
- showRightClick(e) {
- this.menuShow = true
- let el = this.$refs.graphyMain;
- this.$refs.menu.style.left = e.clientX - 245 + "px";
- this.$refs.menu.style.top = e.clientY - 150 + "px";
- },
- //插旗 item - 点击的空间item
- spaceClick(item, event) {
- console.log("click sapce")
- this.menuShow = false;
- if (this.setFlag) {
- this.scene.addMarker({
- Id: this.point.id,
- Name: this.point.name,
- X: event[0].x,
- Y: event[0].y
- })
- this.scene.markerClick(this, this.markClick);
- this.point.x = event[0].x
- this.point.y = -event[0].y
- this.updatePoint('setFlag')
- this.cancelSetFlag()
- }
- this.setFlag = false
- },
- //标签点击事件(包含左键,右键)
- markClick(item, event) {
- console.log("click mark")
- if (event[0].type == 'contextmenu') {
- this.markItem = item;
- this.point = item.data;
- this.showRightClick(event[0])
- } else {
- this.markItem = null;
- this.menuShow = false;
- }
- },
- //更新位置标签
- updatePoint(type) {
- let pa = {
- content: [this.point]
- }
- if (type == 'noLocate') {
- pa.projection = ['floorId']
- }
- //type == clearXY setFlag noLocate
- updateLocationPoint(pa, res => {
- this.$message.success('修改成功');
- if (type == 'clearXY' || type == 'noLocate') {
- this.scene.removeItem(this.markItem);
- this.$emit('resetPoint');
- }
- })
- },
- // 清除canvas
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return
- }
- this.view = new FloorView('canvas')
- },
- // 清除默认左右键事件
- disableRightButton() {
- this.$refs.canvas.addEventListener('contextmenu', (e) => {
- e.preventDefault();
- })
- this.$refs.canvas.addEventListener('click', (e) => {
- e.preventDefault();
- this.menuShow = false
- })
- },
- // 工具栏操作
- // 移动底图
- moveCanvas(move) {
- // todo
- let canvas = document.getElementById(`floorCanvas`);
- if (move) {
- canvas.style.cursor = 'move';
- } else {
- canvas.style.cursor = 'default';
- }
- },
- // 适配底图到窗口
- fit() {
- this.view.fitSceneToView()
- },
- // 保存为png
- savePng() {
- this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
- },
- // 保存为svg
- saveSvg() {
- this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
- },
- // 保存json
- saveJson() {
- this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
- },
- // 切割划分
- divide() {
- this.drawMainScene.isMarking = true;
- },
- // 清除切割划分
- clearDivide() {
- this.drawMainScene.clearSceneMark()
- },
- // 撤销
- undo() {
- },
- // 反撤销
- redo() { },
- // 缩放
- scale(val) {
- if (!this.view) {
- return;
- }
- let scale = this.view.scale;
- this.view.scaleByPoint(val / scale, this.canvasW / 2, this.canvasH / 2)
- },
- },
- watch: {
- projectId() {
- this.type = 1
- this.resize()
- },
- "view.scale": {
- handler(n, o) {
- if (this.$refs.canvasFun) {
- let s = n * 10 / this.view.minScale
- this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
- }
- }
- }
- }
- };
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style lang="less" scoped>
- .canvasGraphy {
- position: relative;
- height: 100%;
- .saga-message {
- height: 400px;
- line-height: 400px;
- color: #ccc;
- font-size: 24px;
- text-align: center;
- }
- #menu {
- width: 200px;
- z-index: 88;
- overflow: hidden;
- box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
- position: absolute;
- background-color: #fff;
- }
- #menu p {
- width: 100%;
- padding-left: 5px;
- overflow: hidden;
- height: 35px;
- line-height: 35px;
- font-size: 14px;
- margin: 0;
- text-align: left;
- cursor: pointer;
- }
- #menu p:hover {
- background-color: aqua;
- }
- .canvas-actions-box {
- position: absolute;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
- z-index: 999;
- }
- }
- </style>
|