|
@@ -1,14 +1,51 @@
|
|
|
<template>
|
|
|
- <div id="manageTenantZone">
|
|
|
- <el-row style="margin:5px 0 0 0;">
|
|
|
- <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goback"></el-button>
|
|
|
- <floor-cascader @change="changeFloor"></floor-cascader>
|
|
|
- <my-cascader ref="cascader" @change="changeDevice"></my-cascader>
|
|
|
- <el-button style="float:right;margin-top:1px;">取消</el-button>
|
|
|
- <el-button style="float:right;margin-top:1px;margin-right:10px;">确认</el-button>
|
|
|
- </el-row>
|
|
|
- <el-row class="main-container"></el-row>
|
|
|
- </div>
|
|
|
+ <div id="manageTenantZone">
|
|
|
+ <el-row style="margin:5px 0 0 0;">
|
|
|
+ <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goback"></el-button>
|
|
|
+ <floor-cascader @change="changeFloor"></floor-cascader>
|
|
|
+ <my-cascader ref="cascader" @change="changeDevice"></my-cascader>
|
|
|
+ <el-button style="float:right;margin-top:1px;">取消</el-button>
|
|
|
+ <el-button style="float:right;margin-top:1px;margin-right:10px;">确认</el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="main-container">
|
|
|
+ <el-row class="main-container-header">
|
|
|
+ <el-select v-model="isPoint" 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 style="width:250px;margin-left: 10px;" placeholder="请输入设备标识关键字" clearable suffix-icon="el-icon-search" v-model="keyword"></el-input>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="main-container-box">
|
|
|
+ <el-col :span="3" class="container-box-left">
|
|
|
+ <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>
|
|
|
+ </li>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-scrollbar>
|
|
|
+ </ul>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ <div class="no-data" v-show="!showCanvas">
|
|
|
+ <div class="position-icon">
|
|
|
+ <i class="icon-wushuju iconfont"></i>
|
|
|
+ 数据暂无
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import floorCascader from "@/components/ledger/lib/floorCascader";
|
|
@@ -20,20 +57,100 @@ export default {
|
|
|
myCascader
|
|
|
},
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ isPoint: "all", //是否有坐标(全部-all、有坐标-yes、无坐标-no)
|
|
|
+ keyword: "", //设备标识关键字
|
|
|
+ showName: "localName", //显示名称
|
|
|
+ isIndeterminate: false, //全选样式显示
|
|
|
+ checkAll: false, //是否全选
|
|
|
+ checkedEquip: [], //选中的设备
|
|
|
+ cadWidth: 800,
|
|
|
+ cadHeight: 800,
|
|
|
+ showCanvas: true, //是否有底图数据
|
|
|
+ canvasLoading: false,
|
|
|
+ isPointOptions: [{
|
|
|
+ value: "all",
|
|
|
+ label: "全部"
|
|
|
+ }, {
|
|
|
+ value: "yes",
|
|
|
+ label: "有坐标"
|
|
|
+ }, {
|
|
|
+ value: "no",
|
|
|
+ label: "无坐标"
|
|
|
+ }],
|
|
|
+ showNameOptions: [{
|
|
|
+ value: "localName",
|
|
|
+ label: "显示设备本地名称"
|
|
|
+ }, {
|
|
|
+ value: "localId",
|
|
|
+ label: "显示设备本地编码"
|
|
|
+ }, {
|
|
|
+ value: "cadId",
|
|
|
+ label: "显示图纸编码"
|
|
|
+ }],
|
|
|
+ equipList: [{
|
|
|
+ localName: "低压开关柜#1",
|
|
|
+ localId: "dykgg1",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#2",
|
|
|
+ localId: "dykgg2",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#3",
|
|
|
+ localId: "dykgg3",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#4",
|
|
|
+ localId: "dykgg4",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#5",
|
|
|
+ localId: "dykgg5",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜低压开关柜低压开关柜低压开关柜#6",
|
|
|
+ localId: "dykgg6",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#7",
|
|
|
+ localId: "dykgg7",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#8",
|
|
|
+ localId: "dykgg8",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#9",
|
|
|
+ localId: "dykgg9",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#10",
|
|
|
+ localId: "dykgg10",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#11",
|
|
|
+ localId: "dykgg11",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }, {
|
|
|
+ localName: "低压开关柜#12",
|
|
|
+ localId: "dykgg12",
|
|
|
+ cadId: "ajfojfhweafalf14646ahfjsh"
|
|
|
+ }]
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters("layout", ["projectId", "projects"])
|
|
|
},
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
- // this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
- // this.canvasHeight = this.$refs.graphy.offsetHeight;
|
|
|
+ this.cadWidth = document.getElementById('canvasBox').offsetWidth;
|
|
|
+ this.cadHeight = document.getElementById('canvasBox').offsetHeight;
|
|
|
},
|
|
|
methods: {
|
|
|
// 返回
|
|
|
goback() {
|
|
|
- this.$router.push({ name: "facilityLedger" })
|
|
|
+ this.$router.push({ name: "facilityLedger" });
|
|
|
},
|
|
|
//修改楼层
|
|
|
changeFloor(value) {
|
|
@@ -41,12 +158,25 @@ export default {
|
|
|
},
|
|
|
//修改设备族
|
|
|
changeDevice(value) {
|
|
|
- console.log(value);
|
|
|
- }
|
|
|
+ console.log(value);
|
|
|
+ },
|
|
|
+ //设备列表全选/取消全选控制
|
|
|
+ handleCheckAllChange(val) {
|
|
|
+ this.checkedEquip = val ? this.equipList.map(item => {return item.localId}) : [];
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ //勾选设备列表
|
|
|
+ handleCheckedEquipChange(val) {
|
|
|
+ let checkedCount = val.length;
|
|
|
+ this.checkAll = checkedCount === this.equipList.length;
|
|
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.equipList.length;
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
projectId() {
|
|
|
- this.$router.push({ name: "facilityLedger" })
|
|
|
+ this.$router.push({ name: "facilityLedger" });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -61,7 +191,62 @@ export default {
|
|
|
background: #fff;
|
|
|
border: 1px solid @normal-border-color;
|
|
|
height: calc(100% - 53px);
|
|
|
- overflow: hidden;
|
|
|
+ overflow: hidden;
|
|
|
+ .main-container-header {
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid @normal-border-color;
|
|
|
+ }
|
|
|
+ .main-container-box {
|
|
|
+ height: calc(100% - 53px);
|
|
|
+ .container-box-left {
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid @normal-border-color;
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid #DCDFE6;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ .equip-list {
|
|
|
+ height: calc(100% - 32px);
|
|
|
+ /deep/ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .equip-item {
|
|
|
+ padding: 0 15px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|