baseEditer.vue 10 KB

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