From 0efc8516d127daaac9ce2a6af9ca3e164866f38b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=81?= <18339727226@163.com>
Date: Fri, 31 May 2024 18:55:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.ts                           |   6 +-
 src/api/modules/test.ts                  |  18 +-
 src/components/chart/chart.vue           | 136 +++++
 src/components/chart/pieChart.vue        | 137 +++++
 src/components/datePicker/datePicker.vue |  53 +-
 src/stores/data/data.ts                  |  74 +++
 src/stores/index.ts                      |   5 +-
 src/stores/time/time.ts                  |  15 +-
 src/views/header.vue                     | 137 +++--
 src/views/index/center-map.vue           |  63 +-
 src/views/index/center-top.vue           |  16 +-
 src/views/index/index.vue                | 154 ++++-
 src/views/index/left-bottom copy.vue     | 176 ------
 src/views/index/left-bottom.vue          |  46 +-
 src/views/index/left-center.vue          |  60 +-
 src/views/index/left-top.vue             |  26 +-
 src/views/index/right-bottom-two.vue     |  41 +-
 src/views/index/right-bottom.vue         | 731 +----------------------
 src/views/index/right-center.vue         |  39 +-
 src/views/index/right-top-two.vue        | 185 ++----
 src/views/index/right-top.vue            |  18 +-
 21 files changed, 904 insertions(+), 1232 deletions(-)
 create mode 100644 src/components/chart/chart.vue
 create mode 100644 src/components/chart/pieChart.vue
 create mode 100644 src/stores/data/data.ts
 delete mode 100644 src/views/index/left-bottom copy.vue

diff --git a/src/api/api.ts b/src/api/api.ts
index 925ab2a..8d62f92 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -1,6 +1,6 @@
 /*
- * @LastEditors: 张宁
- * @LastEditTime: 2024-05-23 10:32:10
+ * @LastEditors: 张宁 18339727226@163.com
+ * @LastEditTime: 2024-05-30 09:15:55
  */
 import axios from "axios";
 import type { AxiosRequestConfig, AxiosResponse } from "axios";
@@ -18,7 +18,7 @@ axios.interceptors.request.use(
   function (config: AxiosRequestConfig): any {
     // 在发送请求之前做些什么 传token
     // let token: any = getLocalStorage(StorageEnum.GB_TOKEN_STORE);
-    let token: any = getToken() || 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA4ZGI3NTE5LTMxOGUtNDE0My04MDhjLWVmYTI3YmZkZWUyOCIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6IlRlYWNoZXIiLCJ1c2VyaW5mbyI6IntcIklkXCI6XCIwOGRiNzUxOS0zMThlLTQxNDMtODA4Yy1lZmEyN2JmZGVlMjhcIixcIk5hbWVcIjpcImFkbWluXCIsXCJQd2RcIjpcIlwiLFwiUGhvbmVOdW1iZXJcIjpcIjE1OTcyMTc4NDQ1XCIsXCJQZXJzb25uZWxUeXBlXCI6MSxcIlVzZXJUeXBlXCI6MCxcIlJlcG9ydGluZ1Byb2Nlc3NcIjowLFwiSGVhZFNjdWxwdHVyZVVybFwiOm51bGwsXCJTZXhcIjowLFwiVGVhY2hlckNsYXNzSWRzXCI6bnVsbCxcIklzU3VydmV5XCI6ZmFsc2UsXCJTdHVkZW50SWRcIjpcIlwiLFwiV2VsY29tZVllYXJcIjowLFwiSURDYXJkXCI6bnVsbCxcIkV4YW1pbmVlTnVtYmVyXCI6bnVsbCxcIk5vdGlmaWNhdGlvbk51bWJlclwiOm51bGwsXCJFZHVjYXRpb25hbExldmVsXCI6MCxcIlBob3RvUmV2aWV3U3RhdGVcIjowLFwiQ29sbGVnZU5hbWVcIjpudWxsLFwiRW5kVGltZVwiOlwiMDAwMS0wMS0wMVQwMDowMDowMFwiLFwiQWxsRGF0YVBlcm1pc3Npb25cIjowLFwiUm9sZXNcIjpudWxsLFwiUmV2aWV3ZWRTdGF0ZVwiOm51bGx9IiwibmJmIjoxNzE2NDI4NjIxLCJleHAiOjE3MTY0MzIyMjEsImlzcyI6InprSXNzdWVyIUAjJCVeJioiLCJhdWQiOiJ6a0F1ZGllbmNlIUAjJCVeJioifQ.iH1LYSEHNKs5LZVAvRTdghF-hUkKQxFLxBbJOXdRIao';
+    let token: any = getToken() || 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA4ZGI3NTE5LTMxOGUtNDE0My04MDhjLWVmYTI3YmZkZWUyOCIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6IlRlYWNoZXIiLCJ1c2VyaW5mbyI6IntcIklkXCI6XCIwOGRiNzUxOS0zMThlLTQxNDMtODA4Yy1lZmEyN2JmZGVlMjhcIixcIk5hbWVcIjpcImFkbWluXCIsXCJQd2RcIjpcIlwiLFwiUGhvbmVOdW1iZXJcIjpcIjE1OTcyMTc4NDQ1XCIsXCJQZXJzb25uZWxUeXBlXCI6MSxcIlVzZXJUeXBlXCI6MCxcIlJlcG9ydGluZ1Byb2Nlc3NcIjowLFwiSGVhZFNjdWxwdHVyZVVybFwiOm51bGwsXCJTZXhcIjowLFwiVGVhY2hlckNsYXNzSWRzXCI6bnVsbCxcIklzU3VydmV5XCI6ZmFsc2UsXCJTdHVkZW50SWRcIjpcIlwiLFwiV2VsY29tZVllYXJcIjowLFwiSURDYXJkXCI6bnVsbCxcIkV4YW1pbmVlTnVtYmVyXCI6bnVsbCxcIk5vdGlmaWNhdGlvbk51bWJlclwiOm51bGwsXCJFZHVjYXRpb25hbExldmVsXCI6MCxcIlBob3RvUmV2aWV3U3RhdGVcIjowLFwiQ29sbGVnZU5hbWVcIjpudWxsLFwiRW5kVGltZVwiOlwiMDAwMS0wMS0wMVQwMDowMDowMFwiLFwiQWxsRGF0YVBlcm1pc3Npb25cIjowLFwiUm9sZXNcIjpudWxsLFwiUmV2aWV3ZWRTdGF0ZVwiOm51bGx9IiwibmJmIjoxNzE3MDMwNTkyLCJleHAiOjE3MTcwMzQxOTIsImlzcyI6InprSXNzdWVyIUAjJCVeJioiLCJhdWQiOiJ6a0F1ZGllbmNlIUAjJCVeJioifQ.AyTB_XsJbLCh9u3vOgbQknWCr1suOJj62LtbcRZdAUI';
     if (token) {
       // @ts-ignore
       // config.headers.common[RequestEnum.GB_TOKEN_KEY] = token;
diff --git a/src/api/modules/test.ts b/src/api/modules/test.ts
index 2f96fd3..a5c4507 100644
--- a/src/api/modules/test.ts
+++ b/src/api/modules/test.ts
@@ -1,4 +1,14 @@
-import {GET,POST,FILE,FILEPOST,PUT,GETNOBASE} from "../api";
-export const testGet=(param:any={})=>{
-    return GET('/api/TeacherManagement/AdminPCIndex',param)
-}
\ No newline at end of file
+import { GET, POST, FILE, FILEPOST, PUT, GETNOBASE } from "../api";
+export const AdminPCIndex = (param: any = {}) => {
+  return GET("/api/TeacherManagement/AdminPCIndex", param);
+};
+
+//主页 今日缴费情况
+export const WeekPay = (param: any = {}) => {
+  return GET("/api/TeacherManagement/WeekPay", param);
+};
+
+// 专业报道
+export const StatisticsReportedRanking = (param: any = {}) => {
+  return GET("/api/TeacherManagement/StatisticsReportedRanking", param);
+};
diff --git a/src/components/chart/chart.vue b/src/components/chart/chart.vue
new file mode 100644
index 0000000..abffdb4
--- /dev/null
+++ b/src/components/chart/chart.vue
@@ -0,0 +1,136 @@
+<template>
+    <div id="chart" style="width: 150%;height: 150%;">
+
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+    name: 'chart',
+
+    data() {
+        return {
+            myChart: null,
+        };
+    },
+
+    mounted() {
+        //   window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
+        this.init()
+    },
+    beforeDestroy() {
+        //   window.removeEventListener('resize',this.resize)
+    },
+    methods: {
+        //    resize(){
+        //     this.myChart.resize();
+        //   },
+        init(max, value) {
+            var max = max?max:100;
+            var value = value?value:0;
+            var rate = 0
+
+            if (max && value) {
+                rate = (value / max * 100).toFixed(1)
+            }
+            if (rate === "100.0") {
+                rate = "100"; // 如果百分比等于100，则更新为整数形式
+            }
+            var chartDom = document.getElementById('chart');
+            this.myChart = echarts.init(chartDom);
+            // window.onresize = this.myChart.resize;
+            var option;
+
+            option = {
+                title: {
+                    text: (rate || '0.0') + '%',
+                    x: 'center',
+                    y: '20%',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '18',
+                        fontWeight: '600',
+                        fontFamily: 'YouSheBiaoTiHei'
+                    },
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                angleAxis: {
+                    axisLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    min: 0,
+                    max: max,
+                    startAngle: 60,
+                },
+                radiusAxis: {
+                    type: 'category',
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: true,
+                    },
+                    data: [],
+                },
+                polar: {
+                    radius: ['40%', '65%'],
+                    center: ['50%', '30%'],
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        data: [{ name: '预报到填写报到人数', value: value }],
+                        startAngle: 225,
+                        z: 1,
+                        coordinateSystem: 'polar',
+                        barMaxWidth: 35,
+                        roundCap: 1,
+                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                            offset: 0,
+                            color: '#5E7DCD'
+                        },
+                        {
+                            offset: 0.5,
+                            color: '#d81e48'
+                        },
+                        {
+                            offset: 1,
+                            color: '#db4238'
+                        }
+                        ])
+                    },
+                    {
+                        type: 'bar',
+                        data: [max],
+                        z: 0,
+                        silent: true,
+                        coordinateSystem: 'polar',
+                        barMaxWidth: 35,
+                        roundCap: true,
+                        color: '#00214d',
+                        barGap: '-100%',
+                    },
+                ],
+            };
+            option && this.myChart.setOption(option);
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/components/chart/pieChart.vue b/src/components/chart/pieChart.vue
new file mode 100644
index 0000000..f9b4746
--- /dev/null
+++ b/src/components/chart/pieChart.vue
@@ -0,0 +1,137 @@
+<template>
+    <div id="pieChart" style="width: 150%;height: 150%;">
+
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+    name: 'pieChart',
+
+    data() {
+        return {
+            myChart: null,
+        };
+    },
+
+    mounted() {
+        //   window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
+        this.init()
+    },
+    beforeDestroy() {
+        //   window.removeEventListener('resize',this.resize)
+    },
+    methods: {
+        //    resize(){
+        //     this.myChart.resize();
+        //   },
+        init(max, value) {
+            var max = max?max:100;
+            var value = value?value:0;
+
+            var rate = 0
+
+            if (max && value) {
+                rate = (value / max * 100).toFixed(1)
+            }
+            if (rate === "100.0") {
+                rate = "100"; // 如果百分比等于100，则更新为整数形式
+            }
+            var chartDom = document.getElementById('pieChart');
+            this.myChart = echarts.init(chartDom);
+            // window.onresize = this.myChart.resize;
+            var option;
+
+            option = {
+                title: {
+                    text: (rate || '0.0') + '%',
+                    x: 'center',
+                    y: '20%',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '18',
+                        fontWeight: '600',
+                        fontFamily: 'YouSheBiaoTiHei'
+                    },
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                angleAxis: {
+                    axisLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    min: 0,
+                    max: max,
+                    startAngle: 60,
+                },
+                radiusAxis: {
+                    type: 'category',
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: true,
+                    },
+                    data: [],
+                },
+                polar: {
+                    radius: ['40%', '65%'],
+                    center: ['50%', '30%'],
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        data: [{ name: '预报到填写人数', value: value }],
+                        startAngle: 225,
+                        z: 1,
+                        coordinateSystem: 'polar',
+                        barMaxWidth: 35,
+                        roundCap: 1,
+                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                            offset: 0,
+                            color: '#5E7DCD'
+                        },
+                        {
+                            offset: 0.5,
+                            color: '#d81e48'
+                        },
+                        {
+                            offset: 1,
+                            color: '#db4238'
+                        }
+                        ])
+                    },
+                    {
+                        type: 'bar',
+                        data: [max],
+                        z: 0,
+                        silent: true,
+                        coordinateSystem: 'polar',
+                        barMaxWidth: 35,
+                        roundCap: true,
+                        color: '#00214d',
+                        barGap: '-100%',
+                    },
+                ],
+            };
+            option && this.myChart.setOption(option);
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/components/datePicker/datePicker.vue b/src/components/datePicker/datePicker.vue
index 07455cf..c65a1f7 100644
--- a/src/components/datePicker/datePicker.vue
+++ b/src/components/datePicker/datePicker.vue
@@ -2,7 +2,7 @@
  * @Author: 张宁 18339727226@163.com
  * @Date: 2024-05-27 14:46:17
  * @LastEditors: 张宁 18339727226@163.com
- * @LastEditTime: 2024-05-29 15:37:58
+ * @LastEditTime: 2024-05-29 16:31:43
  * @FilePath: \welcome-system-screen\src\components\datePicker\datePicker.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -19,16 +19,16 @@
                     <div class="tabs">
                         <div class="title-item" v-for="(tab, index) in tabs" :key="index"
                             :class="{ active: activeTab === index }" @click="changeTab(index)">
-                            {{ tab.content?tab.content:'' }}{{ tab.title }}
+                            {{ tab.content ? tab.content : '' }}{{ tab.title }}
                         </div>
                     </div>
                     <div class="confirm-box" @click="confirmDate">确定</div>
                 </div>
                 <div class="picker-content" v-show="activeTab === 0">
-                    <yearPane v-model:curYear="myYear" />
+                    <YearPane v-model:curYear="myYear" />
                 </div>
                 <div class="picker-content" v-show="activeTab === 1">
-                    <monthPane v-model:curMonth="myMonth" />
+                    <MonthPane v-model:curMonth="myMonth" />
 
                 </div>
                 <div class="picker-content" v-show="activeTab === 2">
@@ -42,7 +42,7 @@
 
 <script lang="ts" setup name="datePicker">
 import { ref, onMounted, onUnmounted, nextTick } from "vue";
-import { ElConfigProvider } from 'element-plus'
+import { ElConfigProvider, ElMessage } from 'element-plus'
 
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
@@ -54,13 +54,16 @@ const { proxy } = getCurrentInstance();
 const toggleDropdown = () => {
     isOpen.value = !isOpen.value;
 };
-const myYear = ref();
-const myMonth = ref();
-const myDay = ref();
+const props = defineProps({
+    myDate:Object
+})
+const myYear = ref(props.myDate.year);
+const myMonth = ref(props.myDate.month);
+const myDay = ref(props.myDate.day);
 
 // tabs 切换
 const activeTab = ref(0);
-const tabs = computed(()=>{
+const tabs = computed(() => {
     return [
         { title: '年', content: myYear.value },
         { title: '月', content: myMonth.value },
@@ -74,11 +77,37 @@ const changeTab = (index: number) => {
 
 // Select an option from the datePicker
 const confirmDate = () => {
+    // 当日期有值， 但是月份或者年份没值的时候 提示
+    if (myDay.value !== 0) {
+        if (myYear.value === 0) {
+            ElMessage.error('请选择年份')
+            return
+        }
+        if (myMonth.value === 0) {
+            ElMessage.error('请选择月份')
+            return
+        }
+    }
+    // 当月份有值， 但是年份没值的时候 提示
+    if (myMonth.value !== 0) {
+        if (myYear.value === 0) {
+            ElMessage.error('请选择年份')
+            return
+        }
+    }
+    // 年份必须有值
+    if (myYear.value === 0) {
+        ElMessage.error('请选择年份')
+        return
+    }
     isOpen.value = false; // Close the datePicker
     // 将选择的值传递给父组件
-    let dates = `${myYear.value}-${myMonth.value}-${myDay.value}`
-    console.log(dates);
-    proxy.$emit("getOption",dates);
+    let dates = {
+        year: myYear.value,
+        month: myMonth.value,
+        day: myDay.value,
+    }
+    proxy.$emit("getOption", dates);
 };
 
 // Close datePicker when clicking outside
diff --git a/src/stores/data/data.ts b/src/stores/data/data.ts
new file mode 100644
index 0000000..882e227
--- /dev/null
+++ b/src/stores/data/data.ts
@@ -0,0 +1,74 @@
+/*
+ * @Author: 张宁 18339727226@163.com
+ * @Date: 2024-05-27 08:45:53
+ * @LastEditors: 张宁 18339727226@163.com
+ * @LastEditTime: 2024-05-31 16:39:38
+ * @FilePath: \welcome-system-screen\src\stores\time\time.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { ref } from "vue";
+import { defineStore } from "pinia";
+// import { storeToRefs } from 'pinia';
+
+export const useDataStore = defineStore("data", () => {
+  const allData:Ref<any>  = ref({
+    degreeDto: [],
+    forecast:{},
+    forecastFill:{},
+    nationStudent:[],
+    payDto:{},
+    provinceDto:[],
+    rankingDto:[],
+    sexDto:{},
+    today:{},
+    totalDto:{}
+  });
+  const degreeDto=computed(() => allData.value.degreeDto);
+  const forecast=computed(() => allData.value.forecast);
+  const forecastFill=computed(() => allData.value.forecastFill);
+  const nationStudent=computed(() => allData.value.nationStudent);
+  const payDto=computed(() => allData.value.payDto);
+  const provinceDto=computed(() => allData.value.provinceDto);
+  const rankingDto=computed(() => allData.value.rankingDto);
+  const sexDto=computed(()=> allData.value.sexDto);
+  const today=computed(() => allData.value.today);
+  const totalDto=computed(() => allData.value.totalDto);
+
+
+  // 选中的学院id
+  const collageId = ref()
+  // 切换选中的学院
+  const setCollageId = (data:any)=>{
+    collageId.value = data
+  }
+  // 学院对应的专业报道人数
+  const professionRank = ref()
+  const setProfessionRank = (data:any) => {
+    professionRank.value = data;
+  };
+
+  const setData = (data:any) => {
+    allData.value = data;
+  };
+
+  // 本科缴费人数
+  const bkPay= ref()
+  const setBkPay = (data:any) => {
+    console.log('data',data);
+    
+    bkPay.value = data;
+  };
+  // 专科缴费人数
+  const zkPay= ref()
+  const setZkPay = (data:any) => {
+    zkPay.value = data;
+  };
+  // 专升本缴费人数
+  const zsbPay= ref()
+  const setZsbPay = (data:any) => {
+    zsbPay.value = data;
+  };
+
+
+  return { allData,degreeDto,forecast,forecastFill,nationStudent,payDto,provinceDto,rankingDto,sexDto,today,totalDto,setData,bkPay,zkPay,zsbPay,setBkPay,setZkPay,setZsbPay,setCollageId,collageId,professionRank,setProfessionRank};
+});
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 27f5966..16609bd 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -2,9 +2,10 @@
  * @Author: 张宁 18339727226@163.com
  * @Date: 2024-05-22 08:40:56
  * @LastEditors: 张宁 18339727226@163.com
- * @LastEditTime: 2024-05-27 10:28:20
+ * @LastEditTime: 2024-05-30 10:12:40
  * @FilePath: \welcome-system-screen\src\stores\index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 export * from "./setting/setting"
-export * from "./time/time"
\ No newline at end of file
+export * from "./time/time"
+export * from "./data/data"
\ No newline at end of file
diff --git a/src/stores/time/time.ts b/src/stores/time/time.ts
index 7d9ed11..2a4c7a9 100644
--- a/src/stores/time/time.ts
+++ b/src/stores/time/time.ts
@@ -2,7 +2,7 @@
  * @Author: 张宁 18339727226@163.com
  * @Date: 2024-05-27 08:45:53
  * @LastEditors: 张宁 18339727226@163.com
- * @LastEditTime: 2024-05-27 11:40:12
+ * @LastEditTime: 2024-05-31 15:32:52
  * @FilePath: \welcome-system-screen\src\stores\time\time.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -16,19 +16,24 @@ const now = new Date();
 const dates = getCurrentDate();
 
 export const useTimeStore = defineStore("time", () => {
-  const years = ref('');
-  const months = ref('');
-  const nowDays = ref(dates);
+  const years:Ref<any> = ref(now.getFullYear());
+  const months:Ref<any> = ref(now.getMonth() + 1);
+  const days:Ref<any>=ref(now.getDate());
+  const nowDays:Ref<any> = ref(dates);
   const setYears = (year:any) => {
     years.value = year;
   };
   const setMounths = (month: any) => {
     months.value = month;
   }
+  const setDays= (day: any) => {
+    days.value = day;
+  }
   const setNowDays = () => {
     years.value = ''
     months.value = ''
   }
+   // 根据年、月、日的切换，展示不同的标题  --- 具体问问产品怎么展示 -----待修改
   const computDate = computed(() => {
     let dates = '今日'
     if (years.value) {
@@ -54,5 +59,5 @@ export const useTimeStore = defineStore("time", () => {
     return titles
   })
 
-  return { years, months,nowDays, setYears, setMounths,setNowDays,computDate,nowTitle };
+  return { years, months,days,nowDays, setYears, setMounths,setDays,setNowDays,computDate,nowTitle };
 });
diff --git a/src/views/header.vue b/src/views/header.vue
index 83bef9a..faf4391 100644
--- a/src/views/header.vue
+++ b/src/views/header.vue
@@ -1,58 +1,94 @@
 <script setup lang="ts">
-import { testGet } from "@/api";
+import { AdminPCIndex ,WeekPay} from "@/api";
 import { useTimeStore } from "@/stores/index";
 const timeStore = useTimeStore();
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
 
-const test = () => {
-  testGet().then((res: any) => {
-    console.log("test", res);
+// 获取整体数据
+const getAdminPCIndex = (params:any) => {
+  AdminPCIndex(params).then((res: any) => {
+    dataStore.setData(res.data);
   })
 };
+// 获取缴费人数
+// 缴费人数-- 本科 专科 专升本
+const payData = () => {
+  let params: any = [{
+    "EducationalLevel": 3,
+    "Year": myDate.value.year || void 0,
+    "Month": myDate.value.month || void 0,
+    "Day": myDate.value.day || void 0,
+  }, {
+    "EducationalLevel": 4,
+    "Year": myDate.value.year || void 0,
+    "Month": myDate.value.month || void 0,
+    "Day": myDate.value.day || void 0,
+  }, {
+    "EducationalLevel": 6,
+    "Year": myDate.value.year || void 0,
+    "Month": myDate.value.month || void 0,
+    "Day": myDate.value.day || void 0,
+  }]
+  for (let item of params) {
+    WeekPay(item).then((res: any) => {
+      switch (item.EducationalLevel) {
+        case 3:
+          dataStore.setBkPay(res.data);
+        case 4:
+          dataStore.setZkPay(res.data);
+        case 6:
+          dataStore.setZsbPay(res.data);
+      }
+    })
+  }
+
+}
 // const returnHome = () => {
 //   history.go(-1)
 // };
-
-/* const yearOptions = ref([{ label: '2024年', value: 2024 }, { label: '2023年', value: 2023 }, { label: '2022年', value: 2022 }, { label: '2021年', value: 2021 }, { label: '2020年', value: 2020 }])
-const monthOptions = ref([
-  { label: '/', value: null },
-  { label: '1月', value: 1 },
-  { label: '2月', value: 2 },
-  { label: '3月', value: 3 },
-  { label: '4月', value: 4 },
-  { label: '5月', value: 5 },
-  { label: '6月', value: 6 },
-  { label: '7月', value: 7 },
-  { label: '8月', value: 8 },
-  { label: '9月', value: 9 },
-  { label: '10月', value: 10 },
-  { label: '11月', value: 11 },
-  { label: '12月', value: 12 },
-])
-// 获取选择的年
-const getYear = (val: any) => {
-  console.log(val)
-  timeStore.setYears(val)
-} 
-// 获取选择的月
-const getMonth = (val: any) => {
-  console.log(val)
-  timeStore.setMounths(val)
-}
-const selectYear = ref(null)
-const selectMonth = ref(null)
-const selectNowdays = () => {
-  if (selectYear.value) {
-    selectYear.value.clearOption()
-  }
-  if (selectMonth.value) {
-    selectMonth.value.clearOption()
-  }
-  timeStore.setNowDays()
-}*/
+const currentDate = new Date()
+// 当前选择的日期
+const myDate = ref({
+  year: currentDate.getFullYear(),
+  month:currentDate.getMonth() + 1,
+  day: currentDate.getDate(),
+})
 // 获取选择的日期（年 || 月 ||日）
-const getDate = (val:any)=>{
-  console.log('获取选择的日期',val);
-  
+const getDate = (val: any) => {
+  myDate.value = val
+ /*  // 根据年、月、日的切换，展示不同的标题  --- 具体问问产品怎么展示 -----待修改
+  timeStore.setYears(val.year)
+  timeStore.setMounths(val.month)
+  timeStore.setDays(val.day) */
+  let params = {
+    "Year":val.year || void 0,
+    "Month":val.month || void 0,
+    "Day":val.day || void 0,
+  }
+  getAdminPCIndex(params)
+  payData()
+}
+const dateTitle = computed(()=>{
+  let {year, month, day} = myDate.value
+  return formatDate(year, month, day)
+})
+/**
+ * @description: 将日期返回成中文格式
+ * @param {*} year
+ * @param {*} month
+ * @param {*} day
+ * @return {*}
+ */
+function formatDate(year: number, month: number, day: number) {
+  let dateStr = `${year}年`;
+  if (month !== 0) {
+    dateStr += `${month}月`;
+  }
+  if (day !== 0) {
+    dateStr += `${day}日`;
+  }
+  return dateStr;
 }
 </script>
 
@@ -60,7 +96,7 @@ const getDate = (val:any)=>{
   <div class="d-flex">
     <div class="top-left">
       <div class="title">
-        <span class="title-text" @click="test()">新生报道情况</span>
+        <span class="title-text">新生报道情况</span>
         <!-- <span style="color: yellow;" @click="returnHome()">返回</span> -->
       </div>
       <div class="en-title">
@@ -71,8 +107,10 @@ const getDate = (val:any)=>{
 
     <div class="change-time">
       <div class="change-year">
-        <DatePicker @getOption="getDate" ref="selectYear"></DatePicker>
+        <DatePicker @getOption="getDate" :myDate="myDate"></DatePicker>
       </div>
+      <div class="time-title">选择日期：{{ dateTitle }}</div>
+
       <!-- <div class="change-year">
         <Dropdown :options="yearOptions" title="切换年份" @getOption="getYear" ref="selectYear"></Dropdown>
       </div>
@@ -148,6 +186,11 @@ const getDate = (val:any)=>{
   font-family: 'YouSheBiaoTiHei';
   font-size: 16px;
 
+  .time-title {
+    margin-right: 20px;
+    height: 35px;
+    line-height: 30px;
+  }
 
   .change-year {
     width: 125px;
diff --git a/src/views/index/center-map.vue b/src/views/index/center-map.vue
index a88c907..f9c7b84 100644
--- a/src/views/index/center-map.vue
+++ b/src/views/index/center-map.vue
@@ -24,18 +24,18 @@ const getMapChart = (data) => {
       backgroundColor: 'rgba(0, 0, 0, .5)', //tooltip背景色
       borderColor: '#2BEDF6', //tooltip边框颜色
       borderWidth: 0, //去掉白色边框
-      // formatter: function (params) { // 格式化函数，用于自定义 tooltip 的内容
-      //   var html = '<div style="width:120px;background:rgba(0, 0, 0, .5); font-size: 14px; padding-bottom: 3px;">';
-      //   html += '<span style="display:block;width:100%;text-align:center;padding:5px 0; color: #ffffff;border-bottom:1px solid #fff;font-weight:bold">' + (params.name) + '</span>'; // 显示名称
-      //   html += '<span style="margin:3px 0 0 0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招本科：' + (params.data.num3 || 0) + '</span>'; // 显示人数
-      //   html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招专科：' + (params.data.num1 || 0) + '</span>'; // 显示人数
-      //   // html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">'+'统招专升本：' + (params.data.num2 || 0) + '</span>'; // 显示人数
-      //   if (params.data.num2) {
-      //     html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招专升本：' + (params.data.num2 || 0) + '</span>';
-      //   }
-      //   html += '</div>';
-      //   return html;
-      // }
+      formatter: function (params) { // 格式化函数，用于自定义 tooltip 的内容
+        var html = '<div style="width:120px;background:rgba(0, 0, 0, .5); font-size: 14px; padding-bottom: 3px;">';
+        html += '<span style="display:block;width:100%;text-align:center;padding:5px 0; color: #ffffff;border-bottom:1px solid #fff;font-weight:bold">' + (params.name) + '</span>'; // 显示名称
+        html += '<span style="margin:3px 0 0 0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招本科：' + (params.num3 || 0) + '</span>'; // 显示人数
+        html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招专科：' + (params.num1 || 0) + '</span>'; // 显示人数
+        // html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">'+'统招专升本：' + (params.data.num2 || 0) + '</span>'; // 显示人数
+        if (params.num2) {
+          html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招专升本：' + (params.num2 || 0) + '</span>';
+        }
+        html += '</div>';
+        return html;
+      }
     },
     visualMap: {
       min: 0,
@@ -44,15 +44,15 @@ const getMapChart = (data) => {
       bottom: 0,
       showLabel: true,
       selectedMode: false,
-      textStyle:{
-          color:"#fff"
-        },
+      textStyle: {
+        color: "#fff"
+      },
       pieces: [{
         gte: 200,
         lte: 10000,
         label: ">200人",
         color: "#0145b3",
-        
+
       },
       {
         gte: 100,
@@ -117,14 +117,14 @@ const getMapChart = (data) => {
           x2: 0,
           y2: 0,
           colorStops: [
-              {
-                  offset: 0.5,
-                  color: '#0D59C1', // 0% 处的颜色
-              },
-              {
-                  offset: 1,
-                  color: '#b4d9c7', // 100% 处的颜色
-              },
+            {
+              offset: 0.5,
+              color: '#0D59C1', // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: '#b4d9c7', // 100% 处的颜色
+            },
           ],
           global: true, // 缺省为 false
         },
@@ -195,16 +195,19 @@ const getMapChart = (data) => {
 }
 
 
-const resize = () => {
-  myChart.value.resize();
-}
+// const resize = () => {
+//   myChart.value.resize();
+// }
 onMounted(() => {
-  getMapChart();
-  window.addEventListener('resize', () => { resize(); getRem(1700, 100) })
+  // getMapChart();
+  // window.addEventListener('resize', () => { resize(); getRem(1700, 100) })
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', () => { resize() })
+  // window.removeEventListener('resize', () => { resize() })
+})
+defineExpose({
+  getMapChart
 })
 </script>
 <style></style>
\ No newline at end of file
diff --git a/src/views/index/center-top.vue b/src/views/index/center-top.vue
index 5c2a625..3fab95b 100644
--- a/src/views/index/center-top.vue
+++ b/src/views/index/center-top.vue
@@ -1,9 +1,19 @@
+<!--
+ * @Author: 张宁 18339727226@163.com
+ * @Date: 2024-05-22 08:40:56
+ * @LastEditors: 张宁 18339727226@163.com
+ * @LastEditTime: 2024-05-31 14:53:27
+ * @FilePath: \welcome-system-screen\src\views\index\center-top.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <script setup lang="ts">
 import { useTimeStore } from "@/stores/index";
 const timeStore = useTimeStore();
 const { computDate } = storeToRefs(timeStore)
 import { ElMessage } from "element-plus";
-
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
+const { today } = storeToRefs(dataStore)
 
 </script>
 
@@ -15,13 +25,13 @@ import { ElMessage } from "element-plus";
       </div>
       <div class="top-item">
         <div class="top-item-title">{{ computDate }}迎新人数</div>
-        <div class="top-item-content">{{ 12404 }}</div>
+        <div class="top-item-content">{{ today.nowStuden??'-' }}</div>
       </div>
 
     </div>
     <div class="top-item">
       <div class="top-item-title">{{ computDate }}预报到人数</div>
-      <div class="top-item-content">{{ 12404 }}</div>
+      <div class="top-item-content">{{ today.forecastStuden??'-' }}</div>
     </div>
     <div class="top-item">
       <div class="top-item-title">{{ computDate }}预报到报到率</div>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 4a8497f..80a7b99 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -13,11 +13,151 @@ import RightBottomTwo from "./right-bottom-two.vue";
 import { useTimeStore } from "@/stores/index";
 import { storeToRefs } from "pinia";
 const timeStore = useTimeStore();
+
+const { nowTitle, years, months, days } = storeToRefs(timeStore);
+
+import { AdminPCIndex, WeekPay, StatisticsReportedRanking } from "@/api";
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
+const { allData, rankingDto, collageId, professionRank } = storeToRefs(dataStore)
+
+const rightCenterRef = ref(null)
+
+const mapRef = ref(null)
+const tableData = ref()
 const showRight = ref(true)
 const changeRight = () => {
   showRight.value = !showRight.value
+  if (!showRight.value && rbtwoRef) {
+    setTimeout(()=>{
+      rbtwoRef.value.getData(professionRank.value)
+
+    })
+  }
 };
-const { nowTitle } = storeToRefs(timeStore);
+/**
+ * @description: 处理map中的数据
+ * @param {*} data
+ * @return {*}
+ */
+const dealMapData = (data: any) => {
+  tableData.value = data.provinceDto?.map((item: any) => {
+    return {
+      name: item.provinceName,
+      zk: item.degreesDto[0].paymentCompleted + item.degreesDto[0].nonPayment,
+      // zsb:item.degreesDto[1].paymentCompleted+ '/'+(item.degreesDto[1].paymentCompleted+item.degreesDto[1].nonPayment),
+      bk: item.degreesDto[2].paymentCompleted + item.degreesDto[2].nonPayment,
+      zkrate: divideAndFormat(item.degreesDto[0].paymentCompleted, item.degreesDto[0].paymentCompleted + item.degreesDto[0].nonPayment),
+      bkrate: divideAndFormat(item.degreesDto[2].paymentCompleted, item.degreesDto[2].paymentCompleted + item.degreesDto[2].nonPayment),
+      zbdrate: divideAndFormat(item.degreesDto[0].paymentCompleted + item.degreesDto[2].paymentCompleted, item.degreesDto[0].paymentCompleted + item.degreesDto[0].nonPayment + item.degreesDto[2].paymentCompleted + item.degreesDto[2].nonPayment),
+      num1: item.degreesDto[0].paymentCompleted,
+      num2: item.degreesDto[1].paymentCompleted,
+      num3: item.degreesDto[2].paymentCompleted,
+      reported: item.degreesDto[0].paymentCompleted + item.degreesDto[2].paymentCompleted,
+      AdmissionNum: item.degreesDto[0].paymentCompleted + item.degreesDto[0].nonPayment + item.degreesDto[2].paymentCompleted + item.degreesDto[2].nonPayment
+    }
+  })
+  tableData.value?.forEach((item: any, index: any) => {
+    item.sort = index + 1
+    item.sort = item.sort < 10 ? "0" + item.sort : item.sort;
+    if (item.zbdrate == '0.0%') {
+      item.zbdrate = '0%'
+    }
+  })
+  tableData.value.sort((a: any, b: any) => {
+    return a.zbdrate - b.zbdrate
+  })
+}
+
+const divideAndFormat = (divisor: any, dividend: any) => {
+  if (dividend === 0) {
+    return "0.0%";
+  }
+
+  let result = (divisor / dividend) * 100;
+  return result.toFixed(1) + "%";
+}
+const rbtwoRef = ref(null)
+const getProfession = () => {
+  let params = {
+    "id": collageId.value
+  }
+  StatisticsReportedRanking(params).then(res => {
+    dataStore.setProfessionRank(res.data)
+    setTimeout(() => {
+      if (!showRight.value && rbtwoRef) {
+        rbtwoRef.value.getData(professionRank.value)
+      }
+    })
+  })
+
+}
+watch(collageId, () => {
+  getProfession()
+
+})
+
+/**
+ * @description: 获取页面数据
+ * @return {*}
+ */
+const getAdminPCIndex = () => {
+  AdminPCIndex().then((res: any) => {
+    dataStore.setData(res.data);
+    dataStore.setCollageId(res.data.rankingDto[0].collegeId)
+    dealMapData(res.data)
+    setTimeout(() => {
+      if (mapRef) {
+        mapRef.value.getMapChart(tableData.value)
+      }
+    });
+  })
+};
+
+// 缴费人数-- 本科 专科 专升本
+const payData = () => {
+  let params: any = [{
+    "EducationalLevel": 3,
+    "Year": years.value,
+    "Month": months.value,
+    "Day": days.value
+  }, {
+    "EducationalLevel": 4,
+    "Year": years.value,
+    "Month": months.value,
+    "Day": days.value
+  }, {
+    "EducationalLevel": 6,
+    "Year": years.value,
+    "Month": months.value,
+    "Day": days.value
+  }]
+  for (let item of params) {
+    WeekPay(item).then((res: any) => {
+      switch (item.EducationalLevel) {
+        case 3:
+          dataStore.setBkPay(res.data);
+        case 4:
+          dataStore.setZkPay(res.data);
+        case 6:
+          dataStore.setZsbPay(res.data);
+      }
+    })
+  }
+  setTimeout(() => {
+    if (rightCenterRef) {
+      rightCenterRef.value.getData()
+    }
+  });
+
+}
+
+
+onMounted(() => {
+  getAdminPCIndex();
+  payData();
+});
+
 </script>
 
 <template>
@@ -35,27 +175,27 @@ const { nowTitle } = storeToRefs(timeStore);
     </div>
     <div class="contetn_center">
       <CenterTop class="contetn_center_top" />
-      <CenterMap class="contetn_center_map" title="全国地图" />
+      <CenterMap class="contetn_center_map" title="全国地图" ref="mapRef" />
     </div>
-    <div class="contetn_right" v-if="showRight">
+    <div class="contetn_right" v-show="showRight">
       <div class="change-btn" @click="changeRight"></div>
       <zkItem class="contetn_left-bottom contetn_rt-one" title="缴费人数">
         <RightTop />
       </zkItem>
       <zkItem class="contetn_left-bottom contetn_rc-item" :title="nowTitle + '缴费人数'" style="padding: 0 10px 16px 10px">
-        <RightCenter />
+        <RightCenter ref="rightCenterRef" />
       </zkItem>
-      <zkItem class="contetn_left-bottom contetn_rb-item" title="报道人数区域排名 ">
+      <zkItem class="contetn_left-bottom contetn_rb-item" title="报到人数区域排名 ">
         <RightBottom />
       </zkItem>
     </div>
-    <div class="contetn_right" v-else>
+    <div class="contetn_right" v-if="!showRight">
       <div class="change-btn" @click="changeRight"></div>
       <zkItem class="contetn_left-bottom contetn_rt_two" title="学院报到人数">
         <RightTopTwo />
       </zkItem>
       <zkItem class="contetn_left-bottom contetn_rb-item" title="专业报到人数 ">
-        <RightBottomTwo />
+        <RightBottomTwo ref="rbtwoRef" />
       </zkItem>
     </div>
   </div>
diff --git a/src/views/index/left-bottom copy.vue b/src/views/index/left-bottom copy.vue
deleted file mode 100644
index 65c2b02..0000000
--- a/src/views/index/left-bottom copy.vue	
+++ /dev/null
@@ -1,176 +0,0 @@
-<script setup lang="ts">
-import { color } from "echarts";
-import { ElMessage } from "element-plus";
-
-const option = ref({});
-const getData = () => {
-  var dataValArray = 0.63;
-  var datatext = ['17.25', '20', '12', '32', '19'];
-  var datasubtext = ['体育意识', '体育技能', '体育行为', '体育知识', '体质健康'];
-  setOption(datatext, datasubtext, dataValArray)
-};
-const Green = {
-  x: 0,
-  y: 0,
-  x2: 0,
-  y2: 1,
-  colorStops: [{
-    offset: 0,
-    color: '#99da69' // 0% 处的颜色
-  }, {
-    offset: 1,
-    color: '#01babc' // 100% 处的颜色
-  }],
-  globalCoord: false // 缺省为 false
-};
-const setOption = async (datatext: any[], datasubtext: any[], dataValArray: any) => {
-  option.value = {
-    backgroundColor: 'transparent',
-    title: {
-      text: datatext[0] + '%',
-      subtext: datasubtext[0],
-      x: 'center',
-      y: 'center',
-      textStyle: {
-        fontSize: 26,
-        fontWeight: 'normal',
-        color: ['#67828c']
-      },
-      subtextStyle: {
-        color: '#67828c',
-        fontSize: 16,
-        align: 'center',
-      }
-    },
-    series: [{
-      //渐变圆环
-      name: "",
-      type: "pie",
-      radius: ["35%", "50%"],
-      startAngle: 180,
-      hoverAnimation: false,
-      avoidLabelOverlap: true,
-      z: 0,
-      zlevel: 0,
-      label: {
-        show: false,
-        normal: { show: false }
-      },
-      data: [{
-        value: 0,
-        name: "",
-        itemStyle: {
-          normal: {
-            color: Green
-          }
-        }
-      }]
-    },
-    {
-      //仪表盘样式
-      name: "",
-      type: "gauge",
-      radius: "50%",
-      startAngle: 180,
-      clockwise: true,
-      splitNumber: 50,
-      hoverAnimation: true,
-      axisTick: {
-        show: false
-      },
-      splitLine: {
-        length: 20,
-        lineStyle: {
-          width: 1,
-          color: "#fff"
-        }
-      },
-      axisLabel: {
-        show: false
-      },
-      pointer: {
-        show: false
-      },
-      axisLine: {
-        lineStyle: {
-          opacity: 0
-        }
-      },
-      detail: {
-        show: false
-      },
-      data: [{
-        value: Math.round((dataValArray * 100)),
-        name: ""
-      }]
-    },
-    {
-      //进度圆环
-      name: 'Line 1',
-      type: 'pie',
-      startAngle: 180,
-      clockWise: true,
-      radius: ['55%', '56%'],
-      itemStyle: {
-        normal: {
-          label: {
-            show: true
-          },
-          labelLine: {
-            show: false
-          },
-        }
-      },
-      hoverAnimation: false,
-
-      data: [{
-        value: Math.round((dataValArray * 100)),
-        itemStyle: {
-          normal: {
-            color: '#20da97'
-          }
-        }
-      }, {//画中间的图标
-        name: "",
-        value: 0,
-        label: {
-          position: 'inside',
-          // backgroundColor: {
-          //   image: uploadedDataURL
-          // },
-          width: 16,
-          height: 16,
-          borderRadius: 20,
-          padding: 11
-        }
-      }, {
-        value: 100 - Math.round((dataValArray * 100)),
-        name: 'invisible',
-        itemStyle: {
-          normal: {
-            color: 'transparent', //未完成的圆环的颜色
-            label: {
-              show: false
-            },
-            labelLine: {
-              show: false
-            }
-          }
-        }
-      }
-      ]
-    }
-    ]
-  };
-};
-
-onMounted(() => {
-  getData();
-});
-</script>
-
-<template>
-  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/src/views/index/left-bottom.vue b/src/views/index/left-bottom.vue
index 9252a58..66d10f2 100644
--- a/src/views/index/left-bottom.vue
+++ b/src/views/index/left-bottom.vue
@@ -1,5 +1,26 @@
+<!--
+ * @Author: 张宁 18339727226@163.com
+ * @Date: 2024-05-23 20:42:55
+ * @LastEditors: 张宁 18339727226@163.com
+ * @LastEditTime: 2024-05-30 13:49:47
+ * @FilePath: \welcome-system-screen\src\views\index\left-bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <script setup lang="ts">
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
+const {forecast,forecastFill} = storeToRefs(dataStore)
 
+const chartRef = ref(null)
+const pieChartRef = ref(null)
+onMounted(()=>{
+  if (chartRef) {
+    chartRef.value.init(forecast.value.total,forecast.value.reported)
+  }
+  if (pieChartRef) {
+    pieChartRef.value.init(forecastFill.value.total,forecastFill.value.reported)
+  }
+})
 </script>
 
 <template>
@@ -7,7 +28,9 @@
   <div class="left-bottom">
     <div class="content">
       <div class="title">预报到报到率</div>
-      <div class="left-content"></div>
+      <div class="left-content">
+        <chart ref="chartRef"></chart>
+      </div>
       <div class="bottom-title">
         <div class="icons"></div> 
         <div class="tips">预报到填写总数</div>
@@ -19,7 +42,9 @@
     </div>
     <div class="content">
       <div class="title">预报到填写率</div>
-      <div class="right-content"></div>
+      <div class="right-content">
+        <pieChart ref="pieChartRef"></pieChart>
+      </div>
       <div class="bottom-title">
         <div class="icons"></div>
         <div class="tips">新生总人数</div>
@@ -47,21 +72,12 @@
     margin-bottom: 20px;
   }
 
-  .left-content {
+  .left-content,.right-content {
     width: 105px;
     height: 105px;
-    background: url("@/assets/img/zheke/lb_left.png");
-    background-size: cover;
-    background-position: center center;
-    margin-bottom: 10px;
-  }
-
-  .right-content {
-    width: 105px;
-    height: 105px;
-    background: url("@/assets/img/zheke/lb_right.png");
-    background-size: cover;
-    background-position: center center;
+    // background: url("@/assets/img/zheke/lb_left.png");
+    // background-size: cover;
+    // background-position: center center;
     margin-bottom: 10px;
   }
 
diff --git a/src/views/index/left-center.vue b/src/views/index/left-center.vue
index f6ac1cd..e7f5ac7 100644
--- a/src/views/index/left-center.vue
+++ b/src/views/index/left-center.vue
@@ -1,5 +1,31 @@
 <script setup lang="ts">
-
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
+const { degreeDto } = storeToRefs(dataStore)
+const rate = (total: any, registers: any) => {
+  return ((registers / total) * 100).toFixed(1)
+}
+const bkRate = computed(() => {
+  if (degreeDto.value?.length ) {
+    return rate(degreeDto.value[2].studentNumber, degreeDto.value[2].reportNumber)
+  } else {
+    return 0
+  }
+})
+const zkRate = computed(() => {
+  if (degreeDto.value?.length) {
+    return rate(degreeDto.value[0].studentNumber, degreeDto.value[0].reportNumber)
+  } else {
+    return 0
+  }
+})
+const zsbRate = computed(() => {
+  if (degreeDto.value?.length) {
+    return rate(degreeDto.value[1].studentNumber, degreeDto.value[1].reportNumber)
+  } else {
+    return 0
+  }
+})
 </script>
 
 <template>
@@ -13,14 +39,14 @@
         <div class="content-left">
           <div class="content-title title-top">统招本科</div>
           <p class="item-title">统招本科总人数</p>
-          <p class="item-content">12,000</p>
+          <p class="item-content">{{ degreeDto[2]?degreeDto[2].studentNumber:'-' }}</p>
         </div>
         <div class="content-right">
           <div class="right-title title-top item-title">报到率
-            <span class="title-num numBlue">84.5%</span>
+            <span class="title-num numBlue">{{ isNaN(bkRate) ? '-' : bkRate }}%</span>
           </div>
           <p class="item-title">今日报到人数</p>
-          <p class="item-content numBlue">3,000</p>
+          <p class="item-content numBlue">{{ degreeDto[2]?degreeDto[2].reportNumber:'-' }}</p>
         </div>
       </div>
     </div>
@@ -33,14 +59,14 @@
         <div class="content-left">
           <div class="content-title title-top tGreen">统招专科</div>
           <p class="item-title">统招专科总人数</p>
-          <p class="item-content">12,000</p>
+          <p class="item-content">{{ degreeDto[0]?degreeDto[0].studentNumber:'-' }}</p>
         </div>
         <div class="content-right">
           <div class="right-title title-top item-title">报到率
-            <span class="title-num numGreen">84.5%</span>
+            <span class="title-num numGreen">{{ isNaN(zkRate) ? '-' : zkRate }}%</span>
           </div>
           <p class="item-title">今日报到人数</p>
-          <p class="item-content numGreen">3,000</p>
+          <p class="item-content numGreen">{{ degreeDto[0]?degreeDto[0].reportNumber:'-' }}</p>
         </div>
       </div>
     </div>
@@ -53,14 +79,14 @@
         <div class="content-left">
           <div class="content-title title-top tGray">统招专升本</div>
           <p class="item-title">统招专升本总人数</p>
-          <p class="item-content">12,000</p>
+          <p class="item-content">{{ degreeDto[1]?degreeDto[1].studentNumber:'-' }}</p>
         </div>
         <div class="content-right">
           <div class="right-title title-top item-title">报到率
-            <span class="title-num numGrey">84.5%</span>
+            <span class="title-num numGrey">{{ isNaN(zsbRate) ? '-' : zsbRate }}%</span>
           </div>
           <p class="item-title">今日报到人数</p>
-          <p class="item-content numGrey">3,000</p>
+          <p class="item-content numGrey">{{ degreeDto[1]?degreeDto[1].reportNumber:'-' }}</p>
         </div>
       </div>
     </div>
@@ -124,16 +150,20 @@
     .numBlue {
       color: #69cbff;
     }
-    .numGreen{
+
+    .numGreen {
       color: #73eba8;
     }
-    .numGrey{
+
+    .numGrey {
       color: #84baef;
     }
-    .tGreen{
-     color: #a9d9c7;
+
+    .tGreen {
+      color: #a9d9c7;
     }
-    .tGray{
+
+    .tGray {
       color: #9499b9;
     }
   }
diff --git a/src/views/index/left-top.vue b/src/views/index/left-top.vue
index 4284c85..5cf9067 100644
--- a/src/views/index/left-top.vue
+++ b/src/views/index/left-top.vue
@@ -1,4 +1,15 @@
 <script setup lang="ts">
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
+const { totalDto } = storeToRefs(dataStore)
+// 预报到总人数 已报到人数+未报到人数
+const totalReport = computed(() => {
+    return (totalDto.value.reportNumber + totalDto.value.notReportNumber)
+})
+// 迎新总进度 已预报到总人数/预报到总人数
+const progress = computed(() => {
+    return ((totalDto.value.reportNumber / totalReport.value) * 100).toFixed(1)
+});
 
 
 
@@ -12,7 +23,7 @@
             </div>
             <div class="top-item">
                 <div class="top-item-title">已报到人数</div>
-                <div class="top-item-content">{{ 11024 }}</div>
+                <div class="top-item-content">{{ totalDto.reportNumber ?? '-' }}</div>
             </div>
         </div>
         <div class="top-item-img">
@@ -21,22 +32,22 @@
             </div>
             <div class="top-item">
                 <div class="top-item-title title-red">未报到人数</div>
-                <div class="top-item-content content-red"> {{ 11024 }} </div>
+                <div class="top-item-content content-red"> {{ totalDto.notReportNumber ?? '-' }} </div>
             </div>
         </div>
     </div>
     <div class="left-bottom">
         <div class="bottom-item">
             <div class="bottom-item-title">预报到总人数</div>
-            <div class="bottom-item-content"> {{ 11024 }} </div>
+            <div class="bottom-item-content"> {{ isNaN(totalReport) ? '-' : totalReport }} </div>
         </div>
         <div class="bottom-item">
             <div class="bottom-item-title">录取总人数</div>
-            <div class="bottom-item-content"> {{ 11024 }} </div>
+            <div class="bottom-item-content"> {{ totalDto.totalNumber ?? '-' }} </div>
         </div>
         <div class="bottom-item">
             <div class="bottom-item-title">迎新总进度</div>
-            <div class="bottom-item-content"> 95% </div>
+            <div class="bottom-item-content"> {{ isNaN(progress) ? '-' : progress}}% </div>
         </div>
     </div>
 </template>
@@ -73,6 +84,7 @@
             font-family: YouSheBiaoTiHei;
             font-weight: 400;
             font-size: 36px;
+            text-align: center;
             color: #FFFFFF;
             background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(182, 198, 229, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%, );
             -webkit-background-clip: text;
@@ -107,12 +119,14 @@
         color: #fbeedb;
         text-shadow: 0px 2px 6px rgba(27, 24, 19, 0.31);
         font-style: italic;
+
         // background: linear-gradient(0deg, rgba(152,115,58,1) 0%, rgba(205,169,114,1) 41.89453125%, rgba(232,215,190,1) 84.1796875%, rgba(255,236,221,0.27) 100%);
         // -webkit-background-clip: text;
         // -webkit-text-fill-color: transparent;
-        .bottom-item-content{
+        .bottom-item-content {
             margin-top: 10px;
             font-size: 26px;
+            text-align: center;
         }
     }
 }
diff --git a/src/views/index/right-bottom-two.vue b/src/views/index/right-bottom-two.vue
index aca0e76..3b0e33d 100644
--- a/src/views/index/right-bottom-two.vue
+++ b/src/views/index/right-bottom-two.vue
@@ -1,16 +1,17 @@
+<!--
+ * @Author: 张宁 18339727226@163.com
+ * @Date: 2024-05-23 19:38:24
+ * @LastEditors: 张宁 18339727226@163.com
+ * @LastEditTime: 2024-05-31 18:55:10
+ * @FilePath: \welcome-system-screen\src\views\index\right-bottom-two.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <script setup lang="ts">
-import { color } from "echarts";
 import { ElMessage } from "element-plus";
-
-const option = ref({});
-const getData = () => {
-  let dateList = ['飞行棋制造工程', '航空服务艺术与管理', '空中乘务', '飞行技术', '航空航天工程', "飞行器数字化制造技术"]
-  let numList = [1, 5, 2, 4, 9, 6]
-  setOption(dateList, numList)
-};
-const setOption = async (xData: any[], yData: any[]) => {
-  option.value = {
-    xAxis: {
+const xData:Ref<any> = ref([])
+const yData:Ref<any> = ref([])
+const option = reactive({
+  xAxis: {
       type: "category",
       data: xData,
       boundaryGap: true, // 是否留白，从原点开始
@@ -56,16 +57,24 @@ const setOption = async (xData: any[], yData: any[]) => {
         }
       }
     ],
-  };
+});
+const getData = (params: any) => {
+  let dateList = params.map((el: any) => el.professionalName)
+  let numList = params.map((el: any) => el.reportNumber)
+  setOption(dateList, numList)
+};
+const setOption = async (x: any[], y: any[]) => {
+  console.log(x, y);
+  xData.value = x
+  yData.value = y
 };
 
-onMounted(() => {
-  getData();
-});
+defineExpose({ getData })
 </script>
 
 <template>
-  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
+  <!-- v-if="JSON.stringify(option) != '{}'" -->
+  <v-chart class="chart" :option="option" />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/views/index/right-bottom.vue b/src/views/index/right-bottom.vue
index d85650d..29e619a 100644
--- a/src/views/index/right-bottom.vue
+++ b/src/views/index/right-bottom.vue
@@ -8,6 +8,12 @@ import { ElMessage } from "element-plus";
 
 const settingStore = useSettingStore();
 const { defaultOption, indexConfig } = storeToRefs(settingStore);
+// 处理数据
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
+const { provinceDto } = storeToRefs(dataStore)
+
+
 const state = reactive<any>({
   list: [],
   defaultOption: {
@@ -20,725 +26,6 @@ const state = reactive<any>({
   scroll: true,
 });
 
-const getData = () => {
-  state.list = [
-    {
-      "provinceName": "北京",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "上海",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "天津",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "重庆",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "河北",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 1
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "山西",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "内蒙古",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "辽宁",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "吉林",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "黑龙江",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "江苏",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "浙江",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "安徽",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "福建",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "江西",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "山东",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 1
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "河南",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 1
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "湖北",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 2
-        }
-      ]
-    },
-    {
-      "provinceName": "湖南",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "广东",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "广西",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "海南",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "四川",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "贵州",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "云南",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "西藏",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "陕西",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "甘肃",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "青海",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "宁夏",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "香港",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "澳门",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "台湾",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    },
-    {
-      "provinceName": "新疆",
-      "progress": 0,
-      "degreesDto": [
-        {
-          "degreesName": "统招专科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招专升本",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        },
-        {
-          "degreesName": "统招本科",
-          "paymentCompleted": 0,
-          "nonPayment": 0
-        }
-      ]
-    }
-  ]
-};
-
 const comName = computed(() => {
   if (indexConfig.value.rightBottomSwiper) {
     return SeamlessScroll;
@@ -746,10 +33,6 @@ const comName = computed(() => {
     return EmptyCom;
   }
 });
-
-onMounted(() => {
-  getData();
-});
 </script>
 
 <template>
@@ -767,7 +50,7 @@ onMounted(() => {
         :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
         :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
         :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
-        <div class="table-row" v-for="(item, i) in state.list">
+        <div class="table-row" v-for="(item, i) in provinceDto">
           <div class="row-item">{{ i + 1 }}</div>
           <div class="row-item">{{ item.provinceName }}</div>
           <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div>
diff --git a/src/views/index/right-center.vue b/src/views/index/right-center.vue
index 4176ee8..8589a84 100644
--- a/src/views/index/right-center.vue
+++ b/src/views/index/right-center.vue
@@ -1,25 +1,40 @@
 <script setup lang="ts">
 import { ElMessage } from "element-plus";
-import { useTimeStore } from "@/stores/index";
+import { useTimeStore, useDataStore } from "@/stores/index";
 import { storeToRefs } from "pinia";
 const timeStore = useTimeStore()
 const { nowTitle } = storeToRefs(timeStore)
+
+const dataStore = useDataStore()
+const { bkPay, zkPay, zsbPay } = storeToRefs(dataStore)
 const activeTab = ref(0);
-const tabs = [
-  { title: '本科', value: 3900, dateList: ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"], numList: [1, 5, 2, 4, 9, 6] },
-  { title: '专科', value: 4500, dateList: ['1-6', '1-7', '1-8', '1-9', '1-10', "1-11"], numList: [4, 9, 6, 1, 5, 2] },
-  { title: '专升本', value: 6000, dateList: ['2-6', '2-7', '2-8', '2-9', '2-10', "2-11"], numList: [1, 6, 5, 2, 4, 9,] },
-];
+const tabs = ref([
+  { title: '本科', value: 0, dateList: ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"], numList: [1, 5, 2, 4, 9, 6] },
+  { title: '专科', value: 0, dateList: ['1-6', '1-7', '1-8', '1-9', '1-10', "1-11"], numList: [4, 9, 6, 1, 5, 2] },
+  { title: '专升本', value: 0, dateList: ['2-6', '2-7', '2-8', '2-9', '2-10', "2-11"], numList: [1, 6, 5, 2, 4, 9,] },
+]);
 
 const changeTab = (index: number) => {
   activeTab.value = index;
-  setOption(tabs[index].dateList, tabs[index].numList)
+  setOption(tabs.value[index].dateList, tabs.value[index].numList)
 };
 
 const option = ref({});
+
+// 这里拿不到pinia的值 因为子组件比父组件先渲染
+// 暴露出去 让父组件调用 来赋值------待修改
 const getData = () => {
+  // console.log('bkPay.value',bkPay.value);
   let dateList = ['11-6', '11-7', '11-8', '11-9', '11-10', "11-11"]
   let numList = [1, 5, 2, 4, 9, 6]
+  // tabs.value[0].dateList = bkPay.value?.statistics
+  // tabs.value[1].dateList = zkPay.value?.statistics
+  // tabs.value[2].dateList = zsbPay.value?.statistics
+
+  // tabs.value[0].numList = bkPay.value?.statistics
+  // tabs.value[1].numList = zkPay.value?.statistics
+  // tabs.value[2].numList = zsbPay.value?.statistics
+  
   setOption(dateList, numList)
 };
 const setOption = async (xData: any[], yData: any[]) => {
@@ -161,20 +176,20 @@ const setOption = async (xData: any[], yData: any[]) => {
   };
 };
 
-onMounted(() => {
-  getData();
-});
+defineExpose({getData})
 </script>
 
 <template>
   <div class="tabs">
     <div class="no-tab">
       <p>{{ nowTitle }}缴费总人数</p>
-      <p> 12,000 </p>
+      <p> {{ bkPay?.todayPayDto?.payNum }} </p>
     </div>
     <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
       <p>{{ tab.title }}</p>
-      <p>{{ tab.value }}</p>
+      <p v-if="index == 0">{{ bkPay?.todayPayDto?.bkPayNum }}</p>
+      <p v-if="index == 1">{{ bkPay?.todayPayDto?.zkPayNum }}</p>
+      <p v-if="index == 2">{{ bkPay?.todayPayDto?.zsbPayNum }}</p>
     </div>
   </div>
   <!-- <div class="tab-content"> -->
diff --git a/src/views/index/right-top-two.vue b/src/views/index/right-top-two.vue
index d335d8b..274d177 100644
--- a/src/views/index/right-top-two.vue
+++ b/src/views/index/right-top-two.vue
@@ -6,6 +6,22 @@ import { storeToRefs } from "pinia";
 import EmptyCom from "@/components/empty-com";
 import { ElMessage } from "element-plus";
 
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
+const { rankingDto,collageId } = storeToRefs(dataStore)
+
+/**
+ * @description: 计算报到率
+ * @return {*}
+ */
+const getRate = (report: any, total: any) => {
+  if (report && total) {
+    return ((report / total) * 100).toFixed(1);
+  } else {
+    return 0;
+  }
+}
+
 const settingStore = useSettingStore();
 const { defaultOption, indexConfig } = storeToRefs(settingStore);
 const state = reactive<any>({
@@ -20,151 +36,6 @@ const state = reactive<any>({
   scroll: true,
 });
 
-const getData = () => {
-  state.list = [
-    {
-      "collegeName": "机电工程学院",
-      "collegeId": "08db7155-bdf1-4633-884e-95735ef931f2",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "美术与设计学院",
-      "collegeId": "08db81af-0a80-4dd8-8bd6-06e7020530b9",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "人文教育学院",
-      "collegeId": "08db81af-168b-402d-87d1-bdd7ee3c4c47",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "体育学院",
-      "collegeId": "08db81af-2af2-491e-8a45-a15a4fd43431",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "医学院",
-      "collegeId": "08db81af-5df9-4b57-834e-3ee6bbf307d4",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "音乐学院",
-      "collegeId": "08db81af-73b7-40e0-8103-2c38a19d03cc",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "冰冰艺术学院",
-      "collegeId": "08dc6f26-c565-49d7-8dc8-2bc8926d8516",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "社会科学研究院",
-      "collegeId": "08dc70b7-825a-4298-83cc-e3eaf08abf52",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 3
-    },
-    {
-      "collegeName": "绿色生态学院",
-      "collegeId": "08dc70b7-a640-49af-8ab7-9f520aac02d9",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 2
-    },
-    {
-      "collegeName": "建筑工程学院",
-      "collegeId": "08db81ae-fc5f-424e-868b-503bd234e8f2",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "计算机信息工程学院",
-      "collegeId": "08db81ae-e39d-4155-8d7a-c118d629e422",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "航天航空学院",
-      "collegeId": "08db7156-2004-4be4-8dfe-1ac36ebdb422",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "外国语学院",
-      "collegeId": "08db716b-7370-4ef3-812e-7edd113ff017",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "电子与信息学院",
-      "collegeId": "08db721b-e050-4480-8087-60a179e75d16",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "工商管理学院",
-      "collegeId": "08db751e-3c7a-406a-814e-f81580e3e1c3",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "财经学院",
-      "collegeId": "08db7882-089f-4105-8d01-920fa1e7327a",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "传媒学院",
-      "collegeId": "08db81ae-3f52-4765-8c8b-459f4b947a2c",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "法学院",
-      "collegeId": "08db81ae-721b-4e41-8fd7-4ecdb0b00508",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 2
-    },
-    {
-      "collegeName": "国际交流学院",
-      "collegeId": "08db81ae-9d43-4ae0-8d0f-541ba77af10d",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    },
-    {
-      "collegeName": "xie学院",
-      "collegeId": "08dc79fe-336b-49db-8c74-7e1a3184f2d7",
-      "isTeacher": false,
-      "reportNumber": 0,
-      "totalNumber": 0
-    }
-  ]
-};
-
 const comName = computed(() => {
   if (indexConfig.value.rightBottomSwiper) {
     return SeamlessScroll;
@@ -173,9 +44,10 @@ const comName = computed(() => {
   }
 });
 
-onMounted(() => {
-  getData();
-});
+
+const onSelectData = (id: any) => {
+  dataStore.setCollageId(id)
+}
 </script>
 
 <template>
@@ -194,14 +66,18 @@ onMounted(() => {
         :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
         :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
         :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
-        <div class="table-row" v-for="(item, i) in state.list">
+      <template v-for="(item, i) in rankingDto">
+        <div class="table-row" :class="{ 'table-row-active': item.collegeId === collageId }"
+          @click="onSelectData(item.collegeId)">
           <div class="row-item">{{ i + 1 }}</div>
-          <div class="row-item" :title=item.collegeName >{{ item.collegeName }}</div>
+          <div class="row-item" :title=item.collegeName>{{ item.collegeName }}</div>
           <div class="row-item">{{ item.reportNumber }}</div>
           <div class="row-item">{{ item.totalNumber }}</div>
-          <div class="row-item">{{ '0%' }}</div>
+          <div class="row-item">{{ getRate(item.reportNumber, item.totalNumber) }}%</div>
           <!-- <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div> -->
         </div>
+      </template>
+
       <!-- </component> -->
     </div>
   </div>
@@ -240,6 +116,7 @@ onMounted(() => {
     line-height: 50px;
     margin-bottom: 2px;
     color: #E6E6FB;
+    cursor: pointer;
 
     &:hover {
       background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
@@ -253,11 +130,17 @@ onMounted(() => {
       white-space: nowrap;
     }
   }
+
+  .table-row-active {
+    background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
+
+  }
 }
 
 .overflow-y-auto {
   overflow-y: auto;
 }
+
 ::-webkit-scrollbar {
   width: 0px;
 }
diff --git a/src/views/index/right-top.vue b/src/views/index/right-top.vue
index 22a8ec7..13f71fb 100644
--- a/src/views/index/right-top.vue
+++ b/src/views/index/right-top.vue
@@ -1,20 +1,30 @@
+<!--
+ * @Author: 张宁 18339727226@163.com
+ * @Date: 2024-05-22 08:40:56
+ * @LastEditors: 张宁 18339727226@163.com
+ * @LastEditTime: 2024-05-30 14:58:06
+ * @FilePath: \welcome-system-screen\src\views\index\right-top.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <script setup lang="ts">
-
+import { useDataStore } from "@/stores/index";
+const dataStore = useDataStore();
+const { payDto } = storeToRefs(dataStore)
 </script>
 
 <template>
   <div class="right-top">
     <div class="items">
       <div class="item-title">已缴费人数</div>
-      <div class="item-content">12,120</div>
+      <div class="item-content">{{ payDto.payNum }}</div>
     </div>
     <div class="items item-two">
       <div class="item-title">已报到未缴费人数</div>
-      <div class="item-content">4,049</div>
+      <div class="item-content">{{ payDto.reportNotPay }}</div>
     </div>
     <div class="items item-three">
       <div class="item-title">生活用品缴费人数</div>
-      <div class="item-content">4,049</div>
+      <div class="item-content">{{ payDto.consumerGoods }}</div>
     </div>
   </div>