You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.4 KiB
104 lines
2.4 KiB
<template>
|
|
<div class="rightMiddle">
|
|
<dv-border-box-13>
|
|
<dv-loading v-if="isLoding">Loading...</dv-loading>
|
|
<section v-else>
|
|
<dv-charts :option="option"></dv-charts>
|
|
</section>
|
|
</dv-border-box-13>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoding: true,
|
|
option: {
|
|
xAxis: {
|
|
type: 'category',
|
|
position: 'top',
|
|
data: 'value',
|
|
min: 0,
|
|
max: 24,
|
|
minInterval: 1,
|
|
splitNumber: 25,
|
|
axisLabel: {
|
|
style: {
|
|
stroke: '#fff',
|
|
fontSize: 14,
|
|
},
|
|
formatter: dataItem => `${String(dataItem.value).padStart(2, '0')}:00`,
|
|
},
|
|
},
|
|
yAxis: {
|
|
data: [],
|
|
splitLine: { show: false },
|
|
axisLabel: {
|
|
style: {
|
|
stroke: '#fff',
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
},
|
|
series: [],
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
// 手术间数量
|
|
const num = 12;
|
|
// 生成手术间
|
|
for (let index = num; index >= 1; index--) {
|
|
this.option.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`);
|
|
}
|
|
// 生成对应的使用率数据
|
|
for (let index = 1; index <= 24; index++) {
|
|
let seriesData = {
|
|
name: `bar${String(index).padStart(2, '0')}`,
|
|
type: 'bar',
|
|
stack: 'bar',
|
|
data: [],
|
|
independentColor: true,
|
|
independentColors: [],
|
|
barWidth: '40%',
|
|
barStyle: {
|
|
stroke: 'rgb(128,128,128)',
|
|
},
|
|
};
|
|
for (let sunIndex = 0; sunIndex < num; sunIndex++) {
|
|
const isUse = Math.random() < 0.7;
|
|
seriesData.data.push(1);
|
|
if (isUse) {
|
|
seriesData.independentColors.push('#87ceeb');
|
|
} else {
|
|
seriesData.independentColors.push('rgb(128,128,128)');
|
|
}
|
|
}
|
|
this.option.series.push(seriesData);
|
|
}
|
|
this.option = { ...this.option };
|
|
this.isLoding = false;
|
|
}, 500);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rightMiddle {
|
|
height: 100%;
|
|
:deep(.dv-border-box-13) {
|
|
padding: 2vh;
|
|
box-sizing: border-box;
|
|
section {
|
|
height: 100%;
|
|
background-color: gray;
|
|
.dv-charts-container {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|