From 6f4fa44d72a507017dff56faa76b3a1c331486b1 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Tue, 26 Nov 2024 15:04:35 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=85=BB=E6=8A=A4=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=E5=8D=95=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/xj/document.js                        |  26 +
 .../components/edit-dialog.vue                | 224 ++++++++
 .../components/view-dialog.vue                | 201 +++++++
 .../xj/document/maintenance-notice/index.vue  | 533 ++++++++++++++++++
 4 files changed, 984 insertions(+)
 create mode 100644 src/api/xj/document.js
 create mode 100644 src/views/xj/document/maintenance-notice/components/edit-dialog.vue
 create mode 100644 src/views/xj/document/maintenance-notice/components/view-dialog.vue
 create mode 100644 src/views/xj/document/maintenance-notice/index.vue

diff --git a/src/api/xj/document.js b/src/api/xj/document.js
new file mode 100644
index 0000000..6160eb8
--- /dev/null
+++ b/src/api/xj/document.js
@@ -0,0 +1,26 @@
+import request from "@/utils/request";
+
+// 路段下拉数据
+export function getSegment() {
+  return request({
+    url: "/api/v2/segment/selectList",
+    method: "post",
+  });
+}
+
+// 查询列表病害类型
+export function getDefectList(params) {
+  return request({
+    url: "/bigscreen/v2/getDefectTypesDrowDown",
+    method: "get",
+    params,
+  });
+}
+
+// 病害状态下拉类型
+export function getDefectStatus() {
+  return request({
+    url: "/metadata/defectState",
+    method: "get",
+  });
+}
diff --git a/src/views/xj/document/maintenance-notice/components/edit-dialog.vue b/src/views/xj/document/maintenance-notice/components/edit-dialog.vue
new file mode 100644
index 0000000..3477f00
--- /dev/null
+++ b/src/views/xj/document/maintenance-notice/components/edit-dialog.vue
@@ -0,0 +1,224 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-20 11:58:33
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-26 15:49:28
+ * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\edit-dialog.vue
+ * @Description: 养护通知单编辑弹窗
+-->
+<template>
+  <div class="edit-dialog">
+    <el-form
+      class="editForm"
+      ref="editForm"
+      :model="editForm"
+      :rules="rules"
+      label-width="7rem"
+    >
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="道路名称:" prop="segmentId">
+            <el-select
+              disabled
+              v-model="editForm.segmentId"
+              placeholder="请选择路段"
+              clearable
+            >
+              <el-option
+                v-for="item in segmentList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="开始桩号:" prop="stakeStart">
+            <el-input
+              disabled
+              v-model="editForm.stakeStart"
+              placeholder="请输入开始桩号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="结束桩号:" prop="stakeEnd">
+            <el-input
+              disabled
+              v-model="editForm.stakeEnd"
+              placeholder="请输入结束桩号"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="养护负责人:" prop="projectLeader">
+            <el-input
+              clearable
+              v-model="editForm.projectLeader"
+              placeholder="请输入负责人名称"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-form-item label="养护内容:" prop="content">
+          <fssm-scroll style="max-height: 10rem">
+            <div
+              class="content-box"
+              v-for="(item, index) in editForm.content"
+              :key="`content-box-${index}`"
+            >
+              <el-col :span="21">
+                <el-input
+                  type="textarea"
+                  resize="none"
+                  placeholder="请输入养护内容"
+                  v-model="editForm.content[index]"
+                />
+              </el-col>
+              <el-col :span="2">
+                <span
+                  v-if="index < 1"
+                  class="el-icon-circle-plus-outline"
+                  @click="handleAddContent"
+                ></span>
+                <span
+                  v-else
+                  class="el-icon-delete"
+                  @click="handleDeleteContent(index)"
+                ></span>
+              </el-col>
+            </div>
+          </fssm-scroll>
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import FssmScroll from "@/components/scroll/fssm-scroll.vue";
+export default {
+  name: "EditDialog",
+  components: { FssmScroll },
+  data() {
+    return {
+      // 编辑表单
+      editForm: {
+        // 道路名称
+        segmentId: "",
+        // 开始桩号
+        stakeStart: "",
+        // 结束桩号
+        stakeEnd: "",
+        // 养护单位项目负责人
+        projectLeader: "",
+        // 养护内容
+        content: ["asdadasda", "asdasfddd"],
+      },
+      // 路段列表
+      segmentList: [],
+      // 表单验证规则
+      rules: {
+        projectLeader: [
+          { required: true, message: "请输入负责人名称", trigger: "blur" },
+        ],
+        content: [
+          {
+            type: "array",
+            required: true,
+            defaultField: {
+              type: "string",
+              required: true,
+              message: "请完整填写内容",
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    /**
+     * @description: 添加养护内容
+     */
+    handleAddContent() {
+      this.editForm.content.push("");
+    },
+
+    /**
+     * @description: 删除养护内容
+     */
+    handleDeleteContent(index) {
+      this.editForm.content.splice(index, 1);
+    },
+
+    /**
+     * @description: 取消
+     */
+    cancel() {
+      this.$emit("cancel");
+    },
+
+    /**
+     * @description: 提交表单
+     */
+    submitForm() {
+      this.$refs.editForm.validate((valid) => {
+        if (valid) {
+          console.log(this.editForm);
+          this.$emit("cancel");
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.edit-dialog {
+  width: 100%;
+  height: 100%;
+}
+
+.editForm {
+  .el-select {
+    width: 100%;
+  }
+
+  .content-box {
+    display: flex;
+
+    span {
+      font-size: 1.5rem;
+      line-height: 3rem;
+    }
+
+    .el-icon-circle-plus-outline {
+      color: #08ce29;
+    }
+
+    .el-icon-delete {
+      color: #f01515;
+    }
+
+    > div {
+      margin: 0.5rem 0;
+    }
+  }
+}
+
+/* 页脚 */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/xj/document/maintenance-notice/components/view-dialog.vue b/src/views/xj/document/maintenance-notice/components/view-dialog.vue
new file mode 100644
index 0000000..8840b73
--- /dev/null
+++ b/src/views/xj/document/maintenance-notice/components/view-dialog.vue
@@ -0,0 +1,201 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-26 15:49:28
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-26 15:49:28
+ * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\view-dialog.vue
+ * @Description: 养护通知单查看弹窗
+-->
+<template>
+  <div class="view-content">
+    <div class="view-title">高速公路道路养护作业通知单</div>
+    <div class="view-title-card">编号：</div>
+    <div class="view-table">
+      <div class="view-table-top">
+        <div class="left-item">
+          <div class="left-item-content">
+            <div class="name">通知时间</div>
+            <div class="value">2024年-11月-20日10:32</div>
+          </div>
+          <div class="left-item-content">
+            <div class="name">作业完成时间</div>
+            <div class="value">2024年-11月20日 18:00</div>
+          </div>
+        </div>
+        <div class="left-item-title">地点</div>
+        <div class="left-item">
+          <div class="left-item-content">
+            <div class="name">里程桩号</div>
+            <div class="value">2024年-11月-20日10:32</div>
+          </div>
+          <div class="left-item-content">
+            <div class="name">位置</div>
+            <div class="value">2024年-11月20日 18:00</div>
+          </div>
+        </div>
+      </div>
+      <div class="view-table-middle">养护作业项目</div>
+      <div class="view-table-content">
+        <div class="content-left-item">
+          <div class="name">序号</div>
+          <div class="value">内 容</div>
+        </div>
+        <fssm-scroll :showBar="false" style="max-height: 16rem">
+          <div
+            class="content-left-item"
+            v-for="(item, index) in tableContent"
+            :key="`content-left-item-${index}`"
+          >
+            <div class="name">{{ index + 1 }}</div>
+            <div class="value">
+              <fssm-scroll>
+                {{ item }}
+              </fssm-scroll>
+            </div>
+          </div>
+        </fssm-scroll>
+      </div>
+      <div class="view-table-bottom">
+        <span>管理处道路养护工程师：</span>
+        <span>制表人：</span>
+        <span>养护单位项目负责人：</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import fssmScroll from "../../../../../components/scroll/fssm-scroll.vue";
+export default {
+  components: { fssmScroll },
+  name: "ViewDialog",
+  data() {
+    return {
+      // 养护作业项目
+      tableContent: [
+        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
+        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
+        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
+      ],
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.view-content {
+  width: 100%;
+  height: 100%;
+
+  .view-title {
+    display: flex;
+    justify-content: center;
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  .view-title-card {
+    display: flex;
+    justify-content: flex-end;
+    font-size: 1rem;
+  }
+}
+
+.view-table {
+  font-size: 1rem;
+
+  .view-table-top {
+    width: 100%;
+    height: 6rem;
+    display: flex;
+
+    .left-item {
+      width: 45%;
+      height: 100%;
+
+      .left-item-content {
+        width: 100%;
+        height: 50%;
+        display: flex;
+
+        > div {
+          border: 1px solid black;
+        }
+
+        .name {
+          width: 40%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .value {
+          width: 60%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+
+    .left-item-title {
+      width: 10%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid black;
+    }
+  }
+
+  .view-table-middle {
+    width: 100%;
+    height: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid black;
+  }
+
+  .view-table-content {
+    width: 100%;
+    max-height: 20rem;
+
+    .content-left-item {
+      width: 100%;
+      height: 4rem;
+      display: flex;
+
+      .name {
+        width: 10%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid black;
+      }
+
+      .value {
+        width: 90%;
+        height: 100%;
+        padding: 0.25rem 1rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid black;
+      }
+    }
+  }
+
+  .view-table-bottom {
+    width: 100%;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/xj/document/maintenance-notice/index.vue b/src/views/xj/document/maintenance-notice/index.vue
new file mode 100644
index 0000000..f3c9421
--- /dev/null
+++ b/src/views/xj/document/maintenance-notice/index.vue
@@ -0,0 +1,533 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-20 11:58:33
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-26 15:49:28
+ * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\index.vue
+ * @Description: 养护通知单
+-->
+<template>
+  <div class="content">
+    <el-form
+      :model="noticeForm"
+      ref="noticeForm"
+      size="small"
+      :inline="true"
+      label-width="5rem"
+    >
+      <el-form-item label="道路名称" prop="segmentName">
+        <el-select
+          v-model="noticeForm.segmentName"
+          placeholder="请选择路段"
+          clearable
+        >
+          <el-option
+            v-for="item in segmentList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="采集时间" prop="dateTime">
+        <el-date-picker
+          v-model="dateTime"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="病害类型" prop="paramsDefectType">
+        <el-cascader
+          v-model="paramsDefectType"
+          :options="tableDefect"
+          :props="{
+            checkStrictly: true,
+            emitPath: true,
+            children: 'subTypes',
+          }"
+          clearable
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="病害状态" prop="state">
+        <el-select
+          v-model="noticeForm.state"
+          placeholder="请选择病害状态"
+          clearable
+        >
+          <el-option
+            v-for="item in defectStatus"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="上下行" prop="inspectDirection">
+        <el-select
+          v-model="noticeForm.inspectDirection"
+          placeholder="请选择"
+          clearable
+        >
+          <el-option label="上行" value="0" />
+          <el-option label="下行" value="1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="公里桩" prop="stakeRange">
+        <el-input
+          v-model="noticeForm.stakeStart"
+          placeholder="起始公里桩"
+          style="width: 10rem"
+          clearable
+        />
+        <span style="margin: 0 5px">-</span>
+        <el-input
+          v-model="noticeForm.stakeEnd"
+          placeholder="终止公里桩"
+          style="width: 10rem"
+          clearable
+        />
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="格式为K0000+000"
+          placement="top"
+        >
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item label="病害长度" prop="lengthRange">
+        <el-input-number
+          v-model="noticeForm.minLen"
+          controls-position="right"
+          placeholder="最小长度"
+          :min="0"
+        ></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number
+          v-model="noticeForm.maxLen"
+          controls-position="right"
+          placeholder="最大长度"
+          :min="0"
+        ></el-input-number>
+      </el-form-item>
+
+      <el-form-item label="病害面积" prop="areaRange">
+        <el-input-number
+          v-model="noticeForm.minArea"
+          controls-position="right"
+          placeholder="最小面积"
+          :min="0"
+        ></el-input-number>
+        <span style="margin: 0 5px">-</span>
+        <el-input-number
+          v-model="noticeForm.maxArea"
+          controls-position="right"
+          placeholder="最大面积"
+          :min="0"
+        ></el-input-number>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <!-- 导航栏 -->
+    <el-tabs v-model="activeName" @tab-click="getList">
+      <el-tab-pane
+        v-for="(item, index) in editableTabs"
+        :key="`tabs-${index}`"
+        :label="item.title"
+        :name="item.value"
+      >
+        <!-- 标签页头 -->
+        <span slot="label"
+          ><i
+            v-if="item.status === '1'"
+            style="color: #67c23a"
+            class="el-icon-success"
+          ></i>
+          <i
+            v-if="item.status === '2'"
+            style="color: #e6a23c"
+            class="el-icon-info"
+          ></i
+          >{{ item.title }}</span
+        >
+        <!-- 表格 -->
+        <el-table
+          ref="noticeTable"
+          :data="noticeList"
+          v-loading="loading"
+          style="width: 100%"
+        >
+          <el-table-column type="index" label="序号"> </el-table-column>
+          <el-table-column
+            width="200"
+            label="时间"
+            align="center"
+            prop="segmentName"
+          >
+            <template slot-scope="scope">
+              <span class="table-index">asd</span>
+              {{ scope.row.segmentName }}
+            </template>
+          </el-table-column>
+          <el-table-column label="消息内容" align="center" prop="stakeStart" />
+          <el-table-column label="车牌号" align="center" prop="stakeEnd" />
+          <el-table-column label="设备id" align="center" prop="stakeEnd" />
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope">
+              <el-button
+                v-if="activeName === '1'"
+                size="mini"
+                type="text"
+                icon="el-icon-view"
+                @click="handleView(scope.row)"
+                v-hasPermi="['system:defect:edit']"
+                >查看
+              </el-button>
+              <el-button
+                v-if="activeName === '2'"
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:defect:edit']"
+                >编辑
+              </el-button>
+              <el-button
+                v-if="activeName === '1'"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:defect:remove']"
+                >删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <div class="pagination-part">
+          <el-pagination
+            background
+            :current-page.sync="pagination.page"
+            @current-change="handleCurrentChange"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size.sync="pagination.size"
+            @size-change="handleSizeChange"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="tableTotal"
+          >
+          </el-pagination>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <!-- 编辑弹窗 -->
+    <el-dialog
+      title="生成表单"
+      :visible.sync="editVisible"
+      width="40rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="editCancel"
+    >
+      <edit-dialog v-if="editVisible" @cancel="editCancel" />
+    </el-dialog>
+
+    <!-- 查看弹窗 -->
+    <el-dialog
+      title="查看表单"
+      :visible.sync="viewVisible"
+      width="60rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="viewCancel"
+    >
+      <view-dialog v-if="viewVisible" @cancel="viewCancel" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import EditDialog from "./components/edit-dialog.vue";
+import ViewDialog from "./components/view-dialog.vue";
+import { getSegment, getDefectList, getDefectStatus } from "@/api/xj/document";
+export default {
+  name: "MaintenanceNotice",
+  components: {
+    EditDialog,
+    ViewDialog,
+  },
+  data() {
+    return {
+      // 查询表单
+      noticeForm: {
+        // 道路名称
+        segmentName: "",
+        // 病害状态
+        state: "",
+        // 上下行
+        inspectDirection: "",
+        // 公里桩
+        stakeStart: "",
+        stakeEnd: "",
+        // 病害长度
+        minLen: "",
+        maxLen: "",
+        // 病害面积
+        minArea: "",
+        maxArea: "",
+      },
+      // 接口查询表单
+      searchForm: {},
+      // 采集时间
+      dateTime: [],
+      // 病害类型
+      paramsDefectType: [],
+      // 道路名称下拉
+      segmentList: [],
+      // 病害类型下拉级联
+      tableDefect: [],
+      // 病害状态
+      defectStatus: [],
+      // 导航栏选择绑定
+      activeName: "1",
+      // 导航栏列表
+      editableTabs: [
+        { title: "已生成", value: "1",  status: "1" },
+        { title: "未生成", value: "2", status: "2" },
+      ],
+
+      // 表格加载状态
+      loading: false,
+
+      // 表格数据
+      noticeList: [],
+      // 表格总数
+      tableTotal: 0,
+      // 分页
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+
+      // 编辑弹窗显隐控制
+      editVisible: false,
+      // 查看弹窗显隐控制
+      viewVisible: false,
+    };
+  },
+  created() {
+    this.getList();
+    this.getSegmentList();
+    this.getDefectData();
+    this.getDefectStatusList();
+  },
+  methods: {
+    /**
+     * @description: 获取路段下拉数据
+     * @return {*}
+     */
+    getSegmentList() {
+      getSegment().then(({ code, data }) => {
+        if (code === 200) {
+          this.segmentList = data;
+        }
+      });
+    },
+
+    /**
+     * @description: 获取病害类型下拉数据
+     * @return {*}
+     */
+    getDefectData() {
+      getDefectList().then(({ code, data }) => {
+        if (code === 200) {
+          this.tableDefect = data;
+        }
+      });
+    },
+
+    /**
+     * @description: 获取病害状态下拉数据
+     * @return {*}
+     */
+    getDefectStatusList() {
+      getDefectStatus().then(({ code, data }) => {
+        if (code === 200) {
+          this.defectStatus = data;
+        }
+      });
+    },
+
+    /**
+     * @description: 点击查询
+     * @param {*}
+     * @return {*}
+     */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.noticeForm));
+      this.pagination.page = 1;
+      this.getList();
+    },
+
+    /**
+     * @description: 点击重置
+     * @param {*}
+     * @return {*}
+     */
+    resetQuery() {
+      this.noticeForm = {
+        // 道路名称
+        segmentName: "",
+        // 病害状态
+        state: "",
+        // 上下行
+        inspectDirection: "",
+        // 公里桩
+        stakeStart: "",
+        stakeEnd: "",
+        // 病害长度
+        minLen: "",
+        maxLen: "",
+        // 病害面积
+        minArea: "",
+        maxArea: "",
+      };
+      this.searchForm = {};
+      this.pagination.page = 1;
+      this.getList();
+    },
+
+    /**
+     * @description: 获取列表数据
+     * @return {*}
+     */
+    getList() {
+      this.loading = true;
+      const data = {
+        ...this.searchForm,
+        ...this.pagination,
+        activeName: this.activeName,
+        startTime: this.dateTime ? this.dateTime[0] : "",
+        endTime: this.dateTime ? this.dateTime[1] : "",
+      };
+      setTimeout(() => {
+        this.noticeList = [{ id: "1", segmentName: "sSSSSSS" }];
+        this.loading = false;
+      }, 100);
+    },
+
+    /**
+     * @description: 表格查看事件
+     * @param {*} row
+     * @return {*}
+     */
+    handleView(row) {
+      this.viewVisible = true;
+    },
+
+    /**
+     * @description: 表格编辑事件
+     * @param {*} row
+     * @return {*}
+     */
+    handleUpdate(row) {
+      this.editVisible = true;
+    },
+
+    /**
+     * @description: 表格删除事件
+     * @param {*} row
+     * @return {*}
+     */
+    handleDelete(row) {
+      this.$modal
+        .confirm(`是否确认删除选中的${[row.id].length}条记录？`)
+        .then(() => {
+          //   return deleteRoad([row.id]);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getList();
+    },
+
+    /**
+     * @description: 切换每页条数
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getList();
+    },
+
+    /**
+     * @description: 编辑弹窗关闭事件
+     * @param {*}
+     * @return {*}
+     */
+    editCancel() {
+      this.editVisible = false;
+      this.getList();
+    },
+
+    /**
+     * @description: 查看弹窗关闭事件
+     * @param {*}
+     * @return {*}
+     */
+    viewCancel() {
+      this.viewVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: calc(100vh - 5.4rem);
+  padding: 1rem;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+</style>