123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329 |
- <template>
- <div ref="graphyMain" class="canvasGraphy">
- <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>
- <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%;">
- <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 v-show="menuShow" id="menu" ref="menu">
- <p @click="getDatails">编辑该标签</p>
- <p @click="clearXY">清除该点位的坐标</p>
- <p @click="noLocate">修改为无法定位到楼层的点位</p>
- </div>
- </div>
- </template>
- <script>
- //引擎的引用
- import { mapGetters, mapActions } from "vuex";
- import tools from "@/utils/scan/tools";
- import {
- updateLocationPoint, //更新点位标签
- } from "@/api/scan/request";
- import { SGraphyView } from "@saga-web/graphy/lib";
- import { LocationPointScene } from "@saga-web/cad-engine/lib";
- import { SPoint } from "@saga-web/draw/lib";
- let colorArr = [
- '#00f5ff0d', '#ffdab90d', '#8470ff0d', '#7fff000d', '#ee5c420d',
- '#ffffe00d', '#eee9e90d', '#9c9c9c0d', '#90ee900d', '#b4cdcd0d'
- ];
- export default {
- props: {
- param: null
- },
- data() {
- return {
- view: "",
- scene: null,
- dataMax: "", //最大值最小值数据
- menuShow: false, //右键菜单的显示
- lineShow: false,
- pointShow: false,
- canvasH: 600,
- canvasW: 800,
- type: 1, //1 没有选择楼层, 2没有平面图, 3有平面图
- list: "",
- buildMess: {},
- imageUrl: "http://adm.sagacloud.cn/image-service/common/image_get?systemId=dev&key=graphy.png",
- setFlag: false, //插旗标志
- point: {}, //右侧列表传来的位置标签
- canvasLoading: false, //loading
- };
- },
- computed: {
- ...mapGetters('layout', ['projectId', 'secret', 'userId'])
- },
- created() { },
- mounted() {
- this.resize()
- document.getElementById("canvas").oncontextmenu = (e) => {
- e.preventDefault();
- }
- },
- methods: {
- resize() {
- this.param.ProjId = this.projectId
- this.param.secret = this.secret
- this.param.UserId = this.userId
- 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.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(() => {
- that.canvasLoading = false;
- that.view.scene = that.scene;
- that.scene.isSpaceSelectable = false;
- that.scene.addMarkerList(that.list);
- that.scene.markerClick(that, that.markClick);
- that.view.maxScale = that.view.scale * 10;
- that.view.minScale = that.view.scale;
- that.view.fitSceneToView();
- // that.$refs.canvasFun.everyScale = that.view.scale;
- })
- },
- //画点位坐标
- 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()
- },
- //右键的修改为无法定位到楼层的点位
- noLocate() {
- this.menuShow = false
- delete this.point.FloorId
- this.updatePoint()
- },
- //创建实例
- createCanvas() {
- if (this.view.scene) {
- this.view.scene.root.children = [];
- this.view = null;
- }
- 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;
- let centerY = (this.view.height / 2) - point.Y * this.view.scale;
- this.view.origin = new SPoint(centerX, centerY)
- },
- //点击按钮
- addPoint(point) {
- this.point = point;
- this.view.canvasView.style.cursor = `url(${this.imageUrl}),auto`;
- this.setFlag = true
- },
- //右键菜单
- 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() {
- 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
- console.log(item)
- if (item instanceof SGraphyPolygonItem) {
- if (this.setFlag) {
- if (item.businessType == 'space') {
- this.scene.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.setFlag = false
- } else if (item instanceof SGraphyImgItem) {
- this.point = item
- this.showRightClick(event[0])
- }
- },
- //更新位置标签
- updatePoint() {
- let pa = {
- Content: [this.point]
- }
- console.log(pa)
- updateLocationPoint(pa, res => {
- this.$message.success('修改成功')
- })
- },
- // 清除canvas
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return
- }
- this.view = new SGraphyView('canvas')
- },
- //
- markClick() {
- console.log(arguments)
- }
- },
- watch: {
- projectId() {
- this.type = 1
- this.resize()
- }
- }
- };
- </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;
- }
- }
- </style>
|