修改首页统计

src/api/applyregistration/applyform/index.ts

@@ -114,5 +114,8 @@ export const ApplyformApi = {
   SyncDb: async (AppCode: string) => {
     return await request.get({ url: `/applyregistration/applyform/SyncDb?AppCode=` + AppCode })
   },
-  
+   // 获取登记单统计信息
+   GetReglistCount: async () => {
+    return await request.get({ url: `/applyregistration/applyform/getreglisrcount`})
+  },
 }

src/api/tblist/patientexamlist/index.ts

@@ -90,4 +90,13 @@ export const PatientexamlistApi = {
      dicomDataRefresh: async () => {
       return await request.get({ url: `/tblist/patientexamlist/dicomDataRefresh` })
     },
+
+      // 获取已检查全部的阴性阳性重大阳性统计
+      WholeDiagFlagCount: async () => {
+        return await request.get({ url: `/tblist/patientexamlist/WholeDiagFlagCount`})
+      },
+         // 获取一周已检查全部的阴性阳性重大阳性统计
+         GetDateYYZDYXCount: async () => {
+          return await request.get({ url: `/tblist/patientexamlist/GetDateYYZDYXCount`})
+        },
 }

src/views/Home/Index.vue

@@ -1,106 +1,140 @@
 <template>
+  <span class="my-span" style="margin-left: 14px">快捷入口</span>
 
-  
-  <el-row class="mt-8px" :gutter="8" justify="space-between">
-    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <el-card shadow="never">
-        <el-skeleton :loading="loading" animated>
-          <span style="font-size: 17px;">快捷入口</span>
-          <el-row>
-            <el-col
-              v-for="(item, index) in projects"
-              :key="`card-${index}`"
-              :xl="8"
-              :lg="8"
-              :md="8"
-              :sm="24"
-              :xs="24"
-            >
-              <el-card shadow="hover" class="mr-5px mt-5px">
-                <div class="flex items-center">
-                  <router-link :to="item.message" class="menu-button flex items-center justify-center" style="width: 100%; height: 100%;">
-                   <span>{{ item.name }}</span> 
-                  </router-link>
-                </div>
-              </el-card>
-            </el-col>
-          </el-row>
-        </el-skeleton>
-      </el-card>
-
-      <el-card shadow="never" class="mt-8px">
-        <el-skeleton :loading="loading" animated>
-          <el-row :gutter="20" justify="space-between">
-            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
-              <el-card shadow="hover" class="mb-8px">
-                <el-skeleton :loading="loading" animated>
-                  <Echart :options="pieOptionsData" :height="280" />
-                </el-skeleton>
-              </el-card>
-            </el-col>
-            <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
-              <el-card shadow="hover" class="mb-8px">
-                <el-skeleton :loading="loading" animated>
-                  <Echart :options="barOptionsData" :height="280" />
-                </el-skeleton>
-              </el-card>
-            </el-col>
-          </el-row>
-        </el-skeleton>
-      </el-card>
-    </el-col>
-
-   <!--  <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <el-card shadow="never">
-        <template #header>
-          <div class="h-3 flex justify-between">
-            <span>{{ t('workplace.shortcutOperation') }}</span>
-          </div>
-        </template>
-        <el-skeleton :loading="loading" animated>
-          <el-row>
-            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">
-              <div class="flex items-center">
-                <Icon :icon="item.icon" class="mr-8px" />
-                <el-link type="default" :underline="false" @click="setWatermark(item.name)">
-                  {{ item.name }}
-                </el-link>
-              </div>
-            </el-col>
-          </el-row>
-        </el-skeleton>
-      </el-card>
-      
-      <el-card shadow="never" class="mt-8px">
-        <template #header>
-          <div class="h-3 flex justify-between">
-            <span>{{ t('workplace.notice') }}</span>
-            <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
-          </div>
-        </template>
-        <el-skeleton :loading="loading" animated>
-          <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
-            <div class="flex items-center">
-              <el-avatar :src="avatar" :size="35" class="mr-16px">
-                <img src="@/assets/imgs/avatar.gif" alt="" />
-              </el-avatar>
-              <div>
-                <div class="text-14px">
-                  <Highlight :keys="item.keys.map((v) => t(v))">
-                    {{ item.type }} : {{ item.title }}
-                  </Highlight>
-                </div>
-                <div class="mt-16px text-12px text-gray-400">
-                  {{ formatTime(item.date, 'yyyy-MM-dd') }}
-                </div>
-              </div>
+  <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>
-            <el-divider />
           </div>
-        </el-skeleton>
-      </el-card>
-    </el-col> -->
-  </el-row>
+        </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'
@@ -111,9 +145,16 @@ 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()
@@ -121,21 +162,7 @@ const loading = ref(true)
 const avatar = userStore.getUser.avatar
 const username = userStore.getUser.nickname
 const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
-// 获取统计数
-let totalSate = reactive<WorkplaceTotal>({
-  project: 0,
-  access: 0,
-  todo: 0
-})
 
-const getCount = async () => {
-  const data = {
-    project: 40,
-    access: 2340,
-    todo: 10
-  }
-  totalSate = Object.assign(totalSate, data)
-}
 
 // 获取项目数
 let projects = reactive<Project[]>([])
@@ -145,6 +172,14 @@ const getProject = async () => {
       name: '登记单列表',
       message: '/reservation/applyform'
     },
+    {
+      name: '预约登记',
+      message: '/reservation/reservationInfo'
+    },
+    {
+      name: '病例管理',
+      message: '/reservation/illnessCase'
+    },
     {
       name: '超声工作台',
       message: '/diagnosis/patientexamlistultrasonic'
@@ -152,156 +187,237 @@ const getProject = async () => {
     {
       name: '影像工作台',
       message: '/diagnosis/patientexamlist'
+    },
+    {
+      name: '报告打印统计',
+      message: '/stat/reportPrintStatistics'
     }
   ]
   projects = Object.assign(projects, data)
 }
-
-// 获取通知公告
-let notice = reactive<Notice[]>([])
-const getNotice = async () => {
-  const data = [
-    {
-      title: '系统支持 JDK 8/17/21，Vue 2/3',
-      type: '通知',
-      keys: ['通知', '8', '17', '21', '2', '3'],
-      date: new Date()
-    },
-    {
-      title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
-      type: '公告',
-      keys: ['公告', 'Boot', 'Cloud'],
-      date: new Date()
-    },
-    {
-      title: '全部开源，个人与企业可 100% 直接使用，无需授权',
-      type: '通知',
-      keys: ['通知', '无需授权'],
-      date: new Date()
-    },
-    {
-      title: '国内使用最广泛的快速开发平台，超 300+ 人贡献',
-      type: '公告',
-      keys: ['公告', '最广泛'],
-      date: new Date()
-    }
-  ]
-  notice = Object.assign(notice, 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
 }
 
-// 获取快捷入口
-let shortcut = reactive<Shortcut[]>([])
+// 定义一个长度为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 getShortcut = async () => {
-  const data = [
-    {
-      name: 'Github',
-      icon: 'akar-icons:github-fill',
-      url: 'github.io'
-    },
-    {
-      name: 'Vue',
-      icon: 'logos:vue',
-      url: 'vuejs.org'
-    },
-    {
-      name: 'Vite',
-      icon: 'vscode-icons:file-type-vite',
-      url: 'https://vitejs.dev/'
-    },
-    {
-      name: 'Angular',
-      icon: 'logos:angular-icon',
-      url: 'github.io'
-    },
-    {
-      name: 'React',
-      icon: 'logos:react',
-      url: 'github.io'
-    },
-    {
-      name: 'Webpack',
-      icon: 'logos:webpack',
-      url: 'github.io'
-    }
-  ]
-  shortcut = Object.assign(shortcut, data)
+
+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
 }
 
-// 用户来源
-const getUserAccessSource = async () => {
-  const data = [
-    { value: 335, name: 'analysis.directAccess' },
-    { value: 310, name: 'analysis.mailMarketing' },
-    { value: 234, name: 'analysis.allianceAdvertising' },
-    { value: 135, name: 'analysis.videoAdvertising' },
-    { value: 1548, name: 'analysis.searchEngines' }
-  ]
-  set(
-    pieOptionsData,
-    'legend.data',
-    data.map((v) => t(v.name))
-  )
-  pieOptionsData!.series![0].data = data.map((v) => {
-    return {
-      name: t(v.name),
-      value: v.value
+// 封装计算百分比的方法
+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 getWeeklyUserActivity = async () => {
-  const data = [
-    { value: 13253, name: 'analysis.monday' },
-    { value: 34235, name: 'analysis.tuesday' },
-    { value: 26321, name: 'analysis.wednesday' },
-    { value: 12340, name: 'analysis.thursday' },
-    { value: 24643, name: 'analysis.friday' },
-    { value: 1322, name: 'analysis.saturday' },
-    { value: 1324, name: 'analysis.sunday' }
-  ]
-  set(
-    barOptionsData,
-    'xAxis.data',
-    data.map((v) => t(v.name))
-  )
-  set(barOptionsData, 'series', [
-    {
-      name: t('analysis.activeQuantity'),
-      data: data.map((v) => v.value),
-      type: 'bar'
-    }
-  ])
-}
-
 const getAllApi = async () => {
-  await Promise.all([
-    getCount(),
-    getProject(),
-    getNotice(),
-    getShortcut(),
-    getUserAccessSource(),
-    getWeeklyUserActivity()
-  ])
+  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' // 默认图片
+}
+
 
-getAllApi()
 </script>
-<style>
+<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);
+  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>

src/views/Home/YY.vue

@@ -0,0 +1,119 @@
+<template>
+  <div ref="projectSigningOverview" style="width: 520px; height: 400px"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { number } from 'vue-types';
+// 创建一个响应式引用来保存DOM元素
+const projectSigningOverview = ref(null)
+let projectSigningOverviewElement = null
+
+
+const props = defineProps({
+  mytotalcount: String,
+  myy:String,
+  myyx:String,
+  myzdyx:String
+});
+// 创建一个响应式的本地副本
+const state = reactive({
+  totalcount: props.mytotalcount,
+  y:props.myy,
+  yx:props.myyx,
+  zdyx:props.myzdyx
+});
+
+// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
+onMounted(async () => {
+   
+  await nextTick() // 确保DOM已经渲染完成
+  projectSigningOverviewElement = echarts.init(projectSigningOverview.value)
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}<br/>{c} ({d}%)' // 格式化显示的文本内容
+    },
+    legend: {
+      top: '35%',
+      right: '10%',
+      orient: 'vertical',
+      itemGap: 45
+    },
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: state.yx, name: '阴性', itemStyle: { color: 'rgb(0, 186, 173)' } },
+          { value: state.y, name: '阳性', itemStyle: { color: 'rgb(255, 183, 74)' } },
+          { value: state.zdyx, name: '重大阳性', itemStyle: { color: 'rgb(212, 48, 48)' } }
+        ]
+      }
+    ],
+    graphic: [
+      {
+        type: 'text',
+        left: 'center', // 水平居中
+        top: 'center', // 垂直居中
+        style: {
+          text: '已检查数', // 要显示的文本
+          textAlign: 'center',
+          fill: '#666', // 文本颜色
+          fontSize: 20
+        }
+      },
+      {
+        type: 'text',
+        left: 'center', // 水平居中
+        top: '56%', // 垂直位置调整到中心下方
+        style: {
+          text: state.totalcount, // 这里替换为你想要显示的数字
+          textAlign: 'center',
+          fill: '#000', // 文本颜色，可以根据需要调整
+          fontSize: 16
+        }
+      }
+    ]
+  }
+  projectSigningOverviewElement.setOption(option)
+})
+
+// 销毁ECharts实例
+onUnmounted(() => {
+  if (projectSigningOverviewElement != null && projectSigningOverviewElement.dispose) {
+    projectSigningOverviewElement.dispose()
+  }
+})
+
+const d=()=>
+{
+  y.value=myy
+  yx.value=myyx
+  totalcount.value=mytotalcount
+  zdyx.value=myzdyx
+}
+
+
+</script>
+
+<style scoped>
+/* 添加一些CSS样式来美化图表容器（可选） */
+</style>

src/views/Home/mw.vue

@@ -0,0 +1,101 @@
+<template>
+  <div ref="mwverview" style="width: 520px; height: 400px"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { PatientexamlistApi } from '@/api/tblist/patientexamlist'
+// 创建一个响应式引用来保存DOM元素
+const mwverview = ref(null)
+let projectSigningOverviewElement = null
+const props = defineProps({
+  mytotalcount: String,
+  F:String,
+  M:String
+});
+// 创建一个响应式的本地副本
+const state = reactive({
+  totalcount: props.mytotalcount,
+  F:props.F,
+  M:props.M
+});
+// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
+onMounted(async () => {
+  await nextTick() // 确保DOM已经渲染完成
+  projectSigningOverviewElement = echarts.init(mwverview.value)
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}<br/>{c} ({d}%)' // 格式化显示的文本内容
+    },
+    legend: {
+      top: '35%',
+      right: '10%',
+      orient: 'vertical',
+      itemGap: 45
+    },
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: state.F, name: '男', itemStyle: { color: 'rgb(26, 98, 255)' } },
+          { value: state.M, name: '女', itemStyle: { color: 'rgb(83, 85, 176)' } }
+        ]
+      }
+    ],
+    graphic: [
+      {
+        type: 'text',
+        left: 'center', // 水平居中
+        top: 'center', // 垂直居中
+        style: {
+          text: '总人数数', // 要显示的文本
+          textAlign: 'center',
+          fill: '#666', // 文本颜色
+          fontSize: 20
+        }
+      },
+      {
+        type: 'text',
+        left: 'center', // 水平居中
+        top: '56%', // 垂直位置调整到中心下方
+        style: {
+          text:  state.totalcount, // 这里替换为你想要显示的数字
+          textAlign: 'center',
+          fill: '#000', // 文本颜色，可以根据需要调整
+          fontSize: 16
+        }
+      }
+    ]
+  }
+  projectSigningOverviewElement.setOption(option)
+})
+// 销毁ECharts实例
+onUnmounted(() => {
+  if (projectSigningOverviewElement != null && projectSigningOverviewElement.dispose) {
+    projectSigningOverviewElement.dispose()
+  }
+})
+</script>
+
+<style scoped>
+/* 添加一些CSS样式来美化图表容器（可选） */
+</style>

src/views/Home/zx.vue

@@ -0,0 +1,114 @@
+<template>
+  <div ref="zxverview" style="width: 1020px; height: 400px"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+
+// 创建一个响应式引用来保存DOM元素
+const zxverview = ref(null)
+let projectSigningOverviewElement = null
+const props = defineProps({
+  yxArray: Array,
+  yArray:Array,
+  zdyxArray:Array
+});
+// 创建一个响应式的本地副本
+const state = reactive({
+  y:props.yArray,
+  yx:props.yxArray,
+  zdyx:props.zdyxArray
+});
+// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
+onMounted(async () => {
+  await nextTick() // 确保DOM已经渲染完成
+  projectSigningOverviewElement = echarts.init(zxverview.value)
+  const option = {
+    title: {
+      text: ''
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: ['阴性', '阳性', '重大阳性'],
+      top: '35%',
+      right: '1%',
+      orient: 'vertical',
+      itemGap: 45
+    },
+    grid: {
+      left: '3%',
+      right: '16%',
+      bottom: '3%',
+      containLabel: true
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: weekDates
+    },
+    yAxis: {
+      type: 'value',
+      interval: 100
+    },
+    series: [
+      {
+        name: '阴性',
+        type: 'line',
+        stack: 'yxTotal',
+        data:state.yx ,//[120, 132, 101, 134, 90, 230, 210]
+        itemStyle: { color: 'rgb(0, 185, 173)' }
+      },
+      {
+        name: '阳性',
+        type: 'line',
+        stack: 'yTotal',
+        data: state.y,//[220, 182, 191, 234, 290, 330, 310]
+        itemStyle: { color: 'rgb(255, 183, 75)' }
+      },
+      {
+        name: '重大阳性',
+        type: 'line',
+        stack: 'zdyxTotal',
+        data: state.zdyx,//[150, 232, 201, 154, 190, 330, 410]
+        itemStyle: { color: 'rgb(212, 48, 48)' }
+      }
+    ]
+  }
+  projectSigningOverviewElement.setOption(option)
+})
+// 获取一周的时间
+const weekDates = getWeekDates();
+function getWeekDates() {
+  const today = new Date();
+  const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
+  const dates = [];
+
+  for (let i = 6; i >= 0; i--) {
+    // 减去i天，从今天开始向前推6天和7天
+    const date = new Date(today - oneDay * i);
+    // 将日期格式化为 YYYY-MM-DD
+    const formattedDate = date.toISOString().slice(0, 10);
+    dates.push(formattedDate);
+  }
+
+  return dates;
+}
+// 销毁ECharts实例
+onUnmounted(() => {
+  if (projectSigningOverviewElement != null && projectSigningOverviewElement.dispose) {
+    projectSigningOverviewElement.dispose()
+  }
+})
+</script>
+
+<style scoped>
+/* 添加一些CSS样式来美化图表容器（可选） */
+</style>