baseEditer.vue 13 KB

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