-
-
{{ dateFormater('yyyy年MM月', upMonth) }}
-
-
-
-
{{ dateFormater('yyyy年MM月', downMonth) }}
-
+
-
- 总计
手术
数量:
- {{ total }}
-
+
本月共计{{ total }}台手术
@@ -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 @@
+
+
+
+
+
{{ item.name }}:{{ item.value }}台
+
+
+
+
+
+
+
+
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 @@
-
-
{{ dateFormater('yyyy年MM月', upMonth) }}
-
-
-
-
{{ dateFormater('yyyy年MM月', downMonth) }}
-
+
-
- 总计
手术
时长:
- {{ total.toFixed(0) }}h
{{ Number((total % 1).toFixed(1)) * 60 }}min
-
+
本月共计{{ total.toFixed(0) }}小时{{ Number((total % 1).toFixed(1)) * 60 }}分钟
@@ -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)
}
}