baseEditer.vue 11 KB

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