统计分析页面开发，和页面调整
This commit is contained in:
parent
3552e29a98
commit
1c77a105b4
@ -5,16 +5,20 @@ const props = defineProps<{
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="table box_shadow">
|
<div class="table">
|
||||||
<h3>
|
<el-card>
|
||||||
<slot name="header"></slot>
|
<template #header>
|
||||||
</h3>
|
<h3>
|
||||||
<div class="main">
|
<slot name="header"></slot>
|
||||||
<slot></slot>
|
</h3>
|
||||||
</div>
|
</template>
|
||||||
<div class="page">
|
<div class="main">
|
||||||
<el-pagination background :total="props.total" />
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<el-pagination background :total="props.total" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -25,17 +29,14 @@ const props = defineProps<{
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
padding: 20px;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
padding: 0 10px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
padding: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -112,23 +112,35 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<ul>
|
<div class="info">
|
||||||
<li class="box_shadow" v-for="item in titleList">
|
<div v-for="item in titleList">
|
||||||
<i :class="['iconfont', item.icon]"></i>
|
<el-card>
|
||||||
<div>
|
<div class="count">
|
||||||
<h2>{{ item.count }}</h2>
|
<i :class="['iconfont', item.icon]"></i>
|
||||||
<text>{{ item.title }}</text>
|
<div>
|
||||||
</div>
|
<h2>{{ item.count }}</h2>
|
||||||
</li>
|
<text>{{ item.title }}</text>
|
||||||
</ul>
|
</div>
|
||||||
<div class="chart">
|
</div>
|
||||||
<div class="box_shadow">
|
</el-card>
|
||||||
<h3>设备品牌使用统计</h3>
|
|
||||||
<div ref="brandDom"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="box_shadow">
|
</div>
|
||||||
<h3>设备型号分布</h3>
|
<div class="chart">
|
||||||
<div ref="typeDom"></div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<TableBox :total="100">
|
<TableBox :total="100">
|
||||||
@ -203,16 +215,18 @@ onMounted(() => {
|
|||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
.info {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
li {
|
>div {
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 120px;
|
}
|
||||||
padding: 20px;
|
|
||||||
|
.count {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 0;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
||||||
@ -238,10 +252,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
>div {
|
>div {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 400px;
|
|
||||||
|
|
||||||
|
.dom {
|
||||||
>div {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 330px;
|
height: 330px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -153,23 +153,35 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<ul>
|
<div class="info">
|
||||||
<li class="box_shadow" v-for="item in titleList">
|
<div v-for="item in titleList">
|
||||||
<i :class="['iconfont', item.icon]"></i>
|
<el-card>
|
||||||
<div>
|
<div class="count">
|
||||||
<h2>{{ item.count }}</h2>
|
<i :class="['iconfont', item.icon]"></i>
|
||||||
<text>{{ item.title }}</text>
|
<div>
|
||||||
</div>
|
<h2>{{ item.count }}</h2>
|
||||||
</li>
|
<text>{{ item.title }}</text>
|
||||||
</ul>
|
</div>
|
||||||
<div class="chart">
|
</div>
|
||||||
<div class="box_shadow">
|
</el-card>
|
||||||
<h3>手术类型分布</h3>
|
|
||||||
<div ref="pieDom"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="box_shadow">
|
</div>
|
||||||
<h3>医生手术统计</h3>
|
<div class="chart">
|
||||||
<div ref="barDom"></div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<TableBox :total="100">
|
<TableBox :total="100">
|
||||||
@ -200,20 +212,22 @@ onMounted(() => {
|
|||||||
.data {
|
.data {
|
||||||
h3 {
|
h3 {
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
padding: 20px;
|
/* padding: 20px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd; */
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
.info {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
li {
|
>div {
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 120px;
|
}
|
||||||
padding: 20px;
|
|
||||||
|
.count {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 0;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
||||||
@ -239,10 +253,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
>div {
|
>div {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 400px;
|
|
||||||
|
|
||||||
|
.dom {
|
||||||
>div {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 330px;
|
height: 330px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
<template>
|
||||||
<div class="statistics">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped></style>
|
<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>
|
||||||
@ -233,10 +233,6 @@ const openDialog = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.surgery {
|
.surgery {
|
||||||
|
|
||||||
/* .form {
|
|
||||||
padding-top: 20px;
|
|
||||||
} */
|
|
||||||
.basic_info {
|
.basic_info {
|
||||||
ul {
|
ul {
|
||||||
border: 1px solid #ebeef5;
|
border: 1px solid #ebeef5;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user