设备监控-列表添加状态查询条件

hyingbo

2025-06-04 2c199d0419c285c4131ae07deba87dc5ce56bff3

设备监控-列表添加状态查询条件

 src/views/mdc/base/DeviceBaseInfo.vue

@@ -26,7 +26,7 @@
                                :node="selectEquipment"></equipment-layout>
            </a-tab-pane>
            <a-tab-pane key="2" tab="列表" force-render>
              <equipment-list :dataSource="dataList" @editEquipmentStatus="editEquipmentStatus"></equipment-list>
              <equipment-list :dataSource="dataList" @editEquipmentStatus="editEquipmentStatus" :equipmentId="this.param.key"></equipment-list>
            </a-tab-pane>
          </a-tabs>
        </div>

 src/views/mdc/base/modules/DeviceBaseInfo/EquipmentList.vue

@@ -1,21 +1,55 @@
<template>
  <a-card :bordered="false" style="display: flex;flex-direction: column">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="状态" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-select v-model='queryParam.status' placeholder="请选择状态">
                <a-select-option  value="1">待机</a-select-option>
                <a-select-option value="2">运行</a-select-option>
                <a-select-option value="3">报警</a-select-option>
                <a-select-option value="4">关机</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="equipmentList" id="DeviceList">
      <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource"
               :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}"/>
      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="equipmentId"
        :columns="columns"
        :dataSource="localDataSource"
        :pagination="false"
        :loading="loading"
        :scroll="{x:'max-content',y:scrollY}"/>
    </div>
  </a-card>
</template>

<script>
  import { postAction } from '@/api/manage'
  import { postAction, getAction } from '@/api/manage'
  import { filterObj } from '@/utils/util'

  export default {
    name: 'EquipmentLayout',
    components: {   },
    data() {
      return {
        localDataSource: [...this.dataSource],
        loading:false,
        queryParam: {},
        columns: [
          {
            title: '设备编号',
@@ -45,21 +79,58 @@
          }
        ],
        scrollY:465,
        url: {
          list: '/mdc/mdcEquipment/queryEquipmentMonitorList',
        }
      }
    },
    props: { dataSource: {
    props: {
      dataSource: {
        type: Array,
        required: true,
        default: []
      } },
      },
      equipmentId: ''
    },
    watch: {
      dataSource(newVal) {
        this.localDataSource = [...newVal]; // ✅ 监听父组件数据变化
      }
    },
    methods: {
      loadData() {
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.localDataSource = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      getQueryParams() {
        let param = Object.assign({}, this.queryParam);
        param.key = this.equipmentId;
        return filterObj(param);
      },
      handleWindowResize(){
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
        this.scrollY = boxHeight - tableHeadHeight
      },
      // 重置字典类型搜索框的内容
      searchReset() {
        var that = this;
        that.queryParam.status = "";
        that.queryParam.key = this.equipmentId;
        that.loadData();
      },
      searchQuery() {
        this.loadData();
      }
    },
    mounted(){
      window.addEventListener('resize',this.handleWindowResize)