water-ldht/src/views/server/siteDetails/readable.vue

125 lines
2.8 KiB
Vue

<template>
<el-table
v-loading="listLoading"
:data="sensorData"
border
stripe
style="width: 100%"
>
<el-table-column
prop="name"
label="传感器名称"
align="center"
></el-table-column>
<el-table-column
prop="dataKey"
label="传输id"
align="center"
></el-table-column>
<el-table-column prop="dataValue" label="值" align="center">
<template #default="{ row }">
<el-tag type="success">{{ row.dataValue }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="unit" label="单位" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template #default="{ row }"></template>
</el-table-column>
</el-table>
<el-pagination
:background="background"
:current-page="queryForm.page"
:layout="layout"
:page-size="queryForm.size"
:total="total"
style="text-align: right"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
></el-pagination>
<distribute ref="distribute"></distribute>
</template>
<script>
import { deviceCode } from '@/api/monitor';
import distribute from '@/views/server/siteDetails/distribute';
export default {
components: {
distribute,
},
data() {
return {
sensorData: [],
lazy: true,
activeName: 'first',
layout: 'prev, pager, next',
total: 0,
background: true,
listLoading: true,
elementLoadingText: '正在加载...',
queryForm: {
page: 1,
size: 5,
deviceCode: '',
},
writeData: {
deviceCode: '',
dataKey: '',
dataValue: '',
},
};
},
computed: {
height() {
return 500;
},
},
created() {
// this.fetchData();
},
methods: {
showData(row) {
console.log(123, row);
this.queryForm.deviceCode = row.deviceCode;
this.fetchData();
},
async fetchData() {
this.listLoading = true;
const { data } = await deviceCode(this.queryForm);
this.sensorData = data.items;
this.total = data.total;
setTimeout(() => {
this.listLoading = false;
}, 500);
},
handleQuery() {
this.queryForm.pageNo = 1;
this.fetchData();
},
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.fetchData();
},
handleCurrentChange(val) {
this.queryForm.page = val;
this.fetchData();
},
distribute(row) {
const dataKey = row.dataKey;
const deviceCode = this.queryForm.deviceCode;
this.$refs['distribute'].showEdit({
deviceCode: deviceCode,
dataKey: dataKey,
unit: row.unit,
convertFlag: row.convertFlag,
});
},
},
};
</script>
<style lang="scss" scoped>
.manage-button {
margin-bottom: 30px;
}
</style>