From 1c77a105b4a333c513660e6124a843dff5b0ea2b Mon Sep 17 00:00:00 2001
From: chenhaizhao <2291973799@qq.com>
Date: Tue, 3 Feb 2026 15:27:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=88=86=E6=9E=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91=EF=BC=8C=E5=92=8C=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableBox/index.vue |  29 ++--
 src/views/device/index.vue        |  60 ++++----
 src/views/overview/index.vue      |  64 +++++----
 src/views/statistics/index.vue    | 225 +++++++++++++++++++++++++++++-
 src/views/surgery/index.vue       |   4 -
 5 files changed, 311 insertions(+), 71 deletions(-)

diff --git a/src/components/TableBox/index.vue b/src/components/TableBox/index.vue
index 3b6be7a..feea8cc 100644
--- a/src/components/TableBox/index.vue
+++ b/src/components/TableBox/index.vue
@@ -5,16 +5,20 @@ const props = defineProps<{
 
 </script>
 <template>
-    <div class="table box_shadow">
-        <h3>
-            <slot name="header"></slot>
-        </h3>
-        <div class="main">
-            <slot></slot>
-        </div>
-        <div class="page">
-            <el-pagination background :total="props.total" />
-        </div>
+    <div class="table">
+        <el-card>
+            <template #header>
+                <h3>
+                    <slot name="header"></slot>
+                </h3>
+            </template>
+            <div class="main">
+                <slot></slot>
+            </div>
+            <div class="page">
+                <el-pagination background :total="props.total" />
+            </div>
+        </el-card>
     </div>
 </template>
 <style scoped>
@@ -25,17 +29,14 @@ const props = defineProps<{
         display: flex;
         justify-content: space-between;
         font-weight: 100;
-        padding: 20px;
-        border-bottom: 1px solid #ddd;
     }
 
     .main {
-        padding: 0 10px;
         width: 100%;
     }
 
     .page {
-        padding: 20px;
+        margin-top: 20px;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/device/index.vue b/src/views/device/index.vue
index 969e259..1f4696e 100644
--- a/src/views/device/index.vue
+++ b/src/views/device/index.vue
@@ -112,23 +112,35 @@ onMounted(() => {
 </script>
 <template>
     <div class="data">
-        <ul>
-            <li class="box_shadow" v-for="item in titleList">
-                <i :class="['iconfont', item.icon]"></i>
-                <div>
-                    <h2>{{ item.count }}</h2>
-                    <text>{{ item.title }}</text>
-                </div>
-            </li>
-        </ul>
-        <div class="chart">
-            <div class="box_shadow">
-                <h3>设备品牌使用统计</h3>
-                <div ref="brandDom"></div>
+        <div class="info">
+            <div v-for="item in titleList">
+                <el-card>
+                    <div class="count">
+                        <i :class="['iconfont', item.icon]"></i>
+                        <div>
+                            <h2>{{ item.count }}</h2>
+                            <text>{{ item.title }}</text>
+                        </div>
+                    </div>
+                </el-card>
             </div>
-            <div class="box_shadow">
-                <h3>设备型号分布</h3>
-                <div ref="typeDom"></div>
+        </div>
+        <div class="chart">
+            <div>
+                <el-card>
+                    <template #headher>
+                        <h3>手术类型分布</h3>
+                    </template>
+                    <div class="dom" ref="typeDom"></div>
+                </el-card>
+            </div>
+            <div>
+                <el-card>
+                    <template #headher>
+                        <h3>医生手术统计</h3>
+                    </template>
+                    <div class="dom" ref="brandDom"></div>
+                </el-card>
             </div>
         </div>
         <TableBox :total="100">
@@ -203,16 +215,18 @@ onMounted(() => {
         border-bottom: 1px solid #ddd;
     }
 
-    ul {
+    .info {
         display: flex;
         justify-content: space-between;
         gap: 20px;
 
-        li {
-            display: flex;
+        >div {
             flex: 1;
-            height: 120px;
-            padding: 20px;
+        }
+
+        .count {
+            display: flex;
+            padding: 10px 0;
             align-self: center;
             gap: 15px;
 
@@ -238,10 +252,8 @@ onMounted(() => {
 
         >div {
             flex: 1;
-            height: 400px;
 
-
-            >div {
+            .dom {
                 width: 100%;
                 height: 330px;
             }
diff --git a/src/views/overview/index.vue b/src/views/overview/index.vue
index 3703c25..e3b57bb 100644
--- a/src/views/overview/index.vue
+++ b/src/views/overview/index.vue
@@ -153,23 +153,35 @@ onMounted(() => {
 </script>
 <template>
     <div class="data">
-        <ul>
-            <li class="box_shadow" v-for="item in titleList">
-                <i :class="['iconfont', item.icon]"></i>
-                <div>
-                    <h2>{{ item.count }}</h2>
-                    <text>{{ item.title }}</text>
-                </div>
-            </li>
-        </ul>
-        <div class="chart">
-            <div class="box_shadow">
-                <h3>手术类型分布</h3>
-                <div ref="pieDom"></div>
+        <div class="info">
+            <div v-for="item in titleList">
+                <el-card>
+                    <div class="count">
+                        <i :class="['iconfont', item.icon]"></i>
+                        <div>
+                            <h2>{{ item.count }}</h2>
+                            <text>{{ item.title }}</text>
+                        </div>
+                    </div>
+                </el-card>
             </div>
-            <div class="box_shadow">
-                <h3>医生手术统计</h3>
-                <div ref="barDom"></div>
+        </div>
+        <div class="chart">
+            <div>
+                <el-card>
+                    <template #headher>
+                        <h3>手术类型分布</h3>
+                    </template>
+                    <div class="dom" ref="pieDom"></div>
+                </el-card>
+            </div>
+            <div>
+                <el-card>
+                    <template #headher>
+                        <h3>医生手术统计</h3>
+                    </template>
+                    <div class="dom" ref="barDom"></div>
+                </el-card>
             </div>
         </div>
         <TableBox :total="100">
@@ -200,20 +212,22 @@ onMounted(() => {
 .data {
     h3 {
         font-weight: 100;
-        padding: 20px;
-        border-bottom: 1px solid #ddd;
+        /* padding: 20px;
+        border-bottom: 1px solid #ddd; */
     }
 
-    ul {
+    .info {
         display: flex;
         justify-content: space-between;
         gap: 20px;
 
-        li {
-            display: flex;
+        >div {
             flex: 1;
-            height: 120px;
-            padding: 20px;
+        }
+
+        .count {
+            display: flex;
+            padding: 10px 0;
             align-self: center;
             gap: 15px;
 
@@ -239,10 +253,8 @@ onMounted(() => {
 
         >div {
             flex: 1;
-            height: 400px;
 
-
-            >div {
+            .dom {
                 width: 100%;
                 height: 330px;
             }
diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue
index de2f13b..8f86602 100644
--- a/src/views/statistics/index.vue
+++ b/src/views/statistics/index.vue
@@ -1,7 +1,226 @@
-<script setup lang='ts'></script>
+<script setup lang='ts'>
+import useCurrentInstance from '@/hooks/useCurrentInstance';
+import { onMounted, ref } from 'vue';
+
+const options = ref([
+    {
+        label: '最近7天',
+        value: 7
+    },
+    {
+        label: '最近30天',
+        value: 30
+    },
+    {
+        label: '最近90天',
+        value: 90
+    },
+    {
+        label: '全部时间',
+        value: 0
+    },
+])
+const { globalProperties } = useCurrentInstance()
+const time = ref(90)
+const numDom = ref<HTMLDivElement | null>(null)
+const typeDom = ref<HTMLDivElement | null>(null)
+const wayDom = ref<HTMLDivElement | null>(null)
+const surgeryDom = ref<HTMLDivElement | null>(null)
+const initialDom = ref<HTMLDivElement | null>(null)
+const nowDom = ref<HTMLDivElement | null>(null)
+const rederNumDom = () => {
+    const chart = globalProperties.$echarts.init(numDom.value)
+    const option = {
+        grid: {
+            left: "5%",
+            right: "5%",
+            top: 0
+        },
+        xAxis: {
+            type: 'category',
+            data: ['2026/07/08', '2026/07/08', '2026/07/08', '2026/07/08'],
+            axisLabel: {
+                rotate: 50
+            }
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [820, 932, 901, 934],
+                type: 'line',
+                smooth: true
+            }
+        ]
+    };
+    chart.setOption(option)
+}
+const redertypeDom = () => {
+    const chart = globalProperties.$echarts.init(typeDom.value)
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            formatter: '{b} : {c} 台手术',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: "rgba(200, 200, 200, .1)"
+                }
+            }
+        },
+        grid: {
+            left: '5%',
+            bottom: '5%',
+            containLabel: true
+        },
+        color: {
+            type: 'linear',
+            y2: 1,
+            colorStops: [{
+                offset: '0', color: '#3063b0' // 0% 处的颜色
+            }, {
+                offset: '1', color: '#519ef8' // 100% 处的颜色
+            }],
+        },
+        xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [120, 200, 150, 80, 70],
+                type: 'bar'
+            }
+        ]
+    };
+    chart.setOption(option)
+}
+onMounted(() => {
+    rederNumDom()
+    redertypeDom()
+})
+</script>
 <template>
     <div class="statistics">
-        <h1>统计分析</h1>
+        <div class="top">
+            <el-card>
+                <h2>统计分析</h2>
+                <el-select v-model="time" placeholder="Select" style="width: 240px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+                <p>当前统计时间范围：{{ time === 0 ? '全部时间' : `最近${time}天` }} | 统计数据：{{ time }}台手术</p>
+            </el-card>
+        </div>
+        <div class="number">
+            <el-card>
+                <template #header>
+                    <h3>手术数量趋势</h3>
+                </template>
+                <div class="dom" ref="numDom"></div>
+            </el-card>
+        </div>
+        <div class="type">
+            <el-card>
+                <template #header>
+                    <h3>脑积水类型分布</h3>
+                </template>
+                <div class="dom" ref="typeDom"></div>
+            </el-card>
+            <el-card>
+                <template #header>
+                    <h3>分流方式分布</h3>
+                </template>
+                <div class="dom" ref="wayDom"></div>
+            </el-card>
+        </div>
+        <div class="number">
+            <el-card>
+                <template #header>
+                    <h3>医生手术统计</h3>
+                </template>
+                <div class="dom" ref="surgeryDom"></div>
+            </el-card>
+        </div>
+        <div class="type">
+            <el-card>
+                <template #header>
+                    <h3>初始压力分布</h3>
+                </template>
+                <div class="dom" ref="initialDom"></div>
+            </el-card>
+            <el-card>
+                <template #header>
+                    <h3>当前压力分布</h3>
+                </template>
+                <div class="dom" ref="nowDom"></div>
+            </el-card>
+        </div>
+        <div>
+            <TableBox :total="100">
+                <template #header>
+                    最近手术记录 <el-button size="small" type="primary">查看全部</el-button>
+                </template>
+                <el-table stripe>
+                    <el-table-column prop="date" label="品牌" width="120" />
+                    <el-table-column prop="name" label="型号" width="150" />
+                    <el-table-column prop="name" label="设备名称" width="150" />
+                    <el-table-column prop="name" label="设备类型" />
+                    <el-table-column prop="name" label="使用次数" width="150" />
+                    <el-table-column prop="name" label="最近使用" width="150" />
+                    <el-table-column prop="name" label="平均初始压力" width="150" />
+                    <el-table-column label="name" width="180">
+                        <template #default="scope">
+                            <el-tag>{{ scope.row.name }}</el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column fixed="right" label="操作" align="center" width="150">
+                        <template #default>
+                            <el-button link type="primary" size="small">
+                                查看详情
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </TableBox>
+        </div>
     </div>
 </template>
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+.statistics {
+    >div {
+        margin-bottom: 20px;
+
+        h3 {
+            font-weight: 400;
+        }
+    }
+
+    .dom {
+        width: 100%;
+        height: 300px;
+    }
+
+    .type {
+        display: flex;
+        gap: 20px;
+
+        >div {
+            flex: 1;
+        }
+    }
+
+    .top {
+        h2 {
+            margin-bottom: 5px;
+        }
+
+        p {
+            margin-top: 5px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/surgery/index.vue b/src/views/surgery/index.vue
index b0697d9..a02af61 100644
--- a/src/views/surgery/index.vue
+++ b/src/views/surgery/index.vue
@@ -233,10 +233,6 @@ const openDialog = () => {
 }
 
 .surgery {
-
-    /* .form {
-        padding-top: 20px;
-    } */
     .basic_info {
         ul {
             border: 1px solid #ebeef5;