@0Melon0
1 year ago
parent
0b58681349
commit
a1114626d6
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
@ -1,9 +1,24 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="w-[171.38vh] flex justify-between mx-auto">
|
||||
<div class="w-[51.48vh]">
|
||||
<leftTop></leftTop>
|
||||
<leftBottom></leftBottom>
|
||||
</div>
|
||||
<rightMid></rightMid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<style></style>
|
||||
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="h-[32.4vh] mt-[2.77vh] bgLeftBottomBox pt-[3.24vh]">
|
||||
<div class="w-[43.79vh] h-[26.85vh] mx-auto" ref="echartsContainer"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartOptions: {
|
||||
grid: {
|
||||
top: '13%',
|
||||
left: '13%',
|
||||
right: '10%',
|
||||
bottom: '13%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['3月', '4月', '5月', '6月', '7月', '8月'],
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
color: '#fff',
|
||||
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,142,114,0.3)',
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [95, 97, 96, 98, 99, 96],
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: '#30FDFF',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 128, 255, 0.7)', // 开始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(200, 254, 255, 0)', // 结束颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const chartContainer = this.$refs.echartsContainer;
|
||||
const chart = echarts.init(chartContainer);
|
||||
chart.setOption(this.chartOptions);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bgLeftBottomBox {
|
||||
background-image: url('@/assets/svg/Operation/LeftBottom/Box.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
|
||||
<div class="w-[26.85vh] h-[26.85vh] mx-auto m-[2vh]" ref="echartsContainer"></div>
|
||||
<div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox mx-auto mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
|
||||
<section>
|
||||
<div class="flex">
|
||||
<img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
|
||||
<span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
|
||||
</div>
|
||||
<p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none">350</p>
|
||||
</section>
|
||||
<section>
|
||||
<template v-for="(item, index) in peopleData">
|
||||
<div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
|
||||
<div class="flex items-end">
|
||||
<img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
|
||||
<span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-[#733FF3] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
|
||||
<span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</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/Operation/LeftTop/Box.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bgTopLeftItemBox {
|
||||
background-image: url('@/assets/svg/Operation/LeftTop/ItemBox.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.peopleItemBox {
|
||||
background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
|
||||
border: 1.5px solid;
|
||||
border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="w-[116.94vh] h-[85.51vh] bgRightMidBox">
|
||||
<div class="w-[112.96vh] h-[77.03vh] mx-auto mt-[2.96vh] border border-teal-400">
|
||||
<div class="h-[4.44vh] leading-[4.44vh] text-center">
|
||||
<div class="inline-block">
|
||||
<div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">手术间</div>
|
||||
<div class="inline-block w-[18.51vh] text-[#AAAAAA] text-[1.48vh]">手术名称</div>
|
||||
<div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">申请类型</div>
|
||||
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">入手术室时间</div>
|
||||
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">麻醉开始时间</div>
|
||||
<div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">手术开始时间</div>
|
||||
<div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">是否准点</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[72.58vh] border border-red-400">
|
||||
<el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
|
||||
<el-carousel-item v-for="item in 1" :key="item">
|
||||
<section></section>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bgRightMidBox {
|
||||
background-image: url('@/assets/svg/Operation/RightMid/Box.svg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue