Merge pull request #3 from IliaMiheev/miheev-dev
Miheev dev
This commit was merged in pull request #3.
This commit is contained in:
Ilia Miheev
Generated
+27
-8
@@ -9,6 +9,7 @@
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@imengyu/vue3-context-menu": "^1.5.4",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
@@ -615,7 +616,6 @@
|
||||
"integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.1",
|
||||
"fs-extra": "^9.0.1",
|
||||
@@ -1406,6 +1406,21 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@imengyu/vue-scroll-rect": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@imengyu/vue-scroll-rect/-/vue-scroll-rect-0.1.8.tgz",
|
||||
"integrity": "sha512-Mg7rgHlsGPO0tcMFjp1kB2BZ3oRrRtFN8MoE52jTgQnlc+Y0N6ttFnbIxOh2fc9j82uhdQ8zgZcXlFHUXeGnCA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@imengyu/vue3-context-menu": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@imengyu/vue3-context-menu/-/vue3-context-menu-1.5.4.tgz",
|
||||
"integrity": "sha512-/a6Quyn3V320/Mi6UoH+6wSTBYrln70RovT3iyfoXQQpIHpC7ZPWObzS0BXQTRlWtyJB92XmGDT703UxSO8Tvg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@imengyu/vue-scroll-rect": "^0.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@inquirer/checkbox": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-3.0.1.tgz",
|
||||
@@ -1737,7 +1752,6 @@
|
||||
"integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@inquirer/checkbox": "^3.0.1",
|
||||
"@inquirer/confirm": "^4.0.1",
|
||||
@@ -2896,7 +2910,6 @@
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2963,7 +2976,6 @@
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@@ -3181,7 +3193,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.9.0",
|
||||
"caniuse-lite": "^1.0.30001759",
|
||||
@@ -4488,6 +4499,17 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/encoding": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
|
||||
"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"iconv-lite": "^0.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/end-of-stream": {
|
||||
"version": "1.4.5",
|
||||
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
|
||||
@@ -8008,7 +8030,6 @@
|
||||
"integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.21.3",
|
||||
"postcss": "^8.4.43",
|
||||
@@ -8068,7 +8089,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
|
||||
"integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.28",
|
||||
"@vue/compiler-sfc": "3.5.28",
|
||||
@@ -8122,7 +8142,6 @@
|
||||
"integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/eslint-scope": "^3.7.7",
|
||||
"@types/estree": "^1.0.8",
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
"vite": "^5.4.21"
|
||||
},
|
||||
"dependencies": {
|
||||
"@imengyu/vue3-context-menu": "^1.5.4",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 998 B |
+38
-47
@@ -1,54 +1,45 @@
|
||||
class ColorDetect():
|
||||
def __init__(self):
|
||||
self.color = None
|
||||
def color_detection(data, print_type='str'):
|
||||
'''определение цвета'''
|
||||
|
||||
def getColor(self):
|
||||
return self.color
|
||||
frame = bridge.imgmsg_to_cv2(data, 'bgr8')
|
||||
height, width = frame.shape[:2]
|
||||
y_start = int(height * 0.33)
|
||||
y_end = int(height * 0.67)
|
||||
x_start = int(width * 0.31)
|
||||
x_end = int(width * 0.69)
|
||||
|
||||
def detect_color_callback(self, data, print_type='str'):
|
||||
'''определение цвета'''
|
||||
cropped_frame = frame[y_start:y_end, x_start:x_end]
|
||||
|
||||
if cropped_frame.size == 0:
|
||||
return
|
||||
|
||||
|
||||
frame = bridge.imgmsg_to_cv2(data, 'bgr8')
|
||||
height, width = frame.shape[:2]
|
||||
y_start = int(height * 0.33)
|
||||
y_end = int(height * 0.67)
|
||||
x_start = int(width * 0.31)
|
||||
x_end = int(width * 0.69)
|
||||
if print_type == 'rgb':
|
||||
|
||||
cropped_frame = frame[y_start:y_end, x_start:x_end]
|
||||
mean_bgr = cv2.mean(cropped_frame)[:3]
|
||||
mean_rgb = (int(mean_bgr[2]), int(mean_bgr[1]), int(mean_bgr[0]))
|
||||
color = str(mean_rgb)
|
||||
|
||||
|
||||
elif print_type == 'str':
|
||||
|
||||
# Получаем средние значения BGR
|
||||
mean_bgr = cv2.mean(cropped_frame)[:3]
|
||||
b, g, r = int(mean_bgr[0]), int(mean_bgr[1]), int(mean_bgr[2])
|
||||
|
||||
if cropped_frame.size == 0:
|
||||
return
|
||||
|
||||
if b > g + 20 and b > r + 20 and b > 100 + 20:
|
||||
color = 'blue'
|
||||
elif g > b + 20 and g > r + 20 and g > 100:
|
||||
color = 'green'
|
||||
elif r > b + 20 and r > g + 20 and r > 100:
|
||||
color = 'red'
|
||||
elif r > 150 and g > 150 and g > 150:
|
||||
color= 'white'
|
||||
else:
|
||||
color = None
|
||||
|
||||
if print_type == 'rgb':
|
||||
|
||||
mean_bgr = cv2.mean(cropped_frame)[:3]
|
||||
mean_rgb = (int(mean_bgr[2]), int(mean_bgr[1]), int(mean_bgr[0]))
|
||||
self.color = str(mean_rgb)
|
||||
|
||||
|
||||
elif print_type == 'str':
|
||||
|
||||
# Получаем средние значения BGR
|
||||
mean_bgr = cv2.mean(cropped_frame)[:3]
|
||||
b, g, r = int(mean_bgr[0]), int(mean_bgr[1]), int(mean_bgr[2])
|
||||
|
||||
|
||||
if b > g and b > r and b > 100:
|
||||
self.color = 'blue'
|
||||
elif g > b and g > r and g > 100:
|
||||
self.color = 'green'
|
||||
elif r > b and r > g and r > 100:
|
||||
self.color = 'red'
|
||||
else:
|
||||
self.color = None
|
||||
|
||||
#в MAIN для вызова функции должно быть:
|
||||
# cd = ColorDetect()
|
||||
#color_sub = rospy.Subscriber('main_camera/image_raw', Image,
|
||||
#lambda img: cd.detect_color_callback(img, print_type='rgb'),
|
||||
#queue_size=1)
|
||||
# print(cd.getColor())
|
||||
#rospy.sleep(2)
|
||||
#color_sub.unregister()
|
||||
<<separator>>
|
||||
color_sub = rospy.Subscriber('main_camera/image_raw', Image, lambda img: color_detection(img, print_type='rgb'), queue_size=1)
|
||||
rospy.sleep(2)
|
||||
color_sub.unregister()
|
||||
@@ -17,6 +17,9 @@ get_telemetry = rospy.ServiceProxy('get_telemetry', srv.GetTelemetry) #сеов
|
||||
navigate = rospy.ServiceProxy('navigate', srv.Navigate) #сервис для полета по указаным координатам
|
||||
land = rospy.ServiceProxy('land', Trigger) #сервис для посадки
|
||||
|
||||
rospy.init_node('flight')
|
||||
bridge = CvBridge()
|
||||
|
||||
|
||||
def navigate_wait(x=0, y=0, z=1, speed=0.5, frame_id='aruco_map', auto_arm=False, tolerance=0.2,sleep=2):
|
||||
"""
|
||||
@@ -37,7 +40,7 @@ def navigate_wait(x=0, y=0, z=1, speed=0.5, frame_id='aruco_map', auto_arm=False
|
||||
def emergency_stop():
|
||||
|
||||
"""Функция экстренной остановки, срабатывает при нажатии Ctrl + C"""
|
||||
|
||||
|
||||
print("\n" + "="*50)
|
||||
print("EMERGENCY STOP ACTIVATED!")
|
||||
print("="*50)
|
||||
@@ -85,14 +88,16 @@ def signal_handler(sig, frame):
|
||||
|
||||
signal.signal(signal.SIGINT, signal_handler)
|
||||
|
||||
<<qr_function>>
|
||||
<<ColorDetect>>
|
||||
|
||||
def main():
|
||||
navigate_wait(z=1,frame_id='body',auto_arm=True) #должно быть. включает моторы и поднимает дрон на метр вверх
|
||||
#в дальнейшем не передавать переменной auto_arm значение True
|
||||
|
||||
|
||||
<<navigate_wait>>
|
||||
|
||||
<<main>>
|
||||
|
||||
|
||||
land() #посадка
|
||||
|
||||
|
||||
+10
-24
@@ -1,26 +1,12 @@
|
||||
class QrDetect():
|
||||
def __init__(self):
|
||||
self.qr_data = ''
|
||||
|
||||
def getQrData(self):
|
||||
return self.qr_data
|
||||
def qr_detection(data):
|
||||
cv_image = bridge.imgmsg_to_cv2(data, 'bgr8')
|
||||
barcodes = pyzbar.decode(cv_image)
|
||||
|
||||
def qr_detection(self,data):
|
||||
'''сканирование qr кода'''
|
||||
if self.qr_data!= '':
|
||||
return
|
||||
cv_image = bridge.imgmsg_to_cv2(data, 'bgr8')
|
||||
barcodes = pyzbar.decode(cv_image)
|
||||
if barcodes:
|
||||
qr_data = barcodes[0].data.decode('utf-8')
|
||||
return qr_data
|
||||
|
||||
if barcodes:
|
||||
self.qr_data = barcodes[0].data.decode('utf-8')
|
||||
|
||||
|
||||
#в MAIN для вызова функции необходимо следующее:
|
||||
#1. создаём и вызываем подписчика, который вызывает функцию чтения кьюаркода
|
||||
qd = QrDetect()
|
||||
qr_sub = rospy.Subscriber('main_camera/image_raw',Image, qd.qr_detection,queue_size=1)
|
||||
#2. задаём время работы подписчика (за 1 секунду примерно 20 раз вызывается функция)
|
||||
rospy.sleep(2)
|
||||
#3. выключаем подписчика
|
||||
qr_sub.unregister()
|
||||
<<separator>>
|
||||
qr_sub = rospy.Subscriber('main_camera/image_raw', Image, qr_detection, queue_size=1)
|
||||
rospy.sleep(2)
|
||||
qr_sub.unregister()
|
||||
+200
-54
@@ -1,16 +1,17 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from "vue";
|
||||
import izitoast from "./izitoast";
|
||||
import {ref, onMounted, h} from "vue";
|
||||
import izitoast from "./shared/izitoast";
|
||||
import {useEventListener} from "@vueuse/core";
|
||||
import MyDialog from "./components/MyDialog.vue";
|
||||
import MyDropMenu from "./components/MyDropMenu.vue";
|
||||
import copyToclipboard from "./copyToclipboard";
|
||||
import copyToclipboard from "./shared/copyToclipboard";
|
||||
import ContextMenu from "@imengyu/vue3-context-menu";
|
||||
|
||||
const numbers = ref([]); // Инициализируем массив с пустыми строками
|
||||
const clickCount = ref(1); // Счетчик нажатий
|
||||
const listOfTrips = ref([]);
|
||||
const isModalVisible = ref(false);
|
||||
let finallyText = "";
|
||||
let finallyText = ref("");
|
||||
|
||||
onMounted(() => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
@@ -19,6 +20,9 @@ onMounted(() => {
|
||||
x: i % 10,
|
||||
y: 9 - Math.floor(i / 10),
|
||||
index: i,
|
||||
isPlatform: false,
|
||||
isQR: false,
|
||||
BgImg: 'images/ArUco-marker.jpg'
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -31,56 +35,89 @@ function setNumber(item) {
|
||||
listOfTrips.value.push(item);
|
||||
clickCount.value++;
|
||||
} else {
|
||||
//если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
|
||||
listOfTrips.value.push(item);
|
||||
if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
|
||||
//если нажимаем на ранее отмеченную клетку, то выводится ошибка
|
||||
if (item.variable.at(-1) === clickCount.value - 1) {
|
||||
izitoast.error({
|
||||
title: "Ошибка",
|
||||
message: "Нельзя выбирать один и тот же aruco маркер 2 раза подряд",
|
||||
});
|
||||
return;
|
||||
}
|
||||
numbers.value[item.index].variable.push(clickCount.value);
|
||||
listOfTrips.value.push(item);
|
||||
item.variable.push(clickCount.value);
|
||||
clickCount.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function saveResult() {
|
||||
let navigate_waites = "";
|
||||
for (const item of listOfTrips.value) {
|
||||
navigate_waites += `\tnavigate_wait(${item.x}, ${item.y})\n`;
|
||||
async function saveResult() {
|
||||
finallyText.value = "";
|
||||
const mainCode = ref("");
|
||||
const colorDetectClass = ref("");
|
||||
const QRDetectClass = ref("");
|
||||
const colorDetectCode = ref("");
|
||||
const QRDetectCode = ref("");
|
||||
const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
|
||||
const isUsedQR = listOfTrips.value.some(item => item.isQR);
|
||||
|
||||
if (isUsedPlatform) {
|
||||
const response = await fetch("/shablons/color.txt")
|
||||
let textOfCode = await response.text()
|
||||
textOfCode = textOfCode.split('<<separator>>')
|
||||
colorDetectClass.value = textOfCode[0]
|
||||
colorDetectCode.value += `\t${textOfCode[1].trim()}\n`;
|
||||
}
|
||||
|
||||
if (isUsedQR) {
|
||||
const response = await fetch("/shablons/qr.txt")
|
||||
let textOfCode = await response.text()
|
||||
textOfCode = textOfCode.split('<<separator>>')
|
||||
QRDetectClass.value = textOfCode[0]
|
||||
QRDetectCode.value += `\t${textOfCode[1].trim()}\n`;
|
||||
}
|
||||
|
||||
for (const item of listOfTrips.value) {
|
||||
mainCode.value += `\tnavigate_wait(${item.x}, ${item.y})\n`;
|
||||
if (item.isPlatform) {
|
||||
mainCode.value += colorDetectCode.value + '\n'
|
||||
}
|
||||
if (item.isQR) {
|
||||
mainCode.value += QRDetectCode.value + '\n'
|
||||
}
|
||||
}
|
||||
const response = await fetch("/shablons/emergency_and_navigate.txt")
|
||||
let textOfCode = await response.text()
|
||||
finallyText.value = textOfCode.replace("<<main>>", mainCode.value);
|
||||
if (isUsedPlatform) {
|
||||
finallyText.value = finallyText.value.replace("<<ColorDetect>>", colorDetectClass.value);
|
||||
} else {
|
||||
finallyText.value = finallyText.value.replace("<<ColorDetect>>", '');
|
||||
}
|
||||
if (isUsedQR) {
|
||||
finallyText.value = finallyText.value.replace("<<qr_function>>", QRDetectClass.value);
|
||||
} else {
|
||||
finallyText.value = finallyText.value.replace("<<qr_function>>", '');
|
||||
}
|
||||
fetch("/shablons/emergency_and_navigate.txt")
|
||||
.then((response) => response.text())
|
||||
.then((textOfCode) => {
|
||||
finallyText = textOfCode.replace("<<navigate_wait>>", navigate_waites);
|
||||
});
|
||||
isModalVisible.value = true;
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
numbers.value[listOfTrips.value.at(-1).index].variable.pop();
|
||||
listOfTrips.value.pop();
|
||||
|
||||
if (clickCount.value === 1) {
|
||||
return;
|
||||
} else {
|
||||
clickCount.value--;
|
||||
}
|
||||
listOfTrips.value.at(-1).variable.pop();
|
||||
listOfTrips.value.pop();
|
||||
clickCount.value--;
|
||||
}
|
||||
|
||||
function cleanResult() {
|
||||
clickCount.value = 1;
|
||||
numbers.value = [];
|
||||
listOfTrips.value.forEach(item => {
|
||||
item.isPlatform = false;
|
||||
item.isQR = false;
|
||||
item.variable = [];
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
})
|
||||
listOfTrips.value = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
numbers.value.push({
|
||||
variable: [],
|
||||
x: i % 10,
|
||||
y: 9 - Math.floor(i / 10),
|
||||
index: i,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Обрабатываем нажатие Ctrl + Z
|
||||
@@ -102,10 +139,9 @@ function copyAndToast(text) {
|
||||
}
|
||||
|
||||
function handleDownloadBtn() {
|
||||
console.log(finallyText)
|
||||
// Создание файла
|
||||
const downloadUrl = ref('');
|
||||
const blob = new Blob([finallyText], {type: 'text/plain'});
|
||||
const blob = new Blob([finallyText.value], {type: 'text/plain'});
|
||||
downloadUrl.value = URL.createObjectURL(blob);
|
||||
// Задержка для избежания ошибок в некоторых браузерах
|
||||
setTimeout(() => {
|
||||
@@ -124,18 +160,134 @@ function handleDownloadBtn() {
|
||||
})
|
||||
isModalVisible.value = false
|
||||
}
|
||||
|
||||
function createPlatform(item, color) {
|
||||
if (!item.variable.length) {
|
||||
item.variable.push(clickCount.value);
|
||||
listOfTrips.value.push(item)
|
||||
clickCount.value++
|
||||
}
|
||||
item.isPlatform = true;
|
||||
item.isQR = false;
|
||||
item.BgImg = `images/${color}-platform.jpg`
|
||||
}
|
||||
|
||||
function deletePlatform(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isPlatform = false
|
||||
}
|
||||
|
||||
function createQR(item) {
|
||||
if (!item.variable.length) {
|
||||
item.variable.push(clickCount.value);
|
||||
listOfTrips.value.push(item)
|
||||
clickCount.value++
|
||||
}
|
||||
item.isPlatform = false;
|
||||
item.isQR = true;
|
||||
item.BgImg = `images/qr.jpg`
|
||||
}
|
||||
|
||||
function deleteQR(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isQR = true
|
||||
}
|
||||
|
||||
function deletePointMap(item) {
|
||||
const index = listOfTrips.value.indexOf(item);
|
||||
if (index !== -1) {
|
||||
const deletedIndex = item.variable.at(-1)
|
||||
listOfTrips.value.forEach(square => {
|
||||
square.variable.map(itemVariable => {
|
||||
if (itemVariable === deletedIndex) {
|
||||
square.variable = []
|
||||
}
|
||||
if (itemVariable > deletedIndex) {
|
||||
square.variable[square.variable.indexOf(itemVariable)]--
|
||||
}
|
||||
})
|
||||
})
|
||||
listOfTrips.value.splice(index, 1);
|
||||
clickCount.value--
|
||||
item.isQR = false
|
||||
item.isPlatform = false
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
}
|
||||
}
|
||||
function createIcon(src) {
|
||||
return h('img', {
|
||||
src: src,
|
||||
style: {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
}
|
||||
})
|
||||
}
|
||||
function onContextMenu(e, item) {
|
||||
ContextMenu.showContextMenu({
|
||||
theme: 'mac dark',
|
||||
x: e.x,
|
||||
y: e.y,
|
||||
items: [
|
||||
{
|
||||
label: "Платформа",
|
||||
icon: createIcon('icons/base_square.webp'),
|
||||
children: [
|
||||
{
|
||||
label: "Белая",
|
||||
onClick: () => createPlatform(item, 'white'),
|
||||
icon: createIcon('icons/white_square.webp'),
|
||||
},
|
||||
{
|
||||
label: "Синяя",
|
||||
onClick: () => createPlatform(item, 'blue'),
|
||||
icon: createIcon('icons/blue_square.webp'),
|
||||
},
|
||||
{
|
||||
label: "Красная",
|
||||
onClick: () => createPlatform(item, 'red'),
|
||||
icon: createIcon('icons/red_square.webp'),
|
||||
},
|
||||
{
|
||||
label: "Удалить",
|
||||
onClick: () => deletePlatform(item),
|
||||
icon: createIcon('icons/trash.webp'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "QR код",
|
||||
icon: createIcon('icons/qr_code.png'),
|
||||
children: [
|
||||
{
|
||||
label: "Добавить",
|
||||
onClick: () => createQR(item),
|
||||
icon: createIcon('icons/plus.webp')
|
||||
},
|
||||
{
|
||||
label: "Удалить",
|
||||
onClick: () => deleteQR(item),
|
||||
icon: createIcon('icons/trash.webp')
|
||||
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Удалить",
|
||||
icon: createIcon('icons/trash.webp'),
|
||||
onClick: () => deletePointMap(item),
|
||||
},
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wraper">
|
||||
<div class="grid">
|
||||
<div
|
||||
class="square"
|
||||
v-for="(item, index) in numbers"
|
||||
:data-key="index"
|
||||
:key="index"
|
||||
@click="setNumber(item)"
|
||||
>
|
||||
<div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index"
|
||||
@click="setNumber(item)" @contextmenu.prevent="onContextMenu($event, item)"
|
||||
:style="{backgroundImage: `url(${item.BgImg})`}">
|
||||
{{ numbers[index].variable.join(", ") }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,12 +301,8 @@ function handleDownloadBtn() {
|
||||
</div>
|
||||
|
||||
|
||||
<MyDialog
|
||||
v-show="isModalVisible"
|
||||
@close="isModalVisible = false"
|
||||
class="dialogWindow"
|
||||
:is-success=listOfTrips.length
|
||||
>
|
||||
<MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
|
||||
:is-success=Boolean(listOfTrips.length)>
|
||||
<template #header>
|
||||
<strong v-if="listOfTrips.length">Код готов!</strong>
|
||||
<strong v-else>Код не готов!</strong>
|
||||
@@ -165,9 +313,9 @@ function handleDownloadBtn() {
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="listOfTrips.length">
|
||||
<button type="button" @click="handleDownloadBtn">Скачать код</button>
|
||||
<button type="button" @click="copyAndToast(finallyText)">Скопировать код</button>
|
||||
<button type="button" @click="isModalVisible = false">ОК</button>
|
||||
<button @click="handleDownloadBtn">Скачать код</button>
|
||||
<button @click="copyAndToast(finallyText)">Скопировать код</button>
|
||||
<button @click="isModalVisible = false">ОК</button>
|
||||
</div>
|
||||
</template>
|
||||
</MyDialog>
|
||||
@@ -196,14 +344,11 @@ html {
|
||||
}
|
||||
|
||||
.square {
|
||||
width: var(--side); /* Ширина квадрата */
|
||||
height: var(--side); /* Высота квадрата */
|
||||
background-image: url("images/image.jpg");
|
||||
width: var(--side);
|
||||
height: var(--side);
|
||||
background-size: cover;
|
||||
border: 3px solid rgb(251, 251, 251);
|
||||
background-color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
overflow-y: scroll;
|
||||
|
||||
background-blend-mode: multiply;
|
||||
@@ -211,6 +356,7 @@ html {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
text-shadow: -1px -1px 0 black,
|
||||
1px -1px 0 black,
|
||||
-1px 1px 0 black,
|
||||
|
||||
+86
-79
@@ -1,36 +1,37 @@
|
||||
<template>
|
||||
<transition name="modal-fade">
|
||||
<div class="modal-backdrop" @click="closeModal">
|
||||
<div class="modal" @click.stop>
|
||||
<header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
|
||||
<slot name="header">
|
||||
<strong>Заголовок по умолчанию</strong>
|
||||
</slot>
|
||||
<button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<section class="modal-body">
|
||||
<slot name="body">Тело по умолчанию</slot>
|
||||
</section>
|
||||
<footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
|
||||
<slot name="footer">
|
||||
<button @click="closeModal">Закрыть</button>
|
||||
</slot>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="modal-fade">
|
||||
<div class="modal-backdrop" @click="closeModal">
|
||||
<div class="modal" @click.stop>
|
||||
<header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
|
||||
<slot name="header">
|
||||
<strong>Заголовок по умолчанию</strong>
|
||||
</slot>
|
||||
<button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<section class="modal-body">
|
||||
<slot name="body">Тело по умолчанию</slot>
|
||||
</section>
|
||||
<footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
|
||||
<slot name="footer">
|
||||
<button @click="closeModal">Закрыть</button>
|
||||
</slot>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emit = defineEmits(['close'])
|
||||
const props = defineProps({
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
function closeModal() {
|
||||
emit('close');
|
||||
}
|
||||
@@ -38,82 +39,88 @@ function closeModal() {
|
||||
|
||||
<style>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #2f2f2f;
|
||||
box-shadow: 2px 2px 20px 1px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
background: #2f2f2f;
|
||||
box-shadow: 2px 2px 20px 1px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.modal-header-success {
|
||||
color: #4AAE9B;
|
||||
}
|
||||
.modal-header-error {
|
||||
color: red;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-header [type = 'button'] {
|
||||
color: red;
|
||||
font-size: 25px;
|
||||
.modal-header-success {
|
||||
color: #4AAE9B;
|
||||
}
|
||||
|
||||
.modal-header-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.modal-header button {
|
||||
color: red;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid white;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid white;
|
||||
}
|
||||
.modal-footer [type = 'button'] {
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid white;
|
||||
padding: 5px;
|
||||
|
||||
.modal-footer button {
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid white;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
}
|
||||
.modal-footer-success [type = 'button'] {
|
||||
background-color: #4AAE9B;
|
||||
border: none;
|
||||
margin: 3px;
|
||||
|
||||
.modal-footer-success button {
|
||||
background-color: #4AAE9B;
|
||||
border: none;
|
||||
margin: 3px;
|
||||
}
|
||||
.modal-footer-error [type = 'button'] {
|
||||
background: red;
|
||||
border: none;
|
||||
|
||||
.modal-footer-error button {
|
||||
background: red;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
padding: 20px 10px;
|
||||
color: white
|
||||
position: relative;
|
||||
padding: 20px 10px;
|
||||
color: white
|
||||
}
|
||||
|
||||
.modal-btn-close {
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
+3
-2
@@ -28,5 +28,6 @@
|
||||
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
|
||||
createApp(App).mount('#app');
|
||||
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
|
||||
import ContextMenu from '@imengyu/vue3-context-menu'
|
||||
createApp(App).use(ContextMenu).mount('#app');
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import copy from 'copy-to-clipboard';
|
||||
import iziToast from '@/iziToast.js';
|
||||
import iziToast from '@/shared/iziToast.js';
|
||||
|
||||
function copyToclipboard(text) {
|
||||
try {
|
||||
@@ -1,4 +1,4 @@
|
||||
import iziToast from "izitoast"
|
||||
import iziToast from 'iziToast';
|
||||
|
||||
iziToast.settings({
|
||||
timeout: 3000,
|
||||
Reference in New Issue
Block a user