new分支
This commit is contained in:
1
parent
5aed5a6177
commit
81f10ae2be
86
README.md
86
README.md
@ -1,28 +1,86 @@
|
||||
# set-vue
|
||||
# 网关控制系统
|
||||
|
||||
## Project setup
|
||||
## 项目概述
|
||||
基于Vue 3开发的网关控制系统，提供车辆控制、LED屏幕管理、音频处理等功能，支持移动端适配。项目使用Capacitor框架支持Android平台。
|
||||
|
||||
## 主要功能
|
||||
- 🚗 车辆远程控制 - 通过MQTT协议控制车辆运动
|
||||
- 🚧 锥桶设备管理 - 控制锥桶设备的部署与回收
|
||||
- 🔊 音频播放与处理 - 支持音频播放和音频处理功能
|
||||
- ⚠️ 预警系统 - 提供安全预警功能
|
||||
- 🌐 网关设置 - 系统网关配置管理
|
||||
- 🖥️ LED屏幕控制 - 远程控制LED屏幕显示内容
|
||||
- 🚘 车牌识别 - 车辆识别功能
|
||||
|
||||
## 技术栈
|
||||
- **核心框架**: Vue 3 + Vue Router 4 + Vuex 4
|
||||
- **UI组件库**: Element Plus + Vant
|
||||
- **通信协议**: MQTT (mqtt.js)
|
||||
- **HTTP请求**: axios
|
||||
- **移动端适配**: amfe-flexible + postcss-pxtorem
|
||||
- **音频处理**: lamejs
|
||||
- **摇杆控制**: nipplejs
|
||||
- **调试工具**: vconsole
|
||||
- **移动端支持**: Capacitor
|
||||
|
||||
## 项目结构
|
||||
```
|
||||
├── android/ # Android平台代码
|
||||
├── public/ # 静态资源
|
||||
│ ├── audio-processor.js # 音频处理器
|
||||
│ └── web/ # Web相关资源
|
||||
├── src/
|
||||
│ ├── api/ # API接口
|
||||
│ │ ├── ledScreen.js # LED屏幕控制
|
||||
│ │ └── ledScreenJsonFormat.js
|
||||
│ ├── assets/ # 静态资源
|
||||
│ ├── components/ # 公共组件
|
||||
│ │ ├── MQTT/ # MQTT通信组件
|
||||
│ │ └── rocker.vue # 摇杆控制组件
|
||||
│ ├── router/ # 路由配置
|
||||
│ ├── store/ # Vuex状态管理
|
||||
│ └── views/ # 页面视图
|
||||
│ ├── CarControl.vue # 车辆控制
|
||||
│ ├── ConeControl.vue # 锥桶控制
|
||||
│ ├── AudioPlay.vue # 音频播放
|
||||
│ └── gateway/ # 网关设置
|
||||
├── package.json # 项目依赖
|
||||
└── vue.config.js # Vue配置
|
||||
```
|
||||
|
||||
## 安装与运行
|
||||
### 开发环境
|
||||
```bash
|
||||
# 安装依赖
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
# 启动开发服务器
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
### 生产构建
|
||||
```bash
|
||||
# 构建生产版本
|
||||
npm run build
|
||||
|
||||
# 构建Android应用
|
||||
npx cap add android
|
||||
npx cap copy android
|
||||
npx cap open android
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
### 代码检查
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
1. 使用MQTT协议需要配置正确的broker地址
|
||||
2. 移动端适配基于rem布局，设计稿宽度为750px
|
||||
3. Android平台开发需要配置好Java和Android开发环境
|
||||
4. 音频处理功能依赖Web Audio API
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
## 相关文档
|
||||
- [Vue 3文档](https://v3.vuejs.org/)
|
||||
- [Capacitor文档](https://capacitorjs.com/)
|
||||
- [MQTT.js文档](https://github.com/mqttjs/MQTT.js)
|
||||
1
public/.eslintrc.js
Normal file
1
public/.eslintrc.js
Normal file
File diff suppressed because one or more lines are too long
1
public/jweixin-1.3.2.js
Normal file
1
public/jweixin-1.3.2.js
Normal file
File diff suppressed because one or more lines are too long
1
public/uni.webview.1.5.6.js
Normal file
1
public/uni.webview.1.5.6.js
Normal file
File diff suppressed because one or more lines are too long
161
src/views/home/1home.vue
Normal file
161
src/views/home/1home.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<Header :title="currentTitle"></Header>
|
||||
<van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">
|
||||
<div class="content">
|
||||
<van-notice-bar class="notice" scrollable text="下滑刷新页面" color="black" />
|
||||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item>信安智能</van-swipe-item>
|
||||
<!-- <van-swipe-item>2</van-swipe-item> -->
|
||||
<!-- <van-swipe-item>3</van-swipe-item> -->
|
||||
</van-swipe>
|
||||
<div class="item-content">
|
||||
<van-cell-group inset>
|
||||
<van-cell size="large" class="custom-cell" title="显示设置" icon="photo-o" is-link value="显示"
|
||||
@click="navigateTo('web/screen_main.html')" />
|
||||
<van-cell size="large" class="custom-cell" title="声卡设置" icon="volume-o" is-link value="语音"
|
||||
@click="goto('voiceset')" />
|
||||
<van-cell size="large" class="custom-cell" title="车牌识别" icon="search" is-link value="识别"
|
||||
@click="goto('recognition')" />
|
||||
<van-cell size="large" class="custom-cell" title="预警设置" icon="warning-o" is-link value="预警"
|
||||
@click="goto('warning')" />
|
||||
<van-cell size="large" class="custom-cell" title="远程喊话" icon="bullhorn-o" is-link value="喊话"
|
||||
@click="navigateTo('web/voice_copy.html')" />
|
||||
<!-- <van-cell size="large" class="custom-cell" title="小车控制" icon="logistics" is-link value="控制"
|
||||
@click="goto('CarControl')" /> -->
|
||||
<!-- <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('TEST')" /> -->
|
||||
<!-- <van-cell size="large" class="custom-cell" title="小车控制" icon="car" is-link value="控制" @click="goto('AudioPlay')" /> -->
|
||||
<van-cell size="large" class="custom-cell" title="网关设置" icon="desktop-o" is-link value="控制"
|
||||
@click="goto('GatewaySetting')" />
|
||||
<van-cell size="large" class="custom-cell" title="路锥控制" icon="warning-o" is-link value="控制"
|
||||
@click="goto('ConeControl')" />
|
||||
<van-cell size="large" class="custom-cell" title="翻转屏遥控" icon="warning-o" is-link value="控制"
|
||||
@click="goto('flipScreen')" />
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import Header from "../../components/Header.vue";
|
||||
import Footer from "../../components/Footer.vue";
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
setup() {
|
||||
const currentTitle = ref('系统设置');
|
||||
const loading = ref(false);
|
||||
const router = useRouter();
|
||||
|
||||
// 模拟刷新过程的函数
|
||||
const onRefresh = () => {
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 导航到不同页面的函数
|
||||
const navigateTo = (path) => {
|
||||
window.location.href = path;
|
||||
};
|
||||
|
||||
// 使用 router 进行路由跳转
|
||||
const goto = (name) => {
|
||||
router.push({ name });
|
||||
};
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// window.addEventListener('message', function (event) {
|
||||
// // console.log("message",JSON.stringify(message))
|
||||
// // 仅校验消息结构（非必须但建议）
|
||||
// if (event.data ) {
|
||||
// const thingsModels = event.data.data;
|
||||
// console.log('Received thingsModels:', thingsModels);
|
||||
// // 注意：确保 thingsModels 的使用是安全的！
|
||||
// }
|
||||
// });
|
||||
});
|
||||
|
||||
return {
|
||||
currentTitle,
|
||||
loading,
|
||||
onRefresh,
|
||||
navigateTo,
|
||||
goto,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
border-radius: 20px !important;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
van-pull-refresh {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Custom styles for van-cell */
|
||||
.custom-cell .van-cell__title,
|
||||
.custom-cell .van-cell__label,
|
||||
.custom-cell .van-cell__value,
|
||||
.custom-cell .van-icon {
|
||||
font-size: 20px;
|
||||
/* Adjust the font size as needed */
|
||||
}
|
||||
|
||||
.custom-cell .van-cell__title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.custom-cell .van-cell__value {
|
||||
color: #666;
|
||||
/* Customize the value text color if needed */
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user