Add files via upload
This commit is contained in:
GitHub
parent
392aebe0df
commit
a3243dd1ba
14 changed files with 871 additions and 0 deletions
271
AddObjectForm.svelte
Normal file
271
AddObjectForm.svelte
Normal file
|
|
@ -0,0 +1,271 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import {
|
||||
create as svgCreate,
|
||||
append as svgAppend
|
||||
} from 'tiny-svg';
|
||||
import { writable } from 'svelte/store';
|
||||
import Choices from 'choices.js';
|
||||
|
||||
let типОбъекта: 'Прибор' | 'ИсполнительныйМеханизм' = 'Прибор';
|
||||
let фиксация: 'НаМесте' | 'НаЩите' = 'НаМесте';
|
||||
let типПрибора: 'Величина' | 'Мультивеличина' = 'Величина';
|
||||
let величина: 'Напряжение' | 'Температура' = 'Напряжение';
|
||||
let уточнение: 'ИнтегрированиеСуммированиеПоВремени' | 'РазностьПерепад' | null = null;
|
||||
|
||||
interface Функция {
|
||||
тип: string;
|
||||
значение: string;
|
||||
}
|
||||
|
||||
let функции: Функция[] = [];
|
||||
|
||||
export const data = writable({'value': svgCreate('g')});
|
||||
|
||||
const функцииПоТипу = {
|
||||
ВыполняемаяФункция: [
|
||||
'Сигнализация',
|
||||
'АвтоматическоеРегулирование',
|
||||
'ВеличинаОтклоненияОтЗаданной',
|
||||
'Регистрация'],
|
||||
ФункциональныйПризнак: [
|
||||
'ЧувствительныйЭлемент',
|
||||
'Преобразование',
|
||||
'ПервичныйПоказывающийПрибор',
|
||||
'СтанцияУправления',
|
||||
'ВключениеОтключениеПереключение',
|
||||
'Преобразование',
|
||||
'VДополнительный',
|
||||
'ВспомогательныеКомпьютерныеУстройства',
|
||||
'ВспомогательныеВычислительноеУстройство',
|
||||
'ZДополнительный']};
|
||||
|
||||
function addFunction() {
|
||||
функции = [...функции, { тип: 'ВыполняемаяФункция', значение: 'Регистрация' }];
|
||||
}
|
||||
|
||||
function removeFunction(index: number) {
|
||||
функции = функции.filter((_, i) => i !== index);
|
||||
}
|
||||
|
||||
let являетсяПаз = false;
|
||||
let ручной = false;
|
||||
let направление: 'Открывается' | 'Закрывается' | 'ОстаётсяНаМесте' | null = null;
|
||||
|
||||
|
||||
function handleSubmit() {
|
||||
|
||||
data.update(() => ({value: to_svg(0, 0)}));
|
||||
|
||||
}
|
||||
|
||||
function to_svg(x, y) {
|
||||
const r = svgCreate('g');
|
||||
if (типОбъекта === 'ИсполнительныйМеханизм') {
|
||||
var circle = svgCreate('circle',
|
||||
{
|
||||
cx: x,
|
||||
cy: y - 52,
|
||||
r: '2.5mm',
|
||||
fill: "none",
|
||||
stroke: "CanvasText",
|
||||
});
|
||||
|
||||
var line = svgCreate('line',
|
||||
{
|
||||
x1: x,
|
||||
x2: x,
|
||||
y1: y,
|
||||
y2: y - 42,
|
||||
stroke: "CanvasText",
|
||||
})
|
||||
|
||||
var h = svgCreate('text',
|
||||
x: x,
|
||||
y: y,
|
||||
|
||||
)
|
||||
|
||||
svgAppend(r, circle);
|
||||
svgAppend(r, line); // здесь НЕОБХОДИМО добавить стрелки в разных направлениях TODO
|
||||
return r;
|
||||
}
|
||||
|
||||
if (являетсяПаз) {
|
||||
const w = 10;
|
||||
const h = 10;
|
||||
const outer = svgCreate('polygon', {points: `${x},${y+h} ${x+w},${y} ${x},${y-h} ${x-w},${y}`, stroke:"CanvasText", fill:"Canvas"});
|
||||
svgAppend(r, outer);
|
||||
const rect = svgCreate('rect', {x: x-w/2, y: y-h/2, width:w, height: h, stroke:"CanvasText", fill:"Canvas"})
|
||||
svgAppend(r, rect);
|
||||
} else {
|
||||
const circle = svgCreate('circle', {x: x, y: y, r: "5mm", stroke:"CanvasText", fill:"Canvas"});
|
||||
svgAppend(r, circle);
|
||||
}
|
||||
if (фиксация == "НаЩите") {
|
||||
const h = svgCreate('line', {x0: x - 5, y0: y, x1: x + 5, y1: y, stroke:"CanvasText"})
|
||||
svgAppend(r, h);
|
||||
}
|
||||
|
||||
var toText = величина ; // TODO + что-то ещё
|
||||
|
||||
return r;
|
||||
}
|
||||
|
||||
|
||||
const element = document.getElementById('choices-select');
|
||||
console.log(element);
|
||||
if (element !== null) {
|
||||
const choices = new Choices(element, {
|
||||
searchEnabled: true, // Включить поиск
|
||||
shouldSort: false, // Отключить сортировку (по умолчанию элементы остаются в заданном порядке)
|
||||
placeholder: true, // Включить плейсхолдер (если нужен)
|
||||
placeholderValue: 'Выберите величину', // Текст плейсхолдера
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<span>Тип объекта:</span>
|
||||
<select bind:value={типОбъекта}>
|
||||
<option value="Прибор">Прибор</option>
|
||||
<option value="ИсполнительныйМеханизм">Исполнительный механизм</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
{#if типОбъекта === 'Прибор'}
|
||||
<label>
|
||||
<span>Фиксация:</span>
|
||||
<select bind:value={фиксация}>
|
||||
<option value="НаМесте">На месте</option>
|
||||
<option value="НаЩите">На щите</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<span>Тип прибора:</span>
|
||||
<select bind:value={типПрибора}>
|
||||
<option value="Величина">Величина</option>
|
||||
<option value="Мультивеличина">Мультивеличина</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<span>Величина:</span>
|
||||
<select id="choices-select" bind:value={величина}>
|
||||
<option value="A">Анализ, качество</option>
|
||||
<option value="B">Пламя, горение</option>
|
||||
<option value="C">Дополнительная величина</option>
|
||||
<option value="D">Дополнительная величина</option>
|
||||
<option value="E">Напряжение</option>
|
||||
<option value="F">Расход</option>
|
||||
<option value="G">Дополнительная величина</option>
|
||||
<option value="H">Ручное воздействие</option>
|
||||
<option value="I">Ток</option>
|
||||
<option value="J">Мощность</option>
|
||||
<option value="K">Время</option>
|
||||
<option value="L">Уровень</option>
|
||||
<option value="M">Дополнительная величина</option>
|
||||
<option value="N">Дополнительная величина</option>
|
||||
<option value="O">Дополнительная величина</option>
|
||||
<option value="P">Давление</option>
|
||||
<option value="Q">Количество</option>
|
||||
<option value="E">Радиоактивность</option>
|
||||
<option value="S">Скорость, частота</option>
|
||||
<option value="T">Температура</option>
|
||||
<option value="U">Разнородные величины</option> // несколько величин ТОЛЬКО здесь
|
||||
<option value="V">Вибрация</option>
|
||||
<option value="W">Вес</option>
|
||||
<option value="X">Дополнительная величина (нерекомендованная буква)</option>
|
||||
<option value="Y">Событие</option>
|
||||
<option value="Z">Размер</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<span>Уточнение:</span>
|
||||
<select bind:value={уточнение}>
|
||||
<option value="ИнтегрированиеСуммированиеПоВремени">Интегрирование</option>
|
||||
<option value="РазностьПерепад">Разность</option>
|
||||
<option value={null}>Без уточнения</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={являетсяПаз} />
|
||||
<span>Является паз</span>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<strong>Функции<button type="button" on:click={addFunction} class="simplebutton">+</button></strong>
|
||||
{#each функции as функция, i}
|
||||
<div class="функция-элемент" style="margin-bottom: 10px;">
|
||||
<label>
|
||||
Тип функции:
|
||||
<select bind:value={функция.тип}>
|
||||
<option value="ВыполняемаяФункция">Выполняемая функция</option>
|
||||
<option value="ФункциональныйПризнак">Функциональный признак</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Значение:
|
||||
<select bind:value={функция.значение}>
|
||||
{#if функция.тип === 'ВыполняемаяФункция'}
|
||||
{#each функцииПоТипу.ВыполняемаяФункция as val}
|
||||
<option value={val}>{val}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if функция.тип === 'ФункциональныйПризнак'}
|
||||
{#each функцииПоТипу.ФункциональныйПризнак as val}
|
||||
<option value={val}>{val}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</label>
|
||||
<button type="button" on:click={() => removeFunction(i)} class="simplebutton">-</button>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
|
||||
{:else}
|
||||
<label>
|
||||
<span>Имеет ручное управление:</span>
|
||||
<input type="checkbox" bind:checked={ручной} />
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<span>Направление:</span>
|
||||
<select bind:value={направление}>
|
||||
<option value="Открывается">Открывается</option>
|
||||
<option value="Закрывается">Закрывается</option>
|
||||
<option value="ОстаётсяНаМесте">Остаётся на месте</option>
|
||||
<option value={null}>Не указано</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
{/if}
|
||||
<br/>
|
||||
<button on:click={handleSubmit}>OK</button>
|
||||
<br/>
|
||||
</div>
|
||||
<style>
|
||||
.simplebutton {
|
||||
width: 40px; /* Ширина кнопки */
|
||||
height: 40px; /* Высота кнопки должна совпадать с шириной */
|
||||
border: 1px solid lightgray;
|
||||
margin-left: 5px;
|
||||
border-radius: 50%; /* Делает кнопку круглой */
|
||||
display: inline-flex; /* Для центрирования содержимого */
|
||||
justify-content: center; /* Горизонтальное центрирование */
|
||||
align-items: center; /* Вертикальное центрирование */
|
||||
cursor: pointer; /* Изменение курсора */
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue