Before Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 7.7 KiB |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 7.1 KiB |
After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 34 KiB |
|
@ -568,7 +568,7 @@ onBeforeMount(() => {
|
|||
|
||||
getOption();
|
||||
setChart();
|
||||
}, 400);
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<div class="module">
|
||||
<div class="displayFlex left_bg">
|
||||
<div class="flex1" style="flex: 0.5">
|
||||
<div
|
||||
class="flex1"
|
||||
style="flex: 0.5"
|
||||
>
|
||||
<div class="yd_title left_1">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
|
@ -46,71 +49,112 @@
|
|||
></ePie2>
|
||||
</div>
|
||||
|
||||
<div class="flex1" style="margin-top: 10px">
|
||||
<div
|
||||
class="flex1"
|
||||
style="margin-top: 10px"
|
||||
>
|
||||
<div class="yd_title left_3">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm_title_1"></div>
|
||||
<tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb>
|
||||
<tnb
|
||||
:list="data.lmb.tnbrs"
|
||||
:year="data.lmb.year"
|
||||
></tnb>
|
||||
<div class="sm_title_2"></div>
|
||||
<gxy :list="data.lmb.gxyrs" :year="data.lmb.year"></gxy>
|
||||
<gxy
|
||||
:list="data.lmb.gxyrs"
|
||||
:year="data.lmb.year"
|
||||
></gxy>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
<div class="flex1">
|
||||
<div class="yd_title center_2">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_top">
|
||||
<div class="item">
|
||||
<img src="@/assets/images/hygiene/mjzrc.png" class="left" />
|
||||
<img
|
||||
src="@/assets/images/hygiene/mjzrc.png"
|
||||
class="left"
|
||||
/>
|
||||
<div class="right">
|
||||
<div class="right_top">门急诊人次</div>
|
||||
<img src="@/assets/images/hygiene/jt.png" class="right_center" />
|
||||
<img
|
||||
src="@/assets/images/hygiene/jt.png"
|
||||
class="right_center"
|
||||
/>
|
||||
<div class="right_bottom">{{ data.mz.mjzrc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="@/assets/images/hygiene/zyrs.png" class="left" />
|
||||
<img
|
||||
src="@/assets/images/hygiene/zyrs.png"
|
||||
class="left"
|
||||
/>
|
||||
<div class="right">
|
||||
<div class="right_top">住院人数</div>
|
||||
<img src="@/assets/images/hygiene/jt.png" class="right_center" />
|
||||
<img
|
||||
src="@/assets/images/hygiene/jt.png"
|
||||
class="right_center"
|
||||
/>
|
||||
<div class="right_bottom">{{ data.mz.zyrs }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1" style="flex: 0.3">
|
||||
<div
|
||||
class="flex1"
|
||||
style="flex: 0.3"
|
||||
>
|
||||
<div class="yd_title center_1">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="minTop">
|
||||
<div class="minTopPart">
|
||||
<div class="history2">
|
||||
<div class="va">33.67万</div>
|
||||
<img src="@/assets/images/hygiene/shang_left.png" alt="" />
|
||||
<img
|
||||
src="@/assets/images/hygiene/shang_left.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="moveImg"
|
||||
src="@/assets/images/hygiene/shang_left2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="moveImg2"
|
||||
src="@/assets/images/hygiene/jd.gif"
|
||||
alt=""
|
||||
/>
|
||||
<div class="historyimg">建档份数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="minTopPart2">
|
||||
<div class="left">
|
||||
<div class="leftImg"><eP4></eP4></div>
|
||||
<div class="leftImg">
|
||||
<eP4></eP4>
|
||||
</div>
|
||||
<div class="left_me">
|
||||
<div>建档率</div>
|
||||
<div class="bo">92.96%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rightImg"><eP4_1></eP4_1></div>
|
||||
<div class="rightImg">
|
||||
<eP4_1></eP4_1>
|
||||
</div>
|
||||
<div class="right_me">
|
||||
<div>家庭医生签约率</div>
|
||||
<div class="bo">62.16%</div>
|
||||
|
@ -119,12 +163,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1" style="margin-top: 20px">
|
||||
<div
|
||||
class="flex1"
|
||||
style="margin-top: 20px"
|
||||
>
|
||||
<div class="yd_title familyPlanning">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="width: 100%; "> -->
|
||||
<eP5 :list="data.jsbgl"></eP5>
|
||||
|
@ -132,41 +179,66 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<div class="flex1" style="flex: 0.9">
|
||||
<div
|
||||
class="flex1"
|
||||
style="flex: 0.9"
|
||||
>
|
||||
<div class="yd_title mechanism">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history">
|
||||
<div class="history1">
|
||||
<div class="va">{{ data.fyglrs.ycfrc }}</div>
|
||||
<img src="@/assets/images/hygiene/yf.png" alt="" />
|
||||
<img
|
||||
src="@/assets/images/hygiene/fy.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/hygiene/fy1.png"
|
||||
alt=""
|
||||
class="fyMove"
|
||||
/>
|
||||
<div class="historyimg">孕产妇系统管理人数</div>
|
||||
</div>
|
||||
<div class="history1">
|
||||
<div class="va">{{ data.fyglrs.etrs }}</div>
|
||||
<img src="@/assets/images/hygiene/et.png" alt="" />
|
||||
<img
|
||||
src="@/assets/images/hygiene/fy.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/hygiene/fy2.png"
|
||||
alt=""
|
||||
class="fyMove"
|
||||
/>
|
||||
<div class="historyimg">0-6岁儿童系统管理人数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1" style="flex: 1.1">
|
||||
<div
|
||||
class="flex1"
|
||||
style="flex: 1.1"
|
||||
>
|
||||
<div class="yd_title service">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<eP7 :list="data.jktj.jktjrs" :year="data.jktj.year"></eP7>
|
||||
<eP7
|
||||
:list="data.jktj.jktjrs"
|
||||
:year="data.jktj.year"
|
||||
></eP7>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title last">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
@ -175,7 +247,10 @@
|
|||
@mouseenter="stopAutoScroll"
|
||||
@mouseleave="startAutoScroll"
|
||||
>
|
||||
<div class="item" v-for="item in data.jkhd">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in data.jkhd"
|
||||
>
|
||||
{{ item.jkhd }}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -729,6 +804,31 @@ const getData = async () => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.fyMove{
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
width: 60px;
|
||||
height: 64px;
|
||||
animation: example 3s infinite linear;
|
||||
}
|
||||
@keyframes example {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.va {
|
||||
margin-top: 27px;
|
||||
margin-bottom: 10px;
|
||||
|
@ -901,14 +1001,41 @@ const getData = async () => {
|
|||
text-align: center;
|
||||
font-style: normal;
|
||||
font-family: PangMenZhengDao;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.moveImg {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
animation: example 3s infinite linear;
|
||||
}
|
||||
@keyframes example {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.moveImg2 {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
}
|
||||
.va {
|
||||
margin-top: 27px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
font-family: TCloudNumber, TCloudNumber;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
|