feat(admin): 增加数据统计日期选择功能

- 在今日数据统计部分添加日期选择器，可选择特定日期的数据
- 在数据统计部分添加日期范围选择器，可选择特定时间段的数据
- 优化数据统计图表，增加新增设备数的折线图
- 调整数据统计图表的图例顺序和颜色

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
     <el-main>
-        <div class="mb-4 flex items-center gap-2">
+        <div class="mb-4 flex items-center gap-2 flex-wrap">
             <el-select v-model="selectedChannel" placeholder="请选择渠道" @change="handleChannelChange" v-if="isAdmin">
                 <el-option label="全部渠道" value="" />
                 <el-option v-for="item in channelOptions" :key="item" :label="item" :value="item" />
@@ -13,26 +13,38 @@
             <template #header>
                 <div class="flex items-center justify-between">
                     <span>今日数据统计</span>
-                    <el-tag type="info">{{ todayData.date }}</el-tag>
+                    <div class="flex items-center gap-2">
+                        <!-- 今日数据日期选择器 -->
+                        <el-date-picker
+                            v-model="selectedDate"
+                            type="date"
+                            placeholder="选择日期"
+                            format="YYYY-MM-DD"
+                            value-format="YYYY-MM-DD"
+                            :clearable="true"
+                            @change="handleDateChange"
+                            size="small"
+                        />
+                    </div>
                 </div>
             </template>
             <el-row :gutter="20">
                 <el-col :span="8">
                     <div class="text-center">
-                        <div class="text-gray-500 mb-2">ocr记录数</div>
-                        <div class="text-2xl font-bold text-green-500">{{ todayData.total }}</div>
+                        <div class="text-gray-500 mb-2">新增设备数</div>
+                        <div class="text-2xl font-bold text-blue-500">{{ todayData.deviceCount }}</div>
                     </div>
                 </el-col>
                 <el-col :span="8">
                     <div class="text-center">
-                        <div class="text-gray-500 mb-2">已扫描数</div>
-                        <div class="text-2xl font-bold text-orange-500">{{ todayData.scanned }}</div>
+                        <div class="text-gray-500 mb-2">ocr记录数</div>
+                        <div class="text-2xl font-bold text-green-500">{{ todayData.total }}</div>
                     </div>
                 </el-col>
                 <el-col :span="8">
                     <div class="text-center">
-                        <div class="text-gray-500 mb-2">新增设备数</div>
-                        <div class="text-2xl font-bold text-blue-500">{{ todayData.deviceCount }}</div>
+                        <div class="text-gray-500 mb-2">已扫描数</div>
+                        <div class="text-2xl font-bold text-orange-500">{{ todayData.scanned }}</div>
                     </div>
                 </el-col>
             </el-row>
@@ -42,7 +54,22 @@
         <el-card>
             <template #header>
                 <div class="flex items-center justify-between">
-                    <span>近7日数据统计</span>
+                    <span>数据统计</span>
+                    <div class="flex items-center gap-2">
+                        <!-- 图表数据日期范围选择器 -->
+                        <el-date-picker
+                            v-model="dateRange"
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            format="YYYY-MM-DD"
+                            value-format="YYYY-MM-DD"
+                            :clearable="true"
+                            @change="handleDateRangeChange"
+                            size="small"
+                        />
+                    </div>
                 </div>
             </template>
             <div ref="chartRef" style="width: 100%; height: 400px"></div>
@@ -62,6 +89,8 @@ let chart = null
 const selectedChannel = ref('')
 const channelOptions = ref([])
 const loading = ref(false)
+const selectedDate = ref(null)
+const dateRange = ref(null)
 const todayData = ref({
     date: '',
     total: 0,
@@ -85,9 +114,16 @@ onMounted(() => {
 // 获取今日数据
 async function getTodayData(channelName) {
     try {
-        const response = await http.post('/ocrDevice/today', {
+        const params = {
             channel: channelName
-        })
+        }
+
+        // 如果选择了日期，则添加到参数中
+        if (selectedDate.value) {
+            params.date = selectedDate.value
+        }
+
+        const response = await http.post('/ocrDevice/today', params)
         todayData.value = response
     } catch (error) {
         console.error('获取今日数据失败:', error)
@@ -105,6 +141,16 @@ async function getChannelList() {
     }
 }
 
+// 处理日期变化
+function handleDateChange() {
+    refreshData()
+}
+
+// 处理日期范围变化
+function handleDateRangeChange() {
+    refreshData()
+}
+
 // 刷新数据
 async function refreshData() {
     await handleChannelChange(selectedChannel.value)
@@ -121,10 +167,19 @@ async function handleChannelChange(channelName) {
         // 获取今日数据
         await getTodayData(channelName)
 
-        // 获取渠道数据
-        const response = await http.post('/ocrDevice/getStatistics', {
+        // 准备getStatistics接口的参数
+        const params = {
             channel: channelName
-        })
+        }
+
+        // 如果选择了日期范围，则添加到参数中
+        if (dateRange.value && dateRange.value.length === 2) {
+            params.startDate = dateRange.value[0]
+            params.endDate = dateRange.value[1]
+        }
+
+        // 获取渠道数据
+        const response = await http.post('/ocrDevice/getStatistics', params)
 
         // 准备图表数据
         const option = {
@@ -132,7 +187,7 @@ async function handleChannelChange(channelName) {
                 trigger: 'axis'
             },
             legend: {
-                data: ['ocr记录数', '已扫描数', '新增设备数']
+                data: ['新增设备数', 'ocr记录数', '已扫描数']
             },
             xAxis: {
                 type: 'category',
@@ -143,39 +198,39 @@ async function handleChannelChange(channelName) {
             },
             series: [
                 {
-                    name: 'ocr记录数',
+                    name: '新增设备数',
                     type: 'line',
-                    data: response.total,
+                    data: response.deviceCount,
                     label: {
                         show: true,
                         position: 'top'
                     },
                     itemStyle: {
-                        color: '#67C23A' // 绿色
+                        color: '#409EFF' // 蓝色
                     }
                 },
                 {
-                    name: '已扫描数',
+                    name: 'ocr记录数',
                     type: 'line',
-                    data: response.scanned,
+                    data: response.total,
                     label: {
                         show: true,
                         position: 'top'
                     },
                     itemStyle: {
-                        color: '#E6A23C' // 橘色
+                        color: '#67C23A' // 绿色
                     }
                 },
                 {
-                    name: '新增设备数',
+                    name: '已扫描数',
                     type: 'line',
-                    data: response.deviceCount,
+                    data: response.scanned,
                     label: {
                         show: true,
                         position: 'top'
                     },
                     itemStyle: {
-                        color: '#409EFF' // 蓝色
+                        color: '#E6A23C' // 橘色
                     }
                 }
             ]
@@ -190,3 +245,9 @@ async function handleChannelChange(channelName) {
     }
 }
 </script>
+
+<style scoped>
+.el-date-picker {
+    width: auto !important;
+}
+</style>