index.vue 33 KB

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