录音时长趋势图

This commit is contained in:
zhonghua.li
2026-02-07 22:44:11 +08:00
parent bf51c2afc4
commit 705ee2dff7
5 changed files with 328 additions and 51 deletions

View File

@@ -12,7 +12,7 @@ function getSystemInfo() {
windowHeight: windowInfo.windowHeight
};
} catch (e) {
common_vendor.index.__f__("warn", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:99", "[RecordingDuration] Failed to use wx.getWindowInfo, fallback to getSystemInfoSync:", e);
common_vendor.index.__f__("warn", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:103", "[RecordingDuration] Failed to use wx.getWindowInfo, fallback to getSystemInfoSync:", e);
}
}
try {
@@ -23,7 +23,7 @@ function getSystemInfo() {
windowHeight: systemInfo.windowHeight
};
} catch (e) {
common_vendor.index.__f__("error", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:113", "[RecordingDuration] Failed to get system info:", e);
common_vendor.index.__f__("error", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:117", "[RecordingDuration] Failed to get system info:", e);
return {
statusBarHeight: 20,
windowWidth: 375,
@@ -54,11 +54,15 @@ const _sfc_main = {
totalDuration: "0 分钟",
recordingCount: "0",
dataList: [],
loading: false
loading: false,
chartWidth: 0,
chartHeight: 300,
chartData: []
};
},
onLoad() {
this.loadData();
this.initChartSize();
},
onReady() {
this.$nextTick(() => {
@@ -71,7 +75,7 @@ const _sfc_main = {
const totalHeight = statusBarHeightRpx + actualHeightRpx;
const adjustedHeight = Math.max(totalHeight - 4, 0);
this.$set(this, "contentTop", adjustedHeight + "rpx");
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:166", "[RecordingDuration] 使用实际导航栏高度:", actualHeight, "px =", actualHeightRpx, "rpx, 总高度:", totalHeight, "rpx, 调整后:", adjustedHeight, "rpx");
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:175", "[RecordingDuration] 使用实际导航栏高度:", actualHeight, "px =", actualHeightRpx, "rpx, 总高度:", totalHeight, "rpx, 调整后:", adjustedHeight, "rpx");
} else {
const systemInfo = getSystemInfo();
const statusBarHeight = systemInfo.statusBarHeight;
@@ -90,7 +94,7 @@ const _sfc_main = {
const tabbarHeightRpx = tabbarHeight * 2;
const adjustedBottom = Math.max(tabbarHeightRpx - 4, 0);
this.$set(this, "contentBottom", adjustedBottom + "rpx");
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:190", "[RecordingDuration] 使用实际tabbar高度:", tabbarHeight, "px =", tabbarHeightRpx, "rpx, 调整后:", adjustedBottom, "rpx");
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:199", "[RecordingDuration] 使用实际tabbar高度:", tabbarHeight, "px =", tabbarHeightRpx, "rpx, 调整后:", adjustedBottom, "rpx");
} else {
this.$set(this, "contentBottom", "0rpx");
}
@@ -105,7 +109,7 @@ const _sfc_main = {
const totalHeight = statusBarHeightRpx + actualHeightRpx;
const adjustedHeight = Math.max(totalHeight - 4, 0);
this.$set(this, "contentTop", adjustedHeight + "rpx");
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:209", "[RecordingDuration] 延迟更新导航栏高度:", actualHeight, "px =", actualHeightRpx, "rpx, 总高度:", totalHeight, "rpx, 调整后:", adjustedHeight, "rpx");
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:218", "[RecordingDuration] 延迟更新导航栏高度:", actualHeight, "px =", actualHeightRpx, "rpx, 总高度:", totalHeight, "rpx, 调整后:", adjustedHeight, "rpx");
}
}).exec();
const queryTabbar2 = common_vendor.index.createSelectorQuery().in(this);
@@ -115,7 +119,7 @@ const _sfc_main = {
const tabbarHeightRpx = tabbarHeight * 2;
const adjustedBottom = Math.max(tabbarHeightRpx - 4, 0);
this.$set(this, "contentBottom", adjustedBottom + "rpx");
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:221", "[RecordingDuration] 延迟更新tabbar高度:", tabbarHeight, "px =", tabbarHeightRpx, "rpx, 调整后:", adjustedBottom, "rpx");
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:230", "[RecordingDuration] 延迟更新tabbar高度:", tabbarHeight, "px =", tabbarHeightRpx, "rpx, 调整后:", adjustedBottom, "rpx");
}
}).exec();
}, 200);
@@ -150,7 +154,7 @@ const _sfc_main = {
salesPhone: loginResponse.phone || null
};
} catch (e) {
common_vendor.index.__f__("error", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:258", "获取用户信息失败:", e);
common_vendor.index.__f__("error", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:267", "获取用户信息失败:", e);
return { salesId: null, salesPhone: null };
}
},
@@ -211,8 +215,8 @@ const _sfc_main = {
const queryString = Object.keys(queryParams).filter((key) => queryParams[key] !== null && queryParams[key] !== void 0 && queryParams[key] !== "").map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`).join("&");
const baseUrl = common_config.getApiUrl("/api/audio-statistics/sales");
const url = queryString ? `${baseUrl}?${queryString}` : baseUrl;
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:338", "[RecordingDuration] 请求参数:", queryParams);
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:339", "[RecordingDuration] 请求URL:", url);
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:347", "[RecordingDuration] 请求参数:", queryParams);
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:348", "[RecordingDuration] 请求URL:", url);
common_vendor.index.showLoading({
title: "加载中...",
mask: true
@@ -233,8 +237,8 @@ const _sfc_main = {
return;
}
const statisticsList = result.data || [];
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:374", "[RecordingDuration] 返回数据:", statisticsList);
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:375", "[RecordingDuration] 返回结果:", result);
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:383", "[RecordingDuration] 返回数据:", statisticsList);
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:384", "[RecordingDuration] 返回结果:", result);
this.processStatisticsData(statisticsList);
common_vendor.index.showToast({
title: "刷新成功",
@@ -246,7 +250,7 @@ const _sfc_main = {
}
} catch (error) {
common_vendor.index.hideLoading();
common_vendor.index.__f__("error", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:393", "[RecordingDuration] 加载数据失败:", error);
common_vendor.index.__f__("error", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:402", "[RecordingDuration] 加载数据失败:", error);
common_vendor.index.showToast({
title: error.message || "加载失败,请重试",
icon: "none",
@@ -300,12 +304,126 @@ const _sfc_main = {
this.dataList = formattedList;
const recordingCount = firstItem.salesRecordingCountStatistic || firstItem.salesRecordingCount || 0;
this.recordingCount = String(recordingCount);
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:466", "[RecordingDuration] 数据处理完成:", {
common_vendor.index.__f__("log", "at pages-subpackage/ai_features/recording_duration/recording_duration.vue:475", "[RecordingDuration] 数据处理完成:", {
totalDuration: this.totalDuration,
recordingCount: this.recordingCount,
dataListCount: this.dataList.length,
statisticsListLength: statisticsList.length
});
this.prepareChartData(statisticsList);
},
/**
* 初始化图表尺寸
*/
initChartSize() {
const systemInfo = common_vendor.index.getSystemInfoSync();
const screenWidth = systemInfo.windowWidth || 375;
this.chartWidth = screenWidth - 60;
},
/**
* 准备图表数据
*/
prepareChartData(statisticsList) {
if (!statisticsList || statisticsList.length === 0) {
this.chartData = [];
return;
}
const sortedList = [...statisticsList].sort((a, b) => {
const dateA = new Date(a.statisticsDate);
const dateB = new Date(b.statisticsDate);
return dateA - dateB;
});
this.chartData = sortedList.map((item) => ({
date: item.statisticsDate,
duration: item.salesTotalDuration || 0
}));
this.$nextTick(() => {
setTimeout(() => {
this.drawChart();
}, 100);
});
},
/**
* 绘制趋势图
*/
drawChart() {
if (!this.chartData || this.chartData.length === 0) {
return;
}
const ctx = common_vendor.index.createCanvasContext("trendChart", this);
const width = this.chartWidth;
const height = this.chartHeight;
const padding = {
top: 40,
right: 20,
bottom: 50,
left: 50
};
const chartWidth = width - padding.left - padding.right;
const chartHeight = height - padding.top - padding.bottom;
ctx.clearRect(0, 0, width, height);
const durations = this.chartData.map((item) => item.duration);
const maxDuration = Math.max(...durations, 1);
Math.min(...durations, 0);
const yMax = Math.ceil(maxDuration / 100) * 100;
const yStep = yMax / 5;
ctx.setFillStyle("#666666");
ctx.setFontSize(10);
for (let i = 0; i <= 5; i++) {
const y = padding.top + chartHeight - chartHeight / 5 * i;
const value = Math.round(yStep * i);
ctx.fillText(value.toString(), 5, y + 4);
ctx.setStrokeStyle("#e0e0e0");
ctx.setLineWidth(1);
ctx.beginPath();
ctx.moveTo(padding.left, y);
ctx.lineTo(padding.left + chartWidth, y);
ctx.stroke();
}
const dataCount = this.chartData.length;
const xStep = chartWidth / Math.max(dataCount - 1, 1);
this.chartData.forEach((item, index) => {
const x = padding.left + xStep * index;
const date = new Date(item.date);
const month = date.getMonth() + 1;
const day = date.getDate();
const label = `${month}/${day}`;
ctx.setFillStyle("#666666");
ctx.setFontSize(10);
ctx.fillText(label, x - 15, height - padding.bottom + 20);
});
ctx.setStrokeStyle("#007aff");
ctx.setLineWidth(2);
ctx.beginPath();
this.chartData.forEach((item, index) => {
const x = padding.left + xStep * index;
const y = padding.top + chartHeight - item.duration / yMax * chartHeight;
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.stroke();
ctx.setFillStyle("#007aff");
this.chartData.forEach((item, index) => {
const x = padding.left + xStep * index;
const y = padding.top + chartHeight - item.duration / yMax * chartHeight;
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
});
ctx.setStrokeStyle("#333333");
ctx.setLineWidth(1);
ctx.beginPath();
ctx.moveTo(padding.left, padding.top);
ctx.lineTo(padding.left, padding.top + chartHeight);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(padding.left, padding.top + chartHeight);
ctx.lineTo(padding.left + chartWidth, padding.top + chartHeight);
ctx.stroke();
ctx.draw();
}
}
};
@@ -351,7 +469,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
} : {}, {
l: common_vendor.t($data.totalDuration),
m: common_vendor.t($data.recordingCount),
n: common_vendor.f($data.dataList, (item, index, i0) => {
n: $data.chartWidth + "px",
o: $data.chartHeight + "px",
p: common_vendor.f($data.dataList, (item, index, i0) => {
return {
a: common_vendor.t(item.date),
b: common_vendor.t(item.description),
@@ -360,8 +480,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
e: index
};
}),
o: $data.contentTop,
p: $data.contentBottom
q: $data.contentTop,
r: $data.contentBottom
});
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-582d7c51"]]);

View File

@@ -1 +1 @@
<view class="feature-page data-v-582d7c51"><view class="page-header data-v-582d7c51" style="{{'padding-top:' + b}}"><view class="nav-bar data-v-582d7c51"><view class="nav-left data-v-582d7c51" bindtap="{{a}}"><text class="back-icon data-v-582d7c51">←</text></view><text class="nav-title data-v-582d7c51">录音时长统计</text></view></view><scroll-view class="content-scroll data-v-582d7c51" scroll-y="true" style="{{'top:' + o + ';' + ('bottom:' + p)}}"><view class="search-toolbar data-v-582d7c51"><view class="toolbar-picker-wrapper data-v-582d7c51" bindtap="{{g}}"><view class="toolbar-picker-view data-v-582d7c51"><text class="toolbar-picker-text data-v-582d7c51">{{c}}</text><uni-icons wx:if="{{d}}" class="data-v-582d7c51" u-i="582d7c51-0" bind:__l="__l" u-p="{{d}}"></uni-icons></view><view wx:if="{{e}}" class="time-range-dropdown data-v-582d7c51"><view wx:for="{{f}}" wx:for-item="option" wx:key="b" class="{{['dropdown-item', 'data-v-582d7c51', option.c && 'dropdown-item-active']}}" catchtap="{{option.d}}"><text class="data-v-582d7c51">{{option.a}}</text></view></view></view><view class="toolbar-actions data-v-582d7c51"><view class="toolbar-btn toolbar-btn--refresh data-v-582d7c51" bindtap="{{i}}"><uni-icons wx:if="{{h}}" class="data-v-582d7c51" u-i="582d7c51-1" bind:__l="__l" u-p="{{h}}"></uni-icons><text class="data-v-582d7c51">刷新</text></view></view></view><view wx:if="{{j}}" class="dropdown-mask data-v-582d7c51" bindtap="{{k}}"></view><view class="stats-card data-v-582d7c51"><view class="stat-item data-v-582d7c51"><text class="stat-value data-v-582d7c51">{{l}}</text><text class="stat-label data-v-582d7c51">总录音时长</text></view><view class="stat-item data-v-582d7c51"><text class="stat-value data-v-582d7c51">{{m}}</text><text class="stat-label data-v-582d7c51">录音总条数</text></view></view><view class="chart-section data-v-582d7c51"><text class="section-title data-v-582d7c51">时长趋势图</text><view class="chart-placeholder data-v-582d7c51"><text class="placeholder-text data-v-582d7c51">📊 图表区域</text><text class="placeholder-desc data-v-582d7c51">此处将显示录音时长趋势图表</text></view></view><view class="data-list data-v-582d7c51"><text class="section-title data-v-582d7c51">详细数据</text><view wx:for="{{n}}" wx:for-item="item" wx:key="e" class="list-item data-v-582d7c51"><view class="item-left data-v-582d7c51"><text class="item-date data-v-582d7c51">{{item.a}}</text><text class="item-desc data-v-582d7c51">{{item.b}}</text></view><view class="item-right data-v-582d7c51"><text class="item-duration data-v-582d7c51">{{item.c}}</text><text class="item-count data-v-582d7c51">{{item.d}}</text></view></view></view></scroll-view></view>
<view class="feature-page data-v-582d7c51"><view class="page-header data-v-582d7c51" style="{{'padding-top:' + b}}"><view class="nav-bar data-v-582d7c51"><view class="nav-left data-v-582d7c51" bindtap="{{a}}"><text class="back-icon data-v-582d7c51">←</text></view><text class="nav-title data-v-582d7c51">录音时长统计</text></view></view><scroll-view class="content-scroll data-v-582d7c51" scroll-y="true" style="{{'top:' + q + ';' + ('bottom:' + r)}}"><view class="search-toolbar data-v-582d7c51"><view class="toolbar-picker-wrapper data-v-582d7c51" bindtap="{{g}}"><view class="toolbar-picker-view data-v-582d7c51"><text class="toolbar-picker-text data-v-582d7c51">{{c}}</text><uni-icons wx:if="{{d}}" class="data-v-582d7c51" u-i="582d7c51-0" bind:__l="__l" u-p="{{d}}"></uni-icons></view><view wx:if="{{e}}" class="time-range-dropdown data-v-582d7c51"><view wx:for="{{f}}" wx:for-item="option" wx:key="b" class="{{['dropdown-item', 'data-v-582d7c51', option.c && 'dropdown-item-active']}}" catchtap="{{option.d}}"><text class="data-v-582d7c51">{{option.a}}</text></view></view></view><view class="toolbar-actions data-v-582d7c51"><view class="toolbar-btn toolbar-btn--refresh data-v-582d7c51" bindtap="{{i}}"><uni-icons wx:if="{{h}}" class="data-v-582d7c51" u-i="582d7c51-1" bind:__l="__l" u-p="{{h}}"></uni-icons><text class="data-v-582d7c51">刷新</text></view></view></view><view wx:if="{{j}}" class="dropdown-mask data-v-582d7c51" bindtap="{{k}}"></view><view class="stats-card data-v-582d7c51"><view class="stat-item data-v-582d7c51"><text class="stat-value data-v-582d7c51">{{l}}</text><text class="stat-label data-v-582d7c51">总录音时长</text></view><view class="stat-item data-v-582d7c51"><text class="stat-value data-v-582d7c51">{{m}}</text><text class="stat-label data-v-582d7c51">录音总条数</text></view></view><view class="chart-section data-v-582d7c51"><text class="section-title data-v-582d7c51">时长趋势图</text><view class="chart-container data-v-582d7c51"><canvas canvas-id="trendChart" id="trendChart" class="chart-canvas data-v-582d7c51" style="{{'width:' + n + ';' + ('height:' + o)}}"></canvas></view></view><view class="data-list data-v-582d7c51"><text class="section-title data-v-582d7c51">详细数据</text><view wx:for="{{p}}" wx:for-item="item" wx:key="e" class="list-item data-v-582d7c51"><view class="item-left data-v-582d7c51"><text class="item-date data-v-582d7c51">{{item.a}}</text><text class="item-desc data-v-582d7c51">{{item.b}}</text></view><view class="item-right data-v-582d7c51"><text class="item-duration data-v-582d7c51">{{item.c}}</text><text class="item-count data-v-582d7c51">{{item.d}}</text></view></view></view></scroll-view></view>

View File

@@ -189,19 +189,14 @@
padding: 30rpx;
border-bottom: 1rpx solid #e9ecef;
}
.chart-placeholder.data-v-582d7c51 {
padding: 80rpx 30rpx;
text-align: center;
.chart-container.data-v-582d7c51 {
padding: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
.placeholder-text.data-v-582d7c51 {
.chart-canvas.data-v-582d7c51 {
display: block;
font-size: 48rpx;
margin-bottom: 20rpx;
}
.placeholder-desc.data-v-582d7c51 {
display: block;
font-size: 28rpx;
color: #666666;
}
.list-item.data-v-582d7c51 {
display: flex;