@0Melon0
2 years ago
parent
a38439d3e9
commit
f5bdab5b22
@ -1,42 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="room">
|
<dv-border-box-1>
|
||||||
|
<section class="operation">
|
||||||
<div class="leftBox">
|
<div class="leftBox">
|
||||||
<leftMiddle></leftMiddle>
|
<leftTop></leftTop>
|
||||||
|
<leftBottom></leftBottom>
|
||||||
</div>
|
</div>
|
||||||
<div class="rightBox">
|
<div class="rightBox">
|
||||||
<rightMiddle></rightMiddle>
|
<rightMiddle></rightMiddle>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</dv-border-box-1>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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';
|
import rightMiddle from './rightMiddle/index.vue';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
leftMiddle,
|
leftTop,
|
||||||
|
leftBottom,
|
||||||
rightMiddle,
|
rightMiddle,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.room {
|
@import '@/assets/scss/pxtovw.scss';
|
||||||
|
.operation {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 20px;
|
padding: vw(20);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.leftBox {
|
.leftBox {
|
||||||
flex-basis: 25%;
|
flex-basis: vw(462);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.rightBox {
|
.rightBox {
|
||||||
flex-basis: 74%;
|
flex-basis: vw(1326);
|
||||||
margin-left: 1%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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