tyt-admin/src/views/statistics/index.vue

<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">
        <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>
.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>