|
|
@@ -28,7 +28,7 @@
|
|
|
<div class="query-box clearfix">
|
|
|
<div class="query-item">
|
|
|
<label>设备标识关键字</label>
|
|
|
- <el-input placeholder="请输入设备标识关键字" v-model="form.keywords" class="input-with-select">
|
|
|
+ <el-input placeholder="请输入设备标识关键字" v-model="form.EquipmentMark" class="input-with-select">
|
|
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
@@ -48,12 +48,13 @@
|
|
|
<!-- 左侧列表 -->
|
|
|
<div class="table-box" ref="lTableBody">
|
|
|
<div class="l-custom-table custom-table" v-loading="lTableLoading">
|
|
|
- <el-table ref="multipleTable1" :data="LtableData" tooltip-effect="dark" style="width: 100%" height="100%" :row-class-name="'transition-box'">
|
|
|
- <el-table-column label="数据源" align="right">
|
|
|
- <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
+ <el-table ref="multipleTable1" :data="LtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="leftSelectionChange">
|
|
|
+ <el-table-column label="数据源" align="right" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">{{ scope.row.Datasource }}</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="name" label="位置标签" align="right"></el-table-column>
|
|
|
- <el-table-column prop="address" label="设备标识" show-overflow-tooltip align="right" width="200" class-name="bgf5"></el-table-column>
|
|
|
+ <el-table-column prop="LocationFlag" label="位置标签" align="right" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="SubTypeName" label="设备类型关键字" align="right" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="EquipmentMark" label="设备标识" show-overflow-tooltip align="right" width="200" class-name="bgf5"></el-table-column>
|
|
|
<el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
@@ -84,7 +85,7 @@
|
|
|
<div class="query-box clearfix">
|
|
|
<div class="query-item">
|
|
|
<label>设备实例关键字</label>
|
|
|
- <el-input placeholder="请输入设备实例关键字" v-model="form.keywords" class="input-with-select">
|
|
|
+ <el-input placeholder="请输入设备实例关键字" v-model="form.EquipLocalName" class="input-with-select">
|
|
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
@@ -96,14 +97,15 @@
|
|
|
<!-- 右侧列表 -->
|
|
|
<div class="table-box">
|
|
|
<div class="r-custom-table custom-table" v-loading="rTableLoading">
|
|
|
- <el-table ref="multipleTable2" :data="RtableData" tooltip-effect="dark" style="width: 100%" height="100%">
|
|
|
+ <el-table ref="multipleTable2" :data="RtableData" tooltip-effect="dark" style="width: 100%" height="100%" @selection-change="rightSelectionChange">
|
|
|
<el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
|
|
|
- <el-table-column label="设备实例名称" width="200" class-name="bgf5">
|
|
|
- <template slot-scope="scope">{{ scope.row.date }}</template>
|
|
|
+ <el-table-column label="设备实例名称" width="200" class-name="bgf5" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">{{ scope.row.EquipLocalName }}</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="name" label="设备实例编码"></el-table-column>
|
|
|
- <el-table-column prop="name" label="所在业务空间"></el-table-column>
|
|
|
- <el-table-column prop="address" label="所在建筑楼层" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="ObjectID" label="设备实例编码" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="SubTypeName" label="设备类型" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="FloorLocalName" label="所在建筑楼层" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="RoomLocalName" label="所在业务空间" show-overflow-tooltip></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<!-- 智能推荐 -->
|
|
|
@@ -129,7 +131,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 历史记录弹窗 -->
|
|
|
- <history-dialog ref="history"></history-dialog>
|
|
|
+ <history-dialog ref="history" @delSuc="deleteSuc"></history-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -161,82 +163,13 @@ export default {
|
|
|
LocFlagList: [], //位置标签
|
|
|
LocationList: [], //所在位置下拉
|
|
|
LtableData: [], //列表数据
|
|
|
- RtableData: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- date: "2016-05-02",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- date: "2016-05-04",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- date: "2016-05-01",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- date: "2016-05-02",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- date: "2016-05-04",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 6,
|
|
|
- date: "2016-05-01",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 7,
|
|
|
- date: "2016-05-08",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 8,
|
|
|
- date: "2016-05-06",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 9,
|
|
|
- date: "2016-05-07",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- }
|
|
|
- ], //列表数据
|
|
|
- page: {
|
|
|
- pageSize: 50,
|
|
|
- pageNumber: 1,
|
|
|
- total: 0
|
|
|
- }, //分页
|
|
|
+ RtableData: [], //列表数据
|
|
|
form: {}, //查询条件
|
|
|
leftRecoList: [], //左推荐
|
|
|
rightRecoList: [], //右推荐
|
|
|
leftAI: true, //左右推荐公用-互斥
|
|
|
- lArray: [], //左侧选中数据索引
|
|
|
- rArray: [], //右侧选中数据索引
|
|
|
+ lArray: [], //左侧选中数据
|
|
|
+ rArray: [], //右侧选中数据
|
|
|
hasRequestedFlag: false, //用于标识是否关联过数据,若是则重新请求第一页数据,
|
|
|
showPlus: false, //+1记录动画
|
|
|
num: 0, //记录条数
|
|
|
@@ -624,73 +557,50 @@ export default {
|
|
|
//i 索引 l 左侧AI or 右侧AI
|
|
|
if (l == "l") {
|
|
|
this.leftRecoList[i].checked = !this.leftRecoList[i].checked;
|
|
|
- this.changeCheck(this.leftRecoList[i].id, "l");
|
|
|
- this.LtableData.map((t, index) => {
|
|
|
- if (t.id == this.leftRecoList[i].id) {
|
|
|
- t.checked = true;
|
|
|
- }
|
|
|
- });
|
|
|
+ this.lArray = [];
|
|
|
+ this.lArray.push(this.leftRecoList[i]);
|
|
|
} else {
|
|
|
this.rightRecoList[i].checked = !this.rightRecoList[i].checked;
|
|
|
- this.changeCheck(this.rightRecoList[i].id, "r");
|
|
|
- this.RtableData.map((t, index) => {
|
|
|
- if (t.id == this.rightRecoList[i].id) {
|
|
|
- t.checked = true;
|
|
|
- }
|
|
|
- });
|
|
|
+ this.rArray = [];
|
|
|
+ this.rArray.push(this.rightRecoList[i]);
|
|
|
}
|
|
|
},
|
|
|
//查看本次历史记录
|
|
|
showHistory() {
|
|
|
this.$refs.history.showDialog(this.historyList);
|
|
|
},
|
|
|
- //隐藏 动画
|
|
|
- animate() {
|
|
|
- //前端真删,但是要将数据存到historyList中,弹窗中使用
|
|
|
- //两侧
|
|
|
- let history = { leftList: [], rightList: [] };
|
|
|
- for (let j = 0; j < this.LtableData.length; j++) {
|
|
|
- if (this.LtableData[j].checked) {
|
|
|
- let temp = this.LtableData.splice(j, 1);
|
|
|
- history.leftList.push(temp[0]);
|
|
|
- j--;
|
|
|
- }
|
|
|
- }
|
|
|
- for (let i = 0; i < this.RtableData.length; i++) {
|
|
|
- if (this.RtableData[i].checked) {
|
|
|
- let temp = this.RtableData.splice(i, 1);
|
|
|
- history.rightList.push(temp[0]);
|
|
|
- i--;
|
|
|
- }
|
|
|
- }
|
|
|
- this.historyList.push(history);
|
|
|
- this.lArray = [];
|
|
|
+ //重新获取数据
|
|
|
+ reGetData() {
|
|
|
+ let history = { leftList: this.lArray, rightList: this.rArray };
|
|
|
+ this.historyList.push(history); //保存本次操作记录
|
|
|
+ this.lArray = []; //清空选中list
|
|
|
this.rArray = [];
|
|
|
- this.num++;
|
|
|
+ this.num++; //右上角操作记录
|
|
|
this.showPlus = true;
|
|
|
setTimeout(() => {
|
|
|
this.showPlus = false;
|
|
|
}, 800);
|
|
|
+ //重新获取数据
|
|
|
+ this.refresh();
|
|
|
},
|
|
|
- //表格中的选择事件
|
|
|
- changeCheck(i, l) {
|
|
|
- // i ->数据id,l->左侧or右侧
|
|
|
- let key = l == "l" ? "lArray" : "rArray";
|
|
|
- if (!this[key].includes(i)) {
|
|
|
- this[key].push(i);
|
|
|
- } else {
|
|
|
- let index = this[key].indexOf(i);
|
|
|
- this[key].splice(index, 1);
|
|
|
- }
|
|
|
+ //表格中的选中事件
|
|
|
+ leftSelectionChange(selection) {
|
|
|
+ this.lArray = selection;
|
|
|
},
|
|
|
- //获取待关联实例-右侧
|
|
|
+ rightSelectionChange(selection) {
|
|
|
+ this.rArray = selection;
|
|
|
+ },
|
|
|
+ //获取待关联点位-左侧
|
|
|
getLeftData() {
|
|
|
let param = {
|
|
|
- PageNumber: this.rPage.pageNumber,
|
|
|
- PageSize: this.rPage.pageSize,
|
|
|
+ PageNumber: this.lPage.pageNumber,
|
|
|
+ PageSize: this.lPage.pageSize,
|
|
|
TypeName: this.curType
|
|
|
};
|
|
|
//处理查询条件(目前只是单个查,需后台支持)
|
|
|
+ if (this.form.EquipmentMark && this.form.EquipmentMark.length) {
|
|
|
+ param.EquipmentMark = this.form.EquipmentMark;
|
|
|
+ }
|
|
|
if (this.form.SubTypeName.length) {
|
|
|
param.SubTypeName = this.form.SubTypeName.toString();
|
|
|
}
|
|
|
@@ -700,46 +610,83 @@ export default {
|
|
|
if (this.form.Datasource.length) {
|
|
|
param.Datasource = this.form.Datasource.toString();
|
|
|
}
|
|
|
- dynamicPendingobjs(param, res => {
|
|
|
- console.log(res);
|
|
|
+ this.lTableLoading = true;
|
|
|
+ dynamicPendingPoint(param, res => {
|
|
|
+ if (this.lPage.pageNumber == 1) {
|
|
|
+ this.LtableData = res.Content;
|
|
|
+ } else {
|
|
|
+ this.LtableData.push(res.Content);
|
|
|
+ }
|
|
|
+ this.lTableLoading = false;
|
|
|
});
|
|
|
},
|
|
|
- //获取待关联点位-左侧
|
|
|
+ //获取待关联实例-右侧
|
|
|
getRightData() {
|
|
|
let param = {
|
|
|
- PageNumber: this.lPage.pageNumber,
|
|
|
- PageSize: this.lPage.pageSize,
|
|
|
+ PageNumber: this.rPage.pageNumber,
|
|
|
+ PageSize: this.rPage.pageSize,
|
|
|
TypeName: this.curType
|
|
|
};
|
|
|
//处理查询条件(目前只是单个查,需后台支持)
|
|
|
+ if (this.form.EquipLocalName && this.form.EquipLocalName.length) {
|
|
|
+ param.EquipLocalName = this.form.EquipLocalName;
|
|
|
+ }
|
|
|
if (this.form.SubTypeName.length) {
|
|
|
param.SubTypeName = this.form.SubTypeName.toString();
|
|
|
}
|
|
|
- if (this.form.LocationFlag.length) {
|
|
|
- param.LocationFlag = this.form.LocationFlag.toString();
|
|
|
- }
|
|
|
- if (this.form.Datasource.length) {
|
|
|
- param.Datasource = this.form.Datasource.toString();
|
|
|
- }
|
|
|
- dynamicPendingPoint(param, res => {
|
|
|
- if (this.lPage.pageNumber == 1) {
|
|
|
- this.LtableData = res.Content;
|
|
|
+ // if (this.LocationList.length == 1) {
|
|
|
+ // param.BuildLocalName = this.LocationList[0];
|
|
|
+ // } else if (this.LocationList.length == 2) {
|
|
|
+ // param.FloorLocalName = this.LocationList[1];
|
|
|
+ // } else if (this.LocationList.length == 3) {
|
|
|
+ // param.RoomLocalName = this.LocationList[2];
|
|
|
+ // } else if (this.LocationList.length == 4) {
|
|
|
+ // param.SpaceType = this.LocationList[3];
|
|
|
+ // }
|
|
|
+ this.rTableLoading = true;
|
|
|
+ dynamicPendingobjs(param, res => {
|
|
|
+ if (this.rPage.pageNumber == 1) {
|
|
|
+ this.RtableData = res.Content;
|
|
|
} else {
|
|
|
+ this.RtableData.push(res.Content);
|
|
|
}
|
|
|
+ this.rTableLoading = false;
|
|
|
});
|
|
|
+ },
|
|
|
+ //刷新列表
|
|
|
+ refresh() {
|
|
|
+ this.lPage.pageNumber = 1;
|
|
|
+ this.rPage.pageNumber = 1;
|
|
|
+ this.getLeftData();
|
|
|
+ this.getRightData();
|
|
|
+ },
|
|
|
+ //清除对应关系成功
|
|
|
+ deleteSuc(){
|
|
|
+ this.num--;
|
|
|
+ this.refresh();
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
projectId(n, o) {
|
|
|
- console.log(2222222222222);
|
|
|
this.init();
|
|
|
},
|
|
|
- //判断两边是否均有选中值
|
|
|
+ //判断两边是否均有选中值-创建关联
|
|
|
requestFlag(n, o) {
|
|
|
if (n) {
|
|
|
this.rightRecoList = [];
|
|
|
this.leftRecoList = [];
|
|
|
- this.animate();
|
|
|
+ let object = {
|
|
|
+ Objs: this.rArray,
|
|
|
+ Points: this.lArray
|
|
|
+ };
|
|
|
+ let param = [];
|
|
|
+ param.push(object);
|
|
|
+ dynamicCreateRelation(param, res => {
|
|
|
+ if (res.Result == "success") {
|
|
|
+ this.$message.success("关联成功");
|
|
|
+ this.reGetData();
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
//AI辅助-左侧
|
|
|
@@ -750,37 +697,39 @@ export default {
|
|
|
clearTimeout(this.timer);
|
|
|
this.timer = setTimeout(() => {
|
|
|
console.log("函数节流");
|
|
|
- if (n.length > 0) {
|
|
|
- this.leftAI = false;
|
|
|
- this.rightRecoList = [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- date: "2016-05-03",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- name2: "99%",
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- date: "2016-05-03",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- name2: "99%",
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- date: "2016-05-03",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- name2: "99%",
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- }
|
|
|
- ];
|
|
|
- } else {
|
|
|
- this.rightRecoList = [];
|
|
|
- this.leftAI = true;
|
|
|
+ if (this.isSwitch) {
|
|
|
+ if (n.length > 0) {
|
|
|
+ this.leftAI = false;
|
|
|
+ this.rightRecoList = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "王小虎",
|
|
|
+ checked: false,
|
|
|
+ name2: "99%",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "王小虎",
|
|
|
+ checked: false,
|
|
|
+ name2: "99%",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "王小虎",
|
|
|
+ checked: false,
|
|
|
+ name2: "99%",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ this.rightRecoList = [];
|
|
|
+ this.leftAI = true;
|
|
|
+ }
|
|
|
}
|
|
|
}, 800);
|
|
|
},
|
|
|
@@ -790,37 +739,39 @@ export default {
|
|
|
clearTimeout(this.timer);
|
|
|
this.timer = setTimeout(() => {
|
|
|
console.log("函数节流");
|
|
|
- if (n.length > 0) {
|
|
|
- this.leftAI = true;
|
|
|
- this.leftRecoList = [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- date: "2016-05-03",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- name2: "99%",
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- date: "2016-05-03",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- name2: "99%",
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- date: "2016-05-03",
|
|
|
- name: "王小虎",
|
|
|
- checked: false,
|
|
|
- name2: "99%",
|
|
|
- address: "上海市普陀区金沙江路 1518 弄"
|
|
|
- }
|
|
|
- ];
|
|
|
- } else {
|
|
|
- this.leftRecoList = [];
|
|
|
- this.leftAI = false;
|
|
|
+ if (this.isSwitch) {
|
|
|
+ if (n.length > 0) {
|
|
|
+ this.leftAI = true;
|
|
|
+ this.leftRecoList = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "王小虎",
|
|
|
+ checked: false,
|
|
|
+ name2: "99%",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "王小虎",
|
|
|
+ checked: false,
|
|
|
+ name2: "99%",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "王小虎",
|
|
|
+ checked: false,
|
|
|
+ name2: "99%",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ this.leftRecoList = [];
|
|
|
+ this.leftAI = false;
|
|
|
+ }
|
|
|
}
|
|
|
}, 800);
|
|
|
}
|
|
|
@@ -835,7 +786,7 @@ export default {
|
|
|
.text-right {
|
|
|
text-align: right;
|
|
|
}
|
|
|
- .table-container {
|
|
|
+ /deep/ .table-container {
|
|
|
height: calc(100% - 250px);
|
|
|
& > div {
|
|
|
width: 49.5%;
|
|
|
@@ -935,30 +886,11 @@ export default {
|
|
|
//列表
|
|
|
.custom-table {
|
|
|
height: 100%;
|
|
|
- table {
|
|
|
- table-layout: fixed;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .custom-table-body {
|
|
|
- height: calc(100% - 30px);
|
|
|
- overflow-x: hidden;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
- tr {
|
|
|
- line-height: 38px;
|
|
|
- }
|
|
|
- td {
|
|
|
- border-bottom: 1px solid #ebeef5;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
.bgf5 {
|
|
|
background-color: #f5f7fa;
|
|
|
}
|
|
|
- td.special {
|
|
|
- box-sizing: border-box;
|
|
|
+ thead label.el-checkbox {
|
|
|
+ display: none;
|
|
|
}
|
|
|
}
|
|
|
.l-custom-table {
|
