曲线图,增加弹窗显示30天的数据
This commit is contained in:
@@ -499,12 +499,12 @@ namespace dy.net.Controllers
|
|||||||
/// 获取7天视频同步趋势数据(曲线图)
|
/// 获取7天视频同步趋势数据(曲线图)
|
||||||
/// </summary>
|
/// </summary>
|
||||||
/// <returns>7天图表数据列表</returns>
|
/// <returns>7天图表数据列表</returns>
|
||||||
[HttpGet("chart")]
|
[HttpGet("chart/{day}")]
|
||||||
public async Task<IActionResult> Chart()
|
public async Task<IActionResult> Chart([FromRoute]int day=7)
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var chartData = await douyinVideoService.GetChartData();
|
var chartData = await douyinVideoService.GetChartData(day);
|
||||||
return ApiResult.Success(chartData);
|
return ApiResult.Success(chartData);
|
||||||
}
|
}
|
||||||
catch (Exception ex)
|
catch (Exception ex)
|
||||||
|
|||||||
+1
-1
@@ -220,7 +220,7 @@ namespace dy.net
|
|||||||
//commonService.UpdateAllCookieSyncedToZero();
|
//commonService.UpdateAllCookieSyncedToZero();
|
||||||
// 初始化配置
|
// 初始化配置
|
||||||
var config = commonService.InitConfig();
|
var config = commonService.InitConfig();
|
||||||
//if (!isDevelopment)
|
if (!isDevelopment)
|
||||||
{
|
{
|
||||||
// 启动定时任务
|
// 启动定时任务
|
||||||
var quartzJobService = services.GetRequiredService<DouyinQuartzJobService>();
|
var quartzJobService = services.GetRequiredService<DouyinQuartzJobService>();
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<Project>
|
<Project>
|
||||||
<PropertyGroup>
|
<PropertyGroup>
|
||||||
<_PublishTargetUrl>E:\code\dysync\bin\Release\net6.0\publish\</_PublishTargetUrl>
|
<_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 />
|
<LastFailureDetails />
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
</Project>
|
</Project>
|
||||||
@@ -567,7 +567,7 @@ const saveDrawerData = () => {
|
|||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<!-- 下载合集 - 新增name="mixPath" -->
|
<!-- 下载合集 - 新增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 style="display: flex; align-items: center; gap: 12px;">
|
||||||
<div class="form-item-div">
|
<div class="form-item-div">
|
||||||
<a-switch v-model:checked="form.downMix" :checked-value="true" :un-checked-value="false" size="default" />
|
<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>
|
</a-form-item>
|
||||||
|
|
||||||
<!-- 下载短剧 - 新增name="seriesPath" -->
|
<!-- 下载短剧 - 新增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 style="display: flex; align-items: center; gap: 12px;">
|
||||||
<div class="form-item-div">
|
<div class="form-item-div">
|
||||||
<a-switch v-model:checked="form.downSeries" :checked-value="true" :un-checked-value="false" size="default" />
|
<a-switch v-model:checked="form.downSeries" :checked-value="true" :un-checked-value="false" size="default" />
|
||||||
|
|||||||
@@ -96,9 +96,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右侧:7天同步数量 普通折线堆叠图(60%) -->
|
|
||||||
<div class="chart-card secondary-card main-card stats-right">
|
<div class="chart-card secondary-card main-card stats-right">
|
||||||
<div class="chart-container" ref="chartRef"></div>
|
<div class="chart-container" ref="chartRef"></div>
|
||||||
|
<a-button type="text" shape="circle" class="fullscreen-btn" @click="openFullChart">
|
||||||
|
<fullscreen-outlined />
|
||||||
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -160,6 +162,12 @@
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</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;">
|
<svg style="display: none;">
|
||||||
<symbol id="cup" viewBox="0 0 12 12">
|
<symbol id="cup" viewBox="0 0 12 12">
|
||||||
<path d="M18 4h2v16h-2zM4 4h14v2H4zM4 8h10v2H4zM4 12h10v2H4zM4 16h6v2H4zM4 20h6v2H4z" />
|
<path d="M18 4h2v16h-2zM4 4h14v2H4zM4 8h10v2H4zM4 12h10v2H4zM4 16h6v2H4zM4 20h6v2H4z" />
|
||||||
@@ -169,10 +177,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||||
import { useApiStore } from '@/store';
|
import { useApiStore } from '@/store';
|
||||||
import { message, Modal } from 'ant-design-vue';
|
import { message, Modal } from 'ant-design-vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
import { FullscreenOutlined } from '@ant-design/icons-vue'; // 确保导入图标
|
||||||
|
|
||||||
// 类型接口不变
|
// 类型接口不变
|
||||||
interface Author {
|
interface Author {
|
||||||
@@ -226,6 +235,12 @@ const tabCount = ref<number>(0);
|
|||||||
const chartRef = ref<HTMLDivElement | null>(null);
|
const chartRef = ref<HTMLDivElement | null>(null);
|
||||||
let chartInstance: echarts.ECharts | null = null;
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
const syncData = ref<SyncDataItem[]>([]);
|
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({
|
defineOptions({
|
||||||
name: 'StatsDashboard',
|
name: 'StatsDashboard',
|
||||||
@@ -240,28 +255,13 @@ const generateRandomColor = () => {
|
|||||||
return `#${randomHex()}${randomHex()}${randomHex()}`;
|
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数据
|
//获取chart数据
|
||||||
const generateSyncData = () => {
|
const generateSyncData = () => {
|
||||||
useApiStore()
|
useApiStore()
|
||||||
.VideoChart()
|
.VideoChart(7)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
syncData.value = res.data;
|
syncData.value = res.data;
|
||||||
console.log(syncData.value);
|
|
||||||
initChart();
|
initChart();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -270,32 +270,37 @@ const generateSyncData = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 核心修改3:初始化ECharts - 普通折线堆叠图
|
//获取chart数据
|
||||||
const initChart = () => {
|
const getFullSyncData = () => {
|
||||||
if (!chartRef.value) return;
|
useApiStore()
|
||||||
if (chartInstance) chartInstance.dispose();
|
.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 colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
|
||||||
const data = syncData.value;
|
|
||||||
console.log(data);
|
|
||||||
const dateList = data.map((item) => item.date);
|
const dateList = data.map((item) => item.date);
|
||||||
console.log(dateList);
|
|
||||||
const option: echarts.EChartsOption = {
|
return {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis', // 保留:显示当前日期所有系列数据
|
trigger: 'axis',
|
||||||
zlevel: 100, // ECharts 内部层级
|
zlevel: 100,
|
||||||
// 关键配置:让 tooltip 脱离框架容器
|
appendToBody: true,
|
||||||
// renderMode: 'dom', // 强制用 DOM 渲染 tooltip(而非 Canvas)
|
confine: false,
|
||||||
appendToBody: true, // 将 tooltip DOM 直接挂载到 <body> 下
|
|
||||||
confine: false, // 关闭容器限制
|
|
||||||
axisPointer: { type: 'cross' },
|
axisPointer: { type: 'cross' },
|
||||||
// 可选:自定义样式,确保清晰
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||||
textStyle: { fontSize: 12, color: '#fff' },
|
textStyle: { fontSize: 12, color: '#fff' },
|
||||||
padding: [8, 12],
|
padding: [8, 12],
|
||||||
// 可选:给 tooltip 加自定义类名,方便单独控制样式
|
|
||||||
className: 'custom-chart-tooltip',
|
className: 'custom-chart-tooltip',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
@@ -322,7 +327,7 @@ const initChart = () => {
|
|||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: document.documentElement.classList.contains('dark-mode') ? '#b0b0c3' : '#666',
|
color: document.documentElement.classList.contains('dark-mode') ? '#b0b0c3' : '#666',
|
||||||
fontSize: 11, // 7天日期挤,微调字号
|
fontSize: 11,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -354,8 +359,8 @@ const initChart = () => {
|
|||||||
symbolSize: 4,
|
symbolSize: 4,
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series',
|
focus: 'series',
|
||||||
symbolSize: 6, // hover时数据点放大
|
symbolSize: 6,
|
||||||
} as any, // 增加类型断言解决报错
|
} as any,
|
||||||
data: data.map((item) => item.favorite),
|
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);
|
chartInstance.setOption(option);
|
||||||
|
|
||||||
const resizeHandler = () => chartInstance?.resize();
|
const resizeHandler = () => chartInstance?.resize();
|
||||||
window.addEventListener('resize', resizeHandler);
|
window.addEventListener('resize', resizeHandler);
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@@ -430,12 +444,100 @@ const initChart = () => {
|
|||||||
chartInstance = null;
|
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(
|
watch(
|
||||||
() => document.documentElement.classList.contains('dark-mode'),
|
() => showFullChartModal.value,
|
||||||
() => initChart(),
|
async (isOpen) => {
|
||||||
{ immediate: true }
|
if (isOpen) {
|
||||||
|
console.log('弹窗已打开,准备初始化全屏图表');
|
||||||
|
getFullSyncData();
|
||||||
|
} else {
|
||||||
|
destroyFullChart(); // 弹窗关闭时销毁图表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: false }
|
||||||
);
|
);
|
||||||
|
|
||||||
// 加载数据 - 调用7天方法
|
// 加载数据 - 调用7天方法
|
||||||
@@ -444,6 +546,10 @@ onMounted(() => {
|
|||||||
loadDashboardData();
|
loadDashboardData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 新增:窗口关闭时销毁全屏图表
|
||||||
|
onUnmounted(() => {
|
||||||
|
destroyFullChart();
|
||||||
|
});
|
||||||
const changeTab = (e: string) => {
|
const changeTab = (e: string) => {
|
||||||
currentTab.value = e;
|
currentTab.value = e;
|
||||||
tabCount.value = e === 'author' ? totalAuthors.value : categoryTotal.value;
|
tabCount.value = e === 'author' ? totalAuthors.value : categoryTotal.value;
|
||||||
@@ -529,11 +635,13 @@ const handleDeleteItem = (item: Author) => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
position: relative; /* 新增:为全屏按钮提供定位容器 */
|
||||||
}
|
}
|
||||||
.chart-container {
|
.chart-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 220px;
|
min-height: 220px;
|
||||||
|
padding-right: 40px; /* 新增:给右侧留出按钮空间,避免覆盖 */
|
||||||
}
|
}
|
||||||
.stat-header {
|
.stat-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -542,12 +650,6 @@ const handleDeleteItem = (item: Author) => {
|
|||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.total-videos-item,
|
|
||||||
.total-space-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.stat-subitems {
|
.stat-subitems {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
@@ -965,4 +1067,41 @@ html.dark-mode .category-stats {
|
|||||||
html.dark-mode .author-progress {
|
html.dark-mode .author-progress {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
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>
|
</style>
|
||||||
@@ -104,8 +104,8 @@ export const useApiStore = defineStore('coreapi', () => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
//视频曲线
|
//视频曲线
|
||||||
async function VideoChart() {
|
async function VideoChart(day: number) {
|
||||||
return http.request<any, Response<any>>('/api/video/chart', 'get').then(r => {
|
return http.request<any, Response<any>>(`/api/video/chart/${day}`, 'get').then(r => {
|
||||||
return r;
|
return r;
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
|
|
||||||
|
|||||||
@@ -382,9 +382,11 @@ namespace dy.net.service
|
|||||||
///
|
///
|
||||||
/// </summary>
|
/// </summary>
|
||||||
/// <returns></returns>
|
/// <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
|
var resultData = list.GroupBy(x => x.SyncTime.ToString("yyyyMMdd")).Select(g => new VideoChartItemDto
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user