admin/probody
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

подогнала всё +- под один цвет/стиль

Browse Source 
- добавлены картинки аруко маркеров
- цвета изменены
- изменено положение кнопок Очистить, Сохранить и карты маркеров
This commit is contained in:
alisagerasimova
2026-02-23 21:02:30 +03:00
parent 871272563b
commit 3010041039
2 changed files with 171 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+170 -65
View File
@@ -1,38 +1,37 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from "vue";
import izitoast from "./izitoast"; import izitoast from "./izitoast";
import { useEventListener } from '@vueuse/core'; import { useEventListener } from "@vueuse/core";
import MyDialog from './components/MyDialog.vue'; import MyDialog from "./components/MyDialog.vue";
import copyToclipboard from './copyToclipboard'; import copyToclipboard from "./copyToclipboard";
const numbers = ref([]); // Инициализируем массив с пустыми строками const numbers = ref([]); // Инициализируем массив с пустыми строками
const clickCount = ref(1); // Счетчик нажатий const clickCount = ref(1); // Счетчик нажатий
const listOfTrips = ref([]) const listOfTrips = ref([]);
const isModalVisible = ref(false) const isModalVisible = ref(false);
let finallyText = ''; let finallyText = "";
onMounted(()=>{ onMounted(() => {
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
numbers.value.push({ numbers.value.push({
variable: [], variable: [],
x: i % 10, x: i % 10,
y: 9 - Math.floor(i / 10), y: 9 - Math.floor(i / 10),
index: i index: i,
}); });
} }
}) });
function setNumber(item) { function setNumber(item) {
let valueOfMarker = item.variable[0]; let valueOfMarker = item.variable[0];
//если в клетке нет числа, то оно поставится //если в клетке нет числа, то оно поставится
if (valueOfMarker === '') { if (valueOfMarker === "") {
item.variable.push(String(clickCount.value)); item.variable.push(String(clickCount.value));
listOfTrips.value.push(item); listOfTrips.value.push(item);
clickCount.value++; clickCount.value++;
} else if (valueOfMarker === clickCount.value - 1) { } else if (valueOfMarker === clickCount.value - 1) {
//если мы нажимаем на последнюю выбранную клетку, то у неё удаляется число //если мы нажимаем на последнюю выбранную клетку, то у неё удаляется число
item.variable.splice(0, 1) ; item.variable.splice(0, 1);
const index = listOfTrips.value.indexOf(item); const index = listOfTrips.value.indexOf(item);
if (index !== -1) { if (index !== -1) {
listOfTrips.value.splice(index, 1); listOfTrips.value.splice(index, 1);
@@ -40,138 +39,244 @@ function setNumber(item) {
clickCount.value--; clickCount.value--;
} else { } else {
//если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка //если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
listOfTrips.value.push(item) listOfTrips.value.push(item);
if (numbers.value[item.index].variable.at(-1) === clickCount.value-1) { if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
izitoast.error({ izitoast.error({
title:'Ошибка', title: "Ошибка",
message:'Нельзя выбирать один и тот же aruco маркер 2 раза подряд' message: "Нельзя выбирать один и тот же aruco маркер 2 раза подряд",
}) });
return return;
} }
numbers.value[item.index].variable.push(clickCount.value) numbers.value[item.index].variable.push(clickCount.value);
clickCount.value++; clickCount.value++;
} }
} }
function saveResult() { function saveResult() {
let navigate_waites = '' let navigate_waites = "";
for (const item of listOfTrips.value) { for (const item of listOfTrips.value) {
navigate_waites += `navigate_wait(${item.x}, ${item.y})\n\t`; navigate_waites += `navigate_wait(${item.x}, ${item.y})\n\t`;
} }
fetch('/shablons/emergency_and_navigate.txt') fetch("/shablons/emergency_and_navigate.txt")
.then(response => response.text()) .then((response) => response.text())
.then(textOfCode => { .then((textOfCode) => {
finallyText = textOfCode.replace('<<navigate_wait>>', navigate_waites); finallyText = textOfCode.replace("<<navigate_wait>>", navigate_waites);
}); });
isModalVisible.value = true isModalVisible.value = true;
} }
function cleanResult() { function cleanResult() {
clickCount.value = 1 clickCount.value = 1;
numbers.value = [] numbers.value = [];
listOfTrips.value = [] listOfTrips.value = [];
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
numbers.value.push({ numbers.value.push({
variable: [], variable: [],
x: i % 10, x: i % 10,
y: 9 - Math.floor(i / 10), y: 9 - Math.floor(i / 10),
index: i index: i,
}); });
} }
} }
// Обрабатываем нажатие Ctrl + Z // Обрабатываем нажатие Ctrl + Z
const handleKeydown = (event) => { const handleKeydown = (event) => {
if (event.ctrlKey && event.code === 'KeyZ' && listOfTrips.value.length ) { if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
event.preventDefault(); event.preventDefault();
numbers.value[listOfTrips.value.at(-1).index].variable.pop(); numbers.value[listOfTrips.value.at(-1).index].variable.pop();
listOfTrips.value.pop(); listOfTrips.value.pop();
if (clickCount.value === 1) { if (clickCount.value === 1) {
return return;
} else{ } else {
clickCount.value--; clickCount.value--;
} }
} }
}; };
useEventListener('keydown', handleKeydown); useEventListener("keydown", handleKeydown);
function copyAndToast(text){ function copyAndToast(text) {
copyToclipboard(text) copyToclipboard(text);
izitoast.success({ izitoast.success({
title:'Успешно', title: "Успешно",
message:'Код скопирован в буфер обмена' message: "Код скопирован в буфер обмена",
}) });
} }
</script> </script>
<template> <template>
<div class="grid"> <div class="grid">
<div <div
class="square" class="square"
v-for="(item, index) in numbers" v-for="(item, index) in numbers"
:data-key="index" :data-key="index"
:key="index" :key="index"
@click="setNumber(item)" @click="setNumber(item)"
> >
{{ numbers[index].variable.join(', ') }} {{ numbers[index].variable.join(", ") }}
</div> </div>
</div> </div>
<button
@click="saveResult"
>Сохранить</button>
<button
@click="cleanResult"
>Очистить</button>
<MyDialog v-show="isModalVisible" @close="isModalVisible = false"> <div class="SaveCleanBtn">
<button id="saveBtn" @click="saveResult">Сохранить</button>
<button id="cleanBtn" @click="cleanResult">Очистить</button>
</div>
<MyDialog
v-show="isModalVisible"
@close="isModalVisible = false"
class="dialogWindow"
>
<template #header> <template #header>
<strong v-if="listOfTrips.length">Код готов!</strong> <strong id='codeIsReady' v-if="listOfTrips.length">Код готов!</strong>
<strong v-else>Код не готов!</strong> <strong id='codeNotReady' v-else>Код не готов!</strong>
</template> </template>
<template #body> <template #body>
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p> <p v-if="listOfTrips.length" id="headText1">
<p v-else>Выстройте маршрут перед сохранением кода. Скопируйте или скачайте ваш код
</p> </p>
<p v-else>Выстройте маршрут перед сохранением кода.</p>
</template> </template>
<template #footer> <template #footer>
<div v-if="listOfTrips.length"> <div v-if="listOfTrips.length">
<button type="button" class="btn-green" @click="isModalVisible = false">Скачать код</button> <button type="button" class="btn-green" @click="isModalVisible = false">
<button type="button" class="btn-green" @click="copyAndToast(finallyText)">Скопировать код</button> Скачать код
</button>
<button
type="button"
class="btn-green"
@click="copyAndToast(finallyText)"
>
Скопировать код
</button>
</div> </div>
<button type="button" class="btn-green" @click="isModalVisible = false">ОК</button> <button type="button" class="btn-green" @click="isModalVisible = false">
ОК
</button>
</template> </template>
</MyDialog> </MyDialog>
<div class="helptext">
<p>Для формирования маршрута</p>
<p>дрона нажимайте на маркеры,</p>
<p>по которым он полетит</p>
<p>Для отмены действия</p>
<p>нажмите Ctrl + Z</p>
</div>
</template> </template>
<style> <style>
:root{ html {
background-image: radial-gradient(#383838e2, #222222);
border: 3px solid rgb(251, 251, 251);
}
:root {
--side: 70px; --side: 70px;
} }
.grid { .grid {
display: grid; display: grid;
padding: 3px;
grid-template-columns: repeat(10, var(--side)); grid-template-columns: repeat(10, var(--side));
gap: 10px; gap: 10px;
user-select: none; user-select: none;
} }
.helptext {
position: absolute;
top: 15px;
left: 20px;
font-size: 25px;
color: rgb(251, 251, 251);
}
.square { .square {
width: var(--side); /* Ширина квадрата */ width: var(--side); /* Ширина квадрата */
height: var(--side); /* Высота квадрата */ height: var(--side); /* Высота квадрата */
background-image: url("images/image.jpg");
background-size: cover;
border: 3px solid rgb(251, 251, 251);
background-color: #e0e0e0; background-color: #e0e0e0;
margin-left: 340px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
overflow-y: scroll; overflow-y: scroll;
background-blend-mode: multiply;
background-color: transparent;
transition: background-color 0.3s ease;
} }
.square:hover { .square:hover {
background-color: #d0d0d0; background-color: rgb(166, 162, 162);
}
.square:active {
background-color: rgb(164, 162, 162);
} }
.square::-webkit-scrollbar { .square::-webkit-scrollbar {
display: none; display: none;
} }
.square[data-key='90'] { .square[data-key="90"] {
background-color: red; background-color: rgba(0, 2, 0, 0.638);
} }
.SaveCleanBtn 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;
position: absolute;
}
#saveBtn {
top: 320px;
left: 15px;
}
#cleanBtn {
top: 320px;
left: 180px;
}
.modal {
background-color: #2f2f2f;
}
.modal-body{
color: beige;
size: 20px;
font-size: 20px;
}
#headText1 {
color: white;
font-size: 20px;
}
.btn-green :hover {
background-color: rgb(229, 67, 67);
}
.modal-footer [type = 'button'] {
background-color: rgba(255, 255, 255, 0.777);
color: rgb(3, 3, 3);
border: 0;
}
.modal-header [type = 'button'] {
color: red;
font-size: 25px;
}
#codeIsReady {
color: white;
}
#codeNotReady{
color:rgb(248, 8, 8);
size: 20px;
}
</style> </style>
src/Images/image.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB