pc端 服务站页面

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

@@ -0,0 +1,52 @@
+<template>
+  <div class="detail-container">
+    <el-card shadow="hover">
+      <el-descriptions title="基础信息" :column="3">
+        <el-descriptions-item label="服务站名称">{{
+          basicData.mc
+        }}</el-descriptions-item>
+        <el-descriptions-item label="服务站经度">{{
+          basicData.jd
+        }}</el-descriptions-item>
+        <el-descriptions-item label="服务站纬度">{{
+          basicData.wd
+        }}</el-descriptions-item>
+        <el-descriptions-item label="设备数">{{}}</el-descriptions-item>
+        <el-descriptions-item label="物资数">{{}}</el-descriptions-item>
+        <el-descriptions-item label="人员数">{{}}</el-descriptions-item>
+        <el-descriptions-item label="创建日期">{{}}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card shadow="hover">
+      <el-descriptions title="配置信息" :column="3"> </el-descriptions>
+      <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="人员信息" name="people">人员信息</el-tab-pane>
+        <el-tab-pane label="物资信息" name="second">物资信息</el-tab-pane>
+        <el-tab-pane label="设备信息" name="third">设备信息</el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+  
+  <script setup>
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
+const props = defineProps({
+  basicData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const activeTab = ref("people");
+const handleClick = (tab, event) => {
+  console.log("tab", tab, "event", event);
+};
+</script>
+  
+  <style>
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+</style>

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

@@ -1,6 +1,7 @@
 import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
 import { request } from "@/utils/request";
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import DetailDrawer from "./detailDrawer.vue";
 
 const tableData = ref([]); // 表格数据
 const filterData = reactive({
@@ -77,129 +78,159 @@ const getTableData = async (filterData) => {
     }
 };
 
-
+// 获取养护站详情
-const columns = [
+const getYhzDetail = async (row) => {
-    {
+    try {
-        prop: "mc",
+        console.log('row',toRaw(row));
-        label: "服务站名称",
+        const res = await request({
-    },
+            url: `/snow-ops-platform/yhz/getById?id=${row.id}`,
-    {
+            method: "GET",
-        prop: "sbsl",
+        });
-        label: "设备数量",
+        if (res.code === "00000") {
-        render: (row) => () =>
+            if (drawerType.value === "detail"){
-            h(
+                drawer.title = '详情'
-                ElButton,
+                drawer.props = {
-                {
+                    basicData: res.data,
-                    link: true,
+                };
-                    type: "primary",
+                drawer.onCancel = () => {
-                    onClick: () => handleClickSb(row),
+                    drawerType.value = '';
-                },
+                    drawerVisible.value = false;
-                () => row.sbsl
+                };
-            ),
+                drawer.onConfirm = () => {
-    },
+                    drawerType.value = '';
-    {
+                    drawerVisible.value = false;
-        prop: "wzsl",
+                };
-        label: "物资数量",
+                drawer.content = DetailDrawer;
-        render: (row) => () =>
+                drawerVisible.value = true;
-            h(
+            }
-                ElButton,
+        }
-                {
+    } catch (error) {
-                    link: true,
+        
-                    type: "primary",
+    }
-                    onClick: () => handleClickWz(row),
-                },
-                () => row.wzsl
-            ),
-    },
-    {
-        prop: "rysl",
-        label: "人员数量",
-    },
-    {
-        prop: "qxmc",
-        label: "区县名称",
-    },
-    {
-        label: "操作",
-        fixed: "right",
-        width: 150,
-        render: (row) => () =>
-            h("div", { class: "action-btns" }, [
-                h(
-                    ElButton,
-                    {
-                        type: "primary",
-                        link: true,
-                        onClick: async () => {
-
-                        },
-                    },
-                    () => "详情"
-                ),
-                h(
-                    ElButton,
-                    {
-                        type: "success",
-                        link: true,
-                        style: "margin-left: 10px;",
-                        onClick: async () => {
-
-                        },
-                    },
-                    () => "编辑"
-                ),
-                h(
-                    ElButton,
-                    {
-                        type: "danger",
-                        link: true,
-                        style: "margin-left: 10px;",
-                        onClick: async () => {
-                            try {
-                                await ElMessageBox.confirm("确定要删除该站点吗？", "删除确认", {
-                                    confirmButtonText: "确定",
-                                    cancelButtonText: "取消",
-                                    type: "warning",
-                                });
-                                const res = await request({
-                                    url: `/snow-ops-platform/yhz/delete`,
-                                    method: "POST",
-                                    data: {
-                                        id: row.id,
-                                    },
-                                });
-                                if (res.code === "00000") {
-                                    ElMessage.success("删除成功");
-                                    getTableData();
-                                }
-                            } catch (error) {
-                                if (error instanceof Error) {
-                                    ElMessage.error(error.message || "删除失败");
-                                }
-                            }
-                        },
-                    },
-                    () => "删除"
-                ),
-            ]),
-    },
-];
-const router = useRoute();
-const handleClickSb = (row) => {
-    router.push({
-        path: `/yhzsb/${encodeURIComponent(JSON.stringify(row))}`,
-    });
 };
-const handleClickWz = (row) => {
-    router.push({
-        path: `/yhzwz/${encodeURIComponent(JSON.stringify(row))}`,
-    });
-};
-
-
-
 export default () => {
 
+    const router = useRouter();
+    const handleClickSb = (row) => {
+        router.push({
+            path: `/yhzsb/${encodeURIComponent(JSON.stringify(row))}`,
+        });
+    };
+    const handleClickWz = (row) => {
+        router.push({
+            path: `/yhzwz/${encodeURIComponent(JSON.stringify(row))}`,
+        });
+    };
+
+    const columns = [
+        {
+            prop: "mc",
+            label: "服务站名称",
+        },
+        {
+            prop: "sbsl",
+            label: "设备数量",
+            render: (row) => () =>
+                h(
+                    ElButton,
+                    {
+                        link: true,
+                        type: "primary",
+                        onClick: () => handleClickSb(row),
+                    },
+                    () => row.sbsl
+                ),
+        },
+        {
+            prop: "wzsl",
+            label: "物资数量",
+            render: (row) => () =>
+                h(
+                    ElButton,
+                    {
+                        link: true,
+                        type: "primary",
+                        onClick: () => handleClickWz(row),
+                    },
+                    () => row.wzsl
+                ),
+        },
+        {
+            prop: "rysl",
+            label: "人员数量",
+        },
+        {
+            prop: "qxmc",
+            label: "区县名称",
+        },
+        {
+            label: "操作",
+            fixed: "right",
+            width: 150,
+            render: (row) => () =>
+                h("div", { class: "action-btns" }, [
+                    h(
+                        ElButton,
+                        {
+                            type: "primary",
+                            link: true,
+                            onClick: async () => {
+                                drawerType.value = "detail";
+                                await getYhzDetail(row);
+                            },
+                        },
+                        () => "详情"
+                    ),
+                    h(
+                        ElButton,
+                        {
+                            type: "success",
+                            link: true,
+                            style: "margin-left: 10px;",
+                            onClick: async () => {
+
+                            },
+                        },
+                        () => "编辑"
+                    ),
+                    h(
+                        ElButton,
+                        {
+                            type: "danger",
+                            link: true,
+                            style: "margin-left: 10px;",
+                            onClick: async () => {
+                                try {
+                                    await ElMessageBox.confirm("确定要删除该站点吗？", "删除确认", {
+                                        confirmButtonText: "确定",
+                                        cancelButtonText: "取消",
+                                        type: "warning",
+                                    });
+                                    const res = await request({
+                                        url: `/snow-ops-platform/yhz/delete`,
+                                        method: "POST",
+                                        data: {
+                                            id: row.id,
+                                        },
+                                    });
+                                    if (res.code === "00000") {
+                                        ElMessage.success("删除成功");
+                                        getTableData();
+                                    }
+                                } catch (error) {
+                                    if (error instanceof Error) {
+                                        ElMessage.error(error.message || "删除失败");
+                                    }
+                                }
+                            },
+                        },
+                        () => "删除"
+                    ),
+                ]),
+        },
+    ];
+
+
 
     // 监听过滤条件变化
     watch(
@@ -213,12 +244,15 @@ export default () => {
     onMounted(async () => {
         await getTableData()
     });
+
     return {
         tableData,
         filterData,
         zdlxOptions,
         pagination,
         columns,
+        handleClickSb,
+        handleClickWz,
 
         modelVisible,
         model,