1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
| <template>
| <ul class="btn-list" v-if="waylineAbout.isShow">
| <li class="s-btn" v-for="(item, index) in btnList" :key="index">
| <div class="title">{{ item.title }}</div>
| <div class="btn" @click="item.event">
| <img :src="item.icon" alt="icon">
| </div>
| </li>
| </ul>
| </template>
| <script lang="ts" setup>
| import { ref, computed } from 'vue'
| import { useMyStore } from '/@/store'
|
| const store = useMyStore()
|
| const getResource = (name: string) => {
| return new URL(`/src/assets/icons/${name}`, import.meta.url).href
| }
|
| // 点位按钮list
| interface sBtn {
| icon: string,
| title: string,
| event: Function
| }
|
| const btnList = ref<sBtn[]>([
| {
| icon: getResource('waylinetool/camera-on.png'),
| title: '开始录像',
| event: () => {}
| },
| {
| icon: getResource('waylinetool/camera-off.png'),
| title: '停止录像',
| event: () => {}
| },
| {
| icon: '',
| title: '开始等时间隔拍照',
| event: () => {}
| },
| {
| icon: '',
| title: '开始等距间隔拍照',
| event: () => {}
| },
| {
| icon: '',
| title: '结束间隔拍照',
| event: () => {}
| },
| {
| icon: getResource('waylinetool/xt.png'),
| title: '悬停',
| event: () => {}
| },
| {
| icon: '',
| title: '飞行器偏航角',
| event: () => {}
| },
| {
| icon: '',
| title: '云台偏航角',
| event: () => {}
| },
| {
| icon: '',
| title: '云台俯仰角',
| event: () => {}
| },
| {
| icon: getResource('waylinetool/camera.png'),
| title: '拍照',
| event: () => {}
| },
| {
| icon: getResource('waylinetool/fd.png'),
| title: '相机变焦',
| event: () => {}
| },
| {
| icon: getResource('waylinetool/create-file.png'),
| title: '创建文件夹',
| event: () => {}
| }
| ])
|
| const waylineAbout = computed(() => {
| console.log(store.state.waylineTool)
| return store.state.waylineTool
| })
|
| </script>
| <style lang="scss" scoped>
| .btn-list {
| position: absolute;
| right: 75px;
| top: 50%;
| transform: translateY(-50%);
| .s-btn {
| margin-bottom: 15px;
| display: flex;
| align-items: center;
| &:last-child {
| margin: 0;
| }
| .title {
| width: 130px;
| text-align: right;
| margin-right: 10px;
| color: #fff;
| text-shadow: 2px 2px 2px #000;
| font-weight: bold;
| }
| .btn {
| width: 34px;
| height: 34px;
| background-color: #323131;
| cursor: pointer;
| display: flex;
| justify-content: center;
| align-items: center;
| img {
| width: 20px;
| }
| }
| }
| }
| </style>
|
|
