大屏更改
This commit is contained in:
parent
327e1013bc
commit
af6bf39cab
@ -179,7 +179,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup lang="ts" name="Report">
|
||||
import CustomTable from '@/components/elTable/index.vue'
|
||||
import { reportList, reportPrintPdf, reportResult, reportMedList, reportFsresult } from '@/api/checkCode/index'
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
width: 100%;
|
||||
font-size: 1.875rem;
|
||||
line-height: 4.6875rem;
|
||||
color: rgba(14, 253, 255, 1);
|
||||
color: #0efdff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -72,13 +72,13 @@
|
||||
width: 75%;
|
||||
float: left;
|
||||
padding-right: 1.5625rem;
|
||||
padding-top: 1.5625rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.rightMain {
|
||||
width: 25%;
|
||||
float: left;
|
||||
padding-top: 1.5625rem;
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
.leftMain_top {
|
||||
@ -106,7 +106,7 @@
|
||||
width: 100%;
|
||||
min-height: 3.75rem;
|
||||
position: relative;
|
||||
padding: .625rem 1.5625rem;
|
||||
padding: .625rem 1.25rem;
|
||||
}
|
||||
|
||||
.leftMain_top ul li .liIn h3 {
|
||||
@ -116,15 +116,15 @@
|
||||
}
|
||||
|
||||
.leftMain_top ul li .liIn .shu {
|
||||
font-size: 1.875rem;
|
||||
color: rgba(14, 253, 255, 1);
|
||||
font-size: 1.625rem;
|
||||
color: #0efdff;
|
||||
font-family: dig;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
|
||||
.leftMain_top ul li .liIn .shu i {
|
||||
font-size: 1rem;
|
||||
margin-left: 0.9375rem;
|
||||
margin-left: .125rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
color: #fff;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.leftMain_top ul li .liIn .zi .span1 {
|
||||
margin-right: 1.5625rem;
|
||||
@ -201,8 +201,8 @@
|
||||
/*左边中间部分排行榜*/
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai {
|
||||
width: 100%;
|
||||
height: 68vh;
|
||||
overflow: hidden;
|
||||
height: 58vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul{
|
||||
@ -220,7 +220,7 @@
|
||||
}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
|
||||
width: 43%;
|
||||
width: 30%;
|
||||
position: relative;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
@ -262,7 +262,7 @@
|
||||
}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
|
||||
width: 40%;
|
||||
width: 50%;
|
||||
height: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 125rem;
|
||||
@ -416,6 +416,83 @@
|
||||
padding: .625rem;
|
||||
}
|
||||
|
||||
.proportion {
|
||||
height: 78vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.proportion ul li .liIn {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 0.9375rem;
|
||||
height: 2.8125rem;
|
||||
}
|
||||
|
||||
.proportion ul li .liIn .liIn_left {
|
||||
width: 43%;
|
||||
position: relative;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.proportion ul li .liIn .liIn_left .bot {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: #05d1fc;
|
||||
border-radius: 62.5rem;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0.3125rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.proportion ul li .liIn .liIn_line {
|
||||
width: 40%;
|
||||
height: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 125rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.proportion ul li .liIn .liIn_line .line_lineIn {
|
||||
width: 100%;
|
||||
height: 1.25rem;
|
||||
background: #05d1fc;
|
||||
border-radius: 125rem;
|
||||
-webkit-animation: widthMove1 2s ease-in-out;
|
||||
}
|
||||
|
||||
.line_lineIn .per {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes widthMove1 {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 98.5%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.proportion ul li .liIn .num {
|
||||
width: 18%;
|
||||
font-family: dig;
|
||||
padding-left: 0.3125rem;
|
||||
}
|
||||
|
||||
|
||||
.rightMain .rightMain_topIn h3 {
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
@ -507,4 +584,58 @@
|
||||
|
||||
.rightMain .rightMain_bottomIn .biaoge_list ul li:frist-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title_nums {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: .3125rem 0 .625rem ;
|
||||
}
|
||||
|
||||
.nums_box {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
/* 适配你深蓝色科技风的滚动条 */
|
||||
/* 整体滚动条容器 */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px; /* 控制滚动条宽度，和你图中一致 */
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* 滚动条轨道（背景） */
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 150, 255, 0.1); /* 半透明蓝底，和界面融合 */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#00d4ff, /* 顶部亮青色，和你的条形颜色呼应 */
|
||||
#0099cc /* 底部深蓝色，和背景协调 */
|
||||
);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 6px rgba(0, 212, 255, 0.5); /* 发光效果，增强科技感 */
|
||||
}
|
||||
|
||||
/* 滑块 hover 效果 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#00f0ff,
|
||||
#00aadd
|
||||
);
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
|
||||
}
|
||||
|
||||
/* 滚动条上下按钮（可选，隐藏或自定义） */
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
@ -4,11 +4,29 @@
|
||||
<div class="leftMain">
|
||||
<div class="leftMain_top">
|
||||
<div class="leftMain_topIn">
|
||||
<div class="title_nums">当月累计数据</div>
|
||||
<ul>
|
||||
<li v-for="item in source">
|
||||
<li v-for="item in sourceMonth">
|
||||
<div class="liIn">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
|
||||
<div class="nums_box">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
|
||||
</div>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
<span class="border_bg_rightBottom"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title_nums">当年累计数据</div>
|
||||
<ul>
|
||||
<li v-for="item in sourceYear">
|
||||
<div class="liIn">
|
||||
<div class="nums_box">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
|
||||
</div>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
@ -23,7 +41,7 @@
|
||||
<div class="leftMain_middle_leftIn">
|
||||
<h3>委托机构当月送检标本数量</h3>
|
||||
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
||||
<div class="biaoge" style="width:100%; height:30vh" ref="chartmain" id="chartmain"></div>
|
||||
<div class="biaoge" style="width:100%; height:25vh" ref="chartmain" id="chartmain"></div>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
@ -31,7 +49,7 @@
|
||||
</div>
|
||||
<div class="leftMain_middle_leftIn leftMain_middle_leftIn_zhe">
|
||||
<h3>近一个月送检标本数量趋势图</h3>
|
||||
<div class="biaoge" style="width:100%; height:30vh" ref="chartmain_zhe" id="chartmain_zhe"></div>
|
||||
<div class="biaoge" style="width:100%; height:25vh" ref="chartmain_zhe" id="chartmain_zhe"></div>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
@ -40,21 +58,21 @@
|
||||
</div>
|
||||
<div class="leftMain_middle_right">
|
||||
<div class="leftMain_middle_rightIn">
|
||||
<h3>委托机构当月送检标本占比</h3>
|
||||
<h3>当日送检样本情况</h3>
|
||||
<div class="biaoge biaoge_pai">
|
||||
<div class="biaoge_paiIn">
|
||||
<ul>
|
||||
<!-- <Vue3SeamlessScroll :list="listData" :step="0.5 as any" :hover="true as any" :key="listData.length"
|
||||
:limitMoveNum="14"> -->
|
||||
<li v-for="(item, i) in listData">
|
||||
<li v-for="(item, i) in dayCounts">
|
||||
<div class="liIn">
|
||||
<div class="liIn_left"><span class="zi">{{ item.groupname }}</span></div>
|
||||
<div class="liIn_left"><span class="zi">{{ item.dict_name }}</span></div>
|
||||
<div class="liIn_line">
|
||||
<div class="line_lineIn" :style="{ width: ` ${item.percentage}` }">
|
||||
<div class="per">{{ item.percentage }}</div>
|
||||
<div class="line_lineIn" :style="{ width: ` ${item.percent}` }">
|
||||
<div class="per">{{ item.percent }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="num">{{ item.groupsum }}</p>
|
||||
<p class="num">{{ item.sl }}</p>
|
||||
</div>
|
||||
</li>
|
||||
<!-- </Vue3SeamlessScroll> -->
|
||||
@ -73,19 +91,24 @@
|
||||
<div class="rightMain">
|
||||
<div class="rightMain_top">
|
||||
<div class="rightMain_topIn">
|
||||
<h3>当日送检样本情况</h3>
|
||||
<div class="biaoge" style="width:100%; height:35vh" ref="chartmain_bing" id="chartmain_bing"></div>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
<span class="border_bg_rightBottom"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightMain_bottom">
|
||||
<div class="rightMain_bottomIn">
|
||||
<h3>送检项目分类占比</h3>
|
||||
<div class="biaoge biaoge_list" ref="sjRef" style="width:100%; height:34vh">
|
||||
|
||||
<h3>委托机构当月送检标本占比</h3>
|
||||
<div class="proportion">
|
||||
<ul>
|
||||
<!-- <Vue3SeamlessScroll :list="listData" :step="0.5 as any" :hover="true as any" :key="listData.length"
|
||||
:limitMoveNum="14"> -->
|
||||
<li v-for="(item, i) in listData">
|
||||
<div class="liIn">
|
||||
<div class="liIn_left"><span class="zi" :title="item.groupname">{{ item.groupname }}</span></div>
|
||||
<div class="liIn_line">
|
||||
<div class="line_lineIn" :style="{ width: ` ${item.percentage}` }">
|
||||
<div class="per">{{ item.percentage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="num">{{ item.groupsum }}</p>
|
||||
</div>
|
||||
</li>
|
||||
<!-- </Vue3SeamlessScroll> -->
|
||||
</ul>
|
||||
</div>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
@ -104,20 +127,36 @@ import * as echarts from 'echarts';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
|
||||
import { getallcount } from '@/api/regional'
|
||||
|
||||
const source = ref([
|
||||
const sourceMonth = ref([
|
||||
{ name: '区域机构', num: 0, unit: '家', pre: 'jgs' },
|
||||
{ name: '检验人数', num: 0, unit: '人', pre: 'rs' },
|
||||
{ name: '检验管数', num: 0, unit: '个', pre: 'gs' },
|
||||
{ name: '检验报告数', num: 0, unit: '份', pre: 'bgs' },
|
||||
{ name: '检验项目数', num: 0, unit: '个', pre: 'xms' },
|
||||
])
|
||||
const sourceYear = ref([
|
||||
{ name: '区域机构', num: 0, unit: '家', pre: 'jgs' },
|
||||
{ name: '检验人数', num: 0, unit: '人', pre: 'rs' },
|
||||
{ name: '检验管数', num: 0, unit: '个', pre: 'gs' },
|
||||
{ name: '检验报告数', num: 0, unit: '份', pre: 'bgs' },
|
||||
])
|
||||
|
||||
|
||||
const dayCounts = ref([
|
||||
{ dict_name: '检验申请', sl: 0, percent: '0%' },
|
||||
{ dict_name: '标本送检', sl: 0, percent: '0%' },
|
||||
{ dict_name: '上机检测', sl: 0, percent: '0%' },
|
||||
{ dict_name: '结果审核', sl: 0, percent: '0%' },
|
||||
])
|
||||
|
||||
const listData: any = ref([])
|
||||
|
||||
|
||||
const chartmain = ref()
|
||||
|
||||
let echarts1Instance: echarts.ECharts | null = null
|
||||
let echarts3Instance: echarts.ECharts | null = null
|
||||
const getEcharts1 = (data: any) => {
|
||||
const Intance = echarts.init(chartmain.value);
|
||||
echarts1Instance = echarts.init(chartmain.value);
|
||||
var dataAxis = data.map((item: any) => item.daynum + '日')
|
||||
var data = data.map((item: any) => item.sl)
|
||||
const option = {
|
||||
@ -167,10 +206,11 @@ const getEcharts1 = (data: any) => {
|
||||
fontSize: 12, // 文字大小
|
||||
fontWeight: 'normal' // 文字粗细
|
||||
},
|
||||
height: 20,
|
||||
left: '9%', //滚动条靠左侧的百分比
|
||||
bottom: 0,
|
||||
start: 0,//滚动条的起始位置
|
||||
end: 70 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
}],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -223,73 +263,12 @@ const getEcharts1 = (data: any) => {
|
||||
}
|
||||
]
|
||||
};
|
||||
Intance.setOption(option);
|
||||
}
|
||||
const chartmain_bing = ref()
|
||||
const getEcharts2 = (data: any) => {
|
||||
const names = data.map((item: any) => item.name)
|
||||
const Intance = echarts.init(chartmain_bing.value);
|
||||
const option = {
|
||||
title: {
|
||||
text: '数据情况统计',
|
||||
subtext: '',
|
||||
left: 'right',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
// top: 'middle',
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 'right',
|
||||
data: names,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
|
||||
},
|
||||
grid: {
|
||||
x: '-10%',
|
||||
y: 40,
|
||||
x2: 20,
|
||||
y2: 20,
|
||||
},
|
||||
color: ['#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '65%',
|
||||
center: ['45%', '50%'],
|
||||
selectedMode: 'single',
|
||||
data: data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
Intance.setOption(option);
|
||||
echarts1Instance.setOption(option);
|
||||
}
|
||||
|
||||
const chartmain_zhe = ref()
|
||||
const getEcharts3 = () => {
|
||||
const Intance = echarts.init(chartmain_zhe.value);
|
||||
echarts3Instance = echarts.init(chartmain_zhe.value);
|
||||
const xData = listData.value[0].dayline.map((item: any) => item.daynum + '日')
|
||||
const tooltips = listData.value.map((item: any) => item.groupname)
|
||||
const colors = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
|
||||
@ -375,10 +354,11 @@ const getEcharts3 = () => {
|
||||
fontSize: 12, // 文字大小
|
||||
fontWeight: 'normal' // 文字粗细
|
||||
},
|
||||
height: 20,
|
||||
left: '9%', //滚动条靠左侧的百分比
|
||||
bottom: 0,
|
||||
start: 0,//滚动条的起始位置
|
||||
end: 70 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
}],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -402,118 +382,57 @@ const getEcharts3 = () => {
|
||||
},
|
||||
series: arr
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
Intance.setOption(option);
|
||||
echarts3Instance.setOption(option);
|
||||
}
|
||||
|
||||
const sjRef = ref()
|
||||
const getEcharts4 = (data: any) => {
|
||||
const names = data.map((item: any) => item.name)
|
||||
const Intance = echarts.init(sjRef.value);
|
||||
const option = {
|
||||
title: {
|
||||
text: '数据情况统计',
|
||||
subtext: '',
|
||||
left: 'right',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
// top: 'middle',
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 'right',
|
||||
data: names,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
// 滚动箭头样式（兼容写法）
|
||||
pageIcon: 'circle', // 箭头形状（可选：'arrow'/'circle'等）
|
||||
pageIconColor: '#0efdff', // 箭头颜色（核心配置，替代pageButtonItemStyle）
|
||||
pageIconSize: 12, // 箭头大小
|
||||
pageIconInactiveColor: '#666666', // 首尾不可滚动时的箭头颜色
|
||||
pageTextStyle: {
|
||||
color: '#0efdff' // 分页文字颜色（若显示数字分页）
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
x: '-10%',
|
||||
y: 40,
|
||||
x2: 20,
|
||||
y2: 20,
|
||||
},
|
||||
color: ['#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '65%',
|
||||
center: ['45%', '50%'],
|
||||
selectedMode: 'single',
|
||||
data: data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
Intance.setOption(option);
|
||||
// 监听窗口大小变化，调整图表大小
|
||||
const handleResize = () => {
|
||||
if (echarts1Instance) {
|
||||
echarts1Instance.resize();
|
||||
}
|
||||
if (echarts3Instance) {
|
||||
echarts3Instance.resize();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getDataInfo = () => {
|
||||
getallcount().then((res: any) => {
|
||||
source.value.forEach(item => {
|
||||
item.num = res.data.regStatAll[item.pre]
|
||||
getallcount().then((res) => {
|
||||
// 更新当月累计数据
|
||||
sourceMonth.value.forEach(item => {
|
||||
item.num = res.data.regStatAllMonth[item.pre]
|
||||
})
|
||||
|
||||
// 更新当年累计数据
|
||||
sourceYear.value.forEach(item => {
|
||||
item.num = res.data.regStatAllYear[item.pre]
|
||||
})
|
||||
// 委托机构当月送检标本占比
|
||||
listData.value = res.data.regStatHospMonth
|
||||
// nextTick(() => {
|
||||
// // 数据更新后强制重绘
|
||||
// (document.querySelector('.Vue3SeamlessScroll') as any)?._init();
|
||||
// })
|
||||
const data2 = res.data.regStatStatus.map((item: any) => {
|
||||
return {
|
||||
name: item.dict_name,
|
||||
value: item.sl,
|
||||
}
|
||||
})
|
||||
const data4 = res.data.regStatSample.map((item: any) => {
|
||||
return {
|
||||
name: item.SampleTypeName,
|
||||
value: item.sl,
|
||||
}
|
||||
})
|
||||
// 当日送检样本情况
|
||||
dayCounts.value.forEach(element => {
|
||||
res.data.regStatStatus.forEach((item: any) => {
|
||||
if (element.dict_name === item.dict_name) {
|
||||
element.sl = item.sl
|
||||
element.percent = item.percent
|
||||
}
|
||||
})
|
||||
});
|
||||
getEcharts1(res.data.regStatMonth)
|
||||
getEcharts2(data2)
|
||||
getEcharts3()
|
||||
getEcharts4(data4)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataInfo()
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
// 销毁ECharts实例
|
||||
if (echarts1Instance) echarts1Instance.dispose();
|
||||
if (echarts3Instance) echarts3Instance.dispose();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user