<template>
|
<div>
|
<basic-container>
|
<el-form label-width="100px" :inline="true">
|
<el-form-item label="设备：" required>
|
<el-select v-model="search.deviceId" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.name"
|
:value="item.device_id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间：">
|
<el-date-picker
|
v-model="search.collectionTime"
|
type="datetime"
|
placeholder="选择日期时间"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="searchFun">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</basic-container>
|
<basic-container>
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
height="calc(100vh - 27vh)"
|
>
|
<el-table-column type="index" label="序号"></el-table-column>
|
<el-table-column prop="collectionTime" label="采集时间">
|
</el-table-column>
|
<el-table-column label="设备名称">
|
<template slot-scope="scope">
|
<!-- 使用计算属性或方法查找匹配项 -->
|
{{ getMatchedName(scope.row.dataStream) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="dataStream" label="设备编号" >
|
</el-table-column>
|
<el-table-column prop="value" label="参数值"> </el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="1"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="search.size"
|
layout="->, total, sizes, prev, pager, next, jumper"
|
:total="search.total"
|
>
|
</el-pagination>
|
</basic-container>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getDeviceId,
|
getEquipmentSensors,
|
mqttPage
|
} from '@/api/equipment/equipment'
|
|
export default {
|
data() {
|
return {
|
currentPage: 1,
|
options: [],
|
tableData: [],
|
equipmentSensorsList: [],
|
search: {
|
size: 100,
|
current: 1,
|
total: 0,
|
deviceId: null,
|
collectionTime: null
|
}
|
}
|
},
|
// 初始化调用 查询设备 折线图数据
|
async created() {
|
await this.getDeviceIdFun()
|
await this.getPage()
|
},
|
methods: {
|
// 查找匹配的设备名称
|
getMatchedName(dataStream) {
|
// 遍历设备传感器列表
|
const matchedItem = this.equipmentSensorsList.find((item) => {
|
return item.dataStream === dataStream
|
})
|
|
// 返回匹配的中文名称或默认值
|
return matchedItem ? matchedItem.nameCn : '未找到设备'
|
},
|
searchFun() {
|
this.tableData = []
|
this.getEquipmentSensors()
|
this.getPage()
|
},
|
handleSizeChange(val) {
|
this.search.size = val
|
this.getPage()
|
},
|
handleCurrentChange(val) {
|
this.search.current = val
|
this.getPage()
|
},
|
// 获取设备下拉框
|
async getDeviceIdFun() {
|
await getDeviceId().then(async (res) => {
|
this.options = res.data.data
|
this.search.deviceId = this.options[0].device_id
|
await this.getEquipmentSensors()
|
})
|
},
|
getPage() {
|
mqttPage(this.search).then((res) => {
|
this.tableData = res.data.data.content
|
this.search.total = res.data.data.totalElements
|
})
|
},
|
async getEquipmentSensors() {
|
await getEquipmentSensors({ deviceId: this.search.deviceId }).then(
|
(response) => {
|
this.equipmentSensorsList = response.data.data
|
}
|
)
|
}
|
}
|
}
|
</script>
|
|
<style></style>
|
