489 lines
14 KiB
Vue
489 lines
14 KiB
Vue
<template>
|
||
<div id="indexPage">
|
||
<span class="my-span" style="margin-left: 14px">快捷入口</span>
|
||
<div class="my-quickdiv">
|
||
<ContentWrap class="my-quick" v-for="(item, index) in projects" :key="`ContentWrap-${index}`">
|
||
<router-link
|
||
:to="item.message"
|
||
class="flex items-center justify-center"
|
||
style="width: 100%; height: 100%; text-decoration: none"
|
||
>
|
||
<div class="my-linkimagediv" :style="getbackground(item.name)">
|
||
<img :src="getImageUrl(item.name)" />
|
||
</div>
|
||
<span class="my-span">{{ item.name }}</span>
|
||
<img :src="getarrowImageUrl(item.name)" />
|
||
</router-link>
|
||
</ContentWrap>
|
||
</div>
|
||
<div class="stats-container">
|
||
<!-- 左侧上下两个统计图区域 -->
|
||
<div class="left-stats">
|
||
<div class="my-statistics">
|
||
<ContentWrap class="my-quickstatistics">
|
||
<span class="my-span">累计已检查登记单概况</span>
|
||
<div class="div-inline">
|
||
<div v-if="isDataReady" style="background-color: rgb(243, 247, 254)">
|
||
<YY
|
||
:mytotalcount="totalcount"
|
||
:myy="y"
|
||
:myyx="yx"
|
||
:myzdyx="zdyx"
|
||
style="height: 300px"
|
||
/>
|
||
</div>
|
||
<div class="flex-gap"></div>
|
||
<!-- 间隙 -->
|
||
<div v-if="isDataReady" style="background-color: rgb(243, 247, 254)">
|
||
<mw :F="F" :M="M" :mytotalcount="totalcount" style="height: 300px" />
|
||
</div>
|
||
</div>
|
||
</ContentWrap>
|
||
</div>
|
||
<div class="my-statistics">
|
||
<ContentWrap class="my-quickstatistics">
|
||
<span class="my-span">已检查登记单概况分布</span>
|
||
<div v-if="iszxDataReady">
|
||
<zx
|
||
:yxArray="yxArray"
|
||
:yArray="yArray"
|
||
:zdyxArray="zdyxArray"
|
||
style="height: 300px"
|
||
/>
|
||
</div>
|
||
</ContentWrap>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧竖直统计图区域 -->
|
||
<div class="right-stats">
|
||
<ContentWrap class="my-right-statistics" style="height: 753px">
|
||
<span class="my-span" style="margin-left: 10px">检查状态概况</span>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
margin-top: 50px;
|
||
"
|
||
>
|
||
<img src="/static/djdtj.jpg" style="width: 55px; height: 60px" />
|
||
<div
|
||
style="
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
"
|
||
>
|
||
<span style="color: rgb(128, 128, 128)">登记单累计总数</span>
|
||
<span class="my-span" style="margin-top: 8px">{{ regtotalcount }}</span>
|
||
</div>
|
||
</div>
|
||
<el-divider />
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
margin-top: 50px;
|
||
"
|
||
>
|
||
<img src="/static/djwfj.jpg" style="width: 55px; height: 60px; margin-left: 40px" />
|
||
<div
|
||
style="
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
"
|
||
>
|
||
<span style="color: rgb(128, 128, 128)">登记单未分检数</span>
|
||
<span class="my-span" style="margin-top: 8px">{{ wfj }}</span>
|
||
</div>
|
||
<span style="color: rgb(128, 128, 128); margin-left: auto; margin-top: 20px"
|
||
>({{ usePercentageCalculation(regtotalcount, wfj) }}%)</span
|
||
>
|
||
</div>
|
||
<!-- -->
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
margin-top: 50px;
|
||
"
|
||
>
|
||
<img src="/static/djwjc.jpg" style="width: 55px; height: 60px; margin-left: 40px" />
|
||
<div
|
||
style="
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
"
|
||
>
|
||
<span style="color: rgb(128, 128, 128)">登记单未检查数</span>
|
||
<span class="my-span" style="margin-top: 8px">{{ wjc }}</span>
|
||
</div>
|
||
<span style="color: rgb(128, 128, 128); margin-left: auto; margin-top: 20px"
|
||
>({{ usePercentageCalculation(regtotalcount, wjc) }}%)</span
|
||
>
|
||
</div>
|
||
<!-- -->
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
margin-top: 50px;
|
||
"
|
||
>
|
||
<img src="/static/djyjc.jpg" style="width: 55px; height: 60px; margin-left: 40px" />
|
||
<div
|
||
style="
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
"
|
||
>
|
||
<span style="color: rgb(128, 128, 128)">登记单已检查数</span>
|
||
<span class="my-span" style="margin-top: 8px">{{ yjc }}</span>
|
||
</div>
|
||
<span style="color: rgb(128, 128, 128); margin-left: auto; margin-top: 20px"
|
||
>({{ usePercentageCalculation(regtotalcount, yjc) }}%)</span
|
||
>
|
||
</div>
|
||
<!-- -->
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
margin-top: 50px;
|
||
"
|
||
>
|
||
<img src="/static/djfq.jpg" style="width: 55px; height: 60px; margin-left: 40px" />
|
||
<div
|
||
style="
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
"
|
||
>
|
||
<span style="color: rgb(128, 128, 128)">登记单已放弃数</span>
|
||
<span class="my-span" style="margin-top: 8px">{{ yfq }}</span>
|
||
</div>
|
||
<span style="color: rgb(128, 128, 128); margin-left: auto; margin-top: 20px"
|
||
>({{ usePercentageCalculation(regtotalcount, yfq) }}%)</span
|
||
>
|
||
</div>
|
||
</ContentWrap>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import autofit from 'autofit.js'
|
||
import { set } from 'lodash-es'
|
||
import { EChartsOption } from 'echarts'
|
||
import { formatTime } from '@/utils'
|
||
import { useUserStore } from '@/store/modules/user'
|
||
import { useWatermark } from '@/hooks/web/useWatermark'
|
||
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
|
||
import { pieOptions, barOptions } from './echarts-data'
|
||
import YY from './YY.vue'
|
||
import mw from './mw.vue'
|
||
import zx from './zx.vue'
|
||
import { PatientexamlistApi } from '@/api/tblist/patientexamlist'
|
||
import { ApplyformApi } from '@/api/applyregistration/applyform'
|
||
|
||
defineOptions({ name: 'Home' })
|
||
|
||
onMounted(async () => {
|
||
autofit.init(
|
||
{
|
||
dw: 1920 * 1.03,
|
||
dh: 1080 * 1.03,
|
||
el: '#indexPage',
|
||
resize: true
|
||
},
|
||
false
|
||
)
|
||
await getAllApi()
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
autofit.off()
|
||
})
|
||
|
||
const isDataReady = ref(false)
|
||
const iszxDataReady = ref(false)
|
||
const { t } = useI18n()
|
||
const userStore = useUserStore()
|
||
const { setWatermark } = useWatermark()
|
||
const loading = ref(true)
|
||
const avatar = userStore.getUser.avatar
|
||
const username = userStore.getUser.nickname
|
||
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
||
|
||
// 获取项目数
|
||
let projects = reactive<Project[]>([])
|
||
const getProject = async () => {
|
||
const data = [
|
||
{
|
||
name: '登记单列表',
|
||
message: '/reservation/applyform'
|
||
},
|
||
{
|
||
name: '预约登记',
|
||
message: '/reservation/reservationInfo'
|
||
},
|
||
{
|
||
name: '病例管理',
|
||
message: '/reservation/illnessCase'
|
||
},
|
||
{
|
||
name: '超声工作台',
|
||
message: '/diagnosis/patientexamlistultrasonic'
|
||
},
|
||
{
|
||
name: '影像工作台',
|
||
message: '/diagnosis/patientexamlist'
|
||
},
|
||
{
|
||
name: '报告打印统计',
|
||
message: '/stat/reportPrintStatistics'
|
||
}
|
||
]
|
||
projects = Object.assign(projects, data)
|
||
}
|
||
const y = ref()
|
||
const yx = ref()
|
||
const totalcount = ref()
|
||
const zdyx = ref()
|
||
const F = ref()
|
||
const M = ref()
|
||
const GetWholeDiagFlagCount = async () => {
|
||
const data = await PatientexamlistApi.WholeDiagFlagCount()
|
||
totalcount.value = data.totalcount //总数
|
||
y.value = data.y
|
||
yx.value = data.yx
|
||
zdyx.value = data.zdyx
|
||
F.value = data.f
|
||
M.value = data.m
|
||
console.log('统计' + data.f)
|
||
isDataReady.value = true
|
||
}
|
||
|
||
// 定义一个长度为7的响应式数组，初始值都为0
|
||
const yxArray = ref(new Array(7).fill(0))
|
||
const yArray = ref(new Array(7).fill(0))
|
||
const zdyxArray = ref(new Array(7).fill(0))
|
||
|
||
const GetDateYYZDYXCount = async () => {
|
||
const data = await PatientexamlistApi.GetDateYYZDYXCount()
|
||
|
||
for (let i = 0; i < data.length; i++) {
|
||
yxArray.value[i] = data[i].yx
|
||
yArray.value[i] = data[i].y
|
||
zdyxArray.value[i] = data[i].zdyx
|
||
}
|
||
|
||
iszxDataReady.value = true
|
||
}
|
||
|
||
const regtotalcount = ref(0)
|
||
const wfj = ref(0)
|
||
const wjc = ref(0)
|
||
const yjc = ref(0)
|
||
const yfq = ref(0)
|
||
const GetReglistCount = async () => {
|
||
const data = await ApplyformApi.GetReglistCount()
|
||
regtotalcount.value = data.totalcount
|
||
wfj.value = data.wfj
|
||
wjc.value = data.wjc
|
||
yjc.value = data.yjc
|
||
yfq.value = data.yfq
|
||
}
|
||
|
||
// 封装计算百分比的方法
|
||
function usePercentageCalculation(total, value) {
|
||
return computed(() => {
|
||
const totalNum = parseInt(total) // 转换总数为数字
|
||
const valueNum = parseInt(value) // 转换当前项的值为数字
|
||
|
||
// 判断total是否大于0，如果不是，则返回0
|
||
if (totalNum <= 0) {
|
||
return 0
|
||
}
|
||
|
||
// 如果total大于0，计算百分比
|
||
const percentage = (valueNum / totalNum) * 100
|
||
|
||
// 返回计算出的百分比，保留两位小数
|
||
return parseFloat(percentage.toFixed(2))
|
||
})
|
||
}
|
||
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
|
||
|
||
const getAllApi = async () => {
|
||
await Promise.all([
|
||
getProject(),
|
||
GetWholeDiagFlagCount(),
|
||
GetDateYYZDYXCount(),
|
||
GetReglistCount()
|
||
])
|
||
loading.value = false
|
||
}
|
||
// 在组件挂载完成后调用getAllApi
|
||
// onMounted(getAllApi)
|
||
|
||
// 动态切换图片
|
||
function getImageUrl(name) {
|
||
const imageMap = {
|
||
登记单列表: '/static/登记单列表.jpg',
|
||
预约登记: '/static/预约登记.jpg',
|
||
病例管理: '/static/病例管理.jpg',
|
||
超声工作台: '/static/超声.jpg',
|
||
影像工作台: '/static/影像.jpg',
|
||
报告打印统计: '/static/报告打印.jpg'
|
||
}
|
||
return imageMap[name] || '/static/登记单列表.jpg' // 默认图片
|
||
}
|
||
// 动态获取背景颜色
|
||
function getbackground(name) {
|
||
const backgroundMap = {
|
||
登记单列表: 'background: rgb(220, 228, 245);',
|
||
预约登记: 'background: rgb(250, 239, 232);',
|
||
病例管理: 'background: rgb(235, 245, 244);',
|
||
超声工作台: 'background: rgb(247, 240, 218);',
|
||
影像工作台: 'background: rgb(250, 231, 235);',
|
||
报告打印统计: 'background: rgb(227, 228, 252);'
|
||
}
|
||
return backgroundMap[name] || 'background: rgb(220, 228, 245);'
|
||
}
|
||
|
||
// 动态切换箭头图片
|
||
function getarrowImageUrl(name) {
|
||
const imageMap = {
|
||
登记单列表: '/static/djjt.jpg',
|
||
预约登记: '/static/yydj.jpg',
|
||
病例管理: '/static/blgl.jpg',
|
||
超声工作台: '/static/cs.jpg',
|
||
影像工作台: '/static/yx.jpg',
|
||
报告打印统计: '/static/bg.jpg'
|
||
}
|
||
return imageMap[name] || '/static/djjt.jpg' // 默认图片
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.menu-button {
|
||
/* 按钮样式 */
|
||
padding: 10px 2px;
|
||
background: linear-gradient(141.88deg, rgb(0, 102, 235) 0%, rgb(3, 129, 255) 100%),
|
||
rgb(36, 93, 209);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
/* 快捷入口样式 */
|
||
.my-quick {
|
||
margin-top: 20px;
|
||
width: 250px;
|
||
height: 80px;
|
||
opacity: 1;
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 1);
|
||
box-shadow: 1px 5px 13px rgba(223, 226, 232, 1);
|
||
}
|
||
/* 快捷入口span样式 */
|
||
.my-span {
|
||
width: 123px;
|
||
height: 30px;
|
||
opacity: 1;
|
||
/** 文本1 */
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
letter-spacing: 0px;
|
||
line-height: 28px;
|
||
color: rgba(51, 51, 51, 1);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
margin-right: 10px;
|
||
}
|
||
/* 快捷入口DIV 样式 */
|
||
.my-quickdiv {
|
||
display: flex;
|
||
gap: 30px;
|
||
}
|
||
/* 连接旁边的图标样式 */
|
||
.my-linkimagediv {
|
||
width: 40px;
|
||
height: 40px;
|
||
opacity: 1;
|
||
border-radius: 20px;
|
||
display: flex; /* 使用 Flexbox */
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center; /* 垂直居中 */
|
||
margin-right: 10px;
|
||
}
|
||
.my-linkimagediv img {
|
||
width: auto; /* 根据需要调整图片宽度 */
|
||
height: auto; /* 根据需要调整图片高度 */
|
||
max-width: 100%; /* 图片最大宽度不超过容器宽度 */
|
||
max-height: 100%; /* 图片最大高度不超过容器高度 */
|
||
}
|
||
|
||
/* ------------统计部分的样式---------- */
|
||
.stats-container {
|
||
display: flex;
|
||
/* 默认是 row 方向，子元素水平排列 */
|
||
}
|
||
|
||
.left-stats {
|
||
/* flex: 1; */ /* 左侧容器占据一半的空间 */
|
||
/* display: flex; */
|
||
flex-direction: column; /* 子元素垂直排列 */
|
||
justify-content: space-between; /* 子元素之间留有间隔 */
|
||
margin-right: 1%; /* 给右侧留出间隔 */
|
||
}
|
||
|
||
.left-stats .my-statistics {
|
||
/* 可以根据需要设置高度 */
|
||
width: 1100px;
|
||
}
|
||
/* 左侧的 ContentWrap 样式*/
|
||
.my-quickstatistics {
|
||
opacity: 1;
|
||
border-radius: 12px;
|
||
background: rgb(255, 255, 255);
|
||
box-shadow: 1px 5px 13px rgb(223, 226, 232);
|
||
}
|
||
/* 右侧div */
|
||
.right-stats {
|
||
/* flex: 1; */ /* 右侧容器占据另一半的空间 */
|
||
/* 可以根据需要设置宽度或高度 */
|
||
width: 543px;
|
||
}
|
||
/* 右侧侧的 ContentWrap 样式*/
|
||
.my-right-statistics {
|
||
opacity: 1;
|
||
border-radius: 12px;
|
||
background: rgb(255, 255, 255);
|
||
box-shadow: 1px 5px 13px rgb(223, 226, 232);
|
||
}
|
||
.div-inline {
|
||
display: flex;
|
||
}
|
||
/* 间隙DIV */
|
||
.flex-gap {
|
||
flex-grow: 1; /* 根据需要调整 */
|
||
}
|
||
</style>
|