接口对接
This commit is contained in:
张宁
parent
ddd5ab1ed5
commit
0efc8516d1
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,14 @@
|
|||
import {GET,POST,FILE,FILEPOST,PUT,GETNOBASE} from "../api";
|
||||
export const testGet=(param:any={})=>{
|
||||
return GET('/api/TeacherManagement/AdminPCIndex',param)
|
||||
}
|
||||
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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
});
|
||||
|
|
@ -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"
|
||||
export * from "./time/time"
|
||||
export * from "./data/data"
|
||||
|
|
@ -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 };
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"> -->
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue