feat:新增仪表盘页面接口

2025-09-25 10:30:07 +08:00
1 parent d02f49b0d7
commit 70f5b8496b
@@ -2,14 +2,14 @@
 # @Author: 13895237362 2205451508@qq.com
 # @Date: 2025-07-31 14:30:20
 # @LastEditors: 13895237362 2205451508@qq.com
- # @LastEditTime: 2025-09-24 10:06:18
+ # @LastEditTime: 2025-09-24 16:46:13
 # @FilePath: /frontend/.env.development
 # @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 ### 
 # 开发环境接口地址
 # VITE_API_BASE_URL = 'http://localhost:18888'
 # VITE_API_BASE_URL = 'http://111.113.215.88:18888'
-VITE_API_BASE_URL = 'http://lm.cedar-v.com:18888'
+VITE_API_BASE_URL = 'http://lm.cedar-v.com:18080'


 # # 开发环境打包名称
@@ -2,35 +2,56 @@
 * @Author: 13895237362 2205451508@qq.com
 * @Date: 2025-09-23 17:21:03
 * @LastEditors: 13895237362 2205451508@qq.com
- * @LastEditTime: 2025-09-23 17:30:24
+ * @LastEditTime: 2025-09-24 16:18:40
 * @FilePath: \frontend\src\api\dashboard.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
 import Axios from './https/index'

 // 最近授权数据类型定义
-export interface RecentAuthorizationItem {
-  id: number
-  customer: string
-  description: string
-  status: number // 1代表有效，0代表失效
-  expiry: string
-  createTime: string
-}

 // API响应类型
+export interface RecentAuthorizationItem {
+  id: number
+  customer_name: string
+  description: string
+  status: number // 1代表有效，0代表失效
+  end_date: string
+  created_at: string
+}
+
+// 请求格式
 export interface ApiResponse<T> {
  code: string
  message: string
  data: T
 }

-// 获取最近授权列表 - 暂时使用授权码接口
+// 获取最近授权列表 
 export const getRecentAuthorizations = (): Promise<ApiResponse<RecentAuthorizationItem[]>> => {
-  return Axios.get('/api/v1/authorization-codes')
+  return Axios.get('api/v1/dashboard/recent-authorizations')
 }

-// 获取仪表盘统计数据（如果需要的话）
+// 授权趋势数据类型定义
+export interface TrendDataItem {
+  date: string
+  total_authorizations: number
+}
+
+export interface AuthorizationTrendResponse {
+  'trend_data': TrendDataItem[]
+}
+
+// 获取授权趋势数据
+export const getAuthorizationTrend = (params: {
+  type:string,
+  start_date: string
+  end_date: string
+}): Promise<ApiResponse<AuthorizationTrendResponse>> => {
+  return Axios.get('/api/v1/dashboard/authorization-trend', { params })
+}
+
+// 获取仪表盘统计数据
 export const getDashboardStats = (): Promise<ApiResponse<any>> => {
  return Axios.get('/api/v1/dashboard/stats')
 }
@@ -76,10 +76,11 @@

    <!-- 图表容器 -->
    <div class="chart-container">
-      <v-chart 
-        class="trend-chart" 
-        :option="chartOption" 
+      <v-chart
+        class="trend-chart"
+        :option="chartOption"
        :autoresize="true"
+        :loading="chartLoading"
        ref="chartRef"
      />
    </div>
@@ -93,6 +94,8 @@ import { use } from 'echarts/core'
 import { useDevice } from '@/utils/useDevice'
 import MobileDateRange from '@/components/common/MobileDateRange.vue'
 import { Calendar } from '@element-plus/icons-vue'
+import { getAuthorizationTrend, type TrendDataItem } from '@/api/dashboard'
+import { ElMessage } from 'element-plus'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import {
@@ -128,14 +131,9 @@ const dateRange = ref<[string, string]>(['2024-05-13', '2024-05-17']) // 初始
 const chartRef = ref()
 const datePickerRef = ref()

-// 模拟授权趋势数据
-const trendData = ref([
-  { date: '2024-05-13', value: 8 },
-  { date: '2024-05-14', value: 12 },
-  { date: '2024-05-15', value: 15 },
-  { date: '2024-05-16', value: 10 },
-  { date: '2024-05-17', value: 18 }
-])
+// 授权趋势数据
+const trendData = ref<{ date: string; value: number }[]>([])
+const chartLoading = ref(false)

 // 图表配置
 const chartOption = computed(() => {
@@ -327,35 +325,49 @@ const formatDateRange = (range: [string, string]) => {
  return `${formatDate(startDate)} ${t('chart.licenseTrend.datePicker.rangeSeparator')} ${formatDate(endDate)}`
 }

+// 获取授权趋势数据
+const fetchAuthorizationTrend = async (startDate: string, endDate: string) => {
+  console.log('开始请求授权趋势数据:', { startDate, endDate })
+  try {
+    chartLoading.value = true
+    const response = await getAuthorizationTrend({
+      type: "custom",
+      start_date:startDate,
+      end_date:endDate
+    })
+
+    console.log('授权趋势API响应:', response)
+
+    // 将API返回的trend-data转换为图表需要的格式
+    const apiTrendData = response.data.trend_data as TrendDataItem[]
+    console.log('趋势数据:', apiTrendData)
+
+    trendData.value = apiTrendData.map(item => ({
+      date: item.date,
+      value: item.total_authorizations
+    }))
+
+    console.log('转换后的图表数据:', trendData.value)
+  } catch (error: any) {
+    console.error('获取授权趋势数据失败:', error)
+    ElMessage.error(error?.backendMessage || '获取授权趋势数据失败')
+  } finally {
+    chartLoading.value = false
+  }
+}
+
 // 更新图表数据
 const updateChartData = () => {
-  // 这里可以根据选择的日期范围调用API获取实际数据
-  // 现在使用模拟数据
-  const mockData = generateMockData(dateRange.value[0], dateRange.value[1])
-  trendData.value = mockData
+  console.log('updateChartData 被调用，日期范围:', dateRange.value)
+  fetchAuthorizationTrend(dateRange.value[0], dateRange.value[1])
 }

-// 生成模拟数据
-const generateMockData = (startDate: string, endDate: string) => {
-  const start = new Date(startDate)
-  const end = new Date(endDate)
-  const data = []
-  
-  const currentDate = new Date(start)
-  while (currentDate <= end) {
-    data.push({
-      date: currentDate.toISOString().split('T')[0],
-      value: Math.floor(Math.random() * 15) + 5 // 5-20之间的随机数
-    })
-    currentDate.setDate(currentDate.getDate() + 1)
-  }
-  
-  return data
-}

 onMounted(() => {
+  console.log('LicenseTrendChart 组件已挂载，开始初始化')
  // 初始化时直接调用快捷选择，设置为本周
  handleQuickSelect('week')
+  console.log('已调用 handleQuickSelect(week)')
 })
 </script>

@@ -1,104 +0,0 @@
-<template>
-  <div class="device-test">
-    <h3>设备检测测试</h3>
-    <div class="info-grid">
-      <div class="info-item">
-        <label>屏幕宽度:</label>
-        <span>{{ screenWidth }}px</span>
-      </div>
-      <div class="info-item">
-        <label>屏幕高度:</label>
-        <span>{{ screenHeight }}px</span>
-      </div>
-      <div class="info-item">
-        <label>设备类型:</label>
-        <span>{{ deviceType }}</span>
-      </div>
-      <div class="info-item">
-        <label>屏幕方向:</label>
-        <span>{{ orientation }}</span>
-      </div>
-      <div class="info-item">
-        <label>是否触摸设备:</label>
-        <span>{{ isTouchDevice ? '是' : '否' }}</span>
-      </div>
-      <div class="info-item">
-        <label>更新次数:</label>
-        <span>{{ updateCount }}</span>
-      </div>
-    </div>
-    
-    <div class="status">
-      <p>调整浏览器窗口大小来测试防抖功能</p>
-      <p>防抖延迟: 150ms（停止调整窗口后150ms才更新）</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useDevice } from '@/utils/useDevice'
-
-const updateCount = ref(0)
-
-const {
-  screenWidth,
-  screenHeight,
-  deviceType,
-  orientation,
-  isTouchDevice
-} = useDevice()
-
-// 监听屏幕宽度变化，统计更新次数
-watch([screenWidth, screenHeight], () => {
-  updateCount.value++
-}, { immediate: true })
-</script>
-
-<style scoped>
-.device-test {
-  padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  background: white;
-  margin: 20px;
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  margin: 16px 0;
-}
-
-.info-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: #f5f5f5;
-  border-radius: 4px;
-}
-
-.info-item label {
-  font-weight: 600;
-  color: #333;
-}
-
-.info-item span {
-  color: #666;
-  font-family: monospace;
-}
-
-.status {
-  margin-top: 16px;
-  padding: 12px;
-  background: #e3f2fd;
-  border-radius: 4px;
-}
-
-.status p {
-  margin: 4px 0;
-  color: #1976d2;
-  font-size: 14px;
-}
-</style>
@@ -2,7 +2,7 @@
 * @Author: 13895237362 2205451508@qq.com
 * @Date: 2025-08-01 09:32:42
 * @LastEditors: 13895237362 2205451508@qq.com
- * @LastEditTime: 2025-09-23 14:37:21
+ * @LastEditTime: 2025-09-24 15:22:03
 * @FilePath: /frontend/src/views/Dashboard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -60,7 +60,7 @@
                  {{ $index + 1 }}
                </template>
              </el-table-column>
-              <el-table-column prop="customer" :label="t('dashboard.recentLicenses.columns.customerName')" min-width="200" />
+              <el-table-column prop="customer_name" :label="t('dashboard.recentLicenses.columns.customerName')" min-width="200" />
              <el-table-column prop="description" :label="t('dashboard.recentLicenses.columns.description')" min-width="150" />
              <el-table-column :label="t('dashboard.recentLicenses.columns.status')" width="120" align="center">
                <template #default="{ row }">
@@ -72,8 +72,8 @@
                  </span>
                </template>
              </el-table-column>
-              <el-table-column prop="expiry" :label="t('dashboard.recentLicenses.columns.expiryTime')" width="301" />
-              <el-table-column prop="createTime" :label="t('dashboard.recentLicenses.columns.createTime')" width="301" />
+              <el-table-column prop="end_date" :label="t('dashboard.recentLicenses.columns.expiryTime')" width="301" />
+              <el-table-column prop="created_at" :label="t('dashboard.recentLicenses.columns.createTime')" width="301" />
            </el-table>
          </div>
        </div>
@@ -165,29 +165,11 @@ const fetchRecentAuthorizations = async () => {
  try {
    loading.value = true
    const response = await getRecentAuthorizations()
-    recentData.value = response.data
+    console.log('最近授权数据:', response.data)
+    recentData.value = response.data.list;
  } catch (error: any) {
    console.error('获取最近授权数据失败:', error)
    ElMessage.error(error?.backendMessage || '获取最近授权数据失败')
-    // 如果API调用失败，使用默认数据
-    recentData.value = [
-      {
-        id: 1,
-        customer: '石狮市潢安有限公司',
-        description: '落魄山一哥',
-        status: 1,
-        expiry: '2023-05-26 12:12:00',
-        createTime: '2023-05-26 12:12:00'
-      },
-      {
-        id: 2,
-        customer: '石狮市潢安有限公司',
-        description: '落魄山一哥',
-        status: 0,
-        expiry: '2023-05-26 12:12:00',
-        createTime: '2023-05-26 12:12:00'
-      }
-    ]
  } finally {
    loading.value = false
  }
@@ -195,6 +177,7 @@ const fetchRecentAuthorizations = async () => {

 // 组件挂载时获取数据
 onMounted(() => {
+  console.log('Dashboard 组件已挂载')
  fetchRecentAuthorizations()
 })
 </script>
@@ -84,6 +84,11 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
      hmr: {
        overlay: true
      },
+      // WSL2热更新修复
+      watch: {
+        usePolling: true,
+        interval: 1000
+      },
    },

    // 依赖优化配置