🎨

2025-08-23 20:44:58 +08:00 · 2023-12-22 14:17:33 +08:00 · 2023-12-22 14:17:33 +08:00 · d0b6259cbb
parent 3d5e5d8ff3
commit d0b6259cbb
4 changed files with 118 additions and 12 deletions
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@ -61,7 +61,12 @@ body {
 .f20 {
    font-size: 20px;
 }
-
+.text-row-1 {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -94,7 +94,7 @@ const total = ref(0) // 日历添加的记录提醒统计
            justify-content: space-between;

            .header-item {
-                width: calc(100% - 600px);
+                width: calc(60% - 20px);
                height: 100%;
                border: 1px solid $border-color;
                border-radius: 5px;
@ -106,7 +106,7 @@ const total = ref(0) // 日历添加的记录提醒统计
                justify-content: center;

                &~.header-item {
-                    width: 580px;
+                    width: 40%;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
@ -123,7 +123,7 @@ const total = ref(0) // 日历添加的记录提醒统计
            justify-content: space-between;

            .echart-item {
-                width: calc(100% - 600px);
+                width: calc(60% - 20px);
                height: calc(50% - 10px);
                border: 1px solid $border-color;
                border-radius: 5px;
@ -131,7 +131,7 @@ const total = ref(0) // 日历添加的记录提醒统计
                box-shadow: 1px 1px 5px $border2-color;
                
                &:nth-child(even) {
-                    width: 580px;
+                    width: 40%;
                }
                &:nth-child(n + 3) {
                    margin-top: 20px;
--- a/src/views/patients-manage/surgery-info.vue
+++ b/src/views/patients-manage/surgery-info.vue
@ -54,10 +54,17 @@
            </div>
            <div class="right-box">
                <div class="type-box">
-                    <div class="type-item" v-for="(item, index) in getFormTypes().slice(0, 10)" :key="'type-' + index"
+                    <div class="type-item text-row-1" v-for="(item, index) in getFormTypes().slice(0, 6)" :key="'type-' + index"
                        :class="{ 'active': item.name === queryParams.type }" @click="formTypeChange(item.name)">{{
                            item.name
                        }}</div>
+                    <div class="type-item" v-for="(item, index) in customFormTypes" :key="'custom-type-' + index"
+                        :class="{ 'active': item.name === queryParams.type }" @click="customFormTypeChange(item, index)">
+                        <span class="text-row-1">{{ item.name || '+' }}</span>
+                        <el-icon v-if="item.name" @click.stop="removeCustomFormType(index)">
+                            <Close />
+                        </el-icon>
+                    </div>
                    <el-select v-model="queryParams.type" filterable placeholder="搜索更多表单" @change="formTypeChange">
                        <el-option v-for="(item, index) in getFormTypes()" :key="'type-option-' + index" :label="item.name"
                            :value="item.name"></el-option>
@ -73,6 +80,13 @@
            </div>
        </div>
    </div>
+
+    <el-dialog v-model="selectFormTypesDialog" title="请选择表单" width="400px">
+        <el-select :model-value="queryParams.type" filterable placeholder="搜索更多表单" @change="addFormType">
+            <el-option v-for="(item, index) in getFormTypes()" :key="'type-option-' + index" :label="item.name"
+                :value="item.name"></el-option>
+        </el-select>
+    </el-dialog>
 </template>

 <script lang='ts' setup>
@ -88,13 +102,23 @@ const route = useRoute()

 const patients = getPatients()

+const selectFormTypesDialog = ref()
 const queryParams = ref({} as any)
 const timeActive = ref<number>(0)
+const customFormTypes = ref([] as any)
+const customFormTypeIndex = ref<number>()
 const tableData = ref([] as any)
 const patientsOption = ref([] as any)

 queryParams.value = route.query
 if (queryParams.value.code) queryData(queryParams.value)
+try {
+    customFormTypes.value = JSON.parse(localStorage.getItem("customFormTypes") || '[]')
+    while (customFormTypes.value.length < 4) {
+        customFormTypes.value.push({})
+    }
+} catch (error) { }
+

 function queryData(e: any) {
    if (!e.code) {
@ -139,9 +163,28 @@ const formTypeChange = (e: string) => {
    queryParams.value.type = e
    queryData(queryParams.value)
 }
+const customFormTypeChange = (e: any, index: number) => {
+    if (e.name) {
+        formTypeChange(e.name)
+    } else {
+        customFormTypeIndex.value = index
+        selectFormTypesDialog.value = true
+    }
+}
+const removeCustomFormType = (index: number) => {
+    customFormTypes.value[index] = {}
+    localStorage.setItem("customFormTypes", JSON.stringify(customFormTypes.value))
+}
 const tableCellFilter = ({ row, column, rowIndex, columnIndex }: any) => {
    return 'alarm-' + getDataAlarmState(row[column.label], column.label)
 }
+const addFormType = (e: any) => {
+    if (customFormTypeIndex.value !== undefined) {
+        customFormTypes.value[customFormTypeIndex.value] = { name: e }
+        localStorage.setItem("customFormTypes", JSON.stringify(customFormTypes.value))
+    }
+    selectFormTypesDialog.value = false
+}
 </script>

 <style lang='scss' scoped>
@ -249,6 +292,8 @@ const tableCellFilter = ({ row, column, rowIndex, columnIndex }: any) => {
                flex-wrap: wrap;

                .type-item {
+                    position: relative;
+                    cursor: pointer;
                    width: calc(100% / 6 - 10px);
                    height: 38px;
                    line-height: 38px;
@ -259,6 +304,7 @@ const tableCellFilter = ({ row, column, rowIndex, columnIndex }: any) => {
                    background: #f8b300;
                    border-radius: 5px;
                    margin: 0 12px 10px 0;
+                    overflow: visible;

                    &:nth-child(6) {
                        margin-right: 0;
@ -267,6 +313,15 @@ const tableCellFilter = ({ row, column, rowIndex, columnIndex }: any) => {
                    &.active {
                        background: #c77000;
                    }
+                    .el-icon {
+                        position: absolute;
+                        font-size: 16px;
+                        padding: 2px;
+                        top: -6px;
+                        right: -6px;
+                        background: #f56c6c;
+                        border-radius: 50%;
+                    }
                }

                :deep(.el-select) {
--- a/src/views/system-manage/system-home.vue
+++ b/src/views/system-manage/system-home.vue
@ -1,8 +1,21 @@
 <template>
    <div class="system-home-page">
-        <div class="left-box"></div>
+        <div class="left-box">
+            <div class="total-box block-border">
+                <span class="label"><el-icon><UserFilled /></el-icon>用户列表</span>
+                <span class="value">{{ total.user }}</span>
+            </div>
+            <div class="total-box block-border">
+                <span class="label"><el-icon><OfficeBuilding /></el-icon>合作医院列表</span>
+                <span class="value">{{ total.hospitals }}</span>
+            </div>
+            <div class="chart-total-box">
+                <div class="title">用户数据统计</div>
+                <div class="chart block-border"></div>
+            </div>
+        </div>
        <div class="right-box">
-            <div class="system-log-box">
+            <div class="system-log-box block-border">
                <div class="title-box">
                    <span class="title"><el-icon><List /></el-icon>系统日志</span>
                    <span class="more">更多</span>
@ -11,13 +24,19 @@
                    <SystemLogs />
                </div>
            </div>
+            <div class="map-box block-border"></div>
        </div>
    </div>
 </template>

 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-import SystemLogs from "@/components/system-logs.vue";
+import SystemLogs from "@/components/system-logs.vue"
+
+const total = {
+    user: 300,
+    hospitals: 29
+}

 </script>

@ -28,9 +47,34 @@ import SystemLogs from "@/components/system-logs.vue";
    padding: 20px;
    display: flex;
    justify-content: space-between;
+    .block-border {
+        border: 1px solid $border-color;
+        border-radius: 12px;
+    }
    .left-box {
        width: 670px;
        height: 100%;
+        .total-box {
+            width: 100%;
+            height: 90px;
+            margin-bottom: 30px;
+        }
+        .chart-total-box {
+            width: 100%;
+            height: calc(100% - 240px);
+            .title {
+                width: 100%;
+                height: 70px;
+                font-size: 30px;
+                font-weight: 600;
+                color: $main-color;
+                line-height: 70px;
+            }
+            .chart {
+                width: 100%;
+                height: calc(100% - 70px);
+            }
+        }
    }
    .right-box {
        width: calc(100% - 700px);
@ -39,8 +83,6 @@ import SystemLogs from "@/components/system-logs.vue";
            width: 100%;
            height: 220px;
            padding: 20px;
-            border: 1px solid $border-color;
-            border-radius: 12px;
            .title-box {
                width: 100%;
                height: 40px;
@ -81,7 +123,11 @@ import SystemLogs from "@/components/system-logs.vue";
                }
            }
        }
-        
+        .map-box {
+            width: 100%;
+            height: calc(100% - 260px);
+            margin-top: 40px;
+        }
        
    }
 }