drafts.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842
  1. <template>
  2. <div id="drafts">
  3. <div class="tit">草稿箱</div>
  4. <div class="conent">
  5. <div class="left-nav">
  6. <Tree :data="treeData" @change="change" v-if="treeData.length"></Tree>
  7. <div v-else style="text-align: center;margin-top: 20px;">暂无数据</div>
  8. <!-- <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" node-key="id" :expand-on-click-node="false"-->
  9. <!-- :current-node-key="currentNodekey"-->
  10. <!-- :default-expanded-keys="expandedkeys">-->
  11. <!-- <span class="span-ellipsis" slot-scope="{ node, data }">-->
  12. <!-- <span :title="node.label">{{ node.label }}</span>-->
  13. <!-- </span>-->
  14. <!-- </el-tree>-->
  15. </div>
  16. <div class="conent-right">
  17. <div class="conent-tit">
  18. <div class="tit-left" v-if="floorName">{{systemName}}-{{floorName}}</div>
  19. <div class="tit-right">
  20. <a-button @click="modalStatusTip=!modalStatusTip;grouptype='checked';grouptype1='uncheck';" :disabled="!floorName">删除</a-button>
  21. <!-- <a-button @click="deleteBtn" :disabled="!floorName">删除</a-button>-->
  22. <a-button @click="publishBtn" :disabled="!floorName">发布</a-button>
  23. <a-button type="primary" @click="goToEditer" :disabled="!floorName">编辑</a-button>
  24. </div>
  25. </div>
  26. <div class="concent-bottom">
  27. <div class="map">
  28. <div class="canvas-container" ref="draftsCanvas">
  29. <div id="fengMap"></div>
  30. <canvas
  31. id="canvas"
  32. :width="canvasWidth"
  33. :height="canvasHeight"
  34. ref="canvas"
  35. tabindex="0"
  36. ></canvas>
  37. </div>
  38. </div>
  39. <div v-show="!legend" class="legend-btn" @click="legend = !legend">
  40. <a-icon type="left" style="color: #8D9399;font-size: 10px" />
  41. </div>
  42. <div v-show="legend" class="legend-btn legend-btn-close" @click="legend = !legend">
  43. <a-icon type="right" style="color: #8D9399;font-size: 10px" />
  44. </div>
  45. <div class="legend" v-if="legend">
  46. <div
  47. style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
  48. >可能需要补充的图例</div>
  49. <a-table
  50. v-loading="legendLoading"
  51. :columns="columns"
  52. :rowKey="(record,index)=>{return index}"
  53. :data-source="legendData"
  54. size="middle"
  55. :pagination="false"
  56. >
  57. <div slot="Url" slot-scope="text,record">
  58. <img
  59. v-if="record.Url"
  60. style=" width: 20px;height: 22px;"
  61. :src="'/serve/topology-wanda/Picture/query/'+ record.Url"
  62. alt
  63. />
  64. <span v-else>---</span>
  65. </div>
  66. <span></span>
  67. </a-table>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <Modal
  73. :show="modalStatusTip"
  74. :title="categoryId=='XFBFYCFL'||categoryId=='FZQZL'?'确定要删除吗?':'确定要删除此草稿吗?'"
  75. mode="tip"
  76. type="error"
  77. @close="modalClose"
  78. >
  79. <template #content>
  80. <div style="font-size: 15px; padding-left: 16px;padding-top: 16px;" v-if="categoryId=='XFBFYCFL'||categoryId=='FZQZL'" >
  81. <Radio :checked="grouptype" @change="grouptype='checked';grouptype1='uncheck'" >仅删除草稿</Radio>
  82. <br>
  83. <Radio :checked="grouptype1" @change="grouptype1='checked';grouptype='uncheck'" >删除草稿和已发布的原理图</Radio>
  84. <!-- <radio-group v-if="categoryId=='XFBFYCFL'||categoryId=='FZQZL'" :group-data.sync="groupData" :type="grouptype" @change="handleChange" />-->
  85. </div>
  86. </template>
  87. <template #handle>
  88. <Button @click="modalClose" type="default">取消</Button>
  89. <Button @click="modalConfirm" type="error">确定</Button>
  90. </template>
  91. </Modal>
  92. </div>
  93. </template>
  94. <script>
  95. import Tree from "./../components/Tree/Tree.vue";
  96. import { SFengParser, ProjectRf } from "@saga-web/feng-map";
  97. import { SFloorParser, SBoardItem } from "@saga-web/big";
  98. import { FloorView } from "./../lib/FloorView";
  99. import { EditScence } from "@/components/mapClass/EditScence";
  100. import bus from "@/bus";
  101. import {
  102. readGroup,
  103. queryDraftGroup,
  104. queryStatistic,
  105. deleteGraph,
  106. publishGraph,
  107. deleteByCategory,
  108. graphQuery
  109. } from "@/api/editer.js";
  110. import { STopologyParser } from "./../lib/parsers/STopologyParser";
  111. import { uuid } from "@/components/mapClass/until";
  112. import { SImageItem, SImageShowType } from "@saga-web/graph/lib";
  113. import store from "../store";
  114. import { Loading } from "element-ui";
  115. import { getUrlMsg } from "@/components/urlMsg.js";
  116. let fengmap = null;
  117. export default {
  118. components: { Tree },
  119. data() {
  120. return {
  121. modalStatusTip:false,
  122. grouptype:'checked',
  123. grouptype1:'uncheck',
  124. treeData: [],
  125. columns: [
  126. {
  127. title: "名称", // 列的名称
  128. dataIndex: "Name", // 列的标识
  129. scopedSlots: { customRender: "Name" }
  130. },
  131. {
  132. title: "图例", // 列的名称
  133. dataIndex: "Url", // 列的标识
  134. scopedSlots: { customRender: "Url" }
  135. }
  136. ],
  137. legendData: [],
  138. legend: true,
  139. canvasWidth: 700,
  140. canvasHeight: 600,
  141. view: null,
  142. urlMsg: null,
  143. floorList: {},
  144. mapServerURL: "http://map.wanda.cn/editor",
  145. mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
  146. key: "23f30a832a862c58637a4aadbf50a566",
  147. appName: "万达可视化系统",
  148. defaultProps: {
  149. children: "Category",
  150. label: "Code"
  151. },
  152. projectId: "", //项目id
  153. fmapID: "", //蜂鸟地图id
  154. graphId: "", //绘制生成得图id
  155. legendLoading: false,
  156. systemName: "",
  157. floorName: "",
  158. floorId: "", //楼层id
  159. BuildingID: "1", // 建筑id
  160. categoryId: "", //系统类id
  161. currentNodekey: "", //默认选中的节点树
  162. expandedkeys: [], //默认展开的节点树
  163. count: 0, // 顶楼为多张图时计数器
  164. };
  165. },
  166. methods: {
  167. // handleNodeClick(data, node) {
  168. // this.legendData = [];
  169. // this.systemName = "";
  170. // this.floorName = "";
  171. // if (data.Gname) {
  172. // this.systemName = node.parent.data.Gcode;
  173. // this.floorName = data.Gcode;
  174. // this.floorId = data.Gname;
  175. // this.categoryId = node.parent.data.Id;
  176. // this.getLegend();
  177. // this.checkFloor(data.Gname);
  178. // }
  179. // },
  180. //初始化获取蜂鸟所有底图数据
  181. init() {
  182. const loadings = Loading.service({
  183. lock: true,
  184. text: "Loading",
  185. spinner: "el-icon-loading",
  186. background: "rgba(0, 0, 0, 0.7)"
  187. });
  188. // const loadings = this.$loading({type: 'global'});
  189. document.getElementById(`canvas`).focus();
  190. if(this.fmapID.includes('null')){
  191. loadings.close();
  192. this.getTreeData();
  193. }
  194. fengmap = new SFengParser(
  195. "fengMap",
  196. this.mapServerURL + "/fmap/" + this.fmapID,
  197. this.key,
  198. this.appName,
  199. null,
  200. this.mapthemeUrl
  201. );
  202. fengmap.loadMap(this.fmapID, resp => {
  203. this.floorList = resp;
  204. fengmap
  205. .loadTheme(
  206. `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
  207. )
  208. .then(response => {
  209. // 获取楼层数据数据
  210. loadings.close();
  211. this.getTreeData();
  212. });
  213. });
  214. },
  215. clearGraphy() {
  216. if (this.view) {
  217. this.view.scene = null;
  218. return;
  219. }
  220. this.view = new FloorView("canvas");
  221. document.getElementById("canvas").focus();
  222. },
  223. parserData(floor) {
  224. if (floor == "g80") {
  225. // 屋顶
  226. if (fengmap.frImg) {
  227. const pj = this.fmapID.split('_')[0]
  228. if (!ProjectRf[pj]){
  229. const imgItem = new SImageItem(
  230. null,
  231. `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`
  232. );
  233. imgItem.showType = SImageShowType.AutoFit;
  234. imgItem.connect("imgLoadOver", this, () => {
  235. this.view.fitSceneToView();
  236. });
  237. this.scene.addItem(imgItem);
  238. this.loading = false;
  239. this.isQuerying = false;
  240. } else {
  241. // 多张图
  242. try {
  243. // 初始化0
  244. this.count = 0;
  245. ProjectRf[pj].forEach(t => {
  246. const item = new SImageItem(
  247. null,
  248. `${this.mapServerURL}/webtheme/${this.fmapID}/${t.name}`
  249. );
  250. item.width = t.width
  251. item.height = t.height
  252. item.moveTo(t.x, t.y)
  253. item.connect("imgLoadOver", this, () => {
  254. this.countRf(ProjectRf[pj].length);
  255. });
  256. this.scene.addItem(item);
  257. })
  258. // this.view.scene = this.scene;
  259. } catch(e) {
  260. console.log(e);
  261. }
  262. }
  263. } else {
  264. this.readBaseMap(floor)
  265. }
  266. } else {
  267. if (this.floorList[floor]) {
  268. this.readBaseMap(floor)
  269. } else {
  270. console.log("楼层不正确");
  271. }
  272. }
  273. },
  274. // 解析楼地板
  275. loadBoard(floor){
  276. fengmap.loadFloor(floor, res => {
  277. const zone = new SBoardItem(null, res)
  278. this.scene.addItem(zone);
  279. })
  280. },
  281. // 顶楼为多张图时计数器
  282. countRf(len) {
  283. this.count++
  284. console.log(len == this.count);
  285. if (len == this.count) {
  286. // this.readGraph();
  287. this.view.fitSceneToView();
  288. } else {
  289. console.log('所有图片未加载完成');
  290. }
  291. },
  292. readBaseMap(floor){
  293. this.loadBoard(this.floorList[floor])
  294. fengmap.parseData(this.floorList[floor], res => {
  295. if (res.err) {
  296. console.log(res.err);
  297. return;
  298. }
  299. this.fParser = new SFloorParser(null);
  300. this.fParser.parseData(res);
  301. this.fParser.spaceList.forEach(t => {
  302. t.selectable = true;
  303. this.scene.addItem(t);
  304. });
  305. this.fParser.wallList.forEach(t => this.scene.addItem(t));
  306. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  307. this.fParser.doorList.forEach(t => this.scene.addItem(t));
  308. this.fParser.columnList.forEach(t => this.scene.addItem(t));
  309. this.fParser.casementList.forEach(t => this.scene.addItem(t));
  310. this.view.scene = this.scene;
  311. this.view.fitSceneToView();
  312. this.loading = false;
  313. this.isQuerying = false;
  314. console.log("success");
  315. });
  316. },
  317. change(id) {
  318. console.log(id);
  319. const data = this.treeData;
  320. (function recursion(newObj) {
  321. newObj.map(function(item, index) {
  322. item.open = false;
  323. item.checked = false;
  324. if (item.Category && item.Category.length > 0) {
  325. item.children = item.Category;
  326. recursion(item.Category);
  327. }
  328. });
  329. })(data);
  330. let items = null;
  331. data.forEach(ele => {
  332. ele.children.forEach(item => {
  333. ele.open = true;
  334. if (item.children) {
  335. item.children.forEach(item1 => {
  336. item.open = true;
  337. if (item1.id == id.id) {
  338. items = item;
  339. item1.checked = "checked";
  340. }
  341. });
  342. } else {
  343. if (item.id == id.id) {
  344. items = ele;
  345. ele.open = true;
  346. item.checked = "checked";
  347. }
  348. }
  349. });
  350. });
  351. this.legendData = [];
  352. this.systemName = "";
  353. this.floorName = "";
  354. this.seq =''
  355. this.systemName = items.Gcode;
  356. this.floorName = id.Code;
  357. this.floorId = id.Gname;
  358. this.categoryId = items.Id;
  359. this.seq = id.Seq;
  360. // this.getLegend();
  361. this.checkFloor(id.Gname);
  362. console.log(items);
  363. },
  364. getTreeData() {
  365. const loadings = Loading.service({
  366. lock: true,
  367. text: "Loading",
  368. spinner: "el-icon-loading",
  369. background: "rgba(0, 0, 0, 0.7)"
  370. });
  371. queryDraftGroup({ projectId: this.projectId })
  372. .then(res => {
  373. console.log(res);
  374. loadings.close();
  375. if (res.Result == "success") {
  376. const data = res.Data;
  377. this.systemName = "";
  378. this.floorName = "";
  379. this.floorId = "";
  380. this.seq = "";
  381. this.categoryId = "";
  382. if (data.length) {
  383. (function recursion(newObj) {
  384. newObj.map(function(item, index) {
  385. item.id = item.Id || item.Gname;
  386. item.name = item.Code;
  387. item.checked = false;
  388. if (item.Category && item.Category.length > 0) {
  389. item.children = item.Category;
  390. item.name=item.Gcode;
  391. item.open = false;
  392. recursion(item.Category);
  393. }
  394. });
  395. })(data);
  396. data.forEach(ele => {
  397. ele.children.forEach(item => {
  398. ele.open = true;
  399. if (item.children) {
  400. item.open = true;
  401. item.children.forEach(item1 => {
  402. item1.id = item.Id + item1.Gname;
  403. });
  404. } else {
  405. item.id = ele.Id + item.Gname;
  406. }
  407. });
  408. });
  409. this.treeData = data;
  410. if (this.treeData[0].children[0].children) {
  411. this.treeData[0].open = true;
  412. this.treeData[0].children[0].open = true;
  413. this.treeData[0].children[0].children[0].checked = "checked";
  414. this.systemName = this.treeData[0].children[0].Gcode;
  415. this.floorName = this.treeData[0].children[0].children[0].Code;
  416. this.floorId = this.treeData[0].children[0].children[0].Gname;
  417. this.categoryId = this.treeData[0].children[0].Id;
  418. this.seq = this.treeData[0].children[0].Seq;
  419. // this.getLegend();
  420. this.checkFloor(this.treeData[0].children[0].children[0].Gname);
  421. } else {
  422. this.treeData[0].open = true;
  423. this.treeData[0].children[0].checked = "checked";
  424. this.systemName = this.treeData[0].Gcode;
  425. this.floorName = this.treeData[0].children[0].Code;
  426. this.floorId = this.treeData[0].children[0].Gname;
  427. this.categoryId = this.treeData[0].Id;
  428. this.seq = this.treeData[0].children[0].Seq;
  429. // this.getLegend();
  430. this.checkFloor(this.treeData[0].children[0].Gname);
  431. }
  432. } else {
  433. this.treeData = data;
  434. }
  435. } else {
  436. this.treeData = [];
  437. this.$message.error("获取楼层结构失败");
  438. }
  439. // 如果没有楼层则底图清空
  440. if (this.treeData.length == 0) {
  441. this.checkFloor("");
  442. }
  443. console.log(' this.treeData', this.treeData)
  444. })
  445. .catch(() => {
  446. loadings.close();
  447. this.$message.error("请求失败");
  448. });
  449. },
  450. //获取补充图例
  451. getLegend() {
  452. this.legendLoading = true;
  453. this.legendData = [];
  454. queryStatistic({
  455. projectId: this.projectId,
  456. graphId: this.graphId,
  457. categoryId: this.categoryId
  458. }).then(res => {
  459. this.legendLoading = false;
  460. if (res.data.Result == "success") {
  461. const data = res.data.Data;
  462. data.map(item => {
  463. this.legendData.push(item);
  464. });
  465. } else {
  466. this.legendData = [];
  467. this.$message.error("获取楼层结构补充图例失败");
  468. }
  469. });
  470. },
  471. modalClose() {
  472. this.modalStatusTip = false;
  473. },
  474. modalConfirm() {
  475. this.deleteBtn();
  476. this.modalStatusTip = false;
  477. },
  478. //删除
  479. deleteBtn() {
  480. if(this.categoryId=='XFBFYCFL'||this.categoryId=='FZQZL'){
  481. if(this.grouptype=='checked'){
  482. this.deleteGraphMap();
  483. }else{
  484. this.deleteByCategoryMap();
  485. }
  486. }else{
  487. this.deleteGraphMap()
  488. }
  489. },
  490. //原理图删除
  491. deleteByCategoryMap(){
  492. const loadings = Loading.service({
  493. lock: true,
  494. text: "Loading",
  495. spinner: "el-icon-loading",
  496. background: "rgba(0, 0, 0, 0.7)"
  497. });
  498. const params = {
  499. "BuildingID": this.BuildingID,
  500. "CategoryID": this.categoryId,
  501. "FloorID": this.floorId,
  502. "ProjectID": this.projectId
  503. }
  504. deleteByCategory(params).then(res=>{
  505. loadings.close();
  506. if (res.Result == "success") {
  507. this.$message.success("删除成功");
  508. this.getTreeData();
  509. // this.init();
  510. this.legendData = [];
  511. } else {
  512. this.$message.error(res.Message);
  513. }
  514. }).catch(()=>{
  515. loadings.close();
  516. });
  517. },
  518. //正常删除
  519. deleteGraphMap(){
  520. const loadings = Loading.service({
  521. lock: true,
  522. text: "Loading",
  523. spinner: "el-icon-loading",
  524. background: "rgba(0, 0, 0, 0.7)"
  525. });
  526. deleteGraph([{ Id: this.graphId }]).then(res => {
  527. console.log(res);
  528. loadings.close();
  529. if (res.Result == "success") {
  530. this.$message.success("删除成功");
  531. this.getTreeData();
  532. // this.init();
  533. this.legendData = [];
  534. } else {
  535. this.$message.error(res.Message);
  536. }
  537. }).catch(()=>{
  538. loadings.close();
  539. });
  540. },
  541. //发布
  542. publishBtn() {
  543. const loadings = Loading.service({
  544. lock: true,
  545. text: "Loading",
  546. spinner: "el-icon-loading",
  547. background: "rgba(0, 0, 0, 0.7)"
  548. });
  549. console.log(this.floorId);
  550. const data = {
  551. BuildingID: this.BuildingID,
  552. CategoryID: this.categoryId,
  553. FloorID: this.floorId,
  554. GraphId: this.graphId,
  555. ProjectID: this.projectId,
  556. Pub: false,
  557. PubUser: ""
  558. };
  559. publishGraph(data).then(res => {
  560. loadings.close();
  561. if (res.Result == "success") {
  562. this.$message.success("发布成功");
  563. this.getTreeData();
  564. this.legendData = [];
  565. } else {
  566. this.$message.error(res.Message);
  567. }
  568. });
  569. },
  570. // 获取图最大最小值
  571. getGraphDetail(){
  572. const data = {
  573. Filters:`categoryId='${this.categoryId}';projectId='${this.projectId}';BuildingID='${this.BuildingID}';FloorID='${this.floorId}'`
  574. };
  575. return graphQuery(data);
  576. },
  577. // 读取数据
  578. readGroup(floorid) {
  579. const data = {
  580. categoryId: this.categoryId,
  581. projectId: this.projectId,
  582. BuildingID: this.BuildingID, // 建筑ID
  583. FloorID: floorid, // 楼层id
  584. Pub: false
  585. };
  586. return readGroup(data);
  587. },
  588. /**
  589. * @name goToEditer
  590. * @description t跳转editer编辑器
  591. */
  592. goToEditer() {
  593. setTimeout(() => {
  594. /* const token = this.$store.getters["token"];
  595. const data = `categoryId=${this.categoryId}&projectId=${this.projectId}&BuildingID=1&FloorID=${this.floorId}&FloorName=${this.floorName}&fmapID=${this.fmapID}&token=${token}`;
  596. const url =
  597. window.location.origin +
  598. "/wandaEditer/editer?" +
  599. encodeURIComponent(data);
  600. window.open(url, true); */
  601. // 发布成功跳转草稿箱
  602. const token = this.$store.getters["token"];
  603. this.$router.push({
  604. path: "editer",
  605. query: {
  606. categoryId: this.categoryId,
  607. seq:this.seq,
  608. projectId: this.projectId,
  609. BuildingID: 1,
  610. FloorName: this.floorName,
  611. FloorID: this.floorId,
  612. fmapID: this.fmapID,
  613. token:token
  614. }
  615. });
  616. }, 1000);
  617. },
  618. // 切换草稿箱楼层
  619. checkFloor(floorid) {
  620. this.scene = new EditScence();
  621. this.scene.isEditStatus = false;
  622. this.clearGraphy();
  623. const loadings = Loading.service({
  624. lock: true,
  625. text: "Loading",
  626. spinner: "el-icon-loading",
  627. background: "rgba(0, 0, 0, 0.7)"
  628. });
  629. if(!floorid){
  630. loadings.close();
  631. this.view.fitSceneToView();
  632. return
  633. }
  634. setTimeout(() => {
  635. this.view.scene = this.scene;
  636. this.getGraphDetail().then(res => {
  637. if (res.Content.length == 1) {
  638. const data = res.Content[0];
  639. if (data.MaxY && data.MinX) {
  640. fengmap.maxY = data.MaxY;
  641. fengmap.minX = data.MinX;
  642. }
  643. }
  644. this.parserData(floorid);
  645. });
  646. this.readGroup(floorid).then(data => {
  647. if (data.Result == "success") {
  648. this.graphId = data.Data[0].ID;
  649. if (data.Data) {
  650. loadings.close();
  651. const parserData = new STopologyParser(null);
  652. parserData.parseData(data.Data[0].Elements);
  653. // 多边形
  654. parserData.zoneLegendList.forEach(t => {
  655. this.scene.addItem(t);
  656. this.scene.Nodes.push(t);
  657. });
  658. // 增加文字
  659. parserData.textMarkerList.forEach(t => {
  660. this.scene.addItem(t);
  661. this.scene.Markers.push(t);
  662. });
  663. // 增加图片
  664. parserData.imageMarkerList.forEach(t => {
  665. this.scene.addItem(t);
  666. this.scene.Markers.push(t);
  667. });
  668. // 增加直线
  669. parserData.lineMarkerList.forEach(t => {
  670. this.scene.addItem(t);
  671. this.scene.Markers.push(t);
  672. });
  673. // 增加图标类图例
  674. parserData.imageLegendList.forEach(t => {
  675. this.scene.addItem(t);
  676. this.scene.Nodes.push(t);
  677. });
  678. // 增加管线类
  679. // 增加图标类图例
  680. parserData.relationList.forEach(t => {
  681. this.scene.addItem(t);
  682. this.scene.Relations.push(t);
  683. });
  684. this.view.fitSceneToView();
  685. this.getLegend();
  686. }
  687. } else {
  688. loadings.close();
  689. }
  690. }).catch(()=>{
  691. loadings.close();
  692. });
  693. }, 100);
  694. }
  695. },
  696. mounted() {
  697. this.canvasWidth = this.$refs.draftsCanvas.offsetWidth - 10;
  698. this.canvasHeight = this.$refs.draftsCanvas.offsetHeight - 10;
  699. const href = window.location.href;
  700. let params = href.split("?")[1];
  701. if (!params) {
  702. // 参数有问题
  703. return false;
  704. }
  705. params = decodeURIComponent(params);
  706. const paramsArr = params.split("&");
  707. const obj = {};
  708. paramsArr.map(item => {
  709. const arr = item.split("=");
  710. obj[arr[0]] = arr[1];
  711. });
  712. console.log("obj", obj);
  713. this.projectId = obj.projectId ? obj.projectId : "1000423";
  714. this.fmapID = obj.fmapID ? obj.fmapID : "1000423_120";
  715. this.init();
  716. }
  717. };
  718. </script>
  719. <style lang="less" scoped>
  720. #drafts {
  721. widows: 100%;
  722. height: 100%;
  723. background: #f7f9fa;
  724. position: relative;
  725. .tit {
  726. width: 100%;
  727. height: 48px;
  728. display: flex;
  729. justify-content: center;
  730. align-items: center;
  731. border-bottom: #e4e5e7 solid 1px;
  732. font-size: 16px;
  733. font-weight: bold;
  734. }
  735. .conent {
  736. width: 100%;
  737. height: calc(100% - 48px);
  738. display: flex;
  739. position: relative;
  740. .left-nav {
  741. width: 224px;
  742. height: 100%;
  743. overflow-y: scroll;
  744. padding: 0 12px;
  745. /deep/ .el-tree {
  746. background: #f7f9fa;
  747. .el-tree-node__content {
  748. height: 38px;
  749. }
  750. /deep/.el-tree-node:focus > .el-tree-node__content {
  751. background-color: #e1f2ff !important;
  752. color: #0091ff !important;
  753. }
  754. }
  755. .span-ellipsis {
  756. width: 100%;
  757. overflow: hidden;
  758. white-space: nowrap;
  759. text-overflow: ellipsis;
  760. }
  761. }
  762. .conent-right {
  763. flex: 1;
  764. height: 100%;
  765. background: #fff;
  766. .conent-tit {
  767. width: 100%;
  768. display: flex;
  769. height: 59px;
  770. border: 1px solid #eff0f1;
  771. align-items: center;
  772. justify-content: space-between;
  773. padding: 0 16px 0 16px;
  774. box-sizing: border-box;
  775. .tit-left {
  776. font-size: 16px;
  777. font-weight: bold;
  778. color: rgba(31, 35, 41, 1);
  779. }
  780. .tit-right {
  781. width: 198px;
  782. display: flex;
  783. justify-content: space-between;
  784. margin-left: auto;
  785. }
  786. }
  787. .concent-bottom {
  788. height: calc(100% - 61px);
  789. display: flex;
  790. position: relative;
  791. .map {
  792. flex: 1;
  793. position: relative;
  794. height: 100%;
  795. /*height: calc(100% - 61px);*/
  796. /*background: red;*/
  797. }
  798. .legend {
  799. position: absolute;
  800. right: 0;
  801. top: 0;
  802. width: 200px;
  803. border-left: 1px solid #eff0f1;
  804. background-color: #ffffff;
  805. height: 100%;
  806. overflow-y: scroll;
  807. }
  808. .legend-btn {
  809. position: absolute;
  810. right: 0px;
  811. top: 9px;
  812. width: 10px;
  813. height: 24px;
  814. background: rgba(228, 229, 231, 1);
  815. display: flex;
  816. justify-content: center;
  817. align-items: center;
  818. cursor: pointer;
  819. }
  820. .legend-btn-close {
  821. right: 200px;
  822. }
  823. }
  824. }
  825. }
  826. }
  827. #fengMap {
  828. position: absolute;
  829. width: 100px;
  830. height: 100px;
  831. z-index: -1;
  832. }
  833. .canvas-container {
  834. width: 100%;
  835. height: 100%;
  836. }
  837. </style>