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,8 +78,51 @@ const getTableData = async (filterData) => {
     }
 };
 
+// 获取养护站详情
+const getYhzDetail = async (row) => {
+    try {
+        console.log('row',toRaw(row));
+        const res = await request({
+            url: `/snow-ops-platform/yhz/getById?id=${row.id}`,
+            method: "GET",
+        });
+        if (res.code === "00000") {
+            if (drawerType.value === "detail"){
+                drawer.title = '详情'
+                drawer.props = {
+                    basicData: res.data,
+                };
+                drawer.onCancel = () => {
+                    drawerType.value = '';
+                    drawerVisible.value = false;
+                };
+                drawer.onConfirm = () => {
+                    drawerType.value = '';
+                    drawerVisible.value = false;
+                };
+                drawer.content = DetailDrawer;
+                drawerVisible.value = true;
+            }
+        }
+    } catch (error) {
         
-const columns = [
+    }
+};
+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: "服务站名称",
@@ -131,7 +175,8 @@ const columns = [
                             type: "primary",
                             link: true,
                             onClick: async () => {
-
+                                drawerType.value = "detail";
+                                await getYhzDetail(row);
                             },
                         },
                         () => "详情"
@@ -183,24 +228,10 @@ const columns = [
                     ),
                 ]),
         },
-];
-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 () => {
-
-
     // 监听过滤条件变化
     watch(
         [() => filterData],
@@ -213,12 +244,15 @@ export default () => {
     onMounted(async () => {
         await getTableData()
     });
+
     return {
         tableData,
         filterData,
         zdlxOptions,
         pagination,
         columns,
+        handleClickSb,
+        handleClickWz,
 
         modelVisible,
         model,