🎨

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;

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;

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) {

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;
+        }
         
     }
 }