index.vue 34 KB

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