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.
140 lines
3.2 KiB
140 lines
3.2 KiB
<template>
|
|
<div class="leftMiddle">
|
|
<dv-border-box-13>
|
|
<dv-border-box-2 class="item">
|
|
<dv-charts :option="option"></dv-charts>
|
|
<section class="dataSection">
|
|
<p>手术间数<span class="numFont">60</span></p>
|
|
</section>
|
|
</dv-border-box-2>
|
|
<dv-decoration-2 />
|
|
<dv-border-box-2 class="item">
|
|
<dv-charts :option="option1" />
|
|
<section class="dataSection">
|
|
<p>平均接台时间<span class="numFont">45</span> min</p>
|
|
</section>
|
|
</dv-border-box-2>
|
|
</dv-border-box-13>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
option: {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: -Math.PI / 2,
|
|
endAngle: Math.PI * 1.5,
|
|
arcLineWidth: 35,
|
|
center: ['50%', '45%'],
|
|
data: [{ name: 'itemA', value: 86, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
dataItemStyle: {
|
|
lineCap: 'round',
|
|
},
|
|
details: {
|
|
show: true,
|
|
formatter: '手术间利用率 {value}%',
|
|
style: {
|
|
fill: 'aqua',
|
|
fontSize: 24,
|
|
},
|
|
},
|
|
backgroundArc: {
|
|
style: {
|
|
stroke: '#4F518C',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
option1: {
|
|
grid: {
|
|
left: '0%',
|
|
top: '10%',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
data: [{ name: 'itemA', value: 45, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
|
|
center: ['50%', '45%'],
|
|
arcLineWidth: 25,
|
|
max: 120,
|
|
splitNum: 6,
|
|
axisLabel: {
|
|
formatter: '{value} min',
|
|
style: {
|
|
fill: '#fff',
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
axisTick: {
|
|
style: {
|
|
stroke: '#fff',
|
|
},
|
|
},
|
|
dataItemStyle: {
|
|
lineCap: 'round',
|
|
},
|
|
backgroundArc: {
|
|
style: {
|
|
stroke: '#4F518C',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.leftMiddle {
|
|
height: 100%;
|
|
:deep(.dv-border-box-13) {
|
|
padding: 2vh;
|
|
box-sizing: border-box;
|
|
> div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
position: relative;
|
|
.dv-decoration-2 {
|
|
height: 2%;
|
|
}
|
|
.dataSection {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 4vh;
|
|
p {
|
|
color: #fff;
|
|
font-size: 2.4vh;
|
|
text-align: center;
|
|
letter-spacing: 0.2vh;
|
|
line-height: 4vh;
|
|
span {
|
|
font-size: 2.6vh;
|
|
color: aqua;
|
|
letter-spacing: 0.1vh;
|
|
margin-left: 1vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|