baseEditer.vue 13 KB

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