From 0139f3f38cba3a57c910c1d3d7b0265c18103af3 Mon Sep 17 00:00:00 2001
From: chenll <huxin@123.com>
Date: Fri, 18 Apr 2025 20:40:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/DisposalStatus/index.vue | 470 ++++++++++++++++++
 1 file changed, 470 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/views/system/DisposalStatus/index.vue

diff --git a/Dkl-vue3-ui-DP/src/views/system/DisposalStatus/index.vue b/Dkl-vue3-ui-DP/src/views/system/DisposalStatus/index.vue
new file mode 100644
index 0000000..1e0c418
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/system/DisposalStatus/index.vue
@@ -0,0 +1,470 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+    >
+      <el-row>
+        <el-form-item label="委派时间" prop="delegationTime">
+          <el-date-picker
+            style="width: 100%"
+            v-model="queryParams.delegationTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择委派时间"
+          />
+        </el-form-item>
+        <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="disposalStatus">
+          <el-select
+            v-model="queryParams.disposalStatus"
+            placeholder="处理状态"
+            clearable
+            style="width: 240px"
+          >
+            <el-option
+              v-for="dict in disposal_status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+          <el-form-item label="处置结果" prop="disposalResults">
+          <el-input
+            v-model="queryParams.disposalResults"
+            placeholder="处置结果"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+      </el-row>
+      <el-row class="dfjb">
+        <el-row :gutter="10"> </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
+        v-loading="loading"
+        :data="postList"
+        stripe
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          label="委派时间"
+          show-overflow-tooltip
+          align="center"
+          prop="delegationTime"
+        />
+        <el-table-column
+          label="用户名称"
+          show-overflow-tooltip
+          align="center"
+          prop="nickName"
+        />
+        <el-table-column
+          width="160"
+          label="预警唯一标识符"
+          show-overflow-tooltip
+          align="center"
+          prop="warningSigns"
+        />
+        <el-table-column label="处理状态" align="center" prop="disposalStatus">
+          <template #default="scope">
+            <dict-tag
+              :options="disposal_status"
+              :value="scope.row.disposalStatus"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="处置结果"
+          width="140"
+          show-overflow-tooltip
+          align="center"
+          prop="disposalResults"
+        />
+        <el-table-column
+          label="操作"
+          width="180"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              icon="Edit"
+              @click="handleLook(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
+      :style="{ height: '520px' }"
+      :title="title"
+      v-model="chargeOpen"
+      width="900px"
+      append-to-body
+    >
+      <div class="tableWrap largeScreen">
+        <el-descriptions
+          class="largeScreen__descriptions"
+          :column="2"
+          size="large"
+          border
+        >
+          <template #extra></template>
+          <template v-for="item in formColumns">
+            <el-descriptions-item :label="item.label">
+              {{ formInfo[item.key] }}
+            </el-descriptions-item>
+          </template>
+        </el-descriptions>
+      </div>
+      <div class="custom-timeline">
+        <div
+          v-for="(item, index) in timelineData"
+          :key="index"
+          class="timeline-item"
+        >
+          <div class="timeline-dot"></div>
+          <div class="timeline-content">
+            <div class="timeline-time">处理时间: {{ item.createTime }}</div>
+            <div class="timeline-desc">
+              <p>状态:{{ getStatusLabel(item.disposalStatus) }}</p>
+              <p>措施:{{ item.disposalMeasures }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="chargeOpen = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Post">
+import {
+  listPost,
+  addPost,
+  delPost,
+  getPost,
+  updatePost,
+} from "@/api/system/post";
+import {
+  getklList,
+  getklListadd,
+  getklListedit,
+  getklListremove,
+  getklListedithx,
+} from "@/api/InfoOverview.js";
+import {
+  getchuzhiList,
+  getchuzhiListDetail,
+  getchuzhiListLiucheng,
+} from "@/api/map.js";
+const { proxy } = getCurrentInstance();
+const { sys_yes_no, activity_area, disposal_status } = proxy.useDict(
+  "sys_yes_no",
+  "activity_area",
+  "disposal_status"
+);
+
+const postList = 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,
+    activityName: undefined,
+    holidayName: undefined,
+  },
+});
+
+const { queryParams, form } = toRefs(data);
+
+/** 查询岗位列表 */
+function getList() {
+  loading.value = true;
+  getchuzhiList(queryParams.value).then((response) => {
+    console.log(response);
+    postList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    postId: undefined,
+    activityName: undefined,
+    holidayName: undefined,
+    address: undefined,
+    region: undefined,
+    isKeyDay: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    dutyPeople: undefined,
+    dutyPhone: undefined,
+    lng: undefined,
+    lat: undefined,
+  };
+  proxy.resetForm("postRef");
+}
+
+/** 搜索按钮操作 */
+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 = "添加";
+}
+
+const formInfo = ref({});
+const timelineData = ref([]);
+const modalTitle = ref("");
+const chargeOpen = ref(false);
+const formColumns = ref([
+  {
+    label: "预警唯一标识符",
+    key: "warningSigns",
+    span: 1,
+  },
+  {
+    label: "发布单位名称",
+    key: "unitName",
+    span: 1,
+  },
+  {
+    label: "发布单位编码",
+    key: "unitCode",
+    span: 1,
+  },
+  {
+    label: "发布时间",
+    key: "releaseTime",
+    span: 1,
+  },
+  {
+    label: "经度",
+    key: "lng",
+    span: 1,
+  },
+  {
+    label: "纬度",
+    key: "lat",
+    span: 1,
+  },
+  {
+    label: "可能波及范围",
+    key: "scopeImpact",
+    span: 1,
+  },
+  {
+    label: "异常数据值",
+    key: "abnormalData",
+    span: 1,
+  },
+  {
+    label: "预计持续时间",
+    key: "expectedDuration",
+    span: 1,
+  },
+]);
+// 查看详情
+function handleLook(row) {
+  title.value = "查看详情";
+  getchuzhiListDetail(row.warningId).then((res) => {
+    formInfo.value = res.data;
+  });
+  let params = {
+    handleId: row.id,
+  };
+  getchuzhiListLiucheng(params).then((res) => {
+    timelineData.value = res.rows;
+    modalTitle.value = "处置状态查看";
+    chargeOpen.value = true;
+  });
+}
+const getStatusLabel = (value) => {
+  const found = disposal_status.value.find((item) => item.value === value);
+  return found ? found.label : "未知状态";
+};
+function dateToTimestamp(date) {
+  return date.getTime();
+}
+/** 提交按钮 */
+function submitForm() {
+  console.log(new Date(form.value.startTime).getTime());
+  if (
+    new Date(form.value.startTime).getTime() >
+    new Date(form.value.endTime).getTime()
+  ) {
+    proxy.$modal.msgWarning("开始时间不得大于结束时间");
+    return;
+  }
+
+  proxy.$refs["postRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.id != undefined) {
+        getklListedit(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        getklListadd(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const postIds = row.id || ids.value;
+  console.log(postIds);
+  proxy.$modal
+    .confirm("是否确认删除所选数据项？")
+    .then(function () {
+      return getklListremove(postIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "system/post/export",
+    {
+      ...queryParams.value,
+    },
+    `post_${new Date().getTime()}.xlsx`
+  );
+}
+function getMap() {
+  window.open(
+    "https://lbs.amap.com/tools/picker",
+    "_blank",
+    "width=950,height=700"
+  );
+}
+getList();
+</script>
+<style scoped lang="scss">
+.map {
+  cursor: pointer;
+  color: #203f73;
+}
+/* 修改斑马纹的浅色行背景 */
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #dbe4f5 !important; /* 改为淡蓝色 */
+}
+.custom-timeline {
+  position: relative;
+  padding-left: 20px;
+  margin-top: 4%;
+}
+.timeline-item {
+  position: relative;
+  padding-bottom: 20px;
+}
+.timeline-dot {
+  position: absolute;
+  left: -8px;
+  top: 4px;
+  width: 12px;
+  height: 12px;
+  background: #409eff;
+  border-radius: 50%;
+}
+.timeline-content {
+  padding-left: 20px;
+  color: #000;
+}
+.timeline-item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: -2px;
+  top: 16px;
+  height: calc(100% - 16px);
+  width: 2px;
+  background: #e4e7ed;
+}
+</style>