src/views/system/Home/Index.vue

@@ -12,8 +12,8 @@
             </template>
 
             <el-row style="flex-wrap: wrap; ">
-              <el-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="24"
-                      :md="24" :lg="8" :xl="8">
+              <el-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="8"
+                      :md="8" :lg="8" :xl="8">
                 <el-card  class="mr-10px mt-5px  ml-10px "
                          :style="{ backgroundColor: item.cardBgColor }">
                   <div class="flex items-center h-120px ">
@@ -63,7 +63,7 @@
             </div>
           </el-card>
           <el-row :gutter="8">
-            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
               <el-card  class="mb-27px h-465px mt-40px mr-15px ="
                        style="min-width: 250px ;background-color: rgb(255,255,255);border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <template #header >
@@ -128,7 +128,7 @@
                 <!--                </div>-->
               </el-card>
             </el-col>
-            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
               <el-card  class=" h-465px mb-10px mt-40px mr-15px "
                        style="min-width: 250px ;background-color: rgb(255,255,255);border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <!-- 移除 el-card 的边框 -->
@@ -195,7 +195,7 @@
                 </div>
               </el-card>
             </el-col>
-            <el-col :xs="24" :sm="24" :md="24" :lg="23" :xl="8">
+            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
               <el-card  class=" mb-27px h-465px mt-40px "
                        style="border: 4px solid rgba(109,181,255,0.42);border-radius:15px">
                 <template #header>
@@ -218,18 +218,22 @@
       <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="7" class="h-480px">
         <!-- 第一个el-row -->
         <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-          <el-card  class=" mt-0px h-1123px mb-10px " style="min-width:520px;">
+          <el-card  class=" mt-0px h-1123px mb-10px " >
             <template #header>
               <div class="h-7 flex justify-between fw-800 text-25px">
                 <span>毕业条件达成统计</span>
               </div>
             </template>
+
+            <div ref="chartRef" class="chart-container" style="height: 280px;">
             <el-card style="border-radius:10px;border: 3px solid rgba(110,153,243,0.32)">
             <el-skeleton :loading="loading" animated>
-              <Echart :options="pieOptionsData" :height="250"/>
+              <Echart :options="pieOptionsData" :height="230" @finished="resizeChart" autoresize/>
             </el-skeleton>
             </el-card>
-            <el-card   class=" mt-15px h-672px " style="min-width:480px;border-radius:10px;border: 3px solid rgba(110,153,243,0.32);">
+            </div>
+
+            <el-card   class=" mt-20px h-672px " style="border-radius:10px;border: 3px solid rgba(110,153,243,0.32);">
               <template #header>
                 <div class="h-7 flex justify-between fw-800 text-20px">
                   <span style="color: #042b52">学生毕业条件达成率</span>
@@ -277,28 +281,25 @@
       <!--        </el-row>-->
 
       <!-- 第二个el-row -->
+
     </el-row>
   </el-skeleton>
-  <teacher ref="teacherFormRef"/>
 </template>
 
 <script lang="ts" setup>
-// import {EChartsOption, List} from 'echarts'
+import {EChartsOption, List} from 'echarts'
 import {formatTime} from '@/utils'
 import {formatDate} from "@/utils/formatTime";
 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 {reactive, onMounted, watchEffect, ref, nextTick} from "vue";
-// import {vue3ScrollSeamless} from "vue3-scroll-seamless";
+import {reactive, onMounted, watchEffect,ref, onUnmounted } from "vue";
+import {vue3ScrollSeamless} from "vue3-scroll-seamless";
 import * as UserApi from '@/api/system/user'
 import * as  DeptApi from '@/api/system/dept'
 import {StudentAttendanceApi} from '@/api/system/studentAttendance'
-import {getIsPop} from "@/api/system/user/pop";
-import {getUserProfile, ProfileVO} from "@/api/system/user/profile";
-
-import teacher from '../userDetail/teacher.vue';
+import * as echarts from 'echarts';
 
 defineOptions({name: 'SystemHome'})
 
@@ -306,12 +307,10 @@ const {t} = useI18n()
 const userStore = useUserStore()
 const {setWatermark} = useWatermark()
 const loading = ref(true)
-
-const teacherFormRef = ref();
-
 const avatar = userStore.getUser.avatar
 const username = userStore.getUser.nickname
-
+const chartRef = ref(null)
+const chartInstance = ref(null)
 
 /*基本信息*/
 const detail = reactive({
@@ -377,6 +376,9 @@ const getCount = async () => {
 }
 
 // /**毕业达成统计 */
+
+
+
 let pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
 const getGraduateCount = async () => {
   const data = await UserApi.getGraduateCount()
@@ -389,7 +391,7 @@ const getGraduateCount = async () => {
       left: 'center',
       top: '25px',
       textStyle: {
-        fontSize: 20, // 增大标题字体大小
+        fontSize: 18, // 增大标题字体大小
         fontWeight: 'bold', // 加粗标题字体
         color: '#333' // 调整标题字体颜色
       }
@@ -401,7 +403,7 @@ const getGraduateCount = async () => {
       top: '10%',  // 顶部位置
       left: 'left', // 左侧位置
       textStyle: {
-        fontSize: 18, // 增大图例字体大小
+        fontSize: 16, // 增大图例字体大小
         fontWeight: 'bold',
         color: '#555' // 调整图例字体颜色
       }
@@ -409,8 +411,8 @@ const getGraduateCount = async () => {
     series: [
       {
         type: 'pie',
-        radius: ['120px', '70px'], // 设定内圈和外圈半径
-        center: ['50%', '85%'], // 中心位置
+        radius: ['50%', '80%'], // 设定内圈和外圈半径
+        center: ['50%', '95%'], // 中心位置
         startAngle: 180,
         endAngle: 360,
         data: [
@@ -425,7 +427,7 @@ const getGraduateCount = async () => {
                 show: true,
               },
               textStyle: {
-                fontSize: 16, // 增大标注字体大小
+                fontSize: 14, // 增大标注字体大小
                 fontWeight: 'bold', // 加粗标注字体
                 color: '#000' // 调整标注字体颜色
               },
@@ -433,8 +435,8 @@ const getGraduateCount = async () => {
 
             labelLine: {
               show: true,
-              length: 75,
-              length2: 10,
+              length: 20,
+              length2: 5,
               smooth: true,
               lineDash: [5, 5],
             },
@@ -450,15 +452,15 @@ const getGraduateCount = async () => {
                 show: true,
               },
               textStyle: {
-                fontSize: 16, // 增大标注字体大小
+                fontSize: 14, // 增大标注字体大小
                 fontWeight: 'bold', // 加粗标注字体
                 color: '#000' // 调整标注字体颜色
               },
             },
             labelLine: {
               show: true,
-              length: 75,
-              length2: 10,
+              length: 20,
+              length2: 5,
               smooth: true,
               lineDash: [5, 5],
             },
@@ -483,7 +485,48 @@ const getGraduateCount = async () => {
   // );
 
   pieOptionsData = Object.assign(pieOptionsData, options);
+  if (chartInstance.value) {
+    chartInstance.value.setOption(pieOptionsData, true);
+  }
 };
+  //图表自动适应容器尺寸变化
+onMounted(() => {
+  nextTick(()=>{
+    if (chartRef.value) {
+      chartInstance.value = echarts.init(chartRef.value);
+      chartInstance.value.setOption(pieOptionsData);
+
+      window.addEventListener('resize', resizeChart);
+      resizeChart();
+    }
+  })
+});
+
+onUnmounted(() => {
+  if (chartInstance.value) {
+    window.removeEventListener('resize', resizeChart);
+    chartInstance.value.dispose();
+  }
+});
+
+const resizeChart = () => {
+  console.log(chartRef.value,"eee")
+  if (chartInstance.value && chartRef.value) {
+    console.log(chartRef.value,"eee")
+    const width = chartRef.value.offsetWidth;
+    // 根据容器宽度计算内外径比例
+    const innerRadius = width > 600 ? '50%' : '20%';
+    const outerRadius = width > 600 ? '100%' : '35%';
+    const labelLength = width > 600 ? 35 : 15;
+
+    // 更新饼图配置项
+    pieOptionsData.series[0].radius = [innerRadius, outerRadius];
+    pieOptionsData.series[0].labelLine.length = labelLength;
+    pieOptionsData.series[0].labelLine.length2 = labelLength / 2;
+    chartInstance.value.setOption(pieOptionsData, true);
+  }
+};
+
 
 /**周出勤情况 */
 let barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
@@ -544,40 +587,7 @@ const list1Options = reactive({
   direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
 });
 
-
-// LSQ
-const isPop  = ref();
-const userInfo = ref({} as ProfileVO);
-
-const getUserInfo = async () => {
-  try {
-    loading.value = true;
-    const users = await getUserProfile();
-    userInfo.value = users;
-  } catch (error) {
-    console.error('获取用户信息失败:', error);
-  } finally {
-    loading.value = false;
-  }
-};
-
-const getIsPopFunction =(async ()=>{
-  isPop.value = await  getIsPop();
-  console.log(isPop.value)
-})
-
-const teacherForm = () => {
-  console.log(teacherFormRef.value)
-  if (teacherFormRef.value) {
-    teacherFormRef.value.open("update",null);
-  } else {
-    console.error('teacher form component is not mounted yet!');
-  }
-};
-
-
-onMounted(async () => {
-  await getUserInfo()
+onMounted(() => {
   getDetail()
   getWeekend()
   getProject()
@@ -586,13 +596,6 @@ onMounted(async () => {
   getStudentAttendance()
   getGraduationSource()
   getGraduateCount()
-  if(userInfo.value.userType ==='3') {
-    await getIsPopFunction();
-    if (isPop.value ) {
-      await nextTick();
-      teacherForm();
-    }
-  }
 })
 
 const getAllApi = async () => {
@@ -624,7 +627,7 @@ getAllApi()
   justify-content: center;
   border-radius: 50%;
   aspect-ratio: 1 / 1;
-  margin-right: 20px;
+  margin-right: 10px;
   width: 80px;
   height: 80px;
 }
@@ -636,6 +639,20 @@ getAllApi()
   }
 }
 
+@media (min-width: 768px) and (max-width: 868px) {
+  .circle-icon {
+    width: 90px; /* 中等屏幕下的尺寸 */
+    height: 90px;
+  }
+}
+
+@media (min-width: 869px) and (max-width: 1198px) {
+  .circle-icon {
+    width: 100px; /* 中等屏幕下的尺寸 */
+    height: 100px;
+  }
+}
+
 @media (min-width: 1199px) and (max-width: 1624px) {
   .circle-icon {
     width: 90px; /* 中等屏幕下的尺寸 */
@@ -666,7 +683,6 @@ getAllApi()
 .title {
   font-size: 19px;
 }
-
 .demo {
   width: 100%;
   height: 362px;
@@ -700,7 +716,6 @@ getAllApi()
   overflow: hidden;
   opacity: 0.8;
   font-size: 15px;
-
   margin-top: 20px;
 
 }
@@ -787,13 +802,13 @@ getAllApi()
 }
 
 /* 大于sm屏幕且小于等于md屏幕（例如平板） */
-@media (min-width: 868px) and (max-width:1198px) {
+@media (min-width: 765px) and (max-width:1198px) {
   .text-30px {
-    font-size: 26px;
+    font-size: 18px;
   }
 
   .text-40px {
-    font-size: 36px;
+    font-size: 30px;
   }
 }
 
@@ -818,4 +833,9 @@ getAllApi()
     font-size: 36px; /* 在大屏幕上使用默认字体大小 */
   }
 }
+
+
+
+
+
 </style>