index.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715
  1. <!-- 底图 -->
  2. <template>
  3. <div id='floor_base' v-loading='loading' ref='graphy'>
  4. <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
  5. <!-- 地图底部操作按钮 -->
  6. <div class='strip-bottom'>
  7. <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
  8. </div>
  9. <room-box ref='boxRoom'></room-box>
  10. <el-popover ref="popover" placement="right" trigger="manual" v-model="visible" width="380">
  11. <div style="text-align: right;">
  12. <span style="float: left;">对应的工程信息化信息</span>
  13. <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
  14. </div>
  15. <el-tabs v-model="activeName" @tab-click="handleClickTab">
  16. <el-tab-pane v-if="tabData.tableData.length" label="设备设施" name="equip">
  17. <el-table :data="tabData.tableData" max-height="235" style="width: 100%">
  18. <el-table-column prop="id" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
  19. <el-table-column prop="name" label="设备简称" width="208" :show-overflow-tooltip='true'></el-table-column>
  20. <el-table-column label="操作" width="50">
  21. <template slot-scope="scope">
  22. <el-button @click="handleClickEquipDetail(scope.row)" type="text" size="small">查看</el-button>
  23. </template>
  24. </el-table-column>
  25. </el-table>
  26. <!-- <div style="text-align: right; margin-top: 10px;">
  27. <el-button size="mini" type="primary" @click="visible = false">查看详情</el-button>
  28. </div> -->
  29. </el-tab-pane>
  30. <el-tab-pane v-if="tabData.pointData.length" label="位置" name="point">
  31. <ul class="pointList">
  32. <li v-for="point in tabData.pointData" :key="point.id">
  33. <span :title="point.name">{{point.name}}</span>
  34. <a @click="handleClickPointDeatil(point)">查看</a>
  35. </li>
  36. </ul>
  37. <div style="text-align: right; margin-top: 10px;" v-show="showBtnWell">
  38. <el-button size="mini" type="primary" @click="handleClickHightLight(tabData.pointData)">查看控制商铺范围</el-button>
  39. </div>
  40. </el-tab-pane>
  41. </el-tabs>
  42. </el-popover>
  43. <span class="popStyle" :style="popoverPosition" v-popover:popover></span>
  44. </div>
  45. </template>
  46. <script>
  47. import { SFengParser } from '@saga-web/feng-map'
  48. import { SFloorParser, ItemOrder, ItemColor } from '@saga-web/big'
  49. import { FloorView } from '@/lib/FloorView'
  50. import { FloorScene } from '@/lib/FloorScene'
  51. import RoomBox from '@/views/room/index'
  52. import canvasFun from '@/components/floorMap/canvasFun'
  53. import { readGroup, queryStatis } from '@/api/public'
  54. import { queryShops } from '@/api/equipmentList.js'
  55. import { STopologyParser } from '@/lib/parsers/STopologyParser'
  56. import { mapGetters, mapActions } from 'vuex'
  57. import { SImageItem, SImageShowType } from '@saga-web/graph/lib'
  58. import { SColor } from '@saga-web/draw/lib'
  59. import bus from '@/utils/bus.js'
  60. // import { uuid } from "@/components/mapClass/until";
  61. export default {
  62. data() {
  63. return {
  64. appName: '万达可视化系统',
  65. key: '23f30a832a862c58637a4aadbf50a566',
  66. mapServerURL: `http://map.wanda.cn/editor`,
  67. canvasWidth: 600,
  68. canvasHeight: 800,
  69. loading: false, // 限制重复查询
  70. view: null,
  71. urlMsg: {},
  72. canvasID: 'canvas',
  73. floorid: '', //楼层id
  74. topologyParser: null, // 解析器数据
  75. fParser: null, // 底图解析器
  76. wellMap: {}, // 电井控制商铺映射
  77. activeName: "equip",
  78. popoverPosition: {
  79. top: 0,
  80. left: 0
  81. },
  82. visible: false,
  83. tabData: {
  84. tableData: [],
  85. pointData: []
  86. },
  87. activeItem: null,
  88. showBtnWell: false
  89. }
  90. },
  91. props: {
  92. id: {
  93. default: '1',
  94. type: String
  95. },
  96. categoryId: {
  97. default: '',
  98. type: String
  99. },
  100. // 弹窗高度,适配底图高度使用
  101. modalHeight: {
  102. type: [Number, undefined],
  103. default: undefined
  104. },
  105. loadName: null,
  106. type: null
  107. },
  108. components: { RoomBox, canvasFun },
  109. computed: {
  110. ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj'])
  111. },
  112. methods: {
  113. handleClickLegendItem(item, events) {
  114. this.tabData = {tableData: [], pointData: []};
  115. this.showBtnWell = false;
  116. this.visible = false;
  117. this.activeItem = null;
  118. console.log(item)
  119. if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
  120. const e = events[0];
  121. this.activeItem = item;
  122. item.data.AttachObjectIds.forEach(v => {
  123. if (v.type == "Image") {
  124. this.tabData.tableData.push(v);
  125. } else if (v.type == "Zone") {
  126. this.tabData.pointData.push(v);
  127. }
  128. })
  129. this.activeName = this.tabData.tableData.length?"equip":"point";
  130. this.popoverPosition.top = `${e.clientY}px`;
  131. this.popoverPosition.left = `${e.clientX}px`;
  132. this.$nextTick(() => {
  133. if (this.tabData.tableData.length && !this.tabData.pointData.length) { //只绑定了设备
  134. if (this.tabData.tableData.length == 1) { //绑定了一个设备(跳详情)
  135. } else { //绑定了多个设备(跳表格)
  136. }
  137. } else if (!this.tabData.tableData.length && this.tabData.pointData.length) { //只绑定了位置
  138. if (
  139. item.data.GraphElementId == '100050' ||
  140. item.data.GraphElementId == '100055' ||
  141. item.data.GraphElementId == '100056' ||
  142. item.data.GraphElementId == '100057'
  143. ) { //判断是否为电井
  144. this.visible = true;
  145. this.showBtnWell = true;
  146. } else {
  147. if (this.tabData.pointData.length == 1) { //不是电井并且只绑定了一个位置(跳详情)
  148. if (this.tabData.pointData[0].id)
  149. this.$refs.boxRoom.open({ name: item.name, type: this.type, location: this.tabData.pointData[0].id });
  150. } else {
  151. this.visible = true;
  152. }
  153. }
  154. } else if (this.tabData.tableData.length && this.tabData.pointData.length) { //既绑定了设备又绑定了位置
  155. if (
  156. item.data.GraphElementId == '100050' ||
  157. item.data.GraphElementId == '100055' ||
  158. item.data.GraphElementId == '100056' ||
  159. item.data.GraphElementId == '100057'
  160. ) { //判断是否为电井
  161. this.showBtnWell = true;
  162. }
  163. this.visible = true;
  164. }
  165. })
  166. }
  167. },
  168. // 切换浮层tab
  169. handleClickTab() {
  170. },
  171. // 查看浮层设备详情
  172. handleClickEquipDetail(equip) {},
  173. // 查看浮层位置详情
  174. handleClickPointDeatil(point) {
  175. if (point.id && this.activeItem)
  176. this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id });
  177. },
  178. handleClickHightLight(pointData) {
  179. this.clearHightLight();
  180. pointData.forEach(point => {
  181. let location = point.id ? point.id : '';
  182. if (this.wellMap.hasOwnProperty(location)) {
  183. this.wellMap[location].forEach(item => {
  184. item.highLightFlag = true;
  185. item.zOrder = 30;
  186. })
  187. } else {
  188. let getParams = {
  189. plazaId: this.plazaId,
  190. floor: this.floorid,
  191. keyword: `${location}:wellnum;`
  192. }
  193. queryShops({ getParams }).then(res => {
  194. let shopsnumList = []
  195. let shopsnumItemList = []
  196. if (res.data && res.data.length) {
  197. for (let floor in res.data[0]) {
  198. if (res.data[0][floor].length) {
  199. res.data[0][floor].forEach(v => {
  200. shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
  201. })
  202. }
  203. }
  204. }
  205. if (shopsnumList.length) {
  206. this.fParser.spaceList.forEach(item => {
  207. if (shopsnumList.findIndex(name => name == item.data.Name) != -1) {
  208. item.highLightFlag = true
  209. item.zOrder = 30
  210. shopsnumItemList.push(item)
  211. }
  212. })
  213. this.wellMap[location] = shopsnumItemList
  214. }
  215. })
  216. }
  217. });
  218. this.visible = false;
  219. },
  220. ...mapActions(['getfmapID']),
  221. init(floorid) {
  222. this.loading = true
  223. this.floorid = floorid
  224. this.mapSize()
  225. this.$refs.canvasFun.isShow = false
  226. setTimeout(() => {
  227. this.clearGraphy()
  228. this.scene = new FloorScene()
  229. if (this.haveFengMap == 1) {
  230. this.scene.selectContainer.connect('listChange', this, this.listChange)
  231. if (this.canvasID != `canvas${this.id}`) {
  232. this.canvasID = `canvas${this.id}`
  233. }
  234. this.parserData(floorid)
  235. } else if (this.haveFengMap == 0) {
  236. this.view.scene = this.scene
  237. this.readGraph()
  238. } else {
  239. this.loading = false
  240. }
  241. }, 100)
  242. },
  243. parserData(floor) {
  244. if (floor == 'g80') {
  245. // 屋顶
  246. if (window.fengmapData.frImg) {
  247. let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
  248. imgItem.showType = SImageShowType.AutoFit
  249. imgItem.connect('imgLoadOver', this, () => {
  250. this.readGraph()
  251. })
  252. this.scene.addItem(imgItem)
  253. this.view.scene = this.scene
  254. // this.view.fitSceneToView()
  255. }
  256. } else {
  257. if (window.fengmapData.gnameToGid[floor]) {
  258. window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], res => {
  259. if (res.err) {
  260. console.log('errr', res.err)
  261. return
  262. }
  263. this.fParser = new SFloorParser(null)
  264. this.fParser.parseData(res)
  265. this.fParser.spaceList.forEach(t => {
  266. this.scene.addItem(t)
  267. t.nameSize = 12
  268. t.nameColor = '#2a2a2a'
  269. if (t.data.Name && this.bunkObj[t.data.Name]) {
  270. t.name = this.bunkObj[t.data.Name].brandname
  271. } else {
  272. // t.name = t.data.Name
  273. t.name = ''
  274. }
  275. })
  276. this.fParser.wallList.forEach(t => this.scene.addItem(t))
  277. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
  278. this.fParser.doorList.forEach(t => this.scene.addItem(t))
  279. this.fParser.columnList.forEach(t => this.scene.addItem(t))
  280. this.fParser.casementList.forEach(t => this.scene.addItem(t))
  281. this.view.scene = this.scene
  282. // this.view.fitSceneToView()
  283. this.readGraph()
  284. })
  285. } else {
  286. console.log('楼层不正确')
  287. }
  288. }
  289. },
  290. readGraph() {
  291. this.readGroup(this.floorid)
  292. .then(data => {
  293. if (data.Result == 'failure') {
  294. this.$store.commit('SETISMESSAGE', false)
  295. this.view.fitSceneToView()
  296. this.view.minScale = this.view.scale
  297. if (this.$refs.canvasFun) {
  298. this.$refs.canvasFun.everyScale = this.view.scale
  299. }
  300. this.loading = false
  301. return
  302. } else {
  303. if (
  304. data.Data[0].Elements.Nodes.length === 0 &&
  305. data.Data[0].Elements.Markers.length === 0 &&
  306. data.Data[0].Elements.Relations.length === 0
  307. ) {
  308. this.$store.commit('SETISMESSAGE', false)
  309. } else {
  310. this.$store.commit('SETISMESSAGE', true)
  311. }
  312. }
  313. // 无返回Data处理
  314. if (!(data.Data && data.Data.length)) {
  315. this.view.fitSceneToView()
  316. this.view.minScale = this.view.scale
  317. if (this.$refs.canvasFun) {
  318. this.$refs.canvasFun.everyScale = this.view.scale
  319. }
  320. return false
  321. }
  322. // 请求回来的备注
  323. if (data.Data && data.Data[0].Note) {
  324. let note = data.Data[0].Note
  325. bus.$emit('queryRemarksMethods', note)
  326. } else {
  327. bus.$emit('queryRemarksMethods', '')
  328. }
  329. //土建装饰的图例展示
  330. if (this.$cookie.get('categoryId') == 'SCPZ') {
  331. let scpzTable = [],
  332. arr = []
  333. scpzTable = data.Data[0].Elements.Nodes || []
  334. console.log(scpzTable)
  335. if (scpzTable.length > 0) {
  336. scpzTable.forEach(e => {
  337. if (e.Properties.ItemExplain) {
  338. let obj = e
  339. arr.push(obj)
  340. }
  341. })
  342. }
  343. console.log(arr)
  344. this.$store.commit('SETSCPZTABLE', arr)
  345. }
  346. if (data.Data[0].Elements.Nodes.length > 0) {
  347. this.$store.commit('SETTYPENUM', '')
  348. let Lengd = data.Data[0].Elements.Nodes
  349. Lengd.forEach(el => {
  350. if (el.Type == 'Image' && el.Num > 1) {
  351. this.$store.commit('SETTYPENUM', el.Num)
  352. }
  353. })
  354. }
  355. // 放到后边 $cookie graphId
  356. this.$cookie.set('graphId', data.Data[0].ID, 3)
  357. if (this.$cookie.get('graphId')) {
  358. // 得到graphId 就请求图例
  359. // 除土建装饰之外的图例展示 包括楼层功能
  360. bus.$emit('queryViewMethods')
  361. }
  362. this.topologyParser = new STopologyParser(null)
  363. this.topologyParser.parseData(data.Data[0].Elements)
  364. // 多边形
  365. this.topologyParser.zoneLegendList.forEach(t => {
  366. this.scene.addItem(t)
  367. t.connect("legendItemClick", t, this.handleClickLegendItem);
  368. })
  369. // 增加文字
  370. this.topologyParser.textMarkerList.forEach(t => {
  371. this.scene.addItem(t)
  372. })
  373. // 增加图片
  374. this.topologyParser.imageMarkerList.forEach(t => {
  375. this.scene.addItem(t)
  376. })
  377. // 增加直线
  378. this.topologyParser.lineMarkerList.forEach(t => {
  379. this.scene.addItem(t)
  380. })
  381. // 增加图标类图例
  382. this.topologyParser.imageLegendList.forEach(t => {
  383. this.scene.addItem(t)
  384. t.connect("legendItemClick", t, this.handleClickLegendItem);
  385. })
  386. // 增加管线类
  387. // 增加图标类图例
  388. this.topologyParser.relationList.forEach(t => {
  389. t.selectable = true
  390. this.scene.addItem(t)
  391. t.connect("legendItemClick", t, this.handleClickLegendItem);
  392. })
  393. this.view.fitSceneToView()
  394. this.view.minScale = this.view.scale
  395. if (this.$refs.canvasFun) {
  396. this.$refs.canvasFun.everyScale = this.view.scale
  397. }
  398. this.loading = false
  399. })
  400. .catch(() => {
  401. this.loading = false
  402. })
  403. },
  404. clearGraphy() {
  405. if (this.view) {
  406. this.view.scene = null
  407. return
  408. }
  409. this.view = new FloorView(`canvas${this.id}`)
  410. },
  411. listChange(item, ev) {
  412. if (ev[0].length) {
  413. let selectItem1 = ev[0][0],
  414. location = selectItem1.data.AttachObjectIds[0] ? selectItem1.data.AttachObjectIds[0].id : ''
  415. // 空间类型都可打开弹窗(除防火分区 编号100131,商管办公室 编号100112,铺装石材 编号100129)
  416. // if (selectItem1.data.GraphElementType == 'Zone') {
  417. // if (
  418. // selectItem1.data.GraphElementId != '100131' &&
  419. // selectItem1.data.GraphElementId != '100112' &&
  420. // selectItem1.data.GraphElementId != '100129'
  421. // ) {
  422. // if (location) {
  423. // this.$refs.boxRoom.open({ name: selectItem1.name, type: this.type, location: location })
  424. // }
  425. // }
  426. // }
  427. // // 选中电井设置电井关联的商铺高亮
  428. // this.setHightLight(ev[0])
  429. }
  430. // else {
  431. this.clearHightLight()
  432. // }
  433. },
  434. // 选中电井关联的商铺高亮
  435. setHightLight(arr) {
  436. this.clearHightLight()
  437. arr.forEach(item => {
  438. let location = item.data.AttachObjectIds[0] ? item.data.AttachObjectIds[0].id : ''
  439. // 添加了位置类型并且选中的类型为电井类型
  440. if (
  441. (item.data.GraphElementId == '100050' ||
  442. item.data.GraphElementId == '100055' ||
  443. item.data.GraphElementId == '100056' ||
  444. item.data.GraphElementId == '100057') &&
  445. location
  446. ) {
  447. if (this.wellMap.hasOwnProperty(location)) {
  448. this.wellMap[location].forEach(item => {
  449. item.highLightFlag = true
  450. item.zOrder = 30
  451. })
  452. } else {
  453. let getParams = {
  454. plazaId: this.plazaId,
  455. floor: this.floorid,
  456. keyword: `${location}:wellnum;`
  457. }
  458. queryShops({ getParams }).then(res => {
  459. let shopsnumList = []
  460. let shopsnumItemList = []
  461. if (res.data && res.data.length) {
  462. for (let floor in res.data[0]) {
  463. if (res.data[0][floor].length) {
  464. res.data[0][floor].forEach(v => {
  465. shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
  466. })
  467. }
  468. }
  469. }
  470. if (shopsnumList.length) {
  471. this.fParser.spaceList.forEach(item => {
  472. if (shopsnumList.findIndex(name => name == item.data.Name) != -1) {
  473. item.highLightFlag = true
  474. item.zOrder = 30
  475. shopsnumItemList.push(item)
  476. }
  477. })
  478. this.wellMap[location] = shopsnumItemList
  479. }
  480. })
  481. }
  482. }
  483. })
  484. },
  485. // 清除电井关联商铺的高亮状态
  486. clearHightLight() {
  487. ItemColor.spaceHighColor = new SColor('#FBF2CC')
  488. for (let key in this.wellMap) {
  489. this.wellMap[key].forEach(item => {
  490. item.highLightFlag = false
  491. item.zOrder = ItemOrder.spaceOrder
  492. })
  493. }
  494. },
  495. // 适配底图到窗口
  496. fit() {
  497. this.view.fitSceneToView()
  498. },
  499. // 保存为png
  500. savePng() {
  501. // this.view.saveImage(`${this.loadName}.png`, 'png')
  502. this.view.saveImageSize(`${this.loadName}.png`, 'png', 1920 * 2, 1080 * 2)
  503. //console.log(`${this.loadName}.png`)
  504. },
  505. // 保存为svg
  506. saveSvg() {
  507. this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
  508. },
  509. // 保存为json
  510. saveJson() {
  511. this.view.saveFloorJson(`${this.loadName}.json`)
  512. },
  513. // 缩放
  514. scale(val) {
  515. if (!this.view) {
  516. return
  517. }
  518. let scale = this.view.scale
  519. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
  520. },
  521. // 小眼睛控制显示铺位名称
  522. showText(val) {
  523. // this.topologyParser.zoneLegendList.forEach(t => {
  524. // t.showText = val
  525. // })
  526. this.fParser.spaceList.forEach(t => {
  527. t.showBaseName = val
  528. })
  529. },
  530. // 读取数据
  531. readGroup(FloorID) {
  532. const data = {
  533. BuildingID: '1',
  534. FloorID: FloorID,
  535. categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
  536. projectId: this.urlMsg.ProjectID,
  537. Pub: true
  538. }
  539. return readGroup(data)
  540. },
  541. // 地图尺寸
  542. mapSize() {
  543. this.canvasWidth = this.$refs.graphy.offsetWidth
  544. if (window.screen.height == '768') {
  545. this.canvasHeight = this.$refs.graphy.offsetHeight - 100
  546. } else {
  547. this.canvasHeight = 900
  548. }
  549. // 弹窗中底图高度适配
  550. if (this.modalHeight) {
  551. this.canvasHeight = this.modalHeight
  552. }
  553. },
  554. getEvent() {
  555. bus.$on('changeShow', res => {
  556. this.topologyParser &&
  557. this.topologyParser.zoneLegendList.forEach(t => {
  558. let id = t.data.GraphElementId
  559. t.maskFlag = !(res.indexOf(id) > -1)
  560. })
  561. // this.topologyParser.textMarkerList.forEach(t => {
  562. // let id = t.data.GraphElementId
  563. // t.maskFlag = !(res.indexOf(id) > -1)
  564. // })
  565. // this.topologyParser.imageMarkerList.forEach(t => {
  566. // let id = t.data.GraphElementId
  567. // t.maskFlag = !(res.indexOf(id) > -1)
  568. // })
  569. // this.topologyParser.lineMarkerList.forEach(t => {
  570. // let id = t.data.GraphElementId
  571. // t.maskFlag = !(res.indexOf(id) > -1)
  572. // })
  573. this.topologyParser &&
  574. this.topologyParser.imageLegendList.forEach(t => {
  575. let id = t.data.GraphElementId
  576. t.maskFlag = !(res.indexOf(id) > -1)
  577. })
  578. this.topologyParser &&
  579. this.topologyParser.relationList.forEach(t => {
  580. let id = t.data.GraphElementId || t.data.GraphElementID
  581. t.maskFlag = !(res.indexOf(id) > -1)
  582. })
  583. })
  584. }
  585. },
  586. watch: {
  587. 'view.scale': {
  588. handler(n) {
  589. if (this.$refs.canvasFun) {
  590. let s = (n * 10) / this.view.minScale
  591. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
  592. }
  593. }
  594. },
  595. haveFengMap() {
  596. this.init(this.floorid)
  597. }
  598. },
  599. mounted() {
  600. this.mapSize()
  601. this.getEvent()
  602. },
  603. created() {
  604. this.urlMsg = {
  605. categoryId: this.$cookie.get('categoryId'),
  606. ProjectID: this.plazaId,
  607. BuildingID: '1',
  608. FloorID: this.$cookie.get('floorMapId') || 'f1',
  609. fmapID: this.fmapID
  610. }
  611. }
  612. }
  613. </script>
  614. <style lang="less" scoped>
  615. #floor_base {
  616. position: relative;
  617. height: 100%;
  618. .fengMap {
  619. position: fixed;
  620. width: 100px;
  621. height: 100px;
  622. z-index: -1;
  623. }
  624. .strip-bottom {
  625. position: absolute;
  626. right: 0;
  627. bottom: 40px;
  628. width: 100%;
  629. }
  630. .popStyle {
  631. position: fixed;
  632. }
  633. }
  634. </style>
  635. <style lang="less">
  636. a:hover {
  637. text-decoration: none;
  638. }
  639. .el-popover {
  640. .pointList {
  641. max-height: 235px;
  642. overflow-y: auto;
  643. text-align: right;
  644. li {
  645. height: 38px;
  646. line-height: 38px;
  647. padding: 0 12px;
  648. cursor: pointer;
  649. border-bottom: 1px solid rgba(0,0,0,0.06);
  650. span {
  651. float: left;
  652. width: 260px;
  653. text-align: left;
  654. overflow: hidden;
  655. text-overflow: ellipsis;
  656. white-space: nowrap;
  657. }
  658. a {
  659. font-size: 13px;
  660. }
  661. }
  662. li:hover {
  663. background-color: #F5F6F7;
  664. }
  665. }
  666. .el-button--primary{
  667. background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
  668. }
  669. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  670. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  671. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  672. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  673. padding-left: 16px;
  674. }
  675. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  676. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  677. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  678. .el-tabs--top .el-tabs__item.is-top:last-child {
  679. padding-right: 16px;
  680. }
  681. .el-tabs__nav-wrap::after {
  682. height: 0;
  683. }
  684. .is-active {
  685. color: #fff !important;
  686. border-color: #025baa !important;
  687. background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
  688. }
  689. .el-tabs__item {
  690. padding: 5px 16px;
  691. height: 30px;
  692. line-height: 22px;
  693. font-size: 14px;
  694. font-family: MicrosoftYaHei;
  695. color: rgba(31, 36, 41, 1);
  696. border: 1px solid rgba(195, 199, 203, 1);
  697. }
  698. .el-tabs__active-bar {
  699. background-color: transparent !important;
  700. }
  701. /deep/ .el-tabs__item:last-child {
  702. border-radius: 0px 4px 4px 0px;
  703. }
  704. /deep/ .el-tabs__item:nth-child(2) {
  705. border-radius: 4px 0px 0px 4px;
  706. }
  707. }
  708. </style>