|
@@ -14,29 +14,29 @@
|
|
|
<el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
|
|
|
</div>
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClickTab">
|
|
|
- <el-tab-pane label="设备设施" name="equip">
|
|
|
- <el-table :data="tableData" max-height="235" style="width: 100%">
|
|
|
- <el-table-column prop="date" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
|
|
|
+ <el-tab-pane v-if="tabData.tableData.length" label="设备设施" name="equip">
|
|
|
+ <el-table :data="tabData.tableData" max-height="235" style="width: 100%">
|
|
|
+ <el-table-column prop="id" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
|
|
|
<el-table-column prop="name" label="设备简称" width="208" :show-overflow-tooltip='true'></el-table-column>
|
|
|
<el-table-column label="操作" width="50">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button @click="handleClickeq(scope.row)" type="text" size="small">查看</el-button>
|
|
|
+ <el-button @click="handleClickEquipDetail(scope.row)" type="text" size="small">查看</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <div style="text-align: right; margin-top: 10px;">
|
|
|
+ <!-- <div style="text-align: right; margin-top: 10px;">
|
|
|
<el-button size="mini" type="primary" @click="visible = false">查看详情</el-button>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="位置" name="point">
|
|
|
+ <el-tab-pane v-if="tabData.pointData.length" label="位置" name="point">
|
|
|
<ul class="pointList">
|
|
|
- <li v-for="point in pointList" :key="point.id">
|
|
|
+ <li v-for="point in tabData.pointData" :key="point.id">
|
|
|
<span :title="point.name">{{point.name}}</span>
|
|
|
- <a>查看</a>
|
|
|
+ <a @click="handleClickPointDeatil(point)">查看</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div style="text-align: right; margin-top: 10px;">
|
|
|
- <el-button size="mini" type="primary" @click="visible = false">查看控制商铺范围</el-button>
|
|
|
+ <div style="text-align: right; margin-top: 10px;" v-show="showBtnWell">
|
|
|
+ <el-button size="mini" type="primary" @click="handleClickHightLight(tabData.pointData)">查看控制商铺范围</el-button>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
@@ -83,31 +83,11 @@ export default {
|
|
|
left: 0
|
|
|
},
|
|
|
visible: false,
|
|
|
- tableData: [{
|
|
|
- date: '201602',
|
|
|
- name: '王小虎',
|
|
|
- }, {
|
|
|
- date: '201602',
|
|
|
- name: '王小虎',
|
|
|
- }, {
|
|
|
- date: '201602',
|
|
|
- name: '王小虎',
|
|
|
- }, {
|
|
|
- date: '201602',
|
|
|
- name: '王小虎',
|
|
|
- }, {
|
|
|
- date: '201602',
|
|
|
- name: '王小虎',
|
|
|
- }],
|
|
|
- pointList: [
|
|
|
- {id: "12564", name: "位置简称1"},
|
|
|
- {id: "12565", name: "位置十多个不舍得放假的国际公法借古讽今维护维护简称2"},
|
|
|
- {id: "12566", name: "位置简称3"},
|
|
|
- {id: "12567", name: "位置简称4"},
|
|
|
- {id: "12568", name: "位置简称5"},
|
|
|
- {id: "12569", name: "位置简称6"},
|
|
|
- {id: "12548", name: "位置简称7"}
|
|
|
- ]
|
|
|
+ tabData: {
|
|
|
+ tableData: [],
|
|
|
+ pointData: []
|
|
|
+ },
|
|
|
+ showBtnWell: false
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
@@ -133,17 +113,102 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
handleClickLegendItem(item, events) {
|
|
|
- const e = events[0];
|
|
|
+ this.tabData = {tableData: [], pointData: []};
|
|
|
+ this.showBtnWell = false;
|
|
|
this.visible = false;
|
|
|
- this.popoverPosition.top = `${e.clientY}px`;
|
|
|
- this.popoverPosition.left = `${e.clientX}px`;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.visible = true;
|
|
|
- })
|
|
|
+ console.log(item)
|
|
|
+ if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
|
|
|
+ const e = events[0];
|
|
|
+ item.data.AttachObjectIds.forEach(v => {
|
|
|
+ if (v.type == "Image") {
|
|
|
+ this.tabData.tableData.push(v);
|
|
|
+ } else if (v.type == "Zone") {
|
|
|
+ this.tabData.pointData.push(v);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.activeName = this.tabData.tableData.length?"equip":"point";
|
|
|
+ this.popoverPosition.top = `${e.clientY}px`;
|
|
|
+ this.popoverPosition.left = `${e.clientX}px`;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.tabData.tableData.length && !this.tabData.pointData.length) { //只绑定了设备
|
|
|
+ if (this.tabData.tableData.length == 1) { //绑定了一个设备(跳详情)
|
|
|
+
|
|
|
+ } else { //绑定了多个设备(跳表格)
|
|
|
+
|
|
|
+ }
|
|
|
+ } else if (!this.tabData.tableData.length && this.tabData.pointData.length) { //只绑定了位置
|
|
|
+ if (
|
|
|
+ item.data.GraphElementId == '100050' ||
|
|
|
+ item.data.GraphElementId == '100055' ||
|
|
|
+ item.data.GraphElementId == '100056' ||
|
|
|
+ item.data.GraphElementId == '100057'
|
|
|
+ ) { //判断是否为电井
|
|
|
+ this.visible = true;
|
|
|
+ this.showBtnWell = true;
|
|
|
+ } else {
|
|
|
+ if (this.tabData.pointData.length == 1) { //不是电井并且只绑定了一个位置(跳详情)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.visible = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if (this.tabData.tableData.length && this.tabData.pointData.length) { //既绑定了设备又绑定了位置
|
|
|
+ this.visible = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
+ // 切换浮层tab
|
|
|
handleClickTab() {
|
|
|
|
|
|
},
|
|
|
+ // 查看浮层设备详情
|
|
|
+ handleClickEquipDetail(equip) {},
|
|
|
+ // 查看浮层位置详情
|
|
|
+ handleClickPointDeatil(point) {},
|
|
|
+ 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
|
|
@@ -351,11 +416,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // 选中电井设置电井关联的商铺高亮
|
|
|
- this.setHightLight(ev[0])
|
|
|
- } else {
|
|
|
+ // // 选中电井设置电井关联的商铺高亮
|
|
|
+ // this.setHightLight(ev[0])
|
|
|
+ }
|
|
|
+ // else {
|
|
|
this.clearHightLight()
|
|
|
- }
|
|
|
+ // }
|
|
|
},
|
|
|
// 选中电井关联的商铺高亮
|
|
|
setHightLight(arr) {
|
|
@@ -365,9 +431,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)) {
|
|
@@ -559,6 +625,9 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
+a:hover {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
.el-popover {
|
|
|
.pointList {
|
|
|
max-height: 235px;
|