drafts.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766
  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 } from "@saga-web/feng-map";
  97. import { SFloorParser } 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. } from "@/api/editer.js";
  109. import { STopologyParser } from "./../lib/parsers/STopologyParser";
  110. import { uuid } from "@/components/mapClass/until";
  111. import { SImageItem } from "@saga-web/graph/lib";
  112. import store from "../store";
  113. import { Loading } from "element-ui";
  114. import { getUrlMsg } from "@/components/urlMsg.js";
  115. let fengmap = null;
  116. export default {
  117. components: { Tree },
  118. data() {
  119. return {
  120. modalStatusTip:false,
  121. grouptype:'checked',
  122. grouptype1:'uncheck',
  123. treeData: [],
  124. columns: [
  125. {
  126. title: "名称", // 列的名称
  127. dataIndex: "Name", // 列的标识
  128. scopedSlots: { customRender: "Name" }
  129. },
  130. {
  131. title: "图例", // 列的名称
  132. dataIndex: "Url", // 列的标识
  133. scopedSlots: { customRender: "Url" }
  134. }
  135. ],
  136. legendData: [],
  137. legend: true,
  138. canvasWidth: 700,
  139. canvasHeight: 600,
  140. view: null,
  141. urlMsg: null,
  142. floorList: {},
  143. mapServerURL: "http://map.wanda.cn/editor",
  144. mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
  145. key: "23f30a832a862c58637a4aadbf50a566",
  146. appName: "万达可视化系统",
  147. defaultProps: {
  148. children: "Category",
  149. label: "Code"
  150. },
  151. projectId: "", //项目id
  152. fmapID: "", //蜂鸟地图id
  153. graphId: "", //绘制生成得图id
  154. legendLoading: false,
  155. systemName: "",
  156. floorName: "",
  157. floorId: "", //楼层id
  158. BuildingID: "1", // 建筑id
  159. categoryId: "", //系统类id
  160. currentNodekey: "", //默认选中的节点树
  161. expandedkeys: [] //默认展开的节点树
  162. };
  163. },
  164. methods: {
  165. // handleNodeClick(data, node) {
  166. // this.legendData = [];
  167. // this.systemName = "";
  168. // this.floorName = "";
  169. // if (data.Gname) {
  170. // this.systemName = node.parent.data.Gcode;
  171. // this.floorName = data.Gcode;
  172. // this.floorId = data.Gname;
  173. // this.categoryId = node.parent.data.Id;
  174. // this.getLegend();
  175. // this.checkFloor(data.Gname);
  176. // }
  177. // },
  178. //初始化获取蜂鸟所有底图数据
  179. init() {
  180. const loadings = Loading.service({
  181. lock: true,
  182. text: "Loading",
  183. spinner: "el-icon-loading",
  184. background: "rgba(0, 0, 0, 0.7)"
  185. });
  186. // const loadings = this.$loading({type: 'global'});
  187. document.getElementById(`canvas`).focus();
  188. if(this.fmapID.includes('null')){
  189. loadings.close();
  190. this.getTreeData();
  191. }
  192. fengmap = new SFengParser(
  193. "fengMap",
  194. this.mapServerURL + "/fmap/" + this.fmapID,
  195. this.key,
  196. this.appName,
  197. null,
  198. this.mapthemeUrl
  199. );
  200. fengmap.loadMap(this.fmapID, resp => {
  201. this.floorList = resp;
  202. fengmap
  203. .loadTheme(
  204. `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
  205. )
  206. .then(response => {
  207. // 获取楼层数据数据
  208. loadings.close();
  209. this.getTreeData();
  210. });
  211. });
  212. },
  213. clearGraphy() {
  214. if (this.view) {
  215. this.view.scene = null;
  216. return;
  217. }
  218. this.view = new FloorView("canvas");
  219. document.getElementById("canvas").focus();
  220. },
  221. parserData(floor) {
  222. if (floor == "g80") {
  223. // 屋顶
  224. if (fengmap.frImg) {
  225. const imgItem = new SImageItem(
  226. null,
  227. `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`
  228. );
  229. this.scene.addItem(imgItem);
  230. this.view.fitSceneToView();
  231. this.loading = false;
  232. this.isQuerying = false;
  233. }
  234. } else {
  235. if (this.floorList[floor]) {
  236. fengmap.parseData(this.floorList[floor], res => {
  237. if (res.err) {
  238. console.log(res.err);
  239. return;
  240. }
  241. this.fParser = new SFloorParser(null);
  242. this.fParser.parseData(res);
  243. this.fParser.spaceList.forEach(t => {
  244. t.selectable = true;
  245. this.scene.addItem(t);
  246. });
  247. this.fParser.wallList.forEach(t => this.scene.addItem(t));
  248. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  249. this.fParser.doorList.forEach(t => this.scene.addItem(t));
  250. this.fParser.columnList.forEach(t => this.scene.addItem(t));
  251. this.fParser.casementList.forEach(t => this.scene.addItem(t));
  252. this.view.scene = this.scene;
  253. this.view.fitSceneToView();
  254. this.loading = false;
  255. this.isQuerying = false;
  256. console.log("success");
  257. });
  258. } else {
  259. console.log("楼层不正确");
  260. }
  261. }
  262. },
  263. change(id) {
  264. console.log(id);
  265. const data = this.treeData;
  266. (function recursion(newObj) {
  267. newObj.map(function(item, index) {
  268. item.open = false;
  269. item.checked = false;
  270. if (item.Category && item.Category.length > 0) {
  271. item.children = item.Category;
  272. recursion(item.Category);
  273. }
  274. });
  275. })(data);
  276. let items = null;
  277. data.forEach(ele => {
  278. ele.children.forEach(item => {
  279. ele.open = true;
  280. if (item.children) {
  281. item.children.forEach(item1 => {
  282. item.open = true;
  283. if (item1.id == id.id) {
  284. items = item;
  285. item1.checked = "checked";
  286. }
  287. });
  288. } else {
  289. if (item.id == id.id) {
  290. items = ele;
  291. ele.open = true;
  292. item.checked = "checked";
  293. }
  294. }
  295. });
  296. });
  297. this.legendData = [];
  298. this.systemName = "";
  299. this.floorName = "";
  300. this.systemName = items.Gcode;
  301. this.floorName = id.Code;
  302. this.floorId = id.Gname;
  303. this.categoryId = items.Id;
  304. // this.getLegend();
  305. this.checkFloor(id.Gname);
  306. console.log(items);
  307. },
  308. getTreeData() {
  309. const loadings = Loading.service({
  310. lock: true,
  311. text: "Loading",
  312. spinner: "el-icon-loading",
  313. background: "rgba(0, 0, 0, 0.7)"
  314. });
  315. queryDraftGroup({ projectId: this.projectId })
  316. .then(res => {
  317. console.log(res);
  318. loadings.close();
  319. if (res.Result == "success") {
  320. const data = res.Data;
  321. this.systemName = "";
  322. this.floorName = "";
  323. this.floorId = "";
  324. this.categoryId = "";
  325. if (data.length) {
  326. (function recursion(newObj) {
  327. newObj.map(function(item, index) {
  328. item.id = item.Id || item.Gname;
  329. item.name = item.Code;
  330. item.checked = false;
  331. if (item.Category && item.Category.length > 0) {
  332. item.children = item.Category;
  333. item.name=item.Gcode;
  334. item.open = false;
  335. recursion(item.Category);
  336. }
  337. });
  338. })(data);
  339. data.forEach(ele => {
  340. ele.children.forEach(item => {
  341. ele.open = true;
  342. if (item.children) {
  343. item.open = true;
  344. item.children.forEach(item1 => {
  345. item1.id = item.Id + item1.Gname;
  346. });
  347. } else {
  348. item.id = ele.Id + item.Gname;
  349. }
  350. });
  351. });
  352. this.treeData = data;
  353. if (this.treeData[0].children[0].children) {
  354. this.treeData[0].open = true;
  355. this.treeData[0].children[0].open = true;
  356. this.treeData[0].children[0].children[0].checked = "checked";
  357. this.systemName = this.treeData[0].children[0].Gcode;
  358. this.floorName = this.treeData[0].children[0].children[0].Code;
  359. this.floorId = this.treeData[0].children[0].children[0].Gname;
  360. this.categoryId = this.treeData[0].children[0].Id;
  361. // this.getLegend();
  362. this.checkFloor(this.treeData[0].children[0].children[0].Gname);
  363. } else {
  364. this.treeData[0].open = true;
  365. this.treeData[0].children[0].checked = "checked";
  366. this.systemName = this.treeData[0].Gcode;
  367. this.floorName = this.treeData[0].children[0].Code;
  368. this.floorId = this.treeData[0].children[0].Gname;
  369. this.categoryId = this.treeData[0].Id;
  370. // this.getLegend();
  371. this.checkFloor(this.treeData[0].children[0].Gname);
  372. }
  373. } else {
  374. this.treeData = data;
  375. }
  376. } else {
  377. this.treeData = [];
  378. this.$message.error("获取楼层结构失败");
  379. }
  380. // 如果没有楼层则底图清空
  381. if (this.treeData.length == 0) {
  382. this.checkFloor("");
  383. }
  384. })
  385. .catch(() => {
  386. loadings.close();
  387. this.$message.error("请求失败");
  388. });
  389. },
  390. //获取补充图例
  391. getLegend() {
  392. this.legendLoading = true;
  393. this.legendData = [];
  394. queryStatistic({
  395. projectId: this.projectId,
  396. graphId: this.graphId,
  397. categoryId: this.categoryId
  398. }).then(res => {
  399. console.log(res);
  400. this.legendLoading = false;
  401. if (res.data.Result == "success") {
  402. const data = res.data.Data;
  403. data.map(item => {
  404. this.legendData.push(item);
  405. });
  406. } else {
  407. this.legendData = [];
  408. this.$message.error("获取楼层结构补充图例失败");
  409. }
  410. });
  411. },
  412. modalClose() {
  413. this.modalStatusTip = false;
  414. },
  415. modalConfirm() {
  416. this.deleteBtn();
  417. this.modalStatusTip = false;
  418. },
  419. //删除
  420. deleteBtn() {
  421. if(this.categoryId=='XFBFYCFL'||this.categoryId=='FZQZL'){
  422. if(this.grouptype=='checked'){
  423. this.deleteGraphMap();
  424. }else{
  425. this.deleteByCategoryMap();
  426. }
  427. }else{
  428. this.deleteGraphMap()
  429. }
  430. },
  431. //原理图删除
  432. deleteByCategoryMap(){
  433. const loadings = Loading.service({
  434. lock: true,
  435. text: "Loading",
  436. spinner: "el-icon-loading",
  437. background: "rgba(0, 0, 0, 0.7)"
  438. });
  439. let params = {
  440. "BuildingID": this.BuildingID,
  441. "CategoryID": this.categoryId,
  442. "FloorID": this.floorId,
  443. "ProjectID": this.projectId
  444. }
  445. deleteByCategory(params).then(res=>{
  446. loadings.close();
  447. if (res.Result == "success") {
  448. this.$message.success("删除成功");
  449. this.getTreeData();
  450. // this.init();
  451. this.legendData = [];
  452. } else {
  453. this.$message.error(res.Message);
  454. }
  455. }).catch(()=>{
  456. loadings.close();
  457. });
  458. },
  459. //正常删除
  460. deleteGraphMap(){
  461. const loadings = Loading.service({
  462. lock: true,
  463. text: "Loading",
  464. spinner: "el-icon-loading",
  465. background: "rgba(0, 0, 0, 0.7)"
  466. });
  467. deleteGraph([{ Id: this.graphId }]).then(res => {
  468. console.log(res);
  469. loadings.close();
  470. if (res.Result == "success") {
  471. this.$message.success("删除成功");
  472. this.getTreeData();
  473. // this.init();
  474. this.legendData = [];
  475. } else {
  476. this.$message.error(res.Message);
  477. }
  478. }).catch(()=>{
  479. loadings.close();
  480. });
  481. },
  482. //发布
  483. publishBtn() {
  484. const loadings = Loading.service({
  485. lock: true,
  486. text: "Loading",
  487. spinner: "el-icon-loading",
  488. background: "rgba(0, 0, 0, 0.7)"
  489. });
  490. console.log(this.floorId);
  491. const data = {
  492. BuildingID: this.BuildingID,
  493. CategoryID: this.categoryId,
  494. FloorID: this.floorId,
  495. GraphId: this.graphId,
  496. ProjectID: this.projectId,
  497. Pub: false,
  498. PubUser: ""
  499. };
  500. publishGraph(data).then(res => {
  501. loadings.close();
  502. if (res.Result == "success") {
  503. this.$message.success("发布成功");
  504. this.getTreeData();
  505. this.legendData = [];
  506. } else {
  507. this.$message.error(res.Message);
  508. }
  509. });
  510. },
  511. // 读取数据
  512. readGroup(floorid) {
  513. const data = {
  514. categoryId: this.categoryId,
  515. projectId: this.projectId,
  516. BuildingID: this.BuildingID, // 建筑ID
  517. FloorID: floorid, // 楼层id
  518. Pub: false
  519. };
  520. return readGroup(data);
  521. },
  522. /**
  523. * @name goToEditer
  524. * @description t跳转editer编辑器
  525. */
  526. goToEditer() {
  527. setTimeout(() => {
  528. /* const token = this.$store.getters["token"];
  529. const data = `categoryId=${this.categoryId}&projectId=${this.projectId}&BuildingID=1&FloorID=${this.floorId}&FloorName=${this.floorName}&fmapID=${this.fmapID}&token=${token}`;
  530. const url =
  531. window.location.origin +
  532. "/wandaEditer/editer?" +
  533. encodeURIComponent(data);
  534. window.open(url, true); */
  535. // 发布成功跳转草稿箱
  536. const token = this.$store.getters["token"];
  537. this.$router.push({
  538. path: "editer",
  539. query: {
  540. categoryId: this.categoryId,
  541. projectId: this.projectId,
  542. BuildingID: 1,
  543. FloorName: this.floorName,
  544. FloorID: this.floorId,
  545. fmapID: this.fmapID,
  546. token:token
  547. }
  548. });
  549. }, 1000);
  550. },
  551. // 切换草稿箱楼层
  552. checkFloor(floorid) {
  553. this.scene = new EditScence();
  554. this.scene.isEditStatus = false;
  555. this.clearGraphy();
  556. const loadings = Loading.service({
  557. lock: true,
  558. text: "Loading",
  559. spinner: "el-icon-loading",
  560. background: "rgba(0, 0, 0, 0.7)"
  561. });
  562. if(!floorid){
  563. loadings.close();
  564. this.view.fitSceneToView();
  565. return
  566. }
  567. setTimeout(() => {
  568. this.view.scene = this.scene;
  569. this.parserData(floorid);
  570. this.readGroup(floorid).then(data => {
  571. if (data.Result == "success") {
  572. this.graphId = data.Data[0].ID;
  573. if (data.Data) {
  574. loadings.close();
  575. const parserData = new STopologyParser(null);
  576. parserData.parseData(data.Data[0].Elements);
  577. // 多边形
  578. parserData.zoneLegendList.forEach(t => {
  579. this.scene.addItem(t);
  580. this.scene.Nodes.push(t);
  581. });
  582. // 增加文字
  583. parserData.textMarkerList.forEach(t => {
  584. this.scene.addItem(t);
  585. this.scene.Markers.push(t);
  586. });
  587. // 增加图片
  588. parserData.imageMarkerList.forEach(t => {
  589. this.scene.addItem(t);
  590. this.scene.Markers.push(t);
  591. });
  592. // 增加直线
  593. parserData.lineMarkerList.forEach(t => {
  594. this.scene.addItem(t);
  595. this.scene.Markers.push(t);
  596. });
  597. // 增加图标类图例
  598. parserData.imageLegendList.forEach(t => {
  599. this.scene.addItem(t);
  600. this.scene.Nodes.push(t);
  601. });
  602. // 增加管线类
  603. // 增加图标类图例
  604. parserData.relationList.forEach(t => {
  605. this.scene.addItem(t);
  606. this.scene.Relations.push(t);
  607. });
  608. this.view.fitSceneToView();
  609. this.getLegend();
  610. }
  611. } else {
  612. loadings.close();
  613. }
  614. }).catch(()=>{
  615. loadings.close();
  616. });
  617. }, 100);
  618. }
  619. },
  620. mounted() {
  621. this.canvasWidth = this.$refs.draftsCanvas.offsetWidth - 10;
  622. this.canvasHeight = this.$refs.draftsCanvas.offsetHeight - 10;
  623. const href = window.location.href;
  624. let params = href.split("?")[1];
  625. if (!params) {
  626. // 参数有问题
  627. return false;
  628. }
  629. params = decodeURIComponent(params);
  630. const paramsArr = params.split("&");
  631. const obj = {};
  632. paramsArr.map(item => {
  633. const arr = item.split("=");
  634. obj[arr[0]] = arr[1];
  635. });
  636. console.log("obj", obj);
  637. this.projectId = obj.projectId ? obj.projectId : "1000423";
  638. this.fmapID = obj.fmapID ? obj.fmapID : "1000423_120";
  639. this.init();
  640. }
  641. };
  642. </script>
  643. <style lang="less" scoped>
  644. #drafts {
  645. widows: 100%;
  646. height: 100%;
  647. background: #f7f9fa;
  648. position: relative;
  649. .tit {
  650. width: 100%;
  651. height: 48px;
  652. display: flex;
  653. justify-content: center;
  654. align-items: center;
  655. border-bottom: #e4e5e7 solid 1px;
  656. font-size: 16px;
  657. font-weight: bold;
  658. }
  659. .conent {
  660. width: 100%;
  661. height: calc(100% - 48px);
  662. display: flex;
  663. position: relative;
  664. .left-nav {
  665. width: 224px;
  666. height: 100%;
  667. overflow-y: scroll;
  668. padding: 0 12px;
  669. /deep/ .el-tree {
  670. background: #f7f9fa;
  671. .el-tree-node__content {
  672. height: 38px;
  673. }
  674. /deep/.el-tree-node:focus > .el-tree-node__content {
  675. background-color: #e1f2ff !important;
  676. color: #0091ff !important;
  677. }
  678. }
  679. .span-ellipsis {
  680. width: 100%;
  681. overflow: hidden;
  682. white-space: nowrap;
  683. text-overflow: ellipsis;
  684. }
  685. }
  686. .conent-right {
  687. flex: 1;
  688. height: 100%;
  689. background: #fff;
  690. .conent-tit {
  691. width: 100%;
  692. display: flex;
  693. height: 59px;
  694. border: 1px solid #eff0f1;
  695. align-items: center;
  696. justify-content: space-between;
  697. padding: 0 16px 0 16px;
  698. box-sizing: border-box;
  699. .tit-left {
  700. font-size: 16px;
  701. font-weight: bold;
  702. color: rgba(31, 35, 41, 1);
  703. }
  704. .tit-right {
  705. width: 198px;
  706. display: flex;
  707. justify-content: space-between;
  708. margin-left: auto;
  709. }
  710. }
  711. .concent-bottom {
  712. height: calc(100% - 61px);
  713. display: flex;
  714. position: relative;
  715. .map {
  716. flex: 1;
  717. position: relative;
  718. height: 100%;
  719. /*height: calc(100% - 61px);*/
  720. /*background: red;*/
  721. }
  722. .legend {
  723. position: absolute;
  724. right: 0;
  725. top: 0;
  726. width: 200px;
  727. border-left: 1px solid #eff0f1;
  728. background-color: #ffffff;
  729. height: 100%;
  730. overflow-y: scroll;
  731. }
  732. .legend-btn {
  733. position: absolute;
  734. right: 0px;
  735. top: 9px;
  736. width: 10px;
  737. height: 24px;
  738. background: rgba(228, 229, 231, 1);
  739. display: flex;
  740. justify-content: center;
  741. align-items: center;
  742. cursor: pointer;
  743. }
  744. .legend-btn-close {
  745. right: 200px;
  746. }
  747. }
  748. }
  749. }
  750. }
  751. #fengMap {
  752. position: absolute;
  753. width: 100px;
  754. height: 100px;
  755. z-index: -1;
  756. }
  757. .canvas-container {
  758. width: 100%;
  759. height: 100%;
  760. }
  761. </style>