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