00

src/views/system/Home/Index.vue

@@ -195,7 +195,7 @@
                 </div>
               </el-card>
             </el-col>
-            <el-col :xs="24" :sm="24" :md="24" :lg="12" :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>
@@ -224,13 +224,15 @@
                 <span>毕业条件达成统计</span>
               </div>
             </template>
-            <div id="ChartContainer" class="chart-container">
+
+            <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="230"/>
+              <Echart :options="pieOptionsData" :height="230" @finished="resizeChart" autoresize/>
             </el-skeleton>
             </el-card>
             </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">
@@ -279,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'})
 
@@ -308,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({
@@ -394,7 +391,7 @@ const getGraduateCount = async () => {
       left: 'center',
       top: '25px',
       textStyle: {
-        fontSize: 20, // 增大标题字体大小
+        fontSize: 18, // 增大标题字体大小
         fontWeight: 'bold', // 加粗标题字体
         color: '#333' // 调整标题字体颜色
       }
@@ -406,7 +403,7 @@ const getGraduateCount = async () => {
       top: '10%',  // 顶部位置
       left: 'left', // 左侧位置
       textStyle: {
-        fontSize: 18, // 增大图例字体大小
+        fontSize: 16, // 增大图例字体大小
         fontWeight: 'bold',
         color: '#555' // 调整图例字体颜色
       }
@@ -414,7 +411,7 @@ const getGraduateCount = async () => {
     series: [
       {
         type: 'pie',
-        radius: ['120px', '70px'], // 设定内圈和外圈半径
+        radius: ['50%', '80%'], // 设定内圈和外圈半径
         center: ['50%', '95%'], // 中心位置
         startAngle: 180,
         endAngle: 360,
@@ -438,7 +435,7 @@ const getGraduateCount = async () => {
 
             labelLine: {
               show: true,
-              length: 65,
+              length: 20,
               length2: 5,
               smooth: true,
               lineDash: [5, 5],
@@ -462,7 +459,7 @@ const getGraduateCount = async () => {
             },
             labelLine: {
               show: true,
-              length: 65,
+              length: 20,
               length2: 5,
               smooth: true,
               lineDash: [5, 5],
@@ -488,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
@@ -549,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()
@@ -591,13 +596,6 @@ onMounted(async () => {
   getStudentAttendance()
   getGraduationSource()
   getGraduateCount()
-  if(userInfo.value.userType ==='3') {
-    await getIsPopFunction();
-    if (isPop.value ) {
-      await nextTick();
-      teacherForm();
-    }
-  }
 })
 
 const getAllApi = async () => {
@@ -835,4 +833,9 @@ getAllApi()
     font-size: 36px; /* 在大屏幕上使用默认字体大小 */
   }
 }
+
+
+
+
+
 </style>