parent
71959109e5
commit
0969f189fb
@ -0,0 +1,92 @@
|
||||
.box {
|
||||
width: vw(552);
|
||||
height: vh(438);
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #DFE0F3;
|
||||
box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
|
||||
background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
|
||||
border-radius: vw(8);
|
||||
padding: vh(16) vw(8);
|
||||
position: relative;
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(200);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
height: vh(350);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 16%;
|
||||
|
||||
>div {
|
||||
width: vw(40);
|
||||
height: vh(70);
|
||||
background: #E9E4FF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
span {
|
||||
color: rgba(90, 73, 173, 0.5);
|
||||
font-size: vw(16);
|
||||
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
transform: skewY(-30deg);
|
||||
|
||||
span {
|
||||
transform: skewY(30deg);
|
||||
line-height: vh(60);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: vw(-24);
|
||||
transform: skewY(30deg);
|
||||
|
||||
span {
|
||||
transform: skewY(-30deg);
|
||||
line-height: vh(90);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #5C4BAD;
|
||||
z-index: 1;
|
||||
height: vh(82);
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<header>
|
||||
<div>
|
||||
<p class="panmen">护理人员人力分布</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div id="chartBottomLeft" class="h-full"></div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { GetMonitorOperationNumber } from '@/api/monitor';
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 'week',
|
||||
startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
|
||||
endDate: dayjs().format('YYYY-MM-DD'),
|
||||
renderTimer: null,
|
||||
getDataList: [20, 38, 12],
|
||||
myChart: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeActive(newActive = '') {
|
||||
if (!newActive) {
|
||||
if (this.active == 'week') {
|
||||
newActive = 'month'
|
||||
} else {
|
||||
newActive = 'week'
|
||||
}
|
||||
}
|
||||
this.startDate = dayjs().subtract(newActive == 'week' ? 7 : 30, 'day').format('YYYY-MM-DD');
|
||||
this.active = newActive;
|
||||
this.onGetPageData();
|
||||
},
|
||||
onGetPageData() {
|
||||
GetMonitorOperationNumber({
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
}).then(res => {
|
||||
// this.getDataList = [res['data']['electiveCount'], res['data']['emergencyCount'], res['data']['daySurgeryCount'], res['data']['outSurgeryCount']]
|
||||
this.updateChart();
|
||||
});
|
||||
},
|
||||
updateChart() {
|
||||
let categories = ['手术中', '在岗', '休息']
|
||||
let maxVal = 10
|
||||
if (Math.max(...this.getDataList) > 0) {
|
||||
maxVal = Math.ceil(Math.max(...this.getDataList) / 10) * 10;
|
||||
}
|
||||
const option = {
|
||||
grid: {
|
||||
left: 80,
|
||||
right: 50,
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
},
|
||||
xAxis: {
|
||||
max: maxVal,
|
||||
axisLine: { show: true, lineStyle: { color: "rgba(0, 0, 0, 0.3)" } },
|
||||
axisLabel: {
|
||||
color: `rgba(0, 0, 0, 0.3)`,
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: categories,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: `rgba(0, 0, 0, 0.3)`,
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: this.getDataList,
|
||||
barWidth: 24,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: "#a066f8" },
|
||||
{ offset: 1, color: "#6173f7" },
|
||||
]),
|
||||
borderRadius: 10,
|
||||
},
|
||||
z: 2,
|
||||
},
|
||||
{
|
||||
type: "scatter",
|
||||
data: this.getDataList,
|
||||
symbolSize: 24,
|
||||
itemStyle: {
|
||||
color: "#fff",
|
||||
borderColor: "#8a6df0",
|
||||
borderWidth: 1,
|
||||
shadowColor: "#fff",
|
||||
shadowBlur: 5,
|
||||
},
|
||||
z: 3,
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{c}",
|
||||
color: "#8a6df0",
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.myChart = echarts.init(document.getElementById("chartBottomLeft"));
|
||||
this.onGetPageData();
|
||||
window.addEventListener("resize", () => {
|
||||
this.myChart.resize();
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss'
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="opstatisticBox box">
|
||||
<header>
|
||||
<div>
|
||||
<p class="panmen">近七天平均接台时间趋势</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div ref="chartBottomRight" class="h-full"></div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import dayjs from 'dayjs';
|
||||
import { GetMonitorFirstOperationMonth } from '@/api/operation';
|
||||
let chart = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartOptions: {
|
||||
grid: {
|
||||
top: '13%',
|
||||
left: '13%',
|
||||
right: '10%',
|
||||
bottom: '13%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLabel: {
|
||||
fontSize: '16px',
|
||||
color: '#5D49AF',
|
||||
fontFamily: 'panmen',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}分',
|
||||
fontSize: '16px',
|
||||
color: '#5D49AF',
|
||||
fontFamily: 'panmen',
|
||||
opacity: 0.6
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#624D96',
|
||||
width: 0.1,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#7052E8',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(156, 132, 255, 0.6)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(186, 169, 255, 0.15)',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": "top",
|
||||
"color": "#5D49AF",
|
||||
"fontSize": 14,
|
||||
"formatter": "{c}"
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
isLoading: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onGetPageData() {
|
||||
GetMonitorFirstOperationMonth().then(res => {
|
||||
this.chartOptions['xAxis']['data'] = Array.from({ length: 7 }, (_, i) =>
|
||||
dayjs().subtract(i, 'day').format('YYYY-MM-DD')
|
||||
).reverse();
|
||||
this.chartOptions['series'][0]['data'] = [48, 62, 56, 49, 47, 54, 58];
|
||||
console.log(this.chartOptions);
|
||||
|
||||
chart.setOption(this.chartOptions);
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
chart = echarts.init(this.$refs.chartBottomRight);
|
||||
this.onGetPageData();
|
||||
setInterval(() => {
|
||||
this.onGetPageData();
|
||||
}, this.$store.getters.intervalTime);
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="opstatisticBox box">
|
||||
<header>
|
||||
<div>
|
||||
<p class="panmen">今日质量指标</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="bottom">
|
||||
<div>
|
||||
<img src="@/assets/img/pageMonitor/trianglePurple.png" />
|
||||
<p class="secondRow">
|
||||
安全核查完成率
|
||||
</p>
|
||||
<p class="thridRow">
|
||||
<span class="panmen">100</span>%
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/img/pageMonitor/trianglePurple.png" />
|
||||
<p class="secondRow">
|
||||
不良事件率
|
||||
</p>
|
||||
<p class="thridRow">
|
||||
<span class="panmen">0</span>%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 'week',
|
||||
startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
|
||||
endDate: dayjs().format('YYYY-MM-DD'),
|
||||
renderTimer: null,
|
||||
pageList: [],
|
||||
myChart: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss'
|
||||
</style>
|
||||
@ -0,0 +1,176 @@
|
||||
.boxWrap {
|
||||
width: vw(1280);
|
||||
height: vh(438);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.opGradeBox {}
|
||||
|
||||
.asaGradeBox {
|
||||
width: vw(340);
|
||||
height: 100%;
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(200);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opstatisticBox {
|
||||
width: vw(624);
|
||||
height: 100%;
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(300);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 16%;
|
||||
|
||||
>div {
|
||||
width: vw(40);
|
||||
height: vh(70);
|
||||
background: #E9E4FF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
span {
|
||||
color: rgba(90, 73, 173, 0.5);
|
||||
font-size: vw(16);
|
||||
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
transform: skewY(-30deg);
|
||||
|
||||
span {
|
||||
transform: skewY(30deg);
|
||||
line-height: vh(60);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: vw(-24);
|
||||
transform: skewY(30deg);
|
||||
|
||||
span {
|
||||
transform: skewY(-30deg);
|
||||
line-height: vh(90);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #5C4BAD;
|
||||
z-index: 1;
|
||||
height: vh(82);
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #DFE0F3;
|
||||
box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
|
||||
background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
|
||||
border-radius: vw(8);
|
||||
padding: vh(16) vw(8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main {
|
||||
height: vh(350);
|
||||
}
|
||||
}
|
||||
|
||||
.opstatisticBox {
|
||||
.bottom {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
div {
|
||||
width: vw(560);
|
||||
height: vh(150);
|
||||
box-sizing: border-box;
|
||||
padding: vh(24) vw(20);
|
||||
background: linear-gradient(180deg, #F2F3FA 0%, #DEE6FF 100%);
|
||||
border: 2px solid #EDE9F4;
|
||||
border-radius: vw(4);
|
||||
|
||||
.secondRow {
|
||||
margin-top: vh(12);
|
||||
margin-bottom: vh(4);
|
||||
font-size: vw(20);
|
||||
color: #302D32;
|
||||
}
|
||||
|
||||
.thridRow {
|
||||
font-size: vw(28);
|
||||
color: #605C68;
|
||||
|
||||
span {
|
||||
font-size: vw(44);
|
||||
color: #5D49AF;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<section class="boxWrap">
|
||||
<eMid />
|
||||
<eRight />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eMid from './eMid.vue';
|
||||
import eRight from './eRight.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
components: { eMid, eRight }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './index.scss'
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<section class="flex justify-evenly items-center flex-wrap">
|
||||
<topLeft />
|
||||
<topRight />
|
||||
<bottomLeft />
|
||||
<bottomRight />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topLeft from "./topLeft/index.vue";
|
||||
import topRight from "./topRight/index.vue";
|
||||
import bottomLeft from "./bottomLeft/index.vue";
|
||||
import bottomRight from './bottomRight/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
topLeft,
|
||||
topRight,
|
||||
bottomLeft,
|
||||
bottomRight,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,177 @@
|
||||
.box {
|
||||
width: vw(552);
|
||||
height: vh(444);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: vh(24);
|
||||
border: 2px solid #DFE0F3;
|
||||
box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
|
||||
background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
|
||||
border-radius: vw(8);
|
||||
padding: vh(8) vw(8);
|
||||
|
||||
header {
|
||||
height: vh(48);
|
||||
background-image: url("@/assets/img/pageMonitor/headerLine.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
|
||||
div {
|
||||
width: vw(200);
|
||||
height: vh(40);
|
||||
background-image: url("@/assets/img/pageMonitor/headerBg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: vw(12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #444444;
|
||||
font-size: vw(22);
|
||||
padding-left: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
height: vh(390);
|
||||
|
||||
.top {
|
||||
width: vw(488);
|
||||
height: vh(160);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
background: linear-gradient(180deg, #F2F3FA 0%, #EAE9FE 100%);
|
||||
border: 1px solid #EDE9F4;
|
||||
box-sizing: border-box;
|
||||
border-radius: vw(4);
|
||||
|
||||
.left {
|
||||
div:first-of-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: vh(12);
|
||||
min-width: vw(120);
|
||||
|
||||
img {
|
||||
margin-right: vw(8);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: vw(20);
|
||||
color: #302D32;
|
||||
}
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
color: #876395;
|
||||
font-size: vw(24);
|
||||
line-height: vw(44);
|
||||
letter-spacing: 2px;
|
||||
|
||||
span {
|
||||
color: #924AAC;
|
||||
font-size: vw(44);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.numBox {
|
||||
width: vw(276);
|
||||
height: vh(50);
|
||||
background: linear-gradient(272deg, rgba(255, 85, 238, 0.045) 2%, rgba(150, 35, 135, 0.066) 99%);
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(161deg, rgba(255, 169, 205, 0.4) -11%, rgba(255, 169, 202, 0) 42%) 1.5;
|
||||
box-sizing: border-box;
|
||||
padding: 0 vw(16);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.leftTextBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.potionBox {
|
||||
width: vw(4);
|
||||
height: vw(4);
|
||||
border-radius: 100%;
|
||||
background: #D58DFF;
|
||||
box-shadow: 0px 0px vw(4) vw(2) #D58DFF;
|
||||
margin-right: vw(12);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: vw(16);
|
||||
color: #571273;
|
||||
}
|
||||
}
|
||||
|
||||
.rightTextBox {
|
||||
font-size: vw(14);
|
||||
color: #571273;
|
||||
line-height: vw(28);
|
||||
|
||||
span {
|
||||
font-size: vw(28);
|
||||
color: #924AAC;
|
||||
vertical-align: bottom;
|
||||
margin-right: vw(4);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: vh(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: vw(488);
|
||||
height: vh(160);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: vw(146);
|
||||
height: vh(160);
|
||||
box-sizing: border-box;
|
||||
padding: vh(24) vw(20);
|
||||
background: linear-gradient(180deg, #F2F3FA 0%, #DEE6FF 100%);
|
||||
border: 2px solid #EDE9F4;
|
||||
border-radius: vw(4);
|
||||
|
||||
.secondRow {
|
||||
margin-top: vh(12);
|
||||
margin-bottom: vh(4);
|
||||
font-size: vw(16);
|
||||
color: #302D32;
|
||||
}
|
||||
|
||||
.thridRow {
|
||||
font-size: vw(28);
|
||||
color: #605C68;
|
||||
|
||||
span {
|
||||
font-size: vw(44);
|
||||
color: #5D49AF;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<header>
|
||||
<div>
|
||||
<p class="panmen">手术室换台情况</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div>
|
||||
<img src="@/assets/img/pageMonitor/triangle.png">
|
||||
<span>总人数</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="panmen">{{ totalPopulation }}</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<template v-for="(item, index) in peopleData">
|
||||
<div class="numBox" :key="index">
|
||||
<div class="leftTextBox">
|
||||
<div class="potionBox"></div>
|
||||
<span>{{ item['itemName'] }}</span>
|
||||
</div>
|
||||
<div class="rightTextBox">
|
||||
<span class="panmen">{{ item['itemVal'] }}</span>人
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<template v-for="(item, index) in overviewData">
|
||||
<div :key="index">
|
||||
<img src="@/assets/img/pageMonitor/trianglePurple.png" />
|
||||
<p class="secondRow">
|
||||
{{ item['itemName'] }}
|
||||
</p>
|
||||
<p class="thridRow">
|
||||
<span class="panmen">{{ item['itemVal'] }}</span>{{ item['itemUnit'] }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetMonitorOperationCount } from '@/api/monitor';
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overviewData: [
|
||||
{
|
||||
itemName: '首台准点率',
|
||||
itemVal: '0',
|
||||
itemUnit: '%',
|
||||
},
|
||||
{
|
||||
itemName: '手术间利用率',
|
||||
itemVal: '0',
|
||||
itemUnit: '%',
|
||||
},
|
||||
{
|
||||
itemName: '急诊患者',
|
||||
itemVal: '0',
|
||||
itemUnit: '个',
|
||||
},
|
||||
],
|
||||
peopleData: [
|
||||
{
|
||||
itemName: '进行中',
|
||||
itemVal: '50',
|
||||
},
|
||||
{
|
||||
itemName: '待进行',
|
||||
itemVal: '300',
|
||||
},
|
||||
],
|
||||
totalPopulation: 0,
|
||||
isLoading: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onGetPageData() {
|
||||
this.isLoading = true;
|
||||
let nowDay = dayjs().format('YYYY-MM-DD');
|
||||
if (this.$store.getters.isMock) {
|
||||
nowDay = '2024-06-06';
|
||||
}
|
||||
GetMonitorOperationCount(nowDay).then(res => {
|
||||
if (!res.data) {
|
||||
return;
|
||||
}
|
||||
let fisrtRate = res['data']['firstPunctualityRate'];
|
||||
if (fisrtRate.includes('%')) {
|
||||
this.overviewData[0]['itemVal'] = fisrtRate.slice(0, -1);
|
||||
} else {
|
||||
this.overviewData[0]['itemVal'] = Number(fisrtRate);
|
||||
}
|
||||
let roomUserRate = res['data']['roomUserRate'];
|
||||
if (roomUserRate.includes('%')) {
|
||||
this.overviewData[1]['itemVal'] = roomUserRate.slice(0, -1);
|
||||
} else {
|
||||
this.overviewData[1]['itemVal'] = Number(roomUserRate);
|
||||
}
|
||||
this.overviewData[2]['itemVal'] = res['data']['patEmergencyCount'];
|
||||
this.totalPopulation = res['data']['patCount'];
|
||||
this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
|
||||
this.peopleData[1]['itemVal'] = res['data']['patWating'];
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.onGetPageData();
|
||||
setInterval(() => {
|
||||
this.onGetPageData();
|
||||
}, this.$store.getters.intervalTime);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss'
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
.box {
|
||||
width: vw(1280);
|
||||
height: vh(444);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: vh(24);
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #DFE0F3;
|
||||
box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
|
||||
background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
|
||||
border-radius: vw(8);
|
||||
padding: vh(24);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.el-carousel) {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__container {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel__item {
|
||||
section {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, vw(186));
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
|
||||
>div {
|
||||
height: vh(112);
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, rgba(232, 238, 255, 0.4) 0%, #E8EEFF 100%);
|
||||
border: 2px solid #E3E5FD;
|
||||
border-radius: vw(8);
|
||||
|
||||
p {
|
||||
font-size: vw(22);
|
||||
color: #000;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
line-height: vh(54);
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(0, 109, 171, 0) -1%, #A7DFFF 50%, rgba(0, 109, 171, 0) 98%);
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
box-sizing: border-box;
|
||||
height: vh(54);
|
||||
padding: 0 vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
span {
|
||||
color: #000;
|
||||
font-size: vw(20);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.opEnter {
|
||||
p {
|
||||
color: #0F69D6;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #0F69D6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.anesStart {
|
||||
p {
|
||||
color: #424CFE;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #424CFE;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.opStart {
|
||||
p {
|
||||
color: #8B2CAD;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #8B2CAD;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.opEnd {
|
||||
p {
|
||||
color: #37900B;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #37900B;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.anesEnd {
|
||||
p {
|
||||
color: #5B4CAF;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #5B4CAF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.empty {
|
||||
p {
|
||||
color: #037E7E;
|
||||
}
|
||||
|
||||
div:last-of-type {
|
||||
span {
|
||||
color: #037E7E;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
|
||||
<el-carousel-item v-for="item in opList" :key="item['roomCode']">
|
||||
<section>
|
||||
<template v-for="(subItem, index) in item">
|
||||
<div :class="subItem['className']" :key="index">
|
||||
<p class="panmen">
|
||||
{{ subItem['roomName'] }}
|
||||
</p>
|
||||
<div class="line"></div>
|
||||
<div>
|
||||
<img :src="subItem['iconUrl']" />
|
||||
<span>{{ subItem['operStatusName'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { Carousel, CarouselItem } from 'element-ui';
|
||||
import { GetMonitorOperationRoomStatus } from '@/api/monitor';
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
opList: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onGetPageData() {
|
||||
let nowDay = dayjs().format('YYYY-MM-DD');
|
||||
if (this.$store.getters.isMock) {
|
||||
nowDay = '2025-08-11';
|
||||
}
|
||||
|
||||
GetMonitorOperationRoomStatus(nowDay).then(res => {
|
||||
this.formatData(res['data']);
|
||||
});
|
||||
},
|
||||
formatData(pageData) {
|
||||
this.opList = [];
|
||||
let group = 0;
|
||||
for (let i = 0; i < pageData['length']; i++) {
|
||||
if (i % 6 == 0) {
|
||||
pageData[i]['procStatus'] = 10;
|
||||
pageData[i]['operStatusName'] = `入手术间`;
|
||||
}
|
||||
if (i % 6 == 1) {
|
||||
pageData[i]['procStatus'] = 15;
|
||||
pageData[i]['operStatusName'] = `麻醉开始`;
|
||||
}
|
||||
if (i % 6 == 2) {
|
||||
pageData[i]['procStatus'] = 20;
|
||||
pageData[i]['operStatusName'] = `手术开始`;
|
||||
}
|
||||
if (i % 6 == 3) {
|
||||
pageData[i]['procStatus'] = 25;
|
||||
pageData[i]['operStatusName'] = `手术结束`;
|
||||
}
|
||||
if (i % 6 == 4) {
|
||||
pageData[i]['procStatus'] = 30;
|
||||
pageData[i]['operStatusName'] = `麻醉结束`;
|
||||
}
|
||||
if (i % 6 == 5) {
|
||||
pageData[i]['procStatus'] = 35;
|
||||
pageData[i]['operStatusName'] = `空置中`;
|
||||
}
|
||||
if (pageData[i]['procStatus'] == 10) {
|
||||
pageData[i]['className'] = `opEnter`
|
||||
pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpRooms.svg`)
|
||||
} else if (pageData[i]['procStatus'] == 15) {
|
||||
pageData[i]['className'] = `anesStart`
|
||||
pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/AnesStarts.svg`)
|
||||
} else if (pageData[i]['procStatus'] == 20) {
|
||||
pageData[i]['className'] = `opStart`
|
||||
pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpingIcons.svg`)
|
||||
} else if (pageData[i]['procStatus'] == 25) {
|
||||
pageData[i]['className'] = `opEnd`
|
||||
pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpEnds.svg`)
|
||||
} else if (pageData[i]['procStatus'] == 30) {
|
||||
pageData[i]['className'] = `anesEnd`
|
||||
pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpendIcons.svg`)
|
||||
} else {
|
||||
pageData[i]['className'] = `empty`
|
||||
pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpWaitIcons.svg`)
|
||||
}
|
||||
group = parseInt(i / 18);
|
||||
if (this.opList[group]) {
|
||||
this.opList[group].push(pageData[i]);
|
||||
} else {
|
||||
this.opList[group] = [pageData[i]];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.onGetPageData();
|
||||
// setInterval(() => {
|
||||
// this.onGetPageData();
|
||||
// }, this.$store.getters.intervalTime);
|
||||
},
|
||||
components: {
|
||||
'el-carousel': Carousel,
|
||||
'el-carousel-item': CarouselItem,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss'
|
||||
</style>
|
||||
Loading…
Reference in new issue