baseEditer.vue 12 KB

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