baseEditer.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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. <<<<<<< HEAD
  126. bus.$on("deleiteItem", () => {
  127. this.scene.deleiteItem();
  128. });
  129. =======
  130. bus.$on("extractItem", () => {
  131. const map = {}
  132. this.fParser.spaceList.forEach(t => {
  133. if (map[t.data.Type]) {
  134. map[t.data.Type]++
  135. } else {
  136. map[t.data.Type] = 1;
  137. }
  138. })
  139. const data = [];
  140. for (const key in map) {
  141. data.push({
  142. key: key,
  143. name: key,
  144. age: '',
  145. number: map[key],
  146. address: "提取"
  147. })
  148. }
  149. bus.$emit('exportItem',data)
  150. })
  151. >>>>>>> 21575eaae2b540d7cb1e3e4401e1dbc90a7d279a
  152. }
  153. },
  154. watch: {
  155. cmd: {
  156. handler(cmd) {
  157. if (cmd == null) {
  158. cmd = 0;
  159. }
  160. this.scene.setCmd = cmd;
  161. },
  162. deep: true
  163. },
  164. "scene.cmd": {
  165. handler(cmd) {
  166. this.$emit("setCmd", cmd);
  167. },
  168. deep: true
  169. }
  170. }
  171. };
  172. </script>
  173. <style lang="less" scoped>
  174. #baseEditer {
  175. background: #f7f9fa;
  176. width: 100%;
  177. height: 100%;
  178. // overflow: hidden;
  179. // position: relative;
  180. #fengMap {
  181. position: absolute;
  182. width: 100px;
  183. height: 100px;
  184. z-index: -1;
  185. }
  186. .canvas-container {
  187. width: 100%;
  188. height: 100%;
  189. }
  190. }
  191. </style>