index.vue 32 KB

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