baseEditer.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  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. import { saveGroup, readGroup } from "@/api/editer.js";
  16. import { STopologyParser } from "./../lib/parsers/STopologyParser";
  17. import { uuid } from "@/components/mapClass/until";
  18. let fengmap = null;
  19. export default {
  20. props: {
  21. cmdType: {
  22. type: String,
  23. default: "choice",
  24. required: false
  25. },
  26. changeTextMsg: {
  27. type: String,
  28. default: "",
  29. required: false
  30. }
  31. },
  32. data() {
  33. return {
  34. appName: "万达可视化系统",
  35. key: "23f30a832a862c58637a4aadbf50a566",
  36. mapServerURL: "/wdfn",
  37. fmapID: "1001724_29",
  38. canvasWidth: 700,
  39. canvasHeight: 800,
  40. fParser: null,
  41. scene: null,
  42. view: null,
  43. floorList: {}
  44. };
  45. },
  46. mounted() {
  47. this.canvasWidth = this.$refs.graphy.offsetWidth;
  48. this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
  49. this.init();
  50. // 挂在bus
  51. this.getBus();
  52. },
  53. methods: {
  54. init() {
  55. // const loadings = this.$loading({type: 'global'});
  56. document.getElementById(`canvas`).focus();
  57. this.clearGraphy();
  58. this.scene = new EditScence();
  59. fengmap = new SFengParser(
  60. "fengMap",
  61. this.mapServerURL + "/" + this.fmapID,
  62. this.key,
  63. this.appName,
  64. null
  65. );
  66. const floorid = "f1";
  67. fengmap.loadMap(this.fmapID, resp => {
  68. console.log("load-map-succ", resp);
  69. this.floorList = resp;
  70. this.parserData(floorid);
  71. });
  72. this.readGroup().then(data => {
  73. const parserData = new STopologyParser(null);
  74. parserData.parseData(data.data.Data[0].Elements);
  75. // 多边形
  76. parserData.zoneLegendList.forEach(t => {
  77. this.scene.addItem(t);
  78. this.scene.Nodes.push(t);
  79. });
  80. // 增加文字
  81. parserData.textMarkerList.forEach(t => {
  82. this.scene.addItem(t);
  83. this.scene.Markers.push(t);
  84. });
  85. // 增加图片
  86. parserData.imageMarkerList.forEach(t => {
  87. this.scene.addItem(t);
  88. this.scene.Markers.push(t);
  89. });
  90. // 增加直线
  91. parserData.lineMarkerList.forEach(t => {
  92. this.scene.addItem(t);
  93. this.scene.Markers.push(t);
  94. });
  95. // 增加图标类图例
  96. parserData.imageLegendList.forEach(t => {
  97. this.scene.addItem(t);
  98. this.scene.Nodes.push(t);
  99. });
  100. // 增加管线类
  101. // 增加图标类图例
  102. parserData.relationList.forEach(t => {
  103. this.scene.addItem(t);
  104. this.scene.Relations.push(t);
  105. });
  106. });
  107. this.scene.emitChange = this.emitChange;
  108. },
  109. parserData(floor) {
  110. if (this.floorList[floor]) {
  111. fengmap.parseData(this.floorList[floor], res => {
  112. if (res.err) {
  113. console.log(res.err);
  114. return;
  115. }
  116. this.fParser = new SFloorParser(null);
  117. this.fParser.parseData(res);
  118. this.fParser.spaceList.forEach(t => {
  119. t.selectable = true;
  120. this.scene.addItem(t);
  121. });
  122. this.fParser.wallList.forEach(t => this.scene.addItem(t));
  123. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  124. this.fParser.doorList.forEach(t => this.scene.addItem(t));
  125. this.fParser.columnList.forEach(t => this.scene.addItem(t));
  126. this.fParser.casementList.forEach(t => this.scene.addItem(t));
  127. this.view.scene = this.scene;
  128. this.view.fitSceneToView();
  129. this.loading = false;
  130. this.isQuerying = false;
  131. console.log("success");
  132. });
  133. } else {
  134. console.log("楼层不正确");
  135. }
  136. },
  137. // 监听变化
  138. emitChange(itemMsg) {
  139. this.$emit("changeFocusItem", itemMsg);
  140. bus.$emit("FocusItemChanged", itemMsg);
  141. },
  142. clearGraphy() {
  143. if (this.view) {
  144. this.view.scene = null;
  145. return;
  146. }
  147. this.view = new FloorView("canvas");
  148. document.getElementById("canvas").focus();
  149. },
  150. getBus() {
  151. bus.$on("changeText", val => {
  152. this.scene.updatedText(val);
  153. });
  154. bus.$on("changeFont", val => {
  155. this.scene.updatedFontSize(val);
  156. });
  157. bus.$on("changeLineWidth", val => {
  158. this.scene.updatedLineWidth(val);
  159. });
  160. bus.$on("changeBorderColor", val => {
  161. this.scene.updatedBorderColor(val);
  162. });
  163. bus.$on("changeFontColor", val => {
  164. this.scene.updatedFontColor(val);
  165. });
  166. bus.$on("changeFontColor", val => {
  167. this.scene.updatedFontColor(val);
  168. });
  169. bus.$on("itemWidth", val => {
  170. this.scene.updatedWidth(Number(val));
  171. });
  172. bus.$on("itemHeight", val => {
  173. this.scene.updatedHeight(Number(val));
  174. });
  175. bus.$on("itemPositon", (x, y) => {
  176. this.scene.updatedPosition(Number(x), Number(y));
  177. });
  178. bus.$on("changebackColor", val => {
  179. this.scene.updatedbackColor(val);
  180. });
  181. bus.$on("deleiteItem", () => {
  182. this.scene.deleiteItem();
  183. });
  184. bus.$on("changeAlignItem", val => {
  185. this.scene.changeAlignItem(val);
  186. });
  187. bus.$on("extractItem", () => {
  188. const map = {};
  189. this.fParser.spaceList.forEach(t => {
  190. if (map[t.data.Type]) {
  191. map[t.data.Type]++;
  192. } else {
  193. map[t.data.Type] = 1;
  194. }
  195. });
  196. const data = [];
  197. for (const key in map) {
  198. data.push({
  199. key: key,
  200. name: key,
  201. age: "",
  202. number: map[key],
  203. address: "提取"
  204. });
  205. }
  206. bus.$emit("exportItem", data);
  207. });
  208. bus.$on("saveMsgItem", () => {
  209. const Elements = this.scene.saveMsgItem();
  210. const data = {
  211. Elements,
  212. Name: "1", // 名称
  213. categoryId: "NTXT",
  214. ProjectID: "3", // 项目ID
  215. BuildingID: "1", // 建筑ID
  216. FloorID: "1", // 楼层id
  217. Note: "1" // 图说明
  218. };
  219. saveGroup(data).then(res => {
  220. console.log("aaaaaaaaaaaaaa", res);
  221. });
  222. });
  223. bus.$on("exportByKey", val => {
  224. const list = this.fParser.spaceList
  225. .map(t => {
  226. if (t.data.Type == val.key) {
  227. return {
  228. ID: uuid(),
  229. Name: t.name,
  230. GraphElementType: "Zone",
  231. GraphElementId: "273d633cc5c54a4882794b34843d1a00",
  232. AttachObjectIds: [],
  233. Pos: { x: t.x, y: t.y },
  234. OutLine: t.pointArr,
  235. Properties: {
  236. strokeColor: "#3d73c0",
  237. fillColor: "#eda986"
  238. },
  239. Num: 123
  240. };
  241. }
  242. })
  243. .filter(item => item);
  244. const parserData = new STopologyParser(null);
  245. parserData.parseData({ Nodes: list });
  246. parserData.zoneLegendList.forEach(t => {
  247. this.scene.addItem(t);
  248. this.scene.Nodes.push(t);
  249. });
  250. });
  251. // 设备图例样式对象
  252. bus.$on("setLenged", obj => {
  253. this.scene.setlegend = obj;
  254. });
  255. // 修改图片url
  256. bus.$on("upadataImageUrl", val => {
  257. this.scene.upadataImageUrl(val);
  258. });
  259. // 改变边框样式
  260. bus.$on("changeBorder", val => {
  261. this.scene.upadataBorder(val);
  262. });
  263. // 改变图例名称
  264. bus.$on("changeLengedName", val => {
  265. this.scene.upadataLengedName(val);
  266. });
  267. },
  268. // 读取数据
  269. readGroup() {
  270. const data = {
  271. categoryId: "NTXT",
  272. projectId: 3
  273. };
  274. return readGroup(data);
  275. }
  276. },
  277. watch: {
  278. cmdType: {
  279. handler(cmd) {
  280. if (cmd == null || cmd == "") {
  281. cmd = "choice";
  282. }
  283. this.scene.setCmd = cmd;
  284. },
  285. deep: true
  286. },
  287. "scene.cmd": {
  288. handler(cmd) {
  289. this.$emit("setCmdType", cmd);
  290. },
  291. deep: true
  292. }
  293. }
  294. };
  295. </script>
  296. <style lang="less" scoped>
  297. #baseEditer {
  298. background: #f7f9fa;
  299. width: 100%;
  300. height: 100%;
  301. // overflow: hidden;
  302. // position: relative;
  303. #fengMap {
  304. position: absolute;
  305. width: 100px;
  306. height: 100px;
  307. z-index: -1;
  308. }
  309. .canvas-container {
  310. width: 100%;
  311. height: 100%;
  312. }
  313. }
  314. </style>