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

2025-11-11 18:04:02 +08:00 · 2025-11-11 18:04:02 +08:00 · b786647378
commit b786647378
parent 23ea3af0de 0d29b9c8d6
22 changed files with 1162 additions and 302 deletions
--- a/packages/mobile/src/router/index.js
+++ b/packages/mobile/src/router/index.js
@ -46,6 +46,11 @@ const routes = [
    name: 'IceEventAdd',
    component: () => import('../views/IceEvent/IceEventAdd.vue')
  },
+  {
+    path: '/iceEventDetail/:data',
+    name: 'IceEventDetail',
+    component: () => import('../views/IceEvent/IceEventDetails.vue')
+  },
 ]

 const router = createRouter({
--- a/packages/mobile/src/views/Equipment/EquipmentDetails.vue
+++ b/packages/mobile/src/views/Equipment/EquipmentDetails.vue
@ -663,7 +663,7 @@ const getEquipmentDetailInfo = async () => {
      method: "GET",
    });
    if (res.code && res.code === "00000") {
-      equipmentDetailInfo.value = res.data;
+      equipmentDetailInfo.value = res.data.equipment;
      console.log("设备详情", toRaw(equipmentDetailInfo.value));
    } else {
      throw new Error(res.data.message);
--- a/packages/mobile/src/views/IceEvent/IceEventAdd.vue
+++ b/packages/mobile/src/views/IceEvent/IceEventAdd.vue
@ -49,6 +49,7 @@
          v-model="form.event.disasterMileage"
          label="受灾里程"
          center
+          type="number"
          placeholder="请填写"
        />
      </van-form>
@ -101,53 +102,23 @@
          close-on-click-overlay
          @close="showExpectPicker = false"
        >
-          <van-date-picker
-            type="datetime"
-            :min-date="minDate"
-            :max-date="maxDate"
+          <van-picker-group
+            title="选择日期时间"
+            :tabs="['选择日期', '选择时间']"
            @confirm="handleConfirmExpectTime"
            @cancel="showExpectPicker = false"
-          />
+          >
+            <van-date-picker
+              v-model="expectDate"
+              :min-date="minDate"
+              :max-date="maxDate"
+            />
+            <van-time-picker v-model="expectTime" />
+          </van-picker-group>
        </van-popup>
      </van-form>
      <h3>实施情况</h3>
      <van-form class="IceEventAddForm" label-align="left" colon>
-        <van-field
-          v-model="form.material.snowMeltingAgent"
-          type="number"
-          label="融雪剂"
-          center
-          placeholder="请填写"
-        >
-          <template #extra> 吨 </template>
-        </van-field>
-        <van-field
-          v-model="form.material.antiSlipSand"
-          type="number"
-          label="防滑沙"
-          center
-          placeholder="请填写"
-        >
-          <template #extra> 吨 </template>
-        </van-field>
-        <van-field
-          v-model="form.material.antiSlipChains"
-          type="number"
-          label="防滑链"
-          center
-          placeholder="请填写"
-        >
-          <template #extra> 副 </template>
-        </van-field>
-        <van-field
-          v-model="form.material.sandbags"
-          type="number"
-          label="麻袋"
-          center
-          placeholder="请填写"
-        >
-          <template #extra> 条 </template>
-        </van-field>
        <van-field
          v-model="form.material.inputManpower"
          type="number"
@ -175,6 +146,102 @@
        >
          <template #extra> 台班 </template>
        </van-field>
+
+        <!-- 选择物资列表 -->
+        <van-field
+          v-for="(material, index) in form.yhzMaterialList"
+          :key="material.rid"
+          v-model="material.usageAmount"
+          type="number"
+          :label="material.wzmc"
+          center
+          placeholder="请输入数量"
+        >
+          <template #extra>
+            <span style="margin-right: 10px">{{ material.dw }}</span>
+            <van-button
+              size="small"
+              type="danger"
+              @click.stop="form.yhzMaterialList.splice(index, 1)"
+            >
+              删除
+            </van-button>
+          </template>
+        </van-field>
+
+        <van-button
+          class="add-wzbtn"
+          type="primary"
+          icon="plus"
+          plain
+          @click="handleOpenAddMaterial"
+          >添加物资
+        </van-button>
+        <van-popup
+          :show="showAddMaterialPopup"
+          position="bottom"
+          close-on-click-overlay
+          @close="showAddMaterialPopup = false"
+        >
+          <div style="padding: 16px">
+            <h3 style="text-align: center; margin-bottom: 16px">添加物资</h3>
+
+            <!-- 搜索框 -->
+            <van-field
+              v-model="searchText"
+              placeholder="输入物资名称搜索"
+              clearable
+              @update:model-value="handleSearch"
+            >
+            </van-field>
+
+            <van-checkbox-group v-model="checked">
+              <van-cell-group inset style="margin: 16px 0">
+                <div
+                  style="
+                    display: flex;
+                    justify-content: space-between;
+                    padding: 8px 16px;
+                  "
+                >
+                  <span>共 {{ materialList.length }} 项</span>
+                  <van-button
+                    size="mini"
+                    @click="toggleSelectAll"
+                    :type="isAllSelected ? 'primary' : 'default'"
+                  >
+                    {{ isAllSelected ? "取消全选" : "全选" }}
+                  </van-button>
+                </div>
+                <van-cell
+                  v-for="(item, index) in materialList"
+                  clickable
+                  :key="item.rid"
+                  :title="item.wzmc"
+                  @click="toggle(index)"
+                >
+                  <template #right-icon>
+                    <van-checkbox
+                      :name="item.rid"
+                      :ref="(el) => (checkboxRefs[index] = el)"
+                      @click.stop
+                    />
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </van-checkbox-group>
+
+            <van-button
+              type="primary"
+              block
+              @click="addSelectedMaterials"
+              style="margin-top: 10px"
+            >
+              确认添加
+            </van-button>
+          </div>
+        </van-popup>
+
        <van-field label="当前通行情况" center>
          <template #input>
            <div class="disposal-buttons">
@ -225,7 +292,10 @@
                  form.traffic.hasStrandedVehicles === 0 ? 'primary' : 'default'
                "
                size="small"
-                @click="form.traffic.hasStrandedVehicles = 0"
+                @click="
+                  form.traffic.hasStrandedVehicles = 0;
+                  form.traffic.strandedVehicleCount = null;
+                "
                class="last-button"
              >
                无滞留
@ -234,6 +304,7 @@
          </template>
        </van-field>
        <van-field
+          v-if="form.traffic.hasStrandedVehicles === 1"
          v-model="form.traffic.strandedVehicleCount"
          type="number"
          label="滞留车辆数"
@ -257,13 +328,19 @@
          close-on-click-overlay
          @close="showActualPicker = false"
        >
-          <van-date-picker
-            type="datetime"
-            :min-date="minDate"
-            :max-date="maxDate"
+          <van-picker-group
+            title="选择日期时间"
+            :tabs="['选择日期', '选择时间']"
            @confirm="handleConfirmActualTime"
            @cancel="showActualPicker = false"
-          />
+          >
+            <van-date-picker
+              v-model="actualDate"
+              :min-date="minDate"
+              :max-date="maxDate"
+            />
+            <van-time-picker v-model="actualTime" />
+          </van-picker-group>
        </van-popup>

        <van-field label="附件" center>
@ -292,13 +369,14 @@
      <script setup>
 import "vant/es/toast/style";
 import "vant/es/popup/style";
-import { ref, onMounted, reactive, toRaw, watch } from "vue";
+import { ref, onMounted, reactive, toRaw, watch, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { showToast, showLoadingToast } from "vant";
 import { request } from "../../../../shared/utils/request";

 const router = useRouter();
 const route = useRoute();
+// 组件挂载时获取数据
 const yhzDetail = ref({}); // 养护站详情数据
 const INIT_FORM = reactive({
  event: {
@ -323,10 +401,6 @@ const INIT_FORM = reactive({
    inputManpower: null, // 投入人力
    inputFunds: null, // 投入资金
    inputEquipment: null, // 投入设备
-    snowMeltingAgent: null, // 融雪剂
-    sandbags: null, // 麻袋
-    antiSlipSand: null, // 防滑沙
-    antiSlipChains: null, // 防滑链
    createTime: "", // 创建时间
    updateTime: "", // 更新时间
  },
@ -338,6 +412,7 @@ const INIT_FORM = reactive({
    createTime: "", // 创建时间
    updateTime: "", // 更新时间
  },
+  yhzMaterialList: [], // 养护站物资列表
  photos: [],
 });
 const form = reactive({ ...INIT_FORM });
@ -379,25 +454,187 @@ const onClickLeft = () => {
  });
 };

-const handleAdd = () => {
-  console.log("form", toRaw(form));
+// 添加物资相关
+const showAddMaterialPopup = ref(false);
+const materialList = ref([]);
+const checkboxRefs = ref([]);
+const checked = ref([]);
+const toggle = (index) => {
+  checkboxRefs.value[index].toggle();
 };

+const searchText = ref("");
+const handleSearch = () => {
+  getMaterialList(searchText.value);
+};
+// 全选功能
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    checked.value = [];
+  } else {
+    checked.value = materialList.value.map((item) => item.rid);
+  }
+};
+// 计算是否全选
+const isAllSelected = computed(() => {
+  return (
+    materialList.value.length > 0 &&
+    materialList.value.every((item) => checked.value.includes(item.rid))
+  );
+});
+
+// 添加物资到表单
+const addSelectedMaterials = () => {
+  checked.value.forEach((rid) => {
+    const material = materialList.value.find((m) => m.rid === rid);
+    if (material && !form.yhzMaterialList.some((m) => m.rid === rid)) {
+      form.yhzMaterialList.push({
+        rid: rid,
+        wzmc: material.wzmc,
+        usageAmount: null,
+        dw: material.dw,
+      });
+    }
+  });
+  showAddMaterialPopup.value = false;
+  checked.value = [];
+};
+
+// 查询物资列表
+const getMaterialList = async (wzmc) => {
+  try {
+    const data = {
+      yhzid: yhzDetail.value.id,
+      wzmc,
+      pageNum: 1,
+      pageSize: 9999,
+    };
+    const res = await request({
+      url: "/snow-ops-platform/yjwz/list",
+      method: "GET",
+      params: data,
+    });
+    if (res.code === "00000") {
+      materialList.value = res.data.records;
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    showToast({
+      type: "fail",
+      message: error.message,
+    });
+  }
+};
+
+// 打开添加物资弹窗
+const handleOpenAddMaterial = async () => {
+  await getMaterialList();
+  showAddMaterialPopup.value = true;
+};
+
+const handleAdd = async () => {
+  try {
+    const toast = showLoadingToast({
+      message: "上报中...",
+      forbidClick: true,
+      duration: 0, // 设置为0表示不会自动关闭
+    });
+    form.event.serviceStationId = yhzDetail.value.id;
+    form.event.district = yhzDetail.value.qxmc;
+    console.log("yhzDetail", toRaw(yhzDetail.value));
+    console.log("form", toRaw(form));
+    const res = await request({
+      url: "/snow-ops-platform/event/add",
+      method: "POST",
+      data: form,
+    });
+    if (res.code === "00000") {
+      toast.close();
+      showToast({
+        type: "success",
+        message: "上报成功",
+      });
+      router.push({
+        name: "IceEventManage",
+        params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
+      });
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    toast.close();
+    showToast({
+      type: "fail",
+      message: error.message,
+    });
+  }
+};
+
+const expectDate = ref([]);
+const expectTime = ref([]);
+const actualDate = ref([]);
+const actualTime = ref([]);
+
 // 预计恢复时间相关
 const showExpectPicker = ref(false);
 const minDate = new Date();
 const maxDate = new Date(2050, 11, 31);
-const handleConfirmExpectTime = ({ selectedValues }) => {
-  form.event.expectRecoverTime = selectedValues.join("-");
+const handleConfirmExpectTime = () => {
+  const [year, month, day] = expectDate.value;
+  const [hour, minute] = expectTime.value;
+  form.event.expectRecoverTime = `${year}-${month.padStart(
+    2,
+    "0"
+  )}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(
+    2,
+    "0"
+  )}:00`;
  showExpectPicker.value = false;
 };
 // 实际恢复时间相关
 const showActualPicker = ref(false);
-const handleConfirmActualTime = ({ selectedValues }) => {
-  form.traffic.actualRecoverTime = selectedValues.join("-");
+const handleConfirmActualTime = () => {
+  const [year, month, day] = actualDate.value;
+  const [hour, minute] = actualTime.value;
+  form.traffic.actualRecoverTime = `${year}-${month.padStart(
+    2,
+    "0"
+  )}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(
+    2,
+    "0"
+  )}:00`;
  showActualPicker.value = false;
 };

+// 在打开选择器时设置初始值
+watch(showExpectPicker, (val) => {
+  if (val) {
+    const current = form.event.expectRecoverTime
+      ? new Date(form.event.expectRecoverTime)
+      : new Date();
+    expectDate.value = [
+      current.getFullYear(),
+      current.getMonth() + 1,
+      current.getDate(),
+    ];
+    expectTime.value = [current.getHours(), current.getMinutes()];
+  }
+});
+watch(showActualPicker, (val) => {
+  if (val) {
+    const current = form.traffic.actualRecoverTime
+      ? new Date(form.traffic.actualRecoverTime)
+      : new Date();
+    actualDate.value = [
+      current.getFullYear(),
+      current.getMonth() + 1,
+      current.getDate(),
+    ];
+    actualTime.value = [current.getHours(), current.getMinutes()];
+  }
+});
+
 // 文件上传
 const afterRead = async (file) => {
  try {
@ -460,6 +697,11 @@ const handleDelete = (file) => {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

+.add-wzbtn {
+  width: calc(100% - 32px);
+  margin: 10px 16px;
+}
+
 .add-btn {
  position: fixed;
  bottom: 20px;
--- a/packages/mobile/src/views/IceEvent/IceEventDetails.vue
+++ b/packages/mobile/src/views/IceEvent/IceEventDetails.vue
@ -1,6 +1,6 @@
 <template>
  <div class="home">
-    <van-nav-bar title="物资管理" fixed left-arrow @click-left="onClickLeft" />
+    <van-nav-bar title="冰雪灾害" fixed left-arrow @click-left="onClickLeft" />

    <van-cell-group>
      <van-cell title="当前站点" :value="yhzDetail.mc" />
@ -9,19 +9,36 @@
    <div class="content">
      <van-cell-group>
        <van-cell
-          title="物资信息"
+          title="基本信息"
          style="font-size: 18px; font-weight: bold; line-height: inherit"
        >
        </van-cell>
-        <van-cell :title="'物资名称： ' + wzDetailData.wzmc"> </van-cell>
-        <van-cell :title="'数量： ' + wzDetailData.sl"> </van-cell>
-        <van-cell :title="'余量： ' + wzDetailData.ye"> </van-cell>
-        <van-cell :title="'单位： ' + wzDetailData.dw"> </van-cell>
-        <van-cell :title="'存放地点： ' + wzDetailData.cfdd"> </van-cell>
-        <van-cell :title="'区县名称： ' + wzDetailData.qxmc"> </van-cell>
-        <van-cell :title="'负责人： ' + wzDetailData.fzr"> </van-cell>
-        <van-cell :title="'联系电话： ' + wzDetailData.lxdh"> </van-cell>
-        <van-cell :title="'入库日期： ' + wzDetailData.rkrq"> </van-cell>
+        <van-cell :title="'发生时间： ' + eventDetailData?.event?.occurTime"> </van-cell>
+        <van-cell :title="'发生地点： ' + eventDetailData?.event?.occurLocation"> </van-cell>
+        <van-cell :title="'起点桩号： ' + eventDetailData?.event?.startStakeNo"> </van-cell>
+        <van-cell :title="'止点桩号： ' + eventDetailData?.event?.endStakeNo"> </van-cell>
+        <van-cell :title="'受灾里程： ' + eventDetailData?.event?.disasterMileage"> </van-cell>
+        <van-cell :title="'填报人： ' + eventDetailData?.event?.reporterName"> </van-cell>
+        <van-cell :title="'填报时间： ' + eventDetailData?.event?.reportTime"> </van-cell>
+      </van-cell-group>
+      <van-cell-group>
+        <van-cell
+          title="处置情况"
+          style="font-size: 18px; font-weight: bold; line-height: inherit"
+        >
+        </van-cell>
+        <van-cell :title="'处置措施： ' + eventDetailData?.event?.disposalMeasures"> </van-cell>
+        <van-cell :title="'预计恢复时间： ' + eventDetailData?.event?.expectRecoverTime"> </van-cell>
+      </van-cell-group>
+      <van-cell-group>
+        <van-cell
+          title="实施情况"
+          style="font-size: 18px; font-weight: bold; line-height: inherit"
+        >
+        </van-cell>
+        <van-cell :title="'投入人力： ' + eventDetailData?.material?.inputManpower"> </van-cell>
+        <van-cell :title="'投入资金： ' + eventDetailData?.material?.inputFunds"> </van-cell>
+        <van-cell :title="'投入设备： ' + eventDetailData?.material?.inputEquipment"> </van-cell>
      </van-cell-group>
    </div>
  </div>
@ -39,41 +56,39 @@ const router = useRouter();
 const route = useRoute();

 const yhzDetail = ref({});
-const wzData = ref([]);
-const wzDetailData = ref({}); // 物资详情数据
+const event = ref();
+const eventDetailData = ref({}); // 冰雪事件详情数据

-onMounted(() => {
-  const data = JSON.parse(decodeURIComponent(route.params.data));
-  yhzDetail.value = data.yhzDetail;
-  wzData.value = data.material;
-  console.log("传递过来的参数:", data);
-  getwzDetail();
-});
-
-// 获取物资详情
-const getwzDetail = async () => {
+// 获取冰雪事件详情数据
+const getEventDetailData = async () => {
  try {
    const res = await request({
-      url: `/snow-ops-platform/yjwz/getById?rid=${wzData.value.rid}`,
+      url: `/snow-ops-platform/event/getById?id=${event.value.id}`,
      method: "GET",
    });
-    if (res.code && res.code === "00000") {
-      wzDetailData.value = res.data;
+    if (res.code === "00000") {
+      eventDetailData.value = res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      message: error.message,
-      type: "error",
+      type: "fail",
    });
-    console.log("error", error);
  }
 };

+onMounted(() => {
+  const data = JSON.parse(decodeURIComponent(route.params.data));
+  yhzDetail.value = data.yhzDetail;
+  event.value = data.event;
+  getEventDetailData();
+});
+
 const onClickLeft = () => {
  router.push({
-    name: "MaterialManage",
+    name: "IceEventManage",
    params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
  });
 };
--- a/packages/mobile/src/views/IceEvent/IceEventManagement.vue
+++ b/packages/mobile/src/views/IceEvent/IceEventManagement.vue
@ -16,17 +16,19 @@
      <van-cell-group>
        <van-cell
          v-for="(item, index) in eventList"
+          center
          :key="index"
-          :title="item.wzmc"
+          :title="item.occurLocation"
          is-link
-          :label="`填报时间：${item.sl} (${item.dw})`"
+          :label="`填报时间：${item.reportTime}`"
+          :value="`填报人：${item.reporterName}`"
          :to="{
-            name: 'MaterialDetail',
+            name: 'IceEventDetail',
            params: {
              data: encodeURIComponent(
                JSON.stringify({
                  yhzDetail: yhzDetail,
-                  material: item,
+                  event: item,
                })
              ),
            },
--- a/packages/mobile/src/views/Material/MaterialDetails.vue
+++ b/packages/mobile/src/views/Material/MaterialDetails.vue
@ -58,7 +58,7 @@ const getwzDetail = async () => {
      method: "GET",
    });
    if (res.code && res.code === "00000") {
-      wzDetailData.value = res.data;
+      wzDetailData.value = res.data.material;
    } else {
      throw new Error(res.message);
    }
--- a/packages/screen/src/component/MenuBar/index.js
+++ b/packages/screen/src/component/MenuBar/index.js
@ -1,4 +1,4 @@
-import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick, onUnmounted } from "vue";
 import { request } from "@/utils/request";
 import { Search } from "@element-plus/icons-vue";
 import { useRoute, useRouter } from 'vue-router'
@ -29,7 +29,6 @@ const getMenuList = async () => {
 export default () => {

    // 点击菜单处理
-    const router = useRouter();
    const handleMenuClick = (menu) => {
        console.log('menu', menu)
        if (menu.path) {
@ -39,18 +38,31 @@ export default () => {
        }
    };

-    onMounted(async () => {
-        await getMenuList();
-        const firstMenuItem = menuList.value[0]?.children?.[0];
-        if (firstMenuItem) {
-            handleMenuClick(firstMenuItem);
+    const router = useRouter();
+    const tokenRef = ref(localStorage.getItem('token'));
+    watch(tokenRef, async (newVal) => {
+        if (newVal) {
+            await getMenuList();
+            const firstMenuItem = menuList.value[0]?.children?.[0];
+            if (firstMenuItem) {
+                handleMenuClick(firstMenuItem);
+            }
        }
-    })
+    }, { immediate: true });
+    const handleStorageChange = (e) => {
+        if (e.key === 'token') {
+            tokenRef.value = e.newValue;
+        }
+    };
+    onMounted(() => {
+        window.addEventListener('storage', handleStorageChange);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('storage', handleStorageChange);
+    });

    return {
        menuList,
        handleMenuClick,
-
-
    }
 };
--- a/packages/screen/src/router/index.js
+++ b/packages/screen/src/router/index.js
@ -27,11 +27,6 @@ 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',
--- a/packages/screen/src/utils/request.js
+++ b/packages/screen/src/utils/request.js
@ -7,9 +7,7 @@ const service = axios.create({

 // 请求拦截器
 service.interceptors.request.use(config => {
-    // 暂时先写死token 实际项目中再调整token的获取位置
-    const token = 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOjE5ODY2ODgzMjY1MjAwNTc4NTcsImFjY291bnQiOiJieHp0IiwidXVpZCI6ImMyY2E5OGU4LTIyYzItNGZmZi1hZWE0LTBiNWNiZmE4YjNlMSIsInJlbWVtYmVyTWUiOnRydWUsImV4cGlyYXRpb25EYXRlIjoxNzYyNzgzOTkwMzUxLCJvdGhlcnMiOm51bGwsInN1YiI6IjE5ODY2ODgzMjY1MjAwNTc4NTciLCJpYXQiOjE3NjI3NTUxOTAsImV4cCI6MTc2Mjc4Mzk5MH0.zqQcAE08fr2jQd7HcQ9Y3i-gWb2TrCWuUxSzl1kXOoJe2rp1Yly0ffrY6_1jY0ybHJwihONChqiSc-8jRTKYKw'
-    // const token = localStorage.getItem('token');
+    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `${token}`;
    }
--- a/packages/screen/src/views/EquipmentManagement/addDialog.vue
+++ b/packages/screen/src/views/EquipmentManagement/addDialog.vue
@ -53,7 +53,11 @@
            <el-input v-model="form.sbxh" />
          </el-form-item>
          <el-form-item label="设备状态:">
-            <el-input v-model="form.sbzt" />
+            <el-select v-model="form.sbzt" placeholder="请选择" clearable>
+              <el-option label="完好" value="完好" />
+              <el-option label="损坏" value="损坏" />
+              <el-option label="报废" value="报废" />
+            </el-select>
          </el-form-item>
          <el-form-item label="生产厂家:">
            <el-input v-model="form.sccj" />
--- a/packages/screen/src/views/EquipmentManagement/detailDialog.vue
+++ b/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.equipment.czy" />
+            <el-input disabled v-model="detailData.czy" />
          </el-form-item>
          <el-form-item label="辐射范围:">
-            <el-input disabled v-model="detailData.equipment.fsfw" />
+            <el-input disabled v-model="detailData.fsfw" />
          </el-form-item>
          <el-form-item label="管理人员:">
-            <el-input disabled v-model="detailData.equipment.glry" />
+            <el-input disabled v-model="detailData.glry" />
          </el-form-item>
          <el-form-item label="购买费用（万元）:">
-            <el-input disabled v-model="detailData.equipment.gmfy" />
+            <el-input disabled v-model="detailData.gmfy" />
          </el-form-item>
          <el-form-item label="购置日期:">
-            <el-input disabled v-model="detailData.equipment.gzrq" />
+            <el-input disabled v-model="detailData.gzrq" />
          </el-form-item>
          <el-form-item label="区县名称:">
-            <el-input disabled v-model="detailData.equipment.qxmc" />
+            <el-input disabled v-model="detailData.qxmc" />
          </el-form-item>
          <el-form-item label="设备编号:">
-            <el-input disabled v-model="detailData.equipment.sbbh" />
+            <el-input disabled v-model="detailData.sbbh" />
          </el-form-item>
          <el-form-item label="设备大类:">
-            <el-input disabled v-model="detailData.equipment.sbdl" />
+            <el-input disabled v-model="detailData.sbdl" />
          </el-form-item>
          <el-form-item label="设备小类:">
-            <el-input disabled v-model="detailData.equipment.sbxl" />
+            <el-input disabled v-model="detailData.sbxl" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备名称:">
-            <el-input disabled v-model="detailData.equipment.sbmc" />
+            <el-input disabled v-model="detailData.sbmc" />
          </el-form-item>
          <el-form-item label="设备位置:">
-            <el-input disabled v-model="detailData.equipment.sbwz" />
+            <el-input disabled v-model="detailData.sbwz" />
          </el-form-item>
          <el-form-item label="设备经度:">
-            <el-input disabled v-model="detailData.equipment.jd" />
+            <el-input disabled v-model="detailData.jd" />
          </el-form-item>
          <el-form-item label="设备纬度:">
-            <el-input disabled v-model="detailData.equipment.wd" />
+            <el-input disabled v-model="detailData.wd" />
          </el-form-item>
          <el-form-item label="设备型号:">
-            <el-input disabled v-model="detailData.equipment.sbxh" />
+            <el-input disabled v-model="detailData.sbxh" />
          </el-form-item>
          <el-form-item label="设备状态:">
-            <el-input disabled v-model="detailData.equipmentsbzt" />
+            <el-input disabled v-model="detailData.sbzt" />
          </el-form-item>
          <el-form-item label="生产厂家:">
-            <el-input disabled v-model="detailData.equipment.sccj" />
+            <el-input disabled v-model="detailData.sccj" />
          </el-form-item>
          <el-form-item label="是否应急设备:">
-            <el-input disabled v-model="detailData.equipment.sfyjsb" />
+            <el-input disabled v-model="detailData.sfyjsb" />
          </el-form-item>
          <el-form-item label="是否纳入市级补助范围:">
-            <el-input disabled v-model="detailData.equipment.sfnrsjbz" />
+            <el-input disabled v-model="detailData.sfnrsjbz" />
          </el-form-item>
        </el-col>
      </el-row>
--- a/packages/screen/src/views/EquipmentManagement/editDialog.vue
+++ b/packages/screen/src/views/EquipmentManagement/editDialog.vue
@ -53,7 +53,11 @@
            <el-input v-model="form.sbxh" />
          </el-form-item>
          <el-form-item label="设备状态:">
-            <el-input v-model="form.sbzt" />
+            <el-select v-model="form.sbzt" placeholder="请选择" clearable>
+              <el-option label="完好" value="完好" />
+              <el-option label="损坏" value="损坏" />
+              <el-option label="报废" value="报废" />
+            </el-select>
          </el-form-item>
          <el-form-item label="生产厂家:">
            <el-input v-model="form.sccj" />
--- a/packages/screen/src/views/EquipmentManagement/index.js
+++ b/packages/screen/src/views/EquipmentManagement/index.js
@ -320,7 +320,7 @@ const getDetailData = async (row) => {
                model.title = `设备详情`;
                model.content = DetailDialog;
                model.props = {
-                    detailData: res.data,
+                    detailData: res.data.equipment,
                };
                model.onCancel = () => {
                    dialogType.value = '';
@ -335,9 +335,9 @@ const getDetailData = async (row) => {
            if (dialogType.value === 'edit') {
                model.title = `编辑设备`;
                model.content = EditDialog;
-                Object.assign(form, res.data);
+                Object.assign(form, res.data.equipment);
                model.props = {
-                    detailData: res.data,
+                    detailData: res.data.equipment,
                    form: form,
                };
                model.onCancel = () => {
--- a/packages/screen/src/views/EquipmentManagement/index.vue
+++ b/packages/screen/src/views/EquipmentManagement/index.vue
@ -43,6 +43,7 @@
          >
            <el-option label="完好" value="完好" />
            <el-option label="损坏" value="损坏" />
+            <el-option label="报废" value="报废" />
          </el-select>
        </div>
      </div>
--- a/packages/screen/src/views/Home.vue
+++ b/packages/screen/src/views/Home.vue
@ -1,101 +1,18 @@
 <template>
-  <div class="screen-container">
-    <header class="screen-header">
-      <h1>数据大屏</h1>
-    </header>
-
-    <div class="screen-content">
-      <div class="screen-left">
-        <div class="chart-box">
-          <h3>左侧图表1</h3>
-        </div>
-        <div class="chart-box">
-          <h3>左侧图表2</h3>
-        </div>
-      </div>
-
-      <div class="screen-center">
-        <div class="chart-box center-main">
-          <h3>中间主图表</h3>
-        </div>
-      </div>
-
-      <div class="screen-right">
-        <div class="chart-box">
-          <h3>右侧图表1</h3>
-        </div>
-        <div class="chart-box">
-          <h3>右侧图表2</h3>
-        </div>
-      </div>
-    </div>
-  </div>
+  <div></div>
 </template>
-<script>
-export default {
-  name: 'Home',
-  setup() {
-    return {}
-  }
+<script setup>
+import { useRoute, useRouter } from "vue-router";
+const route = useRoute();
+const token = route.query.token;
+const router = useRouter();
+if (token) {
+  localStorage.setItem("token", token);
+  router.replace({ path: route.path }).then(() => {
+    window.location.reload();
+  });
 }
 </script>

 <style lang="scss" scoped>
-.screen-container {
-  width: 100%;
-  height: 100vh;
-  background: #0a1e3e;
-  color: #fff;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.screen-header {
-  text-align: center;
-  margin-bottom: 20px;
-
-  h1 {
-    font-size: 36px;
-    font-weight: bold;
-    background: linear-gradient(to right, #4facfe, #00f2fe);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-}
-
-.screen-content {
-  display: flex;
-  gap: 20px;
-  height: calc(100% - 80px);
-}
-
-.screen-left,
-.screen-right {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.screen-center {
-  flex: 2;
-}
-
-.chart-box {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  padding: 20px;
-  flex: 1;
-
-  h3 {
-    margin: 0 0 15px 0;
-    font-size: 18px;
-    color: #4facfe;
-  }
-
-  &.center-main {
-    height: 100%;
-  }
-}
 </style>
--- a/packages/screen/src/views/MaterialManagement/detailDialog.vue
+++ b/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.material.wzmc" />
+            <el-input disabled v-model="detailData.wzmc" />
          </el-form-item>
          <el-form-item label="余量:">
-            <el-input disabled v-model="detailData.material.ye" />
+            <el-input disabled v-model="detailData.ye" />
          </el-form-item>
          <el-form-item label="入库日期:">
-            <el-input disabled v-model="detailData.material.rkrq" />
+            <el-input disabled v-model="detailData.rkrq" />
          </el-form-item>
          <el-form-item label="入库单位:">
-            <el-input disabled v-model="detailData.material.rkdw" />
+            <el-input disabled v-model="detailData.rkdw" />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="数量:">
-                <el-input disabled v-model="detailData.material.sl"/>
+                <el-input disabled v-model="detailData.sl"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位:">
-                <el-input disabled v-model="detailData.material.dw" /> </el-form-item
+                <el-input disabled v-model="detailData.dw" /> </el-form-item
            ></el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-form-item label="存放地点:">
-            <el-input disabled v-model="detailData.material.cfdd" />
+            <el-input disabled v-model="detailData.cfdd" />
          </el-form-item>
          <el-form-item label="负责人:">
-            <el-input disabled v-model="detailData.material.fzr" />
+            <el-input disabled v-model="detailData.fzr" />
          </el-form-item>
          <el-form-item label="联系电话:">
-            <el-input disabled v-model="detailData.material.lxdh" />
+            <el-input disabled v-model="detailData.lxdh" />
          </el-form-item>
          <el-form-item label="区县名称:">
-            <el-input disabled v-model="detailData.materialqxmc" />
+            <el-input disabled v-model="detailData.qxmc" />
          </el-form-item>
        </el-col>
      </el-row>
--- a/packages/screen/src/views/MaterialManagement/index.js
+++ b/packages/screen/src/views/MaterialManagement/index.js
@ -308,7 +308,7 @@ const getDetailData = async (row) => {
                model.title = `物资详情`;
                model.content = DetailDialog;
                model.props = {
-                    detailData: res.data,
+                    detailData: res.data.material,
                };
                model.onCancel = () => {
                    dialogType.value = '';
@ -323,9 +323,9 @@ const getDetailData = async (row) => {
            if (dialogType.value === 'edit') {
                model.title = `编辑物资`;
                model.content = EditDialog;
-                Object.assign(form, res.data);
+                Object.assign(form, res.data.material);
                model.props = {
-                    detailData: res.data,
+                    detailData: res.data.material,
                    form: form,
                };
                model.onCancel = () => {
--- a/packages/screen/src/views/ServiceStationManagePage/component/addDialog.vue
+++ b/packages/screen/src/views/ServiceStationManagePage/component/addDialog.vue
@ -0,0 +1,97 @@
+<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-input disabled v-model="yhzdata.mc" />
+      </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({
+  form: {
+    type: Object,
+    default: () => ({}),
+  },
+  getUserList: {
+    type: Function,
+    default: () => () => {},
+  },
+  yhzdata: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const ryxx = ref("");
+const loading = ref(false);
+const selectOptions = ref([]);
+// 选择人员筛选
+const remoteMethod = async (query) => {
+  if (query === "") {
+    selectOptions.value = [];
+    return [];
+  }
+  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;
+};
+
+onMounted(async () => {
+  props.form.yhzid = props.yhzdata.id;
+});
+</script>
+    
+    <style>
+</style>
--- a/packages/screen/src/views/ServiceStationManagePage/component/detailDialog.vue
+++ b/packages/screen/src/views/ServiceStationManagePage/component/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>
--- a/packages/screen/src/views/ServiceStationManagePage/component/editDialog.vue
+++ b/packages/screen/src/views/ServiceStationManagePage/component/editDialog.vue
@ -0,0 +1,45 @@
+<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: () => ({}),
+  },
+});
+</script>
+  
+  <style>
+</style>
--- a/packages/screen/src/views/ServiceStationManagePage/index.vue
+++ b/packages/screen/src/views/ServiceStationManagePage/index.vue
@ -39,69 +39,89 @@
        :onCancel="handleCancel"
        width="60%"
      >
-        <el-form
-          label-position="right"
-          label-width="auto"
-          style="overflow-y: auto; max-height: 60vh; padding-right: 50px"
+        <el-tabs
+          v-model="activeName"
+          class="demo-tabs"
+          @tab-click="handleClick"
        >
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="区县名称:" prop="qxmc">
-                <el-input disabled v-model="detailData.qxmc" />
-              </el-form-item>
-              <el-form-item label="站点类型:" prop="zdlx">
-                <el-select
-                  disabled
-                  v-model="detailData.zdlx"
-                  placeholder="请选择站点类型"
-                  :options="zdlxOptions"
-                />
-              </el-form-item>
-              <el-form-item label="路线编码:" prop="lxbm">
-                <el-input disabled v-model="detailData.lxbm" />
-              </el-form-item>
-              <el-form-item label="里程桩号:" prop="lczh">
-                <el-input disabled v-model="detailData.lczh" />
-              </el-form-item>
-              <el-form-item label="行政等级:" prop="xzdj">
-                <el-input disabled v-model="detailData.xzdj" />
-              </el-form-item>
-              <el-form-item label="机动车月交通流量:" prop="yjtll">
-                <el-input disabled v-model="detailData.yjtll" />
-              </el-form-item>
-              <el-form-item label="技术等级:" prop="jsdj">
-                <el-input disabled v-model="detailData.jsdj" />
-              </el-form-item>
-              <el-form-item label="备注:" prop="bz">
-                <el-input disabled v-model="detailData.bz" type="textarea" />
-              </el-form-item>
-            </el-col>
+          <el-tab-pane label="基本信息" name="Basic">
+            <el-form
+              label-position="right"
+              label-width="auto"
+              style="overflow-y: auto; max-height: 60vh; padding-right: 50px"
+            >
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item label="区县名称:" prop="qxmc">
+                    <el-input disabled v-model="detailData.qxmc" />
+                  </el-form-item>
+                  <el-form-item label="站点类型:" prop="zdlx">
+                    <el-select
+                      disabled
+                      v-model="detailData.zdlx"
+                      placeholder="请选择站点类型"
+                      :options="zdlxOptions"
+                    />
+                  </el-form-item>
+                  <el-form-item label="路线编码:" prop="lxbm">
+                    <el-input disabled v-model="detailData.lxbm" />
+                  </el-form-item>
+                  <el-form-item label="里程桩号:" prop="lczh">
+                    <el-input disabled v-model="detailData.lczh" />
+                  </el-form-item>
+                  <el-form-item label="行政等级:" prop="xzdj">
+                    <el-input disabled v-model="detailData.xzdj" />
+                  </el-form-item>
+                  <el-form-item label="机动车月交通流量:" prop="yjtll">
+                    <el-input disabled v-model="detailData.yjtll" />
+                  </el-form-item>
+                  <el-form-item label="技术等级:" prop="jsdj">
+                    <el-input disabled v-model="detailData.jsdj" />
+                  </el-form-item>
+                  <el-form-item label="备注:" prop="bz">
+                    <el-input
+                      disabled
+                      v-model="detailData.bz"
+                      type="textarea"
+                    />
+                  </el-form-item>
+                </el-col>

-            <el-col :span="12">
-              <el-form-item label="服务保障点具体名称:" prop="mc">
-                <el-input disabled v-model="detailData.mc" />
-              </el-form-item>
-              <el-form-item label="产权隶属单位:" prop="ssdw">
-                <el-input disabled v-model="detailData.ssdw" />
-              </el-form-item>
-              <el-form-item label="经度:" prop="jd">
-                <el-input disabled v-model="detailData.jd" />
-              </el-form-item>
-              <el-form-item label="纬度:" prop="wd">
-                <el-input disabled v-model="detailData.wd" />
-              </el-form-item>
-              <el-form-item label="充电桩根数:" prop="cdzgs">
-                <el-input disabled v-model="detailData.cdzgs" />
-              </el-form-item>
-              <el-form-item label="是否对外开放:" prop="sfdwkf">
-                <el-input disabled v-model="detailData.sfdwkf" />
-              </el-form-item>
-              <el-form-item label="对外开放的是否有如厕功能:" prop="sfdwkfrc">
-                <el-input disabled v-model="detailData.sfdwkfrc" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
+                <el-col :span="12">
+                  <el-form-item label="服务保障点具体名称:" prop="mc">
+                    <el-input disabled v-model="detailData.mc" />
+                  </el-form-item>
+                  <el-form-item label="产权隶属单位:" prop="ssdw">
+                    <el-input disabled v-model="detailData.ssdw" />
+                  </el-form-item>
+                  <el-form-item label="经度:" prop="jd">
+                    <el-input disabled v-model="detailData.jd" />
+                  </el-form-item>
+                  <el-form-item label="纬度:" prop="wd">
+                    <el-input disabled v-model="detailData.wd" />
+                  </el-form-item>
+                  <el-form-item label="充电桩根数:" prop="cdzgs">
+                    <el-input disabled v-model="detailData.cdzgs" />
+                  </el-form-item>
+                  <el-form-item label="是否对外开放:" prop="sfdwkf">
+                    <el-input disabled v-model="detailData.sfdwkf" />
+                  </el-form-item>
+                  <el-form-item
+                    label="对外开放的是否有如厕功能:"
+                    prop="sfdwkfrc"
+                  >
+                    <el-input disabled v-model="detailData.sfdwkfrc" />
+                  </el-form-item>
+                </el-col>
+              </el-row> </el-form
+          ></el-tab-pane>
+          <el-tab-pane label="人员信息" name="Person">
+            <PersonData 
+              :yhzData="detailData"
+              >
+           </PersonData>
+          </el-tab-pane>
+        </el-tabs>
      </MyDialog>
      <MyDialog
        v-model="editDialogVisible"
@ -187,6 +207,7 @@ import { useRouter, useRoute } from "vue-router";
 import { request } from "@/utils/request";
 import { Search } from "@element-plus/icons-vue";
 import MyDialog from "../../component/MyDialog";
+import PersonData from "./personData.vue";

 const tableData = ref([]);
 const detailData = ref({});
@ -541,6 +562,9 @@ const handleClickWz = (row) => {
    path: `/yhzwz/${encodeURIComponent(JSON.stringify(row))}`,
  });
 };
+
+// 当前标签
+const activeName = ref("Basic");
 </script>
  
  <style scoped>
--- a/packages/screen/src/views/ServiceStationManagePage/personData.vue
+++ b/packages/screen/src/views/ServiceStationManagePage/personData.vue
@ -0,0 +1,462 @@
+<template>
+  <div class="root">
+    <div class="event-box">
+      <div class="inline-flex">
+        <label>人员姓名:</label>
+        <el-input v-model="filterData.xm"></el-input>
+      </div>
+      <div class="inline-flex">
+        <el-button type="primary" size="large" @click="openAddModel"
+          >新增人员</el-button
+        >
+      </div>
+    </div>
+    <div class="form-box">
+      <div class="form-content">
+        <DynamicTable
+          :dataSource="yhzryList"
+          :columns="columns"
+          :autoHeight="true"
+          :pagination="pagination"
+        ></DynamicTable>
+      </div>
+    </div>
+
+    <div class="model-box">
+      <MyDialog
+        v-model="modelVisible"
+        :title="model?.title"
+        :dynamicComponent="model?.content"
+        :component-props="model?.props"
+        :onConfirm="model?.onConfirm"
+        :onCancel="model?.onCancel"
+        ref="dialogRef"
+        :width="model?.width"
+      >
+      </MyDialog>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
+import DynamicTable from "../../component/DynamicTable";
+import { request } from "@/utils/request";
+import MyDialog from "../../component/MyDialog";
+import AddDialog from "./component/addDialog.vue";
+import EditDialog from "./component/editDialog.vue";
+import DetailDialog from "./component/detailDialog.vue";
+
+const props = defineProps({
+  yhzData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// 养护站ID
+const yhzId = ref(props.yhzData.id);
+// 表格过滤条件
+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(filterData);
+  },
+}); // 表格分页
+
+// 养护站人员列表
+const yhzryList = ref([]);
+
+// 获取养护站人员详情
+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 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(filterData);
+    } else {
+      throw new Error(res.message);
+    }
+  } catch (error) {
+    ElMessage.error(error.message);
+    console.log("error", error);
+  }
+};
+
+const columns = [
+  {
+    prop: "xm",
+    label: "姓名",
+    width: 100,
+  },
+  {
+    prop: "gw",
+    label: "岗位",
+    width: 100,
+  },
+  {
+    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: "人员角色",
+    width: 150,
+    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(filterData);
+                } else {
+                  throw new Error(res.message);
+                }
+              } catch (error) {
+                ElMessage.error(error.message);
+                console.log(error);
+              }
+            },
+          },
+          () => "删除"
+        ),
+      ]),
+  },
+];
+
+// 获取养护站人员列表
+const getyhzryList = async (filterData) => {
+  try {
+    const data = {
+      yhzid: yhzId.value,
+      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") {
+      yhzryList.value = res.data.records;
+      pagination.total = res.data.total;
+    } else {
+      throw new Error(res.msg);
+    }
+  } catch (error) {
+    ElMessage.error(error.message);
+    console.log(error);
+  }
+};
+
+// 分页查询养护站
+onMounted(async () => {
+  await getyhzryList();
+});
+
+// 监听过滤条件
+watch(
+  [() => filterData],
+  ([newFilterData]) => {
+    getyhzryList(newFilterData);
+  },
+  { deep: true }
+);
+
+// 弹窗显示状态
+const modelVisible = ref(false);
+const dialogType = ref(""); // 弹窗类型
+const dialogRef = ref(null); // 弹窗实例
+
+// 弹窗
+const model = reactive({
+  title: "",
+  content: null,
+  props: {},
+  onConfirm: () => {},
+  onCancel: () => {},
+  width: "30%",
+});
+
+const INIT_FORM = {
+  xm: "",
+  sjhm: "",
+  gw: "",
+  cjsj: "",
+  yhzid: "",
+  ryjs: null, // 人员角色 1-负责人 2-普通工作人员
+  userId: "",
+}; // 表单初始值
+const form = reactive({ ...INIT_FORM }); // 表单
+
+// 根据用户信息 查询角色列表
+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 openAddModel = () => {
+  model.title = `新增人员`;
+  model.content = AddDialog;
+  model.width = "30%";
+  Object.assign(form, INIT_FORM);
+  model.props = {
+    form: form,
+    getUserList: getUserList,
+    yhzdata: props.yhzData,
+  };
+  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(filterData);
+      } else {
+        throw new Error(res.message);
+      }
+    } catch (error) {
+      ElMessage.error(error.message);
+      console.log("error", error);
+    }
+  };
+  modelVisible.value = true;
+};
+</script>
+
+<style scoped>
+.root {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+}
+.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;
+  align-items: center;
+  gap: 20px;
+  justify-content: space-between;
+}
+.form-content {
+  width: 100%;
+  height: calc(100% - 60px);
+}
+
+.model-box {
+  position: absolute;
+}
+</style>