<template>
<view class="dog_box">
<view class="dog_nav">
<view class="nav_title">
巡回检测
</view>
<view class="nav_opt">
<button class="nav_opt_btn">设置</button>
</view>
</view>
<view class="dog_container">
<view class="aside_left">
<view class="content">
<button class="aside_left_btn" v-for="(item, index) in contentLeftData" :key="index" :class="{
'item_active': index === currentIndex,
'item_disabled': !clickableStates[index]
}" @click="clickableStates[index] ? divClick(index) : null">{{item.name}}</button>
</view>
</view>
<view class="main">
<view class="cadImage">
<view class="title">平面图</view>
<!-- <view class="image">
</view> -->
<image src="./cad.png" class="image" />
</view>
<view class="cadBtn">
<view class="content">
<view style="margin-left: 11.72rpx;"> 电量:10% </view>
<view style="margin-left: 23.44rpx;"> 状态:正在移动</view>
</view>
</view>
</view>
<view class="aside_right">
<view class="content">
<view class="top">
<view class="title">
采集图像参照
</view>
<image src="./cad.png" class="image" />
<view> </view>
</view>
<view class="btn">
<view class="title">
采集图像一览
</view>
<view class="table">
<uni-table ref="table" emptyText="暂无更多数据">
<uni-tr>
<uni-th width="150" align="center">名字</uni-th>
<uni-th align="center">地点</uni-th>
<uni-th width="204" align="center">时间</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td>{{ item.name }}</uni-td>
<uni-td>
<view class="name">{{ item.address }}</view>
</uni-td>
<uni-td align="center">{{ item.date }}</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
// 左侧全部按钮
contentLeftData: [{
name: "向目的地移动"
}, // 0
{
name: "暂停移动"
}, // 1
{
name: "继续移动"
}, // 2
{
name: "拍摄照片"
}, // 3
{
name: "执行动作 : 打招呼"
}, // 4
{
name: "执行动作 : 坐下"
}, // 5
{
name: "执行动作 : 坐下恢复"
}, // 6
{
name: "执行动作 : 伸懒腰"
}, // 7
{
name: "执行动作 : 跳舞1"
}, // 8
{
name: "执行动作 : 跳舞2"
}, // 9
{
name: "播放声音 : 播放音乐1"
}, // 10
{
name: "播放声音 : 播放音乐2"
}, // 11
{
name: "播放声音 : 播放音乐3"
}, // 12
{
name: "恢复按钮"
}, // 13
],
clickableStates: [
true, // 向目的地移动
false, // 暂停移动
false, // 继续移动
true, // 拍摄照片
true, // 执行动作 : 打招呼
true, // 执行动作 : 坐下
true, // 执行动作 : 坐下恢复
true, // 执行动作 : 伸懒腰
true, // 执行动作 : 跳舞1
true, // 执行动作 : 跳舞2
true, // 播放声音 : 播放音乐1
true, // 播放声音 : 播放音乐2
true, // 播放声音 : 播放音乐3
true, // 恢复按钮
],
// 右侧数据
dataScore: [],
dog_target_node: 1, //起点
currentIndex: -1,
tableData: [{
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
},{
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
},{
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}, {
"date": "2020-09-01",
"name": "Dcloud1",
"address": "①"
}]
}
},
onLoad() {
},
methods: {
divClick(index) {
//let that = this;
this.currentIndex = index;
// 点击左侧按钮--'向目的地移动'
if (index === 0) {
this.execute_navigation(index)
// 点击左侧按钮--'暂停移动'
} else if (index === 1) {
this.execute_pausenavigation(index)
// 点击左侧按钮--'继续移动'
} else if (index === 2) {
this.execute_recovernavigation(index)
// 点击左侧按钮--'拍摄照片'
} else if (index === 3) {
this.execute_photos()
// 点击左侧按钮--'执行动作 : 打招呼'
} else if (index === 4) {
//判断机器狗运动状态
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_say_hello,
// message: "say_hello",
// };
let data = {}
this.execute_action(index, data);
// 点击左侧按钮--'执行动作 : 坐下'
} else if (index === 5) {
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_sit_down,
// message: "sit_down",
// };
let data = {}
this.execute_action(index, data);
// 点击左侧按钮--'执行动作 : 坐下恢复'
} else if (index === 6) {
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_sit_up,
// message: "sit_up",
// };
let data = {}
this.execute_action(index, data);
// 点击左侧按钮--'执行动作 : 伸懒腰'
} else if (index === 7) {
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_stretch_legs,
// message: "stretch_legs",
// };
let data = {}
this.execute_action(index, data);
// 点击左侧按钮--'执行动作 : 跳舞1'
} else if (index === 8) {
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_dance1,
// message: "dance1",
// };
let data = {}
this.execute_action(index, data);
// 点击左侧按钮--'执行动作 : 跳舞2'
} else if (index === 9) {
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_dance2,
// message: "dance2",
// };
let data = {}
this.execute_action(index, data);
// 点击左侧按钮--'播放音乐1 :
} else if (index === 10) {
// if (this.isPlaying) {
// this.$refs.audioPlayer.pause();
// } else {
// if (this.isStartPlaying) {
// this.$refs.audioPlayer.play();
// } else { //开始播放
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_play_music1,
// message: "play_music1",
// };
// this.execute_play_music(index, data);
// this.isStartPlaying = true;
// }
// }
// this.isPlaying = !this.isPlaying;
// 点击左侧按钮--'播放音乐2 :
} else if (index === 11) {
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_play_music2,
// message: "play_music2",
// };
// this.execute_play_music(index, data)
// 点击左侧按钮--'播放音乐3 :
} else if (index === 12) {
// let data = {
// target_node: this.dog_target_node,
// sport_index: this.sport_index_play_music3,
// message: "play_music3",
// };
// this.execute_play_music(index, data)
}
// 恢复按钮1 : 初始化所有按钮的制御状态
else if (index === 13) {
this.enabledAction()
};
},
// 开始执行导航任务
execute_navigation(index) {
// 导航按钮制御
this.disabledNavigation(index);
// 开始刷新狗的位置
this.get_dog_position_start();
},
// 暂停导航任务
execute_pausenavigation(index) {
// 导航按钮制御
this.disabledNavigation(index);
// 暂停刷新狗的位置
this.get_dog_position_stop();
},
// 恢复/继续 导航任务
execute_recovernavigation(index) {
// 导航按钮制御
this.disabledNavigation(index);
// 开始刷新狗的位置
this.get_dog_position_start();
},
// 机器狗-导航-按钮制御
disabledNavigation(index) {
// index : 0 向目的地移动
// index : 1 暂停移动
// index : 2 继续移动
// 按下-向目的地移动-按钮后, 禁用除了-暂停-按钮之外的所有按钮
// 按下-暂停-按钮后, 禁用除了-继续-按钮之外的所有按钮
// 按下-继续-按钮后, 禁用除了-暂停-按钮之外的所有按钮
// -向目的地移动-按钮,按下后disabled, 在机器狗状态返回待命后, 解除disabled
// 禁用动作按钮
for (let idx = 0; idx < this.clickableStates.length; idx++) {
this.clickableStates[idx] = false;
if (index == 0 || index == 1) {
if (idx == (index + 1)) {
this.clickableStates[idx] = true;
}
} else if (index == 2) {
if (idx == (index - 1)) {
this.clickableStates[idx] = true;
}
}
// 因为API侧没有实现, 这里暂时保留一个-恢复-按钮
// API侧实装后, 这里可以删除
if (idx == (this.clickableStates.length - 1)) {
this.clickableStates[idx] = true;
}
};
},
// 执行左侧列表里面的一系列任务
execute_action(index, data) {
//this.disabledAction(index)
},
// 机器狗-按钮恢复
enabledAction() {
// 启用动作按钮
for (let idx = 0; idx < this.clickableStates.length; idx++) {
this.clickableStates[idx] = true;
if (idx == 2 || idx == 1) {
this.clickableStates[idx] = false;
}
}
},
// 执行拍照任务
execute_photos() {
// let data = {
// target_node: this.dog_target_node,
// };
// Message.success("photo start");
// POST("/go2-patrol/v1/photos", data).then((success) => {
// console.log(success, "开始执行拍照动作");
// if (success.code == 200) {
// console.log(success, "拍照动作执行完毕");
// Message.success("拍照成功");
// this.get_photo_list(this.dog_target_node)
// } else {
// Message.error("拍照失败");
// }
// });
this.currentIndex = -1;
},
get_dog_position_start() {
// 定时更新方法2 : 对应机器狗位置显示
// 只有在点击了[移动]按钮之后才能才开始不停刷新, 所以设置了开关
// if (!this.interval2) {
// // 如果定时器尚未启动,则启动定时器
// this.interval2 = setInterval(this.refreshDogPosition, 5000); // 5秒更新一次
// this.interval3 = setInterval(this.getNavigationStatus, 5000); // 5秒更新一次
// }
},
get_dog_position_stop() {
// 清除-狗导航位置-定时器
// clearInterval(this.interval2);
// this.interval2 = null; // 重置-狗导航位置-定时器ID
// // 清除-狗导航状态-定时器
// clearInterval(this.interval3);
// this.interval3 = null; // 重置-狗导航状态-定时器ID
},
}
}
</script>
<style lang="scss">
.dog_box {
box-sizing: border-box;
height: 100vh;
width: 750rpx;
background: $dog_bg;
overflow: hidden;
.dog_nav {
background: $dog-nav-bg;
box-sizing: border-box;
height: 40rpx;
width: 100%;
display: flex;
justify-content: space-between;
text-align: center;
align-items: center;
padding: 0px $dog-padding;
.nav_title {
color: white;
font-size: 13.67rpx;
}
.nav_opt {
.nav_opt_btn {
background: $dog-btn;
color: white;
font-size: 7.81rpx;
width: 61rpx;
height: 20rpx;
line-height: 20rpx;
}
}
}
.dog_container {
width: 100%;
height: calc(100vh - 40rpx);
display: flex;
.aside_left {
flex: 2;
background: white;
height: 100%;
overflow: hidden auto;
.content {
.aside_left_btn {
background: $dog-btn;
color: white;
font-size: $dog-font;
width: 90%;
height: 31.25rpx;
line-height: 31.25rpx;
margin-top: 5.86rpx;
}
.item_active {
background: $dog-btn;
}
.item_disabled {
background: $dog-btn-disabled;
}
}
}
.main {
width: 429.69rpx;
height: 100%;
margin: 0 11.72rpx;
box-sizing: border-box;
overflow: hidden auto;
display: flex;
flex-direction: column;
.cadImage {
// margin: $dog-margin;
width: 100%;
height: 257.81rpx;
background: white;
padding: 11.72rpx;
box-sizing: border-box;
margin: 11.72rpx 0px;
border-radius: 5px;
display: flex;
flex-direction: column;
.title{
font-size: 11.72rpx;
font-weight: bold;
}
.image {
width: 390.63rpx;
height: 234.38rpx;
margin: auto;
}
}
.cadBtn {
flex: 1;
display: flex;
flex-direction: column-reverse;
.content {
width: 100%;
height: 23.44rpx;
background: white;
display: flex;
align-items: center;
border-radius: 5px;
margin-bottom: 10px;
}
}
}
.aside_right {
flex: 3;
background: white;
box-sizing: border-box;
padding: $dog-padding;
height: 100%;
overflow: hidden auto;
.content {
display: flex;
flex-direction: column;
height: 100%;
.top {
flex: 2;
display: flex;
flex-direction: column;
.title {
font-size: 11.72rpx;
font-weight: bold;
margin-bottom: 20px;
}
.image {
margin: auto;
width: 117.19rpx;
height: 78.13rpx;
// aspect-ratio: 2 / 1;
}
}
.btn {
flex: 3;
margin-top: $dog-margin;
.title {
font-size: 11.72rpx;
font-weight: bold;
margin-bottom: 7.81rpx;
}
.table {}
}
}
}
}
}
.aside_left button:last-child {
margin-bottom: 10px;
}
</style>
2***@qq.com (作者)
vue2 再就是我感觉可能是我要打包成横屏的原因 我正在查配置横屏应该怎么配置。谢谢您的回复
2024-12-26 11:04