graphyCanvas-copy.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. <template>
  2. <div ref="graphyMain" class="canvasGraphy">
  3. <div v-if="type!=3" class="center" style="height: 400px;padding-top: 315px; box-sizing:border-box;">
  4. <i class="icon-wushuju iconfont"></i>
  5. <p>{{type == 1 ? '请选择楼层' : '当前楼层尚无平面图,请去空间管理根据模型生成'}}</p>
  6. </div>
  7. <div style="width:100%;height:100%;" v-show="type==3" ref="canvasContainer" v-loading="canvasLoading">
  8. <canvas id="canvas" :width="canvasW" :height="canvasH"></canvas>
  9. </div>
  10. <div v-if="type == 3" style="height: 40px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;">
  11. <el-button size="small" @click="smallSize" type="primary">- 缩小</el-button>
  12. <el-button size="small" @click="suitableSize" type="primary">合适比例</el-button>
  13. <el-button size="small" @click="bigSize" type="primary">+ 放大</el-button>
  14. </div>
  15. <div v-show="menuShow" id="menu" ref="menu">
  16. <p @click="getDatails">编辑该标签</p>
  17. <p @click="clearXY">清除该点位的坐标</p>
  18. <p @click="noLocate">修改为无法定位到楼层的点位</p>
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. //引擎的引用
  24. import { mapGetters, mapActions } from "vuex";
  25. import tools from "@/utils/scan/tools";
  26. import {
  27. updateLocationPoint, //更新点位标签
  28. } from "@/api/scan/request";
  29. import { SGraphyView } from "@saga-web/graphy/lib";
  30. import { LocationPointScene } from "@saga-web/cad-engine/lib";
  31. import { SPoint } from "@saga-web/draw/lib";
  32. let colorArr = [
  33. '#00f5ff0d', '#ffdab90d', '#8470ff0d', '#7fff000d', '#ee5c420d',
  34. '#ffffe00d', '#eee9e90d', '#9c9c9c0d', '#90ee900d', '#b4cdcd0d'
  35. ];
  36. export default {
  37. props: {
  38. param: null
  39. },
  40. data() {
  41. return {
  42. view: "",
  43. scene: null,
  44. dataMax: "", //最大值最小值数据
  45. menuShow: false, //右键菜单的显示
  46. lineShow: false,
  47. pointShow: false,
  48. canvasH: 600,
  49. canvasW: 800,
  50. type: 1, //1 没有选择楼层, 2没有平面图, 3有平面图
  51. list: "",
  52. buildMess: {},
  53. imageUrl: "http://adm.sagacloud.cn/image-service/common/image_get?systemId=dev&key=graphy.png",
  54. setFlag: false, //插旗标志
  55. point: {}, //右侧列表传来的位置标签
  56. canvasLoading: false, //loading
  57. };
  58. },
  59. computed: {
  60. ...mapGetters('layout', ['projectId', 'secret', 'userId'])
  61. },
  62. created() { },
  63. mounted() {
  64. this.resize()
  65. document.getElementById("canvas").oncontextmenu = (e) => {
  66. e.preventDefault();
  67. }
  68. },
  69. methods: {
  70. resize() {
  71. this.param.ProjId = this.projectId
  72. this.param.secret = this.secret
  73. this.param.UserId = this.userId
  74. this.canvasW =
  75. document.getElementsByClassName("graphy-main")[0].offsetWidth - 2;
  76. this.canvasH =
  77. document.getElementsByTagName("body")[0].offsetHeight - 167;
  78. },
  79. //获取数据
  80. getData(data) {
  81. if (!data.map) {
  82. this.type = 2;
  83. } else {
  84. this.buildMess = data;
  85. this.type = 3;
  86. }
  87. },
  88. //下载json文件
  89. getJson(jsonId) {
  90. let that = this;
  91. that.clearGraphy()
  92. that.scene = new LocationPointScene();
  93. that.canvasLoading = true;
  94. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${jsonId}`).then(() => {
  95. that.canvasLoading = false;
  96. that.view.scene = that.scene;
  97. that.scene.isSpaceSelectable = false;
  98. that.scene.addMarkerList(that.list);
  99. that.scene.markerClick(that, that.markClick);
  100. that.view.maxScale = that.view.scale * 10;
  101. that.view.minScale = that.view.scale;
  102. that.view.fitSceneToView();
  103. // that.$refs.canvasFun.everyScale = that.view.scale;
  104. })
  105. },
  106. //画点位坐标
  107. doPoint(list) {
  108. this.setFlag = false;
  109. if (this.view) {
  110. this.view.canvasView.style.cursor = `default`;
  111. }
  112. this.list = list.map(t => {
  113. if (t.X == 0 && t.Y == 0) {
  114. return undefined;
  115. } else {
  116. return {
  117. Id: t.Id,
  118. X: t.X,
  119. Y: t.Y * -1,
  120. Name: t.Name
  121. };
  122. }
  123. }).filter(item => item);
  124. this.getJson(this.buildMess.map)
  125. },
  126. //右键菜单的编辑该标签
  127. getDatails() {
  128. this.menuShow = false
  129. this.$emit("getDetails", { Id: this.point.id });
  130. },
  131. //右键的清除该点位的坐标
  132. clearXY() {
  133. this.menuShow = false
  134. this.point.X = 0
  135. this.point.Y = 0
  136. this.updatePoint()
  137. },
  138. //右键的修改为无法定位到楼层的点位
  139. noLocate() {
  140. this.menuShow = false
  141. delete this.point.FloorId
  142. this.updatePoint()
  143. },
  144. //创建实例
  145. createCanvas() {
  146. if (this.view.scene) {
  147. this.view.scene.root.children = [];
  148. this.view = null;
  149. }
  150. this.view = new SGraphyView("canvas");
  151. },
  152. //实例化视图
  153. initGraphy(data) {
  154. this.resetSize();
  155. let items = this.scene.root.children;
  156. items.map((t, i) => {
  157. this.drawText(t)
  158. this.applyColor(t, i)
  159. })
  160. },
  161. //初始化canvas大小
  162. resetSize() {
  163. this.canvasH = document.getElementsByClassName("canvasGraphy")[0].offsetHeight;
  164. this.$refs.canvasContainer.style.height = this.canvasH + "px";
  165. },
  166. // 绘出文案
  167. drawText(item) {
  168. if (item.initName) {
  169. if (this.isBusiness == 1) {
  170. item.fillColor = new SColor(111, 111, 111, .5)
  171. } else if (this.isBusiness == 2) {
  172. item.fillColor = new SColor("#333");
  173. } else if (this.isBusiness == 3) {
  174. //业务空间异常状态
  175. item.fillColor = new SColor('#fff')
  176. } else if (this.isBusiness == 4) {
  177. item.fillColor = new SColor('#cacaca')
  178. } else if (this.isBusiness == 6) {
  179. item.fillColor = new SColor('#fff')
  180. } else if (this.isBusiness == 7) {
  181. item.fillColor = new SColor('red')
  182. }
  183. }
  184. if (item.businessName || item.businessId) {
  185. item.viewText = "👇 " + item.businessName;
  186. } else {
  187. item.viewText = "⬇️ " + item.initName;
  188. }
  189. },
  190. //分配随机颜色
  191. applyColor(t, i) {
  192. t.fillColor = new SColor(colorArr[i % 10]);
  193. },
  194. // 定位
  195. locationGraphy(point) {
  196. let centerX = (this.view.width / 2) - point.X * this.view.scale;
  197. let centerY = (this.view.height / 2) - point.Y * this.view.scale;
  198. this.view.origin = new SPoint(centerX, centerY)
  199. },
  200. //点击按钮
  201. addPoint(point) {
  202. this.point = point;
  203. this.view.canvasView.style.cursor = `url(${this.imageUrl}),auto`;
  204. this.setFlag = true
  205. },
  206. //右键菜单
  207. showRightClick(e) {
  208. this.menuShow = true
  209. let el = this.$refs.graphyMain;
  210. this.$refs.menu.style.left = e.screenX - 240 + "px";
  211. this.$refs.menu.style.top = e.screenY - 246 + "px";
  212. },
  213. //合适比例
  214. suitableSize() {
  215. this.view.fitSceneToView();
  216. },
  217. //缩小
  218. smallSize() {
  219. let centerX = this.view.width / 2
  220. let centerY = this.view.height / 2
  221. this.view.scaleByPoint(0.9, centerX, centerY)
  222. },
  223. //放大
  224. bigSize() {
  225. let centerX = this.view.width / 2
  226. let centerY = this.view.height / 2
  227. this.view.scaleByPoint(1.1, centerX, centerY)
  228. },
  229. //插旗 item - 点击的空间item
  230. setNewFlag(item, event) {
  231. this.menuShow = false
  232. console.log(item)
  233. if (item instanceof SGraphyPolygonItem) {
  234. if (this.setFlag) {
  235. if (item.businessType == 'space') {
  236. this.scene.addImageList([{
  237. img: this.imageUrl,
  238. X: event[0].x,
  239. Y: event[0].y,
  240. width: 5000,
  241. height: 5000
  242. }])
  243. this.view.canvasView.style.cursor = `default`;
  244. this.point.X = event[0].x
  245. this.point.Y = -event[0].y
  246. this.updatePoint()
  247. } else {
  248. this.$message.warning('请在空间内选择')
  249. }
  250. }
  251. this.setFlag = false
  252. } else if (item instanceof SGraphyImgItem) {
  253. this.point = item
  254. this.showRightClick(event[0])
  255. }
  256. },
  257. //更新位置标签
  258. updatePoint() {
  259. let pa = {
  260. Content: [this.point]
  261. }
  262. console.log(pa)
  263. updateLocationPoint(pa, res => {
  264. this.$message.success('修改成功')
  265. })
  266. },
  267. // 清除canvas
  268. clearGraphy() {
  269. if (this.view) {
  270. this.view.scene = null;
  271. return
  272. }
  273. this.view = new SGraphyView('canvas')
  274. },
  275. //
  276. markClick() {
  277. console.log(arguments)
  278. }
  279. },
  280. watch: {
  281. projectId() {
  282. this.type = 1
  283. this.resize()
  284. }
  285. }
  286. };
  287. </script>
  288. <!-- Add "scoped" attribute to limit CSS to this component only -->
  289. <style lang="less" scoped>
  290. .canvasGraphy {
  291. position: relative;
  292. height: 100%;
  293. .saga-message {
  294. height: 400px;
  295. line-height: 400px;
  296. color: #ccc;
  297. font-size: 24px;
  298. text-align: center;
  299. }
  300. #menu {
  301. width: 200px;
  302. z-index: 88;
  303. overflow: hidden;
  304. box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
  305. position: absolute;
  306. background-color: #fff;
  307. }
  308. #menu p {
  309. width: 100%;
  310. padding-left: 5px;
  311. overflow: hidden;
  312. height: 35px;
  313. line-height: 35px;
  314. font-size: 14px;
  315. margin: 0;
  316. text-align: left;
  317. cursor: pointer;
  318. }
  319. #menu p:hover {
  320. background-color: aqua;
  321. }
  322. }
  323. </style>