|
@@ -29,7 +29,13 @@
|
|
|
<div class="equip-list">
|
|
|
<el-scrollbar style="height:100%;" v-show="equipList.length">
|
|
|
<ul v-infinite-scroll="getEquipData" infinite-scroll-disabled="disabled">
|
|
|
- <li class="equip-item" v-for="item in equipList" :key="item.EquipID" :title="item[showName]" @click="handleSelectIcon(item)">
|
|
|
+ <li class="equip-item"
|
|
|
+ v-for="item in equipList"
|
|
|
+ :class="{'equip-item-selected': item.selected}"
|
|
|
+ :key="item.EquipID"
|
|
|
+ :title="item[showName]"
|
|
|
+ @click="handleSelectIcon(item)"
|
|
|
+ >
|
|
|
<p class="equip-item-text">{{item[showName] || '--'}}</p>
|
|
|
<i v-if="item.BIMLocation" class="iconfont icon-hook equip-item-icon" style="color: #67C23A;"></i>
|
|
|
<i v-else class="iconfont icon-cross equip-item-icon" style="color: #F56C6C;"></i>
|
|
@@ -48,7 +54,7 @@
|
|
|
</el-col>
|
|
|
<el-col id="canvasBox" class="container-box-right" :span="21" v-loading="canvasLoading">
|
|
|
<div v-show="showCanvas" style="height: 100%;">
|
|
|
- <canvas :height="cadHeight" :width="cadWidth" id="floorCanvas"></canvas>
|
|
|
+ <canvas :height="cadHeight" :width="cadWidth" id="floorCanvas" ref="graphy"></canvas>
|
|
|
</div>
|
|
|
<div class="no-data" v-show="!showCanvas">
|
|
|
<div class="position-icon">
|
|
@@ -59,6 +65,23 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-row>
|
|
|
+ <el-popover ref='popover' placement='right' trigger='manual' v-model='visible' width='400'>
|
|
|
+ <div style="text-align: right;margin-bottom: 10px;">
|
|
|
+ <span style="float: left;">设定Z轴高度</span>
|
|
|
+ <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <p>距地面高度:{{equipZ}}m</p>
|
|
|
+ </el-row>
|
|
|
+ <div style="padding: 10px 15px;">
|
|
|
+ <el-slider v-model="equipZ" :max="maxHeight" :step="0.0001" show-input></el-slider>
|
|
|
+ </div>
|
|
|
+ <el-row style="text-align: right;">
|
|
|
+ <el-button type="primary" size="mini" @click="visible = false">取消</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="handleUpdateZ">确认</el-button>
|
|
|
+ </el-row>
|
|
|
+ </el-popover>
|
|
|
+ <span class='popStyle' :style='popoverPosition' v-popover:popover></span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -74,6 +97,14 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ visible: false,
|
|
|
+ equipZ: 0,
|
|
|
+ maxHeight: 999,
|
|
|
+ popoverPosition: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ },
|
|
|
+ selectedIcon: null,
|
|
|
buildId: "", //建筑Id
|
|
|
floorId: "", //楼层Id
|
|
|
floorMap: "", //楼层平面图地址
|
|
@@ -132,6 +163,11 @@ export default {
|
|
|
mounted() {
|
|
|
this.cadWidth = document.getElementById('canvasBox').offsetWidth;
|
|
|
this.cadHeight = document.getElementById('canvasBox').offsetHeight;
|
|
|
+ // 添加监听点击事件,处理popover显隐
|
|
|
+ window.addEventListener('click', this.handlePopover, false)
|
|
|
+ this.$once('hook:beforeDestroy', () => {
|
|
|
+ window.removeEventListener('click', this.handlePopover)
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
// 返回
|
|
@@ -154,9 +190,64 @@ export default {
|
|
|
callback();
|
|
|
}
|
|
|
},
|
|
|
- // 点击列表设备选中平面图设备
|
|
|
- handleSelectIcon(item) {
|
|
|
-
|
|
|
+ // 点击列表设备
|
|
|
+ handleSelectIcon(equip) {
|
|
|
+ // 选中样式处理
|
|
|
+ this.equipList.forEach(item => {
|
|
|
+ if (equip.EquipID === item.EquipID) {
|
|
|
+ item.selected = true;
|
|
|
+ } else {
|
|
|
+ item.selected = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 关联平面图设备选中
|
|
|
+ if (this.scene) {
|
|
|
+ this.scene.iconList.forEach(item => {
|
|
|
+ if (item.data.id === equip.EquipID) {
|
|
|
+ this.scene.selectContainer.setItem(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClickIcon(item, events) {
|
|
|
+ const e = events[0];
|
|
|
+ this.selectedIcon = item;
|
|
|
+ if (item.data.Z) {
|
|
|
+ this.equipZ = (item.data.Z / 100);
|
|
|
+ } else {
|
|
|
+ this.equipZ = 0;
|
|
|
+ }
|
|
|
+ this.visible = false
|
|
|
+ this.$nextTick(() =>{
|
|
|
+ this.popoverPosition.top = `${e.clientY}px`;
|
|
|
+ this.popoverPosition.left = `${e.clientX}px`;
|
|
|
+ this.visible = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 修改设备Z坐标
|
|
|
+ handleUpdateZ() {
|
|
|
+ if (this.selectedIcon.data.Z !== this.equipZ * 100) {
|
|
|
+ this.selectedIcon.data.Z = this.equipZ * 100;
|
|
|
+ this.isChange = true;
|
|
|
+ this.visible = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ listChange(item, ev) {
|
|
|
+ if (!ev[0].length) {
|
|
|
+ this.visible = false;
|
|
|
+ this.selectedIcon = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 处理popover显隐
|
|
|
+ * 当点击位置不在canvas内部时 ( 如点击 页面空白,图例,楼层,设备设施左侧列表项时),将visible置为false,隐藏popover
|
|
|
+ */
|
|
|
+ handlePopover(e) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (!this.$refs.graphy.contains(e.target)) {
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
//获取所以主体数据---用于维护信息
|
|
|
getEquipData() {
|
|
@@ -192,7 +283,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
queryEquip(params, (res) => {
|
|
|
- this.equipList = this.equipList.concat(res.Content);
|
|
|
+ this.equipList = this.equipList.concat(res.Content.map(item => {item.selected = false; return item;}));
|
|
|
if (this.view && this.view.scene) {
|
|
|
res.Content.forEach(item =>{
|
|
|
if (item.LocationJson && item.LocationJson.X && item.LocationJson.Y) {
|
|
@@ -206,6 +297,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
this.scene.iconMove(this, this.iconMove);
|
|
|
+ this.scene.iconClick(this, this.handleClickIcon);
|
|
|
this.view.update();
|
|
|
}
|
|
|
this.total = res.Total;
|
|
@@ -250,7 +342,12 @@ export default {
|
|
|
} else {
|
|
|
this.initParams();
|
|
|
this.floorMap = "";
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (data.StructureInfo && data.StructureInfo.Height) {
|
|
|
+ this.maxHeight = data.StructureInfo.Height;
|
|
|
+ } else {
|
|
|
+ this.maxHeight = 999;
|
|
|
+ }
|
|
|
if (data.Outline && data.Outline.length) {
|
|
|
this.floorOutline = data.Outline;
|
|
|
} else {
|
|
@@ -294,6 +391,7 @@ export default {
|
|
|
// 获取底图
|
|
|
getGraphy() {
|
|
|
this.scene = new LocationPointScene();
|
|
|
+ this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
|
this.canvasLoading = true;
|
|
|
if (this.floorMap.split('.')[1].toString() == 'png' || this.floorMap.split('.')[1].toString() == 'jpg') {
|
|
|
this.scene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${this.floorMap}`, res => {
|
|
@@ -353,6 +451,7 @@ export default {
|
|
|
@normal-border-color: #e4e4e4;
|
|
|
@normal-border-active-color: #e8e8e8;
|
|
|
#manageTenantZone {
|
|
|
+ position: relative;
|
|
|
height: 100%;
|
|
|
.main-container {
|
|
|
margin-top: 10px;
|
|
@@ -397,7 +496,10 @@ export default {
|
|
|
.equip-item-icon {
|
|
|
float: right;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+ .equip-item-selected {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ }
|
|
|
.equip-item:hover {
|
|
|
background-color: #f5f7fa;
|
|
|
}
|
|
@@ -408,6 +510,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .popStyle {
|
|
|
+ position: fixed;
|
|
|
+ }
|
|
|
}
|
|
|
.no-data {
|
|
|
height: 100%;
|