drafts.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. <template>
  2. <div id="drafts">
  3. <a-spin :spinning="spinning">
  4. <div class="tit">草稿箱</div>
  5. <div class="conent">
  6. <div class="left-nav">
  7. <!-- <Tree :data="treeData" @change="change"></Tree>-->
  8. <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  9. </div>
  10. <div class="conent-right">
  11. <div class="conent-tit">
  12. <div class="tit-left" v-if="floorName">{{systemName}}-{{floorName}}</div>
  13. <div class="tit-right">
  14. <a-button @click="deleteBtn" :disabled="!floorName">删除</a-button>
  15. <a-button @click="publishBtn" :disabled="!floorName">发布</a-button>
  16. <a-button type="primary" @click="goToEditer" :disabled="!floorName">编辑</a-button>
  17. </div>
  18. </div>
  19. <div class="concent-bottom">
  20. <div class="map">
  21. <div class="canvas-container" ref="draftsCanvas">
  22. <div id="fengMap"></div>
  23. <canvas
  24. id="canvas"
  25. :width="canvasWidth"
  26. :height="canvasHeight"
  27. ref="canvas"
  28. tabindex="0"
  29. ></canvas>
  30. </div>
  31. </div>
  32. <div v-show="!legend" class="legend-btn" @click="legend = !legend">
  33. <a-icon type="right" style="color: #8D9399;font-size: 10px" />
  34. </div>
  35. <div v-show="legend" class="legend-btn legend-btn-close" @click="legend = !legend">
  36. <a-icon type="right" style="color: #8D9399;font-size: 10px" />
  37. </div>
  38. <div class="legend" v-if="legend">
  39. <div
  40. style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
  41. >可能需要补充的图例</div>
  42. <a-table
  43. v-loading="legendLoading"
  44. :columns="columns"
  45. :rowKey="(record,index)=>{return index}"
  46. :data-source="legendData"
  47. size="middle"
  48. :pagination="false"
  49. >
  50. <div slot="Url" slot-scope="text,record">
  51. <img
  52. v-if="record.Url"
  53. style=" width: 20px;height: 22px;"
  54. :src="'/serve/topology-wanda/Picture/query/'+ record.Url"
  55. alt
  56. />
  57. <span v-else>---</span>
  58. </div>
  59. <span></span>
  60. </a-table>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </a-spin>
  66. </div>
  67. </template>
  68. <script>
  69. import Tree from "./../components/Tree/Tree.vue";
  70. import { SFengParser } from "@saga-web/feng-map";
  71. import { SFloorParser } from "@saga-web/big";
  72. import { FloorView } from "./../lib/FloorView";
  73. import { EditScence } from "@/components/mapClass/EditScence";
  74. import bus from "@/bus";
  75. import {
  76. readGroup,
  77. queryDraftGroup,
  78. queryStatistic,
  79. deleteGraph,
  80. publishGraph
  81. } from "@/api/editer.js";
  82. import { STopologyParser } from "./../lib/parsers/STopologyParser";
  83. import { uuid } from "@/components/mapClass/until";
  84. import { SImageItem } from "@saga-web/graph/lib";
  85. import store from "../store";
  86. let fengmap = null;
  87. export default {
  88. components: { Tree },
  89. data() {
  90. return {
  91. treeData: [],
  92. columns: [
  93. {
  94. title: "名称", // 列的名称
  95. dataIndex: "Name", // 列的标识
  96. scopedSlots: { customRender: "Name" }
  97. },
  98. {
  99. title: "图例", // 列的名称
  100. dataIndex: "Url", // 列的标识
  101. scopedSlots: { customRender: "Url" }
  102. }
  103. ],
  104. legendData: [],
  105. legend: true,
  106. canvasWidth: 700,
  107. canvasHeight: 600,
  108. view: null,
  109. urlMsg: null,
  110. floorList: {},
  111. mapServerURL: "/wdfn",
  112. key: "23f30a832a862c58637a4aadbf50a566",
  113. appName: "万达可视化系统",
  114. defaultProps: {
  115. children: "Category",
  116. label: "Gcode"
  117. },
  118. projectId: "", //项目id
  119. fmapID: "", //蜂鸟地图id
  120. graphId: "", //绘制生成得图id
  121. legendLoading: false,
  122. spinning: false, //全局加载
  123. systemName: "",
  124. floorName: "",
  125. BuildingID: "1", // 建筑id
  126. categoryId: "" //系统类id
  127. };
  128. },
  129. methods: {
  130. handleNodeClick(data, node) {
  131. this.legendData = [];
  132. this.systemName = "";
  133. this.floorName = "";
  134. if (data.Gname) {
  135. this.systemName = node.parent.data.Gcode;
  136. this.floorName = data.Gcode;
  137. console.log(node.parent.data.Id)
  138. this.categoryId = node.parent.data.Id;
  139. this.getLegend();
  140. this.checkFloor(data.Gname);
  141. }
  142. },
  143. init() {
  144. // const loadings = this.$loading({type: 'global'});
  145. document.getElementById(`canvas`).focus();
  146. this.clearGraphy();
  147. this.scene = new EditScence();
  148. fengmap = new SFengParser(
  149. "fengMap",
  150. this.mapServerURL + "/fmap/" + this.fmapID,
  151. this.key,
  152. this.appName,
  153. null
  154. );
  155. },
  156. clearGraphy() {
  157. if (this.view) {
  158. this.view.scene = null;
  159. return;
  160. }
  161. this.view = new FloorView("canvas");
  162. document.getElementById("canvas").focus();
  163. },
  164. parserData(floor) {
  165. if (floor == "g80") {
  166. // 屋顶
  167. if (fengmap.frImg) {
  168. const imgItem = new SImageItem(
  169. null,
  170. `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`
  171. );
  172. this.scene.addItem(imgItem);
  173. this.view.scene = this.scene;
  174. this.view.fitSceneToView();
  175. this.loading = false;
  176. this.isQuerying = false;
  177. }
  178. } else {
  179. if (this.floorList[floor]) {
  180. fengmap.parseData(this.floorList[floor], res => {
  181. if (res.err) {
  182. console.log(res.err);
  183. return;
  184. }
  185. this.fParser = new SFloorParser(null);
  186. this.fParser.parseData(res);
  187. this.fParser.spaceList.forEach(t => {
  188. t.selectable = true;
  189. this.scene.addItem(t);
  190. });
  191. this.fParser.wallList.forEach(t => this.scene.addItem(t));
  192. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  193. this.fParser.doorList.forEach(t => this.scene.addItem(t));
  194. this.fParser.columnList.forEach(t => this.scene.addItem(t));
  195. this.fParser.casementList.forEach(t => this.scene.addItem(t));
  196. this.view.scene = this.scene;
  197. this.view.fitSceneToView();
  198. this.loading = false;
  199. this.isQuerying = false;
  200. console.log("success");
  201. });
  202. } else {
  203. console.log("楼层不正确");
  204. }
  205. }
  206. },
  207. getTreeData() {
  208. queryDraftGroup({ projectId: this.projectId }).then(res => {
  209. console.log(res);
  210. if (res.Result == "success") {
  211. this.treeData = res.Data;
  212. } else {
  213. this.treeData = [];
  214. this.$message.error("获取楼层结构失败");
  215. }
  216. });
  217. },
  218. //获取补充图例
  219. getLegend() {
  220. this.legendLoading = true;
  221. this.legendData = [];
  222. queryStatistic({
  223. projectId: this.projectId,
  224. flag: true,
  225. graphId: this.graphId
  226. }).then(res => {
  227. console.log(res);
  228. this.legendLoading = false;
  229. if (res.data.Result == "success") {
  230. const data = res.data.Data;
  231. data.map(item => {
  232. if (item.RealNum == 0) {
  233. this.legendData.push(item);
  234. }
  235. });
  236. } else {
  237. this.legendData = [];
  238. this.$message.error("获取楼层结构补充图例失败");
  239. }
  240. });
  241. },
  242. //删除
  243. deleteBtn() {
  244. this.spinning = true;
  245. deleteGraph([{ Id: this.graphId }]).then(res => {
  246. console.log(res);
  247. this.spinning = false;
  248. if (res.Result == "success") {
  249. this.$message.success('删除成功');
  250. } else {
  251. this.$message.error(res.Message);
  252. }
  253. });
  254. },
  255. //发布
  256. publishBtn() {
  257. this.spinning = true;
  258. publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
  259. this.spinning = false;
  260. if (res.Result == "success") {
  261. this.$message.success(res.Message);
  262. } else {
  263. this.$message.error(res.Message);
  264. }
  265. });
  266. },
  267. // 读取数据
  268. readGroup(floorid) {
  269. const data = {
  270. categoryId: this.categoryId,
  271. projectId: this.projectId,
  272. BuildingID: this.BuildingID, // 建筑ID
  273. FloorID: floorid, // 楼层id
  274. Pub:false //是否获取草稿 //获取草稿
  275. };
  276. return readGroup(data);
  277. },
  278. /**
  279. * @name goToEditer
  280. * @description t跳转editer编辑器
  281. */
  282. goToEditer() {
  283. console.log(this.$cookie);
  284. const FloorID = this.$cookie.get("floorMapId") || "f1";
  285. const categoryId = this.$cookie.get("categoryId");
  286. const { conf } = window.__systemConf,
  287. { editerUrl } = conf;
  288. const data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&fmapID=${this.fmapID}`;
  289. const url = editerUrl + "editer?" + encodeURIComponent(data);
  290. window.open(url, true);
  291. },
  292. // 切换草稿箱楼层
  293. checkFloor(floorid) {
  294. fengmap.loadMap(this.fmapID, resp => {
  295. this.floorList = resp;
  296. fengmap
  297. .loadTheme(
  298. `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
  299. )
  300. .then(response => {
  301. console.log("获取rf成功", response);
  302. this.parserData(floorid);
  303. });
  304. this.view.fitSceneToView();
  305. // 获取
  306. // 获取主题数据
  307. this.readGroup(floorid).then(data => {
  308. this.graphId = data.Data[0].ID;
  309. if (data.Data) {
  310. const parserData = new STopologyParser(null);
  311. parserData.parseData(data.Data[0].Elements);
  312. // 多边形
  313. parserData.zoneLegendList.forEach(t => {
  314. this.scene.addItem(t);
  315. this.scene.Nodes.push(t);
  316. });
  317. // 增加文字
  318. parserData.textMarkerList.forEach(t => {
  319. this.scene.addItem(t);
  320. this.scene.Markers.push(t);
  321. });
  322. // 增加图片
  323. parserData.imageMarkerList.forEach(t => {
  324. this.scene.addItem(t);
  325. this.scene.Markers.push(t);
  326. });
  327. // 增加直线
  328. parserData.lineMarkerList.forEach(t => {
  329. this.scene.addItem(t);
  330. this.scene.Markers.push(t);
  331. });
  332. // 增加图标类图例
  333. parserData.imageLegendList.forEach(t => {
  334. this.scene.addItem(t);
  335. this.scene.Nodes.push(t);
  336. });
  337. // 增加管线类
  338. // 增加图标类图例
  339. parserData.relationList.forEach(t => {
  340. this.scene.addItem(t);
  341. this.scene.Relations.push(t);
  342. });
  343. this.view.fitSceneToView();
  344. }
  345. });
  346. });
  347. }
  348. },
  349. mounted() {
  350. this.canvasWidth = this.$refs.draftsCanvas.offsetWidth - 10;
  351. this.canvasHeight = this.$refs.draftsCanvas.offsetHeight - 10;
  352. const href = window.location.href;
  353. let params = href.split("?")[1];
  354. if (!params) {
  355. // 参数有问题
  356. return false;
  357. }
  358. params = decodeURIComponent(params);
  359. const paramsArr = params.split("&");
  360. const obj = {};
  361. paramsArr.map(item => {
  362. const arr = item.split("=");
  363. obj[arr[0]] = arr[1];
  364. });
  365. console.log("obj", obj);
  366. this.projectId = obj.projectId ? obj.projectId : "1000423";
  367. this.fmapID = obj.fmapID ? obj.fmapID : "1000423_120";
  368. this.init();
  369. this.getTreeData();
  370. }
  371. };
  372. </script>
  373. <style lang="less" scoped>
  374. /deep/ .ant-spin-nested-loading{
  375. height: 100% !important;
  376. .ant-spin-container{
  377. height: 100% !important;
  378. }
  379. }
  380. #drafts {
  381. widows: 100%;
  382. height: 100%;
  383. background: #f7f9fa;
  384. position: relative;
  385. .tit {
  386. width: 100%;
  387. height: 48px;
  388. display: flex;
  389. justify-content: center;
  390. align-items: center;
  391. border-bottom: #e4e5e7 solid 1px;
  392. font-size: 16px;
  393. font-weight: bold;
  394. }
  395. .conent {
  396. width: 100%;
  397. height: calc(100% - 48px);
  398. display: flex;
  399. position: relative;
  400. .left-nav {
  401. width: 224px;
  402. height: 100%;
  403. overflow-y: scroll;
  404. padding: 0 12px;
  405. /deep/ .el-tree {
  406. background: #f7f9fa;
  407. .el-tree-node__content {
  408. height: 38px;
  409. }
  410. /deep/.el-tree-node:focus > .el-tree-node__content {
  411. background-color: #e1f2ff !important;
  412. color: #0091ff !important;
  413. }
  414. }
  415. }
  416. .conent-right {
  417. flex: 1;
  418. height: 100%;
  419. background: #fff;
  420. .conent-tit {
  421. width: 100%;
  422. display: flex;
  423. height: 59px;
  424. border: 1px solid #eff0f1;
  425. align-items: center;
  426. justify-content: space-between;
  427. padding: 0 16px 0 16px;
  428. box-sizing: border-box;
  429. .tit-left {
  430. font-size: 16px;
  431. font-weight: bold;
  432. color: rgba(31, 35, 41, 1);
  433. }
  434. .tit-right {
  435. width: 246px;
  436. display: flex;
  437. justify-content: space-between;
  438. margin-left: auto;
  439. }
  440. }
  441. .concent-bottom {
  442. height: calc(100% - 61px);
  443. display: flex;
  444. position: relative;
  445. .map {
  446. flex: 1;
  447. position: relative;
  448. height: 100%;
  449. /*height: calc(100% - 61px);*/
  450. /*background: red;*/
  451. }
  452. .legend {
  453. position: absolute;
  454. right: 0;
  455. top: 0;
  456. width: 200px;
  457. border-left: 1px solid #eff0f1;
  458. height: 100%;
  459. overflow-y: scroll;
  460. }
  461. .legend-btn {
  462. position: absolute;
  463. right: 0px;
  464. top: 9px;
  465. width: 10px;
  466. height: 24px;
  467. background: rgba(228, 229, 231, 1);
  468. display: flex;
  469. justify-content: center;
  470. align-items: center;
  471. cursor: pointer;
  472. }
  473. .legend-btn-close {
  474. right: 200px;
  475. }
  476. }
  477. }
  478. }
  479. }
  480. #fengMap {
  481. position: absolute;
  482. width: 100px;
  483. height: 100px;
  484. z-index: -1;
  485. }
  486. .canvas-container {
  487. width: 100%;
  488. height: 100%;
  489. }
  490. </style>