diff --git a/src/utils/date-util.ts b/src/utils/date-util.ts index e1a1da1..ca2f8b2 100644 --- a/src/utils/date-util.ts +++ b/src/utils/date-util.ts @@ -53,6 +53,25 @@ export function getFirstDayOfWeek(date: Date, i: number) { const day = date.getDay() || 7; return new Date(date.getFullYear(), date.getMonth(), date.getDate() + i - day); } +/** + * 获取当前日期是周几 + * @returns + */ +const weekArray = ['周天', '周一', '周二', '周三', '周四', '周五', '周六']; +export function getCurrentDate(date: any) { + let myDate = new Date(); + if (date) { + if (date instanceof Date) { + myDate = date; + } else { + date = date.replace(/-/g, '/'); + myDate = new Date(date); + } + } + + const days = myDate.getDay(); + return weekArray[days]; +} /** * 当前时间加减天数 diff --git a/src/views/home/index.vue b/src/views/home/index.vue index b0c545f..e75cfd3 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -3,7 +3,7 @@
-
+
{{ userInfo.name }} {{ userInfo.permissions }}
@@ -21,9 +21,15 @@
+
+ +
+
+ +
@@ -49,7 +55,9 @@ 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 NumberPieChart from "./number-pie-chart.vue"; import TimeChart from "./time-chart.vue"; +import TimeBarChart from "./time-bar-chart.vue"; import WeekCalendar from "./week-calendar.vue"; import SystemLogs from "@/components/system-logs.vue"; @@ -86,10 +94,11 @@ const total = ref(0) // 日历添加的记录提醒统计 justify-content: space-between; .header-item { - width: calc(50% - 10px); + width: calc(100% - 600px); height: 100%; border: 1px solid $border-color; border-radius: 5px; + box-shadow: 1px 1px 5px $border2-color; padding: 0 90px; line-height: 1.5; display: flex; @@ -97,6 +106,7 @@ const total = ref(0) // 日历添加的记录提醒统计 justify-content: center; &~.header-item { + width: 580px; flex-direction: row; justify-content: flex-start; align-items: center; @@ -108,11 +118,24 @@ const total = ref(0) // 日历添加的记录提醒统计 width: 100%; height: calc(100% - 160px); margin-top: 20px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; .echart-item { - width: 100%; - height: calc(50% - 20px); - margin-top: 20px; + width: calc(100% - 600px); + height: calc(50% - 10px); + border: 1px solid $border-color; + border-radius: 5px; + padding: 20px; + box-shadow: 1px 1px 5px $border2-color; + + &:nth-child(even) { + width: 580px; + } + &:nth-child(n + 3) { + margin-top: 20px; + } } } } diff --git a/src/views/home/number-chart.vue b/src/views/home/number-chart.vue index 163afa9..2b4ac7d 100644 --- a/src/views/home/number-chart.vue +++ b/src/views/home/number-chart.vue @@ -1,20 +1,14 @@ @@ -61,7 +55,7 @@ function initChart(chartData: any) { show: true, type: 'category', boundaryGap: false, - nameTextStyle: { color: '#303133' }, + nameTextStyle: { color: '#909399' }, axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } }, axisTick: { show: false }, axisLabel: { show: true, interval: chartData.xData.length - 2 }, @@ -69,11 +63,11 @@ function initChart(chartData: any) { data: chartData.xData, }, yAxis: { - name: '手术数量/台', + name: '数量', show: true, type: 'value', min: 0, - nameTextStyle: { color: '#303133', align: 'left', verticalAlign: 'top', padding: [0, 20] }, + nameTextStyle: { color: '#909399', align: 'center', verticalAlign: 'top', padding: [0, 0] }, axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } }, axisTick: { show: false }, axisLabel: { show: false }, @@ -145,33 +139,45 @@ const getData = (date: any) => { display: flex; justify-content: space-between; z-index: 1; - &>div { - cursor: pointer; - p { - margin-bottom: 10px; - font-weight: 600; + .btn-box { + height: 30px; + display: flex; + align-items: center; + color: $text2-color; + &>:deep(.el-date-editor) { + font-size: 14px; + .el-input__wrapper { + box-shadow: none; + padding: 0; + .el-input__prefix, + .el-input__suffix { + display: none; + } + .el-input__inner { + cursor: pointer; + width: 100px; + color: $text2-color; + text-align: center; + } + } + } + .el-icon { + cursor: pointer; } } } .chart-dom { - width: calc(100% - 180px); + width: 100%; height: 100%; } - .total { - flex-shrink: 0; - width: 160px; - height: 80%; - border: 2px solid $main-color; - border-radius: 5px; - background: rgba($main-color, .1); + .total-mini { + position: absolute; + top: 0; + right: 40px; color: $main-color; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - span { - text-align: center; - } + border: 1px solid $main-color; + font-size: 14px; + padding: 3px 8px; } } diff --git a/src/views/home/number-pie-chart.vue b/src/views/home/number-pie-chart.vue new file mode 100644 index 0000000..a3cda3b --- /dev/null +++ b/src/views/home/number-pie-chart.vue @@ -0,0 +1,169 @@ + + + + + diff --git a/src/views/home/time-bar-chart.vue b/src/views/home/time-bar-chart.vue new file mode 100644 index 0000000..bdf5e0c --- /dev/null +++ b/src/views/home/time-bar-chart.vue @@ -0,0 +1,200 @@ + + + + + diff --git a/src/views/home/time-chart.vue b/src/views/home/time-chart.vue index 3a86199..21efa0b 100644 --- a/src/views/home/time-chart.vue +++ b/src/views/home/time-chart.vue @@ -1,20 +1,18 @@ @@ -34,10 +32,6 @@ onMounted(() => { getData(new Date()) }) -// 大于当前时间返回 true -function calcTime(time: any) { - return Boolean(new Date().getTime() < new Date(time).getTime()) -} function initChart(chartData: any) { const chart = echarts.init(chartDom.value as HTMLElement); chart.clear(); @@ -61,7 +55,7 @@ function initChart(chartData: any) { show: true, type: 'category', boundaryGap: false, - nameTextStyle: { color: '#303133' }, + nameTextStyle: { color: '#909399' }, axisLine: { show: true, lineStyle: { color: '#D58301', width: 2 } }, axisTick: { show: false }, axisLabel: { show: true, interval: chartData.xData.length - 2 }, @@ -69,11 +63,11 @@ function initChart(chartData: any) { data: chartData.xData, }, yAxis: { - name: '手术时长/h', + name: '时间', show: true, type: 'value', min: 0, - nameTextStyle: { color: '#303133', align: 'left', verticalAlign: 'top', padding: [0, 20] }, + nameTextStyle: { color: '#909399', align: 'center', verticalAlign: 'top', padding: [0, 0] }, axisLine: { show: true, lineStyle: { color: '#D58301', width: 2 } }, axisTick: { show: false }, axisLabel: { show: false }, @@ -120,7 +114,7 @@ const getData = (date: any) => { let num = 0 for (let i = 0; i < days; i++) { xData.push((i < 9 ? '0' : '') + (i + 1)) - data.push( Number( (Math.random() * 16 + 2).toFixed(1) ) ) + data.push(Number((Math.random() * 16 + 2).toFixed(1))) num += data[i] } total.value = Number(num.toFixed(1)) @@ -129,49 +123,66 @@ const getData = (date: any) => { + + .chart-dom { + width: 100%; + height: 100%; + } + + .total-mini { + position: absolute; + top: 0; + right: 40px; + color: #D58301; + border: 1px solid #D58301; + font-size: 14px; + padding: 3px 8px; + } +} diff --git a/src/views/patients-manage/surgery-info.vue b/src/views/patients-manage/surgery-info.vue index ecf67e0..c7ec612 100644 --- a/src/views/patients-manage/surgery-info.vue +++ b/src/views/patients-manage/surgery-info.vue @@ -118,6 +118,7 @@ function queryData(e: any) { } obj.data.push(data) } + obj.data.reverse() tableData.value.push(obj) } }