index.vue 34 KB

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