From 8fa1f6e1fe126b9ebe352641bff0406b6a14a1d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=95=E9=98=B3=E5=BE=AE=E7=AC=911?= <12457268+sunset-smile-1@user.noreply.gitee.com> Date: Mon, 13 Jan 2025 21:18:04 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=88=86=E6=9E=90=E7=9A=84?= =?UTF-8?q?=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/log/index.ts | 15 ++ src/views/statistics/index.vue | 407 +++++++++++++++++---------------- 2 files changed, 221 insertions(+), 201 deletions(-) diff --git a/src/api/log/index.ts b/src/api/log/index.ts index 49cc230..a289a24 100644 --- a/src/api/log/index.ts +++ b/src/api/log/index.ts @@ -7,6 +7,8 @@ import { baseUrlHost } from '../baseUrlHost'; * * 登录api接口集合 * @method getlogList 获取日志列表 + * @method getaiabilityList 获取统计AI能力列表 + * @method getbaseUserList 获取统计基础信息列表 */ export function logApi() { @@ -18,5 +20,18 @@ export function logApi() { params, }); }, + getabilityList: (params:object) => { + return request({ + url: baseUrlHost + '/acLog/AiAbility', + method: 'get', + params, + }); + }, + getbaseUserList: () => { + return request({ + url: baseUrlHost + '/acLog/basicInformation', + method: 'get', + }); + }, }; } diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue index c475546..8dc0306 100644 --- a/src/views/statistics/index.vue +++ b/src/views/statistics/index.vue @@ -5,7 +5,7 @@ :xs="24" :sm="12" :md="12" - :lg="6" + :lg="8" :xl="6" v-for="(v, k) in state.homeOne" :key="k" @@ -15,7 +15,7 @@
{{ v.num1 }} - {{ v.num2 }}% +
{{ v.num3 }}
@@ -25,40 +25,29 @@
- - + +
-
-
- - -
-
-
- - - - -
-
快捷导航工具
-
-
-
-
-
- - {{ v.label }} -
{{ v.value }}
-
-
-
-
+ +
+
-
- - -
-
+
@@ -71,11 +60,16 @@ import * as echarts from 'echarts'; import { storeToRefs } from 'pinia'; import { useThemeConfig } from '/@/stores/themeConfig'; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; +import { logApi } from '/@/api/log'; + +const logapi = logApi(); // 定义变量内容 const homeLineRef = ref(); const homePieRef = ref(); const homeBarRef = ref(); +const dateRange = ref(''); +const defaultTime1 = new Date(2000, 1, 1, 0, 0, 0) // '12:00:00' const storesTagsViewRoutes = useTagsViewRoutes(); const storesThemeConfig = useThemeConfig(); const { themeConfig } = storeToRefs(storesThemeConfig); @@ -88,42 +82,42 @@ const state = reactive({ dispose: [null, '', undefined], } as any, homeOne: [ - { - num1: '125,12', - num2: '-12.32', - num3: '订单统计信息', - num4: 'fa fa-meetup', - color1: '#FF6462', - color2: '--next-color-primary-lighter', - color3: '--el-color-primary', - }, - { - num1: '653,33', - num2: '+42.32', - num3: '月度计划信息', - num4: 'iconfont icon-ditu', - color1: '#6690F9', - color2: '--next-color-success-lighter', - color3: '--el-color-success', - }, - { - num1: '125,65', - num2: '+17.32', - num3: '年度计划信息', - num4: 'iconfont icon-zaosheng', - color1: '#6690F9', - color2: '--next-color-warning-lighter', - color3: '--el-color-warning', - }, - { - num1: '520,43', - num2: '-10.01', - num3: '访问统计信息', - num4: 'fa fa-github-alt', - color1: '#FF6462', - color2: '--next-color-danger-lighter', - color3: '--el-color-danger', - }, + // { + // num1: '125,12', + // num2: '-12.32', + // num3: '订单统计信息', + // num4: 'fa fa-meetup', + // color1: '#FF6462', + // color2: '--next-color-primary-lighter', + // color3: '--el-color-primary', + // }, + // { + // num1: '653,33', + // num2: '+42.32', + // num3: '月度计划信息', + // num4: 'iconfont icon-ditu', + // color1: '#6690F9', + // color2: '--next-color-success-lighter', + // color3: '--el-color-success', + // }, + // { + // num1: '125,65', + // num2: '+17.32', + // num3: '年度计划信息', + // num4: 'iconfont icon-zaosheng', + // color1: '#6690F9', + // color2: '--next-color-warning-lighter', + // color3: '--el-color-warning', + // }, + // { + // num1: '520,43', + // num2: '-10.01', + // num3: '访问统计信息', + // num4: 'fa fa-github-alt', + // color1: '#FF6462', + // color2: '--next-color-danger-lighter', + // color3: '--el-color-danger', + // }, ], homeThree: [ { @@ -189,6 +183,47 @@ const state = reactive({ }, }); +const getList = async() =>{ + try{ + const res = await logapi.getbaseUserList(); + if (res?.success) { + const data = res.data; + // 动态构建 homeOne 数组 + state.homeOne = [ + { + num1: data.userTotalCount, + // num2: "12.32", // 示例百分比变化值 + num3: "总用户数", + color1: '#FF6462', + color2: '--next-color-primary-lighter', + color3: '--el-color-primary', + num4: "iconfont icon-zaosheng", // 示例图标类 + }, + { + num1: data.userTodayCount, + // num2: "42.32", // 示例百分比变化值 + num3: "今日用户数", + color1: '#6690F9', + color2: '--next-color-success-lighter', + color3: '--el-color-success', + num4: "iconfont icon-ditu", + }, + { + num1: data.homeviewCount, + // num2: "17.32", // 示例百分比变化值 + num3: "首页浏览数", + color1: '#6690F9', + color2: '--next-color-warning-lighter', + color3: '--el-color-warning', + num4: "iconfont icon-zaosheng", + }, + ]; + } + }catch(error){ + console.error(error) + } +}; + // 折线图 const initLineChart = () => { if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose(); @@ -356,136 +391,93 @@ const initPieChart = () => { state.global.homeChartTwo.setOption(option); state.myCharts.push(state.global.homeChartTwo); }; + +//获取柱状图的数据 +const fetchChartData = async (start?: string, end?: string) => { + try { + const params = start && end ? { start, end } : {}; // 参数 + const response = await logapi.getabilityList(params); // 调用接口获取数据 + if (response && response.data) { + initBarChart(response.data); // 调用图表初始化函数并传入数据 + } + } catch (error) { + console.error('获取柱状图数据失败:', error); + } +}; + +// 处理日期范围变化 +const handleDateChange = () => { + if (dateRange.value.length === 2) { + const [start, end] = dateRange.value; // 已是 yyyy-MM-dd HH:mm:ss 格式 + fetchChartData(start, end); // 将选择后的日期范围传递给图表数据接口 + } else { + fetchChartData(); // 日期范围清空时的操作 + } +}; + // 柱状图 -const initBarChart = () => { - if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose(); - state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme)); - const option = { - backgroundColor: state.charts.bgColor, - title: { - text: '地热开发利用', - x: 'left', - textStyle: { fontSize: '15', color: state.charts.color }, - }, - tooltip: { trigger: 'axis' }, - legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 }, - grid: { top: 70, right: 80, bottom: 30, left: 80 }, - xAxis: [ - { - type: 'category', - data: ['1km', '2km', '3km', '4km', '5km', '6km'], - boundaryGap: true, - axisTick: { show: false }, - }, - ], - yAxis: [ - { - name: '供回温度(℃）', - nameLocation: 'middle', - nameTextStyle: { padding: [3, 4, 50, 6] }, - splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } }, - axisLine: { show: false }, - axisTick: { show: false }, - axisLabel: { color: state.charts.color, formatter: '{value} ' }, - }, - { - name: '压力值(Mpa)', - nameLocation: 'middle', - nameTextStyle: { padding: [50, 4, 5, 6] }, - splitLine: { show: false }, - axisLine: { show: false }, - axisTick: { show: false }, - axisLabel: { color: state.charts.color, formatter: '{value} ' }, - }, - ], - series: [ - { - name: '供温', - type: 'line', - smooth: true, - showSymbol: true, - // 矢量画五角星 - symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z', - symbolSize: 12, - yAxisIndex: 0, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(250,180,101,0.3)' }, - { offset: 1, color: 'rgba(250,180,101,0)' }, - ]), - shadowColor: 'rgba(250,180,101,0.2)', - shadowBlur: 20, - }, - itemStyle: { color: '#FF8000' }, - // data中可以使用对象，value代表相应的值，另外可加入自定义的属性 - data: [ - { value: 1, stationName: 's1' }, - { value: 3, stationName: 's2' }, - { value: 4, stationName: 's3' }, - { value: 9, stationName: 's4' }, - { value: 3, stationName: 's5' }, - { value: 2, stationName: 's6' }, - ], - }, - { - name: '回温', - type: 'line', - smooth: true, - showSymbol: true, - symbol: 'emptyCircle', - symbolSize: 12, - yAxisIndex: 0, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { offset: 0, color: 'rgba(199, 237, 250,0.5)' }, - { offset: 1, color: 'rgba(199, 237, 250,0.2)' }, - ], - false - ), - }, - itemStyle: { - color: '#3bbc86', - }, - data: [ - { value: 31, stationName: 's1' }, - { value: 36, stationName: 's2' }, - { value: 54, stationName: 's3' }, - { value: 24, stationName: 's4' }, - { value: 73, stationName: 's5' }, - { value: 22, stationName: 's6' }, - ], - }, - { - name: '压力值(Mpa)', - type: 'bar', - barWidth: 30, - yAxisIndex: 1, - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(108,80,243,0.3)' }, - { offset: 1, color: 'rgba(108,80,243,0)' }, - ]), - //柱状图圆角 - borderRadius: [30, 30, 0, 0], - }, - data: [ - { value: 11, stationName: 's1' }, - { value: 34, stationName: 's2' }, - { value: 54, stationName: 's3' }, - { value: 39, stationName: 's4' }, - { value: 63, stationName: 's5' }, - { value: 24, stationName: 's6' }, - ], - }, - ], - }; - state.global.homeCharThree.setOption(option); - state.myCharts.push(state.global.homeCharThree); +const initBarChart = (data:any = []) => { + if (!state.global.dispose.some((b) => b === state.global.homeCharThree)) + state.global.homeCharThree.dispose(); + + state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme)); + + const abilities = data.length ? data.map((item) => item.ability) : ['无数据']; + const numbers = data.length ? data.map((item) => item.num) : [0]; + + const option = { + backgroundColor: state.charts.bgColor, + title: { + text: 'AI能力使用统计', + x: 'left', + textStyle: { fontSize: '15', color: state.charts.color }, + }, + tooltip: { trigger: 'axis' }, + grid: { top: 100, right: 30, bottom: 100, left: 50 }, + xAxis: [ + { + type: 'category', + data: abilities, + axisTick: { show: false }, + axisLabel: { + color: state.charts.color, + interval: 0, + rotate: 30, + }, + axisLine: { + lineStyle: { color: state.charts.color }, + }, + }, + ], + yAxis: [ + { + type: 'value', + name: '使用次数', + nameTextStyle: { padding: [0, 0, 10, 0] }, + splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } }, + axisLine: { show: false }, + axisTick: { show: false }, + axisLabel: { color: state.charts.color, formatter: '{value}' }, + }, + ], + series: [ + { + name: '使用次数', + type: data.length ? 'bar' : 'line', // 无数据时显示为一条线 + barWidth: '40%', + itemStyle: { + color: data.length ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(108,80,243,0.8)' }, + { offset: 1, color: 'rgba(108,80,243,0.3)' }, + ]) : undefined, // 符合bar和line样式 + borderRadius: [5, 5, 0, 0], + }, + data: numbers, + }, + ], + }; + state.global.homeCharThree.setOption(option); + state.myCharts.push(state.global.homeCharThree); }; // 批量设置 echarts resize const initEchartsResizeFun = () => { @@ -504,6 +496,8 @@ const initEchartsResize = () => { // 页面加载时 onMounted(() => { initEchartsResize(); + getList(); + fetchChartData(); // 初始加载无参数调用 }); // 由于页面缓存原因，keep-alive onActivated(() => { @@ -551,7 +545,7 @@ $homeNavLengh: 8; .home-card-three { .home-card-item { width: 100%; - height: 130px; + height: auto; border-radius: 4px; transition: all ease 0.3s; padding: 20px; @@ -593,7 +587,7 @@ $homeNavLengh: 8; .home-card-two, .home-card-three { .home-card-item { - height: 400px; + height: 600px; width: 100%; overflow: hidden; .home-monitor { @@ -630,4 +624,15 @@ $homeNavLengh: 8; } } } + +.date-picker-container { + margin-bottom: 10px; /* 添加与标题的间距 */ +} + +.chart-title { + margin-bottom: 0px; /* 标题与图表之间的间距 */ + font-size: 16px; /* 可调整为合适大小 */ + font-weight: bold; /* 字体加粗，增强可读性 */ + color: var(--el-text-color-primary); +} \ No newline at end of file