🚧

src/assets/css/custom-element.scss

@@ -1,9 +1,16 @@
+.el-input__wrapper.is-focus {
+    box-shadow: 0 0 0 1px $main-color inset;
+}
 .el-select-dropdown__item.selected {
     color: $main-color;
 }
 
 .el-select {
-    --el-select-input-focus-border-color: $main-color;
+    --el-select-input-focus-border-color: var(--main-color);
+    width: 100%;
+}
+.el-input.el-date-editor {
+    width: 100%;
 }
 
 .el-radio {
@@ -11,6 +18,7 @@
         border-color: $main-color;
         background: $main-color;
     }
+
     .el-radio__input.is-checked+.el-radio__label {
         color: $main-color;
     }
@@ -21,15 +29,22 @@
     border-color: $main-color;
     opacity: 1;
     transition: all .6;
-    &:hover, &:active {
+
+    &:hover,
+    &:active {
         opacity: .7;
         transition: all .6;
     }
+
     &:focus {
         opacity: .9;
         transition: all .6;
     }
 }
+.el-form-item {
+    margin-bottom: 25px;
+}
+
 .el-dropdown-menu__item:not(.is-disabled):focus {
     background-color: rgba($main-color, .1);
     color: $main-color;
@@ -37,15 +52,19 @@
 
 .el-dialog {
     .el-dialog__header {
-
+        padding: 30px 30px 0 30px;
-        .el-dialog__headerbtn:focus .el-dialog__close,
+        .el-dialog__headerbtn {
-        .el-dialog__headerbtn:hover .el-dialog__close {
+            top: 20px;
-            color: $main-color;
+            right: 20px;
         }
     }
-
+    .el-dialog__title {
+        color: $main-color;
+        font-weight: 600;
+        font-size: 20px;
+    }
     .el-dialog__body {
-        padding: 10px 20px;
+        padding: 30px 50px 50px 50px;
     }
 
     .el-button {
@@ -72,3 +91,47 @@
     }
 
 }
+
+// 自定义月份下拉窗
+.week-calendar-picker {
+    .el-date-picker {
+        width: 260px;
+        span:hover {
+            color: $main-color;
+        }
+        .el-date-picker__header {
+            padding-bottom: 0;
+            border-bottom: 0;
+            .el-picker-panel__icon-btn {
+                margin-top: 0;
+            }
+        }
+        .el-picker-panel__content {
+            width: 100%;
+            margin: 0;
+            padding: 10px;
+        }
+
+        .el-month-table td, .el-year-table td {
+            padding: 0;
+            &.today .cell {
+                color: $main-color;
+            }
+            &.current:not(.disabled) .cell {
+                color: white;
+                background: $main-color;
+                border-radius: 5px;
+            }
+            div {
+                height: 30px;
+                padding: 0;
+
+                .cell {
+                    width: 46px;
+                    height: 30px;
+                    line-height: 30px;
+                }
+            }
+        }
+    }
+}

src/assets/css/global.scss

@@ -29,7 +29,6 @@ body {
 
 [class^='icon-'] {
     font-family: "iconfont" !important;
-    font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

src/assets/css/variable.scss

@@ -1,3 +1,8 @@
+:root {
+    --main-color: #006080;
+    --el-color-primary: var(--main-color);
+    --el-font-size-base: 16px;
+}
 $main-color: #006080;
 $border-color: #EBEEF5;
 $text-color: #303133;

src/assets/font/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6eb;</span>
+                <div class="name">预约</div>
+                <div class="code-name">&amp;#xe6eb;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe6e3;</span>
                 <div class="name">users 用户组</div>
@@ -120,9 +126,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1702606581584') format('woff2'),
+  src: url('iconfont.woff2?t=1702710850882') format('woff2'),
-       url('iconfont.woff?t=1702606581584') format('woff'),
+       url('iconfont.woff?t=1702710850882') format('woff'),
-       url('iconfont.ttf?t=1702606581584') format('truetype');
+       url('iconfont.ttf?t=1702710850882') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -148,6 +154,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-RectangleCopy"></span>
+            <div class="name">
+              预约
+            </div>
+            <div class="code-name">.icon-RectangleCopy
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-users"></span>
             <div class="name">
@@ -247,6 +262,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-RectangleCopy"></use>
+                </svg>
+                <div class="name">预约</div>
+                <div class="code-name">#icon-RectangleCopy</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-users"></use>

src/assets/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4373116 */
-  src: url('iconfont.woff2?t=1702606581584') format('woff2'),
+  src: url('iconfont.woff2?t=1702710850882') format('woff2'),
-       url('iconfont.woff?t=1702606581584') format('woff'),
+       url('iconfont.woff?t=1702710850882') format('woff'),
-       url('iconfont.ttf?t=1702606581584') format('truetype');
+       url('iconfont.ttf?t=1702710850882') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-RectangleCopy:before {
+  content: "\e6eb";
+}
+
 .icon-users:before {
   content: "\e6e3";
 }

src/assets/font/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "7733536",
+      "name": "预约",
+      "font_class": "RectangleCopy",
+      "unicode": "e6eb",
+      "unicode_decimal": 59115
+    },
     {
       "icon_id": "8474410",
       "name": "users 用户组",

src/utils/date-util.ts

@@ -25,7 +25,7 @@ export function dateFormater(formater: string, time?: any) {
  * @param {*} time 
  * @returns 
  */
-export function getMonthDays(time) {
+export function getMonthDays(time: any) {
     if (!time) time = new Date();
     const now = new Date(time);
     const year = now.getFullYear();
@@ -53,3 +53,19 @@ export function getFirstDayOfWeek(date: Date, i: number) {
     const day = date.getDay() || 7;
     return new Date(date.getFullYear(), date.getMonth(), date.getDate() + i - day);
 }
+
+/**
+ * 当前时间加减天数
+ * @returns
+ */
+export function getDays(date: any, days: number) {
+    if (date) {
+        if (!(date instanceof Date)) {
+            date = date.replace(/-/g, '/');
+            date = new Date(date);
+        }
+
+        const time = date.setDate(date.getDate() + days); // 天数
+        return new Date(time);
+    }
+}

src/views/home/home.vue

@@ -8,7 +8,9 @@
                         <span class="text2-color f14">{{ userInfo.permissions }}</span>
                     </div>
                     <div class="header-item">
-                        <el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;"><Calendar /></el-icon>
+                        <el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;">
+                            <Calendar />
+                        </el-icon>
                         <div>
                             <p class="text1-color f14">待办任务</p>
                             <p class="main-color f20">{{ total }}</p>
@@ -16,16 +18,26 @@
                     </div>
                 </div>
                 <div class="echart-box">
-                    <div class="echart-item move_2"><NumberChart/></div>
+                    <div class="echart-item move_2">
-                    <div class="echart-item move_4"><TimeChart/></div>
+                        <NumberChart />
+                    </div>
+                    <div class="echart-item move_4">
+                        <TimeChart />
+                    </div>
                 </div>
             </div>
             <div class="right-content">
                 <div class="week-calendar">
-
+                    <WeekCalendar />
                 </div>
-                <div class="system-logs">
+                <div class="system-logs move_2">
-                    <SystemLogs/>
+                    <div class="title">
+                        <span>系统日志</span>
+                        <span class="f14" style="cursor: pointer;" @click="router.push('./logs-manage')">更多</span>
+                    </div>
+                    <div class="content move_2">
+                        <SystemLogs />
+                    </div>
                 </div>
             </div>
         </div>
@@ -34,11 +46,14 @@
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { useLoginStore } from '@/stores/user-info-store'
 import NumberChart from "./number-chart.vue";
 import TimeChart from "./time-chart.vue";
+import WeekCalendar from "./week-calendar.vue";
 import SystemLogs from "@/components/system-logs.vue";
 
+const router = useRouter()
 const userInfo = useLoginStore().getlogin()
 
 const total = ref(0) // 日历添加的记录提醒统计
@@ -63,11 +78,13 @@ const total = ref(0) // 日历添加的记录提醒统计
     .left-content {
         width: calc(100% - 550px);
         height: 100%;
+
         .header-box {
             width: 100%;
             height: 140px;
             display: flex;
             justify-content: space-between;
+
             .header-item {
                 width: calc(50% - 10px);
                 height: 100%;
@@ -78,17 +95,20 @@ const total = ref(0) // 日历添加的记录提醒统计
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
-                & ~ .header-item {
+
+                &~.header-item {
                     flex-direction: row;
                     justify-content: flex-start;
                     align-items: center;
                 }
             }
         }
+
         .echart-box {
             width: 100%;
             height: calc(100% - 160px);
             margin-top: 20px;
+
             .echart-item {
                 width: 100%;
                 height: calc(50% - 20px);
@@ -100,5 +120,34 @@ const total = ref(0) // 日历添加的记录提醒统计
     .right-content {
         width: 530px;
         height: 100%;
+        .week-calendar {
+            width: 100%;
+            height: 50%;
+        }
+        .system-logs {
+            width: 100%;
+            height: calc(50% - 20px);
+            margin-top: 20px;
+            overflow: hidden;
+
+            .title {
+                width: 100%;
+                height: 40px;
+                padding: 0 20px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .content {
+                width: 100%;
+                height: calc(100% - 50px);
+                margin-top: 10px;
+                border: 1px solid $border-color;
+                padding: 30px;
+                overflow-x: hidden;
+                overflow-y: auto;
+            }
+        }
     }
 }</style>

src/views/home/record-form.vue

@@ -0,0 +1,137 @@
+<template>
+    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
+        <el-form-item label="标题" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+            <el-select v-model="formData.type" placeholder="请选择类型">
+                <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="state" placeholder="请选择状态">
+            <el-select v-model="formData.state">
+                <el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </el-form-item>
+        <el-row>
+            <el-col :span="12">
+                <el-form-item label="日期" prop="date">
+                    <el-date-picker v-model="formData.date" type="date" placeholder="请输入日期" />
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="时间" prop="time">
+                    <el-time-picker v-model="formData.time" placeholder="请输入时间" />
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <el-form-item label="内容" prop="content">
+            <el-input v-model="formData.content" type="textarea" :rows="10" placeholder="请输入内容"></el-input>
+        </el-form-item>
+        <div style="text-align: right;" >
+            <el-button v-if="formData.isSaveBtn" class="f18" type="primary" @click="saveData">保存</el-button>
+            <el-button v-if="formData.isRemoveBtn" class="f18" @click="removeData">删除</el-button>
+        </div>
+    </el-form>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const emit = defineEmits(['close'])
+
+const typeOption = [
+    { label: '手术', value: '手术' },
+    { label: '会议', value: '会议' },
+]
+const stateOption = [
+    { label: '已处理', value: '已处理' },
+    { label: '未处理', value: '未处理' },
+]
+const rules = reactive({
+    title: [
+        { required: true, message: '请输入标题', trigger: 'blur' },
+    ],
+    type: [
+        { required: true, message: '请选择类型', trigger: 'blur' },
+    ],
+    state: [
+        { required: true, message: '请选中状态', trigger: 'blur' },
+    ],
+    date: [
+        { required: true, message: '请输入日期', trigger: 'blur' },
+    ],
+    time: [
+        { required: true, message: '请输入时间', trigger: 'blur' },
+    ],
+    content: [
+        { required: true, message: '请输入内容', trigger: 'blur' },
+    ]
+})
+
+const formData = ref({
+    id: '',
+    title: '',
+    type: '',
+    state: '',
+    date: '',
+    time: '',
+    content: '',
+    isSaveBtn: true,
+    isRemoveBtn: true
+})
+
+
+onMounted(() => {
+    formData.value = {
+        id: '',
+        title: '',
+        type: '',
+        state: '',
+        date: '',
+        time: '',
+        content: '',
+        isSaveBtn: true,
+        isRemoveBtn: true
+    }
+})
+
+defineExpose({
+    formData,
+    resetData,
+})
+function close() {
+    emit('close')
+}
+function resetData() {
+    Object.assign(formData.value, {
+        id: '',
+        title: '',
+        type: '',
+        state: '',
+        date: '',
+        time: '',
+        content: ''
+    })
+}
+const saveData = () => {
+    ElMessage.success('保存成功！')
+    close()
+}
+const removeData = () => {
+    ElMessageBox.confirm(
+        '是否确认删除？',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    ).then(() => {
+        ElMessage.success('删除成功！')
+        close()
+    }).catch(() => { })
+}
+</script>
+
+<style lang='scss' scoped></style>

src/views/home/week-calendar.vue

@@ -0,0 +1,230 @@
+<template>
+    <div class="week-calendar-part">
+        <div class="header-box">
+            <el-icon @click="setWeek('up')">
+                <ArrowLeft />
+            </el-icon>
+            <div class="date-block">
+                <span @click="handleOpen">{{ formatDate(month) }}</span>
+                <el-date-picker ref="datePicker" popper-class="week-calendar-picker" class="month-date-pick" v-model="month"
+                    type="month" @change="setWeek()" />
+            </div>
+            <el-icon @click="setWeek('down')">
+                <ArrowRight />
+            </el-icon>
+        </div>
+        <div class="week-box">
+            <table>
+                <tr class="text1-color">
+                    <th v-for="item in weekEn" :key="item">{{ item }}</th>
+                </tr>
+                <tr v-if="week.length > 0" class="swing_flip_1">
+                    <td v-for="item in week" :key="item"
+                        :class="{ 'record-mark': record.some((e: any) => new Date(e.time).getDate() === item.getDate()) }">
+                        <span :class="{
+                            'text2-color': item.getDate() > week[6].getDate()
+                        }" @click="addRecord(item)">{{ dateFormater('dd', item) }}</span>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div v-if="week.length > 0" class="record-box move_2">
+            <div class="record-item" v-for="(item, index) in record" :key="'record-' + index">
+                <div class="icon-box">
+                    <i class="icon-RectangleCopy"></i>
+                </div>
+                <div class="text-box">
+                    <p class="main-color" style="font-weight: 600;cursor: pointer;" @click="viewRecord(item)">{{ item.title}}</p>
+                    <p p class=" text2-color font14">{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</p>
+                </div>
+            </div>
+        </div>
+
+        <el-dialog v-model="isRecordDialog" title="详情">
+            <RecordForm ref="recordFormRef" @close="isRecordDialog = false" />
+        </el-dialog>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import RecordForm from './record-form.vue';
+import { dateFormater, getFirstDayOfWeek, getDays } from '@/utils/date-util';
+
+
+const monthEn = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
+const weekEn = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+
+const datePicker = ref()
+const recordFormRef = ref()
+const isRecordDialog = ref(false)
+const month = ref(new Date())
+const week = ref([] as any)
+const record = ref([] as any)
+
+setWeek()
+
+function formatDate(date: any) {
+    return monthEn[new Date(date).getMonth()] + '月 ' + new Date(date).getFullYear()
+}
+function setWeek(type?: 'up' | 'down') {
+    const date = (type && getDays(month.value, type === 'up' ? -7 : 7)) || month.value
+    week.value = []
+    record.value = []
+    setTimeout(() => {
+        for (let i = 0; i < 7; i++) {
+            week.value.push(getFirstDayOfWeek(date, i + 1))
+        }
+        record.value = [
+            {
+                id: '1',
+                title: '月度会议',
+                type: '',
+                state: '',
+                date: getFirstDayOfWeek(date, 1),
+                time: new Date('2023/12/16 16:15:00'),
+                content: '测试测试'
+            },
+            {
+                id: '2',
+                title: '手术提醒',
+                type: '',
+                state: '',
+                date: getFirstDayOfWeek(date, 4),
+                time: new Date('2023/12/16 16:15:00'),
+                content: '测试测试'
+            }
+        ]
+    }, 0)
+}
+
+const handleOpen = () => {
+    datePicker.value.handleOpen()
+}
+const addRecord = (e: Date) => {
+    isRecordDialog.value = true
+    setTimeout(() => {
+        recordFormRef.value.resetData()
+        recordFormRef.value.formData.date = e
+        recordFormRef.value.formData.isRemoveBtn = false
+    }, 0)
+}
+const viewRecord = (e: any) => {
+    isRecordDialog.value = true
+    setTimeout(() => {
+        recordFormRef.value.resetData()
+        recordFormRef.value.formData = Object.assign({}, recordFormRef.value.formData, e)
+        recordFormRef.value.formData.isRemoveBtn = true
+        console.log(recordFormRef.value.formData)
+    }, 0)
+}
+</script>
+
+<style lang='scss' scoped>
+.week-calendar-part {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .header-box {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .el-icon {
+            cursor: pointer;
+        }
+
+        .date-block {
+            position: relative;
+
+            &>span {
+                cursor: pointer;
+            }
+
+            :deep(.month-date-pick) {
+                position: absolute;
+                width: 0;
+                height: 0;
+                bottom: 0;
+                left: 50%;
+                overflow: hidden;
+            }
+        }
+    }
+
+    .week-box {
+        width: 100%;
+        height: 80px;
+        border-top: 1px solid $border-color;
+
+        table {
+            width: 100%;
+            height: 80px;
+            text-align: center;
+
+            tr {
+                td {
+                    font-weight: 600;
+                    color: black;
+
+                    span {
+                        cursor: pointer;
+                        width: 30px;
+                        height: 30px;
+                        border: 2px solid transparent;
+                        border-radius: 50%;
+                        display: flex;
+                        margin: 0 auto;
+                        justify-content: center;
+                        align-items: center;
+                        transition: all .3s;
+
+                        &:hover {
+                            background: rgba($main-color, .2);
+                            transition: all .3s;
+                        }
+                    }
+                }
+
+                .record-mark {
+                    color: $main-color;
+
+                    span {
+                        border-color: $main-color;
+                    }
+                }
+            }
+        }
+    }
+
+    .record-box {
+        width: 100%;
+        height: calc(100% - 130px);
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .record-item {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            margin-top: 20px;
+
+            .icon-box {
+                flex-shrink: 0;
+                width: 50px;
+                height: 50px;
+                border-radius: 8px;
+                background: rgba($main-color, .3);
+                color: $main-color;
+                font-size: 32px;
+                text-align: center;
+                line-height: 50px;
+                margin-right: 15px;
+            }
+        }
+    }
+}
+</style>

src/views/login/login.vue

@@ -79,13 +79,13 @@
                         <el-input v-model="registerParams.account" placeholder="请输入用户名"></el-input>
                     </el-form-item>
                     <el-form-item label="密码" prop="password">
-                        <el-input v-model="registerParams.password" type placeholder="请输入密码"></el-input>
+                        <el-input v-model="registerParams.password" type="password" placeholder="请输入密码"></el-input>
                     </el-form-item>
                     <el-form-item label="姓名" prop="name">
-                        <el-input v-model="registerParams.name" type placeholder="请输入姓名"></el-input>
+                        <el-input v-model="registerParams.name" placeholder="请输入姓名"></el-input>
                     </el-form-item>
                     <el-form-item label="手机号" prop="phone">
-                        <el-input v-model="registerParams.phone" type placeholder="请输入手机号"></el-input>
+                        <el-input v-model="registerParams.phone" placeholder="请输入手机号"></el-input>
                     </el-form-item>
                     <el-form-item label="医院" prop="hospital">
                         <el-select v-model="registerParams.hospital" style="width: 100%;">
@@ -100,7 +100,7 @@
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="验证码" prop="code">
-                        <el-input v-model="registerParams.code" type placeholder="请输入验证码" style="width: calc(100% - 110px);"></el-input>
+                        <el-input v-model="registerParams.code" placeholder="请输入验证码" style="width: calc(100% - 110px);"></el-input>
                         <img width="100" height="32" style="margin-left: 10px;" src="" />
                     </el-form-item>