Browse Source

Merge branch 'graphEq' of http://39.106.8.246:3003/web/ibms into graphEq

haojianlong 4 years ago
parent
commit
20e8b285dc
2 changed files with 167 additions and 67 deletions
  1. 12 5
      src/components/ledger/lib/floorCascader.vue
  2. 155 62
      src/views/ledger/facility/batchPoint.vue

+ 12 - 5
src/components/ledger/lib/floorCascader.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="buildFloor">
         <span class="buildFloor">建筑楼层</span>
-        <el-cascader placeholder="请选择建筑楼层" :options="options" v-model="value" filterable size="small" :style="isWidth ? '' : 'width:160px;'" @change="changeCascader"></el-cascader>
+        <el-cascader ref="floorCascader" placeholder="请选择建筑楼层" :options="options" v-model="value" filterable size="small" :style="isWidth ? '' : 'width:160px;'" @change="changeCascader"></el-cascader>
     </div>
 </template>
 <script>
@@ -77,7 +77,9 @@
                         "BuildID",
                         "FloorID",
                         "FloorLocalName",
-                        "FloorSequenceID"
+                        "FloorSequenceID",
+                        "StructureInfo",
+                        "Outline"
                     ]
                 }
                 let promise1 = new Promise((resolve, reject) => {
@@ -112,7 +114,9 @@
                                     build.children.push({
                                         value: floor.FloorID,
                                         label: floor.FloorLocalName,
-                                        FloorSequenceID: floor.FloorSequenceID
+                                        FloorSequenceID: floor.FloorSequenceID,
+                                        StructureInfo: floor.StructureInfo || {},
+                                        Outline: floor.Outline || null
                                     })
                                 } else {
                                     build.children = []
@@ -125,7 +129,9 @@
                                     },{
                                         value: floor.FloorID,
                                         label: floor.FloorLocalName,
-                                        FloorSequenceID: floor.FloorSequenceID
+                                        FloorSequenceID: floor.FloorSequenceID,
+                                        StructureInfo: floor.StructureInfo || {},
+                                        Outline: floor.Outline || null
                                     })
                                 }
                             }
@@ -136,7 +142,8 @@
             },
             //改变item
             changeCascader(value) {
-                this.$emit("change", value)
+                let node = this.$refs.floorCascader.getCheckedNodes();
+                this.$emit("change", value, node[0].data);
             }
         }
     };

+ 155 - 62
src/views/ledger/facility/batchPoint.vue

@@ -9,7 +9,7 @@
 		</el-row>
 		<el-row class="main-container">
 			<el-row class="main-container-header">
-				<el-select v-model="isPoint" @change="getEquipData" placeholder="请选择" style="width: 100px;margin-left: 10px;">
+				<el-select v-model="isPoint" @change="handleChangeIspoint" placeholder="请选择" style="width: 100px;margin-left: 10px;">
 					<el-option v-for="item in isPointOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
 				</el-select>
 				<el-input
@@ -17,7 +17,7 @@
 					placeholder="请输入设备标识关键字"
 					clearable
 					suffix-icon="el-icon-search"
-					@change="getEquipData"
+					@change="handleChangeKeyword"
 					v-model="keyword"
 				></el-input>
 			</el-row>
@@ -26,23 +26,25 @@
 					<el-select v-model="showName" placeholder="请选择" style="width: 100%;">
 						<el-option v-for="item in showNameOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
 					</el-select>
-					<ul class="equip-list">
-						<el-scrollbar style="height:100%;">
-							<!-- <li class="equip-item" title="全选">
-								<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
-							</li>
-							<el-checkbox-group v-model="checkedEquip" @change="handleCheckedEquipChange">
-								<li class="equip-item" v-for="item in equipList" :key="item.localId" :title="item[showName]">
-									<el-checkbox :label="item.localId">{{item[showName]}}</el-checkbox>
+					<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]">
+									<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>
 								</li>
-							</el-checkbox-group> -->
-							<li class="equip-item" v-for="item in equipList" :key="item.EquipID" :title="item[showName]">
-								<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>
-							</li>
+								<p style="text-align: center;" v-if="loading">加载中...</p>
+								<p style="text-align: center;" v-if="noMore">没有更多了</p>
+							</ul>
 						</el-scrollbar>
-					</ul>
+						<div v-show="!equipList.length" class="no-data">
+							<div class="position-icon">
+								<i class="icon-wushuju iconfont"></i>
+								数据暂无
+							</div>
+						</div>
+					</div>
 				</el-col>
 				<el-col id="canvasBox" class="container-box-right" :span="21" v-loading="canvasLoading">
 					<div v-show="showCanvas" style="height: 100%;">
@@ -62,7 +64,8 @@
 <script>
 import floorCascader from "@/components/ledger/lib/floorCascader";
 import myCascader from "@/components/ledger/lib/cascader";
-import { queryEquip } from '@/api/scan/request'
+import { queryEquip } from '@/api/scan/request';
+import { LocationPointScene, FloorView, Opt, SpaceItem, ZoneItem } from "@saga-web/cad-engine/lib";
 import { mapGetters } from "vuex";
 export default {
   components: {
@@ -73,6 +76,8 @@ export default {
     return {
 		buildId: "", //建筑Id
 		floorId: "", //楼层Id
+		floorMap: "", //楼层平面图地址
+		floorOutline: null, //楼层平面图蒙版地址
 		classCode: "", //设备类别
 		isPoint: "all", //是否有坐标(全部-all、有坐标-yes、无坐标-no)
 		keyword: "", //设备标识关键字
@@ -82,7 +87,9 @@ export default {
 		checkedEquip: [], //选中的设备
 		cadWidth: 800,
 		cadHeight: 800,
-		showCanvas: true, //是否有底图数据
+		view: "",
+      	scene: null,
+		showCanvas: false, //是否有底图数据
 		canvasLoading: false,
 		isPointOptions: [{
           value: "all",
@@ -104,11 +111,21 @@ export default {
           value: "CADID",
           label: "显示图纸编码"
 		}],
-		equipList: []
+		equipList: [],
+		loading: false,
+		pageNumber: 1,
+		pageSize: 50,
+		total: 0
 	};
   },
   computed: {
-    ...mapGetters("layout", ["projectId", "projects"])
+	...mapGetters("layout", ["projectId", "projects"]),
+	noMore () {
+		return this.equipList.length >= this.total
+	},
+	disabled () {
+		return this.loading || this.noMore
+	}
   },
   created() {},
   mounted() {
@@ -122,12 +139,13 @@ export default {
 	},
 	//获取所以主体数据---用于维护信息
 	getEquipData() {
-		if (this.classCode) {
+		if (this.classCode && this.floorId && (this.floorId != "noKnow" || this.floorId != "all")) {
+			this.loading = true;
 			let params = {
 				Filters: `category='${this.classCode}'`,
-				PageSize: 1000,
+				PageSize: this.pageSize,
 				Orders: 'createTime desc, EquipID desc',
-				PageNumber: 1,
+				PageNumber: this.pageNumber,
 				Projection: ['Category', 'EquipLocalName', 'EquipLocalID', 'EquipID', 'BIMID', 'CADID', 'LocationJson', 'BIMLocation'],
 			}
 			if (this.buildId == 'noKnow') {
@@ -153,12 +171,35 @@ export default {
 			}
 
 			queryEquip(params, (res) => {
-				this.equipList = res.Content;
+				this.equipList = this.equipList.concat(res.Content);
+				if (this.view && this.view.scene) {
+					res.Content.forEach(item =>{
+						if (item.LocationJson && item.LocationJson.X && item.LocationJson.Y) {
+							this.scene.addMarker({X: item.LocationJson.X, Y: -item.LocationJson.Y});
+						}
+					});
+					this.view.update();
+				}
+				this.total = res.Total;
+				if (!this.noMore) { //判断是否有更多数据
+					this.pageNumber++;
+				}
+				this.loading = false;
 			})
 		}
 	},
+	//初始化条件并查询设备
+	initParams() {
+		this.pageNumber = 1;
+		this.total = 0;
+		this.equipList = [];
+		this.clearMark();
+		this.getEquipData();
+	},
     //修改楼层
-    changeFloor(value) {
+    changeFloor(value, data) {
+		this.showCanvas = false;
+		this.clearGraphy();
 		if (value[0]) {
 			this.buildId = value[0];
 		}
@@ -167,8 +208,20 @@ export default {
 		} else {
 			this.floorId = "";
 		}
-		this.getEquipData();
-    },
+		if (data.StructureInfo && data.StructureInfo.FloorMap) {
+			this.floorMap = data.StructureInfo.FloorMap;
+			this.showCanvas = true;
+			this.getGraphy();
+		} else {
+			this.initParams();
+			this.floorMap = "";
+		}
+		if (data.Outline && data.Outline.length) {
+			this.floorOutline = data.Outline;
+		} else {
+			this.floorOutline = null;
+		}
+	},
     //修改设备族
     changeDevice(value) {
 		if (value.code) {
@@ -176,20 +229,70 @@ export default {
 		} else {
 			this.classCode = "";
 		}
-		this.getEquipData();
+		this.initParams();
+	},
+	//切换是否有坐标
+	handleChangeIspoint() {
+		this.initParams();
+	},
+	//检索关键字
+	handleChangeKeyword() {
+		this.initParams();
 	},
-	//设备列表全选/取消全选控制
-	handleCheckAllChange(val) {
-		this.checkedEquip = val ? this.equipList.map(item => {return item.localId}) : [];
-		this.isIndeterminate = false;
-		console.log(val);
+	// 获取底图
+    getGraphy() {
+      this.scene = new LocationPointScene();
+	  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 => {
+          this.getGraphtSuc(res)
+        })
+      } else {
+        this.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.floorMap}`).then(res => {
+          this.getGraphtSuc(res)
+        })
+      }
 	},
-	//勾选设备列表
-	handleCheckedEquipChange(val) {
-		let checkedCount = val.length;
-		this.checkAll = checkedCount === this.equipList.length;
-		this.isIndeterminate = checkedCount > 0 && checkedCount < this.equipList.length;
-		console.log(val);
+	getGraphtSuc(res) {
+	  this.initParams();
+      this.canvasLoading = false;
+      if (res == 'error') {
+        this.FloorMap = '';
+        this.$message.warning('数据解析异常');
+        return;
+      }
+      this.view.scene = this.scene;
+      // 蒙版
+      if (this.floorOutline) {
+        let newArr = this.floorOutline.map(t => {
+          return new SPoint(t.X, t.Y);
+        })
+        this.scene.addSceneMark(newArr)
+      }
+	  this.scene.isSpaceSelectable = false;
+	  this.view.fitSceneToView();
+    //   this.view.minScale = this.view.scale;
+    //   if (this.$refs.canvasFun) {
+    //     this.$refs.canvasFun.everyScale = this.view.scale;
+	//   }
+    },
+	//清空平面图
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null;
+        return
+	  }
+      this.view = new FloorView("floorCanvas");
+	},
+	//清空标记
+	clearMark() {
+		if (this.view && this.view.scene) {
+			this.scene.markerList.forEach((t) => {
+				this.scene.removeItem(t)
+			})
+			this.scene.markerList = [];
+			this.view.update();
+		}
 	},
   },
   watch: {
@@ -247,16 +350,6 @@ export default {
 					.equip-item-icon {
 						float: right;
 					}
-					.el-checkbox {
-						width: 100%;
-						/deep/ .el-checkbox__label {
-							width: calc(100% - 20px);
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-							vertical-align: middle;
-						}
-					}
 				}
 				.equip-item:hover {
 					background-color: #f5f7fa;
@@ -265,20 +358,20 @@ export default {
 		}
 		.container-box-right {
 			height: 100%;
-			.no-data {
-				height: 100%;
-				text-align: center;
-				box-sizing: border-box;
-				position: relative;
-				.position-icon {
-					position: absolute;
-					top: 50%;
-					left: 50%;
-					transform: translate(-50%, -50%);
-				}
-			}
 		}
 	}
   }
 }
+.no-data {
+	height: 100%;
+	text-align: center;
+	box-sizing: border-box;
+	position: relative;
+	.position-icon {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}
 </style>