522 lines
14 KiB
Vue
522 lines
14 KiB
Vue
```vue
|
||
<!-- 轮盘（一级圆盘 + 二级左半弧滚动盘）-->
|
||
<template>
|
||
<view class="draw-all">
|
||
<!-- 摄像头 -->
|
||
<view class="carmera">
|
||
<image class="all-size" src="/static/index/watch/camera.png" />
|
||
</view>
|
||
|
||
<!-- 轮子背景 -->
|
||
<view class="roll">
|
||
<image class="all-size" src="/static/index/watch/panzi.png" />
|
||
</view>
|
||
|
||
<!-- 一级转盘：完整圆盘，可旋转、自动校正、选中最左侧 -->
|
||
<view ref="compass" class="compass-container" @touchstart.stop.prevent="onTouchStart"
|
||
@touchmove.prevent.stop="onTouchMove" @touchend.stop.prevent="onTouchEnd"
|
||
@touchcancel.stop.prevent="onTouchEnd" :style="wrapperStyle">
|
||
<view v-for="(item, i) in items" :key="i" class="compass-item" :style="itemStyle(item.baseAngle)">
|
||
<text :class="i===target?`item-label-target`: `item-label`" :style="labelStyle">
|
||
<view
|
||
style="z-index: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||
<image style="width: 50rpx;height: 50rpx;margin-bottom: 0rpx;"
|
||
:src="`/static/index/watch/Wheel/${i}${i===target?1:0}.png`" />
|
||
<view :style="i===target?{color:'#fff'}:{}">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
<image class="targetimge" src="/static/index/watch/bluetarget.png"
|
||
:style="{opacity:i===target?1:0}" />
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 二级转盘：只占左半球（90°~270°），竖向滚动、有边界、吸附、最多 5 个 -->
|
||
<view v-if="items2.length" ref="compass2" class="compass-container second"
|
||
@touchstart.stop.prevent="onTouchStart2" @touchmove.prevent.stop="onTouchMove2"
|
||
@touchend.stop.prevent="onTouchEnd2" @touchcancel.stop.prevent="onTouchEnd2" :style="wrapperStyle2"
|
||
v-show="target">
|
||
<view v-for="(item, i) in items2" :key="i" class="compass-item" :style="itemStyle2(item.baseAngle)">
|
||
<text :class="i===target2?`item-label-second-target`: `item-label-second`" :style="labelStyle2">
|
||
<view
|
||
style="z-index: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||
<image style="width: 70rpx;height: 70rpx;margin-bottom: 0rpx;"
|
||
:src="`/static/index/watch/Wheel/${target}${i}${i===target2?1:0}.png`" />
|
||
<view v-show="target!==-1" :style="i===target2?{color:'#0E86EA'}:{}">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="" v-show="target===5">
|
||
<joystick @movecard="" :movebottom="44" :moveleft="-5" :pao="false" :notext="true" />
|
||
</view>
|
||
|
||
<!-- 一级手势蒙层 -->
|
||
<view v-if="dragging==='first'" class="gesture-mask" @touchmove.stop.prevent="onTouchMove"
|
||
@touchend.stop.prevent="onTouchEnd" @touchcancel.stop.prevent="onTouchEnd" />
|
||
<!-- 二级手势蒙层 -->
|
||
<view v-if="dragging==='second'" class="gesture-mask" @touchmove.stop.prevent="onTouchMove2"
|
||
@touchend.stop.prevent="onTouchEnd2" @touchcancel.stop.prevent="onTouchEnd2" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, computed, nextTick, watch, onBeforeUnmount } from 'vue'
|
||
import joystick from '@/component/public/newgame/joysticknew.vue';
|
||
|
||
const emit = defineEmits([])
|
||
const props = defineProps({})
|
||
|
||
/* ===================== 一级：完整圆盘 ===================== */
|
||
// 10 个预设方向文字
|
||
const labels = ['开机', '静音', '对讲', '截屏', '录制', '方位', '清晰度', '分屏', '翻转', '告警']
|
||
const count = labels.length
|
||
|
||
// 一级：每个文字对应的初始角度（360 等分）
|
||
const items = reactive(
|
||
labels.map((label, idx) => ({
|
||
label,
|
||
baseAngle: (360 / count) * idx
|
||
}))
|
||
)
|
||
// 恢复定时器（最简单的实现）
|
||
let restoreTimer : number | null = null
|
||
let restoreTimer2 : number | null = null
|
||
const RESTORE_MS = 300 // 0.3s
|
||
// 当前累积旋转角度（一级）
|
||
const currentAngle = ref(0)
|
||
let startAngle = 0
|
||
const dragging = ref<null | 'first' | 'second'>(null)
|
||
|
||
let idleTimer : number | null = null
|
||
function armIdleFinish(handler : () => void, ms = 160) {
|
||
if (idleTimer) clearTimeout(idleTimer)
|
||
idleTimer = setTimeout(() => {
|
||
if (dragging.value) handler()
|
||
}, ms) as unknown as number
|
||
}
|
||
function clearIdle() {
|
||
if (idleTimer) {
|
||
clearTimeout(idleTimer)
|
||
idleTimer = null
|
||
}
|
||
}
|
||
// 圆心坐标（用于一级 atan2）
|
||
const center = reactive({ x: 0, y: 0 })
|
||
|
||
// 获取圆心（以一级容器为基准）
|
||
onMounted(async () => {
|
||
await nextTick()
|
||
uni
|
||
.createSelectorQuery()
|
||
.select('.compass-container')
|
||
.boundingClientRect(rect => {
|
||
if (rect) {
|
||
center.x = rect.left + rect.width / 2
|
||
center.y = rect.top + rect.height / 2
|
||
}
|
||
})
|
||
.exec()
|
||
})
|
||
|
||
// 容器样式（一级）
|
||
const transitioning = ref(false)
|
||
const wrapperStyle = computed(() => ({
|
||
transform: `rotate(${currentAngle.value}deg)`,
|
||
transition: transitioning.value ? 'transform 0.3s ease-out' : 'none'
|
||
}))
|
||
|
||
// 单项样式（一级）
|
||
function itemStyle(baseAngle : number) {
|
||
const radius = 190
|
||
const rad = (baseAngle * Math.PI) / 180
|
||
const x = radius * Math.cos(rad)
|
||
const y = radius * Math.sin(rad)
|
||
return { transform: `translate(${x}px, ${y}px)` }
|
||
}
|
||
|
||
// 标签正立（一级）
|
||
const labelStyle = computed(() => ({
|
||
transform: `rotate(${-currentAngle.value}deg)`
|
||
}))
|
||
|
||
// atan2 角度（一级）
|
||
function getTouchAngle(e : TouchEvent) {
|
||
const t = e.touches[0]
|
||
const dx = t.clientX - center.x
|
||
const dy = t.clientY - center.y
|
||
return ((Math.atan2(dy, dx) * 180) / Math.PI) * 2 // 灵敏度×2
|
||
}
|
||
function clearRestoreTimer() {
|
||
if (restoreTimer !== null) {
|
||
clearTimeout(restoreTimer)
|
||
restoreTimer = null
|
||
}
|
||
}
|
||
// 选中最左侧索引（一级）
|
||
const target = ref(5)
|
||
const saveindex = ref(-1)
|
||
function startRestoreTimer() {
|
||
clearTimeout(restoreTimer)
|
||
restoreTimer = setTimeout(() => {
|
||
if (target.value === -1) {
|
||
target.value = saveindex.value
|
||
}
|
||
}, 300)
|
||
}
|
||
function startRestoreTimer2() {
|
||
clearTimeout(restoreTimer2)
|
||
restoreTimer2 = setTimeout(() => {
|
||
if (target2.value === -1) {
|
||
target2.value = saveindex2.value
|
||
}
|
||
}, 300)
|
||
}
|
||
function onTouchStart(e : TouchEvent) {
|
||
saveindex.value = target.value
|
||
target.value = -1
|
||
transitioning.value = false
|
||
startAngle = getTouchAngle(e) - currentAngle.value
|
||
dragging.value = 'first'
|
||
startRestoreTimer()
|
||
}
|
||
function onTouchMove(e : TouchEvent) {
|
||
const angle = getTouchAngle(e)
|
||
currentAngle.value = angle - startAngle
|
||
armIdleFinish(onTouchEnd)
|
||
// 重启恢复定时器：0.3s 内没有新的 move 就恢复 saveindex
|
||
startRestoreTimer()
|
||
}
|
||
function getLeftmostIndex() {
|
||
let minDiff = Infinity
|
||
let idx = 0
|
||
items.forEach((item, i) => {
|
||
let real = (item.baseAngle + currentAngle.value) % 360
|
||
if (real < 0) real += 360
|
||
const diff = Math.abs(real - 180)
|
||
if (diff < minDiff) {
|
||
minDiff = diff
|
||
idx = i
|
||
}
|
||
})
|
||
|
||
return idx
|
||
}
|
||
function onTouchEnd() {
|
||
// 结束时先清定时器，避免同时恢复和吸附冲突
|
||
clearRestoreTimer()
|
||
|
||
const step = 360 / count
|
||
const raw = currentAngle.value
|
||
const nearest = Math.round(raw / step) * step
|
||
transitioning.value = true
|
||
currentAngle.value = nearest
|
||
const leftIndex = getLeftmostIndex()
|
||
target.value = leftIndex
|
||
// console.log("???", target.value)
|
||
setTimeout(() => (transitioning.value = false), 300)
|
||
dragging.value = null
|
||
}
|
||
onBeforeUnmount(() => {
|
||
if (restoreTimer !== null) clearTimeout(restoreTimer)
|
||
if (restoreTimer2 !== null) clearTimeout(restoreTimer2)
|
||
clearIdle()
|
||
})
|
||
/* ===================== 二级：左半弧竖向滚动盘 ===================== */
|
||
// 二级映射（每组最多 5 个）
|
||
const secondMap : Record<number, string[]> = {
|
||
0: [],
|
||
1: [],
|
||
2: [],
|
||
3: [],
|
||
4: [],
|
||
5: [],
|
||
6: ['超清', '流畅', '自动'],
|
||
7: ['180°全景', '四分屏', '360°全景', '全景拉伸', '原图'],
|
||
8: ['上下翻转', '关闭', '左右翻转'],
|
||
9: []
|
||
}
|
||
|
||
// 二级数据与状态
|
||
const items2 = reactive<{ label : string; baseAngle : number }[]>([])
|
||
const target2 = ref(0)
|
||
|
||
// 二级：半弧滚动偏移角（只允许在 [-Δ, +Δ]）
|
||
const currentOffset2 = ref(0)
|
||
const step2 = ref(0) // Δ = 180 / (n + 1)
|
||
const transitioning2 = ref(false)
|
||
|
||
// 竖向滚动灵敏度（度/像素），可按设备调节
|
||
const DEG_PER_PX = 0.5
|
||
|
||
// 容器样式（二级：整体绕圆心微旋转 currentOffset2）
|
||
const wrapperStyle2 = computed(() => ({
|
||
transform: `rotate(${currentOffset2.value}deg)`,
|
||
transition: transitioning2.value ? 'transform 0.25s ease-out' : 'none'
|
||
}))
|
||
|
||
// 标签正立（二级）
|
||
const labelStyle2 = computed(() => ({
|
||
transform: `rotate(${-currentOffset2.value}deg)`
|
||
}))
|
||
|
||
// 单项样式（二级：布局在左半弧 90°~270°）
|
||
function itemStyle2(baseAngle : number) {
|
||
const radius = 240
|
||
const rad = (baseAngle * Math.PI) / 180
|
||
const x = radius * Math.cos(rad)
|
||
const y = radius * Math.sin(rad)
|
||
return { transform: `translate(${x}px, ${y}px)` }
|
||
}
|
||
|
||
// 固定角度位置（左半球从上到下）
|
||
const presetAngles = [135, 157.5, 180, 202.5, 225]
|
||
|
||
// 优先顺序：中间 → 上 → 下 → 上上 → 下下
|
||
function getBalancedAngles(n : number) : number[] {
|
||
const order = [2, 1, 3, 0, 4]
|
||
return order.slice(0, n).map(i => presetAngles[i])
|
||
}
|
||
const minOffset2 = ref(0);
|
||
const maxOffset2 = ref(0);
|
||
// 替换原来的 rebuildSecondByFirstIndex：
|
||
function rebuildSecondByFirstIndex(firstIdx : number) {
|
||
const list = (secondMap[firstIdx] || []).slice(0, 5)
|
||
const angles = getBalancedAngles(list.length)
|
||
minOffset2.value = 180 - Math.max(...angles)
|
||
maxOffset2.value = 180 - Math.min(...angles)
|
||
items2.splice(0, items2.length)
|
||
if (!list.length) {
|
||
currentOffset2.value = 0
|
||
step2.value = 0
|
||
target2.value = -1
|
||
return
|
||
}
|
||
|
||
for (let i = 0; i < list.length; i++) {
|
||
items2.push({
|
||
label: list[i],
|
||
baseAngle: angles[i]
|
||
})
|
||
}
|
||
|
||
currentOffset2.value = 0
|
||
step2.value = 22.5 // 每个角度偏移
|
||
nextTick(() => {
|
||
target2.value = getLeftmostIndex2()
|
||
})
|
||
}
|
||
// 获取二级“最左侧”（最靠近 180°）的索引
|
||
function getLeftmostIndex2() {
|
||
if (!items2.length) return -1
|
||
let minDiff = Infinity
|
||
let idx = 0
|
||
items2.forEach((item, i) => {
|
||
let real = (item.baseAngle + currentOffset2.value) % 360
|
||
if (real < 0) real += 360
|
||
const diff = Math.abs(real - 180)
|
||
if (diff < minDiff) {
|
||
minDiff = diff
|
||
idx = i
|
||
}
|
||
})
|
||
return idx
|
||
}
|
||
|
||
// 监听一级 target，联动二级
|
||
watch(
|
||
() => target.value,
|
||
(idx) => {
|
||
if (idx >= 0) rebuildSecondByFirstIndex(idx)
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
/* ---- 二级手势：竖向滚动到极限距离（[-Δ, +Δ]），松手吸附到 Δ 的整数倍 ---- */
|
||
let startY2 = 0
|
||
let startOffset2 = 0
|
||
|
||
function clamp2(val : number) {
|
||
return Math.max(minOffset2.value, Math.min(maxOffset2.value, val))
|
||
}
|
||
const saveindex2 =ref(-1)
|
||
function onTouchStart2(e : TouchEvent) {
|
||
saveindex2.value = target2.value
|
||
const t = e.touches[0]
|
||
startY2 = t.clientY
|
||
startOffset2 = currentOffset2.value
|
||
transitioning2.value = false
|
||
target2.value = -1
|
||
dragging.value = 'second'
|
||
startRestoreTimer2()
|
||
}
|
||
|
||
function onTouchMove2(e : TouchEvent) {
|
||
if (!items2.length) return
|
||
const t = e.touches[0]
|
||
const dy = t.clientY - startY2
|
||
const Δ = step2.value || 1
|
||
// 上滑为正角度：使用 -dy
|
||
const raw = startOffset2 + (-dy) * DEG_PER_PX
|
||
currentOffset2.value = clamp2(raw, -Δ, +Δ)
|
||
armIdleFinish(onTouchEnd2)
|
||
startRestoreTimer2()
|
||
}
|
||
|
||
function onTouchEnd2() {
|
||
if (!items2.length) return
|
||
const Δ = step2.value || 1
|
||
// 吸附到 Δ 的整数倍，并限制在 [-Δ, +Δ]
|
||
const snapped = Math.round(currentOffset2.value / Δ) * Δ
|
||
transitioning2.value = true
|
||
currentOffset2.value = clamp2(snapped, -Δ, +Δ)
|
||
|
||
// 选中靠近 180° 的项
|
||
target2.value = getLeftmostIndex2()
|
||
setTimeout(() => (transitioning2.value = false), 250)
|
||
dragging.value = null
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.draw-all {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #eff0f4;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.carmera {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 250rpx;
|
||
height: 600rpx;
|
||
width: 200rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.roll {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0rpx;
|
||
height: 1300rpx;
|
||
width: 650rpx;
|
||
}
|
||
}
|
||
|
||
.compass-container {
|
||
width: 380px;
|
||
height: 380px;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
right: -60%;
|
||
transform: translateY(-60%);
|
||
bottom: 270rpx;
|
||
margin: auto;
|
||
touch-action: none;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.compass-item {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: -50px 0 0 -50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.item-label {
|
||
font-size: 25rpx;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(to bottom, #e6e7ed, #f4f5f7);
|
||
border: 2rpx solid #fff;
|
||
position: relative;
|
||
}
|
||
|
||
.item-label-target {
|
||
font-size: 25rpx;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(to bottom, #e6e7ed, #f4f5f7);
|
||
position: relative;
|
||
}
|
||
|
||
.item-label-second {
|
||
font-size: 25rpx;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.item-label-second-target {
|
||
font-size: 25rpx;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.all-size {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.targetimge {
|
||
width: 150rpx;
|
||
height: 130rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
transition: opacity 0.8s ease;
|
||
}
|
||
|
||
/* 二级容器放在一级之下，尺寸更大一圈（视觉在后面） */
|
||
.compass-container.second {
|
||
width: 480px;
|
||
height: 480px;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
right: -70%;
|
||
transform: translateY(-70%);
|
||
bottom: 172rpx;
|
||
margin: auto;
|
||
touch-action: none;
|
||
z-index: 1; // 在一级之下
|
||
}
|
||
|
||
.gesture-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 9999;
|
||
background: transparent;
|
||
/* 或 rgba(0,0,0,0.001) */
|
||
}
|
||
</style>
|
||
``` |