FlowVue/src/views/Home/Index.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>