From 178badf4f530e35d8b5d793124dd2b2a8a8b4393 Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Fri, 31 Oct 2025 16:16:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=BB=E6=8A=A4=E7=AB=99=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 .../screen/src/component/MyDialog/index.js    |   3 +
 .../screen/src/component/MyDialog/index.vue   |  39 ++
 packages/screen/src/utils/request.js          |  17 +-
 .../views/ServiceStationManagePage/index.vue  | 609 ++++++++++++++----
 packages/screen/vite.config.js                |   2 +-
 pnpm-lock.yaml                                |   3 +
 7 files changed, 528 insertions(+), 146 deletions(-)
 create mode 100644 packages/screen/src/component/MyDialog/index.js
 create mode 100644 packages/screen/src/component/MyDialog/index.vue

diff --git a/package.json b/package.json
index 5b483e5..49bb6b1 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "pnpm": ">=8.0.0"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "@vueuse/core": "^14.0.0",
     "dayjs": "^1.11.18",
     "element-plus": "^2.11.5",
diff --git a/packages/screen/src/component/MyDialog/index.js b/packages/screen/src/component/MyDialog/index.js
new file mode 100644
index 0000000..21b7066
--- /dev/null
+++ b/packages/screen/src/component/MyDialog/index.js
@@ -0,0 +1,3 @@
+import MyDialog from './index.vue'
+
+export default MyDialog
\ No newline at end of file
diff --git a/packages/screen/src/component/MyDialog/index.vue b/packages/screen/src/component/MyDialog/index.vue
new file mode 100644
index 0000000..19d1694
--- /dev/null
+++ b/packages/screen/src/component/MyDialog/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="title" :width="width">
+    <slot></slot>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="onCancel">取消</el-button>
+        <el-button type="primary" @click="onConfirm"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: String,
+    default: "50%",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => {},
+  },
+  onCancel: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/packages/screen/src/utils/request.js b/packages/screen/src/utils/request.js
index 752dd6b..e86157d 100644
--- a/packages/screen/src/utils/request.js
+++ b/packages/screen/src/utils/request.js
@@ -6,11 +6,16 @@ const service = axios.create({
 })
 
 export async function request(config) {
-    const res = await service(config)
-    if (res === null || res === undefined) {
-        return res
-    }
-    if (Object.prototype.hasOwnProperty.call(res, 'data')) {
-        return res.data
+    try {
+        const res = await service(config)
+        if (res === null || res === undefined) {
+            return res
+        }
+        if (Object.prototype.hasOwnProperty.call(res, 'data')) {
+            return res.data
+        }
+    } catch (error) {
+        console.log(error)
+        return null
     }
 }
\ No newline at end of file
diff --git a/packages/screen/src/views/ServiceStationManagePage/index.vue b/packages/screen/src/views/ServiceStationManagePage/index.vue
index 905cac9..4b42748 100644
--- a/packages/screen/src/views/ServiceStationManagePage/index.vue
+++ b/packages/screen/src/views/ServiceStationManagePage/index.vue
@@ -1,187 +1,511 @@
 <template>
-  <DynamicTable
-    :dataSource="tableData"
-    :columns="columns"
-    :toolbar="toolbar"
-    :autoHeight="true"
-    :pagination="pagination"
-  ></DynamicTable>
+  <div class="root">
+    <div class="search-box">
+      <el-input
+        v-model="params.qxmc"
+        style="width: 240px; margin-right: 10px"
+        size="large"
+        placeholder="请输入区县名称"
+        :suffix-icon="Search"
+        @change="handleSearch"
+      />
+      <el-select
+        v-model="params.zdlx"
+        style="width: 240px; margin-right: 10px"
+        size="large"
+        placeholder="站点类型"
+        :suffix-icon="Search"
+        @change="handleSearch"
+        :options="zdlxOptions"
+        clearable
+      />
+    </div>
+    <div class="event-box">
+      <el-button type="primary" size="large" @click="openAddDialog"
+        >新增</el-button
+      >
+    </div>
+    <DynamicTable
+      :dataSource="tableData"
+      :columns="columns"
+      :autoHeight="true"
+      :pagination="pagination"
+    ></DynamicTable>
+    <div class="dialog-container">
+      <MyDialog
+        v-model="dialogVisible"
+        title="站点详情"
+        :onConfirm="handleConfirm"
+        :onCancel="handleCancel"
+        width="40%"
+      >
+        <el-form
+          label-position="right"
+          label-width="auto"
+          style="
+            max-width: 600px;
+            max-height: 60vh;
+            overflow-y: auto;
+            padding-right: 12px;
+          "
+        >
+          <el-form-item label="区县名称">
+            <el-input disabled v-model="detailData.qxmc" />
+          </el-form-item>
+          <el-form-item label="站点类型">
+            <el-input disabled v-model="detailData.zdlx" />
+          </el-form-item>
+          <el-form-item label="路线编码">
+            <el-input disabled v-model="detailData.lxbm" />
+          </el-form-item>
+          <el-form-item label="里程桩号">
+            <el-input disabled v-model="detailData.lczh" />
+          </el-form-item>
+          <el-form-item label="行政等级">
+            <el-input disabled v-model="detailData.xzdj" />
+          </el-form-item>
+          <el-form-item label="机动车月交通流量">
+            <el-input disabled v-model="detailData.yjtll" />
+          </el-form-item>
+          <el-form-item label="技术等级">
+            <el-input disabled v-model="detailData.jsdj" />
+          </el-form-item>
+          <el-form-item label="服务保障点具体名称">
+            <el-input disabled v-model="detailData.mc" />
+          </el-form-item>
+          <el-form-item label="产权隶属单位">
+            <el-input disabled v-model="detailData.ssdw" />
+          </el-form-item>
+          <el-form-item label="经度">
+            <el-input disabled v-model="detailData.jd" />
+          </el-form-item>
+          <el-form-item label="纬度">
+            <el-input disabled v-model="detailData.wd" />
+          </el-form-item>
+          <el-form-item label="充电桩根数">
+            <el-input disabled v-model="detailData.cdzgs" />
+          </el-form-item>
+          <el-form-item label="是否对外开放">
+            <el-input disabled v-model="detailData.sfdwkf" />
+          </el-form-item>
+          <el-form-item label="对外开放的是否有如厕功能">
+            <el-input disabled v-model="detailData.sfdwkfrc" />
+          </el-form-item>
+        </el-form>
+      </MyDialog>
+      <MyDialog
+        v-model="editDialogVisible"
+        :title="isEdit ? '编辑站点' : '新增站点'"
+        :onConfirm="isEdit ? handleEditConfirm : handleAddConfirm"
+        :onCancel="handleEditCancel"
+        width="40%"
+      >
+        <el-form
+          ref="editFormRef"
+          :model="editForm"
+          label-position="right"
+          label-width="auto"
+          :rules="editRules"
+          style="
+            max-width: 600px;
+            max-height: 60vh;
+            overflow-y: auto;
+            padding-right: 12px;
+          "
+        >
+          <el-form-item label="区县名称" prop="qxmc">
+            <el-input v-model="editForm.qxmc" />
+          </el-form-item>
+          <el-form-item label="站点类型" prop="zdlx">
+            <el-select
+              v-model="editForm.zdlx"
+              placeholder="请选择站点类型"
+              :options="zdlxOptions"
+            />
+          </el-form-item>
+          <el-form-item label="路线编码" prop="lxbm">
+            <el-input v-model="editForm.lxbm" />
+          </el-form-item>
+          <el-form-item label="里程桩号" prop="lczh">
+            <el-input v-model="editForm.lczh" />
+          </el-form-item>
+          <el-form-item label="行政等级" prop="xzdj">
+            <el-input v-model="editForm.xzdj" />
+          </el-form-item>
+          <el-form-item label="机动车月交通流量" prop="yjtll">
+            <el-input v-model="editForm.yjtll" />
+          </el-form-item>
+          <el-form-item label="技术等级" prop="jsdj">
+            <el-input v-model="editForm.jsdj" />
+          </el-form-item>
+          <el-form-item label="服务保障点具体名称" prop="mc">
+            <el-input v-model="editForm.mc" />
+          </el-form-item>
+          <el-form-item label="产权隶属单位" prop="ssdw">
+            <el-input v-model="editForm.ssdw" />
+          </el-form-item>
+          <el-form-item label="经度" prop="jd">
+            <el-input v-model="editForm.jd" />
+          </el-form-item>
+          <el-form-item label="纬度" prop="wd">
+            <el-input v-model="editForm.wd" />
+          </el-form-item>
+          <el-form-item label="充电桩根数" prop="cdzgs">
+            <el-input v-model="editForm.cdzgs" />
+          </el-form-item>
+          <el-form-item label="是否对外开放" prop="sfdwkf">
+            <el-input v-model="editForm.sfdwkf" />
+          </el-form-item>
+          <el-form-item label="对外开放的是否有如厕功能" prop="sfdwkfrc">
+            <el-input v-model="editForm.sfdwkfrc" />
+          </el-form-item>
+          <el-form-item label="备注" prop="bz">
+            <el-input v-model="editForm.bz" />
+          </el-form-item>
+        </el-form>
+      </MyDialog>
+    </div>
+  </div>
 </template>
   
 <script lang="ts" setup>
 import DynamicTable from "../../component/DynamicTable";
-import { h, ref, onMounted, reactive } from "vue";
+import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
 import { request } from "@/utils/request";
+import { Search } from "@element-plus/icons-vue";
+import MyDialog from "../../component/MyDialog";
+import { de } from "element-plus/es/locales.mjs";
 
-const tableData = ref([
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-  {
-    county: "潼南",
-    road_code: "G319线",
-    mile_code: "2654+000",
-    level: "国道",
-    monthly_traffic: "5625",
-    tec_level: "二级",
-    name: "三汇停车区",
-    service_station_address: "交通公路部门",
-  },
-]);
+const tableData = ref([]);
+const detailData = ref({});
+const dialogVisible = ref(false);
+const handleCancel = () => {
+  dialogVisible.value = false;
+};
+const handleConfirm = () => {
+  dialogVisible.value = false;
+};
 
+// 表单初始状态
+const INIT_FORM = {
+  id: "",
+  zdlx: "",
+  lxbm: "",
+  qxmc: "",
+  lczh: "",
+  xzdj: "",
+  yjtll: 0,
+  jsdj: "",
+  mc: "",
+  ssdw: "",
+  jd: "",
+  wd: "",
+  cdzgs: "",
+  sfdwkf: "",
+  sfdwkfrc: "",
+  bz: "",
+};
+// 站点类型选项
+const zdlxOptions = [
+  { label: "服务设施", value: "服务设施" },
+  { label: "加油站", value: "加油站" },
+  { label: "加气站", value: "加气站" },
+  { label: "加氢站", value: "加氢站" },
+  { label: "充电站", value: "充电站" },
+];
+
+// 是否在编辑状态
+const isEdit = ref(false);
+const editFormRef = ref();
+const editForm = reactive({ ...INIT_FORM });
+const editDialogVisible = ref(false);
+const openEditDialog = (row) => {
+  editForm.id = row.id;
+  Object.assign(editForm, row);
+  editDialogVisible.value = true;
+};
+// 表单校验规则
+const editRules = {
+  qxmc: [{ required: true, message: "请输入区县名称", trigger: "blur" }],
+  zdlx: [{ required: true, message: "请输入站点类型", trigger: "blur" }],
+  lxbm: [{ required: true, message: "请输入路线编码", trigger: "blur" }],
+  lczh: [{ required: true, message: "请输入里程桩号", trigger: "blur" }],
+  xzdj: [{ required: true, message: "请输入行政等级", trigger: "blur" }],
+  yjtll: [
+    {
+      required: true,
+      message: "请输入机动车月交通流量",
+      trigger: "blur",
+    },
+    {
+      type: "number",
+      message: "请输入正确的机动车月交通流量",
+      trigger: "blur",
+    },
+  ],
+  jsdj: [{ required: true, message: "请输入技术等级", trigger: "blur" }],
+  mc: [
+    { required: true, message: "请输入服务保障点具体名称", trigger: "blur" },
+  ],
+  ssdw: [{ required: true, message: "请输入产权隶属单位", trigger: "blur" }],
+  jd: [{ required: true, message: "请输入经度", trigger: "blur" }],
+  wd: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+  cdzgs: [{ required: true, message: "请输入充电桩根数", trigger: "blur" }],
+  sfdwkf: [{ required: true, message: "请输入是否对外开放", trigger: "blur" }],
+  sfdwkfrc: [
+    {
+      required: true,
+      message: "请输入对外开放的是否有如厕功能",
+      trigger: "blur",
+    },
+  ],
+};
+const handleEditCancel = () => {
+  editDialogVisible.value = false;
+};
+const handleEditConfirm = async () => {
+  try {
+    await editFormRef.value.validate();
+    const res = await request({
+      url: `/api/yhz`,
+      method: "PUT",
+      data: toRaw(editForm),
+    });
+    if (res.code === "00000") {
+      ElMessage({
+        message: "编辑成功",
+        type: "success",
+      });
+      getTableData();
+      editDialogVisible.value = false;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error.message);
+    ElMessage({
+      message: error.message,
+      type: "error",
+    });
+  }
+};
+const resetForm = () => {
+  Object.assign(editForm, INIT_FORM);
+};
+
+// 打开新增站点弹窗
+const openAddDialog = () => {
+  resetForm();
+  isEdit.value = false;
+  editDialogVisible.value = true;
+};
+
+// 新增站点
+const handleAddConfirm = async () => {
+  try {
+    await editFormRef.value.validate();
+    const res = await request({
+      url: "/api/yhz",
+      method: "POST",
+      data: toRaw(editForm),
+    });
+    if (res.code === "00000") {
+      ElMessage({
+        message: "新增成功",
+        type: "success",
+      });
+      getTableData();
+      editDialogVisible.value = false;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    ElMessage({
+      message: error.message,
+      type: "error",
+    });
+    console.log(error.message);
+  }
+};
+
+// 搜索条件
+const params = reactive({
+  qxmc: "",
+  zdlx: "",
+});
+
+const handleSearch = () => {
+  // 重置分页到第一页
+  pagination.current = 1;
+  getTableData();
+};
+
+// 获取养护站详情
+const getDetailData = async (row) => {
+  try {
+    const res = await request({
+      url: `/api/yhz/${row.id}`,
+      method: "GET",
+    });
+    if (res.code === "00000") {
+      detailData.value = res.data;
+    } else {
+      detailData.value = {};
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+// 获取养护站列表
 const getTableData = async () => {
   try {
-    const params = {
-
-        pageNum: pagination.current,
-        pageSize: pagination.pageSize,
-    };
     const res = await request({
       url: "/api/yhz/list",
       method: "GET",
-      params: params,
+      params: {
+        ...params,
+        pageNum: pagination.current,
+        pageSize: pagination.pageSize,
+      },
     });
-  } catch (error) {}
+    if (res.code === "00000") {
+      tableData.value = res.data.records;
+      pagination.total = res.data.total;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    console.log(error.message);
+  }
 };
 onMounted(() => {
   getTableData();
 });
 const columns = [
   {
-    prop: "county",
-    label: "区县",
+    prop: "qxmc",
+    label: "区县名称",
   },
   {
-    prop: "road_code",
+    prop: "zdlx",
+    label: "站点类型",
+  },
+  {
+    prop: "lxbm",
     label: "路线编码",
     // minWidth: 160,
   },
   {
-    prop: "mile_code",
+    prop: "lczh",
     label: "里程桩号",
   },
   {
-    prop: "level",
-    label: "行政等级(仅划分:国道、省道、农村公路三类)",
+    prop: "xzdj",
+    label: "行政等级",
   },
   {
-    prop: "monthly_traffic",
+    prop: "yjtll",
     label: "机动车月交通流量",
   },
   {
-    prop: "tec_level",
+    prop: "jsdj",
     label: "技术等级",
   },
   {
-    prop: "name",
+    prop: "mc",
     label: "服务保障点具体名称",
   },
   {
-    prop: "type",
-    label: "类型",
+    prop: "ssdw",
+    label: "产权隶属单位",
+  },
+  {
+    prop: "jd",
+    label: "经度",
+  },
+  {
+    prop: "wd",
+    label: "纬度",
+  },
+  {
+    prop: "cdzgs",
+    label: "充电桩根数",
+  },
+  {
+    prop: "sfdwkf",
+    label: "是否对外开放",
+  },
+  {
+    prop: "sfdwkfrc",
+    label: "对外开放的是否有如厕功能",
   },
   {
     label: "操作",
     fixed: "right",
-    width: 100,
+    width: 150,
     render: (row) => () =>
-      h(
-        ElButton,
-        {
-          type: "text",
-          onClick: () => {
-            console.log(row);
+      h("div", { class: "action-btns" }, [
+        h(
+          ElButton,
+          {
+            type: "primary",
+            link: true,
+            onClick: async () => {
+              await getDetailData(row);
+              dialogVisible.value = true;
+            },
           },
-        },
-        () => "详情"
-      ),
+          () => "详情"
+        ),
+        h(
+          ElButton,
+          {
+            type: "success",
+            link: true,
+            style: "margin-left: 10px;",
+            onClick: async () => {
+              await getDetailData(row);
+              isEdit.value = true;
+              openEditDialog(row);
+            },
+          },
+          () => "编辑"
+        ),
+        h(
+          ElButton,
+          {
+            type: "danger",
+            link: true,
+            style: "margin-left: 10px;",
+            onClick: async () => {
+              try {
+                await ElMessageBox.confirm("确定要删除该站点吗？", "删除确认", {
+                  confirmButtonText: "确定",
+                  cancelButtonText: "取消",
+                  type: "warning",
+                });
+
+                const res = await request({
+                  url: `/api/yhz/${row.id}`,
+                  method: "DELETE",
+                });
+
+                if (res.code === "00000") {
+                  ElMessage.success("删除成功");
+                  getTableData();
+                }
+              } catch (error) {
+                if (error instanceof Error) {
+                  ElMessage.error(error.message || "删除失败");
+                }
+              }
+            },
+          },
+          () => "删除"
+        ),
+      ]),
   },
 ];
 
@@ -194,11 +518,18 @@ const pagination = reactive({
   onChange: (page: number, pageSize: number) => {
     pagination.current = page;
     pagination.pageSize = pageSize;
-    getTableData(); 
+    getTableData();
   },
 });
 </script>
   
   <style lang="scss" scoped>
+.root {
+  height: 100%;
+  padding: 45px;
+}
+.event-box {
+  margin: 20px 0;
+}
 </style>
   
\ No newline at end of file
diff --git a/packages/screen/vite.config.js b/packages/screen/vite.config.js
index 7d9ec29..9a941cd 100644
--- a/packages/screen/vite.config.js
+++ b/packages/screen/vite.config.js
@@ -27,7 +27,7 @@ export default defineConfig({
     cors: true,
     proxy: {
       '/api': {
-        target: '',
+        target: 'http://8.137.54.85:8661/',
         changeOrigin: true,
       },
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 982685d..52f1797 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@element-plus/icons-vue':
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.5.22)
       '@vueuse/core':
         specifier: ^14.0.0
         version: 14.0.0(vue@3.5.22)