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-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="pageState.pageInput.currentPage"
              v-model:page-size="pageState.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";

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

/**创建假数据 */
const mockData = [
  {
    id: 1,
    ruleId: "rule-001",
    pushUserid: "user-001",
    pushUser: "张三",
    content: "设备A报警：温度过高",
    isPushed: "已推送",
    pushTime: "2023-10-01 10:00:00",
    alarmhistoryID: "alarm-001",
    taskPriority: "高",
  },
  {
    id: 2,
    ruleId: "rule-002",
    pushUserid: "user-002",
    pushUser: "李四",
    content: "设备B报警：电压异常",
    isPushed: "未推送",
    pushTime: "2023-10-02 15:30:00",
    alarmhistoryID: "alarm-002",
    taskPriority: "中",
  },
  {
    id: 3,
    ruleId: "rule-003",
    pushUserid: "user-003",
    pushUser: "王五",
    content: "设备C报警：湿度超标",
    isPushed: "已推送",
    pushTime: "2023-10-03 09:45:00",
    alarmhistoryID: "alarm-003",
    taskPriority: "低",
  },
];

/**数据对象*/
  const state = reactive({
    /**加载显示 */
    loading: false,
    /**条件查询模块 */
      filter: {
/**推送用户 */
        pushUser: "",
/**是否推送 */
        isPushed: "",
/**推送时间 */
        pushTime: "",},
  /**表格信息 */
tableModel: [] as PushDto,
    /**动态表头 */
    dynamicColumns: [
{ prop: 'ruleId', label: '规则id' },
{ prop: 'pushUserid', label: '推送用户id' },
{ prop: 'pushUser', label: '推送用户' },
{ prop: 'content', label: '推送内容' },
{ prop: 'isPushed', label: '是否推送' },
{ prop: 'pushTime', label: '推送时间' },
{ prop: 'alarmhistoryID', label: '报警ID' },
{ prop: 'taskPriority', label: '优先级' },],
  /**分页标识 */
  pageInput: {
    currentPage: 1,
    pageSize: 15,
  } as PageInputAlarmFilterModel,
  /**分页总数 */
  total: 0,
})
  onMounted(async () => {
       // 初始化分页大小
   state.pageInput.pageSize = pageState.pageInput.pageSize;
  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;

// 模拟后端返回的数据
const mockResponse = {
  data: {
    list: mockData, // 使用假数据
  },
};
  // 假设接口返回的数据格式为 { data: { list: [] } }
  state.tableModel = mockResponse.data.list ?? [];
  state.loading = false;
};
//           state.loading = true
// const res:any = await new Api().getList({...state.filter})
// state.tableModel = res?.data?.list ?? []
//           state.loading = false
//         }

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

  // 重新加载数据
  init();
        }
/**编辑 */
      const onDateUpdate=(row)=>{
        console.log("编辑行数据：", row);
      }
</script>
<style scoped lang="scss">
.fengexian{
  margin-top: -3vh;
  margin-bottom: 1vh;
}
.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>