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

Crunchy

2025-06-14 a6d1ef5fe8ca2afec1b23019f2df2357d8a9e1e6

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

 src/api/equipment/equipment.js

@@ -1,6 +1,6 @@
/*
 * @Descripttion: 
 * @version: 
 * @Descripttion:
 * @version:
 * @Author: zt_lc
 * @Date: 2022-02-10 14:24:32
 * @LastEditors: zt_lc
@@ -36,7 +36,7 @@
export function pullEquip() {
  return request({
    url: '/mes/equipment/pullEquip',
    method: 'post',
    method: 'post'
  })
}

@@ -90,4 +90,20 @@
    method: 'get',
    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>