细节完善
This commit is contained in:
@@ -115,7 +115,7 @@ onBeforeUnmount(() => {
|
||||
:size="40"
|
||||
borderColor="#333"
|
||||
/>
|
||||
<text>{{ user.nickName }}</text>
|
||||
<text class="truncate">{{ user.nickName }}</text>
|
||||
<image
|
||||
v-if="heat"
|
||||
:src="`../static/hot${heat}.png`"
|
||||
@@ -273,5 +273,6 @@ onBeforeUnmount(() => {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin: 0 20rpx;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -113,6 +113,7 @@ onMounted(() => {
|
||||
font-size: 26rpx;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
color: #333;
|
||||
}
|
||||
.container > view:last-child {
|
||||
margin-right: 1vw;
|
||||
|
||||
@@ -15,6 +15,7 @@ const props = defineProps({
|
||||
});
|
||||
const amounts = [5, 20, 50, 80, 100, 200];
|
||||
const selected = ref(null);
|
||||
const checked = ref(false);
|
||||
|
||||
const formData = reactive({
|
||||
name: "",
|
||||
@@ -63,6 +64,10 @@ watch(
|
||||
() => props.show,
|
||||
() => {
|
||||
selected.value = null;
|
||||
formData.name = "";
|
||||
formData.account = "";
|
||||
formData.organization = "";
|
||||
formData.suggestion = "";
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -84,11 +89,15 @@ watch(
|
||||
<text>{{ item }}</text>
|
||||
</button>
|
||||
</view>
|
||||
<view>
|
||||
<image src="../static/checked.png" mode="widthFix" />
|
||||
<view
|
||||
@click="checked = !checked"
|
||||
:style="{ marginBottom: !checked ? '20rpx' : '0' }"
|
||||
>
|
||||
<image v-if="checked" src="../static/checked.png" mode="widthFix" />
|
||||
<view v-else></view>
|
||||
<text>我想给建议(选填)</text>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="checked">
|
||||
<view>
|
||||
<text>您的姓名</text>
|
||||
<input v-model="formData.name" />
|
||||
@@ -114,6 +123,7 @@ watch(
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.container > text:first-child {
|
||||
font-weight: 500;
|
||||
@@ -153,6 +163,13 @@ watch(
|
||||
justify-content: flex-start;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.container > view:nth-child(3) > view {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin: 0 10rpx;
|
||||
border: 1rpx solid #e3e3e3;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.container > view:nth-child(3) > image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
|
||||
@@ -43,11 +43,13 @@ const ringText = (ring) => {
|
||||
<view class="container">
|
||||
<view>
|
||||
<view v-for="(b, index) in bars" :key="index">
|
||||
<text v-if="b && b.rate > 0.1">{{ Number(b.rate.toFixed(1)) }}%</text>
|
||||
<text v-if="b && b.rate * 100 > 0.1">
|
||||
{{ Number((b.rate * 100).toFixed(1)) }}%
|
||||
</text>
|
||||
<view
|
||||
:style="{
|
||||
background: barColor(b.rate),
|
||||
height: b.rate * 120 + 'rpx',
|
||||
height: b.rate * 300 + 'rpx',
|
||||
}"
|
||||
>
|
||||
</view>
|
||||
|
||||
@@ -59,13 +59,13 @@ const toEditPage = () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
onShow(async () => {
|
||||
const result = await getPointBookDataAPI();
|
||||
if (result) {
|
||||
days.value = result.total_day || 0;
|
||||
arrows.value = result.total_arrow || 0;
|
||||
}
|
||||
});
|
||||
// onShow(async () => {
|
||||
// const result = await getPointBookDataAPI();
|
||||
// if (result) {
|
||||
// days.value = result.total_day || 0;
|
||||
// arrows.value = result.total_arrow || 0;
|
||||
// }
|
||||
// });
|
||||
onMounted(async () => {
|
||||
const pointBook = uni.getStorageSync("point-book");
|
||||
if (pointBook) {
|
||||
@@ -82,10 +82,10 @@ onMounted(async () => {
|
||||
:bgType="2"
|
||||
bgColor="#F5F5F5"
|
||||
:whiteBackArrow="false"
|
||||
title="计分与技术分析"
|
||||
title="选择参数"
|
||||
>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<!-- <view class="header">
|
||||
<image
|
||||
src="https://static.shelingxingqiu.com/attachment/2025-08-06/dbv8w5ak76hozbfpy2.png"
|
||||
mode="widthFix"
|
||||
@@ -104,7 +104,7 @@ onMounted(async () => {
|
||||
</view>
|
||||
<text>训练箭数</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view>
|
||||
<EditOption
|
||||
:itemIndex="0"
|
||||
@@ -136,7 +136,7 @@ onMounted(async () => {
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{ marginBottom: '20px' }">
|
||||
<SButton :rounded="50" :onClick="toEditPage">开始计分</SButton>
|
||||
<SButton :rounded="50" :onClick="toEditPage">下一步</SButton>
|
||||
<view class="see-more" @click="toListPage">
|
||||
<text>历史计分记录</text>
|
||||
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
|
||||
|
||||
@@ -34,8 +34,10 @@ const onSelect = (index) => {
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 2];
|
||||
uni.navigateBack({
|
||||
delta: 2,
|
||||
delta: currentPage.route === "pages/point-book" ? 1 : 2,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -37,6 +37,7 @@ const data = ref({
|
||||
|
||||
const list = ref([]);
|
||||
const bowTargetSrc = ref("");
|
||||
const heatMapImageSrc = ref(""); // 存储热力图图片地址
|
||||
|
||||
const toListPage = () => {
|
||||
uni.navigateTo({
|
||||
@@ -71,8 +72,18 @@ const loadData = async () => {
|
||||
uni.$emit("update-hot", hot);
|
||||
const rect = await getElementRect(".heat-map");
|
||||
// 延迟绘制热力图确保Canvas准备就绪
|
||||
setTimeout(() => {
|
||||
drawHeatMap(rect.width, rect.height, result2.weekArrows);
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
const imagePath = await drawHeatMap(
|
||||
rect.width,
|
||||
rect.height,
|
||||
result2.weekArrows
|
||||
);
|
||||
heatMapImageSrc.value = imagePath; // 存储生成的图片地址
|
||||
console.log("热力图图片地址:", imagePath);
|
||||
} catch (error) {
|
||||
console.error("生成热力图图片失败:", error);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
||||
@@ -235,6 +246,7 @@ onShareTimeline(() => {
|
||||
:src="bowTargetSrc || '../static/bow-target.png'"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image v-if="heatMapImageSrc" :src="heatMapImageSrc" mode="widthFix" />
|
||||
<canvas canvas-id="heatMapCanvas" style="width: 100%; height: 100%" />
|
||||
</view>
|
||||
<view class="reward" v-if="data.totalArrow">
|
||||
@@ -373,12 +385,15 @@ onShareTimeline(() => {
|
||||
|
||||
.heat-map > image {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.heat-map > canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: -1000px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
|
||||
29
src/util.js
29
src/util.js
@@ -446,11 +446,15 @@ export const calcRing = (bowtargetId, x, y, diameter) => {
|
||||
return 0;
|
||||
};
|
||||
|
||||
// 绘制热力图
|
||||
// 绘制热力图并生成图片
|
||||
export const drawHeatMap = (width, height, arrows) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const ctx = uni.createCanvasContext("heatMapCanvas");
|
||||
|
||||
// ctx.setFillStyle("rgba(255, 255, 255, 0.4)");
|
||||
// ctx.fillRect(0, 0, width, height);
|
||||
|
||||
let minCount = 0;
|
||||
let maxCount = 0;
|
||||
// 计算最大和最小频次
|
||||
@@ -469,7 +473,7 @@ export const drawHeatMap = (width, height, arrows) => {
|
||||
const radius = 20;
|
||||
|
||||
// 根据频次设置同一种颜色的5个深浅度
|
||||
let color = "rgba(255, 232, 143, 0.2)";
|
||||
let color = "rgba(71, 254, 102, 0.2)";
|
||||
// if (point.count >= maxCount * 0.5) {
|
||||
// color = "rgba(255, 232, 143, 0.7)"; // 最深 - 频次5次及以上
|
||||
// } else if (point.count >= maxCount * 0.4) {
|
||||
@@ -489,8 +493,27 @@ export const drawHeatMap = (width, height, arrows) => {
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
ctx.draw();
|
||||
ctx.draw(false, () => {
|
||||
// Canvas绘制完成后生成图片
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: "heatMapCanvas",
|
||||
width: width,
|
||||
height: height,
|
||||
destWidth: width * 2, // 提高图片质量
|
||||
destHeight: height * 2,
|
||||
success: (res) => {
|
||||
console.log("热力图图片生成成功:", res.tempFilePath);
|
||||
resolve(res.tempFilePath);
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error("热力图图片生成失败:", error);
|
||||
reject(error);
|
||||
},
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("绘制热力图失败:", error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user