@0Melon0
1 year ago
@ -1,5 +1,12 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [
|
presets: ['@vue/cli-plugin-babel/preset'],
|
||||||
'@vue/cli-plugin-babel/preset'
|
plugins: [
|
||||||
]
|
[
|
||||||
}
|
'component',
|
||||||
|
{
|
||||||
|
libraryName: 'element-ui',
|
||||||
|
styleLibraryName: 'theme-chalk',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|||||||
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 883 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 976 B After Width: | Height: | Size: 976 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 750 B |
|
After Width: | Height: | Size: 883 B |
|
After Width: | Height: | Size: 937 B |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
@ -1,9 +1,68 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-[51.29vh]"></div>
|
<div class="w-[51.29vh] h-[40.09vh] bgBottomLeftBox mt-[2.68vh] relative">
|
||||||
|
<div class="w-[12.4vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center">
|
||||||
|
<img src="@/assets/svg/Monitor/BottomLeft/Triangle.svg" />
|
||||||
|
<span class="text-[2.03vh] youshe leading-none">手术量统计</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-[42.96vh] h-[27.12vh] ml-[2.96vh] my-[3.7vh] border border-orange-500" ref="echartsContainer"></div>
|
||||||
|
<div class="absolute right-0 top-1/2 -translate-y-1/2 w-[3.51vh] h-[12.6vh] bgWeekBox">
|
||||||
|
<div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]">周</div>
|
||||||
|
<div class="h-[6.3vh] leading-[6.3vh] text-center text-[#C0D3E1]">月</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import * as echarts from 'echarts';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chartOptions: {
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '0%',
|
||||||
|
top: '0%',
|
||||||
|
bottom: '10%',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['择期手术', '急诊手术', '日间手术', '门诊手术'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [87, 108, 50, 92],
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '10%',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const echartsContainer = this.$refs.echartsContainer;
|
||||||
|
const chartLeft = echarts.init(echartsContainer);
|
||||||
|
chartLeft.setOption(this.chartOptions);
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style>
|
||||||
|
.bgBottomLeftBox {
|
||||||
|
background-image: url('@/assets/svg/Monitor/BottomLeft/Box.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.bgWeekBox {
|
||||||
|
background-image: url('@/assets/svg/Monitor/BottomLeft/WeekActive.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.bgMonthBox {
|
||||||
|
background-image: url('@/assets/svg/Monitor/BottomLeft/MonthActive.svg');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,9 +1,89 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-[116.94vh]"></div>
|
<div class="w-[116.94vh] h-[39.62vh] bgTopRightBox bg-contain bg-center bg-no-repeat p-[2.96vh] box-border">
|
||||||
|
<el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
|
||||||
|
<el-carousel-item v-for="item in 3" :key="item">
|
||||||
|
<section>
|
||||||
|
<template v-for="(item1, index) in 21">
|
||||||
|
<div v-if="index % 3" class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
|
||||||
|
<p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
|
||||||
|
OR-{{ String(index + 1).padStart(3, '0') }}
|
||||||
|
</p>
|
||||||
|
<div class="absolute w-[8.51vh] h-[2.77vh] left-[2.03vh] bottom-[1.48vh] flex justify-between items-end">
|
||||||
|
<img src="@/assets/svg/Monitor/TopRight/OpingIcon.svg" />
|
||||||
|
<span class="text-[1.85vh] text-[#B53FDF] youshe">手术中</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="index % 5" class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
|
||||||
|
<p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
|
||||||
|
OR-{{ String(index + 1).padStart(3, '0') }}
|
||||||
|
</p>
|
||||||
|
<div class="absolute w-[10.27vh] h-[2.77vh] left-[1.2vh] bottom-[1.48vh] flex justify-between items-end">
|
||||||
|
<img src="@/assets/svg/Monitor/TopRight/OpendIcon.svg" />
|
||||||
|
<span class="text-[1.85vh] text-[#946FEC] youshe">麻醉结束</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="w-[12.59vh] h-[9.81vh] ItemBox relative" :key="index">
|
||||||
|
<p class="absolute w-[10.74vh] h-[2.77vh] leading--[2.77vh] text-[1.85vh] left-[0.92vh] top-[0.74vh] text-center youshe PBg">
|
||||||
|
OR-{{ String(index + 1).padStart(3, '0') }}
|
||||||
|
</p>
|
||||||
|
<div class="absolute w-[8.51vh] h-[2.77vh] left-[2.03vh] bottom-[1.48vh] flex justify-between items-end">
|
||||||
|
<img src="@/assets/svg/Monitor/TopRight/OpWaitIcon.svg" />
|
||||||
|
<span class="text-[1.85vh] text-[#0CFFFF] youshe">空置中</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</section>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import { Carousel, CarouselItem } from 'element-ui';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'el-carousel': Carousel,
|
||||||
|
'el-carousel-item': CarouselItem,
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style lang="scss" scoped>
|
||||||
|
.bgTopRightBox {
|
||||||
|
background-image: url('@/assets/svg/Monitor/TopRight/Box.svg');
|
||||||
|
:deep(.el-carousel) {
|
||||||
|
height: 39.62vh;
|
||||||
|
.el-carousel__container {
|
||||||
|
height: 39.62vh;
|
||||||
|
.el-carousel__item {
|
||||||
|
section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, minmax(12.59vh, 1fr));
|
||||||
|
gap: 3.7vh;
|
||||||
|
grid-row-gap: 1.85vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ItemBox {
|
||||||
|
background-image: url('@/assets/svg/Monitor/TopRight/ItemBox.svg'), url('@/assets/svg/Monitor/TopRight/ItemBoxBorder.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.PBg {
|
||||||
|
background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, rgba(0, 147, 255, 0.37) 44%, rgba(0, 147, 255, 0) 99%);
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: linear-gradient(90deg, rgba(0, 147, 255, 0) 0%, #0093ff 49%, rgba(0, 147, 255, 0) 99%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||