全局时间调整

package-lock.json

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

package.json

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

src/stores/index.ts

@@ -1 +1,10 @@
-export * from "./setting/setting"
+/*
+ * @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"

src/stores/time/time.ts

@@ -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 };
+});

src/utils/common.ts

@@ -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}`;
+  }

src/utils/index.ts

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

src/views/header.vue

@@ -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>

src/views/index/center-top.vue

@@ -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;
     }

src/views/index/index.vue

@@ -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));
+  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{
+
+  .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>

src/views/index/right-center.vue

@@ -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)">