baseEditer.vue 11 KB

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