darkColorIndex.vue 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995
  1. <!-- 底图 -->
  2. <template>
  3. <div id='floor_base' v-loading='loading' ref='graphycolor'>
  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 :key='`rommBox${roomKey}`' ref='boxRoom'></room-box>
  10. <equip-detail ref='equipDetail' :key='equipKey'></equip-detail>
  11. <el-popover ref='popover' placement='right' trigger='manual' v-model='visible' width='380'>
  12. <!-- <div style="text-align: right;margin-bottom: 10px;">
  13. <span style="float: left;">对应的工程信息化信息</span>
  14. <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
  15. </div>-->
  16. <!-- 点击图标,出现的弹窗 -->
  17. <div v-if='equipIds.length && !tabData.pointData.length' style='margin-top: 10px;'>
  18. <el-table
  19. :data='tabData.tableData'
  20. max-height='235'
  21. style='width: 100%'
  22. @row-click='handleClickEquipDetail'
  23. v-loading='eqLoading'
  24. :cell-class-name='tableCellClassName'
  25. >
  26. <el-table-column prop='sbjc' label='设备简称' width='144' :show-overflow-tooltip='true'></el-table-column>
  27. <el-table-column prop='sl' width='50' label='数量' :show-overflow-tooltip='true'></el-table-column>
  28. <el-table-column prop='sb_status' width='80' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
  29. <el-table-column prop='sbglgs' width='80' label='管理归属' :show-overflow-tooltip='true'></el-table-column>
  30. <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
  31. <el-table-column label="" width="80" :show-overflow-tooltip='true'>
  32. <template slot-scope="scope">
  33. <span class="equip-detail-btn">台账详情</span>
  34. </template>
  35. </el-table-column>-->
  36. </el-table>
  37. <!-- <div style="text-align: right; margin-top: 10px;">
  38. <el-button size="mini" type="primary" @click="visible = false">关闭</el-button>
  39. </div>-->
  40. </div>
  41. <!-- 点击空间,出现的弹窗 -->
  42. <div v-else-if='!equipIds.length && tabData.pointData.length' style='margin-top: 10px;'>
  43. <ul class='pointList'>
  44. <li v-for='point in tabData.pointData' :key='point.id' @click='handleClickPointDeatil(point)'>
  45. <span :title='point.name'>{{point.name}}</span>
  46. <a>查看</a>
  47. </li>
  48. </ul>
  49. <div style='text-align: right; margin-top: 10px;'>
  50. <el-button v-show='showBtnWell' size='mini' type='primary' @click='handleClickHightLight(tabData.pointData)'>查看控制商铺范围</el-button>
  51. <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
  52. </div>
  53. </div>
  54. <!-- 既有空间,又有设备的弹窗 -->
  55. <el-tabs v-else-if='equipIds.length && tabData.pointData.length' v-model='activeName'>
  56. <el-tab-pane label='设备设施' name='equip'>
  57. <el-table
  58. :data='tabData.tableData'
  59. max-height='235'
  60. style='width: 100%'
  61. @row-click='handleClickEquipDetail'
  62. :cell-class-name='tableCellClassName'
  63. v-loading='eqLoading'
  64. >
  65. <el-table-column prop='sbjc' label='设备简称' width='164' :show-overflow-tooltip='true'></el-table-column>
  66. <el-table-column prop='sl' width='50' label='数量' :show-overflow-tooltip='true' align='right'></el-table-column>
  67. <el-table-column prop='sb_status' width='70' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
  68. <el-table-column prop='sbglgs' width='70' label='管理归属' :show-overflow-tooltip='true'></el-table-column>
  69. <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
  70. <el-table-column label="" width="80" :show-overflow-tooltip='true'>
  71. <template slot-scope="scope">
  72. <span class="equip-detail-btn">台账详情</span>
  73. </template>
  74. </el-table-column>-->
  75. </el-table>
  76. <div style='text-align: right; margin-top: 10px;'>
  77. <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
  78. </div>
  79. </el-tab-pane>
  80. <el-tab-pane label='位置' name='point'>
  81. <ul class='pointList'>
  82. <li v-for='point in tabData.pointData' :key='point.id' @click='handleClickPointDeatil(point)'>
  83. <span :title='point.name'>{{point.name}}</span>
  84. <a>查看</a>
  85. </li>
  86. </ul>
  87. <div style='text-align: right; margin-top: 10px;'>
  88. <el-button v-show='showBtnWell' size='mini' type='primary' @click='handleClickHightLight(tabData.pointData)'>查看控制商铺范围</el-button>
  89. <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
  90. </div>
  91. </el-tab-pane>
  92. </el-tabs>
  93. </el-popover>
  94. <span class='popStyle' :style='popoverPosition' v-popover:popover></span>
  95. </div>
  96. </template>
  97. <script>
  98. /**
  99. * @author yunxing
  100. * @date 2020年08月21日11:04
  101. * @description 停用,已拆除的状态,使用message进行提示
  102. */
  103. import { SFengParser, ProjectRf } from '@saga-web/feng-map'
  104. import { SFloorParser, ItemOrder, ItemColor, SPolygonItem, SBoardItem } from '@saga-web/big'
  105. import { FloorView } from '@/lib/FloorView'
  106. import { FloorScene } from '@/lib/FloorScene'
  107. import RoomBox from '@/views/room/index'
  108. import canvasFun from '@/components/floorMap/canvasFunDark'
  109. import { readGroup, queryStatis, graphQuery } from '@/api/public'
  110. import { queryShops, queryAssetAll } from '@/api/equipmentList.js'
  111. import { STopologyParser } from '@/lib/parsers/STopologyParser'
  112. import { mapGetters, mapActions } from 'vuex'
  113. import { SImageItem, SImageShowType, SGraphItem } from '@saga-web/graph/lib'
  114. import { SColor } from '@saga-web/draw/lib'
  115. import bus from '@/utils/bus.js'
  116. import { TipelineItem } from '../../lib/items/TipelineItem'
  117. import { SImageLegendItem } from '../../lib/items/SImageLegendItem'
  118. import equipDetail from '../../views/equipment/table/equipDetail'
  119. import { debounce } from 'lodash'
  120. import { Message } from 'element-ui'
  121. // import { uuid } from "@/components/mapClass/until";
  122. export default {
  123. data() {
  124. return {
  125. appName: '万达可视化系统',
  126. key: '23f30a832a862c58637a4aadbf50a566',
  127. mapServerURL: `http://mapapp.wanda.cn/editor`,
  128. canvasWidth: 600,
  129. canvasHeight: 800,
  130. loading: false, // 限制重复查询
  131. view: null,
  132. urlMsg: {},
  133. canvasID: 'canvas',
  134. floorid: '', //楼层id
  135. topologyParser: null, // 解析器数据
  136. fParser: null, // 底图解析器
  137. wellMap: {}, // 电井控制商铺映射
  138. activeName: 'equip',
  139. popoverPosition: {
  140. top: 0,
  141. left: 0,
  142. },
  143. statusTextPosition: {
  144. top: 0,
  145. left: 0,
  146. },
  147. visible: false,
  148. eqLoading: true,
  149. equipIds: [],
  150. tabData: {
  151. tableData: [],
  152. pointData: [],
  153. },
  154. activeItem: null,
  155. showBtnWell: false,
  156. count: 0, // 顶楼为多张图时计数器
  157. equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
  158. statusDisabled: ['已拆除'], //禁止跳转的设备状态
  159. roomKey: 1,
  160. shopsnumList:[] //所有与电井相关的商铺
  161. }
  162. },
  163. props: {
  164. id: {
  165. default: '1',
  166. type: String,
  167. },
  168. categoryId: {
  169. default: '',
  170. type: String,
  171. },
  172. // 弹窗高度,适配底图高度使用
  173. modalHeight: {
  174. type: [Number, undefined],
  175. default: undefined,
  176. },
  177. loadName: null,
  178. type: null,
  179. },
  180. components: { RoomBox, canvasFun, equipDetail },
  181. computed: {
  182. ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
  183. },
  184. methods: {
  185. handleClickLegendItem(item, events) {
  186. this.tabData = { tableData: [], pointData: [] }
  187. this.equipIds = []
  188. this.showBtnWell = false
  189. this.visible = false
  190. this.activeItem = null
  191. this.isLoading = true
  192. if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
  193. const e = events[0]
  194. this.activeItem = item
  195. item.data.AttachObjectIds.forEach((v) => {
  196. if (v.type == 'Image') {
  197. if (v.id) {
  198. this.equipIds.push(v.id)
  199. }
  200. // this.tabData.tableData.push(v);
  201. } else if (v.type == 'Zone') {
  202. this.tabData.pointData.push(v)
  203. }
  204. })
  205. if (this.equipIds.length) {
  206. this.eqLoading = true
  207. let data = {
  208. plazaId: this.$store.state.plazaId,
  209. page: 1,
  210. size: this.equipIds.length,
  211. }
  212. let postParams = {
  213. assetnumList: this.equipIds,
  214. }
  215. queryAssetAll({ data, postParams }).then((res) => {
  216. this.tabData.tableData = res.data.data
  217. this.eqLoading = false
  218. console.log('this.tabData',this.tabData)
  219. })
  220. }
  221. this.popoverPosition.top = `${e.clientY}px`
  222. this.popoverPosition.left = `${e.clientX}px`
  223. this.$nextTick(() => {
  224. if (
  225. item.data.GraphElementId == '100050' ||
  226. item.data.GraphElementId == '100055' ||
  227. item.data.GraphElementId == '100056' ||
  228. item.data.GraphElementId == '100057'
  229. ) {
  230. //判断是否为电井
  231. this.showBtnWell = true
  232. }
  233. this.visible = true
  234. })
  235. }
  236. },
  237. // 初始化获取所有电井对应的底图商铺id
  238. wellToShop(){
  239. // 获取所有电井相关的底图
  240. const pointData = this.tabData.pointData;
  241. this.clearHightLight()
  242. let location = ''
  243. pointData.forEach((point) => {
  244. location = location + point.id ? point.id+":wellnum;" : ''
  245. });
  246. let getParams = {
  247. plazaId: this.plazaId,
  248. floor: this.floorid,
  249. keyword: location,
  250. }
  251. queryShops({ getParams }).then((res) => {
  252. let shopsnumList = []
  253. if (res.data && res.data.length) {
  254. for (let floor in res.data[0]) {
  255. if (res.data[0][floor].length) {
  256. res.data[0][floor].forEach((v) => {
  257. shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
  258. })
  259. }
  260. }
  261. }
  262. this.shopsnumList = shopsnumList
  263. })
  264. },
  265. // 查看浮层设备详情
  266. handleClickEquipDetail: debounce(function (row, column, event) {
  267. // 设备状态为停用或已拆除时,弹出消息
  268. if (this.statusDisabled.includes(row?.sb_status)) {
  269. let message = `当前设备状态为“${row.sb_status}”,请复核现场情况,如有需要请前往编辑器删除。` // `当前设备为“${row.sb_status}”状态,请前往编辑器重新编辑`
  270. // 防止出现多条message
  271. // 已经有 message时,并且this.message的message字段与message一致时, 不进行提示
  272. if (this.message && this.message.visible && this.message.message === message) {
  273. return true
  274. }
  275. this.message = Message({
  276. showClose: true,
  277. message,
  278. type: 'warning',
  279. duration: 0,
  280. iconClass: 'el-icon-warning-outline',
  281. customClass: 'floor-map-warning',
  282. })
  283. // this.message = this.$message({
  284. // message,
  285. // type: 'warning',
  286. // })
  287. return true
  288. }
  289. if (row.assetnum) {
  290. this.equipKey++
  291. this.$nextTick(() => {
  292. this.$refs.equipDetail.open({ row: JSON.stringify(row) })
  293. })
  294. }
  295. }, 0),
  296. // handleClickEquipDetail(row) {
  297. // if (row.assetuid) {
  298. // window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
  299. // }
  300. // },
  301. // 查看浮层位置详情
  302. handleClickPointDeatil(point) {
  303. if (point.id && this.activeItem) {
  304. this.roomKey++
  305. this.$nextTick(() => {
  306. this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id })
  307. })
  308. }
  309. },
  310. handleClickHightLight(pointData) {
  311. this.clearHightLight()
  312. pointData.forEach((point) => {
  313. let location = point.id ? point.id : ''
  314. // if (this.wellMap.hasOwnProperty(location)) {
  315. // this.wellMap[location].forEach((item) => {
  316. // item.highLightFlag = true
  317. // item.zOrder = 30
  318. // })
  319. // } else {
  320. let getParams = {
  321. plazaId: this.plazaId,
  322. floor: this.floorid,
  323. keyword: `${location}:wellnum;`,
  324. }
  325. queryShops({ getParams }).then((res) => {
  326. let shopsnumList = []
  327. // let shopsnumItemList = []
  328. if (res.data && res.data.length) {
  329. for (let floor in res.data[0]) {
  330. if (res.data[0][floor].length) {
  331. res.data[0][floor].forEach((v) => {
  332. shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
  333. })
  334. }
  335. }
  336. }
  337. if (shopsnumList.length) {
  338. this.fParser.spaceList.forEach((item) => {
  339. if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
  340. item.highLightFlag = true
  341. item.zOrder = 30
  342. // shopsnumItemList.push(item)
  343. }
  344. })
  345. // this.wellMap[location] = shopsnumItemList
  346. }
  347. })
  348. // }
  349. })
  350. this.visible = false
  351. },
  352. ...mapActions(['getfmapID']),
  353. init(floorid) {
  354. this.loading = true
  355. this.floorid = floorid
  356. this.mapSize()
  357. this.$refs.canvasFun.isShow = false
  358. setTimeout(() => {
  359. this.clearGraphy()
  360. this.scene = new FloorScene()
  361. if (this.haveFengMap == 1) {
  362. this.scene.selectContainer.connect('listChange', this, this.listChange)
  363. if (this.canvasID != `canvas${this.id}`) {
  364. this.canvasID = `canvas${this.id}`
  365. }
  366. this.getGraphDetail().then((res) => {
  367. if (res.Content.length == 1) {
  368. const data = res.Content[0]
  369. if (data.MaxY && data.MinX) {
  370. window.fengmapData.maxY = data.MaxY
  371. window.fengmapData.minX = data.MinX
  372. }
  373. }
  374. this.parserData(floorid)
  375. })
  376. // this.parserData(floorid);
  377. } else if (this.haveFengMap == 0) {
  378. this.view.scene = this.scene
  379. this.readGraph()
  380. } else {
  381. this.loading = false
  382. }
  383. }, 100)
  384. },
  385. parserData(floor) {
  386. if (floor == 'g80') {
  387. // 屋顶
  388. if (window.fengmapData.frImg) {
  389. const pj = this.fmapID.split('_')[0]
  390. // 单张图片
  391. if (!ProjectRf[pj]) {
  392. let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
  393. imgItem.showType = SImageShowType.AutoFit
  394. imgItem.connect('imgLoadOver', this, () => {
  395. this.readGraph()
  396. })
  397. this.scene.addItem(imgItem)
  398. this.view.scene = this.scene
  399. // this.view.fitSceneToView()
  400. } else {
  401. // 多张图
  402. try {
  403. // 初始化0
  404. this.count = 0
  405. ProjectRf[pj].forEach((t) => {
  406. const item = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${t.name}`)
  407. item.width = t.width
  408. item.height = t.height
  409. item.moveTo(t.x, t.y)
  410. item.connect('imgLoadOver', this, () => {
  411. this.countRf(ProjectRf[pj].length)
  412. })
  413. this.scene.addItem(item)
  414. })
  415. this.view.scene = this.scene
  416. } catch (e) {
  417. console.log(e)
  418. }
  419. }
  420. } else {
  421. // 屋顶图不为图片
  422. this.readBaseMap(floor)
  423. }
  424. } else {
  425. if (window.fengmapData.gnameToGid[floor]) {
  426. this.readBaseMap(floor)
  427. } else {
  428. console.log('楼层不正确')
  429. }
  430. }
  431. }, // 解析底图
  432. // 解析楼地板
  433. loadBoard(floor) {
  434. window.fengmapData.loadFloor(floor, (res) => {
  435. const zone = new SBoardItem(null, res)
  436. this.scene.addItem(zone)
  437. })
  438. },
  439. readBaseMap(floor) {
  440. this.loadBoard(window.fengmapData.gnameToGid[floor])
  441. window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], (res) => {
  442. if (res.err) {
  443. console.log('errr', res.err)
  444. return
  445. }
  446. this.fParser = new SFloorParser(null)
  447. this.fParser.parseData(res)
  448. this.fParser.spaceList.forEach((t) => {
  449. this.scene.addItem(t)
  450. t.nameSize = 12
  451. t.nameColor = '#2a2a2a';
  452. if (t.data.Name && this.bunkObj[t.data.Name]) {
  453. t.name = this.bunkObj[t.data.Name].brandname
  454. } else {
  455. // t.name = t.data.Name
  456. t.name = ''
  457. }
  458. })
  459. this.fParser.wallList.forEach((t) => this.scene.addItem(t))
  460. this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t))
  461. this.fParser.doorList.forEach((t) => this.scene.addItem(t))
  462. this.fParser.columnList.forEach((t) => this.scene.addItem(t))
  463. this.fParser.casementList.forEach((t) => this.scene.addItem(t))
  464. this.view.scene = this.scene
  465. // this.view.fitSceneToView()
  466. this.readGraph()
  467. })
  468. },
  469. readGraph() {
  470. this.readGroup(this.floorid)
  471. .then((data) => {
  472. if (data.Result == 'failure') {
  473. this.$store.commit('SETISMESSAGE', false)
  474. this.view.fitSceneToView()
  475. this.view.minScale = this.view.scale
  476. if (this.$refs.canvasFun) {
  477. this.$refs.canvasFun.everyScale = this.view.scale
  478. }
  479. this.loading = false
  480. return
  481. } else {
  482. if (
  483. data.Data[0].Elements.Nodes.length === 0 &&
  484. data.Data[0].Elements.Markers.length === 0 &&
  485. data.Data[0].Elements.Relations.length === 0
  486. ) {
  487. this.$store.commit('SETISMESSAGE', false)
  488. } else {
  489. this.$store.commit('SETISMESSAGE', true)
  490. }
  491. }
  492. // 无返回Data处理
  493. if (!(data.Data && data.Data.length)) {
  494. this.view.fitSceneToView()
  495. this.view.minScale = this.view.scale
  496. if (this.$refs.canvasFun) {
  497. this.$refs.canvasFun.everyScale = this.view.scale
  498. }
  499. return false
  500. }
  501. // 请求回来的备注
  502. if (data.Data && data.Data[0].Note) {
  503. let note = data.Data[0].Note
  504. bus.$emit('queryRemarksMethods', note)
  505. } else {
  506. bus.$emit('queryRemarksMethods', '')
  507. }
  508. //土建装饰的图例展示
  509. if (this.$cookie.get('categoryId') == 'SCPZ') {
  510. let scpzTable = [],
  511. arr = []
  512. scpzTable = data.Data[0].Elements.Nodes || []
  513. console.log(scpzTable)
  514. if (scpzTable.length > 0) {
  515. scpzTable.forEach((e) => {
  516. if (e.Properties.ItemExplain) {
  517. let obj = e
  518. arr.push(obj)
  519. }
  520. })
  521. }
  522. console.log(arr)
  523. this.$store.commit('SETSCPZTABLE', arr)
  524. }
  525. if (data.Data[0].Elements.Nodes.length > 0) {
  526. this.$store.commit('SETTYPENUM', '')
  527. let Lengd = data.Data[0].Elements.Nodes
  528. Lengd.forEach((el) => {
  529. if (el.Type == 'Image' && el.Num > 1) {
  530. console.log(el.Num)
  531. this.$store.commit('SETTYPENUM', el.Num)
  532. }
  533. })
  534. }
  535. // 放到后边 $cookie graphId
  536. this.$cookie.set('graphId', data.Data[0].ID, 3)
  537. if (this.$cookie.get('graphId')) {
  538. // 得到graphId 就请求图例
  539. // 除土建装饰之外的图例展示 包括楼层功能
  540. bus.$emit('queryViewMethods')
  541. }
  542. // 改变底图演示
  543. ItemColor.spaceColor = new SColor('#0C102C')
  544. this.topologyParser = new STopologyParser(null)
  545. this.topologyParser.parseData(data.Data[0].Elements)
  546. // 多边形
  547. this.topologyParser.zoneLegendList.forEach((t) => {
  548. this.scene.addItem(t)
  549. t.connect('legendItemClick', t, this.handleClickLegendItem)
  550. })
  551. // 增加文字
  552. this.topologyParser.textMarkerList.forEach((t) => {
  553. this.scene.addItem(t)
  554. })
  555. // 增加图片
  556. this.topologyParser.imageMarkerList.forEach((t) => {
  557. this.scene.addItem(t)
  558. })
  559. // 增加直线
  560. this.topologyParser.lineMarkerList.forEach((t) => {
  561. this.scene.addItem(t)
  562. })
  563. // 增加图标类图例
  564. this.topologyParser.imageLegendList.forEach((t) => {
  565. t.textItem.color = new SColor('#ffffff')
  566. this.scene.addItem(t)
  567. t.connect('legendItemClick', t, this.handleClickLegendItem)
  568. })
  569. // 增加管线类
  570. // 增加图标类图例
  571. this.topologyParser.relationList.forEach((t) => {
  572. t.selectable = true
  573. this.scene.addItem(t)
  574. t.connect('legendItemClick', t, this.handleClickLegendItem)
  575. })
  576. this.view.fitSceneToView()
  577. this.view.minScale = this.view.scale
  578. if (this.$refs.canvasFun) {
  579. this.$refs.canvasFun.everyScale = this.view.scale
  580. }
  581. this.loading = false
  582. })
  583. .catch(() => {
  584. this.loading = false
  585. })
  586. },
  587. // 顶楼为多张图时计数器
  588. countRf(len) {
  589. this.count++
  590. if (len == this.count) {
  591. this.readGraph()
  592. } else {
  593. console.log('所有图片未加载完成')
  594. }
  595. },
  596. clearGraphy() {
  597. if (this.view) {
  598. this.view.scene = null
  599. return
  600. }
  601. this.view = new FloorView(`canvas${this.id}`)
  602. },
  603. listChange(item, ev) {
  604. // if (ev[0].length) {
  605. // let selectItem1 = ev[0][0],
  606. // location = selectItem1.data.AttachObjectIds[0] ? selectItem1.data.AttachObjectIds[0].id : ''
  607. // // 空间类型都可打开弹窗(除防火分区 编号100131,商管办公室 编号100112,铺装石材 编号100129)
  608. // if (selectItem1.data.GraphElementType == 'Zone') {
  609. // if (
  610. // selectItem1.data.GraphElementId != '100131' &&
  611. // selectItem1.data.GraphElementId != '100112' &&
  612. // selectItem1.data.GraphElementId != '100129'
  613. // ) {
  614. // if (location) {
  615. // this.$refs.boxRoom.open({ name: selectItem1.name, type: this.type, location: location })
  616. // }
  617. // }
  618. // }
  619. // // // 选中电井设置电井关联的商铺高亮
  620. // // this.setHightLight(ev[0])
  621. // }
  622. // else {
  623. // this.clearHightLight()
  624. // }
  625. if (ev[0].length) {
  626. if (!(ev[0][0] instanceof SPolygonItem || ev[0][0] instanceof TipelineItem || ev[0][0] instanceof SImageLegendItem)) {
  627. this.visible = false
  628. }
  629. } else {
  630. this.visible = false
  631. }
  632. this.clearHightLight()
  633. },
  634. // 选中电井关联的商铺高亮
  635. setHightLight(arr) {
  636. this.clearHightLight()
  637. arr.forEach((item) => {
  638. let location = item.data.AttachObjectIds[0] ? item.data.AttachObjectIds[0].id : ''
  639. // 添加了位置类型并且选中的类型为电井类型
  640. if (
  641. (item.data.GraphElementId == '100050' ||
  642. item.data.GraphElementId == '100055' ||
  643. item.data.GraphElementId == '100056' ||
  644. item.data.GraphElementId == '100057') &&
  645. location
  646. ) {
  647. if (this.wellMap.hasOwnProperty(location)) {
  648. this.wellMap[location].forEach((item) => {
  649. item.highLightFlag = true
  650. item.zOrder = 30
  651. })
  652. } else {
  653. let getParams = {
  654. plazaId: this.plazaId,
  655. floor: this.floorid,
  656. keyword: `${location}:wellnum;`,
  657. }
  658. queryShops({ getParams }).then((res) => {
  659. let shopsnumList = []
  660. let shopsnumItemList = []
  661. if (res.data && res.data.length) {
  662. for (let floor in res.data[0]) {
  663. if (res.data[0][floor].length) {
  664. res.data[0][floor].forEach((v) => {
  665. shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
  666. })
  667. }
  668. }
  669. }
  670. if (shopsnumList.length) {
  671. this.fParser.spaceList.forEach((item) => {
  672. if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
  673. item.highLightFlag = true
  674. item.zOrder = 30
  675. shopsnumItemList.push(item)
  676. }
  677. })
  678. this.wellMap[location] = shopsnumItemList
  679. }
  680. })
  681. }
  682. }
  683. })
  684. },
  685. // 清除电井关联商铺的高亮状态
  686. clearHightLight() {
  687. ItemColor.spaceHighColor = new SColor('#FBF2CC')
  688. // for (let key in this.wellMap) {
  689. // this.wellMap[key].forEach((item) => {
  690. // item.highLightFlag = false
  691. // item.zOrder = ItemOrder.spaceOrder
  692. // })
  693. // }
  694. this.fParser.spaceList.forEach((item) => {
  695. item.highLightFlag = false
  696. item.zOrder = ItemOrder.spaceOrder
  697. })
  698. },
  699. // 适配底图到窗口
  700. fit() {
  701. this.view.fitSceneToView()
  702. },
  703. // 保存为png
  704. savePng() {
  705. // this.view.saveImage(`${this.loadName}.png`, 'png')
  706. this.view.saveImageSize(`${this.loadName}.png`, 'png', 1920 * 2, 1080 * 2)
  707. //console.log(`${this.loadName}.png`)
  708. },
  709. // 保存为svg
  710. saveSvg() {
  711. this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
  712. },
  713. // 保存为json
  714. saveJson() {
  715. this.view.saveFloorJson(`${this.loadName}.json`)
  716. },
  717. // 缩放
  718. scale(val) {
  719. if (!this.view) {
  720. return
  721. }
  722. let scale = this.view.scale
  723. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
  724. },
  725. // 小眼睛控制显示铺位名称
  726. showText(val) {
  727. // this.topologyParser.zoneLegendList.forEach(t => {
  728. // t.showText = val
  729. // })
  730. this.fParser.spaceList.forEach((t) => {
  731. t.showBaseName = val
  732. })
  733. },
  734. // 读取数据
  735. readGroup(FloorID) {
  736. const data = {
  737. BuildingID: '1',
  738. FloorID: FloorID,
  739. categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
  740. projectId: this.urlMsg.ProjectID,
  741. Pub: true,
  742. }
  743. return readGroup(data)
  744. },
  745. // 获取图最大最小值
  746. getGraphDetail() {
  747. const categoryId = this.categoryId ? this.categoryId : this.$cookie.get('categoryId')
  748. const data = {
  749. Filters: `categoryId='${categoryId}';projectId='${this.urlMsg.ProjectID}';BuildingID='1';FloorID='${this.floorid}';isPub=true`,
  750. }
  751. return graphQuery(data)
  752. },
  753. // 地图尺寸
  754. mapSize() {
  755. this.canvasWidth = this.$refs.graphycolor.offsetWidth
  756. if (window.screen.height == '768') {
  757. this.canvasHeight = this.$refs.graphycolor.offsetHeight - 100
  758. } else {
  759. this.canvasHeight = 570
  760. }
  761. // 弹窗中底图高度适配
  762. if (this.modalHeight) {
  763. this.canvasHeight = this.modalHeight
  764. }
  765. },
  766. getEvent() {
  767. bus.$on('changeShow', (res) => {
  768. this.topologyParser &&
  769. this.topologyParser.zoneLegendList.forEach((t) => {
  770. let id = t.data.GraphElementId
  771. t.maskFlag = !(res.indexOf(id) > -1)
  772. })
  773. // this.topologyParser.textMarkerList.forEach(t => {
  774. // let id = t.data.GraphElementId
  775. // t.maskFlag = !(res.indexOf(id) > -1)
  776. // })
  777. // this.topologyParser.imageMarkerList.forEach(t => {
  778. // let id = t.data.GraphElementId
  779. // t.maskFlag = !(res.indexOf(id) > -1)
  780. // })
  781. // this.topologyParser.lineMarkerList.forEach(t => {
  782. // let id = t.data.GraphElementId
  783. // t.maskFlag = !(res.indexOf(id) > -1)
  784. // })
  785. this.topologyParser &&
  786. this.topologyParser.imageLegendList.forEach((t) => {
  787. let id = t.data.GraphElementId
  788. t.maskFlag = !(res.indexOf(id) > -1)
  789. })
  790. this.topologyParser &&
  791. this.topologyParser.relationList.forEach((t) => {
  792. let id = t.data.GraphElementId || t.data.GraphElementID
  793. t.maskFlag = !(res.indexOf(id) > -1)
  794. })
  795. })
  796. },
  797. /**
  798. * @description 处理popover显隐
  799. * 当点击位置不在canvas内部时 ( 如点击 页面空白,图例,楼层,设备设施左侧列表项时),将visible置为false,隐藏popover
  800. */
  801. handlePopover(e) {
  802. this.$nextTick(() => {
  803. if (!this.$refs.graphycolor.contains(e.target)) {
  804. this.visible = false
  805. }
  806. this.showStatusText = false
  807. this.statusText = ''
  808. // 关闭message提示
  809. if (this.message) {
  810. this.message.close()
  811. this.message = null
  812. }
  813. })
  814. },
  815. /**
  816. * @description 设备状态列, 状态为停用或已拆除时,样式红色
  817. */
  818. tableCellClassName({ row, column, rowIndex, columnIndex }) {
  819. if (columnIndex === 2 && this.statusDisabled.includes(row.sb_status)) {
  820. return 'status-disabled'
  821. }
  822. },
  823. },
  824. watch: {
  825. 'view.scale': {
  826. handler(n) {
  827. if (this.$refs.canvasFun) {
  828. let s = (n * 10) / this.view.minScale
  829. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
  830. }
  831. },
  832. },
  833. haveFengMap() {
  834. this.init(this.floorid)
  835. },
  836. },
  837. mounted() {
  838. this.mapSize()
  839. this.getEvent()
  840. // 添加监听点击事件,处理popover显隐
  841. window.addEventListener('click', this.handlePopover, false)
  842. this.$once('hook:beforeDestroy', () => {
  843. window.removeEventListener('click', this.handlePopover)
  844. })
  845. },
  846. created() {
  847. // document.addEventListener("mousedown", () => {
  848. // this.visible = false;
  849. // })
  850. this.urlMsg = {
  851. categoryId: this.$cookie.get('categoryId'),
  852. ProjectID: this.plazaId,
  853. BuildingID: '1',
  854. FloorID: this.$cookie.get('floorMapId') || 'f1',
  855. fmapID: this.fmapID,
  856. }
  857. },
  858. }
  859. </script>
  860. <style lang="less" scoped>
  861. #floor_base {
  862. position: relative;
  863. height: 100%;
  864. .fengMap {
  865. position: fixed;
  866. width: 100px;
  867. height: 100px;
  868. z-index: -1;
  869. }
  870. .strip-bottom {
  871. position: absolute;
  872. right: 0;
  873. bottom: 40px;
  874. width: 100%;
  875. }
  876. .popStyle {
  877. position: fixed;
  878. }
  879. }
  880. </style>
  881. <style lang="less">
  882. a:hover {
  883. text-decoration: none;
  884. }
  885. .el-popover {
  886. .el-table {
  887. tr {
  888. .equip-detail-btn {
  889. display: none;
  890. }
  891. }
  892. tr:hover {
  893. cursor: pointer;
  894. .equip-detail-btn {
  895. cursor: pointer;
  896. display: inline-block;
  897. color: #025baa;
  898. }
  899. }
  900. }
  901. .pointList {
  902. max-height: 235px;
  903. overflow-y: auto;
  904. text-align: right;
  905. li {
  906. height: 38px;
  907. line-height: 38px;
  908. padding: 0 12px;
  909. cursor: pointer;
  910. border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  911. span {
  912. float: left;
  913. width: 260px;
  914. text-align: left;
  915. overflow: hidden;
  916. text-overflow: ellipsis;
  917. white-space: nowrap;
  918. }
  919. a {
  920. display: none;
  921. color: #025baa;
  922. font-size: 13px;
  923. }
  924. }
  925. li:hover {
  926. background-color: #f5f6f7;
  927. a {
  928. display: inline-block;
  929. }
  930. }
  931. }
  932. .el-button--primary {
  933. background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
  934. }
  935. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  936. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  937. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  938. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  939. padding-left: 16px;
  940. }
  941. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  942. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  943. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  944. .el-tabs--top .el-tabs__item.is-top:last-child {
  945. padding-right: 16px;
  946. }
  947. .el-tabs__nav-wrap::after {
  948. height: 0;
  949. }
  950. .is-active {
  951. color: #025baa !important;
  952. border-color: #025baa !important;
  953. background: rgba(2, 91, 170, 0.15);
  954. }
  955. .el-tabs__item {
  956. padding: 5px 16px;
  957. height: 30px;
  958. line-height: 20px;
  959. font-size: 14px;
  960. font-family: MicrosoftYaHei;
  961. color: rgba(31, 36, 41, 1);
  962. border: 1px solid rgba(195, 199, 203, 1);
  963. }
  964. .el-tabs__active-bar {
  965. background-color: transparent !important;
  966. }
  967. /deep/ .el-tabs__item:last-child {
  968. border-radius: 0px 4px 4px 0px;
  969. }
  970. /deep/ .el-tabs__item:nth-child(2) {
  971. border-radius: 4px 0px 0px 4px;
  972. }
  973. // 设备状态
  974. .status-disabled {
  975. color: #c0c4cc !important;
  976. text-decoration: line-through;
  977. }
  978. }
  979. // 警告message样式修改
  980. .floor-map-warning {
  981. background-color: #ffa53d;
  982. color: #fff;
  983. font-size: 14px;
  984. /deep/ .el-icon-warning-outline {
  985. font-weight: 600 !important;
  986. margin-right: 5px;
  987. }
  988. /deep/.el-icon-close {
  989. color: #fff;
  990. opacity: 0.5;
  991. }
  992. }
  993. </style>