src/api/equipment/equipment.js

@@ -36,7 +36,7 @@
export function pullEquip() {
  return request({
    url: '/mes/equipment/pullEquip',
    method: 'post'
    method: 'post',
  })
}

@@ -92,12 +92,13 @@
  })
}


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

export function getEquipmentSensors(query) {

 src/views/equipment/lossrecord/index.vue

@@ -15,20 +15,21 @@
    </basic-container>
    <el-dialog width="80%" title="实验数据" :visible.sync="dialogShow">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="specification1" label="规格" width="180">
        <el-table-column prop="specification" label="规格" width="180">
        </el-table-column>
        <el-table-column prop="channel1" label="频道" width="180">
        <el-table-column prop="channel" label="频道" width="180">
        </el-table-column>
        <el-table-column prop="insertionLoss1" label="插入损耗">
        <el-table-column prop="insertionLoss" label="插入损耗">
        </el-table-column>
        <el-table-column prop="returnLoss1" label="回波损耗"> </el-table-column>
        <el-table-column prop="specification2" label="规格" width="180">
        <el-table-column prop="returnLoss" label="回波损耗"> </el-table-column>
        <el-table-column prop="testLength" label="长度"> </el-table-column>
        <!-- <el-table-column prop="specification2" label="规格" width="180">
        </el-table-column>
        <el-table-column prop="channel2" label="频道" width="180">
        </el-table-column>
        <el-table-column prop="insertionLoss2" label="插入损耗">
        </el-table-column>
        <el-table-column prop="returnLoss2" label="回波损耗"> </el-table-column>
        <el-table-column prop="returnLoss2" label="回波损耗"> </el-table-column> -->
      </el-table>
    </el-dialog>
  </div>

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

@@ -1,138 +1,138 @@
<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"
    <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-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>
                <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
    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
    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>