Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev

2025-10-31 20:19:20 +08:00 · 2025-10-31 20:19:20 +08:00 · 7c9dd6e9b3
commit 7c9dd6e9b3
parent cf620dc8c9 b52dabbf40
8 changed files with 534 additions and 148 deletions
--- 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",
@ -32,6 +33,7 @@
  },
  "devDependencies": {
    "@vant/auto-import-resolver": "^1.3.0",
+    "less": "^4.4.2",
    "unplugin-auto-import": "^0.17.0",
    "unplugin-vue-components": "^0.26.0"
  }
--- a/packages/screen/src/component/MyDialog/index.js
+++ b/packages/screen/src/component/MyDialog/index.js
@ -0,0 +1,3 @@
+import MyDialog from './index.vue'
+
+export default MyDialog
--- a/packages/screen/src/component/MyDialog/index.vue
+++ 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>
--- a/packages/screen/src/router/index.js
+++ b/packages/screen/src/router/index.js
@ -13,8 +13,8 @@ const routes = [
    component: () => import('../views/cockpit/index.vue')
  },
  {
-    path: '/test',
-    name: 'test',
+    path: '/yhz',
+    name: 'yhz',
    component: () => import('../views/ServiceStationManagePage/index.vue')
  }
 ]
--- a/packages/screen/src/utils/request.js
+++ b/packages/screen/src/utils/request.js
@ -6,6 +6,7 @@ const service = axios.create({
 })

 export async function request(config) {
+    try {
        const res = await service(config)
        if (res === null || res === undefined) {
            return res
@ -13,4 +14,8 @@ export async function request(config) {
        if (Object.prototype.hasOwnProperty.call(res, 'data')) {
            return res.data
        }
+    } catch (error) {
+        console.log(error)
+        return null
+    }
 }
--- a/packages/screen/src/views/ServiceStationManagePage/index.vue
+++ b/packages/screen/src/views/ServiceStationManagePage/index.vue
@ -1,187 +1,511 @@
 <template>
+  <div class="root">
+    <div class="search-box">
+      <el-input
+        v-model="params.mc"
+        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"
-    :toolbar="toolbar"
      :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({
+  mc: "",
+  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("div", { class: "action-btns" }, [
        h(
          ElButton,
          {
-          type: "text",
-          onClick: () => {
-            console.log(row);
+            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 || "删除失败");
+                }
+              }
+            },
+          },
+          () => "删除"
+        ),
+      ]),
  },
 ];

@ -200,5 +524,12 @@ const pagination = reactive({
 </script>
  
  <style lang="scss" scoped>
+.root {
+  height: 100%;
+  padding: 45px;
+}
+.event-box {
+  margin: 20px 0;
+}
 </style>
  
--- 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,
      },
    }
--- 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)
@ -24,6 +27,9 @@ importers:
      '@vant/auto-import-resolver':
        specifier: ^1.3.0
        version: 1.3.0
+      less:
+        specifier: ^4.4.2
+        version: 4.4.2
      unplugin-auto-import:
        specifier: ^0.17.0
        version: 0.17.8(@vueuse/core@14.0.0(vue@3.5.22))(rollup@4.52.4)