gg患者列表人数

chenyc

2025-07-02 3ea8754aa2da3b38cade5d2e65989c0fce03cf8f

 src/views/home/index.vue

@@ -1,7 +1,7 @@
<template>
    <div class="home-container layout-pd ">
        <div class="container">
            <div class="container-left">
            <div class="container-left" v-if="isLeftVisible">
                <div class="patTabel">
                    <el-table :data="state.filterTableData" stripe :height="state.tableHeight.left" size="default"
                        highlight-current-row @current-change="handleCurrentChange" style="width: 300px">
@@ -11,7 +11,7 @@
                                    <el-avatar shape="square"
                                        style="width: 16px; height: 16px;background-color: #ffffff;margin-right: 10px;margin-left: 10px;"
                                        fit="contain" :src="huanzheliebiao" />
                                    <div class="titleHome">患者列表</div>
                                    <div class="titleHome">患者列表 <span style="color: blue;" v-if="state.filterTableData.length">  共（{{state.filterTableData.length}}）人</span></div>
                                </div>
                                <el-input size="default" @change="getPatients" v-model="state.search" placeholder="支持模糊查询"
                                    :prefix-icon="Search" />
@@ -35,7 +35,7 @@
                    </el-table>
                </div>
            </div>
            <div class="right" style="width: 100%;">
            <div class="right" :class="{'full-width': !isLeftVisible}" style="width: 100%;">
                <div style="width: 100%;">
                    <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="患者档案" name="患者档案">
@@ -153,9 +153,11 @@
                </div>
            </div>
        </div>
        <div class="fixed-div" v-show="patientsInfo.patientName">
        <div class="fixed-div" v-show="patientsInfo.patientName" @click="toggleVisibility">
            <el-avatar :size="80" :src="patientsInfo.patientAvatarIcon" />
            <div>{{ patientsInfo.patientName }}</div>
            <el-icon size="20" v-if="isLeftVisible"><Fold /></el-icon>
            <el-icon size="20" v-else><Expand /></el-icon>
        </div>
    </div>
</template>
@@ -207,7 +209,9 @@
const fangAnRef=ref()
const suifangjiluRef=ref()
const jilubiaoRef=ref()
const isLeftVisible=ref(true)
const state = reactive({
    
    global: {
        homeChartOne: null,
        homeChartTwo: null,
@@ -227,6 +231,10 @@
    setTableHeight()
    getPatients()
})
// 定义一个方法来切换左边div的显示状态
const toggleVisibility = () => {
  isLeftVisible.value = !isLeftVisible.value;
};
const handleCurrentChange = (val: any | undefined) => {
    if (val) {
        console.log(val)
@@ -347,11 +355,14 @@

.container-left {
    width: 300px; /* 右边div的固定宽度 */
.right {
    background-color: #409EFF;
    flex-grow: 1; /* 让这个div扩展以填充可用空间 */
    margin-left: 20px; /* 如果需要的话，可以给右边的div留出一些间距 */
    transition: all 0.3s ease; /* 添加过渡效果，使宽度变化更加平滑 */
}
.right {
    flex-grow: 1; /* 让这个div扩展以填充可用空间 */
    transition: all 0.3s ease; /* 添加过渡效果，使宽度变化更加平滑 */
}
.full-width {
    width: 100%; /* 当左边div隐藏时，右边div占据全部宽度 */
}
.home-container {
    overflow: hidden;
@@ -406,7 +417,7 @@
    align-items: center;
    bottom: 10px;
    right: 30px;
    width: 200px;
    width: 220px;
    height: 100px;
    color: rgb(16, 3, 3);
    padding: 10px;
@@ -418,5 +429,13 @@
        font-size: 20px;
    }
}
.el-tabs__nav-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 确保在 iOS 上平滑滚动 */
}

.el-tabs__item {
  cursor: pointer;
  user-select: none;
}
</style>