baseEditer.vue 8.7 KB

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