设备数采的数据以列表的格式展示,时间,车间,设备作为筛选条件

Crunchy

2025-06-14 b25dac9ce64c5988a9e546c9c80413e9b666e4e2

设备数采的数据以列表的格式展示,时间,车间,设备作为筛选条件

 src/api/equipment/equipment.js

@@ -91,3 +91,20 @@
    params: query
  })
}


export function mqttPage(query) {
    return request({
        url: '/mes/mqtt/page',
        method: 'get',
        params: query
    })
}

export function getEquipmentSensors(query) {
    return request({
        url: '/mes/mqtt/getEquipmentSensors',
        method: 'get',
        params: query
    })
}

 src/views/equipment/mqtt-history/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,139 @@
<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>