修改 时间组件问题

src/components/form/datePicker/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-select v-model="interval" style="width: 90px; margin-right: 10px" @change="timeChange">
+    <el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
         <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
     <el-date-picker
@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 
 const interval = ref(3)
 const timeFlag = ref(1)
@@ -31,13 +31,13 @@ const disabledPicker = ref(true)
 const timeValue = ref()
 const backDisabled = ref(false)
 const preDisabled = ref(false)
-const timeOptions = [
+const timeOptions: any = ref([
     { label: '年份', value: 1 },
     { label: '季度', value: 2 },
     { label: '月份', value: 3 },
     { label: '周', value: 4 },
     { label: '自定义', value: 5 }
-]
+])
 const shortcuts = [
     {
         text: '最近一周',
@@ -86,8 +86,15 @@ const timeChange = (e: number) => {
         disabledPicker.value = true
         timeValue.value = [setTime(3), setTime()]
     } else if (e == 4) {
+        let year = parseInt(setTime().substring(0, 4))
+        let month = parseInt(setTime().substring(5, 7))
+        let date = parseInt(setTime().substring(8, 10))
+
+        var start = new Date(year, month - 1, date)
+        var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay() - 1 // 如果为周日，则置为7天
+
         disabledPicker.value = true
-        timeValue.value = [setTime(0, 7), setTime()]
+        timeValue.value = [setTime(0, dayOfWeek), setTime(0, -6 + dayOfWeek)]
     } else if (e == 5) {
         disabledPicker.value = false
         backDisabled.value = true
@@ -133,6 +140,7 @@ const preClick = () => {
         //按周
     } else if (interval.value == 4) {
         //根据开始时间推
+
         let start = new Date(year, month - 1, date)
         start.setDate(start.getDate() - 7)
         startTime = formatTime(start)
@@ -385,8 +393,9 @@ const next = () => {
 
 const setTime = (flag = 0, e = 0) => {
     let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')
+
     let data = ''
-    if (dd < 4) {
+    if (dd < 4 || dd == 0) {
         data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
     } else {
         data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
@@ -447,7 +456,47 @@ const NowgetEndTime = () => {
     let endTime = year + sep + month + sep + date
     return endTime
 }
-defineExpose({ timeValue, interval, timeFlag })
+const setTimeOptions = (list: any) => {
+    timeOptions.value = list
+}
+const setInterval = (value: any) => {
+    interval.value = value
+    timeChange(value)
+}
+
+// 获取时间范围的同比
+function getYearOnYear(startDate: string, endDate: string): [string, string] {
+    const startYearAgo = new Date(startDate)
+    startYearAgo.setFullYear(startYearAgo.getFullYear() - 1)
+
+    const endYearAgo = new Date(endDate)
+    endYearAgo.setFullYear(endYearAgo.getFullYear() - 1)
+
+    return [formatDate(startYearAgo), formatDate(endYearAgo)]
+}
+
+// 获取时间范围的环比
+function getMonthOnMonth(startDate: string, endDate: string): [string, string] {
+    const start = new Date(startDate)
+    const end = new Date(endDate)
+
+    const diffTime = end.getTime() - start.getTime() + 60 * 60 * 24 * 1000 // 计算时间差
+    const startMonthAgo = new Date(start)
+    startMonthAgo.setTime(startMonthAgo.getTime() - diffTime) // 将开始时间向前推移相同的时间差
+
+    const endMonthAgo = new Date(start)
+    endMonthAgo.setDate(start.getDate() - 1) // 结束时间是开始时间的前一天
+
+    return [formatDate(startMonthAgo), formatDate(endMonthAgo)]
+}
+// 格式化日期为 YYYY-MM-DD
+function formatDate(date: Date): string {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+}
+defineExpose({ timeValue, interval, timeFlag, setTimeOptions, setInterval, getYearOnYear, getMonthOnMonth })
 </script>
 
 <style scoped>