2023-09-20 21:33:11 +08:00
|
|
|
<template>
|
|
|
|
<el-container id="layoutBox">
|
|
|
|
<el-aside class="animation" :class="isCollapse ? 'menuW' : 'menuS'">
|
|
|
|
<Menubar />
|
|
|
|
</el-aside>
|
|
|
|
<el-container>
|
|
|
|
<el-header>
|
|
|
|
<Headbar />
|
|
|
|
</el-header>
|
|
|
|
<el-main>
|
|
|
|
<router-view :key="rouKey" />
|
|
|
|
</el-main>
|
|
|
|
<el-footer>
|
|
|
|
<BlogBox />
|
|
|
|
</el-footer>
|
|
|
|
</el-container>
|
|
|
|
</el-container>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import mqtt from '@/utils/mqtt'
|
|
|
|
import Menubar from '@/views/layout/components/menubar'
|
|
|
|
import Headbar from '@/views/layout/components/headbar'
|
|
|
|
import BlogBox from '@/views/layout/components/BlogBox'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Layout',
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
frequencySetTimeout: null // 对频信息保持
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
Menubar,
|
|
|
|
Headbar,
|
|
|
|
BlogBox
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
rouKey () {
|
|
|
|
return this.$route.path
|
|
|
|
},
|
|
|
|
isCollapse () {
|
|
|
|
return this.$store.state.app.isCollapse
|
|
|
|
},
|
|
|
|
shop_id () {
|
|
|
|
return this.$store.state.user.shop_id
|
|
|
|
},
|
|
|
|
airList () {
|
|
|
|
return this.$store.state.airList
|
2023-10-18 15:58:44 +08:00
|
|
|
},
|
|
|
|
shopList () {
|
|
|
|
return this.$store.state.shopList
|
2023-09-20 21:33:11 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted () {
|
2025-06-13 22:58:49 +08:00
|
|
|
/* mqtt */
|
|
|
|
mqtt.mqttConf()// 连接mqtt
|
2024-06-05 00:11:49 +08:00
|
|
|
},
|
|
|
|
created () {
|
2023-09-20 21:33:11 +08:00
|
|
|
/* init */
|
|
|
|
this.$store.commit('app/setIsMobile')// 获取客户端平台类型
|
2023-10-18 15:58:44 +08:00
|
|
|
this.$store.dispatch('fetchAirList')// 获取飞机列表
|
|
|
|
this.$store.dispatch('fetchShopList')// 获取商铺列表
|
2023-09-20 21:33:11 +08:00
|
|
|
this.$store.dispatch('fetchAdminList')// 获取管理员列表
|
|
|
|
this.$store.dispatch('fetchSiteList')// 获取站点列表
|
|
|
|
this.$store.dispatch('fetchRouteList')// 获取航线列表
|
2025-06-04 00:29:41 +08:00
|
|
|
this.$store.dispatch('fetchNoflyData')// 获取禁飞区数据
|
2023-10-18 15:58:44 +08:00
|
|
|
this.$store.dispatch('fetchCategoryList')// 获取分类列表(小程序)
|
2023-11-03 20:57:12 +08:00
|
|
|
this.$store.dispatch('fetchSpuList')// 获取商品spu列表
|
|
|
|
this.$store.dispatch('fetchSkuList')// 获取商品sku列表
|
2024-06-26 15:24:15 +08:00
|
|
|
this.$store.dispatch('fetchPaidOrderList')// 获取订单列表
|
2025-06-13 12:26:14 +08:00
|
|
|
this.$store.dispatch('fetchMessageList')// 获取管理员公告列表 并弹出公告框
|
2023-09-20 21:33:11 +08:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
/**
|
|
|
|
* @description: 异步拿到飞机列表之后 再进行一些初始化操作
|
|
|
|
* @param {*} res 飞机列表
|
|
|
|
*/
|
|
|
|
airList (res) {
|
|
|
|
// 订阅飞机信息
|
|
|
|
mqtt.doSubscribe('planeState/+', (mqttRes) => {
|
|
|
|
res.forEach(plane => {
|
|
|
|
if (mqttRes.topic.indexOf(plane.macadd) > -1) {
|
2024-07-20 18:42:47 +08:00
|
|
|
try {
|
|
|
|
// 反序列化 mqtt信息
|
|
|
|
const jsonData = JSON.parse(mqttRes.msg.trim())
|
|
|
|
|
|
|
|
// 更新mqtt信息 选择性更新状态
|
|
|
|
for (const key in jsonData) {
|
|
|
|
if (key === 'heartBeat') {
|
2025-06-13 22:58:49 +08:00
|
|
|
const oldMark = plane.planeState.flyDataMark
|
|
|
|
const newMark = (Number(jsonData.heartBeat) & 128) !== 0
|
|
|
|
|
|
|
|
// 每次接收到心跳时,更新随机数以触发 watch 监听
|
|
|
|
plane.planeState.heartRandom = Math.random()
|
|
|
|
plane.planeState.heartBeat = jsonData.heartBeat
|
|
|
|
|
|
|
|
// 解锁状态变更检测:用于控制飞行数据的采集与上传
|
|
|
|
if (!oldMark && newMark) {
|
|
|
|
// 从加锁切换为解锁:开始记录飞行轨迹
|
|
|
|
plane.planeState.flyDataMark = true
|
|
|
|
} else if (oldMark && !newMark) {
|
|
|
|
// 从解锁切换为加锁:停止记录并上传飞行轨迹
|
|
|
|
plane.planeState.flyDataMark = false
|
|
|
|
|
|
|
|
const uploadData = [...plane.planeState.flyDataSave]
|
|
|
|
console.log(`上传飞机 ${plane.macadd} 的飞行数据:`, uploadData)
|
|
|
|
// TODO: 后续实现:上传飞行数据接口
|
|
|
|
// await api.post('uploadFlightPath', { macadd: plane.macadd, data: uploadData })
|
|
|
|
|
|
|
|
// 上传完成后清空记录缓存
|
|
|
|
plane.planeState.flyDataSave = []
|
|
|
|
}
|
2024-07-20 18:42:47 +08:00
|
|
|
} else if (key === 'position') {
|
|
|
|
// 如果是飞机位置信息 则不是直接刷新状态 而是累计 到数组 以便于画出飞机路径
|
|
|
|
const position = JSON.parse(jsonData.position)
|
2024-09-19 13:09:43 +08:00
|
|
|
// 检查 lon, lat, 和 alt 是否不全为零或空值
|
|
|
|
if (position.lon !== 0 && position.lat !== 0 &&
|
|
|
|
position.lon !== null && position.lat !== null &&
|
|
|
|
position.lon !== '' && position.lat !== '') {
|
|
|
|
plane.planeState.position.push([position.lon / 10e6, position.lat / 10e6, Number(position.alt)])
|
2024-07-25 13:53:56 +08:00
|
|
|
}
|
2024-07-20 18:42:47 +08:00
|
|
|
if (plane.planeState.position.length > 1000) {
|
|
|
|
plane.planeState.position.shift() // 删除最早的经纬度
|
|
|
|
}
|
2025-06-13 22:58:49 +08:00
|
|
|
// 如果是解锁状态,记录轨迹用于上传
|
|
|
|
if (plane.planeState.flyDataMark) {
|
|
|
|
plane.planeState.flyDataSave.push([position.lon / 10e6, position.lat / 10e6, Number(position.alt)])
|
|
|
|
}
|
2024-08-15 15:37:46 +08:00
|
|
|
} else if (key === 'homePosition') {
|
|
|
|
const homePosition = JSON.parse(jsonData.homePosition)// home点反序列化再赋值
|
2024-09-19 13:09:43 +08:00
|
|
|
homePosition.lon = homePosition.lon / 10e6
|
2024-08-15 15:37:46 +08:00
|
|
|
homePosition.lat = homePosition.lat / 10e6
|
|
|
|
homePosition.alt = Number(homePosition.alt)
|
|
|
|
plane.planeState[key] = homePosition
|
2024-08-09 20:14:46 +08:00
|
|
|
} else if (key === 'statusText') {
|
|
|
|
/* 飞控信息 插入日志 */
|
|
|
|
this.$store.dispatch('fetchLog', { content: jsonData[key], color: '#f57c00' })
|
2024-07-20 18:42:47 +08:00
|
|
|
} else {
|
|
|
|
plane.planeState[key] = jsonData[key] // 按订阅信息 刷新飞机状态
|
2023-09-20 21:33:11 +08:00
|
|
|
}
|
|
|
|
}
|
2024-07-20 18:42:47 +08:00
|
|
|
} catch (error) {
|
|
|
|
console.error('Error parsing JSON or processing message:', error)
|
2023-09-20 21:33:11 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
// 订阅对频
|
|
|
|
mqtt.doSubscribe('crosFrequency/+', (res) => {
|
|
|
|
if (res.topic.indexOf('crosFrequency') > -1) {
|
|
|
|
this.$store.commit('setCrosFrequency', res.msg)// 设置对频信息
|
|
|
|
clearTimeout(this.frequencySetTimeout)// 接收到新的订阅信息 清除之前的倒计时
|
|
|
|
this.frequencySetTimeout = setTimeout(() => { // 倒计时10秒 随之清除缓存中对频信息
|
|
|
|
this.$store.commit('setCrosFrequency', null)
|
|
|
|
}, 10000)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
// 订阅游客下单频道
|
|
|
|
mqtt.doSubscribe(`refreshQuestList/${this.shop_id}`, (res) => {
|
|
|
|
if (res.topic.indexOf(`refreshQuestList/${this.shop_id}`) > -1) {
|
|
|
|
this.$store.dispatch('fetchSiteList')// 刷新站点列表
|
2024-06-26 15:24:15 +08:00
|
|
|
this.$store.dispatch('fetchPaidOrderList')// 刷新订单列表 ps:待发货及待收货 并且不是退款成功状态
|
2023-09-20 21:33:11 +08:00
|
|
|
}
|
|
|
|
})
|
2024-07-29 15:58:04 +08:00
|
|
|
// 向所有飞机发送 让飞控刷新各种请求
|
|
|
|
res.forEach(item => {
|
|
|
|
mqtt.publishFun(`cmd/${item.macadd}`, '{"refreshRequest":1}')
|
|
|
|
})
|
2023-09-20 21:33:11 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
destroyed () {
|
|
|
|
mqtt.mqttDestroy()// 断开mqtt
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import "@/styles/theme.scss";
|
|
|
|
|
|
|
|
#layoutBox {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-aside {
|
|
|
|
background-color: #304156;
|
|
|
|
overflow: hidden !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.menuW {
|
|
|
|
width: 60px !important;
|
|
|
|
}
|
|
|
|
|
2024-07-22 03:07:56 +08:00
|
|
|
/* 竖屏模式样式 */
|
|
|
|
@media (orientation: portrait) {
|
|
|
|
.menuW {
|
|
|
|
width: 0px !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-09-20 21:33:11 +08:00
|
|
|
.menuS {
|
|
|
|
width: 210px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-header {
|
|
|
|
padding: 0 !important;
|
|
|
|
height: 50px !important;
|
|
|
|
line-height: 50px !important;
|
|
|
|
overflow: hidden;
|
|
|
|
z-index: 99;
|
|
|
|
box-shadow: 0 0px 4px rgba(0, 21, 41, .08);
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-main {
|
|
|
|
padding: 0 !important;
|
|
|
|
height: 100%;
|
|
|
|
background-color: $white-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-footer {
|
|
|
|
height: 24px !important;
|
|
|
|
}
|
|
|
|
</style>
|