优化通知栏，通知实时同步功能

weather-data-ui/src/views/home.vue

@@ -233,27 +233,9 @@
                 </div>
               </div>
               <div class="filter-group">
-                <div class="fg-title"><span class="fg-dot year-dot"></span> 年份条件</div>
+                <div class="fg-title"><span class="fg-dot year-dot"></span> 年代筛选</div>
                 <div class="fg-row">
-                  <span class="fg-label">年份范围</span>
-                  <el-input-number
-                    v-model="filters.yearRange[0]"
-                    :min="MIN_YEAR"
-                    :max="currentYear"
-                    size="small"
-                    style="width: 10ch"
-                  />
-                  <span class="fg-sep">~</span>
-                  <el-input-number
-                    v-model="filters.yearRange[1]"
-                    :min="MIN_YEAR"
-                    :max="currentYear"
-                    size="small"
-                    style="width: 10ch"
-                  />
-                </div>
-                <div class="fg-row">
-                  <span class="fg-label">年代筛选</span>
+                  <span class="fg-label">年代</span>
                   <div class="level-chips">
                     <span
                       v-for="d in availableDecades"
@@ -709,7 +691,6 @@ function rowMatchesFilter(row: WeatherDataRow, f: typeof filters.value): boolean
     if (f.tavgF.op === "lte" && n > f.tavgF.val) return false;
     if (f.tavgF.op === "range" && (n < (f.tavgF.min ?? -Infinity) || n > (f.tavgF.max ?? Infinity))) return false;
   }
-  if (row.year < f.yearRange[0] || row.year > f.yearRange[1]) return false;
   if (f.decades.length > 0 && !f.decades.includes(Math.floor(row.year / 10) * 10)) return false;
   if (f.rainLevel.length > 0 && !f.rainLevel.includes(rainLevelLabel(row.rainfall))) return false;
   return true;

weather-data-ui/src/views/sys/system-alert-add-or-update.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-dialog v-model="visible" :title="!dataForm.id ? '新增通知' : '修改通知'" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="100px">
+      <el-form-item prop="level" label="级别">
+        <el-select v-model="dataForm.level" placeholder="级别">
+          <el-option label="提示" value="info"></el-option>
+          <el-option label="警告" value="warning"></el-option>
+          <el-option label="紧急" value="danger"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="title" label="标题">
+        <el-input v-model="dataForm.title" placeholder="标题"></el-input>
+      </el-form-item>
+      <el-form-item prop="content" label="内容">
+        <el-input v-model="dataForm.content" type="textarea" :rows="5" placeholder="通知正文"></el-input>
+      </el-form-item>
+      <el-form-item prop="sourceType" label="来源类型">
+        <el-select v-model="dataForm.sourceType" placeholder="来源类型">
+          <el-option label="手动发布" value="manual"></el-option>
+          <el-option label="导入任务" value="import"></el-option>
+          <el-option label="定时任务" value="schedule"></el-option>
+          <el-option label="数据源监测" value="datasource"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="expireTime" label="过期时间">
+        <el-date-picker
+          v-model="dataForm.expireTime"
+          type="datetime"
+          placeholder="过期时间（选填）"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          style="width: 100%"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item v-if="dataForm.id" label="发布时间">
+        <span>{{ dataForm.publishTime }}</span>
+      </el-form-item>
+    </el-form>
+    <template v-slot:footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import baseService from "@/service/baseService";
+import { ElMessage } from "element-plus";
+
+const emit = defineEmits(["refreshDataList"]);
+
+const visible = ref(false);
+const dataFormRef = ref();
+
+const defaultForm = () => ({
+  id: "",
+  level: "info",
+  title: "",
+  content: "",
+  sourceType: "manual",
+  expireTime: "",
+  publishTime: ""
+});
+
+const dataForm = reactive(defaultForm());
+
+const rules = ref({
+  level: [{ required: true, message: "必填项不能为空", trigger: "change" }],
+  title: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
+  content: [{ required: true, message: "必填项不能为空", trigger: "blur" }]
+});
+
+const init = (id?: string) => {
+  visible.value = true;
+  Object.assign(dataForm, defaultForm());
+
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+  }
+
+  if (id) {
+    getInfo(id);
+  }
+};
+
+const getInfo = (id: string) => {
+  baseService.get(`/sys/alert/${id}`).then((res) => {
+    Object.assign(dataForm, res.data);
+  });
+};
+
+const dataFormSubmitHandle = () => {
+  dataFormRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return false;
+    }
+    (!dataForm.id ? baseService.post : baseService.put)("/sys/alert", {
+      ...dataForm,
+      id: dataForm.id || undefined,
+      expireTime: dataForm.expireTime || undefined,
+      publishTime: undefined
+    }).then(() => {
+      ElMessage.success({
+        message: "成功",
+        duration: 500,
+        onClose: () => {
+          visible.value = false;
+          emit("refreshDataList");
+        }
+      });
+    });
+  });
+};
+
+defineExpose({ init });
+</script>

weather-data-ui/src/views/sys/system-alert.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="mod-sys__alert">
+    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
+      <el-form-item>
+        <el-select v-model="state.dataForm.level" placeholder="级别" clearable>
+          <el-option label="提示" value="info"></el-option>
+          <el-option label="警告" value="warning"></el-option>
+          <el-option label="紧急" value="danger"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="state.dataForm.title" placeholder="标题" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="state.dataForm.sourceType" placeholder="来源类型" clearable>
+          <el-option label="手动发布" value="manual"></el-option>
+          <el-option label="导入任务" value="import"></el-option>
+          <el-option label="定时任务" value="schedule"></el-option>
+          <el-option label="数据源监测" value="datasource"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="state.getDataList()">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button v-if="state.hasPermission('sys:alert:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button v-if="state.hasPermission('sys:alert:delete')" type="danger" @click="state.deleteHandle()">删除</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      v-loading="state.dataListLoading"
+      :data="state.dataList"
+      border
+      @selection-change="state.dataListSelectionChangeHandle"
+      @sort-change="state.dataListSortChangeHandle"
+      style="width: 100%"
+    >
+      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="level" label="级别" sortable="custom" header-align="center" align="center" width="80">
+        <template v-slot="scope">
+          <el-tag v-if="scope.row.level === 'danger'" size="small" type="danger">紧急</el-tag>
+          <el-tag v-else-if="scope.row.level === 'warning'" size="small" type="warning">警告</el-tag>
+          <el-tag v-else size="small" type="info">提示</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="标题" header-align="center" align="center" width="200" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="content" label="内容" header-align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="sourceType" label="来源类型" header-align="center" align="center" width="110">
+        <template v-slot="scope">
+          <span v-if="scope.row.sourceType === 'manual'">手动发布</span>
+          <span v-else-if="scope.row.sourceType === 'import'">导入任务</span>
+          <span v-else-if="scope.row.sourceType === 'schedule'">定时任务</span>
+          <span v-else-if="scope.row.sourceType === 'datasource'">数据源监测</span>
+          <span v-else>{{ scope.row.sourceType }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="publishTime" label="发布时间" sortable="custom" header-align="center" align="center" width="170"></el-table-column>
+      <el-table-column prop="expireTime" label="过期时间" sortable="custom" header-align="center" align="center" width="170">
+        <template v-slot="scope">
+          <span v-if="scope.row.expireTime">{{ scope.row.expireTime }}</span>
+          <span v-else style="color: #999">--</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
+        <template v-slot="scope">
+          <el-button v-if="state.hasPermission('sys:alert:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+          <el-button v-if="state.hasPermission('sys:alert:delete')" type="danger" link @click="state.deleteHandle(scope.row.id)">删除</el-button>
+          <el-button v-if="state.hasPermission('sys:alert:update')" type="warning" link @click="withdrawHandle(scope.row.id)">撤回</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :current-page="state.page"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="state.limit"
+      :total="state.total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="state.pageSizeChangeHandle"
+      @current-change="state.pageCurrentChangeHandle"
+    >
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import useView from "@/hooks/useView";
+import { reactive, ref, toRefs } from "vue";
+import baseService from "@/service/baseService";
+import { ElMessage, ElMessageBox } from "element-plus";
+import AddOrUpdate from "./system-alert-add-or-update.vue";
+
+const view = reactive({
+  getDataListURL: "/sys/alert/page",
+  getDataListIsPage: true,
+  deleteURL: "/sys/alert",
+  deleteIsBatch: true,
+  dataForm: {
+    level: "",
+    title: "",
+    sourceType: ""
+  }
+});
+
+const state = reactive({ ...useView(view), ...toRefs(view) });
+
+const addOrUpdateRef = ref();
+const addOrUpdateHandle = (id?: string) => {
+  addOrUpdateRef.value.init(id);
+};
+
+const withdrawHandle = (id: string) => {
+  ElMessageBox.confirm("确定要撤回该通知吗？撤回后前端将不再展示。", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(() => {
+    baseService.put(`/sys/alert/${id}/withdraw`).then(() => {
+      ElMessage.success("撤回成功");
+      state.getDataList();
+    });
+  });
+};
+</script>