|
@@ -0,0 +1,995 @@
|
|
|
+
|
|
|
+<!-- 底图 -->
|
|
|
+<template>
|
|
|
+ <div id='floor_base' v-loading='loading' ref='graphycolor'>
|
|
|
+ <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
|
|
|
+ <!-- 地图底部操作按钮 -->
|
|
|
+ <div class='strip-bottom'>
|
|
|
+ <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
|
|
|
+ </div>
|
|
|
+ <room-box :key='`rommBox${roomKey}`' ref='boxRoom'></room-box>
|
|
|
+ <equip-detail ref='equipDetail' :key='equipKey'></equip-detail>
|
|
|
+ <el-popover ref='popover' placement='right' trigger='manual' v-model='visible' width='380'>
|
|
|
+ <!-- <div style="text-align: right;margin-bottom: 10px;">
|
|
|
+ <span style="float: left;">对应的工程信息化信息</span>
|
|
|
+ <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
|
|
|
+ </div>-->
|
|
|
+ <!-- 点击图标,出现的弹窗 -->
|
|
|
+ <div v-if='equipIds.length && !tabData.pointData.length' style='margin-top: 10px;'>
|
|
|
+ <el-table
|
|
|
+ :data='tabData.tableData'
|
|
|
+ max-height='235'
|
|
|
+ style='width: 100%'
|
|
|
+ @row-click='handleClickEquipDetail'
|
|
|
+ v-loading='eqLoading'
|
|
|
+ :cell-class-name='tableCellClassName'
|
|
|
+ >
|
|
|
+ <el-table-column prop='sbjc' label='设备简称' width='144' :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <el-table-column prop='sl' width='50' label='数量' :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <el-table-column prop='sb_status' width='80' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <el-table-column prop='sbglgs' width='80' label='管理归属' :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <el-table-column label="" width="80" :show-overflow-tooltip='true'>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="equip-detail-btn">台账详情</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>-->
|
|
|
+ </el-table>
|
|
|
+ <!-- <div style="text-align: right; margin-top: 10px;">
|
|
|
+ <el-button size="mini" type="primary" @click="visible = false">关闭</el-button>
|
|
|
+ </div>-->
|
|
|
+ </div>
|
|
|
+ <!-- 点击空间,出现的弹窗 -->
|
|
|
+ <div v-else-if='!equipIds.length && tabData.pointData.length' style='margin-top: 10px;'>
|
|
|
+ <ul class='pointList'>
|
|
|
+ <li v-for='point in tabData.pointData' :key='point.id' @click='handleClickPointDeatil(point)'>
|
|
|
+ <span :title='point.name'>{{point.name}}</span>
|
|
|
+ <a>查看</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div style='text-align: right; margin-top: 10px;'>
|
|
|
+ <el-button v-show='showBtnWell' size='mini' type='primary' @click='handleClickHightLight(tabData.pointData)'>查看控制商铺范围</el-button>
|
|
|
+ <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 既有空间,又有设备的弹窗 -->
|
|
|
+ <el-tabs v-else-if='equipIds.length && tabData.pointData.length' v-model='activeName'>
|
|
|
+ <el-tab-pane label='设备设施' name='equip'>
|
|
|
+ <el-table
|
|
|
+ :data='tabData.tableData'
|
|
|
+ max-height='235'
|
|
|
+ style='width: 100%'
|
|
|
+ @row-click='handleClickEquipDetail'
|
|
|
+ :cell-class-name='tableCellClassName'
|
|
|
+ v-loading='eqLoading'
|
|
|
+ >
|
|
|
+ <el-table-column prop='sbjc' label='设备简称' width='164' :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <el-table-column prop='sl' width='50' label='数量' :show-overflow-tooltip='true' align='right'></el-table-column>
|
|
|
+ <el-table-column prop='sb_status' width='70' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <el-table-column prop='sbglgs' width='70' label='管理归属' :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <el-table-column label="" width="80" :show-overflow-tooltip='true'>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="equip-detail-btn">台账详情</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>-->
|
|
|
+ </el-table>
|
|
|
+ <div style='text-align: right; margin-top: 10px;'>
|
|
|
+ <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label='位置' name='point'>
|
|
|
+ <ul class='pointList'>
|
|
|
+ <li v-for='point in tabData.pointData' :key='point.id' @click='handleClickPointDeatil(point)'>
|
|
|
+ <span :title='point.name'>{{point.name}}</span>
|
|
|
+ <a>查看</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div style='text-align: right; margin-top: 10px;'>
|
|
|
+ <el-button v-show='showBtnWell' size='mini' type='primary' @click='handleClickHightLight(tabData.pointData)'>查看控制商铺范围</el-button>
|
|
|
+ <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-popover>
|
|
|
+ <span class='popStyle' :style='popoverPosition' v-popover:popover></span>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * @author yunxing
|
|
|
+ * @date 2020年08月21日11:04
|
|
|
+ * @description 停用,已拆除的状态,使用message进行提示
|
|
|
+ */
|
|
|
+import { SFengParser, ProjectRf } from '@saga-web/feng-map'
|
|
|
+import { SFloorParser, ItemOrder, ItemColor, SPolygonItem, SBoardItem } from '@saga-web/big'
|
|
|
+import { FloorView } from '@/lib/FloorView'
|
|
|
+import { FloorScene } from '@/lib/FloorScene'
|
|
|
+import RoomBox from '@/views/room/index'
|
|
|
+import canvasFun from '@/components/floorMap/canvasFunDark'
|
|
|
+import { readGroup, queryStatis, graphQuery } from '@/api/public'
|
|
|
+import { queryShops, queryAssetAll } from '@/api/equipmentList.js'
|
|
|
+import { STopologyParser } from '@/lib/parsers/STopologyParser'
|
|
|
+import { mapGetters, mapActions } from 'vuex'
|
|
|
+import { SImageItem, SImageShowType, SGraphItem } from '@saga-web/graph/lib'
|
|
|
+import { SColor } from '@saga-web/draw/lib'
|
|
|
+import bus from '@/utils/bus.js'
|
|
|
+import { TipelineItem } from '../../lib/items/TipelineItem'
|
|
|
+import { SImageLegendItem } from '../../lib/items/SImageLegendItem'
|
|
|
+import equipDetail from '../../views/equipment/table/equipDetail'
|
|
|
+import { debounce } from 'lodash'
|
|
|
+import { Message } from 'element-ui'
|
|
|
+// import { uuid } from "@/components/mapClass/until";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ appName: '万达可视化系统',
|
|
|
+ key: '23f30a832a862c58637a4aadbf50a566',
|
|
|
+ mapServerURL: `http://mapapp.wanda.cn/editor`,
|
|
|
+ canvasWidth: 600,
|
|
|
+ canvasHeight: 800,
|
|
|
+ loading: false, // 限制重复查询
|
|
|
+ view: null,
|
|
|
+ urlMsg: {},
|
|
|
+ canvasID: 'canvas',
|
|
|
+ floorid: '', //楼层id
|
|
|
+ topologyParser: null, // 解析器数据
|
|
|
+ fParser: null, // 底图解析器
|
|
|
+ wellMap: {}, // 电井控制商铺映射
|
|
|
+ activeName: 'equip',
|
|
|
+ popoverPosition: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ },
|
|
|
+ statusTextPosition: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ eqLoading: true,
|
|
|
+ equipIds: [],
|
|
|
+ tabData: {
|
|
|
+ tableData: [],
|
|
|
+ pointData: [],
|
|
|
+ },
|
|
|
+ activeItem: null,
|
|
|
+ showBtnWell: false,
|
|
|
+ count: 0, // 顶楼为多张图时计数器
|
|
|
+ equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
|
|
|
+ statusDisabled: ['已拆除'], //禁止跳转的设备状态
|
|
|
+ roomKey: 1,
|
|
|
+ shopsnumList:[] //所有与电井相关的商铺
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ id: {
|
|
|
+ default: '1',
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ categoryId: {
|
|
|
+ default: '',
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ // 弹窗高度,适配底图高度使用
|
|
|
+ modalHeight: {
|
|
|
+ type: [Number, undefined],
|
|
|
+ default: undefined,
|
|
|
+ },
|
|
|
+ loadName: null,
|
|
|
+ type: null,
|
|
|
+ },
|
|
|
+ components: { RoomBox, canvasFun, equipDetail },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClickLegendItem(item, events) {
|
|
|
+ this.tabData = { tableData: [], pointData: [] }
|
|
|
+ this.equipIds = []
|
|
|
+ this.showBtnWell = false
|
|
|
+ this.visible = false
|
|
|
+ this.activeItem = null
|
|
|
+ this.isLoading = true
|
|
|
+ if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
|
|
|
+ const e = events[0]
|
|
|
+ this.activeItem = item
|
|
|
+ item.data.AttachObjectIds.forEach((v) => {
|
|
|
+ if (v.type == 'Image') {
|
|
|
+ if (v.id) {
|
|
|
+ this.equipIds.push(v.id)
|
|
|
+ }
|
|
|
+ // this.tabData.tableData.push(v);
|
|
|
+ } else if (v.type == 'Zone') {
|
|
|
+ this.tabData.pointData.push(v)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.equipIds.length) {
|
|
|
+ this.eqLoading = true
|
|
|
+ let data = {
|
|
|
+ plazaId: this.$store.state.plazaId,
|
|
|
+ page: 1,
|
|
|
+ size: this.equipIds.length,
|
|
|
+ }
|
|
|
+ let postParams = {
|
|
|
+ assetnumList: this.equipIds,
|
|
|
+ }
|
|
|
+ queryAssetAll({ data, postParams }).then((res) => {
|
|
|
+ this.tabData.tableData = res.data.data
|
|
|
+ this.eqLoading = false
|
|
|
+ console.log('this.tabData',this.tabData)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.popoverPosition.top = `${e.clientY}px`
|
|
|
+ this.popoverPosition.left = `${e.clientX}px`
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (
|
|
|
+ item.data.GraphElementId == '100050' ||
|
|
|
+ item.data.GraphElementId == '100055' ||
|
|
|
+ item.data.GraphElementId == '100056' ||
|
|
|
+ item.data.GraphElementId == '100057'
|
|
|
+ ) {
|
|
|
+ //判断是否为电井
|
|
|
+ this.showBtnWell = true
|
|
|
+ }
|
|
|
+ this.visible = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始化获取所有电井对应的底图商铺id
|
|
|
+ wellToShop(){
|
|
|
+ // 获取所有电井相关的底图
|
|
|
+ const pointData = this.tabData.pointData;
|
|
|
+ this.clearHightLight()
|
|
|
+ let location = ''
|
|
|
+ pointData.forEach((point) => {
|
|
|
+ location = location + point.id ? point.id+":wellnum;" : ''
|
|
|
+ });
|
|
|
+ let getParams = {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ floor: this.floorid,
|
|
|
+ keyword: location,
|
|
|
+ }
|
|
|
+ queryShops({ getParams }).then((res) => {
|
|
|
+ let shopsnumList = []
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ for (let floor in res.data[0]) {
|
|
|
+ if (res.data[0][floor].length) {
|
|
|
+ res.data[0][floor].forEach((v) => {
|
|
|
+ shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.shopsnumList = shopsnumList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查看浮层设备详情
|
|
|
+ handleClickEquipDetail: debounce(function (row, column, event) {
|
|
|
+ // 设备状态为停用或已拆除时,弹出消息
|
|
|
+ if (this.statusDisabled.includes(row?.sb_status)) {
|
|
|
+ let message = `当前设备状态为“${row.sb_status}”,请复核现场情况,如有需要请前往编辑器删除。` // `当前设备为“${row.sb_status}”状态,请前往编辑器重新编辑`
|
|
|
+ // 防止出现多条message
|
|
|
+ // 已经有 message时,并且this.message的message字段与message一致时, 不进行提示
|
|
|
+ if (this.message && this.message.visible && this.message.message === message) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ this.message = Message({
|
|
|
+ showClose: true,
|
|
|
+ message,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 0,
|
|
|
+ iconClass: 'el-icon-warning-outline',
|
|
|
+ customClass: 'floor-map-warning',
|
|
|
+ })
|
|
|
+ // this.message = this.$message({
|
|
|
+ // message,
|
|
|
+ // type: 'warning',
|
|
|
+ // })
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ if (row.assetnum) {
|
|
|
+ this.equipKey++
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.equipDetail.open({ row: JSON.stringify(row) })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 0),
|
|
|
+ // handleClickEquipDetail(row) {
|
|
|
+ // if (row.assetuid) {
|
|
|
+ // window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // 查看浮层位置详情
|
|
|
+ handleClickPointDeatil(point) {
|
|
|
+ if (point.id && this.activeItem) {
|
|
|
+ this.roomKey++
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClickHightLight(pointData) {
|
|
|
+ this.clearHightLight()
|
|
|
+ pointData.forEach((point) => {
|
|
|
+ let location = point.id ? point.id : ''
|
|
|
+ // if (this.wellMap.hasOwnProperty(location)) {
|
|
|
+ // this.wellMap[location].forEach((item) => {
|
|
|
+ // item.highLightFlag = true
|
|
|
+ // item.zOrder = 30
|
|
|
+ // })
|
|
|
+ // } else {
|
|
|
+ let getParams = {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ floor: this.floorid,
|
|
|
+ keyword: `${location}:wellnum;`,
|
|
|
+ }
|
|
|
+ queryShops({ getParams }).then((res) => {
|
|
|
+ let shopsnumList = []
|
|
|
+ // let shopsnumItemList = []
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ for (let floor in res.data[0]) {
|
|
|
+ if (res.data[0][floor].length) {
|
|
|
+ res.data[0][floor].forEach((v) => {
|
|
|
+ shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (shopsnumList.length) {
|
|
|
+ this.fParser.spaceList.forEach((item) => {
|
|
|
+ if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
|
|
|
+ item.highLightFlag = true
|
|
|
+ item.zOrder = 30
|
|
|
+ // shopsnumItemList.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // this.wellMap[location] = shopsnumItemList
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ ...mapActions(['getfmapID']),
|
|
|
+ init(floorid) {
|
|
|
+ this.loading = true
|
|
|
+ this.floorid = floorid
|
|
|
+ this.mapSize()
|
|
|
+ this.$refs.canvasFun.isShow = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.clearGraphy()
|
|
|
+ this.scene = new FloorScene()
|
|
|
+ if (this.haveFengMap == 1) {
|
|
|
+ this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
|
+ if (this.canvasID != `canvas${this.id}`) {
|
|
|
+ this.canvasID = `canvas${this.id}`
|
|
|
+ }
|
|
|
+ this.getGraphDetail().then((res) => {
|
|
|
+ if (res.Content.length == 1) {
|
|
|
+ const data = res.Content[0]
|
|
|
+ if (data.MaxY && data.MinX) {
|
|
|
+ window.fengmapData.maxY = data.MaxY
|
|
|
+ window.fengmapData.minX = data.MinX
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.parserData(floorid)
|
|
|
+ })
|
|
|
+ // this.parserData(floorid);
|
|
|
+ } else if (this.haveFengMap == 0) {
|
|
|
+ this.view.scene = this.scene
|
|
|
+ this.readGraph()
|
|
|
+ } else {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
+ parserData(floor) {
|
|
|
+ if (floor == 'g80') {
|
|
|
+ // 屋顶
|
|
|
+ if (window.fengmapData.frImg) {
|
|
|
+ const pj = this.fmapID.split('_')[0]
|
|
|
+ // 单张图片
|
|
|
+ if (!ProjectRf[pj]) {
|
|
|
+ let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
|
|
|
+ imgItem.showType = SImageShowType.AutoFit
|
|
|
+ imgItem.connect('imgLoadOver', this, () => {
|
|
|
+ this.readGraph()
|
|
|
+ })
|
|
|
+ this.scene.addItem(imgItem)
|
|
|
+ this.view.scene = this.scene
|
|
|
+ // this.view.fitSceneToView()
|
|
|
+ } else {
|
|
|
+ // 多张图
|
|
|
+ try {
|
|
|
+ // 初始化0
|
|
|
+ this.count = 0
|
|
|
+ ProjectRf[pj].forEach((t) => {
|
|
|
+ const item = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${t.name}`)
|
|
|
+ item.width = t.width
|
|
|
+ item.height = t.height
|
|
|
+ item.moveTo(t.x, t.y)
|
|
|
+ item.connect('imgLoadOver', this, () => {
|
|
|
+ this.countRf(ProjectRf[pj].length)
|
|
|
+ })
|
|
|
+ this.scene.addItem(item)
|
|
|
+ })
|
|
|
+ this.view.scene = this.scene
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 屋顶图不为图片
|
|
|
+ this.readBaseMap(floor)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (window.fengmapData.gnameToGid[floor]) {
|
|
|
+ this.readBaseMap(floor)
|
|
|
+ } else {
|
|
|
+ console.log('楼层不正确')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, // 解析底图
|
|
|
+ // 解析楼地板
|
|
|
+ loadBoard(floor) {
|
|
|
+ window.fengmapData.loadFloor(floor, (res) => {
|
|
|
+ const zone = new SBoardItem(null, res)
|
|
|
+ this.scene.addItem(zone)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ readBaseMap(floor) {
|
|
|
+ this.loadBoard(window.fengmapData.gnameToGid[floor])
|
|
|
+ window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], (res) => {
|
|
|
+ if (res.err) {
|
|
|
+ console.log('errr', res.err)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.fParser = new SFloorParser(null)
|
|
|
+ this.fParser.parseData(res)
|
|
|
+ this.fParser.spaceList.forEach((t) => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ t.nameSize = 12
|
|
|
+ t.nameColor = '#2a2a2a';
|
|
|
+ if (t.data.Name && this.bunkObj[t.data.Name]) {
|
|
|
+ t.name = this.bunkObj[t.data.Name].brandname
|
|
|
+ } else {
|
|
|
+ // t.name = t.data.Name
|
|
|
+ t.name = ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.fParser.wallList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.fParser.doorList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.fParser.columnList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.fParser.casementList.forEach((t) => this.scene.addItem(t))
|
|
|
+ this.view.scene = this.scene
|
|
|
+ // this.view.fitSceneToView()
|
|
|
+ this.readGraph()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ readGraph() {
|
|
|
+ this.readGroup(this.floorid)
|
|
|
+ .then((data) => {
|
|
|
+ if (data.Result == 'failure') {
|
|
|
+ this.$store.commit('SETISMESSAGE', false)
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ this.view.minScale = this.view.scale
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ if (
|
|
|
+ data.Data[0].Elements.Nodes.length === 0 &&
|
|
|
+ data.Data[0].Elements.Markers.length === 0 &&
|
|
|
+ data.Data[0].Elements.Relations.length === 0
|
|
|
+ ) {
|
|
|
+ this.$store.commit('SETISMESSAGE', false)
|
|
|
+ } else {
|
|
|
+ this.$store.commit('SETISMESSAGE', true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 无返回Data处理
|
|
|
+ if (!(data.Data && data.Data.length)) {
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ this.view.minScale = this.view.scale
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 请求回来的备注
|
|
|
+ if (data.Data && data.Data[0].Note) {
|
|
|
+ let note = data.Data[0].Note
|
|
|
+ bus.$emit('queryRemarksMethods', note)
|
|
|
+ } else {
|
|
|
+ bus.$emit('queryRemarksMethods', '')
|
|
|
+ }
|
|
|
+ //土建装饰的图例展示
|
|
|
+ if (this.$cookie.get('categoryId') == 'SCPZ') {
|
|
|
+ let scpzTable = [],
|
|
|
+ arr = []
|
|
|
+ scpzTable = data.Data[0].Elements.Nodes || []
|
|
|
+ console.log(scpzTable)
|
|
|
+ if (scpzTable.length > 0) {
|
|
|
+ scpzTable.forEach((e) => {
|
|
|
+ if (e.Properties.ItemExplain) {
|
|
|
+ let obj = e
|
|
|
+ arr.push(obj)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(arr)
|
|
|
+ this.$store.commit('SETSCPZTABLE', arr)
|
|
|
+ }
|
|
|
+ if (data.Data[0].Elements.Nodes.length > 0) {
|
|
|
+ this.$store.commit('SETTYPENUM', '')
|
|
|
+ let Lengd = data.Data[0].Elements.Nodes
|
|
|
+ Lengd.forEach((el) => {
|
|
|
+ if (el.Type == 'Image' && el.Num > 1) {
|
|
|
+ console.log(el.Num)
|
|
|
+ this.$store.commit('SETTYPENUM', el.Num)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 放到后边 $cookie graphId
|
|
|
+ this.$cookie.set('graphId', data.Data[0].ID, 3)
|
|
|
+ if (this.$cookie.get('graphId')) {
|
|
|
+ // 得到graphId 就请求图例
|
|
|
+ // 除土建装饰之外的图例展示 包括楼层功能
|
|
|
+ bus.$emit('queryViewMethods')
|
|
|
+ }
|
|
|
+ // 改变底图演示
|
|
|
+ ItemColor.spaceColor = new SColor('#0C102C')
|
|
|
+ this.topologyParser = new STopologyParser(null)
|
|
|
+ this.topologyParser.parseData(data.Data[0].Elements)
|
|
|
+ // 多边形
|
|
|
+ this.topologyParser.zoneLegendList.forEach((t) => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ })
|
|
|
+ // 增加文字
|
|
|
+ this.topologyParser.textMarkerList.forEach((t) => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ // 增加图片
|
|
|
+ this.topologyParser.imageMarkerList.forEach((t) => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ // 增加直线
|
|
|
+ this.topologyParser.lineMarkerList.forEach((t) => {
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ // 增加图标类图例
|
|
|
+ this.topologyParser.imageLegendList.forEach((t) => {
|
|
|
+ t.textItem.color = new SColor('#ffffff')
|
|
|
+ this.scene.addItem(t)
|
|
|
+ t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ })
|
|
|
+ // 增加管线类
|
|
|
+ // 增加图标类图例
|
|
|
+ this.topologyParser.relationList.forEach((t) => {
|
|
|
+ t.selectable = true
|
|
|
+ this.scene.addItem(t)
|
|
|
+ t.connect('legendItemClick', t, this.handleClickLegendItem)
|
|
|
+ })
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ this.view.minScale = this.view.scale
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 顶楼为多张图时计数器
|
|
|
+ countRf(len) {
|
|
|
+ this.count++
|
|
|
+ if (len == this.count) {
|
|
|
+ this.readGraph()
|
|
|
+ } else {
|
|
|
+ console.log('所有图片未加载完成')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearGraphy() {
|
|
|
+ if (this.view) {
|
|
|
+ this.view.scene = null
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.view = new FloorView(`canvas${this.id}`)
|
|
|
+ },
|
|
|
+ listChange(item, ev) {
|
|
|
+ // if (ev[0].length) {
|
|
|
+ // let selectItem1 = ev[0][0],
|
|
|
+ // location = selectItem1.data.AttachObjectIds[0] ? selectItem1.data.AttachObjectIds[0].id : ''
|
|
|
+ // // 空间类型都可打开弹窗(除防火分区 编号100131,商管办公室 编号100112,铺装石材 编号100129)
|
|
|
+ // if (selectItem1.data.GraphElementType == 'Zone') {
|
|
|
+ // if (
|
|
|
+ // selectItem1.data.GraphElementId != '100131' &&
|
|
|
+ // selectItem1.data.GraphElementId != '100112' &&
|
|
|
+ // selectItem1.data.GraphElementId != '100129'
|
|
|
+ // ) {
|
|
|
+ // if (location) {
|
|
|
+ // this.$refs.boxRoom.open({ name: selectItem1.name, type: this.type, location: location })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // // // 选中电井设置电井关联的商铺高亮
|
|
|
+ // // this.setHightLight(ev[0])
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // this.clearHightLight()
|
|
|
+ // }
|
|
|
+ if (ev[0].length) {
|
|
|
+ if (!(ev[0][0] instanceof SPolygonItem || ev[0][0] instanceof TipelineItem || ev[0][0] instanceof SImageLegendItem)) {
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ this.clearHightLight()
|
|
|
+ },
|
|
|
+ // 选中电井关联的商铺高亮
|
|
|
+ setHightLight(arr) {
|
|
|
+ this.clearHightLight()
|
|
|
+ arr.forEach((item) => {
|
|
|
+ let location = item.data.AttachObjectIds[0] ? item.data.AttachObjectIds[0].id : ''
|
|
|
+ // 添加了位置类型并且选中的类型为电井类型
|
|
|
+ if (
|
|
|
+ (item.data.GraphElementId == '100050' ||
|
|
|
+ item.data.GraphElementId == '100055' ||
|
|
|
+ item.data.GraphElementId == '100056' ||
|
|
|
+ item.data.GraphElementId == '100057') &&
|
|
|
+ location
|
|
|
+ ) {
|
|
|
+ if (this.wellMap.hasOwnProperty(location)) {
|
|
|
+ this.wellMap[location].forEach((item) => {
|
|
|
+ item.highLightFlag = true
|
|
|
+ item.zOrder = 30
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ let getParams = {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ floor: this.floorid,
|
|
|
+ keyword: `${location}:wellnum;`,
|
|
|
+ }
|
|
|
+ queryShops({ getParams }).then((res) => {
|
|
|
+ let shopsnumList = []
|
|
|
+ let shopsnumItemList = []
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ for (let floor in res.data[0]) {
|
|
|
+ if (res.data[0][floor].length) {
|
|
|
+ res.data[0][floor].forEach((v) => {
|
|
|
+ shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (shopsnumList.length) {
|
|
|
+ this.fParser.spaceList.forEach((item) => {
|
|
|
+ if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
|
|
|
+ item.highLightFlag = true
|
|
|
+ item.zOrder = 30
|
|
|
+ shopsnumItemList.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.wellMap[location] = shopsnumItemList
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 清除电井关联商铺的高亮状态
|
|
|
+ clearHightLight() {
|
|
|
+ ItemColor.spaceHighColor = new SColor('#FBF2CC')
|
|
|
+ // for (let key in this.wellMap) {
|
|
|
+ // this.wellMap[key].forEach((item) => {
|
|
|
+ // item.highLightFlag = false
|
|
|
+ // item.zOrder = ItemOrder.spaceOrder
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ this.fParser.spaceList.forEach((item) => {
|
|
|
+ item.highLightFlag = false
|
|
|
+ item.zOrder = ItemOrder.spaceOrder
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 适配底图到窗口
|
|
|
+ fit() {
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ },
|
|
|
+ // 保存为png
|
|
|
+ savePng() {
|
|
|
+ // this.view.saveImage(`${this.loadName}.png`, 'png')
|
|
|
+ this.view.saveImageSize(`${this.loadName}.png`, 'png', 1920 * 2, 1080 * 2)
|
|
|
+ //console.log(`${this.loadName}.png`)
|
|
|
+ },
|
|
|
+ // 保存为svg
|
|
|
+ saveSvg() {
|
|
|
+ this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
|
|
|
+ },
|
|
|
+ // 保存为json
|
|
|
+ saveJson() {
|
|
|
+ this.view.saveFloorJson(`${this.loadName}.json`)
|
|
|
+ },
|
|
|
+ // 缩放
|
|
|
+ scale(val) {
|
|
|
+ if (!this.view) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let scale = this.view.scale
|
|
|
+ this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
|
|
|
+ },
|
|
|
+ // 小眼睛控制显示铺位名称
|
|
|
+ showText(val) {
|
|
|
+ // this.topologyParser.zoneLegendList.forEach(t => {
|
|
|
+ // t.showText = val
|
|
|
+ // })
|
|
|
+ this.fParser.spaceList.forEach((t) => {
|
|
|
+ t.showBaseName = val
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 读取数据
|
|
|
+ readGroup(FloorID) {
|
|
|
+ const data = {
|
|
|
+ BuildingID: '1',
|
|
|
+ FloorID: FloorID,
|
|
|
+ categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
|
|
|
+ projectId: this.urlMsg.ProjectID,
|
|
|
+ Pub: true,
|
|
|
+ }
|
|
|
+ return readGroup(data)
|
|
|
+ },
|
|
|
+ // 获取图最大最小值
|
|
|
+ getGraphDetail() {
|
|
|
+ const categoryId = this.categoryId ? this.categoryId : this.$cookie.get('categoryId')
|
|
|
+ const data = {
|
|
|
+ Filters: `categoryId='${categoryId}';projectId='${this.urlMsg.ProjectID}';BuildingID='1';FloorID='${this.floorid}';isPub=true`,
|
|
|
+ }
|
|
|
+ return graphQuery(data)
|
|
|
+ },
|
|
|
+ // 地图尺寸
|
|
|
+ mapSize() {
|
|
|
+ this.canvasWidth = this.$refs.graphycolor.offsetWidth
|
|
|
+ if (window.screen.height == '768') {
|
|
|
+ this.canvasHeight = this.$refs.graphycolor.offsetHeight - 100
|
|
|
+ } else {
|
|
|
+ this.canvasHeight = 570
|
|
|
+ }
|
|
|
+ // 弹窗中底图高度适配
|
|
|
+ if (this.modalHeight) {
|
|
|
+ this.canvasHeight = this.modalHeight
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getEvent() {
|
|
|
+ bus.$on('changeShow', (res) => {
|
|
|
+ this.topologyParser &&
|
|
|
+ this.topologyParser.zoneLegendList.forEach((t) => {
|
|
|
+ let id = t.data.GraphElementId
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ })
|
|
|
+ // this.topologyParser.textMarkerList.forEach(t => {
|
|
|
+ // let id = t.data.GraphElementId
|
|
|
+ // t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ // })
|
|
|
+ // this.topologyParser.imageMarkerList.forEach(t => {
|
|
|
+ // let id = t.data.GraphElementId
|
|
|
+ // t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ // })
|
|
|
+ // this.topologyParser.lineMarkerList.forEach(t => {
|
|
|
+ // let id = t.data.GraphElementId
|
|
|
+ // t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ // })
|
|
|
+ this.topologyParser &&
|
|
|
+ this.topologyParser.imageLegendList.forEach((t) => {
|
|
|
+ let id = t.data.GraphElementId
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ })
|
|
|
+ this.topologyParser &&
|
|
|
+ this.topologyParser.relationList.forEach((t) => {
|
|
|
+ let id = t.data.GraphElementId || t.data.GraphElementID
|
|
|
+ t.maskFlag = !(res.indexOf(id) > -1)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 处理popover显隐
|
|
|
+ * 当点击位置不在canvas内部时 ( 如点击 页面空白,图例,楼层,设备设施左侧列表项时),将visible置为false,隐藏popover
|
|
|
+ */
|
|
|
+ handlePopover(e) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (!this.$refs.graphycolor.contains(e.target)) {
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ this.showStatusText = false
|
|
|
+ this.statusText = ''
|
|
|
+ // 关闭message提示
|
|
|
+ if (this.message) {
|
|
|
+ this.message.close()
|
|
|
+ this.message = null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 设备状态列, 状态为停用或已拆除时,样式红色
|
|
|
+ */
|
|
|
+ tableCellClassName({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (columnIndex === 2 && this.statusDisabled.includes(row.sb_status)) {
|
|
|
+ return 'status-disabled'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'view.scale': {
|
|
|
+ handler(n) {
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
+ let s = (n * 10) / this.view.minScale
|
|
|
+ this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ haveFengMap() {
|
|
|
+ this.init(this.floorid)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.mapSize()
|
|
|
+ this.getEvent()
|
|
|
+ // 添加监听点击事件,处理popover显隐
|
|
|
+ window.addEventListener('click', this.handlePopover, false)
|
|
|
+ this.$once('hook:beforeDestroy', () => {
|
|
|
+ window.removeEventListener('click', this.handlePopover)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // document.addEventListener("mousedown", () => {
|
|
|
+ // this.visible = false;
|
|
|
+ // })
|
|
|
+ this.urlMsg = {
|
|
|
+ categoryId: this.$cookie.get('categoryId'),
|
|
|
+ ProjectID: this.plazaId,
|
|
|
+ BuildingID: '1',
|
|
|
+ FloorID: this.$cookie.get('floorMapId') || 'f1',
|
|
|
+ fmapID: this.fmapID,
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+#floor_base {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ .fengMap {
|
|
|
+ position: fixed;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .strip-bottom {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 40px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .popStyle {
|
|
|
+ position: fixed;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+a:hover {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.el-popover {
|
|
|
+ .el-table {
|
|
|
+ tr {
|
|
|
+ .equip-detail-btn {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tr:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ .equip-detail-btn {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ color: #025baa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pointList {
|
|
|
+ max-height: 235px;
|
|
|
+ overflow-y: auto;
|
|
|
+ text-align: right;
|
|
|
+ li {
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ padding: 0 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
+ span {
|
|
|
+ float: left;
|
|
|
+ width: 260px;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ display: none;
|
|
|
+ color: #025baa;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:hover {
|
|
|
+ background-color: #f5f6f7;
|
|
|
+ a {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button--primary {
|
|
|
+ background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
|
|
|
+ }
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
|
|
|
+ .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
|
|
|
+ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-top:last-child,
|
|
|
+ .el-tabs--top .el-tabs__item.is-bottom:last-child,
|
|
|
+ .el-tabs--top .el-tabs__item.is-top:last-child {
|
|
|
+ padding-right: 16px;
|
|
|
+ }
|
|
|
+ .el-tabs__nav-wrap::after {
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ color: #025baa !important;
|
|
|
+ border-color: #025baa !important;
|
|
|
+ background: rgba(2, 91, 170, 0.15);
|
|
|
+ }
|
|
|
+ .el-tabs__item {
|
|
|
+ padding: 5px 16px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ border: 1px solid rgba(195, 199, 203, 1);
|
|
|
+ }
|
|
|
+ .el-tabs__active-bar {
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-tabs__item:last-child {
|
|
|
+ border-radius: 0px 4px 4px 0px;
|
|
|
+ }
|
|
|
+ /deep/ .el-tabs__item:nth-child(2) {
|
|
|
+ border-radius: 4px 0px 0px 4px;
|
|
|
+ }
|
|
|
+ // 设备状态
|
|
|
+ .status-disabled {
|
|
|
+ color: #c0c4cc !important;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 警告message样式修改
|
|
|
+.floor-map-warning {
|
|
|
+ background-color: #ffa53d;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ /deep/ .el-icon-warning-outline {
|
|
|
+ font-weight: 600 !important;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ /deep/.el-icon-close {
|
|
|
+ color: #fff;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|