|
|
@@ -0,0 +1,259 @@
|
|
|
+
|
|
|
+<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="6" :xl="4" 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="6" :xl="4" 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="6" :xl="4" 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="[5, 15, 25, 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>
|
