统计大屏

This commit is contained in:
wyuu 2025-11-14 18:13:45 +08:00
parent 62eaf32b75
commit 06be7c0ff7
13 changed files with 195 additions and 97 deletions

View File

@ -41,6 +41,7 @@
"vue-plugin-hiprint": "^0.0.60",
"vue-router": "4.2.5",
"vue3-print-nb": "^0.1.4",
"vue3-seamless-scroll": "^3.0.2",
"vue3-select2-component": "^0.1.7",
"vuedraggable": "^4.1.0",
"vxe-pc-ui": "^4.3.2",

View File

@ -390,6 +390,13 @@ defineExpose({
}
:deep(.el-table__footer-wrapper tfoot td.el-table__cell) {
color: #1f6dd3 !important;
font-weight: 700;
/* 可替换为任意颜色值 */
}

View File

@ -71,6 +71,7 @@ import TreeSelect from '@/components/TreeSelect'
// 字典标签组件
import DictTag from '@/components/DictTag'
import print from 'vue3-print-nb';
import Vue3SeamlessScroll from 'vue3-seamless-scroll' // 引入插件
const app = createApp(App)
// 全局方法挂载
@ -97,6 +98,7 @@ app.component('Editor', Editor)
//VUE3标准方法注入全局方法
app.provide('comDict', comDict);
app.use(print); // 注册打印插件
app.use(Vue3SeamlessScroll)
app.provide('$vuePrint', app.config.globalProperties.$vuePrint);
app.use(router)
app.use(store)

View File

@ -21,7 +21,7 @@ NProgress.configure({
showSpinner: false
});
const whiteList = ['/login', '/register', '/report'];
const whiteList = ['/login', '/register', '/report', '/checkCode'];
router.beforeEach((to, from, next) => {
NProgress.start()

View File

@ -52,6 +52,12 @@ export const constantRoutes = [{
component: () => import('@/views/checkCode/report'),
hidden: true
},
{
path: '/checkCode',
component: () => import('@/views/checkCode/index'),
hidden: true
},
{
path: "/:pathMatch(.*)*",
component: () => import('@/views/error/404'),
@ -62,6 +68,12 @@ export const constantRoutes = [{
component: () => import('@/views/error/401'),
hidden: true
},
// 大屏
{
path: '/regional/statistics/overview',
component: () => import('@/views/regional/statistics/overview/index'),
hidden: true
},
{
path: '',
component: Layout,

View File

@ -28,9 +28,12 @@ const useUserStore = defineStore(
loginAnonymous({
username: data.name
}).then(res => {
setToken(res.token)
this.token = res.token
resolve()
if (res.code == 200) {
setToken(res.token)
this.token = res.token
resolve(true)
}
}).catch(error => {
reject(error)
})

View File

@ -165,9 +165,12 @@ import { usePrintStore } from '@/store/modules/printStore'
import { fetchCodeList, addObj, fetchCodeDetail, fetchCodeExec, fetchCodeReqmain } from '@/api/checkCode/index'
const aotuSize = classCom.useAutoSize();
//@ts-ignore
import useUserStore from '@/store/modules/user'
//@ts-ignore
import { comDict } from '@/utils/dict'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const userStore = useUserStore()
const printStore = usePrintStore();
const compactForm = ref<HTMLElement | null>(null);
const heightForm = ref(90);
@ -533,12 +536,17 @@ const cancelHandle = () => {
}
onMounted(async () => {
// 进入页面单点登录
const result = await userStore.loginAnonymous({ name: 'admin' })
if (result) {
getList()
}
// 初始化3天区间(今天-前两天)
// const end = dayjs().format('YYYY-MM-DD HH:mm:ss');
// const start = dayjs().subtract(2, 'day').format('YYYY-MM-DD HH:mm:ss'); //add 时间往后
// queryParams.times = [start, end];
// console.log(queryParams.times);
getList()
adjustTableHeight();
// 加载病人来源字典
const dictRefs = await comDict('PT', 'HOS', 'ST');
@ -567,8 +575,8 @@ function adjustTableHeight() {
if (compactForm.value) {
// 获取高度
heightForm.value = compactForm.value.offsetHeight;
tableConfig.value.height = `calc(74vh - ${heightForm.value}px)`; // 设置表格容器的高度
rightTableConfig.value.height = `calc(74vh - ${heightForm.value}px)`;
tableConfig.value.height = `calc(80vh - ${heightForm.value}px)`; // 设置表格容器的高度
rightTableConfig.value.height = `calc(80vh - ${heightForm.value}px)`;
}
}
@ -665,6 +673,7 @@ const printPdf = () => {
}
.right-table {
margin-top: .625rem;
border: 1px solid #E1E9F7;
padding-top: .3125rem;
}
@ -683,6 +692,7 @@ const printPdf = () => {
margin-top: .35rem;
background-color: #f0f3f8;
padding: .3rem 2.5rem;
margin-top: .625rem;
}
.time-line-item {
@ -690,6 +700,7 @@ const printPdf = () => {
align-items: center;
justify-content: space-around;
width: 16.6%;
// padding: 0 30px;
.timeline-content {

View File

@ -819,6 +819,7 @@ interface DictData {
// 字典数据存储
const dictData = ref<DictData>({});
onMounted(async () => {
// 初始化3天区间(今天-前两天)
// const end = dayjs().format('YYYY-MM-DD HH:mm:ss');
@ -826,8 +827,10 @@ onMounted(async () => {
// queryParams.times = [start, end];
// console.log(queryParams.times);
// 进入页面单点登录
userStore.loginAnonymous({ name: 'admin' })
getList()
const result = await userStore.loginAnonymous({ name: 'admin' })
if (result) {
getList()
}
adjustTableHeight();
// 加载病人来源字典

View File

@ -17,7 +17,7 @@
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="开单时间:" prop="times">
<el-form-item label="日期:" prop="times">
<el-date-picker v-model="queryParams.times" type="daterange" range-separator="-" start-placeholder="开始时间"
end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
</el-form-item>
@ -53,10 +53,13 @@ import { listhospital } from "@/api/regional/dict/hospital.js";
import { listregdict } from "@/api/regional/dict/regdict.js";
import { ElMessage } from 'element-plus';
const aotuSize = classCom.useAutoSize();
import dayjs from 'dayjs';
const today = dayjs().format('YYYY-MM-DD');
const queryParams: any = ref({
pageSize: 50,
pageNum: 1,
times: [today, today]
})
const tableData: any = ref([])
const columns: any = ref([
@ -64,7 +67,6 @@ const columns: any = ref([
{ prop: 'sampletypecode', label: '标本代码', align: 'center', visible: true, },
{ prop: 'sampletypename', label: '标本类别', align: 'center', visible: true, },
{ prop: 'sl', label: '数量(份)', align: 'center', visible: true, },
{ prop: 'OrderTime', label: '开单时间', align: 'center', visible: true, },
])
const tableConfig = ref({
border: true, // 边框
@ -119,6 +121,7 @@ const resetHandle = () => {
queryParams.value = {
pageSize: 50,
pageNum: 1,
times: [today, today]
}
handleQuery()
}
@ -131,7 +134,7 @@ const getList = () => {
const hosList = ref([])
const regdictList: any = ref([])
onMounted(() => {
getList()
handleQuery()
listhospital().then((res: any) => {
hosList.value = res.rows.map((item: any) => {
return {

View File

@ -53,10 +53,12 @@ import { listhospital } from "@/api/regional/dict/hospital.js";
import { listregdict } from "@/api/regional/dict/regdict.js";
import { ElMessage } from 'element-plus';
const aotuSize = classCom.useAutoSize();
import dayjs from 'dayjs';
const today = dayjs().format('YYYY-MM-DD');
const queryParams: any = ref({
pageSize: 50,
pageNum: 1,
times: [today, today]
})
const tableData: any = ref([])
const columns: any = ref([
@ -128,6 +130,7 @@ const resetHandle = () => {
queryParams.value = {
pageSize: 50,
pageNum: 1,
times: [today, today]
}
handleQuery()
}
@ -140,7 +143,7 @@ const getList = () => {
const hosList = ref([])
const regdictList: any = ref([])
onMounted(() => {
getList()
handleQuery()
listhospital().then((res: any) => {
hosList.value = res.rows.map((item: any) => {
return {

View File

@ -6,7 +6,7 @@
width: 100%;
min-height: 100vh;
background: url(../images/bg2.jpg) no-repeat;
background-size: cover;
background-size: 100% 100%;
padding-top: 0rem;
padding: 0rem 3.125rem;
@ -113,7 +113,7 @@
font-size: 1.25rem;
font-weight: 700;
color: #fff;
}
}
.leftMain_top ul li .liIn .shu {
font-size: 1.875rem;
@ -157,7 +157,11 @@
width: 100%;
min-height: 3.75rem;
position: relative;
padding: 1.25rem 0.78125rem;
padding: .625rem;
}
.leftMain_middle_leftIn_zhe {
margin-top: 2vh;
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3 {
@ -180,7 +184,7 @@
width: 100%;
min-height: 3.75rem;
position: relative;
padding: 1.25rem 0.78125rem;
padding: .625rem;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn h3 {
@ -197,9 +201,11 @@
/*左边中间部分排行榜*/
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai {
width: 100%;
height: 68vh;
overflow: hidden;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn {
display: flex;
display: -webkit-flex;
@ -210,15 +216,15 @@
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
width: 25%;
width: 43%;
position: relative;
padding-left: 2.1875rem;
padding-left: 1.25rem;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot {
width: 1.25rem;
height: 1.25rem;
background: #f78cf3;
background: #05d1fc;
border-radius: 62.5rem;
display: block;
position: absolute;
@ -248,10 +254,12 @@
background: #05d1fc;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
width: 58%;
width: 40%;
height: 1.25rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 125rem;
@ -260,7 +268,7 @@
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
width: 100%;
height: 1.25rem;
background: #f78cf3;
background: #05d1fc;
border-radius: 6.25rem;
-webkit-animation: widthMove1 2s ease-in-out;
}
@ -394,13 +402,14 @@
width: 100%;
min-height: 3.75rem;
position: relative;
padding: 1.25rem 0.78125rem;
padding: .625rem;
}
.rightMain .rightMain_topIn h3 {
font-size: 1.25rem;
color: #fff;
margin-bottom: 0.78125rem;
font-weight: 700;
}
.rightMain .rightMain_topIn .biaoge {
@ -423,6 +432,7 @@
font-size: 1.25rem;
color: #fff;
margin-bottom: 0.78125rem;
font-weight: 700;
}
/*右下角表格*/

View File

@ -2,7 +2,7 @@
/* CSS Document */
@font-face{
font-family: 'dig';
src : url('../fonts/DIN-Light'),url('../fonts/DIN-Medium'),url('../fonts/DIN-Bold.otf');
src : url('../fonts/DIN-Bold.otf');
}
body,p,div,h1,h2,h3,h4,h5,h6,button,input,ol,li,ul,dl,dt,dd,img,table,tr,td,th,select{
margin:0;

View File

@ -63,30 +63,15 @@
<div class="leftMain_middle_leftIn">
<h3>委托机构当月送检标本数量</h3>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div class="biaoge" style="width:100%; height:26vh" ref="chartmain" id="chartmain"></div>
<div class="biaoge" style="width:100%; height:30vh" ref="chartmain" id="chartmain"></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="leftMain_middle_right">
<div class="leftMain_middle_rightIn">
<h3>当日送检样本情况</h3>
<div class="biaoge biaoge_pai" ref="biaoge_pai" style="width:100%; height:26vh">
</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>
<div class="leftMain_middle">
<div class="leftMain_middle_left">
<div class="leftMain_middle_leftIn">
<div class="leftMain_middle_leftIn leftMain_middle_leftIn_zhe">
<h3>近一个月送检标本数量趋势图</h3>
<div class="biaoge" style="width:100%; height:28vh" ref="chartmain_zhe" id="chartmain_zhe"></div>
<div class="biaoge" style="width:100%; height:30vh" 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>
@ -95,10 +80,25 @@
</div>
<div class="leftMain_middle_right">
<div class="leftMain_middle_rightIn">
<h3>送检项目分类占比</h3>
<div class="biaoge biaoge_bi" ref="sxEhart" style="width:100%; height:28vh">
<h3>委托机构当月送检标本占比</h3>
<div class="biaoge biaoge_pai">
<div class="biaoge_paiIn">
<Vue3SeamlessScroll :list="list" :config="scrollConfig">
<ul>
<li v-for="(item, i) in list">
<div class="liIn">
<div class="liIn_left"><span class="zi">{{ item.name }}</span></div>
<div class="liIn_line">
<div class="line_lineIn" :style="{ width: ` ${item.pre}%` }"></div>
</div>
<p class="num">{{ item.pre }}%</p>
</div>
</li>
</ul>
</Vue3SeamlessScroll>
</div>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
@ -110,8 +110,8 @@
<div class="rightMain">
<div class="rightMain_top">
<div class="rightMain_topIn">
<h3>这里是标题</h3>
<div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
<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>
@ -120,8 +120,8 @@
</div>
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3>这里是标题</h3>
<div class="biaoge biaoge_list" style="width:100%; height:36vh">
<h3>送检项目分类占比</h3>
<div class="biaoge biaoge_list" ref="sjRef" style="width:100%; height:34vh">
</div>
<span class="border_bg_leftTop"></span>
@ -138,13 +138,46 @@
<script setup lang="ts">
import * as echarts from 'echarts';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
//@ts-ignore
const list: any = ref([
{ name: '武汉汉阳医院', pre: 89.7 },
{ name: '武汉大学人民医院', pre: 89.2 },
{ name: '武汉市汉阳区洲头街社区卫生服务中心', pre: 79.7 },
{ name: '武汉市汉阳区五里墩街社区卫生服务中心', pre: 89.1 },
{ name: '武汉市汉阳区二桥街社区卫生服务中心', pre: 89.7 },
{ name: '武汉市汉阳区洲头街社区卫生服务中心', pre: 89 },
{ name: '武汉市汉阳区洲头街社区卫生服务中心', pre: 49.7 },
{ name: '武汉市汉阳区永丰街社区卫生服务中', pre: 89.5 },
{ name: '武汉市汉阳区鹦鹉街社区卫生服务中心', pre: 69.7 },
{ name: '武汉市汉阳区四新街社区卫生服务中心', pre: 89 },
{ name: '武汉市汉阳区五里墩街社区卫生服务中心', pre: 89.7 },
{ name: '武汉大学人民医院', pre: 89.8 },
{ name: '武汉市汉阳区五里墩街社区卫生服务中心', pre: 49.7 },
{ name: '武汉市汉阳区江堤街社区卫生服务中心', pre: 89.7 },
{ name: '武汉市汉阳区洲头街社区卫生服务中心', pre: 89 },
])
const scrollConfig = {
hoverStop: true, // 鼠标点击后停止
direction: 'up', // 滚动方向:up/down/left/right
step: 0.8, // 滚动速度(数值越小越慢)
limitScrollNum: 3, // 列表长度大于等于此值才开始滚动
passive: true,
waitTime: 1000 // 单步滚动完成后停留时间(ms)
}
const chartmain = ref()
const getEcharts1 = () => {
const Intance = echarts.init(chartmain.value);
var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200, 306, 270, 210, 230, 120, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230,];
const option = {
@ -156,7 +189,7 @@ const getEcharts1 = () => {
x: 40,
y: 40,
x2: 20,
y2: 20,
y2: 50,
},
tooltip: {
trigger: 'axis'
@ -166,10 +199,8 @@ const getEcharts1 = () => {
axisLabel: {
/*inside: true,*/
interval: 0,
textStyle: {
color: '#fff',
fontSize: 12
},
color: '#fff',
fontSize: 12
},
axisTick: {
show: false,
@ -182,8 +213,20 @@ const getEcharts1 = () => {
color: '#fff',
}
},
lineStyle: {
color: '#fff',
},
z: 10
},
dataZoom: [{
type: 'slider',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
bottom: 0,
start: 0,//滚动条的起始位置
end: 60 //滚动条的截止位置(按比例分割你的柱状图x轴长度)
}],
yAxis: {
type: 'value',
name: '单位:个',
@ -199,18 +242,13 @@ const getEcharts1 = () => {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
}
color: '#fff',
fontSize: 12
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{
type: 'bar',
@ -242,10 +280,10 @@ const getEcharts1 = () => {
};
Intance.setOption(option);
}
const biaoge_pai = ref()
const chartmain_bing = ref()
const getEcharts2 = () => {
const Intance = echarts.init(biaoge_pai.value);
const Intance = echarts.init(chartmain_bing.value);
const option = {
title: {
text: '数据情况统计',
@ -287,7 +325,7 @@ const getEcharts2 = () => {
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
center: ['45%', '50%'],
selectedMode: 'single',
data: [
{
@ -317,6 +355,7 @@ const chartmain_zhe = ref()
const getEcharts3 = () => {
const Intance = echarts.init(chartmain_zhe.value);
const xData = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24', '25日', '26日', '27日', '28日', '29日', '30日', '31日'];
const option = {
title: {
@ -331,13 +370,13 @@ const getEcharts3 = () => {
fontSize: 12,
},
right: '10%',
data: ['折线一', '折线二']
data: ['武汉汉阳医院', '武汉第五医院']
},
grid: {
x: 40,
y: 40,
x2: 20,
y2: 20,
y2: 50,
},
toolbox: {
feature: {
@ -350,11 +389,9 @@ const getEcharts3 = () => {
axisLabel: {
/*inside: true,*/
interval: 0,
textStyle: {
color: '#fff',
fontSize: 12
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
@ -367,8 +404,18 @@ const getEcharts3 = () => {
color: '#fff',
}
},
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日']
data: xData
},
dataZoom: [{
type: 'slider',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
bottom: 0,
start: 0,//滚动条的起始位置
end: 60 //滚动条的截止位置(按比例分割你的柱状图x轴长度)
}],
yAxis: {
type: 'value',
@ -384,33 +431,29 @@ const getEcharts3 = () => {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
}
color: '#fff',
fontSize: 12
}
},
series: [
{
name: '折线一',
name: '武汉汉阳医院',
type: 'line',
stack: '总量',
data: [280, 102, 191, 134, 390, 230, 210],
data: [457, 122, 213, 544, 260, 830, 710, 256, 300, 270, 210, 567, 234, 160, 150, 456, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300,]
,
itemStyle: {
normal: {
color: "#0efdff",//折线点的颜色
lineStyle: {
color: "#0efdff",//折线的颜色
width: 2,
}
},
color: "#0efdff",//折线点的颜色
},
lineStyle: {
color: "#0efdff",//折线的颜色
width: 2,
}
},
{
name: '折线二',
name: '武汉第五医院',
type: 'line',
stack: '总量',
data: [100, 132, 131, 234, 290, 330, 110]
data: [100, 589, 131, 234, 290, 330, 110, 543, 130, 467, 150, 160, 170, 180, 653, 763, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310, 320, 330, 340, 350, 360, 370, 380, 390, 400, 410, 420,]
},
]
};
@ -421,10 +464,10 @@ const getEcharts3 = () => {
Intance.setOption(option);
}
const sxEhart = ref()
const sjRef = ref()
const getEcharts4 = () => {
const Intance = echarts.init(sxEhart.value);
const Intance = echarts.init(sjRef.value);
const option = {
title: {
text: '数据情况统计',
@ -466,7 +509,7 @@ const getEcharts4 = () => {
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
center: ['45%', '50%'],
selectedMode: 'single',
data: [
{ value: 156, name: '尿液' },