From d9155e711e9d89be94ea85b9d2fb71496c6981f1 Mon Sep 17 00:00:00 2001 From: suixy <2277317060@qq.com> Date: Tue, 25 Nov 2025 14:50:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=9A=9C=E7=A2=8D=E7=89=A9?= =?UTF-8?q?=E4=BF=9D=E5=AD=98=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ruler.vue | 33 ++++++- src/views/index.vue | 199 +++++++++++++++++++-------------------- 2 files changed, 130 insertions(+), 102 deletions(-) diff --git a/src/components/ruler.vue b/src/components/ruler.vue index e5a9404..13485af 100644 --- a/src/components/ruler.vue +++ b/src/components/ruler.vue @@ -28,7 +28,8 @@ -
+
+ {{ differenceValue }}
{ + console.log(differenceValue.value) + const scale = props.height / (differenceValue.value || props.height) + let centerPercent = 0 + if (scale === 1) { + centerPercent = 50 + } else { + centerPercent = (props.boxPos.y / props.height) * 100 + } + + + return { + backgroundSize: `100% ${589 * scale}px`, + backgroundPosition: `center ${centerPercent}%` + } +}) watch(() => JSON.stringify(props.boxPos), (newVal, oldVal) => { getBoxPos() getDistanceAndZoom() @@ -120,8 +137,11 @@ watch(() => JSON.stringify(props.boxPos), (newVal, oldVal) => { zoomScale(props.boxPos.y, 1) getBoxPos() } else { + differenceValue.value = 0 zoomScale(props.boxPos.y, 0) } + } else { + differenceValue.value = 0 } if (props.dotIndex >= 0) { getLineData('head', `dot${props.dotIndex + 1}`) @@ -149,8 +169,12 @@ watch(() => JSON.stringify([props.dotIndex, props.dotIndex1]), (newVal, oldVal) zoomScale(props.boxPos.y, 1) getBoxPos() } else { + differenceValue.value = 0 zoomScale(props.boxPos.y, 0) } + } else { + differenceValue.value = 0 + } if (props.dotIndex >= 0) { getLineData('head', `dot${props.dotIndex + 1}`) @@ -249,6 +273,7 @@ function getAxisRange() { return {min: Math.min(...values), max: Math.max(...values)} } +const differenceValue = ref(0) const leftTicks = computed(() => { const arr = [] @@ -276,7 +301,7 @@ const leftTicks = computed(() => { let startValue = centerValue.value - half * step let endValue = centerValue.value + half * step - console.log(endValue - startValue) + differenceValue.value = endValue - startValue if (startValue < 0) { endValue += -startValue @@ -336,6 +361,7 @@ const ticks = computed(() => { height: 100%; background-color: #000; + .left { position: absolute; width: 40px; @@ -440,6 +466,9 @@ const ticks = computed(() => { background-color: #666; top: 0; left: 40px; + //background-image: url("@/assets/car.png"); + background-repeat: no-repeat; + background-size: 100% 100%; .dot { width: 20px; diff --git a/src/views/index.vue b/src/views/index.vue index 320ae56..f3d0f4e 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1141,7 +1141,6 @@ const toAdmin = () => { // 启动雷达 const StartWorkBtn = () => { StartWork() - tableData1.value = [] } // 停止雷达 const StopWorkBtn = () => { @@ -2141,104 +2140,104 @@ const saveAreaPoint = () => { }) } const readLocalStorageData = () => { - // tableData1.value = [ - // {"Lon": 119.68158733286303, "Lat": 25.929632812633325, "Status": 0}, - // {"Lon": 119.68226426875183, "Lat": 25.930447575308917, "Status": 2}, - // {"Lon": 119.68096665515995, "Lat": 25.92785426333515, "Status": 0}, - // {"Lon": 119.68278645438862, "Lat": 25.931322676440597, "Status": 2}, - // {"Lon": 119.6812308665526, "Lat": 25.92833823728329, "Status": 0}, - // {"Lon": 119.68318456612818, "Lat": 25.93195533358216, "Status": 2}, - // {"Lon": 119.68036755668337, "Lat": 25.926887965282527, "Status": 0}, - // {"Lon": 119.68192384565978, "Lat": 25.92998287455529, "Status": 2}, - // {"Lon": 119.68250211437338, "Lat": 25.930826764153685, "Status": 0}, - // {"Lon": 119.68173244334253, "Lat": 25.92945659218239, "Status": 2}, - // {"Lon": 119.68295065558712, "Lat": 25.93161275117524, "Status": 0}, - // {"Lon": 119.68105985472717, "Lat": 25.92803513687375, "Status": 2}, - // {"Lon": 119.68341837732858, "Lat": 25.932375885682826, "Status": 0}, - // {"Lon": 119.68064788438357, "Lat": 25.927279242277973, "Status": 2}, - // {"Lon": 119.68209525287522, "Lat": 25.93029711876587, "Status": 0}, - // {"Lon": 119.68265453337758, "Lat": 25.931034055557433, "Status": 2}, - // {"Lon": 119.68139455255315, "Lat": 25.928622731163285, "Status": 0}, - // {"Lon": 119.6832675327453, "Lat": 25.93210835721747, "Status": 2}, - // {"Lon": 119.68018322877646, "Lat": 25.92664065235554, "Status": 0}, - // {"Lon": 119.68150073637315, "Lat": 25.929251557521317, "Status": 2}, - // {"Lon": 119.68237556552133, "Lat": 25.93061626521737, "Status": 0}, - // {"Lon": 119.68289878364453, "Lat": 25.93148441687782, "Status": 2}, - // {"Lon": 119.68087065652437, "Lat": 25.927625231566176, "Status": 0}, - // {"Lon": 119.68183456587315, "Lat": 25.92978651727634, "Status": 2}, - // {"Lon": 119.68241653211357, "Lat": 25.93071232314118, "Status": 0}, - // {"Lon": 119.68309635565385, "Lat": 25.93180587653187, "Status": 2}, - // {"Lon": 119.68114278553872, "Lat": 25.92820365476537, "Status": 0}, - // {"Lon": 119.68055145252318, "Lat": 25.92715353326578, "Status": 2}, - // {"Lon": 119.6821865443212, "Lat": 25.93045772867326, "Status": 0}, - // {"Lon": 119.68271563257338, "Lat": 25.93115482282882, "Status": 2}, - // {"Lon": 119.6816754333553, "Lat": 25.92959862621233, "Status": 0}, - // {"Lon": 119.68334676542355, "Lat": 25.932253615880354, "Status": 2}, - // {"Lon": 119.68027543254352, "Lat": 25.92676543256789, "Status": 0}, - // {"Lon": 119.68198765432156, "Lat": 25.93012345678901, "Status": 2}, - // {"Lon": 119.68256789012345, "Lat": 25.93098765432156, "Status": 0}, - // {"Lon": 119.68143215432156, "Lat": 25.92876543215678, "Status": 2}, - // {"Lon": 119.6829123456789, "Lat": 25.9315432156789, "Status": 0}, - // {"Lon": 119.68076543215678, "Lat": 25.92743215678901, "Status": 2}, - // {"Lon": 119.68226543215678, "Lat": 25.93034567890123, "Status": 0}, - // {"Lon": 119.6831123456789, "Lat": 25.93198765432156, "Status": 2}, - // {"Lon": 119.68126543215678, "Lat": 25.92843215678901, "Status": 0}, - // {"Lon": 119.68046543215678, "Lat": 25.92698765432156, "Status": 2}, - // {"Lon": 119.68186543215678, "Lat": 25.92984567890123, "Status": 0}, - // {"Lon": 119.68266543215678, "Lat": 25.93114567890123, "Status": 2}, - // {"Lon": 119.68346543215678, "Lat": 25.93244567890123, "Status": 0}, - // {"Lon": 119.68066543215678, "Lat": 25.92734567890123, "Status": 2}, - // {"Lon": 119.68166543215678, "Lat": 25.92944567890123, "Status": 0}, - // {"Lon": 119.68246543215678, "Lat": 25.93074567890123, "Status": 2}, - // {"Lon": 119.68306543215678, "Lat": 25.93184567890123, "Status": 0}, - // {"Lon": 119.68096543215678, "Lat": 25.92774567890123, "Status": 2}, - // {"Lon": 119.68216543215678, "Lat": 25.93024567890123, "Status": 0}, - // {"Lon": 119.68286543215678, "Lat": 25.93134567890123, "Status": 2}, - // {"Lon": 119.68136543215678, "Lat": 25.92864567890123, "Status": 0}, - // {"Lon": 119.68036543215678, "Lat": 25.92684567890123, "Status": 2}, - // {"Lon": 119.68176543215678, "Lat": 25.92964567890123, "Status": 0}, - // {"Lon": 119.68256543215678, "Lat": 25.93084567890123, "Status": 2}, - // {"Lon": 119.68326543215678, "Lat": 25.93204567890123, "Status": 0}, - // {"Lon": 119.68106543215678, "Lat": 25.92794567890123, "Status": 2}, - // {"Lon": 119.68236543215678, "Lat": 25.93054567890123, "Status": 0}, - // {"Lon": 119.68296543215678, "Lat": 25.93164567890123, "Status": 2}, - // {"Lon": 119.68156543215678, "Lat": 25.92914567890123, "Status": 0}, - // {"Lon": 119.68086543215678, "Lat": 25.92764567890123, "Status": 2}, - // {"Lon": 119.68206543215678, "Lat": 25.92994567890123, "Status": 0}, - // {"Lon": 119.68276543215678, "Lat": 25.93124567890123, "Status": 2}, - // {"Lon": 119.68336543215678, "Lat": 25.93234567890123, "Status": 0}, - // {"Lon": 119.68116543215678, "Lat": 25.92824567890123, "Status": 2}, - // {"Lon": 119.68056543215678, "Lat": 25.92704567890123, "Status": 0}, - // {"Lon": 119.68196543215678, "Lat": 25.93004567890123, "Status": 2}, - // {"Lon": 119.68266543215678, "Lat": 25.93094567890123, "Status": 0}, - // {"Lon": 119.68316543215678, "Lat": 25.93174567890123, "Status": 2}, - // {"Lon": 119.68066543215678, "Lat": 25.92724567890123, "Status": 0}, - // {"Lon": 119.68146543215678, "Lat": 25.92884567890123, "Status": 2}, - // {"Lon": 119.68226543215678, "Lat": 25.93044567890123, "Status": 0}, - // {"Lon": 119.68286543215678, "Lat": 25.93144567890123, "Status": 2}, - // {"Lon": 119.68356543215678, "Lat": 25.93254567890123, "Status": 0}, - // {"Lon": 119.68076543215678, "Lat": 25.92754567890123, "Status": 2}, - // {"Lon": 119.68136543215678, "Lat": 25.92854567890123, "Status": 0}, - // {"Lon": 119.68216543215678, "Lat": 25.93034567890123, "Status": 2}, - // {"Lon": 119.68296543215678, "Lat": 25.93174567890123, "Status": 0}, - // {"Lon": 119.68166543215678, "Lat": 25.92934567890123, "Status": 2}, - // {"Lon": 119.68046543215678, "Lat": 25.92694567890123, "Status": 0}, - // {"Lon": 119.68186543215678, "Lat": 25.92974567890123, "Status": 2}, - // {"Lon": 119.68246543215678, "Lat": 25.93064567890123, "Status": 0}, - // {"Lon": 119.68306543215678, "Lat": 25.93154567890123, "Status": 2}, - // {"Lon": 119.68326543215678, "Lat": 25.93214567890123, "Status": 0}, - // {"Lon": 119.68106543215678, "Lat": 25.92784567890123, "Status": 2}, - // {"Lon": 119.68236543215678, "Lat": 25.93064567890123, "Status": 0}, - // {"Lon": 119.68276543215678, "Lat": 25.93114567890123, "Status": 2}, - // {"Lon": 119.68126543215678, "Lat": 25.92834567890123, "Status": 0}, - // {"Lon": 119.68026543215678, "Lat": 25.92664567890123, "Status": 2} - // ].map((e, i) => { - // return { - // ...e, - // Strength: Math.ceil(Math.random() * 200), - // index: i - // } - // }) + tableData1.value = [ + {"Lon": 119.68158733286303, "Lat": 25.929632812633325, "Status": 0}, + {"Lon": 119.68226426875183, "Lat": 25.930447575308917, "Status": 2}, + {"Lon": 119.68096665515995, "Lat": 25.92785426333515, "Status": 0}, + {"Lon": 119.68278645438862, "Lat": 25.931322676440597, "Status": 2}, + {"Lon": 119.6812308665526, "Lat": 25.92833823728329, "Status": 0}, + {"Lon": 119.68318456612818, "Lat": 25.93195533358216, "Status": 2}, + {"Lon": 119.68036755668337, "Lat": 25.926887965282527, "Status": 0}, + {"Lon": 119.68192384565978, "Lat": 25.92998287455529, "Status": 2}, + {"Lon": 119.68250211437338, "Lat": 25.930826764153685, "Status": 0}, + {"Lon": 119.68173244334253, "Lat": 25.92945659218239, "Status": 2}, + {"Lon": 119.68295065558712, "Lat": 25.93161275117524, "Status": 0}, + {"Lon": 119.68105985472717, "Lat": 25.92803513687375, "Status": 2}, + {"Lon": 119.68341837732858, "Lat": 25.932375885682826, "Status": 0}, + {"Lon": 119.68064788438357, "Lat": 25.927279242277973, "Status": 2}, + {"Lon": 119.68209525287522, "Lat": 25.93029711876587, "Status": 0}, + {"Lon": 119.68265453337758, "Lat": 25.931034055557433, "Status": 2}, + {"Lon": 119.68139455255315, "Lat": 25.928622731163285, "Status": 0}, + {"Lon": 119.6832675327453, "Lat": 25.93210835721747, "Status": 2}, + {"Lon": 119.68018322877646, "Lat": 25.92664065235554, "Status": 0}, + {"Lon": 119.68150073637315, "Lat": 25.929251557521317, "Status": 2}, + {"Lon": 119.68237556552133, "Lat": 25.93061626521737, "Status": 0}, + {"Lon": 119.68289878364453, "Lat": 25.93148441687782, "Status": 2}, + {"Lon": 119.68087065652437, "Lat": 25.927625231566176, "Status": 0}, + {"Lon": 119.68183456587315, "Lat": 25.92978651727634, "Status": 2}, + {"Lon": 119.68241653211357, "Lat": 25.93071232314118, "Status": 0}, + {"Lon": 119.68309635565385, "Lat": 25.93180587653187, "Status": 2}, + {"Lon": 119.68114278553872, "Lat": 25.92820365476537, "Status": 0}, + {"Lon": 119.68055145252318, "Lat": 25.92715353326578, "Status": 2}, + {"Lon": 119.6821865443212, "Lat": 25.93045772867326, "Status": 0}, + {"Lon": 119.68271563257338, "Lat": 25.93115482282882, "Status": 2}, + {"Lon": 119.6816754333553, "Lat": 25.92959862621233, "Status": 0}, + {"Lon": 119.68334676542355, "Lat": 25.932253615880354, "Status": 2}, + {"Lon": 119.68027543254352, "Lat": 25.92676543256789, "Status": 0}, + {"Lon": 119.68198765432156, "Lat": 25.93012345678901, "Status": 2}, + {"Lon": 119.68256789012345, "Lat": 25.93098765432156, "Status": 0}, + {"Lon": 119.68143215432156, "Lat": 25.92876543215678, "Status": 2}, + {"Lon": 119.6829123456789, "Lat": 25.9315432156789, "Status": 0}, + {"Lon": 119.68076543215678, "Lat": 25.92743215678901, "Status": 2}, + {"Lon": 119.68226543215678, "Lat": 25.93034567890123, "Status": 0}, + {"Lon": 119.6831123456789, "Lat": 25.93198765432156, "Status": 2}, + {"Lon": 119.68126543215678, "Lat": 25.92843215678901, "Status": 0}, + {"Lon": 119.68046543215678, "Lat": 25.92698765432156, "Status": 2}, + {"Lon": 119.68186543215678, "Lat": 25.92984567890123, "Status": 0}, + {"Lon": 119.68266543215678, "Lat": 25.93114567890123, "Status": 2}, + {"Lon": 119.68346543215678, "Lat": 25.93244567890123, "Status": 0}, + {"Lon": 119.68066543215678, "Lat": 25.92734567890123, "Status": 2}, + {"Lon": 119.68166543215678, "Lat": 25.92944567890123, "Status": 0}, + {"Lon": 119.68246543215678, "Lat": 25.93074567890123, "Status": 2}, + {"Lon": 119.68306543215678, "Lat": 25.93184567890123, "Status": 0}, + {"Lon": 119.68096543215678, "Lat": 25.92774567890123, "Status": 2}, + {"Lon": 119.68216543215678, "Lat": 25.93024567890123, "Status": 0}, + {"Lon": 119.68286543215678, "Lat": 25.93134567890123, "Status": 2}, + {"Lon": 119.68136543215678, "Lat": 25.92864567890123, "Status": 0}, + {"Lon": 119.68036543215678, "Lat": 25.92684567890123, "Status": 2}, + {"Lon": 119.68176543215678, "Lat": 25.92964567890123, "Status": 0}, + {"Lon": 119.68256543215678, "Lat": 25.93084567890123, "Status": 2}, + {"Lon": 119.68326543215678, "Lat": 25.93204567890123, "Status": 0}, + {"Lon": 119.68106543215678, "Lat": 25.92794567890123, "Status": 2}, + {"Lon": 119.68236543215678, "Lat": 25.93054567890123, "Status": 0}, + {"Lon": 119.68296543215678, "Lat": 25.93164567890123, "Status": 2}, + {"Lon": 119.68156543215678, "Lat": 25.92914567890123, "Status": 0}, + {"Lon": 119.68086543215678, "Lat": 25.92764567890123, "Status": 2}, + {"Lon": 119.68206543215678, "Lat": 25.92994567890123, "Status": 0}, + {"Lon": 119.68276543215678, "Lat": 25.93124567890123, "Status": 2}, + {"Lon": 119.68336543215678, "Lat": 25.93234567890123, "Status": 0}, + {"Lon": 119.68116543215678, "Lat": 25.92824567890123, "Status": 2}, + {"Lon": 119.68056543215678, "Lat": 25.92704567890123, "Status": 0}, + {"Lon": 119.68196543215678, "Lat": 25.93004567890123, "Status": 2}, + {"Lon": 119.68266543215678, "Lat": 25.93094567890123, "Status": 0}, + {"Lon": 119.68316543215678, "Lat": 25.93174567890123, "Status": 2}, + {"Lon": 119.68066543215678, "Lat": 25.92724567890123, "Status": 0}, + {"Lon": 119.68146543215678, "Lat": 25.92884567890123, "Status": 2}, + {"Lon": 119.68226543215678, "Lat": 25.93044567890123, "Status": 0}, + {"Lon": 119.68286543215678, "Lat": 25.93144567890123, "Status": 2}, + {"Lon": 119.68356543215678, "Lat": 25.93254567890123, "Status": 0}, + {"Lon": 119.68076543215678, "Lat": 25.92754567890123, "Status": 2}, + {"Lon": 119.68136543215678, "Lat": 25.92854567890123, "Status": 0}, + {"Lon": 119.68216543215678, "Lat": 25.93034567890123, "Status": 2}, + {"Lon": 119.68296543215678, "Lat": 25.93174567890123, "Status": 0}, + {"Lon": 119.68166543215678, "Lat": 25.92934567890123, "Status": 2}, + {"Lon": 119.68046543215678, "Lat": 25.92694567890123, "Status": 0}, + {"Lon": 119.68186543215678, "Lat": 25.92974567890123, "Status": 2}, + {"Lon": 119.68246543215678, "Lat": 25.93064567890123, "Status": 0}, + {"Lon": 119.68306543215678, "Lat": 25.93154567890123, "Status": 2}, + {"Lon": 119.68326543215678, "Lat": 25.93214567890123, "Status": 0}, + {"Lon": 119.68106543215678, "Lat": 25.92784567890123, "Status": 2}, + {"Lon": 119.68236543215678, "Lat": 25.93064567890123, "Status": 0}, + {"Lon": 119.68276543215678, "Lat": 25.93114567890123, "Status": 2}, + {"Lon": 119.68126543215678, "Lat": 25.92834567890123, "Status": 0}, + {"Lon": 119.68026543215678, "Lat": 25.92664567890123, "Status": 2} + ].map((e, i) => { + return { + ...e, + Strength: Math.ceil(Math.random() * 200), + index: i + } + }) let areaData = localStorage.getItem('areaData') @@ -2315,7 +2314,7 @@ onMounted(() => { getOption() getShildTableList() getObstacleList() - // testFun() + testFun() }) const testFun = () => { let areaData111 = [