From 89c23cae2cfd9d4eb9ebefcc93d018191f1e9911 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E6=B3=BD=E5=86=9B?=
 <5654792+tcubic21@user.noreply.gitee.com>
Date: Thu, 20 Mar 2025 18:06:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  4 +-
 .../pages/article_list/article_list.vue       |  1 -
 src/pages/overview/_components/chart.vue      | 15 ++-
 src/pages/overview/_components/pie-chart.vue  | 60 ++++++------
 src/pages/overview/overview.vue               | 92 +++++++++++++++----
 5 files changed, 116 insertions(+), 56 deletions(-)

diff --git a/.env.development b/.env.development
index 882e7b5..a71af95 100644
--- a/.env.development
+++ b/.env.development
@@ -2,6 +2,6 @@
 VITE_MODE = dev
 
 # 请求域名
-VITE_APP_BASE_URL='http://192.168.1.249:8084/ai-agent-server'
-# VITE_APP_BASE_URL='https://info.xglpa.com/ai-agent-server'
+# VITE_APP_BASE_URL='http://192.168.1.249:8084/ai-agent-server'
+VITE_APP_BASE_URL='https://info.xglpa.com/ai-agent-server'
 
diff --git a/src/packages/pages/article_list/article_list.vue b/src/packages/pages/article_list/article_list.vue
index 4c75a45..5091c94 100644
--- a/src/packages/pages/article_list/article_list.vue
+++ b/src/packages/pages/article_list/article_list.vue
@@ -30,7 +30,6 @@ import NewsList from './component/news-list.vue'
 import { getArticleCate } from '@/api/news'
 import Tabs from '@/packages/components/tabs/tabs.vue'
 import Tab from '@/packages/components/tab/tab.vue'
-
 const tabList = ref<any>([])
 const current = ref<number>(0)
 
diff --git a/src/pages/overview/_components/chart.vue b/src/pages/overview/_components/chart.vue
index 7d6f41a..c6cc80e 100644
--- a/src/pages/overview/_components/chart.vue
+++ b/src/pages/overview/_components/chart.vue
@@ -67,7 +67,7 @@ const options = {
     xAxis: {
         type: 'value',
         axisLabel: {
-            formatter: '{value} 次'
+            formatter: '{value} '
         }
     },
     yAxis: {
@@ -86,7 +86,6 @@ const options = {
         boundaryGap: [0.1, 0.1] // 上下留白比例
     },
     series: [{
-        silent: true, // 禁用系列交互
         type: 'bar',
         barWidth: '60%',
         itemStyle: {
@@ -131,7 +130,7 @@ const handleResize = () => {
 
 onMounted(() => {
     initChart()
-    chartRef.value.style.touchAction = 'none'
+    // chartRef.value.style.touchAction = 'none'
     window.addEventListener('resize', updateSize)
 })
 
@@ -152,20 +151,20 @@ const updateSize = () => {
 
 // 监听配置变化
 watch(() => props.data, (newVal) => {
-    chartInstance.value?.setOption(newVal)
+    options.dataset.source = newVal
+    chartInstance.value?.setOption(options)
 }, { deep: true })
 </script>
 
 <style scoped>
 .chart-wrapper {
-    touch-action: pan-y;
-    /* 允许垂直滚动 */
+    touch-action: none;
+    /* ✅ 完全禁用父级触摸 */
     pointer-events: none;
-    /* 穿透点击事件 */
 }
 
 .chart-container {
-    pointer-events: auto;
+    /* pointer-events: auto; */
     /* 恢复图表区域事件 */
     /* min-height: 300px; */
 }
diff --git a/src/pages/overview/_components/pie-chart.vue b/src/pages/overview/_components/pie-chart.vue
index 15ecd8f..8f0b176 100644
--- a/src/pages/overview/_components/pie-chart.vue
+++ b/src/pages/overview/_components/pie-chart.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="chartEl" :style="{ width, height }"></div>
+    <div ref="chartEl" :style="{ width, height }" class="chart-container"></div>
 </template>
 
 <script setup>
@@ -22,10 +22,11 @@ const props = defineProps({
     },
     height: {
         type: String,
-        default: '400px'
+        default: '600px'
     }
 })
 
+
 const chartEl = ref(null)
 let chartInstance = null
 
@@ -43,50 +44,47 @@ const initChart = () => {
         title: {
             text: props.title,
             left: 'center',
-            top: '0%',
+            top: '5%',
         },
         tooltip: {
             trigger: 'item'
         },
         legend: {
-            top: '7%',
-            left: 'center'
+            top: '15%',
+            left: 'center',
+            selectedMode: true,
         },
+        selectedMode: 'single',
         series: [
             {
-                name: 'Access From',
+                name: '部门使用次数',
                 type: 'pie',
                 radius: ['40%', '70%'],
                 avoidLabelOverlap: false,
                 top: '20%',
                 itemStyle: {
-                    borderRadius: 10,
-                    borderColor: '#fff',
-                    borderWidth: 2
+                    borderRadius: 10
+                },
+                label: {
+                    show: true,
+                    position: 'center'
                 },
-                // label: {
-                //     show: false,
-                //     position: 'center'
-                // },
                 emphasis: {
-                    scale: true,         // 启用放大效果
-                    scaleSize: 8,        // 放大尺寸像素值
-                    itemStyle: {
-                        shadowBlur: 15,  // 增加阴影效果
-                        shadowColor: 'rgba(0, 0, 0, 0.3)'
-                    },
                     label: {
                         show: true,
-                        fontSize: 20,    // 减小强调文字尺寸
-                        fontWeight: 'bold',
-                        color: '#333',
-                        formatter: '{b}\n{d}%'  // 两行显示
+                        fontSize: 40,
+                        fontWeight: 'bold'
                     }
                 },
-                selectedOffset: 10,      // 选中项偏移量
                 labelLine: {
-                    show: false
+                    show: true
                 },
+                hoverOffset: 15, // 增加悬停偏移量
+                still: false, // 允许悬浮动画
+                silent: true, // 启用交互
+                // 添加响应阈值配置
+                hoverAnimationThreshold: 1, // 无论多小的区块都可交互
+                selectedOffset: 10,      // 选中项偏移量
                 data: props.data
             }
         ]
@@ -117,4 +115,14 @@ watch(() => props.data, () => {
         })
     }
 }, { deep: true })
-</script>
\ No newline at end of file
+</script>
+
+
+<style scoped>
+.chart-container {
+    touch-action: manipulation;
+    /* 优化移动端触控 */
+    -webkit-tap-highlight-color: transparent;
+    /* 移除点击高光 */
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/overview/overview.vue b/src/pages/overview/overview.vue
index 042ae76..ad83aef 100644
--- a/src/pages/overview/overview.vue
+++ b/src/pages/overview/overview.vue
@@ -6,15 +6,32 @@
     </page-meta>
     <page-status :status="status">
         <view class="ai-creation">
-            <view class="flex-1 min-h-0">
-                <scroll-view scroll-y class="h-full">
-                    <VerticalPieChart :data="chartData4" title="部门使用次数" />
-                    <VerticalBarChart :data="chartData" title="模板使用人数" />
-                    <VerticalBarChart :data="chartData2" title="模板使用次数" />
-                    <VerticalBarChart :data="chartData3" title="个人使用次数" />
-                </scroll-view>
+            <view class="flex-1">
+                <u-field @click="showCalendar = true" v-model="dateRange" :disabled="true" label="时间"
+                    placeholder="请选择时间范围" right-icon="arrow-down-fill">
+                </u-field>
+                <tabs :current="current" :swipeable="true" @change="handleChange" height="80" bar-width="60"
+                    :barStyle="{ bottom: '0' }">
+                    <tab name="模板">
+                        <view class="news-list pt-[20rpx]">
+                            <VerticalBarChart :data="chartData" title="模板使用人数" />
+                            <VerticalBarChart :data="chartData2" title="模板使用次数" />
+                        </view>
+                    </tab>
+                    <tab name="部门">
+                        <view class="news-list pt-[20rpx]">
+                            <VerticalPieChart :data="chartData4" title="部门使用次数" />
+                        </view>
+                    </tab>
+                    <tab name="个人">
+                        <view class="news-list pt-[20rpx]">
+                            <VerticalBarChart :data="chartData3" title="个人使用次数" />
+                        </view>
+                    </tab>
+                </tabs>
             </view>
         </view>
+        <u-calendar v-model="showCalendar" :mode="mode" @change="changeCalendar"></u-calendar>
     </page-status>
     <tabbar />
 
@@ -28,27 +45,55 @@ import VerticalBarChart from './_components/chart.vue'
 import VerticalPieChart from './_components/pie-chart.vue'
 import { PageStatusEnum } from '@/enums/appEnums'
 import { cloneDeep } from 'lodash-es'
+import Tabs from '@/packages/components/tabs/tabs.vue'
+import Tab from '@/packages/components/tab/tab.vue'
+import uCalendar from '@/uni_modules/vk-uview-ui/components/u-calendar/u-calendar.vue'
+import uField from '@/uni_modules/vk-uview-ui/components/u-field/u-field.vue'
+
+
+
+// 获取昨天往前7天的日期范围
+const getDateRange = () => {
+    const today = new Date()
+    const yesterday = new Date(today)
+    yesterday.setDate(today.getDate() - 1)
+    const startDate = new Date(yesterday)
+    startDate.setDate(startDate.getDate() - 6)
+    const start = formatDate(startDate)
+    const end = formatDate(yesterday)
+    return `${start} ~ ${end}`
+}
+
+
+// 格式化日期
+const formatDate = (date: Date) => {
+    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}`
+}
+
 
 
 const status = ref(PageStatusEnum.LOADING)
-
-
+const dateRange = ref(getDateRange())
+const showCalendar = ref(false)
+const mode = ref('range')
 const queryParams = ref({
-    startTime: "2025-03-18 00:00:00",
-    endTime: "2025-03-19 00:00:00",
+    startTime: getDateRange().split(' ~ ')[0] + ' 00:00:00',
+    endTime: getDateRange().split(' ~ ')[1] + ' 23:59:59',
 })
-const data = ref<any[]>([])
 
 
+const current = ref<number>(0)
+const handleChange = (index: number) => {
+    current.value = Number(index)
+}
+
 const chartData = ref([])
 const chartData2 = ref([])
 const chartData3 = ref([])
-
-const chartData4 = ref([
-    { name: '分类A', value: 335 },
-    { name: '分类B', value: 310 },
-    { name: '分类C', value: 234 }
-])
+const chartData4 = ref([])
 
 // 获取数据
 const getData = async () => {
@@ -61,6 +106,7 @@ const getData = async () => {
         chartData3.value = responseData.userUseTotalList.map((item: any) => ([item.name, item.total]))
         chartData4.value = responseData.companyTotalList.map((item: any) => ({ name: item.name, value: item.total }))
 
+
         status.value = PageStatusEnum.NORMAL
     } catch (error) {
         status.value = PageStatusEnum.ERROR
@@ -70,6 +116,14 @@ onLoad(() => {
     getData()
 })
 
+// 选择日期
+const changeCalendar = (e: Object) => {
+    console.log('range', e);
+    dateRange.value = e.startDate + ' ~ ' + e.endDate
+    queryParams.value.startTime = e.startDate + ' 00:00:00'
+    queryParams.value.endTime = e.endDate + ' 23:59:59'
+    getData()
+}
 
 
 
@@ -98,7 +152,7 @@ page {
 }
 
 .ai-creation {
-    height: 100%;
+    // height: 100%;
     display: flex;
     flex-direction: column;
     background: linear-gradient(44.7deg, #eaffff 0%, #faf6ff 50%, #f2f3ff 63%, #eaffff 100%);