diff --git a/package-lock.json b/package-lock.json index b306107..f6826fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,11 @@ "@capacitor/android": "^7.0.1", "@capacitor/cli": "^7.0.1", "@capacitor/core": "^7.0.1", + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-brands-svg-icons": "^6.7.2", + "@fortawesome/free-regular-svg-icons": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/vue-fontawesome": "^3.0.8", "@vant/touch-emulator": "^1.4.0", "amfe-flexible": "^2.2.1", "autoprefixer": "^10.4.19", @@ -18,6 +23,7 @@ "core-js": "^3.8.3", "element-plus": "^2.9.4", "express": "^4.21.2", + "font-awesome": "^4.7.0", "lamejs": "^1.2.1", "mqtt": "^2.18.8", "nipplejs": "^0.10.2", @@ -1988,6 +1994,73 @@ "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz", "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.7.2", + "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz", + "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.7.2", + "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz", + "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmmirror.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz", + "integrity": "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmmirror.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz", + "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmmirror.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz", + "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/vue-fontawesome": { + "version": "3.0.8", + "resolved": "https://registry.npmmirror.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz", + "integrity": "sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==", + "license": "MIT", + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "vue": ">= 3.0.0 < 4" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -7420,6 +7493,15 @@ } } }, + "node_modules/font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmmirror.com/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==", + "license": "(OFL-1.1 AND MIT)", + "engines": { + "node": ">=0.10.3" + } + }, "node_modules/foreground-child": { "version": "3.3.0", "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.0.tgz", diff --git a/package.json b/package.json index 8bdf4aa..86e3176 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,11 @@ "@capacitor/android": "^7.0.1", "@capacitor/cli": "^7.0.1", "@capacitor/core": "^7.0.1", + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-brands-svg-icons": "^6.7.2", + "@fortawesome/free-regular-svg-icons": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/vue-fontawesome": "^3.0.8", "@vant/touch-emulator": "^1.4.0", "amfe-flexible": "^2.2.1", "autoprefixer": "^10.4.19", @@ -18,6 +23,7 @@ "core-js": "^3.8.3", "element-plus": "^2.9.4", "express": "^4.21.2", + "font-awesome": "^4.7.0", "lamejs": "^1.2.1", "mqtt": "^2.18.8", "nipplejs": "^0.10.2", diff --git a/src/api/ledScreen.js b/src/api/ledScreen.js new file mode 100644 index 0000000..9f3a312 --- /dev/null +++ b/src/api/ledScreen.js @@ -0,0 +1,212 @@ +import axios from 'axios'; + +// 基础配置 +const baseURL = '/api'; // 根据实际情况配置API基础路径 +const boardId = 1; // 默认设备ID + +// 创建axios实例 +const api = axios.create({ + baseURL, + timeout: 10000, + headers: { + 'Content-Type': 'application/json' + } +}); + +// 响应拦截器处理响应 +api.interceptors.response.use( + response => { + // 检查错误码 + if (response.data && response.data.error_code !== undefined) { + if (response.data.error_code !== 0) { + console.error('API错误:', response.data.error_code); + return Promise.reject(response.data); + } + } + return response.data; + }, + error => { + console.error('网络错误:', error); + return Promise.reject(error); + } +); + +/** + * LED双色屏控制API + */ +export const ledScreenApi = { + /** + * 平台上升控制 + * @returns {Promise} + */ + platformUp() { + return api.post('/device/control', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + platform: { + action: "up" + } + } + }); + }, + + /** + * 平台下降控制 + * @returns {Promise} + */ + platformDown() { + return api.post('/device/control', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + platform: { + action: "down" + } + } + }); + }, + + /** + * 屏幕开关控制 + * @param {Boolean} status - true为开，false为关 + * @returns {Promise} + */ + screenToggle(status) { + return api.post('/device/control', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + screen: { + power: status ? "on" : "off" + } + } + }); + }, + + /** + * 灯光模式切换 + * @param {Number} mode - 灯光模式编号 + * @returns {Promise} + */ + lightMode(mode) { + return api.post('/device/control', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + light: { + mode: mode + } + } + }); + }, + + /** + * 单个灯控制 + * @param {Number} lightId - 灯ID (1-6) + * @param {Boolean} status - true为开，false为关 + * @returns {Promise} + */ + controlSingleLight(lightId, status) { + return api.post('/device/control', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + light: { + id: lightId, + status: status ? "on" : "off" + } + } + }); + }, + + /** + * 调节亮度 + * @param {Number} brightness - 亮度值(0-100) + * @returns {Promise} + */ + setBrightness(brightness) { + return api.post('/device/control', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + screen: { + brightness: brightness + } + } + }); + }, + + /** + * 切换节目 + * @param {Number} programId - 节目ID + * @returns {Promise} + */ + switchProgram(programId) { + return api.post('/device/control', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + program: { + id: programId + } + } + }); + }, + + /** + * 设备登录验证 + * @param {String} password - 登录密码 + * @returns {Promise} + */ + login(password) { + return api.post('/device/auth', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + log_in: { + type: 2, + pass: password + } + } + }); + }, + + /** + * 修改设备密码 + * @param {String} oldPassword - 旧密码 + * @param {String} newPassword - 新密码 + * @returns {Promise} + */ + changePassword(oldPassword, newPassword) { + return api.post('/device/auth', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + log_in: { + type: 2, + pass: oldPassword, + new_pass: newPassword + } + } + }); + }, + + /** + * 获取设备状态 + * @returns {Promise} + */ + getDeviceStatus() { + return api.post('/device/status', { + board_id: boardId, + JSON_id: Date.now(), + gateway: { + status: { + query: "all" + } + } + }); + } +}; + +export default ledScreenApi; \ No newline at end of file diff --git a/src/api/ledScreenJsonFormat.js b/src/api/ledScreenJsonFormat.js new file mode 100644 index 0000000..c01dc33 --- /dev/null +++ b/src/api/ledScreenJsonFormat.js @@ -0,0 +1,281 @@ +/** + * LED双色屏JSON通信格式定义 + * WEB/串口 => 设备，为请求格式 + * 设备 => WEB/串口，为响应格式 + */ + +// ======================== 平台上升 ======================== +const platformUpRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "platform": { + "action": "up" + } + } +}; + +const platformUpResponse = { + "JSON_id": 1, + "gateway": { + "platform": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 平台下降 ======================== +const platformDownRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "platform": { + "action": "down" + } + } +}; + +const platformDownResponse = { + "JSON_id": 1, + "gateway": { + "platform": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 屏幕开关 ======================== +const screenOnRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "screen": { + "power": "on" + } + } +}; + +const screenOnResponse = { + "JSON_id": 1, + "gateway": { + "screen": { + "return": 0 + } + }, + "error_code": 0 +}; + +const screenOffRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "screen": { + "power": "off" + } + } +}; + +const screenOffResponse = { + "JSON_id": 1, + "gateway": { + "screen": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 灯光模式 ======================== +const lightModeRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "light": { + "mode": 1 // 模式编号，1-n + } + } +}; + +const lightModeResponse = { + "JSON_id": 1, + "gateway": { + "light": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 单个灯控制 ======================== +// 这里以灯1开启为例，其他灯位可以修改id值(1-6) +const light1OnRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "light": { + "id": 1, + "status": "on" + } + } +}; + +const light1OnResponse = { + "JSON_id": 1, + "gateway": { + "light": { + "return": 0 + } + }, + "error_code": 0 +}; + +const light1OffRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "light": { + "id": 1, + "status": "off" + } + } +}; + +const light1OffResponse = { + "JSON_id": 1, + "gateway": { + "light": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 亮度调节 ======================== +const setBrightnessRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "screen": { + "brightness": 80 // 亮度值，0-100 + } + } +}; + +const setBrightnessResponse = { + "JSON_id": 1, + "gateway": { + "screen": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 节目切换 ======================== +const switchProgramRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "program": { + "id": 2 // 节目编号 + } + } +}; + +const switchProgramResponse = { + "JSON_id": 1, + "gateway": { + "program": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 设备登录 ======================== +const loginRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "log_in": { + "type": 2, + "pass": "#输入密码#" + } + } +}; + +const loginResponse = { + "JSON_id": 1, + "gateway": { + "log_in": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 修改设备密码 ======================== +const changePasswordRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "log_in": { + "type": 2, + "pass": "#输入密码#", + "new_pass": "#新密码#" + } + } +}; + +const changePasswordResponse = { + "JSON_id": 1, + "gateway": { + "log_in": { + "return": 0 + } + }, + "error_code": 0 +}; + +// ======================== 获取设备状态 ======================== +const getStatusRequest = { + "board_id": 1, + "JSON_id": 1, + "gateway": { + "status": { + "query": "all" + } + } +}; + +const getStatusResponse = { + "JSON_id": 1, + "gateway": { + "status": { + "platform": "up", // up/down + "screen": { + "power": "on", // on/off + "brightness": 80 + }, + "light": { + "mode": 1, + "lights": [ + {"id": 1, "status": "on"}, + {"id": 2, "status": "off"}, + {"id": 3, "status": "on"}, + {"id": 4, "status": "off"}, + {"id": 5, "status": "on"}, + {"id": 6, "status": "off"} + ] + }, + "program": { + "current": 2, + "total": 5 + } + } + }, + "error_code": 0 +}; + diff --git a/src/assets/js/iconfont.js b/src/assets/js/iconfont.js new file mode 100644 index 0000000..8a0a20a --- /dev/null +++ b/src/assets/js/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4894683='',(c=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var n,i,o,l,d,a=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}n=function(){var t,e=document.createElement("div");e.innerHTML=c._iconfont_svg_string_4894683,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(n,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),n()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(o=n,l=c.document,d=!1,h(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){d||(d=!0,o())}function h(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}})(window); \ No newline at end of file diff --git a/src/components/Header.vue b/src/components/Header.vue index 958a64c..dd57888 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -18,7 +18,7 @@ \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 3f60d5e..9746ffe 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -72,6 +72,11 @@ const routes = [ name: 'ConeControl', component: () => import('../views/ConeControl.vue') }, + { + path: '/flipScreen', + name: 'flipScreen', + component: () => import('../views/flipScreen/flipScreen.vue') + }, ]; const router = createRouter({ diff --git a/src/views/flipScreen/flipScreen.vue b/src/views/flipScreen/flipScreen.vue new file mode 100644 index 0000000..63b0ae6 --- /dev/null +++ b/src/views/flipScreen/flipScreen.vue @@ -0,0 +1,716 @@ + + + + + \ No newline at end of file diff --git a/src/views/flipScreen/翻转屏协议.md b/src/views/flipScreen/翻转屏协议.md new file mode 100644 index 0000000..b8c8b24 --- /dev/null +++ b/src/views/flipScreen/翻转屏协议.md @@ -0,0 +1,278 @@ +# 翻转屏通信协议文档 + +本文档描述了翻转屏设备的通信协议格式。所有通信采用JSON格式，包括从控制端到设备的请求和从设备到控制端的响应。 + +## 通信基本结构 + +### 请求格式（控制端 → 设备） +```json +{ + "board_id": 121, // 设备ID + "JSON_id": 1, // 消息唯一标识 + "Flip-screen": { // 翻转屏指令 + "command_type": { // 具体命令类型 + // 命令参数 + } + } +} +``` + +### 响应格式（设备 → 控制端） +```json +{ + "JSON_id": 1, // 与请求消息相同的标识 + "Flip-screen": { // 翻转屏响应 + "command_type": { // 与请求相同的命令类型 + "status": "success" // 操作状态: "success" 或 "failed" + } + }, + "error_code": 0 // 错误码，0表示成功 +} +``` + +## 功能指令详解 + +### 1. 平台控制（上升/下降） + +#### 请求： +```json +{ + "board_id": 121, + "JSON_id": 2, + "Flip-screen": { + "platform_control": { + "direction": "up" // 可选值: "up" 或 "down" + } + } +} +``` + +#### 响应： +```json +{ + "JSON_id": 2, + "Flip-screen": { + "platform_control": { + "status": "success" + } + }, + "error_code": 0 +} +``` + +### 2. 屏幕开关控制 + +#### 请求： +```json +{ + "board_id": 121, + "JSON_id": 3, + "Flip-screen": { + "screen_control": { + "power": "on" // 可选值: "on" 或 "off" + } + } +} +``` + +#### 响应： +```json +{ + "JSON_id": 3, + "Flip-screen": { + "screen_control": { + "status": "success" + } + }, + "error_code": 0 +} +``` + +### 3. 灯模式控制 + +#### 请求： +```json +{ + "board_id": 121, + "JSON_id": 4, + "Flip-screen": { + "light_mode": { + "mode": "auto" // 灯光模式: "auto", "manual", 等 + } + } +} +``` + +#### 响应： +```json +{ + "JSON_id": 4, + "Flip-screen": { + "light_mode": { + "status": "success" + } + }, + "error_code": 0 +} +``` + +### 4. 单个灯控制 + +#### 请求： +```json +{ + "board_id": 121, + "JSON_id": 5, + "Flip-screen": { + "light_control": { + "light_id": 1, // 灯ID编号: 1-6 + "state": "on" // 可选值: "on" 或 "off" + } + } +} +``` + +#### 响应： +```json +{ + "JSON_id": 5, + "Flip-screen": { + "light_control": { + "status": "success" + } + }, + "error_code": 0 +} +``` + +### 5. 亮度调节 + +#### 请求： +```json +{ + "board_id": 121, + "JSON_id": 6, + "Flip-screen": { + "brightness_control": { + "value": 70 // 亮度值: 0-100 + } + } +} +``` + +#### 响应： +```json +{ + "JSON_id": 6, + "Flip-screen": { + "brightness_control": { + "status": "success" + } + }, + "error_code": 0 +} +``` + +### 6. 节目控制 + +#### 请求： +```json +{ + "board_id": 121, + "JSON_id": 7, + "Flip-screen": { + "program_control": { + "program_id": 1 // 节目ID + } + } +} +``` + +#### 响应： +```json +{ + "JSON_id": 7, + "Flip-screen": { + "program_control": { + "status": "success" + } + }, + "error_code": 0 +} +``` + +## 错误处理 + +当指令执行失败时，设备会返回非零的错误码和错误信息： + +```json +{ + "JSON_id": 3, + "Flip-screen": { + "screen_control": { + "status": "failed" + } + }, + "error_code": 1001, + "error_msg": "Device not responding" +} +``` + +## 错误码说明 + +| 错误码 | 描述 | +|--------|------| +| 0 | 成功 | +| 1001 | 设备无响应 | +| 1002 | 参数错误 | +| 1003 | 设备忙 | +| 1004 | 操作超时 | +| 1005 | 设备未就绪 | + + +## 设备状态查询 + +### 请求： +```json +{ + "board_id": 121, + "JSON_id": 8, + "Flip-screen": { + "status_query": { + "type": "all" // 查询类型: "all", "platform", "screen", "lights", "program" + } + } +} +``` + +### 响应： +```json +{ + "JSON_id": 8, + "Flip-screen": { + "status": { + "platform": { + "position": "up" // "up" 或 "down" + }, + "screen": { + "power": "on", // "on" 或 "off" + "brightness": 70 // 0-100 + }, + "lights": [ + {"id": 1, "state": "on", }, + {"id": 2, "state": "off",}, + {"id": 3, "state": "on", }, + {"id": 4, "state": "on", }, + {"id": 5, "state": "off",}, + {"id": 6, "state": "on", } + ], + "program": { + "current_id": 1, + "available": [1, 2, 3, 4, 5] + }, + "light_mode": "auto" + } + }, + "error_code": 0 +} +``` \ No newline at end of file diff --git a/src/views/home/home.vue b/src/views/home/home.vue index 7d7aa5a..0d3f2c6 100644 --- a/src/views/home/home.vue +++ b/src/views/home/home.vue @@ -21,6 +21,7 @@ +