baseEditer.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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. // const loadings = this.$loading({type: 'global'});
  52. document.getElementById(`canvas`).focus();
  53. this.clearGraphy();
  54. this.scene = new EditScence();
  55. // this.fmap = new SFengParser(
  56. // "fengMap",
  57. // this.mapServerURL,
  58. // this.key,
  59. // this.appName,
  60. // null
  61. // );
  62. // this.fmap.parseData("1001724_29", 6, res => {
  63. // this.fParser = new SFloorParser(null);
  64. // this.fParser.parseData(res);
  65. // this.fParser.wallList.forEach(t => this.scene.addItem(t));
  66. // this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  67. // this.fParser.doorList.forEach(t => this.scene.addItem(t));
  68. // this.fParser.columnList.forEach(t => this.scene.addItem(t));
  69. // this.fParser.casementList.forEach(t => this.scene.addItem(t));
  70. // this.fParser.spaceList.forEach(t => {
  71. // t.selectable = true;
  72. // // t.connect("click", this, this.spaceClick);
  73. // this.scene.addItem(t);
  74. // });
  75. this.view.scene = this.scene;
  76. this.view.fitSceneToView();
  77. // this.$loading.close(loadings)
  78. // });
  79. this.scene.emitChange = this.emitChange;
  80. },
  81. // 监听变化
  82. emitChange(itemMsg) {
  83. this.$emit("changeFocusItem", itemMsg);
  84. bus.$emit("FocusItemChanged", itemMsg);
  85. },
  86. clearGraphy() {
  87. if (this.view) {
  88. this.view.scene = null;
  89. return;
  90. }
  91. this.view = new FloorView("canvas");
  92. document.getElementById("canvas").focus();
  93. },
  94. getBus() {
  95. bus.$on("changeText", val => {
  96. this.scene.updatedText(val);
  97. });
  98. bus.$on("changeFont", val => {
  99. this.scene.updatedFontSize(val);
  100. });
  101. bus.$on("changeLineWidth", val => {
  102. this.scene.updatedLineWidth(val);
  103. });
  104. bus.$on("changeBorderColor", val => {
  105. this.scene.updatedBorderColor(val);
  106. });
  107. bus.$on("changeFontColor", val => {
  108. this.scene.updatedFontColor(val);
  109. });
  110. bus.$on("changeFontColor", val => {
  111. this.scene.updatedFontColor(val);
  112. });
  113. bus.$on("itemWidth", val => {
  114. this.scene.updatedWidth(Number(val));
  115. });
  116. bus.$on("itemHeight", val => {
  117. this.scene.updatedHeight(Number(val));
  118. });
  119. bus.$on("itemPositon", (x, y) => {
  120. this.scene.updatedPosition(Number(x, y));
  121. });
  122. bus.$on("changebackColor", (val) => {
  123. this.scene.updatedbackColor(val);
  124. });
  125. }
  126. },
  127. watch: {
  128. cmd: {
  129. handler(cmd) {
  130. if (cmd == null) {
  131. cmd = 0;
  132. }
  133. this.scene.setCmd = cmd;
  134. },
  135. deep: true
  136. },
  137. "scene.cmd": {
  138. handler(cmd) {
  139. this.$emit("setCmd", cmd);
  140. },
  141. deep: true
  142. }
  143. }
  144. };
  145. </script>
  146. <style lang="less" scoped>
  147. #baseEditer {
  148. background: #f7f9fa;
  149. width: 100%;
  150. height: 100%;
  151. // overflow: hidden;
  152. // position: relative;
  153. #fengMap {
  154. position: absolute;
  155. width: 100px;
  156. height: 100px;
  157. z-index: -1;
  158. }
  159. .canvas-container {
  160. width: 100%;
  161. height: 100%;
  162. }
  163. }
  164. </style>