冰雪专题PC端人员管理

packages/screen/src/component/MenuBar/index.js

@@ -42,9 +42,9 @@ export default () => {
     onMounted(async () => {
         await getMenuList();
         const firstMenuItem = menuList.value[0]?.children?.[0];
-        if (firstMenuItem) {
-            handleMenuClick(firstMenuItem);
-        }
+        // if (firstMenuItem) {
+        //     handleMenuClick(firstMenuItem);
+        // }
     })
 
     return {

packages/screen/src/router/index.js

@@ -27,6 +27,11 @@ const routes = [
     name: 'yhzwz',
     component: () => import('../views/MaterialManagement/index.vue')
   },
+  {
+    path: '/yhzry/:data?',
+    name: 'yhzry',
+    component: () => import('../views/PersonManagement/index.vue')
+  },
   {
     path: '/yhzevent',
     name: 'yhzevent',

packages/screen/src/utils/request.js

@@ -8,7 +8,7 @@ const service = axios.create({
 // 请求拦截器
 service.interceptors.request.use(config => {
     // 暂时先写死token 实际项目中再调整token的获取位置
-    const token = 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOjE5ODU1OTk2NjUxNDk4NjE4OTAsImFjY291bnQiOiJyZWd1bGFyQWRtaW4iLCJ1dWlkIjoiNDI2MjNkMGUtZGRjYy00NzllLTgxZTQtMWRmYTBhMWQyZTc1IiwicmVtZW1iZXJNZSI6dHJ1ZSwiZXhwaXJhdGlvbkRhdGUiOjE3NjI3NjY5NzM4NjgsIm90aGVycyI6bnVsbCwic3ViIjoiMTk4NTU5OTY2NTE0OTg2MTg5MCIsImlhdCI6MTc2MjczODE3MywiZXhwIjoxNzYyNzY2OTczfQ._Fv2MpHjv5BubzjEwp6SPEol4P5wBGXONrG1oEGApXjNiJU5WkgvuPWmaruaimNIyvnrMKtZO8yMBoGrHqIHqQ'
+    const token = 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOjE5ODY2ODgzMjY1MjAwNTc4NTcsImFjY291bnQiOiJieHp0IiwidXVpZCI6ImMyY2E5OGU4LTIyYzItNGZmZi1hZWE0LTBiNWNiZmE4YjNlMSIsInJlbWVtYmVyTWUiOnRydWUsImV4cGlyYXRpb25EYXRlIjoxNzYyNzgzOTkwMzUxLCJvdGhlcnMiOm51bGwsInN1YiI6IjE5ODY2ODgzMjY1MjAwNTc4NTciLCJpYXQiOjE3NjI3NTUxOTAsImV4cCI6MTc2Mjc4Mzk5MH0.zqQcAE08fr2jQd7HcQ9Y3i-gWb2TrCWuUxSzl1kXOoJe2rp1Yly0ffrY6_1jY0ybHJwihONChqiSc-8jRTKYKw'
     // const token = localStorage.getItem('token');
     if (token) {
         config.headers.Authorization = `${token}`;

packages/screen/src/views/EquipmentManagement/detailDialog.vue

@@ -8,60 +8,60 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="操作员:">
-            <el-input disabled v-model="detailData.czy" />
+            <el-input disabled v-model="detailData.equipment.czy" />
           </el-form-item>
           <el-form-item label="辐射范围:">
-            <el-input disabled v-model="detailData.fsfw" />
+            <el-input disabled v-model="detailData.equipment.fsfw" />
           </el-form-item>
           <el-form-item label="管理人员:">
-            <el-input disabled v-model="detailData.glry" />
+            <el-input disabled v-model="detailData.equipment.glry" />
           </el-form-item>
           <el-form-item label="购买费用（万元）:">
-            <el-input disabled v-model="detailData.gmfy" />
+            <el-input disabled v-model="detailData.equipment.gmfy" />
           </el-form-item>
           <el-form-item label="购置日期:">
-            <el-input disabled v-model="detailData.gzrq" />
+            <el-input disabled v-model="detailData.equipment.gzrq" />
           </el-form-item>
           <el-form-item label="区县名称:">
-            <el-input disabled v-model="detailData.qxmc" />
+            <el-input disabled v-model="detailData.equipment.qxmc" />
           </el-form-item>
           <el-form-item label="设备编号:">
-            <el-input disabled v-model="detailData.sbbh" />
+            <el-input disabled v-model="detailData.equipment.sbbh" />
           </el-form-item>
           <el-form-item label="设备大类:">
-            <el-input disabled v-model="detailData.sbdl" />
+            <el-input disabled v-model="detailData.equipment.sbdl" />
           </el-form-item>
           <el-form-item label="设备小类:">
-            <el-input disabled v-model="detailData.sbxl" />
+            <el-input disabled v-model="detailData.equipment.sbxl" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备名称:">
-            <el-input disabled v-model="detailData.sbmc" />
+            <el-input disabled v-model="detailData.equipment.sbmc" />
           </el-form-item>
           <el-form-item label="设备位置:">
-            <el-input disabled v-model="detailData.sbwz" />
+            <el-input disabled v-model="detailData.equipment.sbwz" />
           </el-form-item>
           <el-form-item label="设备经度:">
-            <el-input disabled v-model="detailData.jd" />
+            <el-input disabled v-model="detailData.equipment.jd" />
           </el-form-item>
           <el-form-item label="设备纬度:">
-            <el-input disabled v-model="detailData.wd" />
+            <el-input disabled v-model="detailData.equipment.wd" />
           </el-form-item>
           <el-form-item label="设备型号:">
-            <el-input disabled v-model="detailData.sbxh" />
+            <el-input disabled v-model="detailData.equipment.sbxh" />
           </el-form-item>
           <el-form-item label="设备状态:">
-            <el-input disabled v-model="detailData.sbzt" />
+            <el-input disabled v-model="detailData.equipmentsbzt" />
           </el-form-item>
           <el-form-item label="生产厂家:">
-            <el-input disabled v-model="detailData.sccj" />
+            <el-input disabled v-model="detailData.equipment.sccj" />
           </el-form-item>
           <el-form-item label="是否应急设备:">
-            <el-input disabled v-model="detailData.sfyjsb" />
+            <el-input disabled v-model="detailData.equipment.sfyjsb" />
           </el-form-item>
           <el-form-item label="是否纳入市级补助范围:">
-            <el-input disabled v-model="detailData.sfnrsjbz" />
+            <el-input disabled v-model="detailData.equipment.sfnrsjbz" />
           </el-form-item>
         </el-col>
       </el-row>

packages/screen/src/views/EquipmentManagement/index.js

@@ -97,21 +97,23 @@ const filterNode = (value, node) => {
 const getTreeData = async () => {
     try {
         const res = await request({
-            url: '/snow-ops-platform/yhz/listAreaGroup',
+            url: '/snow-ops-platform/yhz/listAreaGroup?dataType=EQUIPMENT',
             method: 'GET'
         })
         if (res.code === '00000') {
-            treeData.value = Object.entries(res.data).map(([areaName, sites]) => ({
-                id: areaName,
-                name: `${areaName}(${sites.length})`,
+            treeData.value = res.data.map((qx, index) => (
+                {
+                    id: index,
+                    name: `${qx.qxmc}(${qx.sbsl})`,
                     type: 'area',
-                children: sites.map(site => ({
+                    children: qx.yhzList.map(site => ({
                         id: site.id,
                         name: `${site.mc}(${site.sbsl})`,
                         type: 'site'
                     })),
-                rawName: areaName // 原始名称
-            }));
+                    rawName: qx.qxmc, // 原始名称
+                })
+            );
             console.log('treeData', toRaw(treeData.value))
         } else {
             throw new Error(res.message);

packages/screen/src/views/MaterialManagement/detailDialog.vue

@@ -8,41 +8,41 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="物资名称:">
-            <el-input disabled v-model="detailData.wzmc" />
+            <el-input disabled v-model="detailData.material.wzmc" />
           </el-form-item>
           <el-form-item label="余量:">
-            <el-input disabled v-model="detailData.ye" />
+            <el-input disabled v-model="detailData.material.ye" />
           </el-form-item>
           <el-form-item label="入库日期:">
-            <el-input disabled v-model="detailData.rkrq" />
+            <el-input disabled v-model="detailData.material.rkrq" />
           </el-form-item>
           <el-form-item label="入库单位:">
-            <el-input disabled v-model="detailData.rkdw" />
+            <el-input disabled v-model="detailData.material.rkdw" />
           </el-form-item>
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="数量:">
-                <el-input disabled v-model="detailData.sl"/>
+                <el-input disabled v-model="detailData.material.sl"/>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="单位:">
-                <el-input disabled v-model="detailData.dw" /> </el-form-item
+                <el-input disabled v-model="detailData.material.dw" /> </el-form-item
             ></el-col>
           </el-row>
         </el-col>
         <el-col :span="12">
           <el-form-item label="存放地点:">
-            <el-input disabled v-model="detailData.cfdd" />
+            <el-input disabled v-model="detailData.material.cfdd" />
           </el-form-item>
           <el-form-item label="负责人:">
-            <el-input disabled v-model="detailData.fzr" />
+            <el-input disabled v-model="detailData.material.fzr" />
           </el-form-item>
           <el-form-item label="联系电话:">
-            <el-input disabled v-model="detailData.lxdh" />
+            <el-input disabled v-model="detailData.material.lxdh" />
           </el-form-item>
           <el-form-item label="区县名称:">
-            <el-input disabled v-model="detailData.qxmc" />
+            <el-input disabled v-model="detailData.materialqxmc" />
           </el-form-item>
         </el-col>
       </el-row>

packages/screen/src/views/MaterialManagement/index.js

@@ -84,21 +84,23 @@ const filterNode = (value, node) => {
 const getTreeData = async () => {
     try {
         const res = await request({
-            url: '/snow-ops-platform/yhz/listAreaGroup',
+            url: '/snow-ops-platform/yhz/listAreaGroup?dataType=MATERIAL',
             method: 'GET'
         })
         if (res.code === '00000') {
-            treeData.value = Object.entries(res.data).map(([areaName, sites]) => ({
-                id: areaName,
-                name: `${areaName}(${sites.length})`,
+            treeData.value = res.data.map((qx, index) => (
+                {
+                    id: index,
+                    name: `${qx.qxmc}(${qx.wzsl})`,
                     type: 'area',
-                children: sites.map(site => ({
+                    children: qx.yhzList.map(site => ({
                         id: site.id,
                         name: `${site.mc}(${site.wzsl})`,
                         type: 'site'
                     })),
-                rawName: areaName // 原始名称
-            }));
+                    rawName: qx.qxmc, // 原始名称
+                })
+            );
             console.log('treeData', toRaw(treeData.value))
         } else {
             throw new Error(res.message);

packages/screen/src/views/PersonManagement/addDialog.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="detail-container">
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="150px"
+      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
+    >
+      <el-form-item label="人员:">
+        <el-select
+          v-model="ryxx"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="输入人员名称 / 联系方式 查询"
+          :remote-method="remoteMethod"
+          :loading="loading"
+          @change="handleSelect"
+          value-key="userId"
+        >
+          <el-option
+            v-for="item in selectOptions"
+            :key="item.userId"
+            :label="item.realName"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="岗位:">
+        <el-input v-model="form.gw" />
+      </el-form-item>
+
+      <el-form-item label="养护站:">
+        <el-select
+          v-model="yhzmc"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="输入养护站名称查询"
+          :remote-method="yhzremoteMethod"
+          :loading="loading"
+          @change="handleYhzSelect"
+          value-key="id"
+          :disabled="disabled"
+        >
+          <el-option
+            v-for="item in selectYhzOptions"
+            :key="item.id"
+            :label="item.mc"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="人员角色:">
+        <el-select v-model="form.ryjs" placeholder="请选择人员角色">
+          <el-option label="负责人" value="1"></el-option>
+          <el-option label="普通工作人员" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+    
+    <script setup>
+import { ref, onMounted, watch } from "vue";
+const formRef = ref(null);
+defineExpose({ formRef });
+
+const props = defineProps({
+  detailData: {
+    type: Object,
+    default: () => ({}),
+  },
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+  getUserList: {
+    type: Function,
+    default: () => () => {},
+  },
+  treeData: {
+    type: Array,
+    default: () => [],
+  },
+  yhzid: {
+    type: String,
+    default: "",
+  },
+  yhzmc: {
+    type: String,
+    default: "",
+  },
+  getYhzList: {
+    type: Function,
+    default: () => () => {},
+  },
+});
+
+const ryxx = ref("");
+const loading = ref(false);
+const selectOptions = ref([]);
+// 选择人员筛选
+const remoteMethod = async (query) => {
+  loading.value = true;
+  const res = await props.getUserList(query);
+  if (res) {
+    selectOptions.value = res;
+  }
+  loading.value = false;
+};
+
+// 选择人员
+const handleSelect = (value) => {
+  props.form.xm = value.realName;
+  props.form.sjhm = value.phone;
+  props.form.userId = value.userId;
+};
+
+const yhzmc = ref(props.yhzmc);
+const disabled = ref(false);
+const selectYhzOptions = ref([]);
+
+// 选择养护站筛选
+const yhzremoteMethod = async (query) => {
+  loading.value = true;
+  const res = await props.getYhzList(query);
+  if (res) {
+    selectYhzOptions.value = res;
+  }
+  loading.value = false;
+};
+// 选择养护站
+const handleYhzSelect = (value) => {
+  yhzmc.value = value.mc;
+  props.form.yhzid = value.id;
+};
+
+onMounted(async () => {
+  if (props.yhzid) {
+    disabled.value = true;
+    props.form.yhzid = props.yhzid;
+  } else {
+    const res2 = await props.getYhzList();
+    if (res2) {
+      selectYhzOptions.value = res2;
+    }
+  }
+
+  const res = await props.getUserList();
+  if (res) {
+    selectOptions.value = res;
+  }
+});
+</script>
+    
+    <style>
+</style>

packages/screen/src/views/PersonManagement/detailDialog.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="detail-container">
+    <el-form
+      label-position="right"
+      label-width="150px"
+      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
+    >
+    <el-form-item label="人员名称:">
+        <el-input disabled v-model="detailData.xm" />
+      </el-form-item>
+      <el-form-item label="岗位:">
+        <el-input disabled v-model="detailData.gw" />
+      </el-form-item>
+      <el-form-item label="手机号码:">
+        <el-input disabled v-model="detailData.sjhm" />
+      </el-form-item>
+      <el-form-item label="人员角色:">
+        <el-input disabled :value="detailData.ryjs === 1 ? '管理员' : '普通用户'" />
+      </el-form-item>
+      <el-form-item label="创建时间:">
+        <el-input disabled v-model="detailData.cjsj" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  detailData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style>
+</style>

packages/screen/src/views/PersonManagement/editDialog.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="detail-container">
+    <el-form
+      ref="formRef"
+      label-position="right"
+      label-width="150px"
+      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
+    >
+      <el-form-item label="人员名称:">
+        <el-input disabled v-model="form.xm" />
+      </el-form-item>
+      <el-form-item label="岗位:">
+        <el-input v-model="form.gw" />
+      </el-form-item>
+      <el-form-item label="手机号码:">
+        <el-input disabled v-model="form.sjhm" />
+      </el-form-item>
+      <el-form-item label="人员角色:" prop="ryjs">
+        <el-select v-model="form.ryjs" placeholder="请选择角色">
+          <el-option label="负责人" :value="1" />
+          <el-option label="普通工作人员" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间:">
+        <el-input disabled v-model="form.cjsj" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+  
+  <script setup>
+import { ref } from "vue";
+const formRef = ref(null);
+defineExpose({ formRef });
+
+const props = defineProps({
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+  
+  <style>
+</style>

packages/screen/src/views/PersonManagement/index.js

@@ -0,0 +1,534 @@
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
+import { request } from "@/utils/request";
+import { Search } from "@element-plus/icons-vue";
+import DetailDialog from "./detailDialog.vue";
+import EditDialog from "./editDialog.vue";
+import AddDialog from "./addDialog.vue";
+import { useRoute } from 'vue-router'
+
+const treeData = ref([]);
+const treeProps = {
+    children: "children",
+    label: "name",
+    key: "id",
+}
+const filterText = ref(''); // 树节点过滤条件
+const tableData = ref([]);
+const qxmc = ref(''); // 区县名称
+const yhzid = ref(''); // 养护站id
+const yhzmc = ref(''); // 养护站名称
+const filterData = reactive({
+    xm: '',
+}); // 表格过滤条件
+const pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+    pageSizes: [10, 20, 50],
+    layout: "prev, pager, next, jumper",
+    onChange: (page, pageSize) => {
+        pagination.current = page;
+        pagination.pageSize = pageSize;
+        getyhzryList(qxmc.value, yhzid.value, filterData);
+    },
+}); // 表格分页
+const modelVisible = ref(false); // 弹窗显示状态
+const model = reactive({
+    title: '',
+    content: null,
+    props: {},
+    onCancel: null,
+    onConfirm: null,
+    width: '60%',
+}); // 弹窗内容
+const dialogType = ref(''); // 弹窗类型
+const dialogRef = ref(null); // 弹窗实例
+
+const INIT_FORM = {
+    xm: "",
+    sjhm: "",
+    gw: "",
+    cjsj: "",
+    yhzid: "",
+    ryjs: null, // 人员角色 1-负责人 2-普通工作人员
+    userId: "",
+}; // 表单初始值
+const form = reactive({ ...INIT_FORM }); // 表单
+
+
+
+// 节点过滤函数
+const filterNode = (value, node) => {
+    const keyword = (value || '').toLowerCase();
+
+    const nodeData = node || {}
+
+    // 处理区域节点匹配
+    if (nodeData.type === 'area') {
+        return (nodeData.rawName || '').toLowerCase().includes(keyword)
+    }
+
+    // 处理站点节点匹配
+    if (nodeData.type === 'site') {
+        const parentData = node.parent?.data?.type === 'area' ? node.parent.data : {}
+        const parentMatch = (parentData.rawName || '').toLowerCase().includes(keyword)
+        return parentMatch || (nodeData.name || '').toLowerCase().includes(keyword)
+    }
+
+    return false
+}
+// 获取养护站列表分组
+const getTreeData = async () => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/yhz/listAreaGroup?dataType=PERSONNEL',
+            method: 'GET'
+        })
+        if (res.code === '00000') {
+            treeData.value = res.data.map((qx, index) => (
+                {
+                    id: index,
+                    name: `${qx.qxmc}`,
+                    type: 'area',
+                    children: qx.yhzList.map(site => ({
+                        id: site.id,
+                        name: `${site.mc}(${site.rysl})`,
+                        type: 'site',
+                        rawName: site.mc,
+                    })),
+                    rawName: qx.qxmc, // 原始名称
+                })
+            );
+            console.log('treeData', toRaw(treeData.value))
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+// 处理节点点击事件
+const handleNodeClick = (data, node) => {
+    if (!data || !data.type) return;
+    if (data.type === 'area' && node.expanded === false) {
+        console.log('树节点关闭', node.expanded)
+        yhzid.value = ''; // 重置养护站id
+        yhzmc.value = ''; // 重置养护站名称
+        qxmc.value = ''; // 重置区县名称
+        return;
+    }
+    if (data.type === 'area') {
+        console.log('你点击的是区县', data.id)
+        yhzid.value = ''; // 重置养护站id
+        yhzmc.value = ''; // 重置养护站名称
+        qxmc.value = data.id; // 保存区县名称
+
+    }
+    if (data.type === 'site') {
+        console.log('你点击的是站点', data.name)
+        yhzid.value = data.id; // 保存养护站id
+        yhzmc.value = data.rawName; // 保存养护站名称
+        qxmc.value = ''; // 重置区县名称
+    }
+};
+
+// 获取养护站人员列表
+const getyhzryList = async (qxmc, yhzid, filterData) => {
+    try {
+        const data = {
+            qxmc: qxmc,
+            yhzid: yhzid,
+            xm: filterData?.xm || '',
+            pageNum: pagination.current,
+            pageSize: pagination.pageSize,
+        }
+        const res = await request({
+            url: '/snow-ops-platform/yhzry/list',
+            method: 'GET',
+            params: data,
+        })
+        if (res.code === '00000') {
+            tableData.value = res.data.records;
+            pagination.total = res.data.total;
+        } else {
+            tableData.value = [];
+            pagination.total = 0;
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+
+const columns = [
+    {
+        prop: 'xm',
+        label: '姓名',
+    },
+    {
+        prop: 'gw',
+        label: '岗位',
+    },
+    {
+        prop: 'sjhm',
+        label: '手机号码',
+    },
+    {
+        prop: 'cjsj',
+        label: '创建时间',
+        render: (row) => () => {
+            // 解析 ISO 时间字符串
+            const date = new Date(row.cjsj);
+
+            // 格式化为 YYYY-MM-DD HH:mm:ss
+            const format = (n) => n.toString().padStart(2, '0');
+            return h("div",
+                `${date.getFullYear()}-${format(date.getMonth() + 1)}-${format(date.getDate())} 
+                 ${format(date.getHours())}:${format(date.getMinutes())}:${format(date.getSeconds())}`
+            );
+        }
+    },
+    {
+        prop: 'ryjs',
+        label: '人员角色',
+        render: (row) => () => {
+            const roleConfig = {
+                1: { label: '负责人', color: '#f56c6c' },
+                2: { label: '普通工作人员', color: '#409eff' }
+            };
+
+            const config = roleConfig[row.ryjs] || { label: '未知角色', color: '#909399' };
+
+            return h(
+                ElTag,
+                {
+                    style: { 'margin-right': '5px' },
+                    effect: "dark",
+                    type: row.ryjs === 1 ? 'danger' : 'primary'
+                },
+                () => config.label
+            );
+        }
+    },
+
+    {
+        label: "操作",
+        fixed: "right",
+        width: 150,
+        render: (row) => () =>
+            h("div", { class: "action-btns" }, [
+                h(
+                    ElButton,
+                    {
+                        type: "primary",
+                        link: true,
+                        onClick: async () => {
+                            dialogType.value = 'detail'
+                            await getDetailData(row);
+                        },
+                    },
+                    () => "详情"
+                ),
+                h(
+                    ElButton,
+                    {
+                        type: "primary",
+                        link: true,
+                        onClick: async () => {
+                            dialogType.value = 'edit'
+                            await getDetailData(row);
+                        },
+                    },
+                    () => "编辑"
+                ),
+                h(
+                    ElButton,
+                    {
+                        type: "danger",
+                        link: true,
+                        onClick: async () => {
+                            try {
+                                await ElMessageBox.confirm("确定要删除该人员吗？", "删除确认", {
+                                    confirmButtonText: "确定",
+                                    cancelButtonText: "取消",
+                                    type: "warning",
+                                });
+                                const res = await request({
+                                    url: `/snow-ops-platform/yhzry/delete`,
+                                    method: 'POST',
+                                    data: {
+                                        id: row.id,
+                                    }
+                                });
+                                if (res.code === '00000') {
+                                    ElMessage.success('删除成功');
+                                    getyhzryList(qxmc.value, yhzid.value, filterData);
+                                } else {
+                                    throw new Error(res.message);
+                                }
+                            } catch (error) {
+                                ElMessage.error(error.message);
+                                console.log(error);
+                            }
+                        },
+                    },
+                    () => "删除"
+                ),
+
+            ]),
+    },
+]
+
+const handleEdit = async () => {
+    try {
+        await dialogRef?.value?.dynamicComponentRef?.formRef.validate();
+        console.log('form', toRaw(form))
+        const res = await request({
+            url: '/snow-ops-platform/yhzry/update',
+            method: 'POST',
+            data: toRaw(form),
+        });
+        if (res.code === '00000') {
+            ElMessage.success('编辑成功');
+            dialogType.value = '';
+            modelVisible.value = false;
+            getyhzryList(qxmc.value, yhzid.value, filterData);
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log('error', error)
+    }
+};
+
+// 获取养护站人员详情
+const getDetailData = async (row) => {
+    try {
+        const res = await request({
+            url: `/snow-ops-platform/yhzry/getById?id=${row.id}`,
+            method: 'GET',
+        });
+        if (!res || res.code !== '00000') {
+            throw new Error('获取人员详情失败')
+        }
+        if (res.code === '00000') {
+            if (dialogType.value === 'detail') {
+                model.title = `人员详情`;
+                model.content = DetailDialog;
+                model.props = {
+                    detailData: res.data,
+                };
+                model.onCancel = () => {
+                    dialogType.value = '';
+                    modelVisible.value = false;
+                };
+                model.onConfirm = () => {
+                    dialogType.value = '';
+                    modelVisible.value = false;
+                };
+                model.width = '30%';
+                modelVisible.value = true;
+            }
+            if (dialogType.value === 'edit') {
+                model.title = `编辑人员`;
+                model.content = EditDialog;
+                Object.assign(form, res.data);
+                model.props = {
+                    detailData: res.data,
+                    form: form,
+                };
+                model.onCancel = () => {
+                    dialogType.value = '';
+                    modelVisible.value = false;
+                };
+                model.onConfirm = async () => {
+                    await handleEdit();
+                };
+                model.width = '30%';
+                modelVisible.value = true;
+            }
+
+        }
+        else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+
+// 根据用户信息 查询角色列表
+const getUserList = async (key) => {
+    try {
+        const keyword = key;
+        let url = '';
+        if (keyword) {
+            url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`
+        } else {
+            url = `/snow-ops-platform/yhzry/getUserByKey?key=`
+        }
+        const res = await request({
+            url: url,
+            method: 'GET',
+        });
+        if (res.code === '00000') {
+            return res.data;
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+
+// 根据养护站名称 查询养护站列表
+const getYhzList = async (key) => {
+    try {
+        const data = {
+            mc: key,
+            pageNum: 1,
+            pageSize: 9999,
+        }
+        const res = await request({
+            url: '/snow-ops-platform/yhz/list',
+            method: 'GET',
+            params: data,
+        });
+        if (res.code === '00000') {
+            return res.data.records
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+
+// 打开新增人员弹窗
+const openAddModel = () => {
+    model.title = `新增人员`;
+    model.content = AddDialog;
+    model.width = '30%';
+    Object.assign(form, INIT_FORM);
+    model.props = {
+        detailData: {},
+        form: form,
+        getUserList: getUserList,
+        treeData: treeData,
+        yhzid: yhzid,
+        yhzmc: yhzmc,
+        getYhzList: getYhzList,
+    };
+    model.onCancel = () => {
+        dialogType.value = '';
+        modelVisible.value = false;
+    };
+    model.onConfirm = async () => {
+        try {
+            form.cjsj = new Date().toLocaleString('sv-SE', { hour12: false }).replace('T', ' ');
+            console.log('form', toRaw(form))
+            const res = await request({
+                url: '/snow-ops-platform/yhzry/add',
+                method: 'POST',
+                data: toRaw(form),
+            });
+            if (res.code === '00000') {
+                ElMessage.success('新增人员成功');
+                dialogType.value = '';
+                modelVisible.value = false;
+                getyhzryList(qxmc.value, yhzid.value, filterData);
+            } else {
+                throw new Error(res.message);
+            }
+        } catch (error) {
+            ElMessage.error(error.message);
+            console.log('error', error)
+        }
+    };
+    modelVisible.value = true;
+}
+
+
+export default () => {
+
+    const treeRef = ref(null);
+    watch(() => filterText.value, (val) => {
+        treeRef.value.filter(val || '')
+
+        // 添加自动点击逻辑
+        nextTick(() => {
+            setTimeout(() => {
+                const visibleNodes = getFilteredVisibleNodes()
+                if (visibleNodes.length === 2) {
+                    handleAutoClickNode(visibleNodes[1])
+                }
+            }, 100) // 增加 100ms 延迟确保过滤完成
+        })
+
+    })
+
+    // 获取过滤后的可见节点
+    const getFilteredVisibleNodes = () => {
+        return Object.values(treeRef.value?.store?.nodesMap || {})
+            .filter(node => node.visible && !node.isHidden)
+    }
+    const handleAutoClickNode = (node) => {
+        // 展开父节点
+        if (node.parent) {
+            node.parent.expanded = true
+        }
+
+        // 执行点击逻辑
+        handleNodeClick(
+            node.data,
+            {
+                data: node.data,
+                expanded: false,
+                isCurrent: true
+            }
+        )
+    }
+
+    watch(
+        [() => filterData, qxmc, yhzid],
+        ([newFilterData, newQxmc, newYhzid]) => {
+            getyhzryList(newQxmc, newYhzid, newFilterData)
+        },
+        { deep: true }
+    )
+
+
+    const route = useRoute()
+
+    onMounted(async () => {
+        await getTreeData();
+        await getyhzryList();
+        const rowData = JSON.parse(decodeURIComponent(route.params.data));
+        if (rowData) {
+            filterText.value = rowData.mc;
+        };
+    });
+    return {
+        treeRef,
+        treeData,
+        treeProps,
+        filterText,
+        filterNode,
+        handleNodeClick,
+
+        tableData,
+        filterData,
+        pagination,
+        columns,
+        modelVisible,
+        dialogRef,
+        model,
+        openAddModel,
+    }
+}

packages/screen/src/views/PersonManagement/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="root">
+    <div class="left-tree">
+      <div class="fillter-box">
+        <el-input
+          v-model="script.filterText.value"
+          placeholder="请输入养护站名称"
+          clearable
+        ></el-input>
+      </div>
+      <div class="tree-box">
+        <el-tree
+          ref="treeRef"
+          :data="script.treeData.value"
+          :props="script.treeProps"
+          @node-click="script.handleNodeClick"
+          accordion
+          :filter-node-method="script.filterNode"
+        />
+      </div>
+    </div>
+    <div class="right-form">
+      <div class="select-box">
+        <div class="inline-flex">
+          <label>人员姓名:</label>
+          <el-input v-model="script.filterData.xm"></el-input>
+        </div>
+      </div>
+      <div class="form-box">
+        <div class="event-box">
+          <el-button type="primary" size="large" @click="script.openAddModel"
+            >新增人员</el-button
+          >
+          <el-button type="info" size="large" @click="script.handelExport"
+            >导出</el-button
+          >
+        </div>
+        <div class="form-content">
+          <DynamicTable
+            :dataSource="script.tableData.value"
+            :columns="script.columns"
+            :autoHeight="true"
+            :pagination="script.pagination"
+          ></DynamicTable>
+        </div>
+      </div>
+    </div>
+    <div class="model-box">
+      <MyDialog
+        v-model="script.modelVisible.value"
+        :title="script.model?.title"
+        :dynamicComponent="script.model?.content"
+        :component-props="script.model?.props"
+        :onConfirm="script.model?.onConfirm"
+        :onCancel="script.model?.onCancel"
+        ref="dialogRef"
+        :width="script.model?.width"
+      >
+      </MyDialog>
+    </div>
+  </div>
+</template>
+
+<script  setup>
+import scriptFn from "./index.js";
+import DynamicTable from "../../component/DynamicTable";
+import MyDialog from "../../component/MyDialog";
+
+const script = scriptFn();
+const { treeRef, dialogRef } = script;
+</script>
+<style scoped>
+.root {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  gap: 20px;
+}
+
+/* 左侧树形结构区域 */
+.left-tree {
+  width: 20%;
+  height: 100%;
+  padding: 25px 25px 0 25px;
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+}
+.fillter-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tree-box {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+}
+
+/* 右侧表单区域 */
+.right-form {
+  width: 80%;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+}
+.select-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  gap: 20px;
+}
+.inline-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.inline-flex label {
+  white-space: nowrap; /* 禁止换行 */
+}
+.form-box {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.event-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+}
+.form-content {
+  width: 100%;
+  height: calc(100% - 60px);
+}
+.model-box {
+  position: absolute;
+}
+</style>

packages/screen/src/views/ServiceStationManagePage/index.vue

@@ -376,9 +376,6 @@ const getDetailData = async (row) => {
   }
 };
 
-// 获取养护站人员详情
-
-
 // 获取养护站列表
 const getTableData = async () => {
   try {

packages/screen/src/views/SnowEventManagement/index.js

@@ -90,17 +90,19 @@ const getTreeData = async () => {
             method: 'GET'
         })
         if (res.code === '00000') {
-            treeData.value = Object.entries(res.data).map(([areaName, sites]) => ({
-                id: areaName,
-                name: `${areaName}(${sites.length})`,
+            treeData.value = res.data.map((qx, index) => (
+                {
+                    id: index,
+                    name: `${qx.qxmc}(${qx.bxsjsl})`,
                     type: 'area',
-                children: sites.map(site => ({
+                    children: qx.yhzList.map(site => ({
                         id: site.id,
-                    name: `${site.mc}`,
+                        name: `${site.mc}(${site.bxsjsl})`,
                         type: 'site'
                     })),
-                rawName: areaName // 原始名称
-            }));
+                    rawName: qx.qxmc, // 原始名称
+                })
+            );
             console.log('treeData', toRaw(treeData.value))
         } else {
             throw new Error(res.message);