|
@@ -8,22 +8,94 @@
|
|
|
<canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
|
|
|
</div>
|
|
|
<room-box ref='boxRoom'></room-box>
|
|
|
+ <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">
|
|
|
+ <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'></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> -->
|
|
|
+ </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' 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>
|
|
|
import { SFengParser } from '@saga-web/feng-map'
|
|
|
-import { SFloorParser, ItemOrder, ItemColor } from '@saga-web/big'
|
|
|
+import { SFloorParser, ItemOrder, ItemColor, SPolygonItem } 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/canvasFun'
|
|
|
import { readGroup, queryStatis } from '@/api/public'
|
|
|
-import { queryShops } from '@/api/equipmentList.js'
|
|
|
+import { queryShops, queryAsset } from '@/api/equipmentList.js'
|
|
|
import { STopologyParser } from '@/lib/parsers/STopologyParser'
|
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
|
-import { SImageItem, SImageShowType } from '@saga-web/graph/lib'
|
|
|
+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 { uuid } from "@/components/mapClass/until";
|
|
|
|
|
@@ -43,6 +115,20 @@ export default {
|
|
|
topologyParser: null, // 解析器数据
|
|
|
fParser: null, // 底图解析器
|
|
|
wellMap: {}, // 电井控制商铺映射
|
|
|
+ activeName: "equip",
|
|
|
+ popoverPosition: {
|
|
|
+ top: 0,
|
|
|
+ left: 0
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ eqLoading: true,
|
|
|
+ equipIds: [],
|
|
|
+ tabData: {
|
|
|
+ tableData: [],
|
|
|
+ pointData: []
|
|
|
+ },
|
|
|
+ activeItem: null,
|
|
|
+ showBtnWell: false
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
@@ -67,6 +153,107 @@ export default {
|
|
|
...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleClickLegendItem(item, events) {
|
|
|
+ this.tabData = {tableData: [], pointData: []};
|
|
|
+ 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.equipIds = [];
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ queryAsset({ data, postParams }).then(res => {
|
|
|
+ this.tabData.tableData = res.data.data;
|
|
|
+ this.eqLoading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查看浮层设备详情
|
|
|
+ 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.$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
|
|
@@ -221,6 +408,7 @@ export default {
|
|
|
// 多边形
|
|
|
this.topologyParser.zoneLegendList.forEach((t) => {
|
|
|
this.scene.addItem(t)
|
|
|
+ t.connect("legendItemClick", t, this.handleClickLegendItem);
|
|
|
})
|
|
|
// 增加文字
|
|
|
this.topologyParser.textMarkerList.forEach((t) => {
|
|
@@ -237,12 +425,14 @@ export default {
|
|
|
// 增加图标类图例
|
|
|
this.topologyParser.imageLegendList.forEach((t) => {
|
|
|
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
|
|
@@ -263,26 +453,35 @@ export default {
|
|
|
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) {
|
|
|
- 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 })
|
|
|
- }
|
|
|
- }
|
|
|
+ if (!(ev[0][0] instanceof SPolygonItem || ev[0][0] instanceof TipelineItem || ev[0][0] instanceof SImageLegendItem)) {
|
|
|
+ this.visible = false;
|
|
|
}
|
|
|
- // 选中电井设置电井关联的商铺高亮
|
|
|
- this.setHightLight(ev[0])
|
|
|
} else {
|
|
|
- this.clearHightLight()
|
|
|
+ this.visible = false;
|
|
|
}
|
|
|
+ this.clearHightLight()
|
|
|
},
|
|
|
// 选中电井关联的商铺高亮
|
|
|
setHightLight(arr) {
|
|
@@ -292,9 +491,9 @@ export default {
|
|
|
// 添加了位置类型并且选中的类型为电井类型
|
|
|
if (
|
|
|
(item.data.GraphElementId == '100050' ||
|
|
|
- item.data.GraphElementId == '100055' ||
|
|
|
- item.data.GraphElementId == '100056' ||
|
|
|
- item.data.GraphElementId == '100057') &&
|
|
|
+ item.data.GraphElementId == '100055' ||
|
|
|
+ item.data.GraphElementId == '100056' ||
|
|
|
+ item.data.GraphElementId == '100057') &&
|
|
|
location
|
|
|
) {
|
|
|
if (this.wellMap.hasOwnProperty(location)) {
|
|
@@ -454,6 +653,9 @@ export default {
|
|
|
this.getEvent()
|
|
|
},
|
|
|
created() {
|
|
|
+ // document.addEventListener("mousedown", () => {
|
|
|
+ // this.visible = false;
|
|
|
+ // })
|
|
|
this.urlMsg = {
|
|
|
categoryId: this.$cookie.get('categoryId'),
|
|
|
ProjectID: this.plazaId,
|
|
@@ -480,5 +682,103 @@ export default {
|
|
|
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;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
</style>
|