<template>
|
<div>
|
<div class="bindAlllist">
|
<div class="header_box">
|
<span>模型绑定查询</span>
|
<div style="float: right; cursor: pointer" @click="closeBindBox">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="search">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="类型：">
|
<el-select
|
v-model="formInline.table"
|
placeholder="请选择"
|
popper-class="optionsContent"
|
>
|
<el-option
|
v-for="item in options1"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态：">
|
<el-select
|
v-model="formInline.state"
|
placeholder="请选择"
|
popper-class="optionsContent"
|
>
|
<el-option
|
v-for="item in options2"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="模型所属区域：">
|
<el-select
|
v-model="formInline.area"
|
placeholder="请选择"
|
popper-class="optionsContent"
|
>
|
<el-option
|
v-for="item in options3"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item>
|
<el-button @click="search(1)">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div
|
id="bindingList"
|
class="table_box"
|
v-if="this.backUpData.table == 'busDeviceMain'"
|
>
|
<el-table :data="tableData" border height="88%">
|
<el-table-column label="定位" width="50">
|
<template slot-scope="scope">
|
<i
|
v-if="
|
scope.row.bdmLocation !== null &&
|
scope.row.bdmLocation !== ''
|
"
|
class="el-icon-location"
|
@click="flyTomodel(scope.row)"
|
></i>
|
<i v-else class="el-icon-location-outline"></i>
|
</template>
|
</el-table-column>
|
<el-table-column prop="modelId" label="模型ID" min-width="80">
|
</el-table-column>
|
<el-table-column prop="deviceNo" label="设备编码" min-width="100">
|
</el-table-column>
|
<el-table-column
|
prop="bdmDeviceName"
|
label="设备名称"
|
min-width="180"
|
>
|
</el-table-column>
|
|
<el-table-column label="操作" width="130">
|
<template slot-scope="scope"
|
><div v-if="scope.row.status == 0">
|
<el-button
|
type="text"
|
size="small"
|
@click="bindModel(scope.row)"
|
>绑定</el-button
|
>
|
</div>
|
<div v-else>
|
<el-button
|
type="text"
|
size="small"
|
@click="bindShow(scope.row)"
|
>查看</el-button
|
>
|
<el-button
|
type="text"
|
size="small"
|
@click="bindEdit(scope.row)"
|
>修改</el-button
|
>
|
<el-button type="text" size="small" @click="unbind(scope.row)"
|
>解绑</el-button
|
>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="绑定状态" width="90">
|
</el-table-column>
|
</el-table>
|
<div class="pag" style="text-align: center; margin-top: 20px">
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:current-page.sync="currentPage"
|
:page-size="10"
|
layout="prev, pager, next, jumper"
|
:total="totalNum"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
<div id="bindingList" class="table_box" v-else >
|
<el-table :data="tableData" border height="90%">
|
<el-table-column label="定位" width="50">
|
<template slot-scope="scope">
|
<i
|
v-if="
|
scope.row.bindLocation !== null &&
|
scope.row.bindLocation !== ''
|
"
|
class="el-icon-location"
|
@click="flyTomodel(scope.row)"
|
></i>
|
<i v-else class="el-icon-location-outline"></i>
|
</template>
|
</el-table-column>
|
<el-table-column prop="modelId" label="模型ID" min-width="100">
|
</el-table-column>
|
<el-table-column prop="deviceNo" label="设备编码" min-width="80">
|
</el-table-column>
|
<el-table-column prop="deviceName" label="设备名称" min-width="130">
|
</el-table-column>
|
|
<el-table-column label="操作" width="130">
|
<template slot-scope="scope"
|
><div v-if="scope.row.status == 0">
|
<el-button
|
type="text"
|
size="small"
|
@click="bindModel(scope.row)"
|
>绑定</el-button
|
>
|
</div>
|
<div v-else>
|
<el-button
|
type="text"
|
size="small"
|
@click="bindShow(scope.row)"
|
>查看</el-button
|
>
|
<el-button
|
type="text"
|
size="small"
|
@click="bindEdit(scope.row)"
|
>修改</el-button
|
>
|
<el-button type="text" size="small" @click="unbind(scope.row)"
|
>解绑</el-button
|
>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="绑定状态" width="90">
|
</el-table-column>
|
</el-table>
|
<div class="pag" style="text-align: center; margin-top: 20px">
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:current-page.sync="currentPage"
|
:page-size="10"
|
layout="prev, pager, next, jumper"
|
:total="totalNum"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="infoBox" v-show="showinfoBox">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>详细信息</span>
|
<div style="float: right; cursor: pointer" @click="closeInfoBox">
|
<i class="el-icon-close"></i>
|
</div>
|
</div>
|
<div class="contentBox">
|
<p>设备编号：{{ itemdetail.deviceNo }}</p>
|
<el-divider></el-divider>
|
<p>
|
设备名称：{{ itemdetail.deviceName || itemdetail.bdmDeviceName }}
|
</p>
|
<el-divider></el-divider>
|
<p>
|
所在区域：{{
|
itemdetail.unitArea !== "" && itemdetail.unitArea !== null
|
? itemdetail.unitArea
|
: "未填写"
|
}}
|
</p>
|
<el-divider></el-divider>
|
<p>绑定状态：{{ itemdetail.status == 1 ? "已绑定" : "未绑定" }}</p>
|
<el-divider></el-divider>
|
<p>
|
模型ID：{{
|
itemdetail.modelId !== "" && itemdetail.modelId !== null
|
? itemdetail.modelId
|
: "未绑定模型"
|
}}
|
</p>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
updatebusDeviceMainlist,
|
updatebusProductionDevicelist,
|
querybusDeviceMainlist,
|
querybusProductionDevicelist,
|
} from "../../../api/api";
|
import modelBinding from "./modelBinding.vue";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: { modelBinding },
|
data() {
|
//这里存放数据
|
return {
|
showinfoBox: false,
|
itemdetail: {},
|
isbind: false,
|
itemInfo: {},
|
showItemInfo: false,
|
options1: [
|
{
|
value: "busDeviceMain",
|
label: "bus_device_main",
|
},
|
{
|
value: "busProductionDevice",
|
label: "bus_production_device",
|
},
|
],
|
options2: [
|
{
|
value: "2",
|
label: "全状态",
|
},
|
{
|
value: "0",
|
label: "未绑定",
|
},
|
{
|
value: "1",
|
label: "已绑定",
|
},
|
],
|
options3: [
|
{
|
value: "0",
|
label: "全区域",
|
},
|
{
|
value: "1",
|
label: "区域1",
|
},
|
{
|
value: "2",
|
label: "区域2",
|
},
|
],
|
currentPage: 1,
|
totalNum: 0,
|
tableData: [],
|
formInline: {
|
table: "",
|
state: "",
|
area: "",
|
},
|
backUpData: {
|
table: "",
|
state: "",
|
area: "",
|
},
|
};
|
},
|
//方法集合
|
methods: {
|
//关闭模型维护窗口
|
closeBindBox() {
|
this.$store.commit("showBindBox", false);
|
},
|
|
//请求列表
|
search(val) {
|
this.tableData = [];
|
this.backUpData.table = this.formInline.table;
|
this.backUpData.state = this.formInline.state;
|
this.backUpData.area = this.formInline.area;
|
if (this.backUpData.table == "busDeviceMain") {
|
if (this.backUpData.state == "2") {
|
querybusDeviceMainlist({ pageNo: val }).then((res) => {
|
this.tableData = res.data.data.records;
|
this.totalNum = res.data.data.total;
|
this.$message({
|
message: "加载完成",
|
type: "success",
|
});
|
});
|
} else {
|
querybusDeviceMainlist({
|
pageNo: val,
|
status: this.backUpData.state,
|
}).then((res) => {
|
this.tableData = res.data.data.records;
|
this.totalNum = res.data.data.total;
|
this.$message({
|
message: "加载完成",
|
type: "success",
|
});
|
});
|
}
|
} else if (this.backUpData.table == "busProductionDevice") {
|
if (this.backUpData.state == "2") {
|
querybusProductionDevicelist({ pageNo: val }).then((res) => {
|
this.tableData = res.data.data.records;
|
this.totalNum = res.data.data.total;
|
this.$message({
|
message: "加载完成",
|
type: "success",
|
});
|
});
|
} else {
|
querybusProductionDevicelist({
|
pageNo: val,
|
status: this.backUpData.state,
|
}).then((res) => {
|
this.tableData = res.data.data.records;
|
this.totalNum = res.data.data.total;
|
this.$message({
|
message: "加载完成",
|
type: "success",
|
});
|
});
|
}
|
} else {
|
alert("请选择具体类型");
|
}
|
},
|
//点击分页
|
handleCurrentChange(val) {
|
if (this.backUpData.table == "busDeviceMain") {
|
if (this.backUpData.state == "2") {
|
querybusDeviceMainlist({ pageNo: val }).then((res) => {
|
this.tableData = res.data.data.records;
|
this.totalNum = res.data.data.total;
|
});
|
} else {
|
querybusDeviceMainlist({
|
pageNo: val,
|
status: this.backUpData.state,
|
}).then((res) => {
|
this.tableData = res.data.data.records;
|
this.totalNum = res.data.data.total;
|
});
|
}
|
} else if (this.backUpData.table == "busProductionDevice") {
|
if (this.backUpData.state == "2") {
|
querybusProductionDevicelist({ pageNo: val }).then((res) => {
|
this.tableData = res.data.data.records;
|
this.totalNum = res.data.data.total;
|
});
|
} else {
|
querybusProductionDevicelist({
|
pageNo: val,
|
status: this.backUpData.state,
|
}).then((res) => {
|
this.tableData = res.data.data.records;
|
this.totalNum = res.data.data.total;
|
});
|
}
|
}
|
},
|
//绑定模型
|
bindModel(row) {
|
row.tabletype = this.backUpData.table;
|
this.$store.commit("showBindBox", false);
|
this.$store.commit("showBindInfoBox", true);
|
this.$store.commit("updateBindInfo", row);
|
},
|
//定位模型
|
flyTomodel(row) {
|
if (row.bdmLocation) {
|
let arr = row.bdmLocation.split(",");
|
let lng = parseFloat(arr[0]);
|
let lat = parseFloat(arr[1]);
|
sgworld.Navigate.flyToPosition(lng, lat, 200);
|
} else {
|
let arr = row.bindLocation.split(",");
|
let lng = parseFloat(arr[0]);
|
let lat = parseFloat(arr[1]);
|
sgworld.Navigate.flyToPosition(lng, lat, 200);
|
}
|
},
|
//解绑模型
|
unbind(row) {
|
this.$confirm("此操作将解绑模型, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
if (this.backUpData.table == "busDeviceMain") {
|
let obj = {
|
bdmId: row.bdmId,
|
bdmLocation: "",
|
modelId: "",
|
status: 0,
|
};
|
updatebusDeviceMainlist(obj).then((res) => {
|
if (res.data.code == 200) {
|
this.$message({
|
type: "success",
|
message: "解绑成功!",
|
});
|
this.getDevinfo(1);
|
} else {
|
this.$message.error("解绑失败！");
|
}
|
});
|
} else if (this.backUpData.table == "busProductionDevice") {
|
let obj = {
|
id: row.id,
|
bindLocation: "",
|
modelId: "",
|
status: 0,
|
};
|
updatebusProductionDevicelist(obj).then((res) => {
|
if (res.data.code == 200) {
|
this.$message({
|
type: "success",
|
message: "解绑成功!",
|
});
|
this.search(1);
|
} else {
|
this.$message.error("解绑失败！");
|
}
|
});
|
}
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
},
|
// 显示详情
|
bindShow(row) {
|
this.showinfoBox = true;
|
this.itemdetail = row;
|
},
|
// 关闭详情
|
closeInfoBox() {
|
this.showinfoBox = false;
|
this.itemdetail = {};
|
},
|
bindEdit(row) {
|
this.$store.commit("updateBindInfo", row);
|
this.$store.commit("showBindBox", false);
|
this.$store.commit("showBindInfoBox", true);
|
},
|
},
|
|
created() {
|
// this.formInline.table = this.options1[0].value;
|
},
|
};
|
</script>
|
<style>
|
/* .optionsContent {
|
z-index: 10000 !important;
|
} */
|
</style>
|
<style lang="less" scoped>
|
.bindAlllist {
|
width: 1200px;
|
height: 666px;
|
background: rgba(255, 255, 255, 0.8);
|
border: 1px solid #fff;
|
.header_box {
|
padding: 10px;
|
background: rgba(0, 0, 0, 0.7);
|
color: #fff;
|
span {
|
font-size: 16px;
|
}
|
}
|
.content {
|
width: 95%;
|
margin: 20px auto 0;
|
height: 600px;
|
.search {
|
// background-color: red;
|
.demo-form-inline {
|
display: flex;
|
justify-content: space-between;
|
}
|
.el-form-item {
|
margin: 0 0 20px;
|
}
|
}
|
|
#bindingList {
|
height: 522px;
|
.el-table {
|
height: 470px;
|
}
|
}
|
#bindingList .el-table /deep/ .el-table__header-wrapper tr th {
|
background-color: rgb(255, 255, 255) !important;
|
color: rgb(0, 0, 0);
|
}
|
// 修改每行样式：
|
#bindingList .el-table /deep/ .el-table__row {
|
background-color: rgba(255, 255, 255) !important;
|
color: rgb(0, 0, 0);
|
}
|
.el-table /deep/ .el-table__body tr.current-row > td {
|
background-color: rgb(211, 211, 211) !important;
|
}
|
.el-table /deep/ .el-table__body tr:hover > td {
|
background-color: rgb(211, 211, 211) !important;
|
}
|
// 修改表格每行边框的样式：
|
.el-table /deep/ td,
|
.el-table /deep/ th.is-leaf {
|
border-bottom: 1px solid #eee;
|
border-right: 1px solid #eee;
|
}
|
.el-table /deep/ .el-table__cell {
|
padding: 5px 0;
|
}
|
// 设置表格每行的高度：
|
.el-table /deep/ .el-table__header tr,
|
.el-table /deep/ .el-table__header th {
|
height: 40px;
|
}
|
.el-table__body tr,
|
.el-table__body td {
|
height: 40px;
|
padding: 0;
|
}
|
// 设置表格边框颜色：
|
|
.el-table--border::after,
|
.el-table--group::after {
|
width: 0;
|
}
|
.el-table::before {
|
height: 0;
|
}
|
}
|
}
|
.infoBox {
|
border: 1px solid #eee;
|
position: absolute;
|
z-index: 100000;
|
top: 20%;
|
right: 25%;
|
.contentBox {
|
// background-color: #eee;
|
margin: 0 aotu 10px;
|
p {
|
// background-color: #bfa;
|
// margin-bottom: 10px;
|
font-size: 14px;
|
}
|
}
|
}
|
</style>
|
