Ilia Miheev
399 lines
12 KiB
Vue
399 lines
12 KiB
Vue
<script setup>
|
|
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 "./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 = ref("");
|
|
|
|
onMounted(() => {
|
|
for (let i = 0; i < 100; i++) {
|
|
numbers.value.push({
|
|
variable: [],
|
|
x: i % 10,
|
|
y: 9 - Math.floor(i / 10),
|
|
index: i,
|
|
isPlatform: false,
|
|
isQR: false,
|
|
BgImg: 'images/ArUco-marker.jpg'
|
|
});
|
|
}
|
|
});
|
|
|
|
function setNumber(item) {
|
|
let valueOfMarker = item.variable[0];
|
|
//если в клетке нет числа, то оно поставится
|
|
if (valueOfMarker === "") {
|
|
item.variable.push(String(clickCount.value));
|
|
listOfTrips.value.push(item);
|
|
clickCount.value++;
|
|
} else {
|
|
//если нажимаем на ранее отмеченную клетку, то выводится ошибка
|
|
if (item.variable.at(-1) === clickCount.value - 1) {
|
|
izitoast.error({
|
|
title: "Ошибка",
|
|
message: "Нельзя выбирать один и тот же aruco маркер 2 раза подряд",
|
|
});
|
|
return;
|
|
}
|
|
listOfTrips.value.push(item);
|
|
item.variable.push(clickCount.value);
|
|
clickCount.value++;
|
|
}
|
|
}
|
|
|
|
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>>", '');
|
|
}
|
|
isModalVisible.value = true;
|
|
}
|
|
|
|
function cancel() {
|
|
if (clickCount.value === 1) {
|
|
return;
|
|
}
|
|
listOfTrips.value.at(-1).variable.pop();
|
|
listOfTrips.value.pop();
|
|
clickCount.value--;
|
|
}
|
|
|
|
function cleanResult() {
|
|
clickCount.value = 1;
|
|
listOfTrips.value.forEach(item => {
|
|
item.isPlatform = false;
|
|
item.isQR = false;
|
|
item.variable = [];
|
|
item.BgImg = 'images/ArUco-marker.jpg'
|
|
})
|
|
listOfTrips.value = [];
|
|
}
|
|
|
|
// Обрабатываем нажатие Ctrl + Z
|
|
const handleKeydown = (event) => {
|
|
if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
|
|
event.preventDefault();
|
|
cancel();
|
|
}
|
|
};
|
|
useEventListener("keydown", handleKeydown);
|
|
|
|
function copyAndToast(text) {
|
|
copyToclipboard(text);
|
|
izitoast.success({
|
|
title: 'Успешно',
|
|
message: 'Код скопирован в буфер обмена'
|
|
})
|
|
isModalVisible.value = false
|
|
}
|
|
|
|
function handleDownloadBtn() {
|
|
// Создание файла
|
|
const downloadUrl = ref('');
|
|
const blob = new Blob([finallyText.value], {type: 'text/plain'});
|
|
downloadUrl.value = URL.createObjectURL(blob);
|
|
// Задержка для избежания ошибок в некоторых браузерах
|
|
setTimeout(() => {
|
|
// Загрузка
|
|
const link = document.createElement('a');
|
|
link.href = downloadUrl.value;
|
|
link.download = 'itinerary.py';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}, 0);
|
|
|
|
izitoast.success({
|
|
title: 'Успешно',
|
|
message: 'Загрузка файла уже началась'
|
|
})
|
|
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)" @contextmenu.prevent="onContextMenu($event, item)"
|
|
:style="{backgroundImage: `url(${item.BgImg})`}">
|
|
{{ numbers[index].variable.join(", ") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button @click="saveResult">Сохранить</button>
|
|
<button @click="cleanResult">Очистить</button>
|
|
<button @click="cancel">Отменить</button>
|
|
</div>
|
|
<MyDropMenu/>
|
|
</div>
|
|
|
|
|
|
<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>
|
|
</template>
|
|
<template #body>
|
|
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
|
|
<p v-else>Выстройте маршрут перед сохранением кода.</p>
|
|
</template>
|
|
<template #footer>
|
|
<div v-if="listOfTrips.length">
|
|
<button @click="handleDownloadBtn">Скачать код</button>
|
|
<button @click="copyAndToast(finallyText)">Скопировать код</button>
|
|
<button @click="isModalVisible = false">ОК</button>
|
|
</div>
|
|
</template>
|
|
</MyDialog>
|
|
</template>
|
|
|
|
<style>
|
|
html {
|
|
background-image: radial-gradient(#383838e2, #222222);
|
|
}
|
|
|
|
:root {
|
|
--side: 70px;
|
|
}
|
|
|
|
.wraper {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
padding: 3px;
|
|
grid-template-columns: repeat(10, var(--side));
|
|
gap: 10px;
|
|
user-select: none;
|
|
}
|
|
|
|
.square {
|
|
width: var(--side);
|
|
height: var(--side);
|
|
background-size: cover;
|
|
border: 3px solid rgb(251, 251, 251);
|
|
cursor: pointer;
|
|
overflow-y: scroll;
|
|
|
|
background-blend-mode: multiply;
|
|
background-color: transparent;
|
|
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,
|
|
1px 1px 0 black;
|
|
}
|
|
|
|
.square:hover {
|
|
background-color: rgb(166, 162, 162);
|
|
}
|
|
|
|
.square:active {
|
|
background-color: rgb(164, 162, 162);
|
|
}
|
|
|
|
.square::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.square[data-key="90"] {
|
|
background-color: rgba(0, 2, 0, 0.638);
|
|
}
|
|
|
|
.actions {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.actions button {
|
|
border: 2px solid rgb(251, 251, 251);
|
|
padding: 15px 30px;
|
|
font-size: 15px;
|
|
background-color: #383838;
|
|
color: white;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
transition: 0.3s;
|
|
}
|
|
</style>
|