parent
b114d29cd6
commit
bae8cc82ff
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.2 KiB |
@ -0,0 +1,38 @@
|
|||||||
|
.bottomBoxWrap {
|
||||||
|
height: vh(386);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: vh(20) vw(54);
|
||||||
|
background-image: url('@/assets/svg/Room/LeftBottom/Box.svg');
|
||||||
|
background-size: 107%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
margin-top: vh(24);
|
||||||
|
|
||||||
|
.echartsContainer {
|
||||||
|
height: vh(260)
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomBox {
|
||||||
|
height: vh(80);
|
||||||
|
padding: 0 vw(24);
|
||||||
|
background: linear-gradient(272deg, rgba(93, 73, 175, 0.045) 2%, rgba(93, 73, 175, 0.066) 99%);
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(160deg, rgba(158, 136, 246, 0.4) -10%, rgba(93, 73, 175, 0) 41%) 1.5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: vw(16);
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2D126F;
|
||||||
|
margin-left: vw(4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
.leftBox {
|
||||||
|
height: vh(498);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: vh(54) vw(54);
|
||||||
|
background-image: url('@/assets/svg/Room/LeftTop/Box.svg');
|
||||||
|
background-size: 107%;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.echartsContainer {
|
||||||
|
width: vw(230);
|
||||||
|
height: vh(230);
|
||||||
|
margin: vh(20) auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomBox {
|
||||||
|
margin-top: vh(40);
|
||||||
|
height: vh(80);
|
||||||
|
padding: 0 vw(24);
|
||||||
|
background: linear-gradient(272deg, rgba(93, 73, 175, 0.045) 2%, rgba(93, 73, 175, 0.066) 99%);
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(160deg, rgba(158, 136, 246, 0.4) -10%, rgba(93, 73, 175, 0) 41%) 1.5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: vw(16);
|
||||||
|
color: #2D126F;
|
||||||
|
margin-left: vw(4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
font-size: vw(12);
|
||||||
|
color: #571273;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: vw(26);
|
||||||
|
color: #5D49AF;
|
||||||
|
vertical-align: sub;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-bottom: vh(24);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,234 +0,0 @@
|
|||||||
<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