From e79132db4d057b682d34a300395e43aff40fb660 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Wed, 20 Aug 2025 17:24:13 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=89=93=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build.js | 14 + package.json | 21 +- src/components/ruler.vue | 64 +- src/views/index.vue | 131 ++- vite.config.js | 2 +- yarn.lock | 2291 +++++++++++++++++++++++++++++++++++++- 6 files changed, 2507 insertions(+), 16 deletions(-) create mode 100644 build.js diff --git a/build.js b/build.js new file mode 100644 index 0000000..e29a86d --- /dev/null +++ b/build.js @@ -0,0 +1,14 @@ +const { app, BrowserWindow } = require('electron'); + +function createWindow() { + const win = new BrowserWindow({ + width: 1000, + height: 700, + webPreferences: { + nodeIntegration: true + } + }); + win.loadFile('dist/index.html'); // Vue 打包后的文件 +} + +app.whenReady().then(createWindow); diff --git a/package.json b/package.json index 02b56b6..a326caa 100644 --- a/package.json +++ b/package.json @@ -3,19 +3,36 @@ "private": true, "version": "0.0.0", "type": "module", + "main": "build.js", + "description": "test", + "author": "haiwei@haiwei.com", "scripts": { "dev": "vite", "build": "vite build", - "preview": "vite preview" + "preview": "vite preview", + "build:electron": "electron-builder" + }, + "build": { + "appId": "com.example.myapp", + "productName": "MyVueApp", + "files": [ + "dist/**/*", + "build.js" + ], + "win": { + "target": "nsis" + } }, "dependencies": { - "element-plus": "^2.10.4", "@vitejs/plugin-basic-ssl": "^2.0.0", + "element-plus": "^2.10.4", "vue": "^3.5.17", "vue-router": "4" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.0", + "electron": "^37.3.1", + "electron-builder": "^26.0.12", "vite": "^7.0.4" } } diff --git a/src/components/ruler.vue b/src/components/ruler.vue index f85c446..4a0718f 100644 --- a/src/components/ruler.vue +++ b/src/components/ruler.vue @@ -48,11 +48,23 @@ :style="{ width: boxSize + 'px', height: boxSize + 'px', - left: boxPos.x + 'px', - top: contentHeight - boxPos.y - boxSize + 'px', - transform: `rotate(${boxPos.rotate}deg)` + left: props.boxPos.x + 'px', + top: contentHeight - props.boxPos.y - boxSize + 'px', + transform: `rotate(${props.boxPos.rotate}deg)` }" - > + > +
+ +
+ +
@@ -91,15 +103,26 @@ import {ref, computed, onMounted, watch} from 'vue' const props = defineProps({ boxPos: { type: Object, - default: () => ({x: 200, y: 300}), + default: () => ({x: 200, y: 300, rotate: -45}), }, }) -const boxPos = ref({x: 200, y: 300, rotate: -45}) -setInterval(() => { - boxPos.value.x += (-10 + (Math.random() * 20)) - boxPos.value.y += (-10 + (Math.random() * 20)) - boxPos.value.rotate += (-5 + (Math.random() * 10)) -}, 1000) +// const boxPos = ref({x: 200, y: 300, rotate: -45}) +// setInterval(() => { +// props.boxPos.x += (-10 + (Math.random() * 20)) +// props.boxPos.y += (-10 + (Math.random() * 20)) +// props.boxPos.rotate += (-5 + (Math.random() * 10)) +// }, 1000) + +const dots = ref([ + { + x: 100, + y: 100, + }, + { + x: 200, + y: 200, + } +]) const boxSize = 30 const minScale = 1 @@ -252,6 +275,25 @@ const verticalTicks = computed(() => transition: all 1s ease; } +.box .scan { + position: absolute; + background-image: url("../assets/scan.gif"); + background-size: 100% 100%; + width: 100px; + height: 100px; + top: 50%; + right: 15px; + transform: translateY(-50%); + +} + +.dot { + position: absolute; + background: radial-gradient(circle at center, + #ea1212 0%, rgba(228, 116, 116, 0.2) 100%); + border-radius: 50%; +} + .tick { position: absolute; opacity: 0.4; diff --git a/src/views/index.vue b/src/views/index.vue index c7d7424..d848f96 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -21,7 +21,7 @@
- +
@@ -305,6 +305,83 @@ import Ruler from "@/components/ruler.vue"; import {ref} from "vue"; +const socketData = [ + { + "TimeQuality": 19124, + "GpsWeek": 2378, + "GpsSeconds": 443388.33, + "Latitude": 28.24388795549, + "Longitude": 113.00382002762, + "EllipsoidHeight": 14.6323, + "VelocityNorth": -0.1931, + "VelocityEast": 3.2447, + "ActualSpeed": 11.701587, + "RollAngle": 1.047412, + "HeadingAngle": 92.054855, + "IncludedAngle": 0.0, + "SolutionStatus": "", + "Fps": 3.485E-42, + "FpsNum": 0.0, + "MotorPitchAngle": 0.0, + "MotorAzimuthAngle": 0.0, + "ty": 3 + }, + { + "radar_type": 0, + "radar_ver": "0.1.1", + "arm_ver": "0.0.0", + "al_ver": "0.0.0", + "pwc_ver": "0.0.0", + "cd_ver": "0.0.0", + "v1": 0, + "v2": 0, + "v3": 0, + "v4": 0, + "radar_total_vol": 23.5, + "radar_total_cur": 0.0, + "nx_vol": 0.0, + "nx_cur": 0.0, + "nx_temp": 25.0, + "arm_vol": 23.5, + "arm_cur": 0.0, + "arm_temp": 25.0, + "ant_vol": 23.5, + "ant_cur": 0.0, + "ant_temp": 0.0, + "at_work_area_status": 0, + "pwb_err_code": 0, + "pwa_err_code": 0, + "al_err_code": 0, + "arm_err_code": 0, + "radar_err_code": 0, + "radar_work_state": 0, + "ty": 1 + }, + { + "Seq": 3.0, + "MD5": null, + "TimeStamp": 5.644776E+24, + "MissionID": 5.644776E+24, + "RngRes": 0.075, + "RngNum": 0.0, + "RngMin": 15.0, + "AziRes": 0.1, + "AziNum": 0.0, + "AziMin": 600.0, + "DataType": 2.8E-44, + "LonMin": 112.99582, + "LatMin": 28.242912, + "TarNum": 6E-45, + "ty": 4 + } +] +let area = { + "LatMin": 36.830189, + "LatMax": 36.884255, + "LonMin": 117.210504, + "LonMax": 117.221718, +} + const list = ref([ { value1: '点位1', @@ -363,6 +440,58 @@ const date1 = ref([]) const setItemsId = (e) => { itemsId.value = e } +const locationData = ref({}) +const processData = (data) => { + if (data.ty === 1) { + } + if (data.ty === 2) { + } + if (data.ty === 3) { + console.log(data.Longitude > area.LonMin, data.Longitude < area.LonMax, data.Latitude > area.LatMin, data.Latitude < area.LatMax) + if (data.Longitude > area.LonMin && data.Longitude < area.LonMax && data.Latitude > area.LatMin && data.Latitude < area.LatMax) { + let location = { + x: 300 - (area.LonMax - data.Longitude) / ((area.LonMax - area.LonMin) / 300), + y: 1800 - (area.LatMax - data.Latitude) / ((area.LatMax - area.LatMin) / 1800), + rotate: data.HeadingAngle + // rotate: 0 + } + console.log(location) + locationData.value = location + } + + } + if (data.ty === 4) { + } +}; + +processData(socketData[0]) + +const ad = () => { + +// 1. 创建 WebSocket 连接（ws:// 或 wss://） + const socket = new WebSocket("ws://192.168.0.11:7789/ws"); + +// 2. 连接成功时触发 + socket.addEventListener("open", () => { + console.log("✅ WebSocket 连接成功"); + }); + +// 3. 接收消息 + socket.addEventListener("message", (event) => { + console.log("📩 收到消息:", event.data); + }); + +// 4. 连接关闭时触发 + socket.addEventListener("close", () => { + console.log("❌ WebSocket 已关闭"); + }); + +// 5. 出错时触发 + socket.addEventListener("error", (error) => { + console.error("⚠️ WebSocket 出错:", error); + }); +} +