<template>
<div class="dumu_box">
<div class="z-box">
<div class="search">
<div style="display: flex; align-items: center; margin-right: 15px;">
<span class="span">在线状态:</span>
<el-select v-model="status" placeholder="请选择状态" size="mini">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<el-button
type="primary"
icon="el-icon-search"
size="small"
@click="search"
plain>搜索</el-button
>
<el-button size="small" icon="el-icon-circle-close" @click="clear"
>清空</el-button
>
</div>
<div class="container">
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px;"
>
<el-table-column
label="序号"
width="80"
type="index"
></el-table-column>
<el-table-column
prop="orgName"
label="机构"
width="180"
></el-table-column>
<el-table-column
prop="deviceId"
label="设备ID"
width="180"
></el-table-column>
<el-table-column label="设备UUID">
<template slot-scope="scope">
{{ scope.row.deviceUuid }}
</template>
</el-table-column>
<el-table-column label="设备状态">
<template slot-scope="scope">
{{ scope.row.status == 2? '在线':'不在线' }}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="bind(scope.row)"
v-if="!scope.row.orgId"
>绑定</el-button
>
<el-button
type="text"
@click="loadData(scope.row)"
size="small"
>下发数据</el-button
>
<el-button
type="text"
@click="goDataLoad(scope.row)"
size="small"
>下发记录</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="order_block">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[10, 20, 30, 40, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
<div style="width: 40%;">
<el-drawer
:title="title"
:visible.sync="drawer"
:modal="true"
direction="rtl"
:before-close="handleClose"
:destroy-on-close="true"
:append-to-body="true"
size="30%"
>
<div class="box" style="padding: 10px;">
<el-form
:label-position="form"
label-width="120px"
:model="form"
>
<el-form-item label="绑定机构">
<el-select
v-model="form.orgId"
placeholder="请选择绑定机构"
filterable
remote
reserve-keyword
size="small"
:remote-method="remoteMethod"
:loading="orgloadng"
style="width: 100%;"
>
<el-option
v-for="item in orgIdOptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
<div style="text-align:center;">
<el-button type="primary" size="small" @click="saveHandler" :loading="loading"
>保存</el-button
>
<el-button size="small" @click="cancelHandler">取消</el-button>
</div>
</div>
</el-drawer>
</div>
</div>
<add-faces ref="addFaces"></add-faces>
</div>
</template>
<script>
import {
add,
getList,
} from "@/api/device/dumubox.js";
import { getSeniorOrgList } from "@/api/public.js";
import addFaces from "./dumubox/addFaces.vue"
export default {
components: {
addFaces
},
data() {
return {
title: "新增",
form: {
orgId: "",
deviceId: "",
},
drawer: false,
loading: false,
orgloadng: false,
current: 1,
size: 10,
total: 0,
status: "", // 1 不在线 2 在线
tableData: [],
spanArr: [],
position: 0,
options: [{
value: '1',
label: '不在线'
}, {
value: '2',
label: '在线'
}]
};
},
created() {
this.search();
},
methods: {
goDataLoad(row) {
this.$router.push({ path: "/device/dataupload", query: { orgId: row.orgId } });
},
loadData (row) {
this.$refs.addFaces.showPop(row)
},
remoteMethod(query){
// 根据输入的deviceNo设备编号去获取uId
this.orgloadng = true
getSeniorOrgList({'orgName':query}).then((res)=>{
this.orgloadng = false
if(res && res.data && res.data.code==200){
this.orgIdOptions = res.data.data
}
})
},
clear() {
this.status = "";
this.search();
},
cancelHandler() {
for (const key in this.form) {
this.form[key] = "";
}
this.drawer = false;
},
saveHandler() {
if (!this.form.orgId) {
this.$message.error("请选择机构");
return
}
this.loading=true;
let obj = { orgId: this.form.orgId, deviceId: this.form.deviceId };
add(obj).then((res) => {
if (res.data.code == 200) {
this.$message.success(res.data.msg);
for (const key in this.form) {
this.form[key] = "";
}
this.drawer = false;
this.loading=false;
this.search();
}
});
},
bind(row) {
this.form.deviceId = row.deviceId
this.drawer = true;
this.title = "绑定";
},
search() {
let obj = {
status: this.status,
};
getList(this.current, this.size, obj).then((res) => {
if (res.data.code == 200) {
let { records, total, current } = res.data.data;
this.tableData = records;
this.total = total;
this.current = current;
this.rowspan();
}
});
},
handleSizeChange(val) {
this.pageSize = val;
this.size = val;
this.current = 1;
this.search();
},
handleCurrentChange(val) {
this.current = val;
this.search();
},
rowspan() {
this.spanArr = [];
this.tableData.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
this.position = 0;
} else {
if (this.tableData[index].id === this.tableData[index - 1].id) {
this.spanArr[this.position] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.position = index;
}
}
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
if (columnIndex === 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
handleClose() {
this.drawer = false;
},
},
};
</script>
<style lang="scss" scoped>
.dumu_box {
background: #f0f2f5;
box-sizing: border-box;
width: 100%;
height: 100%;
.z-box {
box-sizing: border-box;
width: 100%;
background: #fff;
.search {
display: flex;
padding: 20px;
.span {
display: inline-block;
width: 100px;
text-align: center;
}
}
.container {
padding: 0px 20px 0px 20px;
}
.order_block {
width: 90%;
padding: 20px 20px 20px 20px;
display: flex;
justify-content: flex-end;
padding-bottom: 100px;
}
.box {
padding: 0 30px;
}
}
}
</style>