From b30f1ba95fdd66affb03e6c0372e900cd420f680 Mon Sep 17 00:00:00 2001
From: lvys <huxin@123.com>
Date: Wed, 30 Apr 2025 20:55:22 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=8E=A7=E7=82=B9=E4=B8=80=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Earlywarnings/WarningInformation.vue      |  882 ++++++++++++++
 .../Earlywarnings/Warningdisposal - 副本.vue  |  313 +++++
 .../system/Earlywarnings/Warningdisposal.vue  | 1034 +++++++++++++++++
 .../system/Earlywarnings/Warningrules.vue     |  368 ++++++
 4 files changed, 2597 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/views/system/Earlywarnings/WarningInformation.vue
 create mode 100644 Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningdisposal - 副本.vue
 create mode 100644 Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningdisposal.vue
 create mode 100644 Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningrules.vue

diff --git a/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/WarningInformation.vue b/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/WarningInformation.vue
new file mode 100644
index 0000000..8eb19b4
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/WarningInformation.vue
@@ -0,0 +1,882 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+      <el-row>
+        <el-form-item label="预警名称" prop="warningSigns">
+          <el-input v-model="queryParams.warningSigns" placeholder="请输入预警名称" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="发布时间" prop="releaseTime">
+          <!-- <el-date-picker clearable v-model="queryParams.releaseTime" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择发布时间">
+          </el-date-picker> -->
+           <el-date-picker
+            v-model="dateRange"
+            type="datetimerange"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :shortcuts="filterShortcuts"
+            class="custom-date-picker"
+          />
+        </el-form-item>
+
+         <el-form-item label="预警状态" prop="warningStatus">
+             <el-select
+            v-model="queryParams.warningStatus"
+            placeholder="预警状态"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="dict in event_status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+         <el-form-item label="预警级别" prop="warningLevel">
+         <el-select
+            v-model="queryParams.warningLevel"
+            placeholder="预警级别"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="dict in warning_level"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-row>
+      <el-row class="dfjb">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-button type="primary" @click="handleAdd" class="circle-plus-btn">
+              新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" icon="Delete" plain :disabled="multiple" @click="handleDelete">删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="RefreshLeft" class="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-row>
+    </el-form>
+
+
+    <div class="tablebox">
+      <el-table stripe v-loading="loading" @row-click="handleActivityRowClickJK" :data="informationList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="预警名称" align="center" prop="warningSigns" show-overflow-tooltip />
+        <el-table-column label="预警点位" show-overflow-tooltip align="center" prop="pointName" />
+         <el-table-column label="预警摄像" show-overflow-tooltip align="center" prop="cameraName" />
+        <!-- <el-table-column
+          label="发布单位编码"
+          width="140"
+          show-overflow-tooltip
+          align="center"
+          prop="unitCode"
+        /> -->
+        <el-table-column label="发布时间" align="center" prop="releaseTime" show-overflow-tooltip>
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.releaseTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
+          </template>
+        </el-table-column>
+         <el-table-column label="预警状态" align="center" prop="warningStatus">
+          <template #default="scope">
+            <dict-tag
+              :options="event_status"
+              :value="scope.row.warningStatus"
+            />
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="预警类型" align="center" prop="warningType">
+          <template #default="scope">
+            <dict-tag :options="warning_type" :value="scope.row.warningType" />
+          </template>
+        </el-table-column> -->
+        <!-- <el-table-column label="事件类别" align="center" prop="eventCategory">
+          <template #default="scope">
+            <dict-tag
+              :options="event_category"
+              :value="scope.row.eventCategory"
+            />
+          </template>
+        </el-table-column> -->
+        <el-table-column label="预警级别" align="center" prop="warningLevel">
+          <template #default="scope">
+            <dict-tag :options="warning_level" :value="scope.row.warningLevel" />
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="经度" align="center" prop="lng" show-overflow-tooltip />
+        <el-table-column label="纬度" align="center" prop="lat" show-overflow-tooltip /> -->
+        <el-table-column label="预计持续时间" align="center" width="140" show-overflow-tooltip prop="expectedDuration" />
+        <el-table-column label="可能波及范围" width="140" show-overflow-tooltip align="center" prop="scopeImpact" />
+        <el-table-column label="异常数据值" align="center" width="140" show-overflow-tooltip prop="abnormalData" />
+        <el-table-column fixed="right" label="操作" align="center" width="280" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button> -->
+            <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> -->
+            <el-button link type="primary" icon="Warning" :disabled="scope.row.isSupervise == '1'"
+              @click.stop="duban(scope.row)">督办</el-button>
+            <!-- <el-button link type="primary" icon="Share" :disabled="scope.row.eventStatus !== '1'"
+              @click="xiafa(scope.row)">下发</el-button> -->
+            <!-- <el-button link type="primary" icon="Share" @click.stop="handleOpenCall(scope.row)">呼叫</el-button> -->
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </div>
+
+    <!-- 添加或修改预警信息对话框 -->
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
+      <el-form label-position="top" ref="informationRef" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="40">
+          <el-col :span="12">
+            <el-form-item label="预警唯一标识符" prop="warningSigns">
+              <el-input v-model="form.warningSigns" placeholder="请输入预警唯一标识符" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发布单位名称" prop="unitName">
+              <el-input v-model="form.unitName" placeholder="请输入发布单位名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发生点位" prop="pointsId">
+              <el-select v-model="form.pointsId" placeholder="监控点名称" clearable style="width: 100%">
+                <el-option v-for="dict in jklistCameraList" :key="dict.id" :label="dict.pointName" :value="dict.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发布时间" prop="releaseTime">
+              <el-date-picker clearable v-model="form.releaseTime" type="datetime" style="width:100%;"
+                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择发布时间">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item label="预警类型" prop="warningType">
+              <el-select
+                v-model="form.warningType"
+                placeholder="预警类型"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in warning_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="预警状态" prop="warningStatus">
+              <el-select
+                v-model="form.warningStatus"
+                placeholder="预警状态"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in warning_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="事件类别" prop="eventCategory">
+              <el-select
+                v-model="form.eventCategory"
+                placeholder="事件类别"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in event_category"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item label="预警级别" prop="warningLevel">
+              <el-select v-model="form.warningLevel" placeholder="预警级别" clearable style="width: 100%">
+                <el-option v-for="dict in warning_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="经度" prop="lng">
+              <el-input v-model="form.lng" placeholder="请输入经度" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="纬度" prop="lat">
+              <el-input v-model="form.lat" placeholder="请输入纬度" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地图帮助">
+              <div class="map" @click="getMap">地图帮助</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="预计持续时间" prop="expectedDuration">
+              <el-input v-model="form.expectedDuration" placeholder="请输入预计持续时间" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="可能波及范围" prop="scopeImpact">
+              <el-input v-model="form.scopeImpact" placeholder="请输入可能波及范围" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="异常数据值" prop="abnormalData">
+              <el-input v-model="form.abnormalData" placeholder="请输入异常数据值" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 下发 -->
+    <el-dialog :title="title" v-model="xiafaDialog" width="500px" append-to-body>
+      <el-form label-position="top" ref="xiafaFormRef" :model="xiafaform" label-width="80px" :rules="xiafaRules">
+        <el-row :gutter="40">
+          <el-col :span="24">
+            <el-form-item label="部门" prop="bumen">
+              <el-select v-model="xiafaform.bumen" placeholder="请选择地点" clearable style="width: 100%"
+                @change="TreeCHange">
+                <!-- 递归渲染树形选项 -->
+                <el-option v-for="item in treeData" :key="item.id" :label="item.label" :value="item.id"
+                  :disabled="item.disabled" style="font-weight: bold" />
+                <template v-for="group in treeData[0]?.children" :key="group.id">
+                  <!-- 父级选项（景区/商场） -->
+                  <el-option :label="group.label" :value="group.id" :disabled="group.disabled"
+                    style="font-weight: bold" />
+                  <!-- 子级选项 -->
+                  <el-option v-for="child in group.children" :key="child.id" :label="child.label" :value="child.id"
+                    :disabled="child.disabled" />
+                </template>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="人员" prop="renyuan">
+              <el-select :disabled="!xiafaform.bumen" v-model="xiafaform.renyuan" placeholder="请选择人员" clearable
+                style="width: 100%">
+                <el-option v-for="dict in peopleList" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="规则名称" prop="guizemingcheng">
+              <el-select v-model="xiafaform.guizemingcheng" placeholder="预警类型" clearable style="width: 100%">
+                <el-option v-for="dict in NnameList" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="委派时间" prop="delegationTime">
+              <el-date-picker clearable v-model="xiafaform.delegationTime" type="date" style="width: 100%;"
+                value-format="YYYY-MM-DD" placeholder="请选择委派时间">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="xiafaDialogSure">确 定</el-button>
+          <el-button @click="xiafaDialog = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 呼叫 -->
+    <el-dialog :title="callTitle" v-model="callDialog" width="500px" append-to-body>
+      <el-row>
+        <el-col :span="24">
+          <div class="callDemo">
+            <!-- 呼叫 -->
+            <Call ref="CallRef" :listRows="callForm" width="100%" height="400px" />
+          </div>
+
+        </el-col>
+      </el-row>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="callDialog = false">关 闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Information">
+const { proxy } = getCurrentInstance();
+
+import {
+  listInformation,
+  getInformation,
+  delInformation,
+  addInformation,
+  updateInformation,
+  nameList,
+  xiafaSrue,
+} from "@/api/WarningInformation";
+import {
+  jklistCamera,
+} from "@/api/camera";
+import {
+  getPoints,
+} from "@/api/points";
+import { deptTreeSelect, listUser } from "@/api/system/user";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Call from "@/components/call.vue";
+const dateRange = ref([]);
+const filterShortcuts = ref([
+  {
+    text: "本周",
+    value: () => {
+      const now = new Date();
+      const firstDay = new Date(
+        now.setDate(
+          now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)
+        )
+      );
+      const lastDay = new Date(now.setDate(now.getDate() - now.getDay() + 7));
+      return [firstDay, lastDay];
+    },
+  },
+  {
+    text: "本月",
+    value: () => {
+      const now = new Date();
+      const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
+      const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+      return [firstDay, lastDay];
+    },
+  },
+  {
+    text: "本季度",
+    value: () => {
+      const now = new Date();
+      const quarter = Math.floor(now.getMonth() / 3);
+      const firstDay = new Date(now.getFullYear(), quarter * 3, 1);
+      const lastDay = new Date(now.getFullYear(), quarter * 3 + 3, 0);
+      return [firstDay, lastDay];
+    },
+  },
+  {
+    text: "本年",
+    value: () => {
+      const now = new Date();
+      const firstDay = new Date(now.getFullYear(), 0, 1);
+      const lastDay = new Date(now.getFullYear(), 11, 31);
+      return [firstDay, lastDay];
+    },
+  },
+]);
+
+const {
+  sys_yes_no,
+  event_category,
+  warning_level,
+  warning_type,
+  warning_status,
+  event_status
+} = proxy.useDict(
+  "sys_yes_no",
+  "event_category",
+  "warning_level",
+  "warning_type",
+  "warning_status",
+  "event_status"
+);
+const jklistCameraList = ref([]);
+const informationList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const treeData = ref([]);
+const xiafaDialog = ref(false);
+const peopleList = ref([]);
+const NnameList = ref([]);
+const warningSigns = ref("");
+const RqID = ref("");
+// 呼叫
+const callTitle = ref("");
+const callDialog = ref(false);
+const callForm = ref({});
+const data = reactive({
+  form: {},
+  xiafaform: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    delFlag: 0,
+    warningSigns: null,
+    unitName: null,
+    unitCode: null,
+    releaseTime: null,
+    warningStatus: null,
+    warningType: null,
+    eventCategory: null,
+    warningLevel: null,
+    expectedDuration: null,
+    scopeImpact: null,
+    deptId: null,
+    abnormalData: null,
+  },
+  rules: {
+    warningSigns: [
+      { required: true, message: "预警唯一标识符不能为空", trigger: "blur" },
+      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
+    ],
+    unitName: [
+      { required: true, message: "发布单位名称不能为空", trigger: "blur" },
+      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
+    ],
+    unitCode: [
+      { required: true, message: "发生点位不能为空", trigger: "blur" },
+    ],
+    releaseTime: [
+      { required: true, message: "发布时间不能为空", trigger: "change" },
+    ],
+    eventCategory: [
+      { required: true, message: "事件类别不能为空", trigger: "blur" },
+    ],
+    warningStatus: [
+      { required: true, message: "预警状态不能为空", trigger: "blur" },
+    ],
+    warningType: [
+      { required: true, message: "预警类型不能为空", trigger: "blur" },
+    ],
+    warningLevel: [
+      { required: true, message: "预警级别不能为空", trigger: "blur" },
+    ],
+    expectedDuration: [
+      { required: true, message: "预计持续时间不能为空", trigger: "blur" },
+    ],
+    scopeImpact: [
+      { required: true, message: "可能波及范围不能为空", trigger: "blur" },
+      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
+    ],
+    abnormalData: [
+      { required: true, message: "异常数据值不能为空", trigger: "blur" },
+      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
+    ],
+    lng: [
+      { required: true, message: "经度不能为空", trigger: "blur" },
+      {
+        pattern: /^-?\d{1,3}(\.\d+)?$/,
+        message: "请输入有效的经度值（-180~180）",
+        trigger: "blur",
+      },
+    ],
+    lat: [
+      { required: true, message: "纬度不能为空", trigger: "blur" },
+      {
+        pattern: /^-?\d{1,2}(\.\d+)?$/,
+        message: "请输入有效的纬度值（-90~90）",
+        trigger: "blur",
+      },
+    ],
+  },
+  xiafaRules: {
+    bumen: [{ required: true, message: "部门不能为空", trigger: "blur" }],
+    renyuan: [{ required: true, message: "人员不能为空", trigger: "blur" }],
+    guizemingcheng: [
+      { required: true, message: "规则名称不能为空", trigger: "blur" },
+    ],
+    delegationTime: [
+      { required: true, message: "时间不能为空", trigger: "blur" },
+    ],
+  },
+});
+const { queryParams, form, rules, xiafaform, xiafaRules } = toRefs(data);
+import moment from "moment";
+import { useRouter } from "vue-router";
+const router = useRouter();
+// 类型映射关系
+const typeToTabMap = {
+  重点场所: "venue",
+  景区: "scenic",
+  景点: "scenic",
+  旅游景区: "scenic",
+  安保力量: "security",
+  安保: "security",
+  交通枢纽: "transport",
+  交通: "transport",
+  活动: "activity",
+  大型活动: "activity",
+  预警: "warning",
+  监测预警: "warning",
+  监控: "jiankong",
+};
+const handleActivityRowClickJK = (row) => {
+  console.log(row);
+  if (row.warningStatus == "3") {
+    proxy.$modal.msgWarning("该条记录已处理");
+    return;
+  } else {
+    const monitoringTypeName =
+      typeToTabMap[row.monitoringTypeName] || "warning";
+    goToMap(6, row.lat, row.lng, monitoringTypeName);
+  }
+};
+function goToMap(screenId, lat, lng, monitoringTypeName, extraParams = {}) {
+  if (!lat || !lng || isNaN(Number(lat)) || isNaN(Number(lng))) {
+    proxy.$modal.msgWarning("该记录缺少有效的经纬度信息，无法定位");
+    return;
+  }
+
+  router.push({
+    path: "/largeScreen",
+    query: {
+      screenId: screenId,
+      latitude: Number(lat).toFixed(6),
+      longitude: Number(lng).toFixed(6),
+      monitoringTypeName: monitoringTypeName,
+      ...extraParams,
+    },
+  });
+}
+
+/** 查询预警信息列表 */
+function getList() {
+  loading.value = true;
+  listInformation(queryParams.value).then((response) => {
+    informationList.value = response.rows;
+    console.log(informationList.value,'预警列表');
+    
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    warningSigns: null,
+    unitName: null,
+    unitCode: null,
+    releaseTime: null,
+    warningStatus: null,
+    warningType: null,
+    eventCategory: null,
+    warningLevel: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+    expectedDuration: null,
+    scopeImpact: null,
+    deptId: null,
+    abnormalData: null,
+  };
+  proxy.resetForm("informationRef");
+}
+function xiafareset() {
+  xiafaform.value = {
+    bumen: null,
+    renyuan: null,
+    guizemingcheng: null,
+    delegationTime: null,
+  };
+  proxy.resetForm("xiafaFormRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+    // 这里修改为只更新时间参数，而不是覆盖整个queryParams
+  if (dateRange.value && dateRange.value.length === 2) {
+    queryParams.value.startTime = moment(dateRange.value[0]).format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+    queryParams.value.endTime = moment(dateRange.value[1]).format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+  } else {
+    // 如果dateRange为空，则清空时间参数
+    queryParams.value.startTime = undefined;
+    queryParams.value.endTime = undefined;
+  }
+  getList();
+}
+
+/** 重置按钮操作 */   
+function resetQuery() {
+  proxy.resetForm("queryRef");
+   dateRange.value = [];
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加预警信息";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _id = row.id || ids.value;
+  getInformation(_id).then((response) => {
+    form.value = response.data;
+    form.value.
+    open.value = true;
+    title.value = "修改预警信息";
+  });
+}
+// 督办
+function duban(row) {
+  proxy.$modal
+    .confirm("确认督办本条数据吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    })
+    .then(() => {
+      row.isSupervise = 1;
+      form.value = row;
+      updateInformation(form.value).then((response) => {
+        proxy.$modal.msgSuccess("修改成功");
+        open.value = false;
+        getList();
+      });
+    })
+    .catch(() => {
+      console.log("取消");
+    });
+}
+// 下发
+function xiafa(row) {
+  RqID.value = row.id;
+  warningSigns.value = row.warningSigns;
+  xiafareset();
+  xiafaDialog.value = true;
+  title.value = "下发";
+  getNameList();
+}
+// select树选择事件
+function TreeCHange(e) {
+  console.log(e);
+  xiafaform.value.renyuan = "";
+  let params = {
+    pageNum: 1,
+    pageSize: 100,
+    deptId: e,
+  };
+  listUser(params).then((res) => {
+    peopleList.value = [];
+    res.rows.forEach((item) => {
+      peopleList.value.push({
+        label: item.userName,
+        value: item.userId,
+      });
+    });
+  });
+}
+// 获取树结构
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    treeData.value = response.data;
+  });
+}
+// 下发弹出确认事件
+function xiafaDialogSure() {
+  proxy.$refs["xiafaFormRef"].validate((valid) => {
+    if (valid) {
+      let params = {
+        warningId: RqID.value,
+        warningSigns: warningSigns.value,
+        delegatePersonnel: xiafaform.value.renyuan,
+        delegationTime: xiafaform.value.delegationTime,
+        delegationDept: xiafaform.value.bumen,
+        rulesId: xiafaform.value.guizemingcheng,
+      };
+      xiafaSrue(params).then((res) => {
+        ElMessage.success("下发成功");
+        getList();
+        xiafaDialog.value = false;
+      });
+    }
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["informationRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateInformation(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        form.value.warningStatus=1
+        addInformation(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+// 重置呼叫弹框信息
+function resetCall() {
+  callTitle.value = "";
+  callDialog.value = false;
+  callForm.value = {};
+}
+
+// 打开呼叫弹框
+function handleOpenCall(row) {
+  console.log(row);
+  
+  resetCall();
+  callTitle.value = "呼叫";
+  callDialog.value = true;
+  // callForm.value = JSON.parse(JSON.stringify(row));
+  const _id = row.unitCode;
+  getPoints(_id).then((response) => {
+    callForm.value = {
+      phone: response.data.dutyPhone
+    }
+  });
+
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal
+    .confirm("是否确认删除所选数据项？")
+    .then(function () {
+      return delInformation(_ids);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => { });
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "large/information/export",
+    {
+      ...queryParams.value,
+    },
+    `information_${new Date().getTime()}.xlsx`
+  );
+}
+function getMap() {
+  window.open(
+    "https://lbs.amap.com/tools/picker",
+    "_blank",
+    "width=950,height=700"
+  );
+}
+function getNameList() {
+  nameList().then((res) => {
+    NnameList.value = [];
+    console.log(res);
+    res.rows.forEach((item) => {
+      NnameList.value.push({
+        label: item.ruleName,
+        value: item.id,
+      });
+    });
+  });
+}
+function getjklistCamera() {
+  let params = {
+    delFlag: 0,
+  };
+  jklistCamera(params).then((res) => {
+    jklistCameraList.value = res.rows;
+  });
+}
+getList();
+// getDeptTree();
+getjklistCamera();
+</script>
+<style scoped>
+.map {
+  cursor: pointer;
+  color: #203f73;
+}
+
+/* 修改斑马纹的浅色行背景 */
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #dbe4f5 !important;
+  /* 改为淡蓝色 */
+}
+</style>
+<style lang="scss" scoped>
+.callDemo {
+  &:deep(#demo) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+
+    .el-button {
+      max-width: 100px;
+    }
+  }
+}
+</style>
diff --git a/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningdisposal - 副本.vue b/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningdisposal - 副本.vue
new file mode 100644
index 0000000..e97fdbb
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningdisposal - 副本.vue	
@@ -0,0 +1,313 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="120px"
+    >
+      <el-row>
+        <el-form-item label="唯一标识符" prop="warningSigns">
+          <el-input
+            v-model="queryParams.warningSigns"
+            placeholder="请输入预警唯一标识符"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="委派时间" prop="delegationTime">
+          <el-date-picker
+            clearable
+            v-model="queryParams.delegationTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择委派时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+          <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="RefreshLeft" class="Refresh" @click="resetQuery"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-row>
+      <el-row class="dfjb">
+        <el-row :gutter="10"> </el-row>
+      
+      </el-row>
+    </el-form>
+    <div class="tablebox">
+      <el-table
+        v-loading="loading"
+        :data="handleList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column
+          label="预警唯一标识符"
+          show-overflow-tooltip
+          width="160"
+          align="center"
+          prop="warningSigns"
+        />
+        <el-table-column label="委派人" align="center" prop="nickName" />
+        <el-table-column
+          label="委派时间"
+          align="center"
+          prop="delegationTime"
+          width="180"
+        >
+          <template #default="scope">
+            <span>{{
+              parseTime(scope.row.delegationTime, "{y}-{m}-{d}")
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="委派部门" align="center" prop="deptName" />
+        <!-- <el-table-column
+        label="处置措施"
+        align="center"
+        prop="disposalMeasures"
+      />
+      <el-table-column label="处置结果" align="center" prop="disposalResults" /> -->
+        <el-table-column label="处理状态" align="center" prop="disposalStatus">
+          <template #default="scope">
+            <span v-if="scope.row.disposalStatus == 1">已处理</span>
+            <span v-else-if="scope.row.disposalStatus == 2">已回复</span>
+            <span v-else>待处理</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              :disabled="
+                scope.row.disposalStatus == 1 || scope.row.disposalStatus == 2
+              "
+              icon="Look"
+              @click="shouli(scope.row)"
+              >受理</el-button
+            >
+            <el-button
+              link
+              type="primary"
+              :disabled="scope.row.disposalStatus != 1"
+              icon="Look"
+              @click="huifu(scope.row)"
+              >回复</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- 回复对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form
+        ref="informationRef"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="处置措施" prop="disposalMeasures">
+          <el-input
+            v-model="form.disposalMeasures"
+            placeholder="请输入处置措施"
+          />
+        </el-form-item>
+        <el-form-item label="处置结果" prop="disposalResults">
+          <el-input
+            v-model="form.disposalResults"
+            placeholder="请输入处置结果"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Handle">
+import {
+  listHandle,
+  getHandle,
+  delHandle,
+  addHandle,
+  updateHandle,
+  addprocess,
+} from "@/api/Warningdisposal";
+import { ElMessage } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+
+const handleList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    delFlag: 0,
+    warningSigns: null,
+    delegatePersonnel: null,
+    delegationTime: null,
+    delegationDept: null,
+    disposalMeasures: null,
+    disposalResults: null,
+    disposalStatus: null,
+  },
+  rules: {
+    disposalMeasures: [
+      { required: true, message: "处置措施不能为空", trigger: "change" },
+      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
+    ],
+    disposalResults: [
+      { required: true, message: "处置结果不能为空", trigger: "change" },
+      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询预警信息处置列表 */
+function getList() {
+  loading.value = true;
+  listHandle(queryParams.value).then((response) => {
+    handleList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    warningSigns: null,
+    delegatePersonnel: null,
+    delegationTime: null,
+    delegationDept: null,
+    disposalMeasures: null,
+    disposalResults: null,
+    disposalStatus: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+  };
+  proxy.resetForm("informationRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 提交按钮 */
+function submitForm() {
+  console.log(form.value);
+  proxy.$refs["informationRef"].validate((valid) => {
+    if (valid) {
+      form.value.disposalStatus = 2;
+      updateHandle(form.value).then((res) => {
+        if (res.code == 200) {
+          console.log(res);
+          open.value = false;
+          ElMessage.success("回复成功");
+          getList();
+        }
+      });
+    }
+  });
+}
+
+/** 受理操作 */
+function shouli(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal
+    .confirm("是否受理本条数据？")
+    .then(function () {})
+    .then(() => {
+      row.disposalStatus = 1;
+      updateHandle(row).then((res) => {
+        if (res.code == 200) {
+          console.log(res);
+          ElMessage.success("受理成功");
+        }
+      });
+    })
+    .catch(() => {
+      console.log("取消");
+    });
+}
+//  回复操作
+function huifu(row) {
+  form.value = row;
+  open.value = true;
+  title.value = "回复";
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "large/handle/export",
+    {
+      ...queryParams.value,
+    },
+    `handle_${new Date().getTime()}.xlsx`
+  );
+}
+
+getList();
+</script>
diff --git a/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningdisposal.vue b/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningdisposal.vue
new file mode 100644
index 0000000..924ba54
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningdisposal.vue
@@ -0,0 +1,1034 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+    >
+      <el-row>
+        <el-form-item label="预警名称" prop="warningSigns">
+          <el-input
+            v-model="queryParams.warningSigns"
+            placeholder="请输入预警名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+           <el-form-item label="发布时间" prop="releaseTime">
+          <!-- <el-date-picker clearable v-model="queryParams.releaseTime" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择发布时间">
+          </el-date-picker> -->
+           <el-date-picker
+            v-model="dateRange"
+            type="datetimerange"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :shortcuts="filterShortcuts"
+            class="custom-date-picker"
+          />
+        </el-form-item>
+      </el-row>
+      <el-row class="dfjb">
+      <!-- <el-row :gutter="10">
+        <el-col :span="1.5">
+          <el-button type="primary" @click="handleAdd" class="circle-plus-btn">
+            新增
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" icon="Delete" plain :disabled="multiple" @click="handleDelete">删除</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+        </el-col>
+      </el-row> -->
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="RefreshLeft" class="Refresh" @click="resetQuery"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-row>
+    </el-form>
+
+    <div class="tablebox">
+      <el-table
+        stripe
+        v-loading="loading"
+        :data="informationList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column
+          label="预警名称"
+          align="center"
+          prop="warningSigns"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="预警点位"
+          show-overflow-tooltip
+          align="center"
+          prop="pointName"
+        />
+        <el-table-column
+          label="预警摄像"
+          show-overflow-tooltip
+          align="center"
+          prop="cameraName"
+        />
+        <!-- <el-table-column
+          label="发布单位编码"
+          width="140"
+          show-overflow-tooltip
+          align="center"
+          prop="unitCode"
+        /> -->
+        <el-table-column
+          label="发布时间"
+          align="center"
+          prop="releaseTime"
+          show-overflow-tooltip
+        >
+          <template #default="scope">
+            <span>{{
+              parseTime(scope.row.releaseTime, "{y}-{m}-{d} {h}:{i}:{s}")
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预警状态" align="center" prop="warningStatus">
+          <template #default="scope">
+            <dict-tag
+              :options="event_status"
+              :value="scope.row.warningStatus"
+            />
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="预警类型" align="center" prop="warningType">
+          <template #default="scope">
+            <dict-tag :options="warning_type" :value="scope.row.warningType" />
+          </template>
+        </el-table-column> -->
+        <!-- <el-table-column label="事件类别" align="center" prop="eventCategory">
+          <template #default="scope">
+            <dict-tag
+              :options="event_category"
+              :value="scope.row.eventCategory"
+            />
+          </template>
+        </el-table-column> -->
+        <el-table-column label="预警级别" align="center" prop="warningLevel">
+          <template #default="scope">
+            <dict-tag
+              :options="warning_level"
+              :value="scope.row.warningLevel"
+            />
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="经度" align="center" prop="lng" show-overflow-tooltip />
+        <el-table-column label="纬度" align="center" prop="lat" show-overflow-tooltip /> -->
+        <el-table-column
+          label="预计持续时间"
+          align="center"
+          width="140"
+          show-overflow-tooltip
+          prop="expectedDuration"
+        />
+        <el-table-column
+          label="可能波及范围"
+          width="140"
+          show-overflow-tooltip
+          align="center"
+          prop="scopeImpact"
+        />
+        <el-table-column
+          label="异常数据值"
+          align="center"
+          width="140"
+          show-overflow-tooltip
+          prop="abnormalData"
+        />
+        <el-table-column
+          fixed="right"
+          label="操作"
+          align="center"
+          width="280"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              :disabled="scope.row.warningStatus != 1"
+              icon="Look"
+              @click="shouli(scope.row)"
+              >受理</el-button
+            >
+            <el-button
+              link
+              type="primary"
+              :disabled="scope.row.warningStatus != 2"
+              icon="Look"
+              @click="huifu(scope.row)"
+              >回复</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+      <!-- 添加或修改预警信息对话框 -->
+    <el-dialog :title="title" v-model="opens" width="800px" append-to-body>
+      <el-form label-position="top" ref="informationRef" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="40">
+          <el-col :span="12">
+            <el-form-item label="预警唯一标识符" prop="warningSigns">
+              <el-input v-model="form.warningSigns" placeholder="请输入预警唯一标识符" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发布单位名称" prop="unitName">
+              <el-input v-model="form.unitName" placeholder="请输入发布单位名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发生点位" prop="pointsId">
+              <el-select v-model="form.pointsId" placeholder="监控点名称" clearable style="width: 100%">
+                <el-option v-for="dict in jklistCameraList" :key="dict.id" :label="dict.pointName" :value="dict.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发布时间" prop="releaseTime">
+              <el-date-picker clearable v-model="form.releaseTime" type="datetime" style="width:100%;"
+                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择发布时间">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item label="预警类型" prop="warningType">
+              <el-select
+                v-model="form.warningType"
+                placeholder="预警类型"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in warning_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="预警状态" prop="warningStatus">
+              <el-select
+                v-model="form.warningStatus"
+                placeholder="预警状态"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in warning_status"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="事件类别" prop="eventCategory">
+              <el-select
+                v-model="form.eventCategory"
+                placeholder="事件类别"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in event_category"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item label="预警级别" prop="warningLevel">
+              <el-select v-model="form.warningLevel" placeholder="预警级别" clearable style="width: 100%">
+                <el-option v-for="dict in warning_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="经度" prop="lng">
+              <el-input v-model="form.lng" placeholder="请输入经度" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="纬度" prop="lat">
+              <el-input v-model="form.lat" placeholder="请输入纬度" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地图帮助">
+              <div class="map" @click="getMap">地图帮助</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="预计持续时间" prop="expectedDuration">
+              <el-input v-model="form.expectedDuration" placeholder="请输入预计持续时间" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="可能波及范围" prop="scopeImpact">
+              <el-input v-model="form.scopeImpact" placeholder="请输入可能波及范围" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="异常数据值" prop="abnormalData">
+              <el-input v-model="form.abnormalData" placeholder="请输入异常数据值" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForms">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 下发 -->
+    <el-dialog
+      :title="title"
+      v-model="xiafaDialog"
+      width="500px"
+      append-to-body
+    >
+      <el-form
+        label-position="top"
+        ref="xiafaFormRef"
+        :model="xiafaform"
+        label-width="80px"
+        :rules="xiafaRules"
+      >
+        <el-row :gutter="40">
+          <el-col :span="24">
+            <el-form-item label="部门" prop="bumen">
+              <el-select
+                v-model="xiafaform.bumen"
+                placeholder="请选择地点"
+                clearable
+                style="width: 100%"
+                @change="TreeCHange"
+              >
+                <!-- 递归渲染树形选项 -->
+                <el-option
+                  v-for="item in treeData"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+                  :disabled="item.disabled"
+                  style="font-weight: bold"
+                />
+                <template
+                  v-for="group in treeData[0]?.children"
+                  :key="group.id"
+                >
+                  <!-- 父级选项（景区/商场） -->
+                  <el-option
+                    :label="group.label"
+                    :value="group.id"
+                    :disabled="group.disabled"
+                    style="font-weight: bold"
+                  />
+                  <!-- 子级选项 -->
+                  <el-option
+                    v-for="child in group.children"
+                    :key="child.id"
+                    :label="child.label"
+                    :value="child.id"
+                    :disabled="child.disabled"
+                  />
+                </template>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="人员" prop="renyuan">
+              <el-select
+                :disabled="!xiafaform.bumen"
+                v-model="xiafaform.renyuan"
+                placeholder="请选择人员"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in peopleList"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="规则名称" prop="guizemingcheng">
+              <el-select
+                v-model="xiafaform.guizemingcheng"
+                placeholder="预警类型"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="dict in NnameList"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="委派时间" prop="delegationTime">
+              <el-date-picker
+                clearable
+                v-model="xiafaform.delegationTime"
+                type="date"
+                style="width: 100%"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择委派时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="xiafaDialogSure">确 定</el-button>
+          <el-button @click="xiafaDialog = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 呼叫 -->
+    <el-dialog
+      :title="callTitle"
+      v-model="callDialog"
+      width="500px"
+      append-to-body
+    >
+      <el-row>
+        <el-col :span="24">
+          <div class="callDemo">
+            <!-- 呼叫 -->
+            <Call
+              ref="CallRef"
+              :listRows="callForm"
+              width="100%"
+              height="400px"
+            />
+          </div>
+        </el-col>
+      </el-row>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="callDialog = false">关 闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 回复对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form
+        ref="informationRef"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="处置措施" prop="disposalMeasures">
+          <el-input
+            v-model="form.disposalMeasures"
+            placeholder="请输入处置措施"
+          />
+        </el-form-item>
+        <el-form-item label="处置结果" prop="disposalResults">
+          <el-input
+            v-model="form.disposalResults"
+            placeholder="请输入处置结果"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancels">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Information">
+const { proxy } = getCurrentInstance();
+const dateRange = ref([]);
+const filterShortcuts = ref([
+  {
+    text: "本周",
+    value: () => {
+      const now = new Date();
+      const firstDay = new Date(
+        now.setDate(
+          now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)
+        )
+      );
+      const lastDay = new Date(now.setDate(now.getDate() - now.getDay() + 7));
+      return [firstDay, lastDay];
+    },
+  },
+  {
+    text: "本月",
+    value: () => {
+      const now = new Date();
+      const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
+      const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+      return [firstDay, lastDay];
+    },
+  },
+  {
+    text: "本季度",
+    value: () => {
+      const now = new Date();
+      const quarter = Math.floor(now.getMonth() / 3);
+      const firstDay = new Date(now.getFullYear(), quarter * 3, 1);
+      const lastDay = new Date(now.getFullYear(), quarter * 3 + 3, 0);
+      return [firstDay, lastDay];
+    },
+  },
+  {
+    text: "本年",
+    value: () => {
+      const now = new Date();
+      const firstDay = new Date(now.getFullYear(), 0, 1);
+      const lastDay = new Date(now.getFullYear(), 11, 31);
+      return [firstDay, lastDay];
+    },
+  },
+]);
+import {
+  listInformation,
+  getInformation,
+  delInformation,
+  addInformation,
+  updateInformation,
+  nameList,
+  xiafaSrue,
+} from "@/api/WarningInformation";
+import moment from "moment";
+import {
+  listHandle,
+  getHandle,
+  delHandle,
+  addHandle,
+  updateHandle,
+  addprocess,
+} from "@/api/Warningdisposal";
+import { jklistCamera } from "@/api/camera";
+import { getPoints } from "@/api/points";
+import { deptTreeSelect, listUser } from "@/api/system/user";
+import { ElMessage, ElMessageBox } from "element-plus";
+import Call from "@/components/call.vue";
+
+const {
+  sys_yes_no,
+  event_category,
+  warning_level,
+  warning_type,
+  warning_status,
+  event_status,
+} = proxy.useDict(
+  "sys_yes_no",
+  "event_category",
+  "warning_level",
+  "warning_type",
+  "warning_status",
+  "event_status"
+);
+const jklistCameraList = ref([]);
+const informationList = ref([]);
+const open = ref(false);
+const opens = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const treeData = ref([]);
+const xiafaDialog = ref(false);
+const peopleList = ref([]);
+const NnameList = ref([]);
+const warningSigns = ref("");
+const RqID = ref("");
+
+// 呼叫
+const callTitle = ref("");
+const callDialog = ref(false);
+const callForm = ref({});
+const data = reactive({
+  form: {},
+  xiafaform: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    delFlag: 0,
+    warningSigns: null,
+    unitName: null,
+    unitCode: null,
+    releaseTime: null,
+    warningStatus: null,
+    warningType: null,
+    eventCategory: null,
+    warningLevel: null,
+    expectedDuration: null,
+    scopeImpact: null,
+    deptId: null,
+    abnormalData: null,
+  },
+  rules: {
+    disposalMeasures: [
+      { required: true, message: "处置措施不能为空", trigger: "change" },
+      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
+    ],
+    disposalResults: [
+      { required: true, message: "处置结果不能为空", trigger: "change" },
+      { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
+    ],
+  },
+  xiafaRules: {
+    bumen: [{ required: true, message: "部门不能为空", trigger: "blur" }],
+    renyuan: [{ required: true, message: "人员不能为空", trigger: "blur" }],
+    guizemingcheng: [
+      { required: true, message: "规则名称不能为空", trigger: "blur" },
+    ],
+    delegationTime: [
+      { required: true, message: "时间不能为空", trigger: "blur" },
+    ],
+  },
+});
+const { queryParams, form, rules, xiafaform, xiafaRules } = toRefs(data);
+
+import { useRouter } from "vue-router";
+const router = useRouter();
+// 类型映射关系
+const typeToTabMap = {
+  重点场所: "venue",
+  景区: "scenic",
+  景点: "scenic",
+  旅游景区: "scenic",
+  安保力量: "security",
+  安保: "security",
+  交通枢纽: "transport",
+  交通: "transport",
+  活动: "activity",
+  大型活动: "activity",
+  预警: "warning",
+  监测预警: "warning",
+  监控: "jiankong",
+};
+const handleActivityRowClickJK = (row) => {
+  console.log(row);
+  if (row.warningStatus == "3") {
+    proxy.$modal.msgWarning("该条记录已处理");
+    return;
+  } else {
+    const monitoringTypeName =
+      typeToTabMap[row.monitoringTypeName] || "warning";
+    goToMap(6, row.lat, row.lng, monitoringTypeName);
+  }
+};
+function goToMap(screenId, lat, lng, monitoringTypeName, extraParams = {}) {
+  if (!lat || !lng || isNaN(Number(lat)) || isNaN(Number(lng))) {
+    proxy.$modal.msgWarning("该记录缺少有效的经纬度信息，无法定位");
+    return;
+  }
+
+  router.push({
+    path: "/largeScreen",
+    query: {
+      screenId: screenId,
+      latitude: Number(lat).toFixed(6),
+      longitude: Number(lng).toFixed(6),
+      monitoringTypeName: monitoringTypeName,
+      ...extraParams,
+    },
+  });
+}
+
+/** 查询预警信息列表 */
+function getList() {
+  loading.value = true;
+  listInformation(queryParams.value).then((response) => {
+    informationList.value = response.rows;
+    console.log(informationList.value, "预警列表");
+
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+// 取消按钮
+function cancels() {
+  opens.value = false;
+  reset();
+}
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    warningSigns: null,
+    unitName: null,
+    unitCode: null,
+    releaseTime: null,
+    warningStatus: null,
+    warningType: null,
+    eventCategory: null,
+    warningLevel: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+    expectedDuration: null,
+    scopeImpact: null,
+    deptId: null,
+    abnormalData: null,
+  };
+  proxy.resetForm("informationRef");
+}
+function xiafareset() {
+  xiafaform.value = {
+    bumen: null,
+    renyuan: null,
+    guizemingcheng: null,
+    delegationTime: null,
+  };
+  proxy.resetForm("xiafaFormRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+    // 这里修改为只更新时间参数，而不是覆盖整个queryParams
+  if (dateRange.value && dateRange.value.length === 2) {
+    queryParams.value.startTime = moment(dateRange.value[0]).format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+    queryParams.value.endTime = moment(dateRange.value[1]).format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+  } else {
+    // 如果dateRange为空，则清空时间参数
+    queryParams.value.startTime = undefined;
+    queryParams.value.endTime = undefined;
+  }
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+     dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  opens.value = true;
+  title.value = "添加预警信息";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _id = row.id || ids.value;
+  getInformation(_id).then((response) => {
+    form.value = response.data;
+    opens.value = true;
+    title.value = "修改预警信息";
+  });
+}
+// 督办
+function duban(row) {
+  proxy.$modal
+    .confirm("确认督办本条数据吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    })
+    .then(() => {
+      row.isSupervise = 1;
+      form.value = row;
+      updateInformation(form.value).then((response) => {
+        proxy.$modal.msgSuccess("修改成功");
+        open.value = false;
+        getList();
+      });
+    })
+    .catch(() => {
+      console.log("取消");
+    });
+}
+// 下发
+function xiafa(row) {
+  RqID.value = row.id;
+  warningSigns.value = row.warningSigns;
+  xiafareset();
+  xiafaDialog.value = true;
+  title.value = "下发";
+  getNameList();
+}
+// select树选择事件
+function TreeCHange(e) {
+  console.log(e);
+  xiafaform.value.renyuan = "";
+  let params = {
+    pageNum: 1,
+    pageSize: 100,
+    deptId: e,
+  };
+  listUser(params).then((res) => {
+    peopleList.value = [];
+    res.rows.forEach((item) => {
+      peopleList.value.push({
+        label: item.userName,
+        value: item.userId,
+      });
+    });
+  });
+}
+//  回复操作
+function huifu(row) {
+  form.value = row;
+  open.value = true;
+  title.value = "回复";
+}
+// 获取树结构
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    treeData.value = response.data;
+  });
+}
+// 下发弹出确认事件
+function xiafaDialogSure() {
+  proxy.$refs["xiafaFormRef"].validate((valid) => {
+    if (valid) {
+      let params = {
+        warningId: RqID.value,
+        warningSigns: warningSigns.value,
+        delegatePersonnel: xiafaform.value.renyuan,
+        delegationTime: xiafaform.value.delegationTime,
+        delegationDept: xiafaform.value.bumen,
+        rulesId: xiafaform.value.guizemingcheng,
+      };
+      xiafaSrue(params).then((res) => {
+        ElMessage.success("下发成功");
+        getList();
+        xiafaDialog.value = false;
+      });
+    }
+  });
+}
+/** 受理操作 */
+function shouli(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal
+    .confirm("是否受理本条数据？")
+    .then(function () {})
+    .then(() => {
+      row.disposalStatus = 1;
+      updateHandle(row).then((res) => {
+        if (res.code == 200) {
+          console.log(res);
+          ElMessage.success("受理成功");
+        }
+        getList();
+      });
+    })
+    .catch(() => {
+      console.log("取消");
+    });
+}
+/** 提交按钮 */
+function submitForms() {
+  proxy.$refs["informationRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateInformation(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          opens.value = false;
+          getList();
+        });
+      } else {
+        form.value.warningStatus=1
+        addInformation(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          opens.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+/** 提交按钮 */
+function submitForm() {
+  console.log(form.value);
+  proxy.$refs["informationRef"].validate((valid) => {
+    if (valid) {
+      form.value.disposalStatus = 2;
+      updateHandle(form.value).then((res) => {
+        if (res.code == 200) {
+          console.log(res);
+          open.value = false;
+          ElMessage.success("回复成功");
+          getList();
+        }
+      });
+    }
+  });
+}
+
+// 重置呼叫弹框信息
+function resetCall() {
+  callTitle.value = "";
+  callDialog.value = false;
+  callForm.value = {};
+}
+
+// 打开呼叫弹框
+function handleOpenCall(row) {
+  console.log(row);
+
+  resetCall();
+  callTitle.value = "呼叫";
+  callDialog.value = true;
+  // callForm.value = JSON.parse(JSON.stringify(row));
+  const _id = row.unitCode;
+  getPoints(_id).then((response) => {
+    callForm.value = {
+      phone: response.data.dutyPhone,
+    };
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal
+    .confirm("是否确认删除所选数据项？")
+    .then(function () {
+      return delInformation(_ids);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "large/information/export",
+    {
+      ...queryParams.value,
+    },
+    `information_${new Date().getTime()}.xlsx`
+  );
+}
+function getMap() {
+  window.open(
+    "https://lbs.amap.com/tools/picker",
+    "_blank",
+    "width=950,height=700"
+  );
+}
+function getNameList() {
+  nameList().then((res) => {
+    NnameList.value = [];
+    console.log(res);
+    res.rows.forEach((item) => {
+      NnameList.value.push({
+        label: item.ruleName,
+        value: item.id,
+      });
+    });
+  });
+}
+function getjklistCamera() {
+  let params = {
+    delFlag: 0,
+  };
+  jklistCamera(params).then((res) => {
+    jklistCameraList.value = res.rows;
+  });
+}
+getList();
+// getDeptTree();
+getjklistCamera();
+</script>
+<style scoped>
+.map {
+  cursor: pointer;
+  color: #203f73;
+}
+
+/* 修改斑马纹的浅色行背景 */
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #dbe4f5 !important;
+  /* 改为淡蓝色 */
+}
+</style>
+<style lang="scss" scoped>
+.callDemo {
+  &:deep(#demo) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+
+    .el-button {
+      max-width: 100px;
+    }
+  }
+}
+</style>
diff --git a/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningrules.vue b/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningrules.vue
new file mode 100644
index 0000000..aebc8c3
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/system/Earlywarnings/Warningrules.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-row>
+        <el-form-item label="规则名称" prop="ruleName">
+          <el-input
+            v-model="queryParams.ruleName"
+            placeholder="请输入规则名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="‌管控措施" prop="controlMeasures">
+          <el-input
+            v-model="queryParams.controlMeasures"
+            placeholder="请输入‌管控措施"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="资源调度" prop="resourceScheduling">
+          <el-input
+            v-model="queryParams.resourceScheduling"
+            placeholder="请输入资源调度"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+      </el-row>
+      <el-row class="dfjb">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              class="circle-plus-btn"
+            >
+              新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="danger"
+              icon="Delete"
+              plain
+              :disabled="multiple"
+              @click="handleDelete"
+              >删除</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleUpdate"
+              >修改</el-button
+            >
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="RefreshLeft" class="Refresh" @click="resetQuery"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <div class="tablebox">
+      <el-table
+        stripe
+        v-loading="loading"
+        :data="rulesList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="规则名称" show-overflow-tooltip align="center" prop="ruleName" />
+        <el-table-column
+          label="‌管控措施"
+          align="center" show-overflow-tooltip
+          prop="controlMeasures"
+        />
+        <el-table-column
+          label="资源调度"
+          align="center" show-overflow-tooltip
+          prop="resourceScheduling"
+        />
+        <el-table-column label="规则级别" align="center" prop="ruleLevel">
+          <template #default="scope">
+            <dict-tag :options="rule_level" :value="scope.row.ruleLevel" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              icon="Edit"
+              @click="handleUpdate(scope.row)"
+              >修改</el-button
+            >
+            <el-button
+              link
+              type="primary"
+              icon="Delete"
+              @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- 添加或修改预警规则对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form
+        label-position="top"
+        ref="rulesRef"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="规则名称" prop="ruleName">
+          <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
+        </el-form-item>
+        <el-form-item label="‌管控措施" prop="controlMeasures">
+          <el-input
+            v-model="form.controlMeasures"
+            placeholder="请输入‌管控措施"
+          />
+        </el-form-item>
+        <el-form-item label="资源调度" prop="resourceScheduling">
+          <el-input
+            v-model="form.resourceScheduling"
+            placeholder="请输入资源调度"
+          />
+        </el-form-item>
+        <el-form-item label="规则级别" prop="ruleLevel">
+          <el-select
+            v-model="form.ruleLevel"
+            placeholder="规则级别"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in rule_level"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Rules">
+import {
+  listRules,
+  getRules,
+  delRules,
+  addRules,
+  updateRules,
+} from "@/api/Warningrules";
+
+const { proxy } = getCurrentInstance();
+const { sys_yes_no, rule_level } = proxy.useDict("sys_yes_no", "rule_level");
+
+const rulesList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    delFlag: 0,
+    ruleName: null,
+    controlMeasures: null,
+    resourceScheduling: null,
+    ruleLevel: null,
+  },
+  rules: {
+    ruleName: [
+      { required: true, message: "规则名称不能为空", trigger: "blur" },
+       { max: 30, message: "长度不能超过30个字符", trigger: "blur" },
+    ],
+    controlMeasures: [
+      { required: true, message: "管控措施不能为空", trigger: "blur" },
+       { max: 30, message: "长度不能超过30个字符", trigger: "blur" },
+    ],
+    resourceScheduling: [
+      { required: true, message: "资源调度不能为空", trigger: "blur" },
+       { max: 30, message: "长度不能超过30个字符", trigger: "blur" },
+    ],
+    ruleLevel: [
+      { required: true, message: "规则名称不能为空", trigger: "blur" },
+      
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询预警规则列表 */
+function getList() {
+  loading.value = true;
+  listRules(queryParams.value).then((response) => {
+    rulesList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    ruleName: null,
+    controlMeasures: null,
+    resourceScheduling: null,
+    ruleLevel: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+  };
+  proxy.resetForm("rulesRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加预警规则";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _id = row.id || ids.value;
+  getRules(_id).then((response) => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改预警规则";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["rulesRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateRules(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addRules(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal
+    .confirm("是否确认删除所选数据项？")
+    .then(function () {
+      return delRules(_ids);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "large/rules/export",
+    {
+      ...queryParams.value,
+    },
+    `rules_${new Date().getTime()}.xlsx`
+  );
+}
+
+getList();
+</script>
+<style scoped>
+.map {
+  cursor: pointer;
+  color: #203f73;
+}
+/* 修改斑马纹的浅色行背景 */
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #dbe4f5 !important; /* 改为淡蓝色 */
+}
+</style>
\ No newline at end of file