曲线图，增加弹窗显示30天的数据
This commit is contained in:
jianzhichu
@@ -499,12 +499,12 @@ namespace dy.net.Controllers
|
||||
/// 获取7天视频同步趋势数据（曲线图）
|
||||
/// </summary>
|
||||
/// <returns>7天图表数据列表</returns>
|
||||
[HttpGet("chart")]
|
||||
public async Task<IActionResult> Chart()
|
||||
[HttpGet("chart/{day}")]
|
||||
public async Task<IActionResult> Chart([FromRoute]int day=7)
|
||||
{
|
||||
try
|
||||
{
|
||||
var chartData = await douyinVideoService.GetChartData();
|
||||
var chartData = await douyinVideoService.GetChartData(day);
|
||||
return ApiResult.Success(chartData);
|
||||
}
|
||||
catch (Exception ex)
|
||||
|
||||
+1
-1
@@ -220,7 +220,7 @@ namespace dy.net
|
||||
//commonService.UpdateAllCookieSyncedToZero();
|
||||
// 初始化配置
|
||||
var config = commonService.InitConfig();
|
||||
//if (!isDevelopment)
|
||||
if (!isDevelopment)
|
||||
{
|
||||
// 启动定时任务
|
||||
var quartzJobService = services.GetRequiredService<DouyinQuartzJobService>();
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<Project>
|
||||
<PropertyGroup>
|
||||
<_PublishTargetUrl>E:\code\dysync\bin\Release\net6.0\publish\</_PublishTargetUrl>
|
||||
<History>True|2026-01-22T13:32:21.7284081Z||;True|2026-01-22T21:20:26.5985955+08:00||;False|2026-01-22T21:20:21.1372539+08:00||;True|2026-01-22T21:11:18.3771739+08:00||;True|2026-01-22T20:58:55.9862778+08:00||;True|2026-01-22T20:51:48.6699461+08:00||;False|2026-01-22T20:51:42.2079210+08:00||;True|2026-01-22T20:50:34.7280114+08:00||;True|2026-01-22T20:50:11.1588492+08:00||;True|2026-01-22T16:11:14.0626037+08:00||;True|2026-01-22T15:53:16.6377347+08:00||;True|2026-01-22T15:45:34.0935091+08:00||;True|2026-01-22T12:44:28.1577014+08:00||;True|2026-01-22T12:40:45.7449335+08:00||;True|2026-01-22T12:39:07.0683214+08:00||;True|2026-01-22T09:55:49.7086190+08:00||;True|2026-01-22T01:37:53.6972395+08:00||;True|2026-01-22T01:34:14.2142463+08:00||;True|2026-01-22T01:32:50.9228911+08:00||;True|2026-01-22T01:29:43.8871986+08:00||;True|2026-01-22T01:29:40.7838709+08:00||;True|2026-01-22T01:27:34.4763970+08:00||;True|2026-01-22T01:26:55.0117367+08:00||;True|2026-01-22T01:23:19.4789587+08:00||;True|2026-01-19T10:19:44.8997385+08:00||;True|2026-01-19T10:11:10.2305307+08:00||;True|2026-01-17T00:52:08.8180346+08:00||;False|2026-01-17T00:52:03.1829000+08:00||;True|2026-01-17T00:45:04.0498090+08:00||;True|2026-01-16T21:00:57.7239379+08:00||;True|2026-01-16T21:00:03.3912989+08:00||;True|2026-01-16T20:56:08.5505592+08:00||;True|2026-01-16T20:46:32.3067302+08:00||;True|2026-01-15T22:18:57.9835738+08:00||;True|2026-01-15T22:07:25.4753938+08:00||;True|2026-01-15T22:07:14.8243754+08:00||;True|2026-01-15T21:40:13.2613927+08:00||;True|2026-01-15T20:57:56.6291682+08:00||;True|2026-01-15T20:57:47.1363536+08:00||;True|2026-01-15T20:08:44.4710883+08:00||;True|2026-01-15T20:04:51.8284314+08:00||;False|2026-01-15T20:04:45.3258155+08:00||;True|2026-01-15T19:59:11.7907672+08:00||;True|2026-01-15T01:10:48.9066941+08:00||;True|2026-01-15T01:03:23.6216975+08:00||;True|2026-01-15T01:03:16.3364591+08:00||;False|2026-01-15T01:03:10.5654436+08:00||;True|2026-01-15T00:49:21.6559622+08:00||;True|2026-01-15T00:10:42.7288439+08:00||;True|2026-01-15T00:06:28.4241682+08:00||;True|2026-01-13T22:34:15.2372411+08:00||;True|2026-01-13T22:26:46.4522947+08:00||;True|2026-01-13T22:15:56.9735179+08:00||;True|2026-01-13T22:15:51.8250677+08:00||;False|2026-01-13T22:15:46.6608690+08:00||;True|2026-01-13T22:03:06.4683237+08:00||;False|2026-01-13T22:03:01.2036027+08:00||;True|2026-01-13T21:36:05.8776209+08:00||;True|2026-01-13T21:33:02.0766289+08:00||;False|2026-01-13T21:32:57.1976141+08:00||;True|2026-01-13T19:14:35.2519439+08:00||;True|2026-01-13T15:07:50.0836745+08:00||;False|2026-01-13T15:06:35.5929685+08:00||;True|2026-01-13T10:21:41.6012776+08:00||;True|2026-01-13T09:57:25.4788847+08:00||;True|2026-01-13T09:53:14.4900360+08:00||;True|2026-01-13T09:23:53.6465295+08:00||;True|2026-01-12T22:04:14.5886955+08:00||;False|2026-01-12T22:04:08.2008101+08:00||;True|2026-01-12T21:53:46.9947176+08:00||;True|2026-01-12T21:11:15.8358024+08:00||;True|2026-01-12T21:09:51.8663228+08:00||;True|2026-01-11T21:25:07.5052845+08:00||;False|2026-01-11T21:24:27.5744557+08:00||;True|2026-01-11T19:59:15.4734611+08:00||;False|2026-01-11T19:59:04.9543339+08:00||;True|2026-01-11T18:51:30.6649269+08:00||;True|2026-01-08T21:07:57.5094466+08:00||;True|2026-01-08T14:51:18.2266231+08:00||;True|2026-01-08T14:31:55.1137120+08:00||;True|2026-01-08T00:16:24.4451490+08:00||;True|2026-01-08T00:14:20.7430793+08:00||;True|2026-01-08T00:07:46.7228194+08:00||;True|2026-01-07T23:52:13.3290082+08:00||;True|2026-01-07T23:49:28.4838650+08:00||;True|2026-01-07T23:47:45.1936189+08:00||;True|2026-01-07T23:35:09.7818611+08:00||;True|2026-01-07T23:20:43.7462863+08:00||;True|2026-01-07T23:04:39.5140429+08:00||;False|2026-01-07T23:04:36.5367611+08:00||;True|2026-01-07T22:53:14.6013449+08:00||;True|2026-01-07T22:49:59.9549006+08:00||;True|2026-01-07T22:36:40.0254856+08:00||;False|2026-01-07T22:36:28.8275903+08:00||;True|2026-01-07T21:59:51.4355171+08:00||;True|2026-01-03T21:38:51.4307034+08:00||;True|2026-01-02T19:09:16.9668906+08:00||;False|2026-01-02T19:09:11.7496369+08:00||;True|2026-01-02T15:42:08.2215697+08:00||;True|2026-01-02T09:46:56.1654861+08:00||;</History>
|
||||
<History>True|2026-01-22T15:18:32.0400436Z||;True|2026-01-22T22:29:29.5746209+08:00||;True|2026-01-22T21:32:21.7284081+08:00||;True|2026-01-22T21:20:26.5985955+08:00||;False|2026-01-22T21:20:21.1372539+08:00||;True|2026-01-22T21:11:18.3771739+08:00||;True|2026-01-22T20:58:55.9862778+08:00||;True|2026-01-22T20:51:48.6699461+08:00||;False|2026-01-22T20:51:42.2079210+08:00||;True|2026-01-22T20:50:34.7280114+08:00||;True|2026-01-22T20:50:11.1588492+08:00||;True|2026-01-22T16:11:14.0626037+08:00||;True|2026-01-22T15:53:16.6377347+08:00||;True|2026-01-22T15:45:34.0935091+08:00||;True|2026-01-22T12:44:28.1577014+08:00||;True|2026-01-22T12:40:45.7449335+08:00||;True|2026-01-22T12:39:07.0683214+08:00||;True|2026-01-22T09:55:49.7086190+08:00||;True|2026-01-22T01:37:53.6972395+08:00||;True|2026-01-22T01:34:14.2142463+08:00||;True|2026-01-22T01:32:50.9228911+08:00||;True|2026-01-22T01:29:43.8871986+08:00||;True|2026-01-22T01:29:40.7838709+08:00||;True|2026-01-22T01:27:34.4763970+08:00||;True|2026-01-22T01:26:55.0117367+08:00||;True|2026-01-22T01:23:19.4789587+08:00||;True|2026-01-19T10:19:44.8997385+08:00||;True|2026-01-19T10:11:10.2305307+08:00||;True|2026-01-17T00:52:08.8180346+08:00||;False|2026-01-17T00:52:03.1829000+08:00||;True|2026-01-17T00:45:04.0498090+08:00||;True|2026-01-16T21:00:57.7239379+08:00||;True|2026-01-16T21:00:03.3912989+08:00||;True|2026-01-16T20:56:08.5505592+08:00||;True|2026-01-16T20:46:32.3067302+08:00||;True|2026-01-15T22:18:57.9835738+08:00||;True|2026-01-15T22:07:25.4753938+08:00||;True|2026-01-15T22:07:14.8243754+08:00||;True|2026-01-15T21:40:13.2613927+08:00||;True|2026-01-15T20:57:56.6291682+08:00||;True|2026-01-15T20:57:47.1363536+08:00||;True|2026-01-15T20:08:44.4710883+08:00||;True|2026-01-15T20:04:51.8284314+08:00||;False|2026-01-15T20:04:45.3258155+08:00||;True|2026-01-15T19:59:11.7907672+08:00||;True|2026-01-15T01:10:48.9066941+08:00||;True|2026-01-15T01:03:23.6216975+08:00||;True|2026-01-15T01:03:16.3364591+08:00||;False|2026-01-15T01:03:10.5654436+08:00||;True|2026-01-15T00:49:21.6559622+08:00||;True|2026-01-15T00:10:42.7288439+08:00||;True|2026-01-15T00:06:28.4241682+08:00||;True|2026-01-13T22:34:15.2372411+08:00||;True|2026-01-13T22:26:46.4522947+08:00||;True|2026-01-13T22:15:56.9735179+08:00||;True|2026-01-13T22:15:51.8250677+08:00||;False|2026-01-13T22:15:46.6608690+08:00||;True|2026-01-13T22:03:06.4683237+08:00||;False|2026-01-13T22:03:01.2036027+08:00||;True|2026-01-13T21:36:05.8776209+08:00||;True|2026-01-13T21:33:02.0766289+08:00||;False|2026-01-13T21:32:57.1976141+08:00||;True|2026-01-13T19:14:35.2519439+08:00||;True|2026-01-13T15:07:50.0836745+08:00||;False|2026-01-13T15:06:35.5929685+08:00||;True|2026-01-13T10:21:41.6012776+08:00||;True|2026-01-13T09:57:25.4788847+08:00||;True|2026-01-13T09:53:14.4900360+08:00||;True|2026-01-13T09:23:53.6465295+08:00||;True|2026-01-12T22:04:14.5886955+08:00||;False|2026-01-12T22:04:08.2008101+08:00||;True|2026-01-12T21:53:46.9947176+08:00||;True|2026-01-12T21:11:15.8358024+08:00||;True|2026-01-12T21:09:51.8663228+08:00||;True|2026-01-11T21:25:07.5052845+08:00||;False|2026-01-11T21:24:27.5744557+08:00||;True|2026-01-11T19:59:15.4734611+08:00||;False|2026-01-11T19:59:04.9543339+08:00||;True|2026-01-11T18:51:30.6649269+08:00||;True|2026-01-08T21:07:57.5094466+08:00||;True|2026-01-08T14:51:18.2266231+08:00||;True|2026-01-08T14:31:55.1137120+08:00||;True|2026-01-08T00:16:24.4451490+08:00||;True|2026-01-08T00:14:20.7430793+08:00||;True|2026-01-08T00:07:46.7228194+08:00||;True|2026-01-07T23:52:13.3290082+08:00||;True|2026-01-07T23:49:28.4838650+08:00||;True|2026-01-07T23:47:45.1936189+08:00||;True|2026-01-07T23:35:09.7818611+08:00||;True|2026-01-07T23:20:43.7462863+08:00||;True|2026-01-07T23:04:39.5140429+08:00||;False|2026-01-07T23:04:36.5367611+08:00||;True|2026-01-07T22:53:14.6013449+08:00||;True|2026-01-07T22:49:59.9549006+08:00||;True|2026-01-07T22:36:40.0254856+08:00||;False|2026-01-07T22:36:28.8275903+08:00||;True|2026-01-07T21:59:51.4355171+08:00||;True|2026-01-03T21:38:51.4307034+08:00||;True|2026-01-02T19:09:16.9668906+08:00||;False|2026-01-02T19:09:11.7496369+08:00||;</History>
|
||||
<LastFailureDetails />
|
||||
</PropertyGroup>
|
||||
</Project>
|
||||
@@ -567,7 +567,7 @@ const saveDrawerData = () => {
|
||||
</a-form-item>
|
||||
|
||||
<!-- 下载合集 - 新增name="mixPath" -->
|
||||
<a-form-item v-if="form.savePath&&form.savePath.length>0" label="下载合集" name="downMix">
|
||||
<a-form-item label="下载合集" name="downMix">
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<div class="form-item-div">
|
||||
<a-switch v-model:checked="form.downMix" :checked-value="true" :un-checked-value="false" size="default" />
|
||||
@@ -586,7 +586,7 @@ const saveDrawerData = () => {
|
||||
</a-form-item>
|
||||
|
||||
<!-- 下载短剧 - 新增name="seriesPath" -->
|
||||
<a-form-item v-if="form.savePath&&form.savePath.length>0" label="下载短剧" name="downSeries">
|
||||
<a-form-item label="下载短剧" name="downSeries">
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<div class="form-item-div">
|
||||
<a-switch v-model:checked="form.downSeries" :checked-value="true" :un-checked-value="false" size="default" />
|
||||
|
||||
@@ -96,9 +96,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：7天同步数量 普通折线堆叠图（60%） -->
|
||||
<div class="chart-card secondary-card main-card stats-right">
|
||||
<div class="chart-container" ref="chartRef"></div>
|
||||
<a-button type="text" shape="circle" class="fullscreen-btn" @click="openFullChart">
|
||||
<fullscreen-outlined />
|
||||
</a-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -160,6 +162,12 @@
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 新增：全屏图表模态窗口 -->
|
||||
<a-modal v-model:visible="showFullChartModal" title="近30天同步曲线图" width="80%" destroyOnClose @resize="handleFullChartResize" @cancel="destroyFullChart">
|
||||
<!-- 新增内联样式，强制设置宽高 -->
|
||||
<div class="full-chart-container" ref="fullChartRef" style="width: 100%; height: 400px; min-height: 400px; background: #fff;"></div>
|
||||
</a-modal>
|
||||
|
||||
<svg style="display: none;">
|
||||
<symbol id="cup" viewBox="0 0 12 12">
|
||||
<path d="M18 4h2v16h-2zM4 4h14v2H4zM4 8h10v2H4zM4 12h10v2H4zM4 16h6v2H4zM4 20h6v2H4z" />
|
||||
@@ -169,10 +177,11 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import { useApiStore } from '@/store';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { FullscreenOutlined } from '@ant-design/icons-vue'; // 确保导入图标
|
||||
|
||||
// 类型接口不变
|
||||
interface Author {
|
||||
@@ -226,6 +235,12 @@ const tabCount = ref<number>(0);
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
const syncData = ref<SyncDataItem[]>([]);
|
||||
const syncFullData = ref<SyncDataItem[]>([]);
|
||||
|
||||
// 新增：全屏图表相关变量
|
||||
const showFullChartModal = ref<boolean>(false); // 控制模态窗口显示
|
||||
const fullChartRef = ref<HTMLDivElement | null>(null); // 全屏图表容器
|
||||
let fullChartInstance: echarts.ECharts | null = null; // 全屏图表实例
|
||||
|
||||
defineOptions({
|
||||
name: 'StatsDashboard',
|
||||
@@ -240,28 +255,13 @@ const generateRandomColor = () => {
|
||||
return `#${randomHex()}${randomHex()}${randomHex()}`;
|
||||
};
|
||||
|
||||
// 核心修改1：生成近7天的日期（替换原5天）
|
||||
const getRecent7Days = () => {
|
||||
const days: string[] = [];
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
// 6→0 共7天
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - i);
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
days.push(`${month}-${day}`);
|
||||
}
|
||||
return days;
|
||||
};
|
||||
|
||||
//获取chart数据
|
||||
const generateSyncData = () => {
|
||||
useApiStore()
|
||||
.VideoChart()
|
||||
.VideoChart(7)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
syncData.value = res.data;
|
||||
console.log(syncData.value);
|
||||
initChart();
|
||||
}
|
||||
})
|
||||
@@ -270,32 +270,37 @@ const generateSyncData = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 核心修改3：初始化ECharts - 普通折线堆叠图
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
if (chartInstance) chartInstance.dispose();
|
||||
//获取chart数据
|
||||
const getFullSyncData = () => {
|
||||
useApiStore()
|
||||
.VideoChart(30)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
syncFullData.value = res.data;
|
||||
initFullChart();
|
||||
}
|
||||
})
|
||||
.catch((r) => {
|
||||
console.log(r);
|
||||
});
|
||||
};
|
||||
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
// 原有方法：初始化普通图表（提取公共配置，方便复用）
|
||||
const getChartOption = (data: SyncDataItem[]): echarts.EChartsOption => {
|
||||
const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
|
||||
const data = syncData.value;
|
||||
console.log(data);
|
||||
const dateList = data.map((item) => item.date);
|
||||
console.log(dateList);
|
||||
const option: echarts.EChartsOption = {
|
||||
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis', // 保留：显示当前日期所有系列数据
|
||||
zlevel: 100, // ECharts 内部层级
|
||||
// 关键配置：让 tooltip 脱离框架容器
|
||||
// renderMode: 'dom', // 强制用 DOM 渲染 tooltip（而非 Canvas）
|
||||
appendToBody: true, // 将 tooltip DOM 直接挂载到 <body> 下
|
||||
confine: false, // 关闭容器限制
|
||||
trigger: 'axis',
|
||||
zlevel: 100,
|
||||
appendToBody: true,
|
||||
confine: false,
|
||||
axisPointer: { type: 'cross' },
|
||||
// 可选：自定义样式，确保清晰
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
textStyle: { fontSize: 12, color: '#fff' },
|
||||
padding: [8, 12],
|
||||
// 可选：给 tooltip 加自定义类名，方便单独控制样式
|
||||
className: 'custom-chart-tooltip',
|
||||
},
|
||||
legend: {
|
||||
@@ -322,7 +327,7 @@ const initChart = () => {
|
||||
},
|
||||
axisLabel: {
|
||||
color: document.documentElement.classList.contains('dark-mode') ? '#b0b0c3' : '#666',
|
||||
fontSize: 11, // 7天日期挤，微调字号
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -354,8 +359,8 @@ const initChart = () => {
|
||||
symbolSize: 4,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
symbolSize: 6, // hover时数据点放大
|
||||
} as any, // 增加类型断言解决报错
|
||||
symbolSize: 6,
|
||||
} as any,
|
||||
data: data.map((item) => item.favorite),
|
||||
},
|
||||
{
|
||||
@@ -420,8 +425,17 @@ const initChart = () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
// 原有方法：初始化普通图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
if (chartInstance) chartInstance.dispose();
|
||||
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
const option = getChartOption(syncData.value);
|
||||
chartInstance.setOption(option);
|
||||
|
||||
const resizeHandler = () => chartInstance?.resize();
|
||||
window.addEventListener('resize', resizeHandler);
|
||||
onUnmounted(() => {
|
||||
@@ -430,12 +444,100 @@ const initChart = () => {
|
||||
chartInstance = null;
|
||||
});
|
||||
};
|
||||
// 新增：打开全屏图表窗口
|
||||
const openFullChart = () => {
|
||||
showFullChartModal.value = true;
|
||||
};
|
||||
// 新增：初始化全屏图表
|
||||
// 重写 initFullChart 函数（增加更多日志和容错）
|
||||
const initFullChart = async () => {
|
||||
console.log('进入initFullChart函数');
|
||||
await nextTick(); // 等待模态窗口DOM渲染完成
|
||||
|
||||
// 增加日志排查
|
||||
console.log('fullChartRef是否存在：', !!fullChartRef.value);
|
||||
console.log('syncData是否有数据：', syncData.value.length);
|
||||
|
||||
if (!fullChartRef.value) {
|
||||
console.error('全屏图表容器不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
if (syncData.value.length === 0) {
|
||||
console.error('同步数据为空');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('开始初始化全屏图表');
|
||||
// 销毁已有实例
|
||||
if (fullChartInstance) {
|
||||
fullChartInstance.dispose();
|
||||
fullChartInstance = null;
|
||||
}
|
||||
|
||||
try {
|
||||
// 初始化全屏图表
|
||||
fullChartInstance = echarts.init(fullChartRef.value);
|
||||
const option = getChartOption(syncData.value);
|
||||
// 调整全屏图表的网格和字号，优化显示效果
|
||||
option.grid = {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
top: '8%',
|
||||
containLabel: true,
|
||||
};
|
||||
if (option.xAxis && Array.isArray(option.xAxis) && option.xAxis[0]) {
|
||||
option.xAxis[0].axisLabel = {
|
||||
...option.xAxis[0].axisLabel,
|
||||
fontSize: 12,
|
||||
};
|
||||
}
|
||||
if (option.yAxis && Array.isArray(option.yAxis) && option.yAxis[0]) {
|
||||
option.yAxis[0].axisLabel = {
|
||||
...option.yAxis[0].axisLabel,
|
||||
fontSize: 12,
|
||||
};
|
||||
}
|
||||
|
||||
fullChartInstance.setOption(option);
|
||||
fullChartInstance.resize(); // 强制调整大小
|
||||
console.log('全屏图表初始化成功');
|
||||
} catch (error) {
|
||||
console.error('全屏图表初始化失败：', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 新增：处理全屏图表窗口大小变化
|
||||
const handleFullChartResize = () => {
|
||||
fullChartInstance?.resize();
|
||||
};
|
||||
|
||||
// 新增：销毁全屏图表实例
|
||||
const destroyFullChart = () => {
|
||||
fullChartInstance?.dispose();
|
||||
fullChartInstance = null;
|
||||
};
|
||||
|
||||
// 监听暗黑模式切换
|
||||
// watch(
|
||||
// () => document.documentElement.classList.contains('dark-mode'),
|
||||
// () => initChart(),
|
||||
// { immediate: true }
|
||||
// );
|
||||
|
||||
// 在脚本中添加（放在onMounted之前）
|
||||
watch(
|
||||
() => document.documentElement.classList.contains('dark-mode'),
|
||||
() => initChart(),
|
||||
{ immediate: true }
|
||||
() => showFullChartModal.value,
|
||||
async (isOpen) => {
|
||||
if (isOpen) {
|
||||
console.log('弹窗已打开，准备初始化全屏图表');
|
||||
getFullSyncData();
|
||||
} else {
|
||||
destroyFullChart(); // 弹窗关闭时销毁图表
|
||||
}
|
||||
},
|
||||
{ immediate: false }
|
||||
);
|
||||
|
||||
// 加载数据 - 调用7天方法
|
||||
@@ -444,6 +546,10 @@ onMounted(() => {
|
||||
loadDashboardData();
|
||||
});
|
||||
|
||||
// 新增：窗口关闭时销毁全屏图表
|
||||
onUnmounted(() => {
|
||||
destroyFullChart();
|
||||
});
|
||||
const changeTab = (e: string) => {
|
||||
currentTab.value = e;
|
||||
tabCount.value = e === 'author' ? totalAuthors.value : categoryTotal.value;
|
||||
@@ -529,11 +635,13 @@ const handleDeleteItem = (item: Author) => {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative; /* 新增：为全屏按钮提供定位容器 */
|
||||
}
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 220px;
|
||||
padding-right: 40px; /* 新增：给右侧留出按钮空间，避免覆盖 */
|
||||
}
|
||||
.stat-header {
|
||||
display: flex;
|
||||
@@ -542,12 +650,6 @@ const handleDeleteItem = (item: Author) => {
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.total-videos-item,
|
||||
.total-space-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.stat-subitems {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -965,4 +1067,41 @@ html.dark-mode .category-stats {
|
||||
html.dark-mode .author-progress {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 新增：全屏按钮样式 */
|
||||
.fullscreen-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 10; /* 确保在图表上方显示 */
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fullscreen-btn:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
/* 暗黑模式下的全屏按钮样式 */
|
||||
html.dark-mode .fullscreen-btn {
|
||||
background-color: rgba(40, 40, 65, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: #b0b0c3;
|
||||
}
|
||||
|
||||
html.dark-mode .fullscreen-btn:hover {
|
||||
background-color: rgba(60, 60, 85, 0.8);
|
||||
color: #42a5f5;
|
||||
border-color: #42a5f5;
|
||||
}
|
||||
</style>
|
||||
@@ -104,8 +104,8 @@ export const useApiStore = defineStore('coreapi', () => {
|
||||
});
|
||||
}
|
||||
//视频曲线
|
||||
async function VideoChart() {
|
||||
return http.request<any, Response<any>>('/api/video/chart', 'get').then(r => {
|
||||
async function VideoChart(day: number) {
|
||||
return http.request<any, Response<any>>(`/api/video/chart/${day}`, 'get').then(r => {
|
||||
return r;
|
||||
}).finally(() => {
|
||||
|
||||
|
||||
@@ -382,9 +382,11 @@ namespace dy.net.service
|
||||
///
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
public async Task<List<VideoChartItemDto>> GetChartData()
|
||||
public async Task<List<VideoChartItemDto>> GetChartData(int day=7)
|
||||
{
|
||||
var list = await _dyCollectVideoRepository.GetListAsync(x => x.SyncTime > DateTime.Now.AddDays(-7));
|
||||
|
||||
var date = DateTime.Now.AddDays(-day);
|
||||
var list = await _dyCollectVideoRepository.GetListAsync(x => x.SyncTime > date);
|
||||
|
||||
var resultData = list.GroupBy(x => x.SyncTime.ToString("yyyyMMdd")).Select(g => new VideoChartItemDto
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user