@0Melon0
2 years ago
parent
a38439d3e9
commit
f5bdab5b22
@ -1,42 +1,47 @@
|
||||
<template>
|
||||
<section class="room">
|
||||
<div class="leftBox">
|
||||
<leftMiddle></leftMiddle>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<rightMiddle></rightMiddle>
|
||||
</div>
|
||||
</section>
|
||||
<dv-border-box-1>
|
||||
<section class="operation">
|
||||
<div class="leftBox">
|
||||
<leftTop></leftTop>
|
||||
<leftBottom></leftBottom>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<rightMiddle></rightMiddle>
|
||||
</div>
|
||||
</section>
|
||||
</dv-border-box-1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import leftMiddle from './leftMiddle/index.vue';
|
||||
import leftTop from './leftTop/index.vue';
|
||||
import leftBottom from './leftBottom/index.vue';
|
||||
import rightMiddle from './rightMiddle/index.vue';
|
||||
export default {
|
||||
components: {
|
||||
leftMiddle,
|
||||
leftTop,
|
||||
leftBottom,
|
||||
rightMiddle,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.room {
|
||||
@import '@/assets/scss/pxtovw.scss';
|
||||
.operation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
padding: vw(20);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.leftBox {
|
||||
flex-basis: 25%;
|
||||
flex-basis: vw(462);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.rightBox {
|
||||
flex-basis: 74%;
|
||||
margin-left: 1%;
|
||||
flex-basis: vw(1326);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="leftBottom">
|
||||
<dv-border-box-13 class="leftBottom">
|
||||
<div class="echartsContainer" ref="echartsContainer"></div>
|
||||
<section class="dataSection">
|
||||
<span>平均接台时间</span>
|
||||
</section>
|
||||
</dv-border-box-13>
|
||||
</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 lang="scss" scoped>
|
||||
@import '@/assets/scss/pxtovw.scss';
|
||||
.leftBottom {
|
||||
height: vw(380);
|
||||
background: #011343;
|
||||
:deep(.dv-border-box-13) {
|
||||
padding: vw(50) 0;
|
||||
box-sizing: border-box;
|
||||
.border-box-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.echartsContainer {
|
||||
height: vw(252);
|
||||
}
|
||||
.dataSection {
|
||||
width: vw(280);
|
||||
height: vw(48);
|
||||
line-height: vw(48);
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
margin: 0 auto;
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: vw(280);
|
||||
background-color: rgba(3, 47, 104, 0.6);
|
||||
font-size: vw(18);
|
||||
color: #fff;
|
||||
border-radius: vw(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,139 +0,0 @@
|
||||
<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>
|
||||
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<dv-border-box-13>
|
||||
<comGauge class="echartsContainer" :title="'首台准点率'" :nowNum="86"></comGauge>
|
||||
<section class="dataSection">
|
||||
<p>手术间数</p>
|
||||
<span class="numFont gradientText">100</span>
|
||||
</section>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import comGauge from '@/components/comGauge';
|
||||
export default {
|
||||
components: {
|
||||
comGauge,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/scss/pxtovw.scss';
|
||||
.leftTop {
|
||||
height: vw(500);
|
||||
position: relative;
|
||||
background-color: #011343;
|
||||
:deep(.dv-border-box-13) {
|
||||
padding: vw(60) vw(32);
|
||||
box-sizing: border-box;
|
||||
.border-box-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.echartsContainer {
|
||||
height: vw(252);
|
||||
}
|
||||
.dataSection {
|
||||
width: vw(280);
|
||||
height: vw(60);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(3, 47, 104, 0.6);
|
||||
padding: 0 vw(48);
|
||||
box-sizing: border-box;
|
||||
font-size: vw(20);
|
||||
border-radius: vw(8);
|
||||
margin: 0 auto;
|
||||
span {
|
||||
font-size: vw(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue