JiXinHui
/
AIzhushou-screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

全局时间调整

This commit is contained in:
张宁 2024-05-27 11:43:19 +08:00
parent 2db21bf40d
commit 2cbcc62ec2
10 changed files with 136 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -5,7 +5,7 @@
"requires": true,
"packages": {
"": {
"name": "test",
"name": "test2",
"version": "0.0.0",
"dependencies": {
"axios": "^1.6.8",

2
package.json
View File

@ -1,5 +1,5 @@
{
"name": "test",
"name": "screen",
"version": "0.0.0",
"type": "module",
"scripts": {

9
src/stores/index.ts
View File

@ -1 +1,10 @@
/*
* @Author: 张宁 18339727226@163.com
* @Date: 2024-05-22 08:40:56
* @LastEditors: 张宁 18339727226@163.com
* @LastEditTime: 2024-05-27 10:28:20
* @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"

58
src/stores/time/time.ts Normal file
View File

@ -0,0 +1,58 @@
/*
* @Author: 张宁 18339727226@163.com
* @Date: 2024-05-27 08:45:53
* @LastEditors: 张宁 18339727226@163.com
* @LastEditTime: 2024-05-27 11:40:12
* @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 {getCurrentDate} from "../../utils/common"
// import { storeToRefs } from 'pinia';
// 创建一个Date对象，它将自动获取当前时间
const now = new Date();
// 获取当前日期
const dates = getCurrentDate();
export const useTimeStore = defineStore("time", () => {
const years = ref('');
const months = ref('');
const nowDays = ref(dates);
const setYears = (year:any) => {
years.value = year;
};
const setMounths = (month: any) => {
months.value = month;
}
const setNowDays = () => {
years.value = ''
months.value = ''
}
const computDate = computed(() => {
let dates = '今日'
if (years.value) {
dates = years.value + '年'
if (months.value) {
dates += months.value + '月'
}
} else {
dates = '今日'
}
return dates
})
const nowTitle = computed(() => {
let titles = '当日'
if (years.value) {
titles = '当年'
if(months.value) {
titles = '当月'
}
}else{
titles = '当日'
}
return titles
})
return { years, months,nowDays, setYears, setMounths,setNowDays,computDate,nowTitle };
});

20
src/utils/common.ts Normal file
View File

@ -0,0 +1,20 @@
/*
* @Author: 张宁 18339727226@163.com
* @Date: 2024-05-27 09:47:24
* @LastEditors: 张宁 18339727226@163.com
* @LastEditTime: 2024-05-27 09:48:03
* @FilePath: \welcome-system-screen\src\utils\common.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export function getCurrentDate() {
const today = new Date();
const year = today.getFullYear();
let month:any = today.getMonth() + 1; // 月份从0开始，所以需加1
let day:any = today.getDate();
// 将月份和日期转换为两位数
month = month < 10 ? `0${month}` : month;
day = day < 10 ? `0${day}` : day;
return `${year}-${month}-${day}`;
}

2
src/utils/index.ts
View File

@ -1,2 +1,2 @@
export * from "./storage";
export * from "./common"

11
src/views/header.vue
View File

@ -1,5 +1,8 @@
<script setup lang="ts">
import { testGet } from "@/api";
import { useTimeStore } from "@/stores/index";
const timeStore = useTimeStore();
const test = () => {
testGet().then((res: any) => {
console.log("test", res);
@ -27,21 +30,23 @@ const monthOptions = ref([
// 获取选择的年
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 clearSelect = () => {
const selectNowdays = () => {
if (selectYear.value) {
selectYear.value.clearOption()
}
if (selectMonth.value) {
selectMonth.value.clearOption()
}
timeStore.setNowDays()
}
</script>
@ -66,7 +71,7 @@ const clearSelect = () => {
<div class="change-year">
<Dropdown :options="monthOptions" title="切换月份" @getOption="getMonth" ref="selectMonth"></Dropdown>
</div>
<div class="change-year" @click="clearSelect">选择今日</div>
<div class="change-year" @click="selectNowdays">选择今日</div>
</div>
</div>
</template>

14
src/views/index/center-top.vue
View File

@ -1,5 +1,7 @@
<script setup lang="ts">
import { useTimeStore } from "@/stores/index";
const timeStore = useTimeStore();
const { computDate } = storeToRefs(timeStore)
import { ElMessage } from "element-plus";
@ -12,17 +14,17 @@ import { ElMessage } from "element-plus";
<img src="@/assets/img/zheke/center_top1.png">
</div>
<div class="top-item">
<div class="top-item-title">今日迎新人数</div>
<div class="top-item-title">{{ computDate }}迎新人数</div>
<div class="top-item-content">{{ 12404 }}</div>
</div>
</div>
<div class="top-item">
<div class="top-item-title">今日预报到人数</div>
<div class="top-item-title">{{ computDate }}预报到人数</div>
<div class="top-item-content">{{ 12404 }}</div>
</div>
<div class="top-item">
<div class="top-item-title">今日预报到报到率</div>
<div class="top-item-title">{{ computDate }}预报到报到率</div>
<div class="top-item-content"> 95% </div>
</div>
<div class="top-item-img">
@ -61,7 +63,7 @@ import { ElMessage } from "element-plus";
text-shadow: 1px 2px 0px rgba(25, 27, 28, 0.22);
font-style: italic;
// background: #3652AB;
background: linear-gradient(180deg,rgba(0,0,0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%),linear-gradient(90deg,rgba(0,0,0, 0.14) 0%, rgba(76, 127, 220, 0.64) 30%,rgba(0,0,0, 0.14) 100%);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0%, rgba(76, 127, 220, 0.64) 30%, rgba(0, 0, 0, 0.14) 100%);
}
@ -70,7 +72,7 @@ import { ElMessage } from "element-plus";
font-weight: bold;
font-size: 26px;
color: #FFFFFF;
background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(255, 255, 255, 0.94) 50%,rgba(182, 198, 229, 0.64) 100%);
background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(255, 255, 255, 0.94) 50%, rgba(182, 198, 229, 0.64) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

34
src/views/index/index.vue
View File

@ -10,10 +10,14 @@ import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";
import RightTopTwo from "./right-top-two.vue";
import RightBottomTwo from "./right-bottom-two.vue";
import { useTimeStore } from "@/stores/index";
import { storeToRefs } from "pinia";
const timeStore = useTimeStore();
const showRight = ref(true)
const changeRight = () => {
showRight.value = !showRight.value
};
const { nowTitle } = storeToRefs(timeStore);
</script>
<template>
@ -25,7 +29,7 @@ const changeRight = () => {
<zkItem class="contetn_left-center contetn_lr-item" title="">
<LeftCenter />
</zkItem>
<zkItem class="contetn_left-bottom contetn_lb-item" title="" >
<zkItem class="contetn_left-bottom contetn_lb-item" title="">
<LeftBottom />
</zkItem>
</div>
@ -38,7 +42,7 @@ const changeRight = () => {
<zkItem class="contetn_left-bottom contetn_rt-one" title="缴费人数">
<RightTop />
</zkItem>
<zkItem class="contetn_left-bottom contetn_rc-item" title="当日缴费人数" style="padding: 0 10px 16px 10px">
<zkItem class="contetn_left-bottom contetn_rc-item" :title="nowTitle + '缴费人数'" style="padding: 0 10px 16px 10px">
<RightCenter />
</zkItem>
<zkItem class="contetn_left-bottom contetn_rb-item" title="报道人数区域排名 ">
@ -79,8 +83,9 @@ const changeRight = () => {
border-radius: 16px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to bottom, rgba(0,0,51,0.1), rgba(0,0,0,0.1)), linear-gradient(0deg, rgba(43, 74, 158, 0.1), rgba(89, 153, 252,0.1));
.change-btn{
background-image: linear-gradient(to bottom, rgba(0, 0, 51, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(0deg, rgba(43, 74, 158, 0.1), rgba(89, 153, 252, 0.1));
.change-btn {
position: absolute;
left: -60px;
top: calc(50% - 200px);
@ -99,11 +104,13 @@ const changeRight = () => {
padding-top: 50px;
// justify-content: space-around;
align-items: center;
.contetn_center_top {
width: 100%;
padding: 0 36px;
margin-bottom: 30px;
}
.contetn_center_map {
width: 100%;
height: 700px;
@ -113,26 +120,33 @@ const changeRight = () => {
}
}
.contetn_lt-item{
.contetn_lt-item {
height: 300px;
}
.contetn_lr-item {
height: 310px;
}
.contetn_lb-item{
.contetn_lb-item {
height: 310px;
margin-top: 130px;
}
.contetn_rt-one{
.contetn_rt-one {
height: 240px;
}
.contetn_rt_two{
.contetn_rt_two {
height: 640px;
}
.contetn_rc-item{
.contetn_rc-item {
height: 380px;
}
.contetn_rb-item{
.contetn_rb-item {
height: 310px;
}
</style>

6
src/views/index/right-center.vue
View File

@ -1,5 +1,9 @@
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { useTimeStore } from "@/stores/index";
import { storeToRefs } from "pinia";
const timeStore = useTimeStore()
const { nowTitle } = storeToRefs(timeStore)
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] },
@ -165,7 +169,7 @@ onMounted(() => {
<template>
<div class="tabs">
<div class="no-tab">
<p>当日缴费总人数</p>
<p>{{ nowTitle }}缴费总人数</p>
<p> 12,000 </p>
</div>
<div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">