录音时长趋势图
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -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"]]);
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user