FlowVue/src/views/Home/Index.vue

<template>
  <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>
</template>
<script lang="ts" setup>
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' })

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>