Browse Source

批量维护设备位置

zhangyu 4 years ago
parent
commit
8d1aaeabe7
1 changed files with 113 additions and 8 deletions
  1. 113 8
      src/views/ledger/facility/batchPoint.vue

+ 113 - 8
src/views/ledger/facility/batchPoint.vue

@@ -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%;