@0Melon0
11 months ago
parent
cf96e155b6
commit
d36d903a53
@ -0,0 +1,37 @@
|
||||
import _axios from '@/utils/_axios';
|
||||
|
||||
/**
|
||||
* 获取手术接台平均时长(左下角)
|
||||
*/
|
||||
export const GetMonitorAverageReceptionTime = date => {
|
||||
return _axios({
|
||||
url: '/api/QualityMicroservice/Monitor/GetMonitorAverageReceptionTime',
|
||||
params: {
|
||||
date,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取手术时长列表(右边)
|
||||
*/
|
||||
export const GetMonitorRoomUsageRate = date => {
|
||||
return _axios({
|
||||
url: '/api/QualityMicroservice/Monitor/GetMonitorRoomUsageRate',
|
||||
params: {
|
||||
date,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取手术室列表
|
||||
*/
|
||||
export const GetRoomList = () => {
|
||||
return _axios({
|
||||
url: '/api/ScheduleMicroservice/dict_operationroom/querylist',
|
||||
params: {
|
||||
pageSize: 999,
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="w-[116.94vh] h-[85.51vh] bgRightMidBox">
|
||||
<section class="h-full" ref="echartsContainer"></section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoding: false,
|
||||
chartOptions: {
|
||||
grid: {
|
||||
width: '86%',
|
||||
height: '80%',
|
||||
top: '14%',
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
{
|
||||
name: '入手术室',
|
||||
icon: 'rect',
|
||||
itemStyle: {
|
||||
color: '#92CC76',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '开始手术',
|
||||
icon: 'rect',
|
||||
itemStyle: {
|
||||
color: '#EF6666',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '手术结束',
|
||||
icon: 'rect',
|
||||
itemStyle: {
|
||||
color: '#FAC858',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '出手术室',
|
||||
icon: 'rect',
|
||||
itemStyle: {
|
||||
color: '#5470C6',
|
||||
},
|
||||
},
|
||||
],
|
||||
selectedMode: 'none',
|
||||
top: "6%",
|
||||
right: "4%",
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
position: 'top',
|
||||
splitNumber: 24,
|
||||
axisLabel: {
|
||||
color: '#B7BDBF',
|
||||
fontSize: 12,
|
||||
margin: 16,
|
||||
formatter: function (value) {
|
||||
var date = new Date(value);
|
||||
var hours = date.getHours();
|
||||
var minutes = date.getMinutes();
|
||||
if (hours === 0 && minutes === 0) {
|
||||
return '00:00';
|
||||
} else {
|
||||
return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLabel: {
|
||||
color: '#B7BDBF',
|
||||
fontSize: 12,
|
||||
margin: 16,
|
||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||
},
|
||||
},
|
||||
series: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
// 创建一个数组来存储整点时间
|
||||
const currentDate = dayjs().format('YYYY-MM-DD');
|
||||
const hours = new Date().getHours();
|
||||
const detailMin = dayjs().subtract(1, 'minute').format('HH:mm:00');
|
||||
const sevenMinutesAgo = dayjs().subtract(8, 'minute').format('HH:mm:00');
|
||||
this.chartOptions.xAxis.min = `${currentDate} 08:00:00`;
|
||||
this.chartOptions.xAxis.max = `${dayjs().add(1, 'day').format('YYYY-MM-DD')} 07:00:00`;
|
||||
// 手术间数量
|
||||
const num = 20;
|
||||
// 时间数组
|
||||
const timeArr = [];
|
||||
// 生成手术间
|
||||
for (let index = num; index >= 1; index--) {
|
||||
this.chartOptions.yAxis.data.push(`手术间${String(index).padStart(3, '0')}`);
|
||||
const isUseArr = this.getUseTime();
|
||||
for (let j = 1; j < isUseArr.length; j += 2) {
|
||||
if (isUseArr[j] <= hours) {
|
||||
timeArr.push({
|
||||
startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
|
||||
endTime: `${currentDate} ${isUseArr[j]}:00:00`,
|
||||
yValue: index - 1,
|
||||
color: '#5470C6',
|
||||
diff: dayjs(`${currentDate} ${isUseArr[j]}:00:00`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
|
||||
name: '出手术室',
|
||||
});
|
||||
} else if (isUseArr[j] > hours && isUseArr[j - 1] < hours) {
|
||||
if (Math.random() > 0.5) {
|
||||
timeArr.push({
|
||||
startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
|
||||
endTime: `${currentDate} ${detailMin}`,
|
||||
yValue: index - 1,
|
||||
color: '#EF6666',
|
||||
diff: dayjs(`${currentDate} ${detailMin}`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
|
||||
name: '开始手术',
|
||||
});
|
||||
} else {
|
||||
timeArr.push({
|
||||
startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
|
||||
endTime: `${currentDate} ${detailMin}`,
|
||||
yValue: index - 1,
|
||||
color: '#FAC858',
|
||||
diff: dayjs(`${currentDate} ${detailMin}`).diff(dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`), 'minute'),
|
||||
name: '手术结束',
|
||||
});
|
||||
}
|
||||
} else if (isUseArr[j] > hours && isUseArr[j - 1] == hours) {
|
||||
timeArr.push({
|
||||
startTime: `${currentDate} ${sevenMinutesAgo}`,
|
||||
endTime: `${currentDate} ${detailMin}`,
|
||||
yValue: index - 1,
|
||||
color: '#92CC76',
|
||||
diff: '7',
|
||||
name: '入手术室',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// 生成series数据
|
||||
console.log(timeArr);
|
||||
this.chartOptions.series = this.seriesData(timeArr);
|
||||
},
|
||||
seriesData(data) {
|
||||
const res = data.map(function (item) {
|
||||
return {
|
||||
type: 'custom',
|
||||
name: item.name,
|
||||
renderItem: function (params, api) {
|
||||
var xStart = api.coord([item.startTime, item.yValue]);
|
||||
var xEnd = api.coord([item.endTime, item.yValue]);
|
||||
var textX = (xStart[0] + xEnd[0]) / 2;
|
||||
var textY = xStart[1] - 20;
|
||||
return {
|
||||
type: 'group',
|
||||
children: [
|
||||
{
|
||||
type: 'line',
|
||||
shape: {
|
||||
x1: xStart[0],
|
||||
y1: xStart[1],
|
||||
x2: xEnd[0],
|
||||
y2: xEnd[1],
|
||||
},
|
||||
style: {
|
||||
stroke: item.color,
|
||||
lineWidth: 8,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
position: [textX, textY],
|
||||
style: {
|
||||
text: `${item.diff} min`,
|
||||
fill: '#B7BDBF',
|
||||
textSize: '12px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
data: [item],
|
||||
};
|
||||
});
|
||||
return res;
|
||||
},
|
||||
getUseTime() {
|
||||
// 随机生成当天手术室的使用时间
|
||||
function getRandomUniqueValues(min, max, count) {
|
||||
const values = new Set();
|
||||
while (values.size < count) {
|
||||
values.add(Math.floor(Math.random() * (max - min + 1)) + min);
|
||||
}
|
||||
return Array.from(values);
|
||||
}
|
||||
|
||||
const numValues = Math.floor(Math.random() * 3) + 8;
|
||||
const randomValues = getRandomUniqueValues(8, 24, numValues % 2 ? numValues + 1 : numValues);
|
||||
return randomValues.sort((a, b) => {
|
||||
return a - b;
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const chartContainer = this.$refs.echartsContainer;
|
||||
const chart = echarts.init(chartContainer);
|
||||
this.initData();
|
||||
chart.setOption(this.chartOptions);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bgRightMidBox {
|
||||
background-image: url('@/assets/svg/Room/RightMid/Box.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue