new分支
This commit is contained in:
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
|
npm install
|
||||||
```
|
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
# 启动开发服务器
|
||||||
```
|
|
||||||
npm run serve
|
npm run serve
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and minifies for production
|
### 生产构建
|
||||||
```
|
```bash
|
||||||
|
# 构建生产版本
|
||||||
npm run build
|
npm run build
|
||||||
|
|
||||||
|
# 构建Android应用
|
||||||
|
npx cap add android
|
||||||
|
npx cap copy android
|
||||||
|
npx cap open android
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lints and fixes files
|
### 代码检查
|
||||||
```
|
```bash
|
||||||
npm run lint
|
npm run lint
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
1. 使用MQTT协议需要配置正确的broker地址
|
||||||
|
2. 移动端适配基于rem布局,设计稿宽度为750px
|
||||||
|
3. Android平台开发需要配置好Java和Android开发环境
|
||||||
|
4. 音频处理功能依赖Web Audio API
|
||||||
|
|
||||||
|
## 相关文档
|
||||||
|
- [Vue 3文档](https://v3.vuejs.org/)
|
||||||
|
- [Capacitor文档](https://capacitorjs.com/)
|
||||||
|
- [MQTT.js文档](https://github.com/mqttjs/MQTT.js)
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
|
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