|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<div class="home" :style="pageStyle">
|
|
|
<div class="use">
|
|
|
- <div class="title">我的常用</div>
|
|
|
- <el-scrollbar>
|
|
|
+ <el-segmented v-model="valueTop" :options="optionsTop" size="large" />
|
|
|
+ <el-scrollbar v-if="valueTop=='我的常用'">
|
|
|
<div class="icon-wrap">
|
|
|
<div class="icon-item" v-for="(c, index) in commonList" :key="index" @click="handleTo(c)">
|
|
|
<img
|
|
|
@@ -24,6 +24,86 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
+ <div v-if="valueTop=='院内统计'" class="statistics-panel">
|
|
|
+ <!-- 院内动态 -->
|
|
|
+ <div class="stat-row">
|
|
|
+ <div class="stat-label blue">
|
|
|
+ <Icon icon="ep:house" class="stat-icon" />
|
|
|
+ <span>院内动态</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-items">
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">总床位数:</span>
|
|
|
+ <span class="stat-value">400</span>
|
|
|
+ <span class="stat-unit">张</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">在院人数:</span>
|
|
|
+ <span class="stat-value">352</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">新收人数:</span>
|
|
|
+ <span class="stat-value">0</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">请假人数:</span>
|
|
|
+ <span class="stat-value">9</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">当天请假人数:</span>
|
|
|
+ <span class="stat-value">0</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">退院人数:</span>
|
|
|
+ <span class="stat-value">0</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 护理情况 -->
|
|
|
+ <div class="stat-row">
|
|
|
+ <div class="stat-label green">
|
|
|
+ <Icon icon="ep:first-aid-kit" class="stat-icon" />
|
|
|
+ <span>护理情况</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-items">
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">一级:</span>
|
|
|
+ <span class="stat-value">264</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">二级:</span>
|
|
|
+ <span class="stat-value">17</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">三级:</span>
|
|
|
+ <span class="stat-value">22</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">一级(专陪):</span>
|
|
|
+ <span class="stat-value">38</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">二级(专陪):</span>
|
|
|
+ <span class="stat-value">1</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <span class="stat-name">无费用:</span>
|
|
|
+ <span class="stat-value">10</span>
|
|
|
+ <span class="stat-unit">位</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<el-row class="mt-8px flow" :gutter="8" justify="space-between">
|
|
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
|
|
|
@@ -123,6 +203,8 @@ defineOptions({ name: 'Home' })
|
|
|
const { push } = useRouter()
|
|
|
const { t } = useI18n()
|
|
|
const userStore = useUserStore()
|
|
|
+const optionsTop = ['我的常用', '院内统计']
|
|
|
+const valueTop = ref('我的常用')
|
|
|
const { setWatermark } = useWatermark()
|
|
|
const loading = ref(false)
|
|
|
const processId = ref('')
|
|
|
@@ -472,6 +554,66 @@ onMounted(() => {
|
|
|
font-size: 16px;
|
|
|
color: #000000;
|
|
|
}
|
|
|
+ .statistics-panel {
|
|
|
+ margin-top: 15px;
|
|
|
+ padding: 16px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ .stat-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .stat-label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ flex-shrink: 0;
|
|
|
+ &.blue {
|
|
|
+ background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
|
|
+ }
|
|
|
+ &.green {
|
|
|
+ background: linear-gradient(135deg, #52c41a 0%, #95de64 100%);
|
|
|
+ }
|
|
|
+ .stat-icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .stat-items {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding-left: 20px;
|
|
|
+ .stat-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ .stat-name {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .stat-value {
|
|
|
+ color: #1890ff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ .stat-unit {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.icon-wrap {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(11, 1fr);
|