Web/admin.ui.plus-master/src/views/admin/statement/alarmQuery/index.vue

<template>
  <div class="layout-pd">
    <el-row>
<!--操作-->
      <el-col :xs="24" >
        <el-card class="mt8"  shadow="hover" >
<el-form :model="state.filter" :inline="true" @submit.stop.prevent style="margin-bottom:-20px;">
            <el-form-item prop="name" style="width: 100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="推送用户">
                  <el-input v-model="state.filter.pushUser" placeholder="请输入推送用户" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="是否推送">
                  <el-select v-model="state.filter.ispushed" placeholder="请选择推送状态">
                    <el-option label="所有" :value="undefined"></el-option>
                    <el-option v-for="(value, key) in FuelDispenserEnum" :key="key" :label="value" :value="key" />
                  </el-select>
                  <!-- <el-input v-model="state.filter.isPushed" placeholder="单行输入" clearable></el-input> -->
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="推送时间">
                  <el-date-picker
                    v-model="state.filter.pushTime"
                    type="datetimerange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
</el-form-item>
          </el-form>

          <hr>

          <el-row justify="space-between" class="submit-button" style="margin-bottom:-6px;">
            <el-row>
<el-button  type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
<el-button  type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
<el-button v-auth="'api:admin:file:upload-file'" type="primary" icon="ele-Upload"> 立即推送
</el-button>
          </el-row>
        </el-row>
</el-card>
      </el-col>
<!--表格-->
      <el-col  :xs="24" >
        <el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
<el-table v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
  <el-table-column type="selection" width="55" fixed="left"></el-table-column>
        <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"  >
        </el-table-column> 
<!-- <el-table-column label="操作"  fixed="right" header-align="center" align="center" class="right-operation" width="140">
        <template #default="{ row }" >
<el-link          v-if="row.isPushed === '未推送'"
                  class="my-el-link mr12 ml12"
                  type="primary"
                  icon="ele-Upload"
                  @click="onDateUpdate(row)"
                  :underline="false"
                  target="_blank"
                >立即推送</el-link>
</template>
            </el-table-column> -->
</el-table>
<div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination v-model:currentPage="state.pageInput.currentPage"
              v-model:page-size="state.pageInput.pageSize" :total="state.total" :page-sizes="[10, 15, 20, 50, 100]"
              small background @size-change="onSizeChange" @current-change="onCurrentChange"
              layout="total, sizes, prev, pager, next, jumper" />
          </div>
</el-card>
      </el-col>
</el-row>
    </div>
  </template>
  <script setup lang="ts">
  import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
  import eventBus from "/@/utils/mitt";
  import {Api} from "/@/api/admin/AlarmService/alarmQueryApi";
import { PushDto } from "/@/api/admin/AlarmService/alarmQueryDto";
import { PageInputAlarmFilterModel } from "/@/api/admin/reportManagement/alarm/alarmDto";
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
import { ElMessage } from "element-plus";
import { all } from "axios";

// 使用组合式函数获取分页状态
// const pageState = useDynamicPageSize(10, 15);


/**数据对象*/
  const state = reactive({
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
      filter: {
/**推送用户 */
        pushUser: "",
/**是否推送 */
        pushed: "",
/**推送时间 */
        pushTime: "",
        ispushed:undefined
      },
  /**表格信息 */
tableModel: [] as PushDto[],
    /**动态表头 */
    dynamicColumns: [
{ prop: 'ruleName', label: '规则名称' },
// { prop: 'pushUserid', label: '推送用户id' },
{ prop: 'pushUser', label: '推送用户' },
{ prop: 'content', label: '推送内容' },
{ prop: 'pushed', label: '是否推送' },
{ prop: 'pushTime', label: '推送时间' },
// { prop: 'alarmhistoryID', label: '报警ID' },
// { prop: 'taskPriority', label: '优先级' },
],
  /**分页标识 */
  pageInput: {
    currentPage: 1,
    pageSize: 15,
  } as PageInputAlarmFilterModel,
  /**分页总数 */
  total: 0,
})

/**设备状态*/
enum FuelDispenserEnum {
  true = "已推送",
  false = "未推送",
}

  onMounted(async () => {
  await onQuery()
    init()
    eventBus.off('refreshView')
    eventBus.on('refreshView', async () => {
      await init()
    })
    console.log()
  })
  onBeforeMount(() => {
    eventBus.off('refreshView')
  })

/**
* 页条变化
* @param val
*/
const onSizeChange = (val: number) => {
  state.pageInput.pageSize = val
  init()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
  state.pageInput.currentPage = val
  init()
}


  /**
  * 监听变换
  */
  watch(() => {})

/**条件查询 */
          const onQuery = () => {
          init()
        }


/**初始化 */
const init = async () => {
  state.loading = true;

  try {
    // 处理时间范围
    let sdate = '';
    let edate = '';
    if (state.filter.pushTime && Array.isArray(state.filter.pushTime) && state.filter.pushTime.length === 2) {
      sdate = state.filter.pushTime[0]; // 开始时间
      edate = state.filter.pushTime[1]; // 结束时间
    }

    const params = {
      ...state.pageInput,
      filter: {
        ...state.filter,
        sdate,
        edate,
        pushTime: undefined, // 避免传到后端去
      },
    };

    const res = await new Api().getList(params);
    state.tableModel = res?.data?.list ?? [];
    state.total = res?.data?.total ?? 0;
  } catch (error) {
    console.error('获取数据失败:', error);
    ElMessage.error('获取数据失败，请重试');
  } finally {
    state.loading = false;
  }
};



/**重置 */
        const onReset=()=>{
  // 重置查询条件
  state.filter = {
    pushUser: "",
    pushed: "",
    pushTime: "",
    ispushed:undefined
  };

  // 重新加载数据
  init();
        }
/**编辑 */
      const onDateUpdate=(row: any)=>{
        console.log("编辑行数据：", row);
      }
</script>
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
  // 字体大小14，4个字符，12px右间距
  width: 14*4px+12px;
  justify-content: start;
}

/* 数据表头 设置灰色样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #F6F6F6;
}
  </style>