flat: 暂存
This commit is contained in:
史典卓
167
packageA/pages/post/component/radarMap.vue
Normal file
167
packageA/pages/post/component/radarMap.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view style="display: flex; justify-content: center; padding: 0px 0">
|
||||
<canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
// const src = ref('');
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
// 监听页面初始化
|
||||
onMounted(() => {
|
||||
if (Object.keys(props.value).length > 0) {
|
||||
rawRadarChart();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听 props.value 变化
|
||||
watch(
|
||||
() => props.value,
|
||||
(newVal) => {
|
||||
if (newVal && Object.keys(newVal).length > 0) {
|
||||
const { skill, experience, education, salary, age, location } = newVal.radarChart;
|
||||
const labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
|
||||
const data = [education, age, location, skill, experience, salary].map((item) => item * 0.05);
|
||||
rawRadarChart(labels, data);
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: false } // deep 递归监听对象内部变化
|
||||
);
|
||||
|
||||
function rawRadarChart(labels, data) {
|
||||
const ctx = uni.createCanvasContext('radarCanvas');
|
||||
const width = 80;
|
||||
const height = 80;
|
||||
const centerX = 150;
|
||||
const centerY = 125;
|
||||
// const data = [2, 3.5, 5, 3.5, 5, 3.5]; // 示例数据
|
||||
// const labels = ['火烧', '泡水', '事故', '外观', '部件', '火烧'];
|
||||
const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
|
||||
const maxScore = 5; // 数据最大值
|
||||
|
||||
const angleStep = (2 * Math.PI) / labels.length;
|
||||
|
||||
// 绘制背景多边形
|
||||
ctx.setLineWidth(1);
|
||||
ctx.setStrokeStyle('#F6F6F6');
|
||||
|
||||
//底部圆盘
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
|
||||
ctx.setFillStyle('#FFFFFF');
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
//多边形圈
|
||||
// 多边形圈
|
||||
for (let i = 5; i > 0; i--) {
|
||||
ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
|
||||
ctx.beginPath();
|
||||
labels.forEach((label, index) => {
|
||||
const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
|
||||
const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
|
||||
if (index === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
});
|
||||
ctx.closePath();
|
||||
ctx.stroke(); // 只描边，不填充
|
||||
}
|
||||
|
||||
// //竖线
|
||||
labels.forEach((label, index) => {
|
||||
ctx.setStrokeStyle('#F5F5F5');
|
||||
ctx.setFillStyle('#F5F5F5');
|
||||
ctx.beginPath();
|
||||
|
||||
const x1 = centerX + width * 0.6 * Math.sin(angleStep * index);
|
||||
const y1 = centerY + height * 0.6 * Math.cos(angleStep * index);
|
||||
const x = centerX + width * Math.sin(angleStep * index);
|
||||
const y = centerY + height * Math.cos(angleStep * index);
|
||||
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x, y);
|
||||
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
// 绘制雷达图数据
|
||||
ctx.setStrokeStyle('#256BFA');
|
||||
ctx.setFillStyle('rgba(37,107,250, 0.24)');
|
||||
ctx.setLineWidth(2);
|
||||
ctx.beginPath();
|
||||
const pointList = []; // 记录每个点的位置，等会画小圆点
|
||||
data.forEach((score, index) => {
|
||||
const x = centerX + width * (score / maxScore) * Math.cos(angleStep * index - Math.PI / 2);
|
||||
const y = centerY + height * (score / maxScore) * Math.sin(angleStep * index - Math.PI / 2);
|
||||
pointList.push({ x, y }); // 保存位置
|
||||
if (index === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
} else {
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
});
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
// 绘制每个小圆点
|
||||
ctx.setFillStyle('#256BFA'); // 小圆点颜色（你可以改）
|
||||
pointList.forEach((point) => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI); // 半径 4，可以自己调大小
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
// 绘制标签
|
||||
ctx.setTextAlign('center');
|
||||
|
||||
labels.forEach((label, index) => {
|
||||
const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
|
||||
const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);
|
||||
|
||||
//标题
|
||||
ctx.setFillStyle('#000');
|
||||
ctx.setFontSize(12);
|
||||
ctx.font = 'bold 12px sans-serif';
|
||||
ctx.fillText(label, x, y);
|
||||
|
||||
// ctx.setFillStyle('#A2A4A2');
|
||||
// ctx.font = '12px sans-serif';
|
||||
// ctx.setFontSize(12);
|
||||
// ctx.fillText(data[index], x, y + 16);
|
||||
});
|
||||
|
||||
ctx.draw();
|
||||
|
||||
//转图片
|
||||
|
||||
// uni.canvasToTempFilePath({
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// width: 320,
|
||||
// height: 320,
|
||||
// destWidth: 840,
|
||||
// destHeight: 840,
|
||||
// canvasId: 'radarCanvas',
|
||||
// success: (res) => {
|
||||
// // 在H5平台下，tempFilePath 为 base64
|
||||
// src = res.tempFilePath;
|
||||
// },
|
||||
// });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
158
packageA/pages/post/component/videoPlayer.vue
Normal file
158
packageA/pages/post/component/videoPlayer.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<!-- 小窗播放容器 -->
|
||||
<view
|
||||
v-if="visible"
|
||||
class="mini-player"
|
||||
:style="{
|
||||
left: position.x + 'px',
|
||||
top: position.y + 'px',
|
||||
width: isFullScreen ? '100%' : '300rpx',
|
||||
height: isFullScreen ? '100vh' : '200rpx',
|
||||
}"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchmove="handleTouchMove"
|
||||
@touchend="handleTouchEnd"
|
||||
@touchmove.stop.prevent
|
||||
>
|
||||
<!-- 视频组件 -->
|
||||
<video
|
||||
:src="videoUrl"
|
||||
:controls="true"
|
||||
:show-progress="isFullScreen"
|
||||
:style="{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}"
|
||||
id="myVideo"
|
||||
@play="onPlay"
|
||||
@pause="onPause"
|
||||
></video>
|
||||
|
||||
<!-- 控制栏 -->
|
||||
<view class="controls">
|
||||
<!-- <text @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</text>
|
||||
<text @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏' }}</text> -->
|
||||
<text @click="close">关闭</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
const visible = ref(false);
|
||||
const isPlaying = ref(false);
|
||||
const isFullScreen = ref(false);
|
||||
const videoUrl = ref('');
|
||||
const position = reactive({ x: 20, y: 100 });
|
||||
const videoContext = ref(null);
|
||||
const startPos = reactive({ x: 0, y: 0 });
|
||||
const moving = ref(false);
|
||||
|
||||
// 初始化视频上下文
|
||||
onMounted(() => {
|
||||
videoContext.value = uni.createVideoContext('myVideo');
|
||||
});
|
||||
|
||||
// 触摸开始
|
||||
const handleTouchStart = (e) => {
|
||||
if (isFullScreen.value) return;
|
||||
startPos.x = e.touches[0].clientX - position.x;
|
||||
startPos.y = e.touches[0].clientY - position.y;
|
||||
moving.value = true;
|
||||
};
|
||||
|
||||
// 触摸移动
|
||||
const handleTouchMove = (e) => {
|
||||
if (!moving.value || isFullScreen.value) return;
|
||||
|
||||
const newX = e.touches[0].clientX - startPos.x;
|
||||
const newY = e.touches[0].clientY - startPos.y;
|
||||
|
||||
// 边界检测
|
||||
const maxX = window.innerWidth - 150; // 300rpx换算后的值
|
||||
const maxY = 50 + window.innerHeight - 200;
|
||||
|
||||
position.x = Math.max(0, Math.min(newX, maxX));
|
||||
position.y = Math.max(0, Math.min(newY, maxY));
|
||||
};
|
||||
|
||||
// 触摸结束
|
||||
const handleTouchEnd = () => {
|
||||
moving.value = false;
|
||||
};
|
||||
|
||||
// 播放状态变化
|
||||
const onPlay = () => {
|
||||
isPlaying.value = true;
|
||||
};
|
||||
|
||||
const onPause = () => {
|
||||
isPlaying.value = false;
|
||||
};
|
||||
|
||||
// 切换播放状态
|
||||
const togglePlay = () => {
|
||||
isPlaying.value ? videoContext.value.pause() : videoContext.value.play();
|
||||
};
|
||||
|
||||
// 切换全屏
|
||||
const toggleFullScreen = () => {
|
||||
isFullScreen.value = !isFullScreen.value;
|
||||
if (!isFullScreen.value) {
|
||||
// 退出全屏时恢复原位
|
||||
position.x = 20;
|
||||
position.y = 100;
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭播放器
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
videoContext.value.stop();
|
||||
isPlaying.value = false;
|
||||
isFullScreen.value = false;
|
||||
};
|
||||
|
||||
// 打开播放器方法
|
||||
const open = (url) => {
|
||||
videoUrl.value = url;
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
videoContext.value.play();
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mini-player {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
background: #000;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
/* background: rgba(0, 0, 0, 0.7); */
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.controls text {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user