Сделал код для платформ
This commit is contained in:
Ilia Miheev
+116
-34
@@ -1,16 +1,17 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import {ref, onMounted} from "vue";
|
||||
import izitoast from "./izitoast";
|
||||
import { useEventListener } from "@vueuse/core";
|
||||
import {useEventListener} from "@vueuse/core";
|
||||
import MyDialog from "./components/MyDialog.vue";
|
||||
import MyDropMenu from "./components/MyDropMenu.vue";
|
||||
import copyToclipboard from "./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,8 @@ onMounted(() => {
|
||||
x: i % 10,
|
||||
y: 9 - Math.floor(i / 10),
|
||||
index: i,
|
||||
isPlatform: false,
|
||||
BgImg: 'images/ArUco-marker.jpg'
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -31,8 +34,7 @@ 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) {
|
||||
izitoast.error({
|
||||
title: "Ошибка",
|
||||
@@ -40,46 +42,59 @@ function setNumber(item) {
|
||||
});
|
||||
return;
|
||||
}
|
||||
listOfTrips.value.push(item);
|
||||
numbers.value[item.index].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 colorDetectCode = ref("");
|
||||
const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
|
||||
|
||||
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`;
|
||||
}
|
||||
|
||||
for (const item of listOfTrips.value) {
|
||||
mainCode.value += `\tnavigate_wait(${item.x}, ${item.y})\n`;
|
||||
if (isUsedPlatform) {
|
||||
mainCode.value += colorDetectCode.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);
|
||||
}
|
||||
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 {
|
||||
numbers.value[listOfTrips.value.at(-1).index].variable.pop();
|
||||
listOfTrips.value.pop();
|
||||
clickCount.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function cleanResult() {
|
||||
clickCount.value = 1;
|
||||
numbers.value = [];
|
||||
listOfTrips.value = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
numbers.value.push({
|
||||
variable: [],
|
||||
x: i % 10,
|
||||
y: 9 - Math.floor(i / 10),
|
||||
index: i,
|
||||
});
|
||||
numbers.value[i].variable = [];
|
||||
numbers.value[i].BgImg = 'images/ArUco-marker.jpg'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,10 +117,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,13 +138,84 @@ function handleDownloadBtn() {
|
||||
})
|
||||
isModalVisible.value = false
|
||||
}
|
||||
|
||||
function createPlatform(item, color) {
|
||||
if (!item.isPlatform) {
|
||||
listOfTrips.value.push(item)
|
||||
numbers.value[item.index].variable.push(clickCount.value);
|
||||
}
|
||||
item['isPlatform'] = true
|
||||
numbers.value[item.index].BgImg = `images/${color}-platform.jpg`
|
||||
clickCount.value++
|
||||
}
|
||||
|
||||
function deletePlatform(item) {
|
||||
item['isPlatform'] = false
|
||||
const index = listOfTrips.value.indexOf(item);
|
||||
if (index !== -1) {
|
||||
listOfTrips.value.splice(index, 1);
|
||||
}
|
||||
numbers.value[item.index].BgImg = 'images/ArUco-marker.jpg'
|
||||
clickCount.value--
|
||||
}
|
||||
|
||||
function onContextMenu(e, item) {
|
||||
ContextMenu.showContextMenu({
|
||||
theme: 'mac dark',
|
||||
x: e.x,
|
||||
y: e.y,
|
||||
items: [
|
||||
{
|
||||
label: "Платформы",
|
||||
children: [
|
||||
{
|
||||
label: "Белая",
|
||||
onClick: () => createPlatform(item, 'white'),
|
||||
},
|
||||
{
|
||||
label: "Синяя",
|
||||
onClick: () => createPlatform(item, 'blue'),
|
||||
},
|
||||
{
|
||||
label: "Красная",
|
||||
onClick: () => createPlatform(item, 'red'),
|
||||
},
|
||||
{
|
||||
label: "Удалить",
|
||||
onClick: () => deletePlatform(item),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "QR код",
|
||||
children: [
|
||||
{
|
||||
label: "Добавить",
|
||||
onClick: () => alert('Здесь ещё предстоит написать код')
|
||||
},
|
||||
{
|
||||
label: "Удалить",
|
||||
onClick: () => alert('Здесь ещё предстоит написать код')
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Отмена",
|
||||
onClick: () => {
|
||||
alert('Здесь ещё предстоит написать код')
|
||||
}
|
||||
},
|
||||
]
|
||||
});
|
||||
}
|
||||
</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)">
|
||||
@click="setNumber(item)" @contextmenu.prevent="onContextMenu($event, item)"
|
||||
:style="{backgroundImage: `url(${item.BgImg})`}">
|
||||
{{ numbers[index].variable.join(", ") }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,12 +225,12 @@ function handleDownloadBtn() {
|
||||
<button @click="cleanResult">Очистить</button>
|
||||
<button @click="cancel">Отменить</button>
|
||||
</div>
|
||||
<MyDropMenu />
|
||||
<MyDropMenu/>
|
||||
</div>
|
||||
|
||||
|
||||
<MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
|
||||
:is-success=Boolean(listOfTrips.length)>
|
||||
:is-success=Boolean(listOfTrips.length)>
|
||||
<template #header>
|
||||
<strong v-if="listOfTrips.length">Код готов!</strong>
|
||||
<strong v-else>Код не готов!</strong>
|
||||
@@ -189,12 +274,9 @@ html {
|
||||
.square {
|
||||
width: var(--side);
|
||||
height: var(--side);
|
||||
background-image: url("images/image.jpg");
|
||||
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;
|
||||
@@ -203,9 +285,9 @@ html {
|
||||
|
||||
color: white;
|
||||
text-shadow: -1px -1px 0 black,
|
||||
1px -1px 0 black,
|
||||
-1px 1px 0 black,
|
||||
1px 1px 0 black;
|
||||
1px -1px 0 black,
|
||||
-1px 1px 0 black,
|
||||
1px 1px 0 black;
|
||||
}
|
||||
|
||||
.square:hover {
|
||||
|
||||
Reference in New Issue
Block a user