Browse Source

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

haojianlong 4 years ago
parent
commit
698a4edc32
1 changed files with 203 additions and 18 deletions
  1. 203 18
      src/views/ledger/facility/batchPoint.vue

+ 203 - 18
src/views/ledger/facility/batchPoint.vue

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