baseEditertest.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <div id="baseEditer">
  3. <div id="fengMap"></div>
  4. <div class="canvas-container" ref="graphy">
  5. <a-button type="primary" @click="undo">取消</a-button>
  6. <a-button type="primary" @click="redo">回复</a-button>
  7. <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. import { SFengParser } from "@saga-web/feng-map";
  13. import { SFloorParser } from "@saga-web/big";
  14. import { SPoint } from "@saga-web/draw";
  15. import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
  16. import { SPolygonItem } from "./mapClass/SPolygonItem";
  17. import { FloorView } from "./../lib/FloorView";
  18. export default {
  19. data() {
  20. return {
  21. appName: "万达可视化系统",
  22. key: "23f30a832a862c58637a4aadbf50a566",
  23. mapServerURL: "/wanda",
  24. fmapID: "1001724_29",
  25. fmap: null,
  26. canvasWidth: 700,
  27. canvasHeight: 800,
  28. fParser: null,
  29. item: null
  30. };
  31. },
  32. mounted() {
  33. this.canvasWidth = this.$refs.graphy.offsetWidth;
  34. this.canvasHeight = this.$refs.graphy.offsetHeight;
  35. this.init();
  36. },
  37. methods: {
  38. init() {
  39. // document.getElementById(`canvas`).focus()
  40. this.clearGraphy();
  41. this.scene = new SGraphyScene();
  42. // this.fmap = new SFengParser(
  43. // "fengMap",
  44. // this.mapServerURL,
  45. // this.key,
  46. // this.appName,
  47. // null
  48. // );
  49. // console.log(this.fmap);
  50. // this.fmap.parseData("1001724_29", 1, res => {
  51. // console.log(res);
  52. // this.fParser = new SFloorParser(null);
  53. // console.log(this.fParser);
  54. // this.fParser.parseData(res);
  55. // this.fParser.spaceList.forEach(t => this.scene.addItem(t));
  56. // this.fParser.wallList.forEach(t => this.scene.addItem(t));
  57. // this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  58. // this.fParser.doorList.forEach(t => this.scene.addItem(t));
  59. // this.fParser.columnList.forEach(t => this.scene.addItem(t));
  60. // this.fParser.casementList.forEach(t => this.scene.addItem(t));
  61. this.addPolyLine();
  62. // this.DirectRelationItem();
  63. this.view.scene = this.scene;
  64. this.view.fitSceneToView();
  65. // });
  66. },
  67. // 引入构建多边形类
  68. addPolyLine() {
  69. const PointList = [
  70. new SPoint(0, 0),
  71. new SPoint(50, 0),
  72. new SPoint(50, 50),
  73. new SPoint(0, 50)
  74. ];
  75. const Polylines = new SPolygonItem(null);
  76. Polylines.setStatus = 3;
  77. // Polylines.setPointList = PointList
  78. this.scene.addItem(Polylines);
  79. this.scene.grabItem = Polylines;
  80. this.item = Polylines;
  81. },
  82. undo() {
  83. this.item.undo();
  84. },
  85. redo() {
  86. this.item.redo();
  87. },
  88. // 引入折线
  89. DirectRelationItem() {
  90. const data = {
  91. PointList: [
  92. { X: -138.71000000089407, Y: -17.5 },
  93. { X: -130.31000000052154, Y: -17.5 }
  94. ]
  95. };
  96. const directRelationItem = new DirectRelationItem(null, data);
  97. this.scene.addItem(directRelationItem);
  98. },
  99. clearGraphy() {
  100. if (this.view) {
  101. this.view.scene = null;
  102. return;
  103. }
  104. this.view = new FloorView("canvas");
  105. document.getElementById("canvas").focus();
  106. },
  107. spaceClick(space, event) {
  108. const item = new SImageItem(null, {
  109. Width: 32,
  110. Height: 32,
  111. Url:
  112. "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
  113. });
  114. item.moveTo(event[0].x, event[0].y);
  115. item.zOrder = 999;
  116. item.connect("mousedown", this, this.iconClick);
  117. this.scene.addItem(item);
  118. setInterval(() => {
  119. item.text += "魔";
  120. }, 1000);
  121. },
  122. iconClick(item, event) {
  123. console.log(2222222222222);
  124. },
  125. changeFloor() {},
  126. changeStatus(name) {
  127. switch (name) {
  128. case "选择":
  129. // test init
  130. this.init();
  131. break;
  132. case "画线":
  133. this.scene.isLining = true;
  134. console.log("lining");
  135. break;
  136. case "画文字":
  137. this.scene.isTexting = true;
  138. break;
  139. case "画图片":
  140. this.scene.isImging = true;
  141. break;
  142. default:
  143. console.log(name);
  144. break;
  145. }
  146. }
  147. }
  148. };
  149. </script>
  150. <style lang="less" scoped>
  151. #baseEditer {
  152. background: #ccc;
  153. width: 100%;
  154. height: 100%;
  155. // position: relative;
  156. #fengMap {
  157. position: absolute;
  158. width: 100px;
  159. height: 100px;
  160. z-index: -1;
  161. }
  162. .canvas-container {
  163. width: 100%;
  164. height: 100%;
  165. }
  166. }
  167. </style>