@0Melon0
1 year ago
parent
96454b33ef
commit
649b48a532
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
@ -1,9 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div></div>
|
<div class="w-[171.29vh] flex justify-between mx-auto">
|
||||||
|
<div class="w-[51.48vh]">
|
||||||
|
<leftTop></leftTop>
|
||||||
|
<leftBottom></leftBottom>
|
||||||
|
</div>
|
||||||
|
<rightMid></rightMid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import leftTop from './leftTop/index.vue';
|
||||||
|
import leftBottom from './leftBottom/index.vue';
|
||||||
|
import rightMid from './rightMid/index.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
leftTop,
|
||||||
|
leftBottom,
|
||||||
|
rightMid,
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style></style>
|
||||||
|
|||||||
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div class="h-[32.31vh] mt-[2.77vh] pt-[4vh] bgLeftBottomBox">
|
||||||
|
<div class="h-[20vh]" ref="echartsContainer"></div>
|
||||||
|
<section class="w-[37.96vh] h-[5.18vh] leading-[5.18vh] text-center border border-[#2D126F] mx-auto">
|
||||||
|
<span class="text-[1.85vh] youshe">平均接台时间</span>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
radius: '100%',
|
||||||
|
max: 120,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 20,
|
||||||
|
color: [[1, 'rgba(126, 130, 137, 0.3)']],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 20,
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: '#03c2fd' },
|
||||||
|
{ offset: 0.5, color: '#1ed3e5' },
|
||||||
|
{ offset: 1, color: '#2fded6' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
icon: 'rect',
|
||||||
|
width: 3,
|
||||||
|
offsetCenter: ['0%', '-40%'],
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(139, 230, 253, 1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'itemA',
|
||||||
|
value: 45,
|
||||||
|
title: { show: false },
|
||||||
|
detail: {
|
||||||
|
offsetCenter: [0, '20%'],
|
||||||
|
formatter: function (value) {
|
||||||
|
return '{a|' + value + '}{b|min}';
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 40,
|
||||||
|
color: '#4AC9FF',
|
||||||
|
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: '#4AC9FF',
|
||||||
|
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||||
|
verticalAlign: 'bottom',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const chartContainer = this.$refs.echartsContainer;
|
||||||
|
const chart = echarts.init(chartContainer);
|
||||||
|
chart.setOption(this.chartOptions);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bgLeftBottomBox {
|
||||||
|
background-image: url('@/assets/svg/Room/LeftBottom/Box.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
<template>
|
||||||
|
<div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
|
||||||
|
<div class="w-[22vh] h-[22vh] mx-auto mt-[4.6vh]" ref="echartsContainer"></div>
|
||||||
|
<div class="w-[37.96vh] h-[6.29vh] mx-auto mt-[8.6vh] px-[4.96vh] flex justify-between items-center bgTopLeftItemBox">
|
||||||
|
<div class="flex">
|
||||||
|
<img src="@/assets/svg/Room/LeftTop/TrianglePurple.svg" />
|
||||||
|
<span class="text-[1.85vh] youshe ml-[1.4vh]">手术间数</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-[2.96vh] text-[#733FF3] youshe">100</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
startAngle: 90,
|
||||||
|
endAngle: -270,
|
||||||
|
pointer: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
max: 100,
|
||||||
|
radius: '100%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
overlap: false,
|
||||||
|
roundCap: true,
|
||||||
|
clip: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#9C85FA',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#5531E7',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
global: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: [[1, '#4F518C']],
|
||||||
|
opacity: 0.7,
|
||||||
|
width: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
distance: 0,
|
||||||
|
length: 10,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
distance: 50,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 86,
|
||||||
|
name: '首台准点率',
|
||||||
|
title: {
|
||||||
|
offsetCenter: ['0%', '20%'],
|
||||||
|
fontSize: 22,
|
||||||
|
fontFamily: 'Microsoft YaHei',
|
||||||
|
color: '#fff',
|
||||||
|
overflow: 'break',
|
||||||
|
lineHeight: 20,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
offsetCenter: ['0%', '-15%'],
|
||||||
|
fontSize: 40,
|
||||||
|
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||||
|
color: '#03FFFF',
|
||||||
|
formatter: `{value}%`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
peopleData: [
|
||||||
|
{
|
||||||
|
itemName: '进行中',
|
||||||
|
itemVal: '50',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemName: '待进行',
|
||||||
|
itemVal: '300',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const chartContainer = this.$refs.echartsContainer;
|
||||||
|
const chart = echarts.init(chartContainer);
|
||||||
|
chart.setOption(this.chartOptions);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bgLeftTopBox {
|
||||||
|
background-image: url('@/assets/svg/Room/LeftTop/Box.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.bgTopLeftItemBox {
|
||||||
|
background-image: url('@/assets/svg/Room/LeftTop/ItemBox.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,237 @@
|
|||||||
|
<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数据
|
||||||
|
this.chartOptions.series = this.seriesData(timeArr);
|
||||||
|
},
|
||||||
|
seriesData(data) {
|
||||||
|
// const obj = {};
|
||||||
|
const res = data.map(function (item) {
|
||||||
|
// obj[item.name] = item.color;
|
||||||
|
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],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
// console.log(obj);
|
||||||
|
// console.log(JSON.stringify(res));
|
||||||
|
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