271 lines
No EOL
10 KiB
Svelte
271 lines
No EOL
10 KiB
Svelte
<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> |