baseEditer.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template>
  2. <div id="baseEditer" ref="graphy">
  3. <div id="fengMap"></div>
  4. <div class="canvas-container">
  5. <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import { SFengParser } from "@saga-web/feng-map";
  11. import { SFloorParser } from "@saga-web/big";
  12. import { FloorView } from "./../lib/FloorView";
  13. import { EditScence } from "./mapClass/EditScence";
  14. import bus from "@/bus";
  15. export default {
  16. props: {
  17. cmd: {
  18. type: Number,
  19. default: 0,
  20. required: false
  21. },
  22. changeTextMsg: {
  23. type: String,
  24. default: "",
  25. required: false
  26. }
  27. },
  28. data() {
  29. return {
  30. appName: "万达可视化系统",
  31. key: "23f30a832a862c58637a4aadbf50a566",
  32. mapServerURL: "/wanda",
  33. fmapID: "1001724_29",
  34. fmap: null,
  35. canvasWidth: 700,
  36. canvasHeight: 800,
  37. fParser: null,
  38. scene: null,
  39. view: null
  40. };
  41. },
  42. mounted() {
  43. this.canvasWidth = this.$refs.graphy.offsetWidth;
  44. this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
  45. this.init();
  46. // 挂在bus
  47. this.getBus();
  48. },
  49. methods: {
  50. init() {
  51. document.getElementById(`canvas`).focus();
  52. this.clearGraphy();
  53. this.scene = new EditScence();
  54. // this.fmap = new SFengParser(
  55. // "fengMap",
  56. // this.mapServerURL,
  57. // this.key,
  58. // this.appName,
  59. // null
  60. // );
  61. // this.fmap.parseData("1001724_29", 6, res => {
  62. // this.fParser = new SFloorParser(null);
  63. // this.fParser.parseData(res);
  64. // this.fParser.wallList.forEach(t => this.scene.addItem(t));
  65. // this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  66. // this.fParser.doorList.forEach(t => this.scene.addItem(t));
  67. // this.fParser.columnList.forEach(t => this.scene.addItem(t));
  68. // this.fParser.casementList.forEach(t => this.scene.addItem(t));
  69. // this.fParser.spaceList.forEach(t => {
  70. // t.selectable = true;
  71. // // t.connect("click", this, this.spaceClick);
  72. // this.scene.addItem(t);
  73. // });
  74. this.view.scene = this.scene;
  75. this.view.fitSceneToView();
  76. // });
  77. this.scene.emitChange = this.emitChange;
  78. },
  79. // 监听变化
  80. emitChange(itemMsg) {
  81. this.$emit("changeFocusItem", itemMsg);
  82. },
  83. clearGraphy() {
  84. if (this.view) {
  85. this.view.scene = null;
  86. return;
  87. }
  88. this.view = new FloorView("canvas");
  89. document.getElementById("canvas").focus();
  90. },
  91. getBus() {
  92. bus.$on("changeText", val => {
  93. this.scene.updatedText(val);
  94. });
  95. bus.$on("changeFont", val => {
  96. this.scene.updatedFontSize(val);
  97. });
  98. bus.$on("changeLineWidth", val => {
  99. this.scene.updatedLineWidth(val);
  100. });
  101. bus.$on("changeBorderColor", val => {
  102. this.scene.updatedBorderColor(val);
  103. });
  104. bus.$on("changeFontColor", val => {
  105. this.scene.updatedFontColor(val);
  106. });
  107. bus.$on("changeFontColor", val => {
  108. this.scene.updatedFontColor(val);
  109. });
  110. bus.$on("itemWidth", val => {
  111. this.scene.updatedWidth(Number(val));
  112. });
  113. bus.$on("itemHeight", val => {
  114. this.scene.updatedHeight(Number(val));
  115. });
  116. bus.$on("itemPositon",( x,y )=> {
  117. this.scene.updatedPosition(Number(x,y));
  118. });
  119. }
  120. },
  121. watch: {
  122. cmd: {
  123. handler(cmd) {
  124. if (cmd == null) {
  125. cmd = 0;
  126. }
  127. this.scene.setCmd = cmd;
  128. },
  129. deep: true
  130. },
  131. "scene.cmd": {
  132. handler(cmd) {
  133. this.$emit("setCmd", cmd);
  134. },
  135. deep: true
  136. }
  137. }
  138. };
  139. </script>
  140. <style lang="less" scoped>
  141. #baseEditer {
  142. background: #f7f9fa;
  143. width: 100%;
  144. height: 100%;
  145. // overflow: hidden;
  146. // position: relative;
  147. #fengMap {
  148. position: absolute;
  149. width: 100px;
  150. height: 100px;
  151. z-index: -1;
  152. }
  153. .canvas-container {
  154. width: 100%;
  155. height: 100%;
  156. }
  157. }
  158. </style>