电子地图绘制备用
This commit is contained in:
joylink_zhaoerwei
parent
c06acfd0b8
commit
5400acf7e3
|
|
@ -1 +1 @@
|
|||
Subproject commit 1f53057b3f87790ef27c91399a5bb7e890f05549
|
||||
Subproject commit 64e48a0441eedd0b7bc926ca922b2fb58075467b
|
||||
|
|
@ -7,7 +7,7 @@ const os = require('os');
|
|||
|
||||
const { exec } = require('child_process');
|
||||
|
||||
const messageDir = resolve(__dirname, '../rtss-proto-msg');
|
||||
const messageDir = resolve(__dirname, '../rtsa-proto-msg');
|
||||
const protoDir = resolve(messageDir, 'src');
|
||||
const destDir = resolve(__dirname, '../src/protos');
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<!-- 绘制图形模板属性 -->
|
||||
<div v-if="drawStore.drawMode">
|
||||
<q-card flat>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ drawStore.drawGraphicName + ' 模板' }}</div>
|
||||
</q-card-section>
|
||||
<q-separator inset></q-separator>
|
||||
</q-card>
|
||||
</div>
|
||||
<!-- 画布或图形对象属性 -->
|
||||
<div v-else-if="drawStore.selectedGraphics !== null">
|
||||
<q-card flat>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ drawStore.selectedObjName + ' 属性' }}</div>
|
||||
</q-card-section>
|
||||
<q-separator inset></q-separator>
|
||||
<template v-if="drawStore.selectedGraphics.length === 0">
|
||||
<q-card-section>
|
||||
<canvas-property></canvas-property>
|
||||
</q-card-section>
|
||||
</template>
|
||||
<template v-else-if="drawStore.selectedGraphics.length === 1">
|
||||
<q-card-section>
|
||||
<platform-property
|
||||
v-if="drawStore.selectedGraphicType === Platform.Type"
|
||||
></platform-property>
|
||||
</q-card-section>
|
||||
</template>
|
||||
<!-- <template v-else-if="drawStore.selectedGraphics.length > 1">
|
||||
<multiple-select-property></multiple-select-property>
|
||||
</template> -->
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDrawStore } from 'src/stores/electronicMap-draw-store';
|
||||
import CanvasProperty from './properties/CanvasElectronicMapProperty.vue';
|
||||
import PlatformProperty from './properties/electronicMap/PlatformProperty.vue';
|
||||
import { Platform } from 'src/graphics/electronicMap/platform/Platform';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
watch(
|
||||
() => drawStore.selectedGraphics,
|
||||
() => {}
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<q-form>
|
||||
<q-input
|
||||
outlined
|
||||
v-model.number="canvas.width"
|
||||
@blur="onUpdate"
|
||||
label="画布宽 *"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
type="number"
|
||||
v-model.number="canvas.height"
|
||||
@blur="onUpdate"
|
||||
label="画布高 *"
|
||||
lazy-rules
|
||||
:rules="[(val) => val > 0 || '画布高必须大于0']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
v-model="canvas.backgroundColor"
|
||||
@blur="onUpdate"
|
||||
label="画布背景色 *"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || '画布背景色必须设置']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color
|
||||
:model-value="canvas.backgroundColor"
|
||||
@change="
|
||||
(val) => {
|
||||
canvas.backgroundColor = val;
|
||||
onUpdate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDrawStore } from 'src/stores/electronicMap-draw-store';
|
||||
import { onMounted, onUnmounted, reactive } from 'vue';
|
||||
const drawStore = useDrawStore();
|
||||
|
||||
const canvas = reactive({
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
backgroundColor: '#ffffff',
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// console.log('画布属性表单mounted');
|
||||
const jc = drawStore.getJlCanvas();
|
||||
canvas.width = jc.properties.width;
|
||||
canvas.height = jc.properties.height;
|
||||
canvas.backgroundColor = jc.properties.backgroundColor;
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// console.log('画布属性表单unmounted');
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
// console.log('画布属性更新');
|
||||
const app = drawStore.getDrawApp();
|
||||
app.updateCanvasAndRecord({
|
||||
...canvas,
|
||||
viewportTransform: app.canvas.properties.viewportTransform,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<template>
|
||||
<q-card class="q-gutter-sm q-pa-sm">
|
||||
<q-card-section>
|
||||
<div class="text-h6">一键生成计轴配置</div>
|
||||
</q-card-section>
|
||||
<q-form ref="myForm">
|
||||
<selectConfig-utils ref="selectConfigUtils" :drawStore="drawStore" />
|
||||
<div class="q-mt-md q-gutter-md">
|
||||
<q-btn label="确认修改" color="primary" @click="onSubmit" />
|
||||
<q-btn label="返回" color="red" @click="goBack" />
|
||||
<q-btn label="生成计轴" color="primary" @click="generateAxleCounting" />
|
||||
</div>
|
||||
<div class="q-mt-md q-gutter-md">
|
||||
<q-btn
|
||||
label="检查计轴"
|
||||
color="primary"
|
||||
@click="showErrorAxleCounting"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="showCheck"
|
||||
label="上一个"
|
||||
color="primary"
|
||||
@click="clickSelectCenter(-1)"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="showCheck"
|
||||
label="下一个"
|
||||
color="primary"
|
||||
@click="clickSelectCenter(1)"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue';
|
||||
import { QForm, useQuasar } from 'quasar';
|
||||
import { JlGraphic } from 'jl-graphic';
|
||||
import { useDrawStore } from 'src/stores/electronicMap-draw-store';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
|
||||
import {
|
||||
loadGenerateAxleCountingConfig,
|
||||
setGenerateAxleCountingConfig,
|
||||
} from 'src/drawApp/electronicMapApp';
|
||||
import SelectConfigUtils from 'src/components/common/SelectConfigUtils.vue';
|
||||
import { OneClickGenerate } from 'src/graphics/electronicMap/trainWindow/oneClickDrawAssistant';
|
||||
import { AxleCounting } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
|
||||
|
||||
//供公共选择组件使用
|
||||
const filterSelect = (g: JlGraphic) => g instanceof Turnout;
|
||||
const selectConfigUtils = ref<InstanceType<typeof SelectConfigUtils> | null>(
|
||||
null
|
||||
);
|
||||
provide('filter', filterSelect);
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const $q = useQuasar();
|
||||
|
||||
onMounted(() => {
|
||||
selectConfigUtils.value.selectConfig = [
|
||||
{
|
||||
code: 'bb连接的道岔',
|
||||
refDevices: [],
|
||||
refDevicesCode: [],
|
||||
expanded: false,
|
||||
},
|
||||
{
|
||||
code: '不生成计轴的道岔组',
|
||||
refDevices: [],
|
||||
refDevicesCode: [],
|
||||
expanded: false,
|
||||
},
|
||||
];
|
||||
const generateAxleCountingConfig = loadGenerateAxleCountingConfig();
|
||||
if (generateAxleCountingConfig !== undefined) {
|
||||
selectConfigUtils.value.selectConfig.forEach(
|
||||
(generate: {
|
||||
code: string;
|
||||
refDevices: number[];
|
||||
refDevicesCode: string[];
|
||||
}) => {
|
||||
if (generate.code == 'bb连接的道岔') {
|
||||
generate.refDevices = generateAxleCountingConfig.bbConnect;
|
||||
generateAxleCountingConfig.bbConnect.forEach((id) => {
|
||||
const g = drawStore.getDrawApp().queryStore.queryById(id);
|
||||
generate.refDevicesCode.push(g.code);
|
||||
});
|
||||
} else if (generate.code == '不生成计轴的道岔组') {
|
||||
generate.refDevices = generateAxleCountingConfig.noGenerateGroup;
|
||||
generateAxleCountingConfig.noGenerateGroup.forEach((id) => {
|
||||
const g = drawStore.getDrawApp().queryStore.queryById(id);
|
||||
generate.refDevicesCode.push(g.code);
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
async function onSubmit() {
|
||||
myForm.value?.validate().then(async (res) => {
|
||||
if (res) {
|
||||
try {
|
||||
const generateAxleCountingConfig =
|
||||
new electronicMapGraphicData.GenerateAxleCountingConfig();
|
||||
selectConfigUtils.value.selectConfig.forEach(
|
||||
(generate: { code: string; refDevices: number[] }) => {
|
||||
if (generate.code == 'bb连接的道岔') {
|
||||
generateAxleCountingConfig.bbConnect = generate.refDevices;
|
||||
} else if (generate.code == '不生成计轴的道岔组') {
|
||||
generateAxleCountingConfig.noGenerateGroup = generate.refDevices;
|
||||
}
|
||||
}
|
||||
);
|
||||
setGenerateAxleCountingConfig(generateAxleCountingConfig);
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: '更新成功',
|
||||
});
|
||||
} catch (err) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: '更新失败',
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
function generateAxleCounting() {
|
||||
drawStore.oneClickType = 'AxleCounting';
|
||||
drawStore.getDrawApp().interactionPlugin(OneClickGenerate.Type).resume();
|
||||
}
|
||||
|
||||
const selectConfig = ref<
|
||||
{
|
||||
axleCountingId: number;
|
||||
axleCountingCode: string;
|
||||
}[]
|
||||
>([]);
|
||||
function showErrorAxleCounting() {
|
||||
showCheck.value = true;
|
||||
const axleCountings = drawStore
|
||||
.getDrawApp()
|
||||
.queryStore.queryByType<AxleCounting>(AxleCounting.Type);
|
||||
const erroeAxleCountings = axleCountings
|
||||
.filter(
|
||||
(g) =>
|
||||
g.datas.type ==
|
||||
electronicMapGraphicData.AxleCounting.TypeDetectionPoint.AxleCounting &&
|
||||
g.datas.axleCountingRef.length < 2
|
||||
)
|
||||
.sort((a, b) => a.position.x - b.position.x);
|
||||
erroeAxleCountings.forEach((axleCounting) => {
|
||||
selectConfig.value.push({
|
||||
axleCountingId: axleCounting.id,
|
||||
axleCountingCode: axleCounting.datas.code,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const currentIndex = ref(-1);
|
||||
const showCheck = ref(false);
|
||||
function clickSelectCenter(add: number) {
|
||||
if (
|
||||
currentIndex.value + add < 0 ||
|
||||
currentIndex.value + add >= selectConfig.value.length
|
||||
)
|
||||
return;
|
||||
currentIndex.value = currentIndex.value + add;
|
||||
const target = drawStore
|
||||
.getDrawApp()
|
||||
.queryStore.queryById(
|
||||
selectConfig.value[currentIndex.value].axleCountingId
|
||||
);
|
||||
drawStore.getDrawApp().makeGraphicCenterShow(target);
|
||||
drawStore.getDrawApp().updateSelected(target);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<q-form class="q-gutter-sm">
|
||||
<q-input outlined readonly v-model="platformModel.id" label="id" />
|
||||
<q-input
|
||||
outlined
|
||||
label="站台编号"
|
||||
type="textarea"
|
||||
@blur="onUpdate"
|
||||
v-model="platformModel.code"
|
||||
lazy-rules
|
||||
autogrow
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
label="紧急停车继电器的编号"
|
||||
type="textarea"
|
||||
@blur="onUpdate"
|
||||
v-model="platformModel.refEsbRelayCode"
|
||||
lazy-rules
|
||||
autogrow
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
v-model="platformModel.type"
|
||||
:options="platformTypeOptions"
|
||||
:map-options="true"
|
||||
:emit-value="true"
|
||||
label="站台类型"
|
||||
@update:model-value="onUpdate"
|
||||
/>
|
||||
<q-list bordered separator class="rounded-borders">
|
||||
<q-item>
|
||||
<q-item-section no-wrap class="q-gutter-y-sm column">
|
||||
<q-item-label> 关联的车站 </q-item-label>
|
||||
<div class="q-gutter-sm row">
|
||||
<q-chip square color="primary" text-color="white">
|
||||
{{ stationRelation }}
|
||||
</q-chip>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section no-wrap class="q-gutter-y-sm column">
|
||||
<q-item-label> 关联的物理区段 </q-item-label>
|
||||
<div class="q-gutter-sm row">
|
||||
<q-chip square color="primary" text-color="white">
|
||||
{{ sectionRelation }}
|
||||
</q-chip>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PlatformData } from 'src/drawApp/graphics/electronicMap/PlatformInteraction';
|
||||
import { useFormData } from 'src/components/DrawAppFormUtils';
|
||||
import { useDrawStore } from 'src/stores/electronicMap-draw-store';
|
||||
import { computed } from 'vue';
|
||||
import { Platform } from 'src/graphics/electronicMap/platform/Platform';
|
||||
import { Station } from 'src/graphics/electronicMap/station/Station';
|
||||
import { Section } from 'src/graphics/electronicMap/section/Section';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const { data: platformModel, onUpdate } = useFormData(
|
||||
new PlatformData(),
|
||||
drawStore.getDrawApp()
|
||||
);
|
||||
const platformTypeOptions = [
|
||||
{
|
||||
label: '请选择',
|
||||
value: electronicMapGraphicData.Platform.TypeOfPlatform.Unknown,
|
||||
},
|
||||
{
|
||||
label: '上行站台',
|
||||
value: electronicMapGraphicData.Platform.TypeOfPlatform.up,
|
||||
},
|
||||
{
|
||||
label: '下行站台',
|
||||
value: electronicMapGraphicData.Platform.TypeOfPlatform.down,
|
||||
},
|
||||
];
|
||||
|
||||
const stationRelation = computed(() => {
|
||||
const platform = drawStore.selectedGraphic as Platform;
|
||||
const refStations = platform?.relationManage
|
||||
.getRelationsOfGraphicAndOtherType(platform, Station.Type)
|
||||
.map((relation) => relation.getOtherGraphic<Station>(platform).datas.code);
|
||||
let refStation;
|
||||
if (refStations) {
|
||||
refStation = refStations[0];
|
||||
}
|
||||
return refStation;
|
||||
});
|
||||
const sectionRelation = computed(() => {
|
||||
const platform = drawStore.selectedGraphic as Platform;
|
||||
const refSections = platform?.relationManage
|
||||
.getRelationsOfGraphicAndOtherType(platform, Section.Type)
|
||||
.map((relation) => relation.getOtherGraphic<Section>(platform).datas.code);
|
||||
let refStation;
|
||||
if (refSections) {
|
||||
refStation = refSections[0];
|
||||
}
|
||||
return refStation;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import { toUint8Array } from 'js-base64';
|
||||
import { GraphicData, IDrawApp, IGraphicStorage, newDrawApp } from 'jl-graphic';
|
||||
import { getDraft } from 'src/api/DraftApi';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
import { useDrawStore } from 'src/stores/electronicMap-draw-store';
|
||||
import { PlatformDraw } from 'src/graphics/electronicMap/platform/PlatformDrawAssistant';
|
||||
import { PlatformTemplate } from 'src/graphics/electronicMap/platform/Platform';
|
||||
import { PlatformData } from './graphics/electronicMap/PlatformInteraction';
|
||||
|
||||
let electronicMapDrawApp: IDrawApp | null = null;
|
||||
|
||||
export function getElectronicMapDrawApp(): IDrawApp | null {
|
||||
return electronicMapDrawApp;
|
||||
}
|
||||
|
||||
export function destroyElectronicMapDrawApp(): void {
|
||||
if (electronicMapDrawApp) {
|
||||
electronicMapDrawApp.destroy();
|
||||
electronicMapDrawApp = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function initElectronicMapDrawApp(): IDrawApp {
|
||||
electronicMapDrawApp = newDrawApp({
|
||||
dataLoader: loadThDrawDatas,
|
||||
});
|
||||
const app = electronicMapDrawApp;
|
||||
new PlatformDraw(
|
||||
app,
|
||||
new PlatformTemplate(new PlatformData())
|
||||
);
|
||||
return electronicMapDrawApp;
|
||||
}
|
||||
|
||||
export async function loadThDrawDatas(): Promise<IGraphicStorage> {
|
||||
const drawStore = useDrawStore();
|
||||
const id = drawStore.draftId;
|
||||
if (!id) {
|
||||
throw new Error('获取数据异常：为获取到草稿地图ID');
|
||||
}
|
||||
const base64 = (await getDraft(id)).data;
|
||||
if (base64) {
|
||||
const storage =
|
||||
electronicMapGraphicData.ElectronicMapGraphicStorage.deserialize(
|
||||
toUint8Array(base64)
|
||||
);
|
||||
const datas: GraphicData[] = [];
|
||||
generateAxleCountingConfig = storage.generateAxleCountingConfig;
|
||||
console.log(storage, 'storage');
|
||||
return Promise.resolve({
|
||||
canvasProperty: storage.canvas,
|
||||
datas: datas,
|
||||
});
|
||||
} else {
|
||||
return Promise.resolve({
|
||||
datas: [],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function saveDrawDatas() {
|
||||
console.log(111);
|
||||
}
|
||||
|
||||
//一键生成计轴配置
|
||||
let generateAxleCountingConfig =
|
||||
new electronicMapGraphicData.GenerateAxleCountingConfig();
|
||||
export function loadGenerateAxleCountingConfig() {
|
||||
return generateAxleCountingConfig;
|
||||
}
|
||||
|
||||
export function setGenerateAxleCountingConfig(
|
||||
newScreenDoorConfig: electronicMapGraphicData.GenerateAxleCountingConfig
|
||||
) {
|
||||
generateAxleCountingConfig = newScreenDoorConfig;
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import * as pb_1 from 'google-protobuf';
|
||||
import {
|
||||
AxleCounting,
|
||||
IAxleCountingData,
|
||||
} from 'src/graphics/axleCounting/AxleCounting';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
import { KilometerSystem } from 'src/graphics/signal/Signal';
|
||||
|
||||
export class AxleCountingData
|
||||
extends GraphicDataBase
|
||||
implements IAxleCountingData
|
||||
{
|
||||
constructor(data?: graphicData.AxleCounting) {
|
||||
let axleCounting;
|
||||
if (!data) {
|
||||
axleCounting = new graphicData.AxleCounting({
|
||||
common: GraphicDataBase.defaultCommonInfo(AxleCounting.Type),
|
||||
});
|
||||
} else {
|
||||
axleCounting = data;
|
||||
}
|
||||
super(axleCounting);
|
||||
}
|
||||
|
||||
public get data(): graphicData.AxleCounting {
|
||||
return this.getData<graphicData.AxleCounting>();
|
||||
}
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get kilometerSystem(): KilometerSystem {
|
||||
if (!this.data.kilometerSystem) {
|
||||
this.data.kilometerSystem = new graphicData.KilometerSystem();
|
||||
}
|
||||
return this.data.kilometerSystem;
|
||||
}
|
||||
set kilometerSystem(v: KilometerSystem) {
|
||||
this.data.kilometerSystem = new graphicData.KilometerSystem(v);
|
||||
}
|
||||
get axleCountingRef(): graphicData.RelatedRef[] {
|
||||
return this.data.axleCountingRef;
|
||||
}
|
||||
set axleCountingRef(points: graphicData.RelatedRef[]) {
|
||||
this.data.axleCountingRef = points;
|
||||
}
|
||||
get type(): graphicData.AxleCounting.TypeDetectionPoint {
|
||||
return this.data.type;
|
||||
}
|
||||
set type(type: graphicData.AxleCounting.TypeDetectionPoint) {
|
||||
this.data.type = type;
|
||||
}
|
||||
get centralizedStations(): number[] {
|
||||
return this.data.centralizedStations;
|
||||
}
|
||||
set centralizedStations(v: number[]) {
|
||||
this.data.centralizedStations = v;
|
||||
}
|
||||
clone(): AxleCountingData {
|
||||
return new AxleCountingData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: AxleCountingData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: AxleCountingData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
import * as pb_1 from 'google-protobuf';
|
||||
import {
|
||||
IPlatformData,
|
||||
Platform,
|
||||
} from 'src/graphics/electronicMap/platform/Platform';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
import { GraphicDataBase } from '../GraphicDataBase';
|
||||
|
||||
import { IGraphicScene, GraphicInteractionPlugin, JlGraphic } from 'jl-graphic';
|
||||
|
||||
export class PlatformData extends GraphicDataBase implements IPlatformData {
|
||||
constructor(data?: electronicMapGraphicData.Platform) {
|
||||
let platform;
|
||||
if (!data) {
|
||||
platform = new electronicMapGraphicData.Platform({
|
||||
common: GraphicDataBase.defaultCommonInfo(Platform.Type),
|
||||
});
|
||||
} else {
|
||||
platform = data;
|
||||
}
|
||||
super(platform);
|
||||
}
|
||||
|
||||
public get data(): electronicMapGraphicData.Platform {
|
||||
return this.getData<electronicMapGraphicData.Platform>();
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get refStation(): number {
|
||||
return this.data.refStationId;
|
||||
}
|
||||
set refStation(v: number) {
|
||||
this.data.refStationId = v;
|
||||
}
|
||||
get refSection(): number {
|
||||
return this.data.refSectionId;
|
||||
}
|
||||
set refSection(v: number) {
|
||||
this.data.refSectionId = v;
|
||||
}
|
||||
get refEsbRelayCode(): string {
|
||||
return this.data.refEsbRelayCode;
|
||||
}
|
||||
set refEsbRelayCode(v: string) {
|
||||
this.data.refEsbRelayCode = v;
|
||||
}
|
||||
get type(): electronicMapGraphicData.Platform.TypeOfPlatform {
|
||||
return this.data.type;
|
||||
}
|
||||
set type(v: electronicMapGraphicData.Platform.TypeOfPlatform) {
|
||||
this.data.type = v;
|
||||
}
|
||||
clone(): PlatformData {
|
||||
return new PlatformData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: PlatformData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: PlatformData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
/* export class PlatformState extends GraphicStateBase implements IPlatformState {
|
||||
constructor(proto?: state.PlatformState) {
|
||||
let states;
|
||||
if (proto) {
|
||||
states = proto;
|
||||
} else {
|
||||
states = new state.PlatformState();
|
||||
}
|
||||
super(states, Platform.Type);
|
||||
}
|
||||
get id(): number {
|
||||
return this.states.id;
|
||||
}
|
||||
get code(): string {
|
||||
return this.states.id + '';
|
||||
}
|
||||
get states(): state.PlatformState {
|
||||
return this.getState<state.PlatformState>();
|
||||
}
|
||||
get empj(): boolean {
|
||||
return this.states.empj;
|
||||
}
|
||||
get spksState(): state.ReplyState[] {
|
||||
if (!this.states.spksState) {
|
||||
this.states.spksState = [new state.ReplyState()];
|
||||
}
|
||||
return this.states.spksState;
|
||||
}
|
||||
set spksState(v: state.ReplyState[]) {
|
||||
this.states.spksState = v;
|
||||
}
|
||||
get mkxJState(): state.MkxJState {
|
||||
if (!this.states.mkxJState) {
|
||||
this.states.mkxJState = new state.MkxJState();
|
||||
}
|
||||
return this.states.mkxJState;
|
||||
}
|
||||
set mkxJState(v: state.MkxJState) {
|
||||
this.states.mkxJState = v;
|
||||
}
|
||||
clone(): PlatformState {
|
||||
return new PlatformState(this.states.cloneMessage());
|
||||
}
|
||||
copyFrom(data: GraphicStateBase): void {
|
||||
pb_1.Message.copyInto(data._state, this._state);
|
||||
}
|
||||
eq(data: GraphicStateBase): boolean {
|
||||
return pb_1.Message.equals(this._state, data._state);
|
||||
}
|
||||
} */
|
||||
|
||||
export class PlatformOperateInteraction extends GraphicInteractionPlugin<Platform> {
|
||||
static Name = 'platform_operate_menu';
|
||||
constructor(app: IGraphicScene) {
|
||||
super(PlatformOperateInteraction.Name, app);
|
||||
}
|
||||
static init(app: IGraphicScene) {
|
||||
return new PlatformOperateInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Platform[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Platform.Type)
|
||||
.map((g) => g as Platform);
|
||||
}
|
||||
bind(g: Platform): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.selectable = true;
|
||||
g.on('_leftclick', this.onLeftClick, this);
|
||||
}
|
||||
|
||||
unbind(g: Platform): void {
|
||||
g.selectable = false;
|
||||
g.eventMode = 'none';
|
||||
g.off('_leftclick', this.onLeftClick, this);
|
||||
}
|
||||
onLeftClick() {
|
||||
//useLineStore().stateProCountIncrease();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
import * as pb_1 from 'google-protobuf';
|
||||
import {
|
||||
IScreenDoorData,
|
||||
IScreenDoorState,
|
||||
ScreenDoor,
|
||||
} from 'src/graphics/screenDoor/ScreenDoor';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
|
||||
import { state } from 'src/protos/device_state';
|
||||
import { useLineStore } from 'src/stores/line-store';
|
||||
import {
|
||||
ContextMenu,
|
||||
GraphicInteractionPlugin,
|
||||
IGraphicScene,
|
||||
JlGraphic,
|
||||
MenuItemOptions,
|
||||
} from 'jl-graphic';
|
||||
import { loadScreenDoorConfig } from '../commonApp';
|
||||
import { Dialog } from 'quasar';
|
||||
import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
|
||||
import ScreenDoorOperation from 'src/components/draw-app/dialogs/ScreenDoorOperation.vue';
|
||||
import { request } from 'src/protos/request';
|
||||
|
||||
export class ScreenDoorData extends GraphicDataBase implements IScreenDoorData {
|
||||
constructor(data?: graphicData.ScreenDoor) {
|
||||
let screenDoor;
|
||||
if (!data) {
|
||||
screenDoor = new graphicData.ScreenDoor({
|
||||
common: GraphicDataBase.defaultCommonInfo(ScreenDoor.Type),
|
||||
});
|
||||
} else {
|
||||
screenDoor = data;
|
||||
}
|
||||
super(screenDoor);
|
||||
}
|
||||
|
||||
public get data(): graphicData.ScreenDoor {
|
||||
return this.getData<graphicData.ScreenDoor>();
|
||||
}
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get refPlatform(): number {
|
||||
return this.data.refPlatformId;
|
||||
}
|
||||
set refPlatform(v: number) {
|
||||
this.data.refPlatformId = v;
|
||||
}
|
||||
get sonDoorAmount(): number {
|
||||
return loadScreenDoorConfig()?.sonDoorAmount || 30;
|
||||
}
|
||||
|
||||
clone(): ScreenDoorData {
|
||||
return new ScreenDoorData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: ScreenDoorData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: ScreenDoorData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
export class ScreenDoorState
|
||||
extends GraphicStateBase
|
||||
implements IScreenDoorState
|
||||
{
|
||||
constructor(proto?: state.PsdState) {
|
||||
let states;
|
||||
if (proto) {
|
||||
states = proto;
|
||||
} else {
|
||||
states = new state.PsdState();
|
||||
}
|
||||
super(states, ScreenDoor.Type);
|
||||
}
|
||||
get code(): string {
|
||||
return this.states.id + '';
|
||||
}
|
||||
get id(): number {
|
||||
return this.states.id;
|
||||
}
|
||||
set id(id: number) {
|
||||
this.states.id = id;
|
||||
}
|
||||
get asdStates(): state.AsdState[] {
|
||||
return this.states.asdStates;
|
||||
}
|
||||
set asdStates(v: state.AsdState[]) {
|
||||
this.states.asdStates = v;
|
||||
}
|
||||
get mgj() {
|
||||
return this.states.mgj;
|
||||
}
|
||||
set mgj(v: boolean) {
|
||||
this.states.mgj = v;
|
||||
}
|
||||
get zaw() {
|
||||
return this.states.zaw;
|
||||
}
|
||||
set zaw(v: boolean) {
|
||||
this.states.zaw = v;
|
||||
}
|
||||
get param(): request.PsdParam {
|
||||
return this.states.param;
|
||||
}
|
||||
set param(param: request.PsdParam) {
|
||||
this.states.param = param;
|
||||
}
|
||||
get states(): state.PsdState {
|
||||
return this.getState<state.PsdState>();
|
||||
}
|
||||
clone(): ScreenDoorState {
|
||||
return new ScreenDoorState(this.states.cloneMessage());
|
||||
}
|
||||
copyFrom(data: GraphicStateBase): void {
|
||||
pb_1.Message.copyInto(data._state, this._state);
|
||||
}
|
||||
eq(data: GraphicStateBase): boolean {
|
||||
return pb_1.Message.equals(this._state, data._state);
|
||||
}
|
||||
}
|
||||
|
||||
const setSceenDoorParam: MenuItemOptions = { name: '设置参数' };
|
||||
const sceenDoorOperateMenu: ContextMenu = ContextMenu.init({
|
||||
name: '屏蔽门操作菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [setSceenDoorParam],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export class ScreenDoorOperateInteraction extends GraphicInteractionPlugin<ScreenDoor> {
|
||||
static Name = 'screen_door_operate_menu';
|
||||
constructor(app: IGraphicScene) {
|
||||
super(ScreenDoorOperateInteraction.Name, app);
|
||||
app.registerMenu(sceenDoorOperateMenu);
|
||||
}
|
||||
static init(app: IGraphicScene) {
|
||||
return new ScreenDoorOperateInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): ScreenDoor[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === ScreenDoor.Type)
|
||||
.map((g) => g as ScreenDoor);
|
||||
}
|
||||
bind(g: ScreenDoor): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.selectable = true;
|
||||
g.on('_leftclick', this.onLeftClick, this);
|
||||
g.on('rightclick', this.onContextMenu, this);
|
||||
}
|
||||
|
||||
unbind(g: ScreenDoor): void {
|
||||
g.selectable = false;
|
||||
g.eventMode = 'none';
|
||||
g.off('_leftclick', this.onLeftClick, this);
|
||||
g.off('rightclick', this.onContextMenu, this);
|
||||
}
|
||||
onLeftClick() {
|
||||
useLineStore().stateProCountIncrease();
|
||||
}
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const screenDoor = target.getGraphic<ScreenDoor>();
|
||||
if (!screenDoor) return;
|
||||
this.app.updateSelected(screenDoor);
|
||||
const lineStore = useLineStore();
|
||||
setSceenDoorParam.handler = async () => {
|
||||
if (lineStore.deviceOpreratDialogInstance) return;
|
||||
lineStore.deviceOpreratDialogInstance = Dialog.create({
|
||||
component: ScreenDoorOperation,
|
||||
componentProps: {
|
||||
id: screenDoor.id,
|
||||
code: screenDoor.datas.code,
|
||||
sonDoorAmount: screenDoor.datas.sonDoorAmount,
|
||||
asdCodesProp: screenDoor.states.param.asdCodes,
|
||||
screenDoorForceProp: screenDoor.states.param.force,
|
||||
screenDoorFaultProp: screenDoor.states.param.fault,
|
||||
},
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
});
|
||||
};
|
||||
sceenDoorOperateMenu.open(e.global);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
import * as pb_1 from 'google-protobuf';
|
||||
import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
|
||||
import {
|
||||
ISectionData,
|
||||
ISectionState,
|
||||
Section,
|
||||
SectionType,
|
||||
} from 'src/graphics/section/Section';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
|
||||
import {
|
||||
GraphicInteractionPlugin,
|
||||
IGraphicScene,
|
||||
JlGraphic,
|
||||
MenuItemOptions,
|
||||
ContextMenu,
|
||||
} from 'jl-graphic';
|
||||
import { useLineStore } from 'src/stores/line-store';
|
||||
import { SectionGraphicHitArea } from 'src/graphics/section/SectionDrawAssistant';
|
||||
import { Dialog } from 'quasar';
|
||||
import AddTrainDialog from '../../components/draw-app/dialogs/AddTrainDialog.vue';
|
||||
import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
|
||||
import { state } from 'src/protos/device_state';
|
||||
import { getKmDistance } from '../lineScene';
|
||||
import SectionOperation from 'src/components/draw-app/dialogs/SectionOperation.vue';
|
||||
import { request } from 'src/protos/request';
|
||||
import { setAxleSectionState } from 'src/api/Simulation';
|
||||
import { errorNotify } from 'src/utils/CommonNotify';
|
||||
|
||||
export class SectionData extends GraphicDataBase implements ISectionData {
|
||||
constructor(data?: graphicData.Section) {
|
||||
let section;
|
||||
if (!data) {
|
||||
section = new graphicData.Section({
|
||||
common: GraphicDataBase.defaultCommonInfo(Section.Type),
|
||||
});
|
||||
} else {
|
||||
section = data;
|
||||
}
|
||||
super(section);
|
||||
}
|
||||
public get data(): graphicData.Section {
|
||||
return this.getData<graphicData.Section>();
|
||||
}
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get points(): IPointData[] {
|
||||
return this.data.points;
|
||||
}
|
||||
set points(points: IPointData[]) {
|
||||
this.data.points = points.map(
|
||||
(p) => new graphicData.Point({ x: p.x, y: p.y })
|
||||
);
|
||||
}
|
||||
get paRef(): graphicData.RelatedRef {
|
||||
return this.data.paRef;
|
||||
}
|
||||
set paRef(ref: graphicData.RelatedRef) {
|
||||
this.data.paRef = ref;
|
||||
}
|
||||
get pbRef(): graphicData.RelatedRef {
|
||||
return this.data.pbRef;
|
||||
}
|
||||
set pbRef(ref: graphicData.RelatedRef) {
|
||||
this.data.pbRef = ref;
|
||||
}
|
||||
get sectionType(): graphicData.Section.SectionType {
|
||||
return this.data.sectionType;
|
||||
}
|
||||
set sectionType(type: graphicData.Section.SectionType) {
|
||||
this.data.sectionType = type;
|
||||
}
|
||||
get axleCountings(): number[] {
|
||||
return this.data.axleCountings;
|
||||
}
|
||||
set axleCountings(axleCountings: number[]) {
|
||||
this.data.axleCountings = axleCountings;
|
||||
}
|
||||
get trackSectionId(): number {
|
||||
return this.data.trackSectionId;
|
||||
}
|
||||
set trackSectionId(v: number) {
|
||||
this.data.trackSectionId = v;
|
||||
}
|
||||
get isCurve(): boolean {
|
||||
return this.data.isCurve;
|
||||
}
|
||||
set isCurve(v: boolean) {
|
||||
this.data.isCurve = v;
|
||||
}
|
||||
get segmentsCount(): number {
|
||||
return this.data.segmentsCount;
|
||||
}
|
||||
set segmentsCount(v: number) {
|
||||
this.data.segmentsCount = v;
|
||||
}
|
||||
get centralizedStations(): number[] {
|
||||
return this.data.centralizedStations;
|
||||
}
|
||||
set centralizedStations(v: number[]) {
|
||||
this.data.centralizedStations = v;
|
||||
}
|
||||
get normalRunningDirection(): graphicData.Section.RunningDirection {
|
||||
return this.data.normalRunningDirection;
|
||||
}
|
||||
set normalRunningDirection(v: graphicData.Section.RunningDirection) {
|
||||
this.data.normalRunningDirection = v;
|
||||
}
|
||||
get isTurnBackZone(): boolean {
|
||||
return this.data.isTurnBackZone;
|
||||
}
|
||||
set isTurnBackZone(v: boolean) {
|
||||
this.data.isTurnBackZone = v;
|
||||
}
|
||||
get direction(): graphicData.Direction {
|
||||
return this.data.direction;
|
||||
}
|
||||
set direction(v: graphicData.Direction) {
|
||||
this.data.direction = v;
|
||||
}
|
||||
clone(): SectionData {
|
||||
return new SectionData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: SectionData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: SectionData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
export class SectionStates extends GraphicStateBase implements ISectionState {
|
||||
constructor(proto?: state.SectionState) {
|
||||
let states;
|
||||
if (proto) {
|
||||
states = proto;
|
||||
} else {
|
||||
states = new state.SectionState();
|
||||
}
|
||||
super(states, Section.Type);
|
||||
}
|
||||
get code(): string {
|
||||
return this.states.id + '';
|
||||
}
|
||||
get id(): number {
|
||||
return this.states.id;
|
||||
}
|
||||
set id(id: number) {
|
||||
this.states.id = id;
|
||||
}
|
||||
get occupied(): boolean {
|
||||
return this.states.occupied;
|
||||
}
|
||||
set occupied(occupied: boolean) {
|
||||
this.states.occupied = occupied;
|
||||
}
|
||||
get axleFault(): boolean {
|
||||
return this.states.axleFault;
|
||||
}
|
||||
set axleFault(axleFault: boolean) {
|
||||
this.states.axleFault = axleFault;
|
||||
}
|
||||
get axleDrst(): boolean {
|
||||
return this.states.axleDrst;
|
||||
}
|
||||
set axleDrst(axleDrst: boolean) {
|
||||
this.states.axleDrst = axleDrst;
|
||||
}
|
||||
get axlePdrst(): boolean {
|
||||
return this.states.axlePdrst;
|
||||
}
|
||||
set axlePdrst(axlePdrst: boolean) {
|
||||
this.states.axlePdrst = axlePdrst;
|
||||
}
|
||||
get states(): state.SectionState {
|
||||
return this.getState<state.SectionState>();
|
||||
}
|
||||
clone(): SectionStates {
|
||||
return new SectionStates(this.states.cloneMessage());
|
||||
}
|
||||
copyFrom(data: GraphicStateBase): void {
|
||||
pb_1.Message.copyInto(data._state, this._state);
|
||||
}
|
||||
eq(data: GraphicStateBase): boolean {
|
||||
return pb_1.Message.equals(this._state, data._state);
|
||||
}
|
||||
}
|
||||
|
||||
const addTrainConfig: MenuItemOptions = {
|
||||
name: '添加列车',
|
||||
};
|
||||
const setSectionParam: MenuItemOptions = { name: '设置参数' };
|
||||
const setFaultOcc: MenuItemOptions = { name: '设置故障占用' };
|
||||
const SectionOperateMenu: ContextMenu = ContextMenu.init({
|
||||
name: '区段操作菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [setSectionParam, setFaultOcc, addTrainConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export class SectionOperateInteraction extends GraphicInteractionPlugin<Section> {
|
||||
static Name = 'section_operate_menu';
|
||||
constructor(app: IGraphicScene) {
|
||||
super(SectionOperateInteraction.Name, app);
|
||||
app.registerMenu(SectionOperateMenu);
|
||||
}
|
||||
static init(app: IGraphicScene) {
|
||||
return new SectionOperateInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Section[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Section.Type)
|
||||
.map((g) => g as Section);
|
||||
}
|
||||
bind(g: Section): void {
|
||||
g.lineGraphic.eventMode = 'static';
|
||||
g.lineGraphic.cursor = 'pointer';
|
||||
g.lineGraphic.hitArea = new SectionGraphicHitArea(g);
|
||||
g.lineGraphic.selectable = true;
|
||||
g.selectable = true;
|
||||
g.labelGraphic.eventMode = 'static';
|
||||
g.labelGraphic.cursor = 'pointer';
|
||||
g.labelGraphic.selectable = true;
|
||||
g.on('_leftclick', this.onLeftClick, this);
|
||||
g.on('rightclick', this.onContextMenu, this);
|
||||
}
|
||||
|
||||
unbind(g: Section): void {
|
||||
g.lineGraphic.eventMode = 'none';
|
||||
g.lineGraphic.scalable = false;
|
||||
g.lineGraphic.selectable = false;
|
||||
g.selectable = false;
|
||||
g.labelGraphic.eventMode = 'none';
|
||||
g.labelGraphic.selectable = false;
|
||||
g.off('_leftclick', this.onLeftClick, this);
|
||||
g.off('rightclick', this.onContextMenu, this);
|
||||
}
|
||||
onLeftClick() {
|
||||
useLineStore().stateProCountIncrease();
|
||||
}
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const section = target.getGraphic<Section>();
|
||||
if (!section || section.datas.sectionType != SectionType.Physical) return;
|
||||
this.app.updateSelected(section);
|
||||
const lineStore = useLineStore();
|
||||
setSectionParam.handler = async () => {
|
||||
if (lineStore.deviceOpreratDialogInstance) return;
|
||||
lineStore.deviceOpreratDialogInstance = Dialog.create({
|
||||
component: SectionOperation,
|
||||
componentProps: {
|
||||
id: section.id,
|
||||
code: section.datas.code,
|
||||
axleDrst: section.states.axleDrst,
|
||||
axlePdrst: section.states.axlePdrst,
|
||||
},
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
});
|
||||
};
|
||||
setFaultOcc.handler = async () => {
|
||||
const obj = {
|
||||
simulationId: lineStore?.simulationId || '',
|
||||
mapId: lineStore.mapId as number,
|
||||
deviceId: section.id,
|
||||
operation: request.Section.Operation.SetFaultOcc,
|
||||
};
|
||||
setAxleSectionState(obj).catch((e) =>
|
||||
errorNotify('区段操作失败：' + e.title, e)
|
||||
);
|
||||
};
|
||||
addTrainConfig.disabled = !lineStore.trainConfigList;
|
||||
addTrainConfig.handler = () => {
|
||||
const relations =
|
||||
section.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
section,
|
||||
AxleCounting.Type
|
||||
);
|
||||
let AKm;
|
||||
let BKm;
|
||||
relations.forEach((item) => {
|
||||
const rp = item.getRelationParam(section);
|
||||
const other = item.getOtherGraphic(section) as AxleCounting;
|
||||
if (
|
||||
(other.datas.axleCountingRef.length > 1 &&
|
||||
other.datas.type ==
|
||||
graphicData.AxleCounting.TypeDetectionPoint.AxleCounting) ||
|
||||
other.datas.axleCountingRef.length == 1
|
||||
) {
|
||||
if (rp.getParam() == 'A') {
|
||||
AKm = other.datas.kilometerSystem;
|
||||
}
|
||||
if (rp.getParam() == 'B') {
|
||||
BKm = other.datas.kilometerSystem;
|
||||
}
|
||||
}
|
||||
});
|
||||
const d = getKmDistance(BKm, AKm);
|
||||
if (lineStore.deviceOpreratDialogInstance) return;
|
||||
lineStore.deviceOpreratDialogInstance = Dialog.create({
|
||||
title: '创建列车',
|
||||
message: '',
|
||||
component: AddTrainDialog,
|
||||
componentProps: { dev: section, kmLength: d },
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
});
|
||||
};
|
||||
SectionOperateMenu.open(e.global);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
import * as pb_1 from 'google-protobuf';
|
||||
import {
|
||||
ISignalData,
|
||||
Signal,
|
||||
ISignalState,
|
||||
KilometerSystem,
|
||||
} from 'src/graphics/signal/Signal';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
|
||||
import {
|
||||
GraphicInteractionPlugin,
|
||||
IGraphicScene,
|
||||
JlGraphic,
|
||||
MenuItemOptions,
|
||||
ContextMenu,
|
||||
} from 'jl-graphic';
|
||||
import { FederatedMouseEvent, DisplayObject } from 'pixi.js';
|
||||
import { state } from 'src/protos/device_state';
|
||||
import { useLineStore } from 'src/stores/line-store';
|
||||
import { SignalGraphicHitArea } from 'src/graphics/signal/SignalDrawAssistant';
|
||||
import { request } from 'src/protos/request';
|
||||
import { Dialog } from 'quasar';
|
||||
import SignalOperation from 'src/components/draw-app/dialogs/SignalOperation.vue'
|
||||
|
||||
export class SignalData extends GraphicDataBase implements ISignalData {
|
||||
constructor(data?: graphicData.Signal) {
|
||||
let signal;
|
||||
if (!data) {
|
||||
signal = new graphicData.Signal({
|
||||
common: GraphicDataBase.defaultCommonInfo(Signal.Type),
|
||||
});
|
||||
} else {
|
||||
signal = data;
|
||||
}
|
||||
super(signal);
|
||||
}
|
||||
public get data(): graphicData.Signal {
|
||||
return this.getData<graphicData.Signal>();
|
||||
}
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get mirror(): boolean {
|
||||
return this.data.mirror;
|
||||
}
|
||||
set mirror(v: boolean) {
|
||||
this.data.mirror = v;
|
||||
}
|
||||
get kilometerSystem(): KilometerSystem {
|
||||
if (!this.data.kilometerSystem) {
|
||||
this.data.kilometerSystem = new graphicData.KilometerSystem();
|
||||
}
|
||||
return this.data.kilometerSystem;
|
||||
}
|
||||
set kilometerSystem(v: KilometerSystem) {
|
||||
this.data.kilometerSystem = new graphicData.KilometerSystem(v);
|
||||
}
|
||||
get refDev(): graphicData.RelatedRef {
|
||||
return this.data.refDev ?? new graphicData.RelatedRef();
|
||||
}
|
||||
set refDev(v: graphicData.RelatedRef) {
|
||||
this.data.refDev = v;
|
||||
}
|
||||
get centralizedStations(): number[] {
|
||||
return this.data.centralizedStations;
|
||||
}
|
||||
set centralizedStations(v: number[]) {
|
||||
this.data.centralizedStations = v;
|
||||
}
|
||||
get mt(): graphicData.Signal.Model {
|
||||
return this.data.mt;
|
||||
}
|
||||
set mt(v: graphicData.Signal.Model) {
|
||||
this.data.mt = v;
|
||||
}
|
||||
get direction(): graphicData.Direction {
|
||||
return this.data.direction;
|
||||
}
|
||||
set direction(v: graphicData.Direction) {
|
||||
this.data.direction = v;
|
||||
}
|
||||
clone(): SignalData {
|
||||
return new SignalData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: SignalData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: SignalData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
export class SignalState extends GraphicStateBase implements ISignalState {
|
||||
constructor(proto?: state.SignalState) {
|
||||
let states;
|
||||
if (proto) {
|
||||
states = proto;
|
||||
} else {
|
||||
states = new state.SignalState();
|
||||
}
|
||||
super(states, Signal.Type);
|
||||
}
|
||||
get code(): string {
|
||||
return this.states.id + '';
|
||||
}
|
||||
get aspect(): number {
|
||||
return this.states.aspect;
|
||||
}
|
||||
set aspect(v: number) {
|
||||
this.states.aspect = v;
|
||||
}
|
||||
get param(): request.SignalParam {
|
||||
return this.states.param;
|
||||
}
|
||||
set param(v: request.SignalParam) {
|
||||
this.states.param = v;
|
||||
}
|
||||
get states(): state.SignalState {
|
||||
return this.getState<state.SignalState>();
|
||||
}
|
||||
clone(): SignalState {
|
||||
return new SignalState(this.states.cloneMessage());
|
||||
}
|
||||
copyFrom(data: GraphicStateBase): void {
|
||||
pb_1.Message.copyInto(data._state, this._state);
|
||||
}
|
||||
eq(data: GraphicStateBase): boolean {
|
||||
return pb_1.Message.equals(this._state, data._state);
|
||||
}
|
||||
}
|
||||
|
||||
const mirrorFlipConfig: MenuItemOptions = {
|
||||
name: '镜像翻转',
|
||||
};
|
||||
const setSignalParam: MenuItemOptions = {
|
||||
name: '设置参数'
|
||||
}
|
||||
const SignalEditMenu: ContextMenu = ContextMenu.init({
|
||||
name: '信号机编辑菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [mirrorFlipConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
const SignalOperateMenu: ContextMenu = ContextMenu.init({
|
||||
name: '信号机操作菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [
|
||||
setSignalParam
|
||||
// signalRedConfig,
|
||||
// signalGreenConfig,
|
||||
// signalYellowConfig,
|
||||
// signalGuideConfig,
|
||||
// signalCloseConfig,
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
export class DrawSignalInteraction extends GraphicInteractionPlugin<Signal> {
|
||||
static Name = 'signal_draw_right_menu';
|
||||
constructor(app: IGraphicScene) {
|
||||
super(DrawSignalInteraction.Name, app);
|
||||
app.registerMenu(SignalEditMenu);
|
||||
}
|
||||
static init(app: IGraphicScene) {
|
||||
return new DrawSignalInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Signal[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Signal.Type)
|
||||
.map((g) => g as Signal);
|
||||
}
|
||||
bind(g: Signal): void {
|
||||
g.on('_rightclick', this.onContextMenu, this);
|
||||
}
|
||||
|
||||
unbind(g: Signal): void {
|
||||
g.off('_rightclick', this.onContextMenu, this);
|
||||
}
|
||||
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const signal = target.getGraphic() as Signal;
|
||||
this.app.updateSelected(signal);
|
||||
mirrorFlipConfig.handler = () => {
|
||||
signal.mirror = !signal.mirror;
|
||||
};
|
||||
SignalEditMenu.open(e.global);
|
||||
}
|
||||
}
|
||||
|
||||
export class SignalOperateInteraction extends GraphicInteractionPlugin<Signal> {
|
||||
static Name = 'signal_operate_menu';
|
||||
constructor(app: IGraphicScene) {
|
||||
super(SignalOperateInteraction.Name, app);
|
||||
app.registerMenu(SignalOperateMenu);
|
||||
}
|
||||
static init(app: IGraphicScene) {
|
||||
return new SignalOperateInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Signal[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Signal.Type)
|
||||
.map((g) => g as Signal);
|
||||
}
|
||||
bind(g: Signal): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.selectable = true;
|
||||
g.lampMainBody.hitArea = new SignalGraphicHitArea(g);
|
||||
g.on('_leftclick', this.onLeftClick, this);
|
||||
g.on('rightclick', this.onContextMenu, this);
|
||||
}
|
||||
|
||||
unbind(g: Signal): void {
|
||||
g.selectable = false;
|
||||
g.eventMode = 'none';
|
||||
g.off('_leftclick', this.onLeftClick, this);
|
||||
g.off('rightclick', this.onContextMenu);
|
||||
}
|
||||
onLeftClick() {
|
||||
useLineStore().stateProCountIncrease();
|
||||
}
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const signal = target.getGraphic() as Signal;
|
||||
this.app.updateSelected(signal);
|
||||
const lineStore = useLineStore();
|
||||
|
||||
setSignalParam.handler = () => {
|
||||
if (lineStore.deviceOpreratDialogInstance) return;
|
||||
lineStore.deviceOpreratDialogInstance = Dialog.create({
|
||||
title: '信号机设置参数',
|
||||
message: '',
|
||||
component: SignalOperation,
|
||||
componentProps: {
|
||||
id: signal.datas.id,
|
||||
code: signal.datas.code,
|
||||
mt: signal.datas.mt,
|
||||
param: signal.states.param,
|
||||
},
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
});
|
||||
}
|
||||
SignalOperateMenu.open(e.global);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
import * as pb_1 from 'google-protobuf';
|
||||
import {
|
||||
IStationData,
|
||||
IStationState,
|
||||
Station,
|
||||
} from 'src/graphics/station/Station';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
|
||||
import { state } from 'src/protos/device_state';
|
||||
import { IGraphicScene, GraphicInteractionPlugin, JlGraphic } from 'jl-graphic';
|
||||
import { KilometerSystem } from 'src/graphics/signal/Signal';
|
||||
import { useLineStore } from 'src/stores/line-store';
|
||||
|
||||
export class StationData extends GraphicDataBase implements IStationData {
|
||||
constructor(data?: graphicData.Station) {
|
||||
let station;
|
||||
if (!data) {
|
||||
station = new graphicData.Station({
|
||||
common: GraphicDataBase.defaultCommonInfo(Station.Type),
|
||||
});
|
||||
} else {
|
||||
station = data;
|
||||
}
|
||||
super(station);
|
||||
}
|
||||
|
||||
public get data(): graphicData.Station {
|
||||
return this.getData<graphicData.Station>();
|
||||
}
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get stationName(): string {
|
||||
return this.data.stationName;
|
||||
}
|
||||
set stationName(v: string) {
|
||||
this.data.stationName = v;
|
||||
}
|
||||
get stationNameAcronym(): string {
|
||||
return this.data.stationNameAcronym;
|
||||
}
|
||||
set stationNameAcronym(v: string) {
|
||||
this.data.stationNameAcronym = v;
|
||||
}
|
||||
get kilometerSystem(): KilometerSystem {
|
||||
if (!this.data.kilometerSystem) {
|
||||
this.data.kilometerSystem = new graphicData.KilometerSystem();
|
||||
}
|
||||
return this.data.kilometerSystem;
|
||||
}
|
||||
set kilometerSystem(v: KilometerSystem) {
|
||||
this.data.kilometerSystem = new graphicData.KilometerSystem(v);
|
||||
}
|
||||
get concentrationStations(): boolean {
|
||||
return this.data.concentrationStations;
|
||||
}
|
||||
set concentrationStations(v: boolean) {
|
||||
this.data.concentrationStations = v;
|
||||
}
|
||||
get depots(): boolean {
|
||||
return this.data.depots;
|
||||
}
|
||||
set depots(v: boolean) {
|
||||
this.data.depots = v;
|
||||
}
|
||||
get manageStations(): number[] {
|
||||
return this.data.manageStations;
|
||||
}
|
||||
set manageStations(v: number[]) {
|
||||
this.data.manageStations = v;
|
||||
}
|
||||
clone(): StationData {
|
||||
return new StationData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: StationData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: StationData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
export class StationState extends GraphicStateBase implements IStationState {
|
||||
constructor(proto?: state.StationState) {
|
||||
let states;
|
||||
if (proto) {
|
||||
states = proto;
|
||||
} else {
|
||||
states = new state.StationState();
|
||||
}
|
||||
super(states, Station.Type);
|
||||
}
|
||||
get id(): number {
|
||||
return this.states.id;
|
||||
}
|
||||
get code(): string {
|
||||
return this.states.id + '';
|
||||
}
|
||||
// get ipRtuStusDown(): boolean {
|
||||
// return this.states.ipRtuStusDown;
|
||||
// }
|
||||
// set ipRtuStusDown(v: boolean) {
|
||||
// this.states.ipRtuStusDown = v;
|
||||
// }
|
||||
// get ipRtuStusInLocalCtrl(): boolean {
|
||||
// return this.states.ipRtuStusInLocalCtrl;
|
||||
// }
|
||||
// set ipRtuStusInLocalCtrl(v: boolean) {
|
||||
// this.states.ipRtuStusInLocalCtrl = v;
|
||||
// }
|
||||
// get ipRtuStusInCentralCtrl(): boolean {
|
||||
// return this.states.ipRtuStusInCentralCtrl;
|
||||
// }
|
||||
// set ipRtuStusInCentralCtrl(v: boolean) {
|
||||
// this.states.ipRtuStusInCentralCtrl = v;
|
||||
// }
|
||||
// get ipRtuStusInEmergencyCtrl(): boolean {
|
||||
// return this.states.ipRtuStusInEmergencyCtrl;
|
||||
// }
|
||||
// set ipRtuStusInEmergencyCtrl(v: boolean) {
|
||||
// this.states.ipRtuStusInEmergencyCtrl = v;
|
||||
// }
|
||||
get states(): state.StationState {
|
||||
return this.getState<state.StationState>();
|
||||
}
|
||||
clone(): StationState {
|
||||
return new StationState(this.states.cloneMessage());
|
||||
}
|
||||
copyFrom(data: GraphicStateBase): void {
|
||||
pb_1.Message.copyInto(data._state, this._state);
|
||||
}
|
||||
eq(data: GraphicStateBase): boolean {
|
||||
return pb_1.Message.equals(this._state, data._state);
|
||||
}
|
||||
}
|
||||
|
||||
export class StationOperateInteraction extends GraphicInteractionPlugin<Station> {
|
||||
static Name = 'station_operate_menu';
|
||||
constructor(app: IGraphicScene) {
|
||||
super(StationOperateInteraction.Name, app);
|
||||
}
|
||||
static init(app: IGraphicScene) {
|
||||
return new StationOperateInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Station[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Station.Type)
|
||||
.map((g) => g as Station);
|
||||
}
|
||||
bind(g: Station): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.selectable = true;
|
||||
g.on('_leftclick', this.onLeftClick, this);
|
||||
}
|
||||
|
||||
unbind(g: Station): void {
|
||||
g.selectable = false;
|
||||
g.eventMode = 'none';
|
||||
g.off('_leftclick', this.onLeftClick, this);
|
||||
}
|
||||
onLeftClick() {
|
||||
useLineStore().stateProCountIncrease();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
import {
|
||||
ITurnoutData,
|
||||
ITurnoutState,
|
||||
Turnout,
|
||||
TurnoutSection,
|
||||
} from 'src/graphics/turnout/Turnout';
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
|
||||
import { KilometerSystem } from 'src/graphics/signal/Signal';
|
||||
import { state } from 'src/protos/device_state';
|
||||
import {
|
||||
IGraphicScene,
|
||||
GraphicInteractionPlugin,
|
||||
JlGraphic,
|
||||
MenuItemOptions,
|
||||
ContextMenu,
|
||||
} from 'jl-graphic';
|
||||
import {
|
||||
ForkHitArea,
|
||||
TurnoutSectionHitArea,
|
||||
} from 'src/graphics/turnout/TurnoutDrawAssistant';
|
||||
import { useLineStore } from 'src/stores/line-store';
|
||||
import { Dialog } from 'quasar';
|
||||
// import AddTrainDialog from '../../components/draw-app/dialogs/AddTrainDialog.vue';
|
||||
// import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
|
||||
import TurnoutOperation from 'src/components/draw-app/dialogs/TurnoutOperation.vue';
|
||||
// import { getKmDistance } from '../lineScene';
|
||||
import { request } from 'src/protos/request';
|
||||
|
||||
function getDefaultEndPoint() {
|
||||
return {
|
||||
pointA: [new graphicData.Point([50, 0])],
|
||||
pointB: [new graphicData.Point([-50, 0])],
|
||||
pointC: [new graphicData.Point([-50, -50])],
|
||||
};
|
||||
}
|
||||
|
||||
const setTurnoutParam: MenuItemOptions = { name: '设置参数' };
|
||||
|
||||
// const addTrainConfig: MenuItemOptions = {
|
||||
// name: '添加列车',
|
||||
// };
|
||||
|
||||
const TurnoutOperationMenu: ContextMenu = ContextMenu.init({
|
||||
name: 'Turnout操作',
|
||||
groups: [{ items: [setTurnoutParam] }],
|
||||
});
|
||||
|
||||
export class TurnoutOperationPlugin extends GraphicInteractionPlugin<Turnout> {
|
||||
static Name = 'turnout_operate_menu';
|
||||
constructor(app: IGraphicScene) {
|
||||
super(TurnoutOperationPlugin.Name, app);
|
||||
app.registerMenu(TurnoutOperationMenu);
|
||||
}
|
||||
static init(app: IGraphicScene) {
|
||||
return new TurnoutOperationPlugin(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
|
||||
return grahpics.filter<Turnout>((g): g is Turnout => g instanceof Turnout);
|
||||
}
|
||||
bind(g: Turnout): void {
|
||||
g.graphics.fork.eventMode = 'static';
|
||||
g.graphics.fork.cursor = 'pointer';
|
||||
g.selectable = true;
|
||||
g.graphics.fork.hitArea = new ForkHitArea(g);
|
||||
g.graphics.sections.forEach((sectionGraphic) => {
|
||||
sectionGraphic.eventMode = 'static';
|
||||
sectionGraphic.cursor = 'pointer';
|
||||
sectionGraphic.hitArea = new TurnoutSectionHitArea(sectionGraphic);
|
||||
});
|
||||
g.on('rightclick', this.onContextMenu, this);
|
||||
g.on('_leftclick', this.onLeftClick, this);
|
||||
}
|
||||
unbind(g: Turnout): void {
|
||||
g.graphics.fork.eventMode = 'none';
|
||||
g.selectable = false;
|
||||
g.graphics.sections.forEach((sectionGraphic) => {
|
||||
sectionGraphic.eventMode = 'none';
|
||||
});
|
||||
g.off('rightclick', this.onContextMenu);
|
||||
g.off('_leftclick', this.onLeftClick, this);
|
||||
}
|
||||
onLeftClick() {
|
||||
useLineStore().stateProCountIncrease();
|
||||
}
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const turnout = target.getGraphic<Turnout>();
|
||||
if (!turnout) return;
|
||||
const lineStore = useLineStore();
|
||||
this.app.updateSelected(turnout);
|
||||
setTurnoutParam.handler = async () => {
|
||||
if (lineStore.deviceOpreratDialogInstance) return;
|
||||
lineStore.deviceOpreratDialogInstance = Dialog.create({
|
||||
title: '道岔设置参数',
|
||||
message: '',
|
||||
component: TurnoutOperation,
|
||||
componentProps: {
|
||||
id: turnout.id,
|
||||
code: turnout.datas.code,
|
||||
force: turnout.states.param.forcePosition,
|
||||
},
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
});
|
||||
};
|
||||
|
||||
// const port = (target as TurnoutSection).port;
|
||||
// addTrainConfig.disabled = !port || !lineStore.trainConfigList;
|
||||
// addTrainConfig.handler = () => {
|
||||
// const relations =
|
||||
// turnout.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
// turnout,
|
||||
// AxleCounting.Type
|
||||
// );
|
||||
// const findAc = relations.find((item) => {
|
||||
// const rp = item.getRelationParam(turnout);
|
||||
// const orp = item.getOtherRelationParam(turnout as Turnout);
|
||||
// const ac = orp.g as AxleCounting;
|
||||
// return (
|
||||
// rp.getParam() == port &&
|
||||
// ((ac.datas.axleCountingRef.length > 1 &&
|
||||
// ac.datas.type ==
|
||||
// graphicData.AxleCounting.TypeDetectionPoint.AxleCounting) ||
|
||||
// ac.datas.axleCountingRef.length == 1)
|
||||
// );
|
||||
// });
|
||||
// const oKm = turnout.datas.kilometerSystem;
|
||||
// let pKm;
|
||||
// if (findAc) {
|
||||
// const other = findAc.getOtherGraphic(turnout) as AxleCounting;
|
||||
// pKm = other.datas.kilometerSystem;
|
||||
// } else {
|
||||
// const relations =
|
||||
// turnout.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
// turnout,
|
||||
// Turnout.Type
|
||||
// );
|
||||
// const findT = relations.find((item) => {
|
||||
// const rp = item.getRelationParam(turnout);
|
||||
// return rp.getParam() == port;
|
||||
// });
|
||||
// if (findT) {
|
||||
// const other = findT.getOtherGraphic(turnout) as Turnout;
|
||||
// pKm = other.datas.kilometerSystem;
|
||||
// }
|
||||
// }
|
||||
// const d = getKmDistance(pKm, oKm);
|
||||
// if (lineStore.deviceOpreratDialogInstance) return;
|
||||
// lineStore.deviceOpreratDialogInstance = Dialog.create({
|
||||
// title: '创建列车',
|
||||
// message: '',
|
||||
// component: AddTrainDialog,
|
||||
// componentProps: { dev: turnout, kmLength: d },
|
||||
// cancel: true,
|
||||
// persistent: true,
|
||||
// });
|
||||
// };
|
||||
TurnoutOperationMenu.open(e.global);
|
||||
}
|
||||
}
|
||||
|
||||
export class TurnoutData extends GraphicDataBase implements ITurnoutData {
|
||||
constructor(data?: graphicData.Turnout) {
|
||||
let turnout = new graphicData.Turnout();
|
||||
if (!data) {
|
||||
turnout.common = GraphicDataBase.defaultCommonInfo(Turnout.Type);
|
||||
const p = getDefaultEndPoint();
|
||||
turnout.pointA = p.pointA;
|
||||
turnout.pointB = p.pointB;
|
||||
turnout.pointC = p.pointC;
|
||||
} else {
|
||||
turnout = data;
|
||||
}
|
||||
super(turnout);
|
||||
}
|
||||
get data(): graphicData.Turnout {
|
||||
return this.getData<graphicData.Turnout>();
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
get pointA(): IPointData[] {
|
||||
return this.data.pointA;
|
||||
}
|
||||
set pointA(v: IPointData[]) {
|
||||
this.data.pointA = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
|
||||
}
|
||||
get pointB(): IPointData[] {
|
||||
return this.data.pointB;
|
||||
}
|
||||
set pointB(v: IPointData[]) {
|
||||
this.data.pointB = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
|
||||
}
|
||||
get pointC(): IPointData[] {
|
||||
return this.data.pointC;
|
||||
}
|
||||
set pointC(v: IPointData[]) {
|
||||
this.data.pointC = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
|
||||
}
|
||||
get paRef(): graphicData.RelatedRef {
|
||||
return this.data.paRef;
|
||||
}
|
||||
set paRef(ref: graphicData.RelatedRef) {
|
||||
this.data.paRef = ref;
|
||||
}
|
||||
get pbRef(): graphicData.RelatedRef {
|
||||
return this.data.pbRef;
|
||||
}
|
||||
set pbRef(ref: graphicData.RelatedRef) {
|
||||
this.data.pbRef = ref;
|
||||
}
|
||||
get pcRef(): graphicData.RelatedRef {
|
||||
return this.data.pcRef;
|
||||
}
|
||||
set pcRef(ref: graphicData.RelatedRef) {
|
||||
this.data.pcRef = ref;
|
||||
}
|
||||
get kilometerSystem(): KilometerSystem {
|
||||
if (!this.data.kilometerSystem[0]) {
|
||||
this.data.kilometerSystem = [new graphicData.KilometerSystem()];
|
||||
}
|
||||
return this.data.kilometerSystem[0];
|
||||
}
|
||||
set kilometerSystem(v: KilometerSystem) {
|
||||
this.data.kilometerSystem = [new graphicData.KilometerSystem(v)];
|
||||
}
|
||||
get paTrackSectionId(): number {
|
||||
return this.data.paTrackSectionId;
|
||||
}
|
||||
set paTrackSectionId(v: number) {
|
||||
this.data.paTrackSectionId = v;
|
||||
}
|
||||
get pbTrackSectionId(): number {
|
||||
return this.data.pbTrackSectionId;
|
||||
}
|
||||
set pbTrackSectionId(v: number) {
|
||||
this.data.pbTrackSectionId = v;
|
||||
}
|
||||
get pcTrackSectionId(): number {
|
||||
return this.data.pcTrackSectionId;
|
||||
}
|
||||
set pcTrackSectionId(v: number) {
|
||||
this.data.pcTrackSectionId = v;
|
||||
}
|
||||
get switchMachineType(): graphicData.Turnout.SwitchMachineType {
|
||||
return this.data.switchMachineType;
|
||||
}
|
||||
set switchMachineType(v: graphicData.Turnout.SwitchMachineType) {
|
||||
this.data.switchMachineType = v;
|
||||
}
|
||||
get centralizedStations(): number[] {
|
||||
return this.data.centralizedStations;
|
||||
}
|
||||
set centralizedStations(v: number[]) {
|
||||
this.data.centralizedStations = v;
|
||||
}
|
||||
clone(): TurnoutData {
|
||||
return new TurnoutData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: TurnoutData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: TurnoutData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
|
||||
export class TurnoutStates extends GraphicStateBase implements ITurnoutState {
|
||||
constructor(proto?: state.SwitchState) {
|
||||
let states;
|
||||
if (proto) {
|
||||
states = proto;
|
||||
} else {
|
||||
states = new state.SwitchState();
|
||||
}
|
||||
super(states, Turnout.Type);
|
||||
}
|
||||
get code(): string {
|
||||
return this.states.id + '';
|
||||
}
|
||||
get id(): number {
|
||||
return this.states.id;
|
||||
}
|
||||
set id(id: number) {
|
||||
this.states.id = id;
|
||||
}
|
||||
get normal(): boolean {
|
||||
return this.states.normal;
|
||||
}
|
||||
set normal(normal: boolean) {
|
||||
this.states.normal = normal;
|
||||
}
|
||||
get reverse(): boolean {
|
||||
return this.states.reverse;
|
||||
}
|
||||
set reverse(reverse: boolean) {
|
||||
this.states.reverse = reverse;
|
||||
}
|
||||
get dw(): boolean {
|
||||
return this.states.dw;
|
||||
}
|
||||
set dw(dw: boolean) {
|
||||
this.states.dw = dw;
|
||||
}
|
||||
get fw(): boolean {
|
||||
return this.states.fw;
|
||||
}
|
||||
set fw(v: boolean) {
|
||||
this.states.fw = v;
|
||||
}
|
||||
get param(): request.PointsParam {
|
||||
return this.states.param;
|
||||
}
|
||||
set param(param: request.PointsParam) {
|
||||
this.states.param = param;
|
||||
}
|
||||
get qdc(): boolean {
|
||||
return this.states.qdc;
|
||||
}
|
||||
set qdc(v: boolean) {
|
||||
this.states.qdc = v;
|
||||
}
|
||||
get qfc(): boolean {
|
||||
return this.states.qfc;
|
||||
}
|
||||
set qfc(v: boolean) {
|
||||
this.states.qfc = v;
|
||||
}
|
||||
get qyc(): boolean {
|
||||
return this.states.qyc;
|
||||
}
|
||||
set qyc(v: boolean) {
|
||||
this.states.qyc = v;
|
||||
}
|
||||
get dc(): boolean {
|
||||
return this.states.dc;
|
||||
}
|
||||
set dc(v: boolean) {
|
||||
this.states.dc = v;
|
||||
}
|
||||
get fc(): boolean {
|
||||
return this.states.fc;
|
||||
}
|
||||
set fc(v: boolean) {
|
||||
this.states.fc = v;
|
||||
}
|
||||
get yc(): boolean {
|
||||
return this.states.yc;
|
||||
}
|
||||
set yc(v: boolean) {
|
||||
this.states.yc = v;
|
||||
}
|
||||
get occupied(): boolean {
|
||||
return this.states.occupied;
|
||||
}
|
||||
set occupied(v: boolean) {
|
||||
this.states.occupied = v;
|
||||
}
|
||||
get states(): state.SwitchState {
|
||||
return this.getState<state.SwitchState>();
|
||||
}
|
||||
clone(): TurnoutStates {
|
||||
return new TurnoutStates(this.states.cloneMessage());
|
||||
}
|
||||
copyFrom(data: GraphicStateBase): void {
|
||||
pb_1.Message.copyInto(data._state, this._state);
|
||||
}
|
||||
eq(data: GraphicStateBase): boolean {
|
||||
return pb_1.Message.equals(this._state, data._state);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
import { Graphics } from 'pixi.js';
|
||||
import { calculateMirrorPoint } from 'jl-graphic';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
import { Turnout } from './turnout/Turnout';
|
||||
import { Section, DevicePort } from './section/Section';
|
||||
import { AxleCounting } from './axleCounting/AxleCounting';
|
||||
import { Station } from './station/Station';
|
||||
import { ScreenDoor } from './screenDoor/ScreenDoor';
|
||||
/**
|
||||
*
|
||||
* @param polygon
|
||||
* @param x 箭头顶点x坐标
|
||||
* @param y 箭头顶点y坐标
|
||||
* @param length 箭头长度
|
||||
* @param radius 箭头三角半径
|
||||
* @param lineWidth 箭头线宽
|
||||
* @param mirror 是否镜像翻转 (基于箭头顶点)
|
||||
*/
|
||||
export function drawArrow(
|
||||
polygon: Graphics,
|
||||
x: number,
|
||||
y: number,
|
||||
length: number,
|
||||
radius: number,
|
||||
lineWidth: number,
|
||||
mirror: boolean
|
||||
) {
|
||||
const trianglAcme = { x, y };
|
||||
let triangleP1 = {
|
||||
x: x - radius - Math.sin(Math.PI / 6),
|
||||
y: y + Math.cos(Math.PI / 6) * radius,
|
||||
};
|
||||
let triangleP2 = {
|
||||
x: x - radius - Math.sin(Math.PI / 6),
|
||||
y: y - Math.cos(Math.PI / 6) * radius,
|
||||
};
|
||||
let lineP1 = {
|
||||
x: x - radius - Math.sin(Math.PI / 6),
|
||||
y: y + lineWidth / 2,
|
||||
};
|
||||
let lineP2 = {
|
||||
x: x - length,
|
||||
y: y + lineWidth / 2,
|
||||
};
|
||||
let lineP3 = {
|
||||
x: x - length,
|
||||
y: y - lineWidth / 2,
|
||||
};
|
||||
let lineP4 = {
|
||||
x: x - radius - Math.sin(Math.PI / 6),
|
||||
y: y - lineWidth / 2,
|
||||
};
|
||||
if (mirror) {
|
||||
triangleP1 = calculateMirrorPoint(trianglAcme, triangleP1);
|
||||
triangleP2 = calculateMirrorPoint(trianglAcme, triangleP2);
|
||||
lineP1 = calculateMirrorPoint(trianglAcme, lineP1);
|
||||
lineP2 = calculateMirrorPoint(trianglAcme, lineP2);
|
||||
lineP3 = calculateMirrorPoint(trianglAcme, lineP3);
|
||||
lineP4 = calculateMirrorPoint(trianglAcme, lineP4);
|
||||
}
|
||||
polygon.drawPolygon(
|
||||
trianglAcme.x,
|
||||
trianglAcme.y,
|
||||
triangleP1.x,
|
||||
triangleP1.y,
|
||||
lineP1.x,
|
||||
lineP1.y,
|
||||
lineP2.x,
|
||||
lineP2.y,
|
||||
lineP3.x,
|
||||
lineP3.y,
|
||||
lineP4.x,
|
||||
lineP4.y,
|
||||
triangleP2.x,
|
||||
triangleP2.y
|
||||
);
|
||||
}
|
||||
|
||||
export function createRelatedRefProto(
|
||||
type: string,
|
||||
id: number,
|
||||
port?: DevicePort
|
||||
) {
|
||||
const typeMap = new Map([
|
||||
[Section.Type, electronicMapGraphicData.RelatedRef.DeviceType.Section],
|
||||
[Turnout.Type, electronicMapGraphicData.RelatedRef.DeviceType.Turnout],
|
||||
[AxleCounting.Type, electronicMapGraphicData.RelatedRef.DeviceType.AxleCounting],
|
||||
[Station.Type, electronicMapGraphicData.RelatedRef.DeviceType.station],
|
||||
[ScreenDoor.Type, electronicMapGraphicData.RelatedRef.DeviceType.ScreenDoor],
|
||||
]);
|
||||
const protoDeviceType = typeMap.get(type);
|
||||
if (protoDeviceType === undefined) throw Error(`输入的type有误: ${type}`);
|
||||
const protoData = new electronicMapGraphicData.RelatedRef({
|
||||
deviceType: protoDeviceType,
|
||||
id,
|
||||
});
|
||||
if (port) {
|
||||
if (port === DevicePort.A)
|
||||
protoData.devicePort = electronicMapGraphicData.RelatedRef.DevicePort.A;
|
||||
if (port === DevicePort.B)
|
||||
protoData.devicePort = electronicMapGraphicData.RelatedRef.DevicePort.B;
|
||||
if (port === DevicePort.C)
|
||||
protoData.devicePort = electronicMapGraphicData.RelatedRef.DevicePort.C;
|
||||
}
|
||||
return protoData;
|
||||
}
|
||||
|
||||
export function protoPort2Data(port: electronicMapGraphicData.RelatedRef.DevicePort) {
|
||||
if (port === electronicMapGraphicData.RelatedRef.DevicePort.A) return 'A';
|
||||
if (port === electronicMapGraphicData.RelatedRef.DevicePort.B) return 'B';
|
||||
if (port === electronicMapGraphicData.RelatedRef.DevicePort.C) return 'C';
|
||||
}
|
||||
|
||||
export interface IRelatedRefData {
|
||||
deviceType: electronicMapGraphicData.RelatedRef.DeviceType; //关联的设备类型
|
||||
id: number; //关联的设备ID
|
||||
devicePort: electronicMapGraphicData.RelatedRef.DevicePort; //关联的设备端口
|
||||
}
|
||||
|
||||
export interface ISimpleRefData {
|
||||
deviceType: electronicMapGraphicData.SimpleRef.DeviceType;
|
||||
id: number;
|
||||
}
|
||||
|
||||
export interface DevicePosition {
|
||||
deviceId: number;
|
||||
offset: number;
|
||||
}
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
import { Color, Container, Graphics } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicRelationParam,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'jl-graphic';
|
||||
import { IRelatedRefData, protoPort2Data } from '../CommonGraphics';
|
||||
import { KilometerSystem } from '../signal/Signal';
|
||||
|
||||
enum TypeDetectionPoint {
|
||||
AxleCounting = 0,
|
||||
SectionBoundary = 1,
|
||||
}
|
||||
|
||||
export interface IAxleCountingData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get kilometerSystem(): KilometerSystem;
|
||||
set kilometerSystem(v: KilometerSystem);
|
||||
get axleCountingRef(): IRelatedRefData[]; //关联的设备
|
||||
set axleCountingRef(ref: IRelatedRefData[]);
|
||||
get type(): TypeDetectionPoint; // 计轴、区段边界
|
||||
set type(v: TypeDetectionPoint);
|
||||
get centralizedStations(): number[];
|
||||
set centralizedStations(v: number[]);
|
||||
clone(): IAxleCountingData;
|
||||
copyFrom(data: IAxleCountingData): void;
|
||||
eq(other: IAxleCountingData): boolean;
|
||||
}
|
||||
|
||||
export const AxleCountingConsts = {
|
||||
radius: 6,
|
||||
borderWidth: 1,
|
||||
circleColorBlue: '0x08F80D',
|
||||
circleColorRed: '0xff0000',
|
||||
codeFontSize: 22,
|
||||
codeOffsetY: 30,
|
||||
kilometerCodeColor: '0xFFFFFF',
|
||||
kilometerCodeFontSize: 14,
|
||||
kilometerCodeOffsetY: 95,
|
||||
offsetSection: 50,
|
||||
};
|
||||
class TwoCircleGraphic extends Container {
|
||||
circleA: Graphics = new Graphics();
|
||||
circleB: Graphics = new Graphics();
|
||||
line: Graphics = new Graphics();
|
||||
constructor() {
|
||||
super();
|
||||
this.addChild(this.circleA);
|
||||
this.addChild(this.circleB);
|
||||
this.addChild(this.line);
|
||||
}
|
||||
draw(data: IAxleCountingData): void {
|
||||
this.drawCircle(this.circleA, data);
|
||||
this.drawCircle(this.circleB, data);
|
||||
this.circleA.position.set(-12, 0);
|
||||
this.circleB.position.set(12, 0);
|
||||
this.line.clear();
|
||||
let color = AxleCountingConsts.circleColorBlue;
|
||||
if (data.type == 1) {
|
||||
color = AxleCountingConsts.circleColorRed;
|
||||
}
|
||||
this.line.lineStyle(1, new Color(color));
|
||||
this.line.moveTo(-24, 0);
|
||||
this.line.lineTo(24, 0);
|
||||
}
|
||||
drawCircle(circle: Graphics, data: IAxleCountingData): void {
|
||||
circle.clear();
|
||||
let color = AxleCountingConsts.circleColorBlue;
|
||||
if (data.type == 1) {
|
||||
color = AxleCountingConsts.circleColorRed;
|
||||
}
|
||||
circle.lineStyle(AxleCountingConsts.borderWidth, new Color(color));
|
||||
circle.beginFill(color, 1);
|
||||
circle.drawCircle(0, 0, AxleCountingConsts.radius);
|
||||
circle.endFill;
|
||||
}
|
||||
clear(): void {
|
||||
this.circleA.clear();
|
||||
this.circleB.clear();
|
||||
}
|
||||
}
|
||||
export class AxleCounting extends JlGraphic {
|
||||
static Type = 'AxleCounting';
|
||||
twoCircle: TwoCircleGraphic = new TwoCircleGraphic();
|
||||
kilometerGraph: VectorText = new VectorText(''); //公里标
|
||||
direction: number;
|
||||
constructor(direction: number) {
|
||||
super(AxleCounting.Type);
|
||||
this.addChild(this.twoCircle);
|
||||
this.addChild(this.kilometerGraph);
|
||||
this.kilometerGraph.name = 'kilometer';
|
||||
this.direction = direction;
|
||||
}
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
get datas(): IAxleCountingData {
|
||||
return this.getDatas<IAxleCountingData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
this.twoCircle.draw(this.datas);
|
||||
}
|
||||
buildRelation(): void {
|
||||
this.loadRelations();
|
||||
}
|
||||
loadRelations(): void {
|
||||
if (this.datas.axleCountingRef.length) {
|
||||
this.datas.axleCountingRef.forEach((device) => {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, 'A'),
|
||||
new GraphicRelationParam(
|
||||
this.queryStore.queryById(device.id),
|
||||
protoPort2Data(device.devicePort)
|
||||
)
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class AxleCountingTemplate extends JlGraphicTemplate<AxleCounting> {
|
||||
constructor(dataTemplate: IAxleCountingData) {
|
||||
super(AxleCounting.Type, {
|
||||
dataTemplate,
|
||||
});
|
||||
}
|
||||
new(): AxleCounting {
|
||||
const axleCounting = new AxleCounting(1);
|
||||
axleCounting.loadData(this.datas);
|
||||
return axleCounting;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,425 @@
|
|||
import { FederatedPointerEvent, IPoint, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicIdGenerator,
|
||||
GraphicInteractionPlugin,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
distance2,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import {
|
||||
IAxleCountingData,
|
||||
AxleCounting,
|
||||
AxleCountingTemplate,
|
||||
} from './AxleCounting';
|
||||
import { Section, DevicePort, SectionType } from '../section/Section';
|
||||
import { Turnout } from '../turnout/Turnout';
|
||||
import { IRelatedRefData, createRelatedRefProto } from '../CommonGraphics';
|
||||
import { Signal } from '../signal/Signal';
|
||||
import { loadGenerateAxleCountingConfig } from 'src/drawApp/commonApp';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
|
||||
export interface IAxleCountingDrawOptions {
|
||||
newData: () => IAxleCountingData;
|
||||
}
|
||||
|
||||
export class AxleCountingDraw extends GraphicDrawAssistant<
|
||||
AxleCountingTemplate,
|
||||
IAxleCountingData
|
||||
> {
|
||||
codeGraph: AxleCounting;
|
||||
constructor(app: IDrawApp, template: AxleCountingTemplate) {
|
||||
super(app, template, 'sym_o_circle', '区段检测点');
|
||||
this.codeGraph = this.graphicTemplate.new();
|
||||
this.container.addChild(this.codeGraph);
|
||||
AxleCountingInteraction.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.codeGraph.loadData(this.graphicTemplate.datas);
|
||||
this.codeGraph.doRepaint();
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
//this.codeGraph.destroy();
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
prepareData(data: IAxleCountingData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
draw(
|
||||
ps: IPoint,
|
||||
direction: number,
|
||||
graphic: Section | Turnout,
|
||||
port: DevicePort,
|
||||
map: Map<string, number>,
|
||||
reftype: string,
|
||||
refGraphic: Section | Turnout,
|
||||
refPort: DevicePort
|
||||
) {
|
||||
const generateAxleCountingConfig = loadGenerateAxleCountingConfig();
|
||||
if (generateAxleCountingConfig?.noGenerateGroup !== undefined) {
|
||||
const noGenerateGroup = generateAxleCountingConfig.noGenerateGroup;
|
||||
for (let i = 0; i < noGenerateGroup.length; i++) {
|
||||
if (
|
||||
noGenerateGroup[i] == graphic.id &&
|
||||
((i % 2 == 0 && refGraphic.id == noGenerateGroup[i + 1]) ||
|
||||
(i % 2 == 1 && refGraphic.id == noGenerateGroup[i - 1]))
|
||||
) {
|
||||
map.set(`${graphic.id}-${port}`, 1);
|
||||
map.set(`${refGraphic.id}-${refPort}`, 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (
|
||||
graphic.type == 'Turnout' &&
|
||||
reftype == 'Turnout' &&
|
||||
port == DevicePort.B &&
|
||||
refPort == DevicePort.B
|
||||
) {
|
||||
//查看生成计轴bb配置
|
||||
let hasBB = false;
|
||||
if (generateAxleCountingConfig !== undefined) {
|
||||
const bbConnect = generateAxleCountingConfig.bbConnect;
|
||||
if (
|
||||
bbConnect.includes(graphic.id) ||
|
||||
bbConnect.includes(refGraphic.id)
|
||||
) {
|
||||
hasBB = true;
|
||||
}
|
||||
}
|
||||
//bb连接处有信号机需要生成
|
||||
const points = (graphic as Turnout).getPortPoints();
|
||||
const portPs = graphic.localToCanvasPoints(points[1][0])[0];
|
||||
let hasSingle = false;
|
||||
const singles = this.app.queryStore.queryByType<Signal>(Signal.Type);
|
||||
singles.forEach((single) => {
|
||||
if (distance2(portPs, single.position) < 50) {
|
||||
hasSingle = true;
|
||||
}
|
||||
});
|
||||
if (!hasSingle && !hasBB) {
|
||||
map.set(`${graphic.id}-${port}`, 1);
|
||||
map.set(`${refGraphic.id}-${refPort}`, 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
!map.has(`${refGraphic.id}-${refPort}`) &&
|
||||
!map.has(`${graphic.id}-${port}`)
|
||||
) {
|
||||
map.set(`${graphic.id}-${port}`, 1);
|
||||
map.set(`${refGraphic.id}-${refPort}`, 1);
|
||||
const refData1 = createRelatedRefProto(reftype, refGraphic.id, refPort);
|
||||
const refData2 = createRelatedRefProto(graphic.type, graphic.id, port);
|
||||
const axleCounting = new AxleCounting(direction);
|
||||
axleCounting.loadData(this.graphicTemplate.datas);
|
||||
if (graphic.type == 'Turnout') {
|
||||
axleCounting.position.set(ps.x, ps.y);
|
||||
} else {
|
||||
axleCounting.position.set(ps.x, ps.y);
|
||||
}
|
||||
axleCounting.id = GraphicIdGenerator.next();
|
||||
axleCounting.datas.axleCountingRef = [refData2, refData1];
|
||||
axleCounting.datas.code = `${graphic.datas.code}-${port}\\${refGraphic.datas.code}-${refPort}`;
|
||||
this.storeGraphic(axleCounting);
|
||||
axleCounting.loadRelations();
|
||||
}
|
||||
}
|
||||
drawAdd(
|
||||
ps: IPoint,
|
||||
direction: number,
|
||||
graphic: Section | Turnout,
|
||||
port: DevicePort,
|
||||
map: Map<string, number>
|
||||
) {
|
||||
if (!map.has(`${graphic.id}-${port}`)) {
|
||||
map.set(`${graphic.id}-${port}`, 1);
|
||||
const refData = createRelatedRefProto(graphic.type, graphic.id, port);
|
||||
const axleCounting = new AxleCounting(direction);
|
||||
axleCounting.loadData(this.graphicTemplate.datas);
|
||||
if (graphic.type == 'Turnout') {
|
||||
axleCounting.position.set(ps.x, ps.y);
|
||||
} else {
|
||||
axleCounting.position.set(ps.x, ps.y);
|
||||
}
|
||||
axleCounting.id = GraphicIdGenerator.next();
|
||||
axleCounting.datas.axleCountingRef = [refData];
|
||||
axleCounting.datas.code = `${graphic.datas.code}-${port}`;
|
||||
this.storeGraphic(axleCounting);
|
||||
axleCounting.loadRelations();
|
||||
}
|
||||
}
|
||||
oneGenerates(height: Point) {
|
||||
const map = new Map();
|
||||
const needDelete: AxleCounting[] = [];
|
||||
const axleCountings = this.app.queryStore
|
||||
.queryByType<AxleCounting>(AxleCounting.Type)
|
||||
.filter((axleCounting) => {
|
||||
if (axleCounting.datas.axleCountingRef.length == 1) {
|
||||
const refInfo = axleCounting.datas.axleCountingRef[0];
|
||||
if (refInfo.deviceType == graphicData.RelatedRef.DeviceType.Section) {
|
||||
const refSection = this.app.queryStore.queryById<Section>(
|
||||
refInfo.id
|
||||
);
|
||||
if (
|
||||
refSection.datas.paRef != undefined &&
|
||||
refSection.datas.pbRef != undefined
|
||||
) {
|
||||
needDelete.push(axleCounting);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.app.deleteGraphics(...needDelete);
|
||||
const axleCountingRefs: IRelatedRefData[] = [];
|
||||
axleCountings.forEach((axleCounting) => {
|
||||
axleCountingRefs.push(...axleCounting.datas.axleCountingRef);
|
||||
});
|
||||
axleCountingRefs.forEach((axleCountingRef) => {
|
||||
map.set(
|
||||
`${axleCountingRef.id}-${
|
||||
graphicData.RelatedRef.DevicePort[axleCountingRef.devicePort]
|
||||
}`,
|
||||
1
|
||||
);
|
||||
});
|
||||
//由区段生成计轴--区段和区段或区段和道岔
|
||||
const sections = this.app.queryStore
|
||||
.queryByType<Section>(Section.Type)
|
||||
.filter((section) => {
|
||||
return (
|
||||
section.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
section,
|
||||
AxleCounting.Type
|
||||
).length < 2 && section.datas.sectionType == SectionType.Physical
|
||||
);
|
||||
});
|
||||
|
||||
sections.forEach((section) => {
|
||||
const sectionRelations =
|
||||
section.relationManage.getRelationsOfGraphic(section);
|
||||
const ps = section.localToCanvasPoint(section.getStartPoint());
|
||||
const pe = section.localToCanvasPoint(section.getEndPoint());
|
||||
sectionRelations.forEach((relation) => {
|
||||
const port = relation.getRelationParam(section).param;
|
||||
const refDevice = relation.getOtherGraphic<Section>(section);
|
||||
const refDevicePort = relation.getOtherRelationParam(section).param;
|
||||
let direction = 1;
|
||||
let axleCountingPs = ps;
|
||||
if (port == 'B') {
|
||||
axleCountingPs = pe;
|
||||
}
|
||||
if (axleCountingPs.y > height.y) {
|
||||
direction = -1;
|
||||
}
|
||||
if (refDevice.type == Section.Type || refDevice.type == Turnout.Type)
|
||||
this.draw(
|
||||
axleCountingPs,
|
||||
direction,
|
||||
section,
|
||||
port,
|
||||
map,
|
||||
refDevice.type,
|
||||
refDevice,
|
||||
refDevicePort
|
||||
);
|
||||
});
|
||||
});
|
||||
//由区段生成计轴--单独区段
|
||||
sections.forEach((section) => {
|
||||
const axleCountingRelations =
|
||||
section.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
section,
|
||||
AxleCounting.Type
|
||||
);
|
||||
const ps = section.localToCanvasPoint(section.getStartPoint());
|
||||
const pe = section.localToCanvasPoint(section.getEndPoint());
|
||||
if (axleCountingRelations.length < 2) {
|
||||
axleCountingRelations.forEach((relation) => {
|
||||
const port = relation.getRelationParam(section).param;
|
||||
let addPort = DevicePort.A;
|
||||
let direction = 1;
|
||||
let axleCountingPs = ps;
|
||||
if (port == 'A') {
|
||||
axleCountingPs = pe;
|
||||
addPort = DevicePort.B;
|
||||
}
|
||||
if (axleCountingPs.y > height.y) {
|
||||
direction = -1;
|
||||
}
|
||||
if (axleCountingPs.y > height.y) {
|
||||
direction = -1;
|
||||
}
|
||||
this.drawAdd(axleCountingPs, direction, section, addPort, map);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//由道岔生成计轴--道岔和道岔
|
||||
const turnouts = this.app.queryStore
|
||||
.queryByType<Turnout>(Turnout.Type)
|
||||
.filter((turnout) => {
|
||||
return (
|
||||
turnout.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
turnout,
|
||||
AxleCounting.Type
|
||||
).length < 3
|
||||
);
|
||||
});
|
||||
turnouts.forEach((turnout) => {
|
||||
const points = turnout.getPortPoints();
|
||||
//道岔关联的道岔
|
||||
const turnoutRelations =
|
||||
turnout.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
turnout,
|
||||
Turnout.Type
|
||||
);
|
||||
turnoutRelations.forEach((relation) => {
|
||||
const port = relation.getRelationParam(turnout).getParam<DevicePort>();
|
||||
const portIndex = Object.values(DevicePort).findIndex(
|
||||
(p) => p === port
|
||||
);
|
||||
const refTurnout = relation.getOtherGraphic<Turnout>(turnout);
|
||||
const refTurnoutPort = relation.getOtherRelationParam(turnout).param;
|
||||
const portPs = turnout.localToCanvasPoints(...points[portIndex])[
|
||||
points[portIndex].length - 1
|
||||
];
|
||||
this.draw(
|
||||
portPs,
|
||||
1,
|
||||
turnout,
|
||||
port,
|
||||
map,
|
||||
Turnout.Type,
|
||||
refTurnout,
|
||||
refTurnoutPort
|
||||
);
|
||||
});
|
||||
});
|
||||
//由道岔生成计轴--单独道岔
|
||||
turnouts.forEach((turnout) => {
|
||||
const axleCountingRelations =
|
||||
turnout.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
turnout,
|
||||
AxleCounting.Type
|
||||
);
|
||||
const points = turnout.getPortPoints();
|
||||
const turnoutPort = [DevicePort.A, DevicePort.B, DevicePort.C];
|
||||
if (axleCountingRelations.length == 1) {
|
||||
const port = axleCountingRelations[0].getRelationParam(turnout).param;
|
||||
const otherPort = turnoutPort.filter((p) => {
|
||||
return p !== port && p;
|
||||
});
|
||||
otherPort.forEach((port) => {
|
||||
const portIndex = Object.values(DevicePort).findIndex(
|
||||
(p) => p === port
|
||||
);
|
||||
const axleCountingPs1 = turnout.localToCanvasPoints(
|
||||
...points[portIndex]
|
||||
)[points[portIndex].length - 1];
|
||||
this.drawAdd(axleCountingPs1, 1, turnout, port, map);
|
||||
});
|
||||
} else if (axleCountingRelations.length == 2) {
|
||||
const port = axleCountingRelations.map(
|
||||
(item) => item.getRelationParam(turnout).param
|
||||
);
|
||||
const otherPort = turnoutPort.filter((p) => {
|
||||
return p !== port[0] && p !== port[1] && p;
|
||||
});
|
||||
if (otherPort.length) {
|
||||
const portIndex = Object.values(DevicePort).findIndex(
|
||||
(p) => p === otherPort[0]
|
||||
);
|
||||
const axleCountingPs1 = turnout.localToCanvasPoints(
|
||||
...points[portIndex]
|
||||
)[points[portIndex].length - 1];
|
||||
this.drawAdd(axleCountingPs1, 1, turnout, otherPort[0], map);
|
||||
}
|
||||
} else if (axleCountingRelations.length == 0) {
|
||||
const axleCountingPsA = turnout.localToCanvasPoints(points[0][0])[0];
|
||||
const axleCountingPsC = turnout.localToCanvasPoints(points[2][0])[0];
|
||||
this.drawAdd(axleCountingPsA, 1, turnout, DevicePort.A, map);
|
||||
this.drawAdd(axleCountingPsC, 1, turnout, DevicePort.C, map);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function buildAbsorbablePositions(
|
||||
axleCounting: AxleCounting
|
||||
): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const axleCountings = axleCounting.queryStore.queryByType<AxleCounting>(
|
||||
AxleCounting.Type
|
||||
);
|
||||
const { width } = axleCounting.getGraphicApp().canvas;
|
||||
axleCountings.forEach((other) => {
|
||||
if (other.id == axleCounting.id) {
|
||||
return;
|
||||
}
|
||||
const ps = other.datas.transform.position;
|
||||
const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
|
||||
aps.push(xs);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class AxleCountingInteraction extends GraphicInteractionPlugin<AxleCounting> {
|
||||
static Name = 'AxleCounting_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(AxleCountingInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new AxleCountingInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): AxleCounting[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === AxleCounting.Type)
|
||||
.map((g) => g as AxleCounting);
|
||||
}
|
||||
bind(g: AxleCounting): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.kilometerGraph.eventMode = 'static';
|
||||
g.kilometerGraph.cursor = 'pointer';
|
||||
g.kilometerGraph.draggable = true;
|
||||
g.kilometerGraph.selectable = true;
|
||||
g.kilometerGraph.transformSave = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
unbind(g: AxleCounting): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.kilometerGraph.eventMode = 'none';
|
||||
g.kilometerGraph.draggable = false;
|
||||
g.kilometerGraph.selectable = false;
|
||||
g.kilometerGraph.transformSave = false;
|
||||
g.off('selected', this.onSelected, this);
|
||||
}
|
||||
onSelected(): void {
|
||||
const AxleCounting = this.app.selectedGraphics[0] as AxleCounting;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(AxleCounting),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
import { Color, Container, Graphics, Rectangle } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicState,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
distance2,
|
||||
getRectangleCenter,
|
||||
} from 'jl-graphic';
|
||||
import { Station } from '../station/Station';
|
||||
import { Section } from '../section/Section';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
|
||||
export interface IPlatformData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get refStation(): number; // 关联的车站
|
||||
set refStation(v: number);
|
||||
get refSection(): number; // 关联的物理区段
|
||||
set refSection(v: number);
|
||||
get refEsbRelayCode(): string; // 关联的紧急停车继电器的编号
|
||||
set refEsbRelayCode(v: string);
|
||||
get type(): electronicMapGraphicData.Platform.TypeOfPlatform; //站台上下行
|
||||
set type(v: electronicMapGraphicData.Platform.TypeOfPlatform);
|
||||
clone(): IPlatformData;
|
||||
copyFrom(data: IPlatformData): void;
|
||||
eq(other: IPlatformData): boolean;
|
||||
}
|
||||
export interface IPlatformState extends GraphicState {
|
||||
id?: number;
|
||||
empj?: boolean;
|
||||
}
|
||||
|
||||
const platformConsts = {
|
||||
width: 90,
|
||||
height: 20,
|
||||
lineWidth: 3,
|
||||
white: '0xffffff', //站台颜色
|
||||
};
|
||||
|
||||
//子元素--矩形
|
||||
export class rectGraphic extends Container {
|
||||
static Type = 'RectPlatForm';
|
||||
rectGraphic: Graphics;
|
||||
constructor() {
|
||||
super();
|
||||
this.rectGraphic = new Graphics();
|
||||
this.addChild(this.rectGraphic);
|
||||
}
|
||||
draw(): void {
|
||||
const rectGraphic = this.rectGraphic;
|
||||
const fillColor = platformConsts.white;
|
||||
rectGraphic
|
||||
.clear()
|
||||
.lineStyle(platformConsts.lineWidth, new Color(fillColor))
|
||||
.beginFill(fillColor, 1)
|
||||
.drawRect(0, 0, platformConsts.width, platformConsts.height)
|
||||
.endFill();
|
||||
rectGraphic.pivot = getRectangleCenter(
|
||||
new Rectangle(0, 0, platformConsts.width, platformConsts.height)
|
||||
);
|
||||
}
|
||||
clear(): void {
|
||||
this.rectGraphic.clear();
|
||||
}
|
||||
}
|
||||
export class Platform extends JlGraphic {
|
||||
static Type = 'Platform';
|
||||
rectGraphic: rectGraphic = new rectGraphic();
|
||||
constructor() {
|
||||
super(Platform.Type);
|
||||
this.addChild(this.rectGraphic);
|
||||
}
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
get datas(): IPlatformData {
|
||||
return this.getDatas<IPlatformData>();
|
||||
}
|
||||
get states(): IPlatformState {
|
||||
return this.getStates<IPlatformState>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
this.rectGraphic.draw();
|
||||
}
|
||||
buildRelation() {
|
||||
const stationas = this.queryStore.queryByType<Station>(Station.Type);
|
||||
for (let i = 0; i < stationas.length; i++) {
|
||||
const sP = stationas[i].localBoundsToCanvasPoints();
|
||||
if (this.x > sP[0].x && this.x < sP[1].x) {
|
||||
this.relationManage.addRelation(this, stationas[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
const sections = this.queryStore.queryByType<Section>(Section.Type);
|
||||
const minDistanceRefSections: Section[] = [];
|
||||
sections.forEach((section) => {
|
||||
const sP = section.localBoundsToCanvasPoints();
|
||||
if (this.x > sP[0].x && this.x < sP[1].x) {
|
||||
minDistanceRefSections.push(section);
|
||||
}
|
||||
});
|
||||
if (minDistanceRefSections) {
|
||||
const refSection = minDistanceRefSections.reduce((prev, cur) => {
|
||||
return distance2(
|
||||
prev.localToCanvasPoint(getRectangleCenter(prev.getLocalBounds())),
|
||||
this.position
|
||||
) >
|
||||
distance2(
|
||||
cur.localToCanvasPoint(getRectangleCenter(cur.getLocalBounds())),
|
||||
this.position
|
||||
)
|
||||
? cur
|
||||
: prev;
|
||||
});
|
||||
this.relationManage.deleteRelationOfGraphicAndOtherType(
|
||||
this,
|
||||
Section.Type
|
||||
);
|
||||
this.relationManage.addRelation(this, refSection);
|
||||
}
|
||||
}
|
||||
saveRelations() {
|
||||
const refStation = this.relationManage
|
||||
.getRelationsOfGraphicAndOtherType(this, Station.Type)
|
||||
.map((relation) => relation.getOtherGraphic<Station>(this).datas.id);
|
||||
if (refStation.length) {
|
||||
this.datas.refStation = refStation[0];
|
||||
}
|
||||
const refSection = this.relationManage
|
||||
.getRelationsOfGraphicAndOtherType(this, Section.Type)
|
||||
.map((relation) => relation.getOtherGraphic<Section>(this).datas.id);
|
||||
if (refSection.length) {
|
||||
this.datas.refSection = refSection[0];
|
||||
}
|
||||
}
|
||||
loadRelations() {
|
||||
if (this.datas.refStation) {
|
||||
this.relationManage.addRelation(
|
||||
this,
|
||||
this.queryStore.queryById<Platform>(this.datas.refStation)
|
||||
);
|
||||
}
|
||||
if (this.datas.refSection) {
|
||||
this.relationManage.addRelation(
|
||||
this,
|
||||
this.queryStore.queryById<Platform>(this.datas.refSection)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class PlatformTemplate extends JlGraphicTemplate<Platform> {
|
||||
constructor(dataTemplate: IPlatformData) {
|
||||
super(Platform.Type, {
|
||||
dataTemplate,
|
||||
});
|
||||
}
|
||||
new(): Platform {
|
||||
const platform = new Platform();
|
||||
platform.loadData(this.datas);
|
||||
return platform;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
import { FederatedPointerEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import { IPlatformData, Platform, PlatformTemplate } from './Platform';
|
||||
|
||||
export interface IPlatformDrawOptions {
|
||||
newData: () => IPlatformData;
|
||||
}
|
||||
|
||||
export class PlatformDraw extends GraphicDrawAssistant<
|
||||
PlatformTemplate,
|
||||
IPlatformData
|
||||
> {
|
||||
platformGraphic: Platform;
|
||||
constructor(app: IDrawApp, template: PlatformTemplate) {
|
||||
super(
|
||||
app,
|
||||
template,
|
||||
'svguse:../../drawIcon.svg#icon-platform',
|
||||
'站台Platform'
|
||||
);
|
||||
this.platformGraphic = this.graphicTemplate.new();
|
||||
this.container.addChild(this.platformGraphic);
|
||||
platformInteraction.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.platformGraphic.loadData(this.graphicTemplate.datas);
|
||||
this.platformGraphic.doRepaint();
|
||||
}
|
||||
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
|
||||
prepareData(data: IPlatformData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function buildAbsorbablePositions(platform: Platform): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const platforms = platform.queryStore.queryByType<Platform>(Platform.Type);
|
||||
const { width, height } = platform.getGraphicApp().canvas;
|
||||
platforms.forEach((other) => {
|
||||
if (other.id == platform.id) {
|
||||
return;
|
||||
}
|
||||
const ps = other.datas.transform.position;
|
||||
const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
|
||||
const ys = new AbsorbableLine({ x: ps.x, y: 0 }, { x: ps.x, y: height });
|
||||
aps.push(xs, ys);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class platformInteraction extends GraphicInteractionPlugin<Platform> {
|
||||
static Name = 'platform_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(platformInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new platformInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Platform[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Platform.Type)
|
||||
.map((g) => g as Platform);
|
||||
}
|
||||
bind(g: Platform): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
unbind(g: Platform): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.off('selected', this.onSelected, this);
|
||||
}
|
||||
onSelected(): void {
|
||||
const platform = this.app.selectedGraphics[0] as Platform;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(platform),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
import { Color, Container, Graphics, Rectangle } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicState,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
distance2,
|
||||
getRectangleCenter,
|
||||
} from 'jl-graphic';
|
||||
import { Platform } from '../platform/Platform';
|
||||
import { state } from 'src/protos/device_state';
|
||||
import { request } from 'src/protos/request';
|
||||
|
||||
export interface IScreenDoorData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get refPlatform(): number; // 关联的站台
|
||||
set refPlatform(v: number);
|
||||
get sonDoorAmount(): number; //子屏蔽门的数量
|
||||
clone(): IScreenDoorData;
|
||||
copyFrom(data: IScreenDoorData): void;
|
||||
eq(other: IScreenDoorData): boolean;
|
||||
}
|
||||
|
||||
export interface IScreenDoorState extends GraphicState {
|
||||
get asdStates(): state.AsdState[]; //所有子门的状态
|
||||
set asdStates(v: state.AsdState[]);
|
||||
get mgj(): boolean; //屏蔽门整体的关闭（继电器）状态
|
||||
set mgj(v: boolean);
|
||||
get zaw(): boolean; //是否有障碍物
|
||||
set zaw(v: boolean);
|
||||
param: request.PsdParam;
|
||||
}
|
||||
|
||||
const screenDoorConsts = {
|
||||
lineWidth: 3,
|
||||
smallDoorWidth: 10,
|
||||
doorClose: '0x00FF00', //屏蔽门的颜色
|
||||
doorOpen: '0xff0000',
|
||||
zawWidth: 3,
|
||||
zawHeight: 3,
|
||||
zawlineWidth: 3,
|
||||
zawColor: '0xff0000',
|
||||
forceWidth: 11,
|
||||
forceHeight: 12,
|
||||
forcelineWidth: 1,
|
||||
forceColor: '0xff0000',
|
||||
};
|
||||
|
||||
class smallDoorGraphic extends Container {
|
||||
smallDoorGraphic: Graphics;
|
||||
labelGraphic: VectorText;
|
||||
zawGraphic: Graphics;
|
||||
forceGraphic: Graphics;
|
||||
constructor() {
|
||||
super();
|
||||
this.smallDoorGraphic = new Graphics();
|
||||
this.zawGraphic = new Graphics();
|
||||
this.forceGraphic = new Graphics();
|
||||
this.labelGraphic = new VectorText();
|
||||
this.labelGraphic.setVectorFontSize(12);
|
||||
this.labelGraphic.anchor.set(0.5);
|
||||
this.addChild(this.smallDoorGraphic);
|
||||
this.addChild(this.labelGraphic);
|
||||
this.addChild(this.zawGraphic);
|
||||
this.addChild(this.forceGraphic);
|
||||
this.drawZaw();
|
||||
this.drawForce();
|
||||
}
|
||||
draw(data: IScreenDoorData, i: number, state: state.AsdState): void {
|
||||
const start =
|
||||
(-screenDoorConsts.smallDoorWidth * data.sonDoorAmount) / 2 +
|
||||
screenDoorConsts.smallDoorWidth * i;
|
||||
const smallDoorGraphic = this.smallDoorGraphic;
|
||||
const lineColor = state?.mgj
|
||||
? screenDoorConsts.doorClose
|
||||
: screenDoorConsts.doorOpen;
|
||||
smallDoorGraphic
|
||||
.lineStyle(screenDoorConsts.lineWidth, new Color(lineColor))
|
||||
.moveTo(start, 0)
|
||||
.lineTo(start + screenDoorConsts.smallDoorWidth - 3, 0);
|
||||
this.labelGraphic.text = i + 1;
|
||||
this.labelGraphic.style.fill = 'red';
|
||||
if (i % 2 == 0) {
|
||||
this.labelGraphic.position.set(start + 4, 9);
|
||||
this.zawGraphic.position.set(start + 4, -9);
|
||||
this.forceGraphic.position.set(start + 4, 9);
|
||||
} else {
|
||||
this.labelGraphic.position.set(start + 4, -9);
|
||||
this.zawGraphic.position.set(start + 4, 9);
|
||||
this.forceGraphic.position.set(start + 4, -9);
|
||||
}
|
||||
this.zawGraphic.visible = state?.zaw ? true : false;
|
||||
this.forceGraphic.visible = state?.force ? true : false;
|
||||
}
|
||||
drawZaw() {
|
||||
this.zawGraphic
|
||||
.clear()
|
||||
.lineStyle(
|
||||
screenDoorConsts.zawlineWidth,
|
||||
new Color(screenDoorConsts.zawColor)
|
||||
)
|
||||
.drawRect(0, 0, screenDoorConsts.zawWidth, screenDoorConsts.zawHeight);
|
||||
this.zawGraphic.pivot = getRectangleCenter(
|
||||
new Rectangle(0, 0, screenDoorConsts.zawWidth, screenDoorConsts.zawHeight)
|
||||
);
|
||||
}
|
||||
drawForce() {
|
||||
this.forceGraphic
|
||||
.clear()
|
||||
.lineStyle(
|
||||
screenDoorConsts.forcelineWidth,
|
||||
new Color(screenDoorConsts.forceColor)
|
||||
)
|
||||
.drawRect(
|
||||
0,
|
||||
0,
|
||||
screenDoorConsts.forceWidth,
|
||||
screenDoorConsts.forceHeight
|
||||
);
|
||||
this.forceGraphic.pivot = getRectangleCenter(
|
||||
new Rectangle(
|
||||
0,
|
||||
0,
|
||||
screenDoorConsts.forceWidth,
|
||||
screenDoorConsts.forceHeight
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class ScreenDoor extends JlGraphic {
|
||||
static Type = 'ScreenDoor';
|
||||
doorGraphic = new Container();
|
||||
constructor() {
|
||||
super(ScreenDoor.Type);
|
||||
this.addChild(this.doorGraphic);
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
get datas(): IScreenDoorData {
|
||||
return this.getDatas<IScreenDoorData>();
|
||||
}
|
||||
|
||||
get states(): IScreenDoorState {
|
||||
return this.getStates<IScreenDoorState>();
|
||||
}
|
||||
|
||||
doRepaint(): void {
|
||||
const doorGraphic = this.doorGraphic;
|
||||
doorGraphic.children.forEach((g) => {
|
||||
(g as smallDoorGraphic).smallDoorGraphic.clear();
|
||||
(g as smallDoorGraphic).zawGraphic.clear();
|
||||
(g as smallDoorGraphic).forceGraphic.clear();
|
||||
(g as smallDoorGraphic).labelGraphic.text = '';
|
||||
});
|
||||
for (let i = 0; i < this.datas.sonDoorAmount; i++) {
|
||||
const smallDoor = new smallDoorGraphic();
|
||||
const smallDoorState = this.states.asdStates.find(
|
||||
(asdState) => +asdState.code == i + 1
|
||||
);
|
||||
smallDoor.draw(this.datas, i, smallDoorState as state.AsdState);
|
||||
doorGraphic.addChild(smallDoor);
|
||||
}
|
||||
}
|
||||
buildRelation() {
|
||||
const platforms = this.queryStore.queryByType<Platform>(Platform.Type);
|
||||
const minDistanceRefPlatform: Platform[] = [];
|
||||
platforms.forEach((platform) => {
|
||||
const sP = platform.localBoundsToCanvasPoints();
|
||||
if (this.x > sP[0].x && this.x < sP[1].x) {
|
||||
minDistanceRefPlatform.push(platform);
|
||||
}
|
||||
});
|
||||
const refPlatform = minDistanceRefPlatform.reduce((prev, cur) => {
|
||||
return distance2(prev.position, this.position) >
|
||||
distance2(cur.position, this.position)
|
||||
? cur
|
||||
: prev;
|
||||
});
|
||||
if (refPlatform) {
|
||||
this.relationManage.addRelation(this, refPlatform);
|
||||
}
|
||||
}
|
||||
saveRelations() {
|
||||
const refStation = this.relationManage
|
||||
.getRelationsOfGraphicAndOtherType(this, Platform.Type)
|
||||
.map((relation) => relation.getOtherGraphic<Platform>(this).datas.id);
|
||||
if (refStation.length) {
|
||||
this.datas.refPlatform = refStation[0];
|
||||
}
|
||||
}
|
||||
loadRelations() {
|
||||
if (this.datas.refPlatform) {
|
||||
this.relationManage.addRelation(
|
||||
this,
|
||||
this.queryStore.queryById<Platform>(this.datas.refPlatform)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class ScreenDoorTemplate extends JlGraphicTemplate<ScreenDoor> {
|
||||
constructor(dataTemplate: IScreenDoorData, stateTemplate?: IScreenDoorState) {
|
||||
super(ScreenDoor.Type, {
|
||||
dataTemplate,
|
||||
stateTemplate,
|
||||
});
|
||||
}
|
||||
new(): ScreenDoor {
|
||||
const screenDoor = new ScreenDoor();
|
||||
screenDoor.loadData(this.datas);
|
||||
screenDoor.loadState(this.states);
|
||||
return screenDoor;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
import { FederatedPointerEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import { IScreenDoorData, ScreenDoor, ScreenDoorTemplate } from './ScreenDoor';
|
||||
import { Platform } from 'src/graphics/platform/Platform';
|
||||
|
||||
export interface IScreenDoorDrawOptions {
|
||||
newData: () => IScreenDoorData;
|
||||
}
|
||||
|
||||
export class ScreenDoorDraw extends GraphicDrawAssistant<
|
||||
ScreenDoorTemplate,
|
||||
IScreenDoorData
|
||||
> {
|
||||
screenDoorGraphic: ScreenDoor;
|
||||
constructor(app: IDrawApp, template: ScreenDoorTemplate) {
|
||||
super(app, template, 'door_sliding', '屏蔽门ScreenDoor');
|
||||
this.screenDoorGraphic = this.graphicTemplate.new();
|
||||
this.container.addChild(this.screenDoorGraphic);
|
||||
screenDoorInteraction.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.screenDoorGraphic.loadData(this.graphicTemplate.datas);
|
||||
this.screenDoorGraphic.doRepaint();
|
||||
}
|
||||
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
|
||||
prepareData(data: IScreenDoorData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function buildAbsorbablePositions(
|
||||
screenDoor: ScreenDoor
|
||||
): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const platforms = screenDoor.queryStore.queryByType<Platform>(Platform.Type);
|
||||
const { height } = screenDoor.getGraphicApp().canvas;
|
||||
platforms.forEach((platform) => {
|
||||
const ps = platform.datas.transform.position;
|
||||
const ys = new AbsorbableLine({ x: ps.x, y: 0 }, { x: ps.x, y: height });
|
||||
aps.push(ys);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class screenDoorInteraction extends GraphicInteractionPlugin<ScreenDoor> {
|
||||
static Name = 'screenDoor_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(screenDoorInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new screenDoorInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): ScreenDoor[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === ScreenDoor.Type)
|
||||
.map((g) => g as ScreenDoor);
|
||||
}
|
||||
bind(g: ScreenDoor): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
unbind(g: ScreenDoor): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.off('selected', this.onSelected, this);
|
||||
}
|
||||
onSelected(): void {
|
||||
const screenDoor = this.app.selectedGraphics[0] as ScreenDoor;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(screenDoor),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,407 @@
|
|||
import { IPointData } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicRelationParam,
|
||||
GraphicState,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
convertToBezierParams,
|
||||
distance2,
|
||||
splitLineEvenly,
|
||||
ILineGraphic,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import { Vector2 } from 'jl-graphic';
|
||||
|
||||
import {
|
||||
IRelatedRefData,
|
||||
createRelatedRefProto,
|
||||
protoPort2Data,
|
||||
} from '../CommonGraphics';
|
||||
import { Turnout } from '../turnout/Turnout';
|
||||
import { AxleCounting } from '../axleCounting/AxleCounting';
|
||||
|
||||
import { SectionGraphic } from '../sectionGraphic/SectionGraphic';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
|
||||
const tolerance = 0.01;
|
||||
|
||||
export enum SectionType {
|
||||
Physical = 0,
|
||||
Logic = 1,
|
||||
TurnoutPhysical = 2,
|
||||
}
|
||||
|
||||
export interface ISectionData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get points(): IPointData[]; // 线坐标点
|
||||
set points(points: IPointData[]);
|
||||
get paRef(): IRelatedRefData | undefined;
|
||||
set paRef(ref: IRelatedRefData | undefined);
|
||||
get pbRef(): IRelatedRefData | undefined;
|
||||
set pbRef(ref: IRelatedRefData | undefined);
|
||||
get sectionType(): SectionType;
|
||||
set sectionType(type: SectionType);
|
||||
get axleCountings(): number[]; //计轴id列表
|
||||
set axleCountings(axleCountings: number[]);
|
||||
get trackSectionId(): number; // 轨道区段id
|
||||
set trackSectionId(v: number);
|
||||
get isCurve(): boolean; // 是否曲线
|
||||
set isCurve(v: boolean);
|
||||
get segmentsCount(): number; // 曲线分段数
|
||||
set segmentsCount(v: number);
|
||||
get centralizedStations(): number[];
|
||||
set centralizedStations(v: number[]);
|
||||
get normalRunningDirection(): electronicMapGraphicData.Section.RunningDirection;
|
||||
set normalRunningDirection(v: electronicMapGraphicData.Section.RunningDirection);
|
||||
get isTurnBackZone(): boolean;
|
||||
set isTurnBackZone(v: boolean);
|
||||
get direction(): electronicMapGraphicData.Direction;
|
||||
set direction(v: electronicMapGraphicData.Direction);
|
||||
clone(): ISectionData;
|
||||
copyFrom(data: ISectionData): void;
|
||||
eq(other: ISectionData): boolean;
|
||||
}
|
||||
|
||||
export interface ISectionState extends GraphicState {
|
||||
id: number;
|
||||
occupied?: boolean; //区段占用
|
||||
axleFault?: boolean; //计轴故障
|
||||
axleDrst: boolean; // 计轴复位
|
||||
axlePdrst: boolean; // 计轴预复位
|
||||
}
|
||||
|
||||
export const SectionConsts = {
|
||||
lineColor: '#5578b6',
|
||||
occupiedColor: '#f00',
|
||||
lineWidth: 5,
|
||||
};
|
||||
|
||||
export enum DevicePort {
|
||||
A = 'A',
|
||||
B = 'B',
|
||||
C = 'C',
|
||||
}
|
||||
|
||||
export class Section extends JlGraphic implements ILineGraphic {
|
||||
static Type = 'Section';
|
||||
lineGraphic: SectionGraphic;
|
||||
labelGraphic: VectorText;
|
||||
childSections: Section[] = [];
|
||||
|
||||
constructor() {
|
||||
super(Section.Type);
|
||||
this.lineGraphic = new SectionGraphic();
|
||||
this.labelGraphic = new VectorText();
|
||||
this.labelGraphic.setVectorFontSize(14);
|
||||
this.labelGraphic.anchor.set(0.5);
|
||||
this.labelGraphic.style.fill = '#0f0';
|
||||
this.labelGraphic.transformSave = true;
|
||||
this.labelGraphic.name = 'label';
|
||||
this.transformSave = true;
|
||||
this.addChild(this.lineGraphic);
|
||||
this.addChild(this.labelGraphic);
|
||||
}
|
||||
|
||||
doRepaint() {
|
||||
if (
|
||||
this.datas.sectionType === SectionType.Physical &&
|
||||
this.datas.points.length < 2
|
||||
) {
|
||||
throw new Error('Link坐标数据异常');
|
||||
}
|
||||
|
||||
this.lineGraphic.clear();
|
||||
if (this.datas.sectionType === SectionType.Physical) {
|
||||
this.lineGraphic.isCurve = this.datas.isCurve;
|
||||
if (this.lineGraphic.isCurve) {
|
||||
this.lineGraphic.segmentsCount = this.datas.segmentsCount;
|
||||
}
|
||||
this.lineGraphic.points = this.datas.points;
|
||||
this.lineGraphic.lineStyle(
|
||||
SectionConsts.lineWidth,
|
||||
this.states.occupied
|
||||
? SectionConsts.occupiedColor
|
||||
: SectionConsts.lineColor
|
||||
);
|
||||
//FIXME 依赖location.path不合适
|
||||
if (location.pathname.includes('painting')) {
|
||||
if (
|
||||
this.datas.normalRunningDirection ===
|
||||
electronicMapGraphicData.Section.RunningDirection.BtoA
|
||||
) {
|
||||
this.lineGraphic.lineStyle(SectionConsts.lineWidth, '#f00');
|
||||
} else if (
|
||||
this.datas.normalRunningDirection ===
|
||||
electronicMapGraphicData.Section.RunningDirection.AtoB
|
||||
) {
|
||||
this.lineGraphic.lineStyle(SectionConsts.lineWidth, '#0f0');
|
||||
}
|
||||
}
|
||||
|
||||
this.lineGraphic.paint();
|
||||
}
|
||||
|
||||
this.labelGraphic.text = this.datas.code;
|
||||
const labelPosition = this.datas.childTransforms?.find(
|
||||
(t) => t.name === this.labelGraphic.name
|
||||
)?.transform.position;
|
||||
if (labelPosition) {
|
||||
this.labelGraphic.position.set(labelPosition.x, labelPosition.y);
|
||||
} else {
|
||||
this.labelGraphic.position.set(
|
||||
this.datas.points[0].x,
|
||||
this.datas.points[0].y + 20
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
getVerticesList(): IPointData[] {
|
||||
if (this.datas.isCurve) {
|
||||
return [
|
||||
this.datas.points[0],
|
||||
...convertToBezierParams(this.datas.points).map((param) => param.p2),
|
||||
];
|
||||
} else {
|
||||
return this.datas.points;
|
||||
}
|
||||
}
|
||||
getStartPoint() {
|
||||
return this.datas.points[0];
|
||||
}
|
||||
getEndPoint(): IPointData {
|
||||
return this.datas.points[this.datas.points.length - 1];
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
|
||||
get datas(): ISectionData {
|
||||
return this.getDatas<ISectionData>();
|
||||
}
|
||||
get states(): ISectionState {
|
||||
return this.getStates<ISectionState>();
|
||||
}
|
||||
|
||||
get linePoints(): IPointData[] {
|
||||
return this.datas.points;
|
||||
}
|
||||
set linePoints(points: IPointData[]) {
|
||||
const old = this.datas.clone();
|
||||
old.points = points;
|
||||
this.updateData(old);
|
||||
}
|
||||
|
||||
getConnectElement(port: DevicePort) {
|
||||
const relation = this.relationManage
|
||||
.getRelationsOfGraphic(this)
|
||||
.find(
|
||||
(relation) =>
|
||||
relation.getRelationParam(this).getParam<DevicePort>() === port &&
|
||||
(relation.getOtherGraphic(this) instanceof Section ||
|
||||
relation.getOtherGraphic(this) instanceof Turnout)
|
||||
);
|
||||
if (!relation) {
|
||||
return;
|
||||
}
|
||||
return {
|
||||
g: relation?.getOtherGraphic(this) as Section | Turnout,
|
||||
port: relation?.getOtherRelationParam(this).getParam<DevicePort>(),
|
||||
};
|
||||
}
|
||||
|
||||
/** 获取拆分逻辑区段数据 */
|
||||
getSplitPoints(count: number): IPointData[][] {
|
||||
if (this.datas.points.length !== 2) {
|
||||
let totalLen = 0;
|
||||
const lengths: number[] = [];
|
||||
for (let i = 1; i < this.datas.points.length; i++) {
|
||||
const { x: x1, y: y1 } = this.datas.points[i - 1],
|
||||
{ x: x2, y: y2 } = this.datas.points[i];
|
||||
const len = new Vector2([x2 - x1, y2 - y1]).length();
|
||||
totalLen += len;
|
||||
lengths.push(len);
|
||||
}
|
||||
const counts = lengths.map((length) =>
|
||||
Math.round((count * length) / totalLen)
|
||||
);
|
||||
if (counts.reduce((p, c) => p + c, 0) !== count) {
|
||||
const intersection = counts.reduce((p, c) => p + c, 0) - count;
|
||||
let maxCountIndex = 0,
|
||||
maxCount = 0;
|
||||
counts.forEach((c, i) => {
|
||||
if (c > maxCount) {
|
||||
maxCount = c;
|
||||
maxCountIndex = i;
|
||||
}
|
||||
});
|
||||
counts[maxCountIndex] + intersection;
|
||||
}
|
||||
return counts
|
||||
.map((count, i) => {
|
||||
return splitLineEvenly(
|
||||
this.localToCanvasPoint(this.datas.points[i]),
|
||||
this.localToCanvasPoint(this.datas.points[i + 1]),
|
||||
count
|
||||
);
|
||||
})
|
||||
.flat();
|
||||
} else {
|
||||
return splitLineEvenly(
|
||||
this.localToCanvasPoint(this.datas.points[0]),
|
||||
this.localToCanvasPoint(
|
||||
this.datas.points[this.datas.points.length - 1]
|
||||
),
|
||||
count
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
buildRelation() {
|
||||
this.relationManage.deleteRelationOfGraphicAndOtherType(this, Section.Type);
|
||||
|
||||
if (this.datas.sectionType === SectionType.Physical) {
|
||||
this.queryStore.queryByType<Section>(Section.Type).forEach((section) => {
|
||||
if (section.id === this.id) return;
|
||||
|
||||
let param: DevicePort[] = [];
|
||||
if (
|
||||
distance2(
|
||||
this.localToCanvasPoint(this.getStartPoint()),
|
||||
section.localToCanvasPoint(section.getStartPoint())
|
||||
) <= tolerance
|
||||
) {
|
||||
param = [DevicePort.A, DevicePort.A];
|
||||
}
|
||||
if (
|
||||
distance2(
|
||||
this.localToCanvasPoint(this.getEndPoint()),
|
||||
section.localToCanvasPoint(section.getStartPoint())
|
||||
) <= tolerance
|
||||
) {
|
||||
param = [DevicePort.B, DevicePort.A];
|
||||
}
|
||||
if (
|
||||
distance2(
|
||||
this.localToCanvasPoint(this.getStartPoint()),
|
||||
section.localToCanvasPoint(section.getEndPoint())
|
||||
) <= tolerance
|
||||
) {
|
||||
param = [DevicePort.A, DevicePort.B];
|
||||
}
|
||||
if (
|
||||
distance2(
|
||||
this.localToCanvasPoint(this.getEndPoint()),
|
||||
section.localToCanvasPoint(section.getEndPoint())
|
||||
) <= tolerance
|
||||
) {
|
||||
param = [DevicePort.B, DevicePort.B];
|
||||
}
|
||||
if (param.length) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, param[0]),
|
||||
new GraphicRelationParam(section, param[1])
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
saveRelations() {
|
||||
const paRelation = this.relationManage
|
||||
.getRelationsOfGraphic(this)
|
||||
.find(
|
||||
(relation) =>
|
||||
relation.getRelationParam(this).param === DevicePort.A &&
|
||||
(relation.getOtherGraphic(this) instanceof Section ||
|
||||
relation.getOtherGraphic(this) instanceof Turnout)
|
||||
);
|
||||
const paDevice = paRelation?.getOtherGraphic<Section | Turnout>(this);
|
||||
if (paDevice) {
|
||||
this.datas.paRef = createRelatedRefProto(
|
||||
paDevice.type,
|
||||
paDevice.id,
|
||||
paRelation?.getOtherRelationParam(this).param
|
||||
);
|
||||
} else {
|
||||
this.datas.paRef = undefined;
|
||||
}
|
||||
const pbRelation = this.relationManage
|
||||
.getRelationsOfGraphic(this)
|
||||
.find(
|
||||
(relation) =>
|
||||
relation.getRelationParam(this).param === DevicePort.B &&
|
||||
(relation.getOtherGraphic(this) instanceof Section ||
|
||||
relation.getOtherGraphic(this) instanceof Turnout)
|
||||
);
|
||||
const pbDevice = pbRelation?.getOtherGraphic<Section | Turnout>(this);
|
||||
if (pbDevice) {
|
||||
this.datas.pbRef = createRelatedRefProto(
|
||||
pbDevice.type,
|
||||
pbDevice.id,
|
||||
pbRelation?.getOtherRelationParam(this).param
|
||||
);
|
||||
} else {
|
||||
this.datas.pbRef = undefined;
|
||||
}
|
||||
this.datas.axleCountings = this.relationManage
|
||||
.getRelationsOfGraphicAndOtherType(this, AxleCounting.Type)
|
||||
.map((relation) => relation.getOtherGraphic<AxleCounting>(this).datas.id);
|
||||
}
|
||||
|
||||
loadRelations() {
|
||||
if (this.datas?.paRef?.id) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, DevicePort.A),
|
||||
new GraphicRelationParam(
|
||||
this.queryStore.queryById(this.datas.paRef.id),
|
||||
protoPort2Data(this.datas.paRef.devicePort)
|
||||
)
|
||||
);
|
||||
}
|
||||
if (this.datas?.pbRef?.id) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, DevicePort.B),
|
||||
new GraphicRelationParam(
|
||||
this.queryStore.queryById(this.datas.pbRef.id),
|
||||
protoPort2Data(this.datas.pbRef.devicePort)
|
||||
)
|
||||
);
|
||||
}
|
||||
if (this.datas.sectionType === SectionType.TurnoutPhysical) {
|
||||
if (this.datas.axleCountings) {
|
||||
this.datas.axleCountings.forEach((id) => {
|
||||
this.relationManage.addRelation(
|
||||
this,
|
||||
this.queryStore.queryById<AxleCounting>(id)
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface ISectionTemplateProperty {
|
||||
isCurve: boolean;
|
||||
segmentsCount: number;
|
||||
}
|
||||
|
||||
export class SectionTemplate
|
||||
extends JlGraphicTemplate<Section>
|
||||
implements ISectionTemplateProperty
|
||||
{
|
||||
isCurve = false;
|
||||
segmentsCount = 10;
|
||||
constructor(dataTemplate: ISectionData, stateTemplate?: ISectionState) {
|
||||
super(Section.Type, { dataTemplate, stateTemplate });
|
||||
}
|
||||
new() {
|
||||
const g = new Section();
|
||||
g.loadData(this.datas);
|
||||
g.loadState(this.states);
|
||||
return g;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,671 @@
|
|||
import {
|
||||
DisplayObject,
|
||||
FederatedMouseEvent,
|
||||
Graphics,
|
||||
IHitArea,
|
||||
IPointData,
|
||||
Point,
|
||||
} from 'pixi.js';
|
||||
import { Dialog } from 'quasar';
|
||||
import SectionSplitDialog from 'src/components/draw-app/dialogs/SectionSplitDialog.vue';
|
||||
import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
|
||||
import { SectionData } from 'src/drawApp/graphics/SectionInteraction';
|
||||
import {
|
||||
AppConsts,
|
||||
ChildTransform,
|
||||
DraggablePoint,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
GraphicTransform,
|
||||
GraphicTransformEvent,
|
||||
IDrawApp,
|
||||
IGraphicApp,
|
||||
JlGraphic,
|
||||
KeyListener,
|
||||
VectorText,
|
||||
calculateLineMidpoint,
|
||||
calculateMirrorPoint,
|
||||
convertToBezierParams,
|
||||
linePoint,
|
||||
pointPolygon,
|
||||
BezierCurveEditPlugin,
|
||||
IEditPointOptions,
|
||||
ILineGraphic,
|
||||
PolylineEditPlugin,
|
||||
addWayPoint,
|
||||
clearWayPoint,
|
||||
getWaypointRangeIndex,
|
||||
ContextMenu,
|
||||
MenuItemOptions,
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
AbsorbablePoint,
|
||||
} from 'jl-graphic';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
import { AxleCounting } from '../axleCounting/AxleCounting';
|
||||
import { LogicSection } from '../logicSection/LogicSection';
|
||||
import { LogicSectionDraw } from '../logicSection/LogicSectionDrawAssistant';
|
||||
import { Turnout } from '../turnout/Turnout';
|
||||
import {
|
||||
ISectionData,
|
||||
Section,
|
||||
DevicePort,
|
||||
SectionConsts,
|
||||
SectionTemplate,
|
||||
SectionType,
|
||||
} from './Section';
|
||||
import { ConcentrationDividingLine } from '../concentrationDividingLine/ConcentrationDividingLine';
|
||||
import { buildDragMoveAbsorbablePositions } from '../turnout/TurnoutDrawAssistant';
|
||||
|
||||
export class SectionDraw extends GraphicDrawAssistant<
|
||||
SectionTemplate,
|
||||
ISectionData
|
||||
> {
|
||||
points: Point[] = [];
|
||||
graphic = new Graphics();
|
||||
|
||||
keyQListener = new KeyListener({
|
||||
value: 'KeyQ',
|
||||
global: true,
|
||||
onPress: () => {
|
||||
if (this.points.length === 0) {
|
||||
this.graphicTemplate.isCurve = true;
|
||||
}
|
||||
},
|
||||
});
|
||||
keyZListener = new KeyListener({
|
||||
value: 'KeyZ',
|
||||
global: true,
|
||||
onPress: () => {
|
||||
if (this.points.length === 0) {
|
||||
this.graphicTemplate.isCurve = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
constructor(app: IDrawApp, template: SectionTemplate) {
|
||||
super(app, template, 'sym_o_timeline', '区段Section');
|
||||
this.container.addChild(this.graphic);
|
||||
|
||||
SectionPointEditPlugin.init(app, this);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.app.addKeyboardListener(this.keyQListener, this.keyZListener);
|
||||
}
|
||||
unbind(): void {
|
||||
super.unbind();
|
||||
this.app.removeKeyboardListener(this.keyQListener, this.keyZListener);
|
||||
}
|
||||
|
||||
onLeftDown(e: FederatedMouseEvent): void {
|
||||
const { x, y } = this.toCanvasCoordinates(e.global);
|
||||
const p = new Point(x, y);
|
||||
if (this.graphicTemplate.isCurve) {
|
||||
if (this.points.length == 0) {
|
||||
this.points.push(p);
|
||||
} else {
|
||||
this.points.push(p, p.clone());
|
||||
}
|
||||
} else {
|
||||
this.points.push(p);
|
||||
}
|
||||
}
|
||||
|
||||
onLeftUp(e: FederatedMouseEvent): void {
|
||||
const template = this.graphicTemplate;
|
||||
if (template.isCurve) {
|
||||
const mp = this.toCanvasCoordinates(e.global);
|
||||
if (this.points.length === 1) {
|
||||
this.points.push(new Point(mp.x, mp.y));
|
||||
} else if (this.points.length > 1) {
|
||||
const cp2 = this.points[this.points.length - 2];
|
||||
const p = this.points[this.points.length - 1];
|
||||
cp2.copyFrom(calculateMirrorPoint(p, mp));
|
||||
this.points.push(mp);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onRightClick(): void {
|
||||
if (this.points.length < 2) {
|
||||
this.finish();
|
||||
return;
|
||||
}
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
onEsc(): void {
|
||||
if (this.points.length < 2) {
|
||||
this.finish();
|
||||
return;
|
||||
}
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
if (this.points.length < 1) return;
|
||||
const template = this.graphicTemplate;
|
||||
this.graphic.clear();
|
||||
this.graphic.lineStyle(SectionConsts.lineWidth, SectionConsts.lineColor);
|
||||
|
||||
const ps = [...this.points];
|
||||
if (template.isCurve) {
|
||||
if (ps.length === 1) {
|
||||
this.graphic.moveTo(ps[0].x, ps[0].y);
|
||||
this.graphic.lineTo(p.x, p.y);
|
||||
} else {
|
||||
if ((ps.length + 1) % 3 === 0) {
|
||||
ps.push(p.clone(), p.clone());
|
||||
} else {
|
||||
const cp = ps[ps.length - 2];
|
||||
const p1 = ps[ps.length - 1];
|
||||
const mp = calculateMirrorPoint(p1, p);
|
||||
cp.copyFrom(mp);
|
||||
}
|
||||
const bps = convertToBezierParams(ps);
|
||||
bps.forEach((bp) => {
|
||||
this.graphic.drawBezierCurve(
|
||||
bp.p1,
|
||||
bp.p2,
|
||||
bp.cp1,
|
||||
bp.cp2,
|
||||
template.segmentsCount
|
||||
);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
ps.push(p);
|
||||
ps.forEach((p, i) => {
|
||||
if (i !== 0) {
|
||||
this.graphic.lineTo(p.x, p.y);
|
||||
} else {
|
||||
this.graphic.moveTo(p.x, p.y);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
prepareData(data: ISectionData): boolean {
|
||||
const template = this.graphicTemplate;
|
||||
if (
|
||||
(!template.isCurve && this.points.length < 2) ||
|
||||
(template.isCurve && this.points.length < 4)
|
||||
) {
|
||||
console.log('Section绘制因点不够取消绘制');
|
||||
return false;
|
||||
}
|
||||
if (template.isCurve) {
|
||||
this.points.pop();
|
||||
}
|
||||
data.isCurve = template.isCurve;
|
||||
data.segmentsCount = template.segmentsCount;
|
||||
data.points = this.points;
|
||||
data.code = 'G000';
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
this.points = [];
|
||||
this.graphic.clear();
|
||||
}
|
||||
|
||||
generateTurnoutSection() {
|
||||
const turnoutIds: number[] = []; /* 已遍历的道岔id列表 */
|
||||
const dfs = (turnout: Turnout) => {
|
||||
const axleCountings: AxleCounting[] = [];
|
||||
const turnouts: Turnout[] = [];
|
||||
if (turnoutIds.includes(turnout.datas.id)) return;
|
||||
turnoutIds.push(turnout.datas.id);
|
||||
|
||||
turnouts.push(turnout);
|
||||
|
||||
Object.values(DevicePort).forEach((port) => {
|
||||
const currentPortRelated = turnout.getGraphicOfPort(port);
|
||||
if (
|
||||
currentPortRelated.some((graphic) => graphic instanceof AxleCounting)
|
||||
) {
|
||||
const axleCounting = currentPortRelated.find(
|
||||
(graphic) => graphic instanceof AxleCounting
|
||||
) as AxleCounting;
|
||||
axleCountings.push(axleCounting);
|
||||
} else {
|
||||
const nextTurnout = currentPortRelated.find(
|
||||
(graphic) => graphic instanceof Turnout
|
||||
) as Turnout;
|
||||
const result = dfs(nextTurnout);
|
||||
if (result?.axleCountings) {
|
||||
axleCountings.push(...result.axleCountings);
|
||||
turnouts.push(...result.turnouts);
|
||||
}
|
||||
}
|
||||
});
|
||||
return { axleCountings, turnouts };
|
||||
};
|
||||
|
||||
const graphics: Section[] = [];
|
||||
this.app.queryStore
|
||||
.queryByType<Turnout>(Turnout.Type)
|
||||
.forEach((turnout) => {
|
||||
const result = dfs(turnout);
|
||||
if (!result || !result.axleCountings.length) {
|
||||
return;
|
||||
}
|
||||
const turnoutSections = this.app.queryStore
|
||||
.queryByType<Section>(Section.Type)
|
||||
.filter((s) => s.datas.sectionType === SectionType.TurnoutPhysical);
|
||||
//判重
|
||||
const existed = turnoutSections.some((sec) =>
|
||||
result.axleCountings.every((ac) =>
|
||||
sec.datas.axleCountings.includes(ac.datas.id)
|
||||
)
|
||||
);
|
||||
if (existed) return;
|
||||
const turnoutPhysicalSectionData = new SectionData();
|
||||
turnoutPhysicalSectionData.id = this.nextId();
|
||||
turnoutPhysicalSectionData.sectionType =
|
||||
graphicData.Section.SectionType.TurnoutPhysical;
|
||||
turnoutPhysicalSectionData.points = result.axleCountings.map((ac) => {
|
||||
return new Point(ac.position.x, ac.position.y);
|
||||
});
|
||||
turnoutPhysicalSectionData.axleCountings = result.axleCountings.map(
|
||||
(ac) => ac.datas.id
|
||||
);
|
||||
turnoutPhysicalSectionData.code = result.turnouts
|
||||
.map((t) => t.datas.code)
|
||||
.join('-');
|
||||
let labelPosition: IPointData;
|
||||
if (result.turnouts.length === 2) {
|
||||
labelPosition = calculateLineMidpoint(
|
||||
result.turnouts[0].position,
|
||||
result.turnouts[1].position
|
||||
);
|
||||
} else {
|
||||
labelPosition = { x: result.turnouts[0].x, y: result.turnouts[0].y };
|
||||
}
|
||||
labelPosition.y += 20;
|
||||
const labelTransform = GraphicTransform.default();
|
||||
labelTransform.position = labelPosition;
|
||||
turnoutPhysicalSectionData.childTransforms = [
|
||||
new ChildTransform('label', labelTransform),
|
||||
];
|
||||
const g = this.graphicTemplate.new();
|
||||
g.position.set(turnout.datas.pointC[0].x, turnout.datas.pointC[0].y);
|
||||
g.loadData(turnoutPhysicalSectionData);
|
||||
graphics.push(g);
|
||||
});
|
||||
this.storeGraphic(...graphics);
|
||||
graphics.forEach((g) => {
|
||||
g.loadRelations();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class SectionGraphicHitArea implements IHitArea {
|
||||
section: Section;
|
||||
constructor(section: Section) {
|
||||
this.section = section;
|
||||
}
|
||||
contains(x: number, y: number): boolean {
|
||||
if (this.section.datas.sectionType === SectionType.TurnoutPhysical) {
|
||||
return false;
|
||||
}
|
||||
if (this.section.datas.isCurve) {
|
||||
const bps = convertToBezierParams(this.section.datas.points);
|
||||
for (let i = 0; i < bps.length; i++) {
|
||||
const bp = bps[i];
|
||||
if (
|
||||
pointPolygon(
|
||||
{ x, y },
|
||||
[bp.p1, bp.cp1, bp.cp2, bp.p2],
|
||||
SectionConsts.lineWidth
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let i = 1; i < this.section.datas.points.length; i++) {
|
||||
const p1 = this.section.datas.points[i - 1];
|
||||
const p2 = this.section.datas.points[i];
|
||||
if (linePoint(p1, p2, { x, y }, SectionConsts.lineWidth)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function buildAbsorbablePositions(
|
||||
section: Section | ConcentrationDividingLine,
|
||||
dp: DraggablePoint
|
||||
): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const changePoints = section.localToCanvasPoints(...section.datas.points);
|
||||
for (let i = 0; i < changePoints.length; i++) {
|
||||
if (changePoints[i].equals(dp)) {
|
||||
const { width, height } = section.getGraphicApp().canvas;
|
||||
if (i == 0 || i == changePoints.length - 1) {
|
||||
const ps =
|
||||
i == 0 ? changePoints[1] : changePoints[changePoints.length - 2];
|
||||
const x = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
|
||||
const y = new AbsorbableLine({ x: ps.x, y: 0 }, { x: ps.x, y: height });
|
||||
aps.push(x, y);
|
||||
} else {
|
||||
const generateAxisPoint = [changePoints[i - 1], changePoints[i + 1]];
|
||||
generateAxisPoint.forEach((point) => {
|
||||
const x = new AbsorbableLine(
|
||||
{ x: 0, y: point.y },
|
||||
{ x: width, y: point.y }
|
||||
);
|
||||
const y = new AbsorbableLine(
|
||||
{ x: point.x, y: 0 },
|
||||
{ x: point.x, y: height }
|
||||
);
|
||||
aps.push(x, y);
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (section instanceof Section) {
|
||||
const sections = section.queryStore
|
||||
.queryByType<Section>(Section.Type)
|
||||
.filter((g) => g.datas.sectionType == SectionType.Physical);
|
||||
sections.forEach((item) => {
|
||||
if (item.id !== section.id) {
|
||||
item.localToCanvasPoints(...item.datas.points).forEach((p) => {
|
||||
aps.push(new AbsorbablePoint(p));
|
||||
});
|
||||
}
|
||||
});
|
||||
const turnouts = section.queryStore.queryByType<Turnout>(Turnout.Type);
|
||||
turnouts.forEach((turnout) => {
|
||||
turnout.getPortPoints().forEach((points) => {
|
||||
turnout.localToCanvasPoints(...points).forEach((p) => {
|
||||
aps.push(new AbsorbablePoint(p));
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
return aps;
|
||||
}
|
||||
|
||||
export function onEditPointCreate(g: ILineGraphic, dp: DraggablePoint): void {
|
||||
const section = g as Section | ConcentrationDividingLine;
|
||||
dp.on('transformstart', (e: GraphicTransformEvent) => {
|
||||
if (e.isShift()) {
|
||||
section.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(section, dp),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
class SectionPolylineEditPlugin extends PolylineEditPlugin {
|
||||
static Name = 'SectionPolylineEditPlugin';
|
||||
labels: VectorText[] = [];
|
||||
constructor(g: ILineGraphic, options?: IEditPointOptions) {
|
||||
super(g, options);
|
||||
this.name = SectionPolylineEditPlugin.Name;
|
||||
this.initLabels();
|
||||
}
|
||||
|
||||
initLabels() {
|
||||
this.labels = ['A', 'B'].map((str) => {
|
||||
const vc = new VectorText(str, { fill: AppConsts.assistantElementColor });
|
||||
vc.setVectorFontSize(14);
|
||||
vc.anchor.set(0.5);
|
||||
return vc;
|
||||
});
|
||||
this.addChild(...this.labels);
|
||||
this.updateEditedPointsPosition();
|
||||
}
|
||||
|
||||
updateEditedPointsPosition() {
|
||||
super.updateEditedPointsPosition();
|
||||
this.labels[0]?.position.set(
|
||||
this.editedPoints[0].x,
|
||||
this.editedPoints[0].y + 10
|
||||
);
|
||||
this.labels[1]?.position.set(
|
||||
this.editedPoints[this.editedPoints.length - 1].x,
|
||||
this.editedPoints[this.editedPoints.length - 1].y + 10
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SectionBazierCurveEditPlugin extends BezierCurveEditPlugin {
|
||||
static Name = 'SectionBazierCurveEditPlugin';
|
||||
labels: VectorText[] = [];
|
||||
constructor(g: ILineGraphic, options?: IEditPointOptions) {
|
||||
super(g, options);
|
||||
this.name = SectionBazierCurveEditPlugin.Name;
|
||||
this.initLabels();
|
||||
}
|
||||
initLabels() {
|
||||
this.labels = [new VectorText('A'), new VectorText('B')];
|
||||
this.labels.forEach((label) => {
|
||||
label.setVectorFontSize(14);
|
||||
this.addChild(label);
|
||||
});
|
||||
this.updateEditedPointsPosition();
|
||||
}
|
||||
updateEditedPointsPosition() {
|
||||
super.updateEditedPointsPosition();
|
||||
this.labels[0]?.position.set(
|
||||
this.editedPoints[0].x,
|
||||
this.editedPoints[0].y + 10
|
||||
);
|
||||
this.labels[1]?.position.set(
|
||||
this.editedPoints[this.editedPoints.length - 1].x,
|
||||
this.editedPoints[this.editedPoints.length - 1].y + 10
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const addWaypointConfig: MenuItemOptions = {
|
||||
name: '添加路径点',
|
||||
};
|
||||
export const clearWaypointsConfig: MenuItemOptions = {
|
||||
name: '清除所有路径点',
|
||||
};
|
||||
export const splitSectionConfig: MenuItemOptions = {
|
||||
name: '拆分',
|
||||
// disabled: true,
|
||||
};
|
||||
const SectionEditMenu: ContextMenu = ContextMenu.init({
|
||||
name: '区段编辑菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [addWaypointConfig, clearWaypointsConfig],
|
||||
},
|
||||
{
|
||||
items: [splitSectionConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export class SectionPointEditPlugin extends GraphicInteractionPlugin<Section> {
|
||||
static Name = 'SectionPointDrag';
|
||||
drawAssistant: SectionDraw;
|
||||
|
||||
constructor(app: IGraphicApp, da: SectionDraw) {
|
||||
super(SectionPointEditPlugin.Name, app);
|
||||
this.drawAssistant = da;
|
||||
app.registerMenu(SectionEditMenu);
|
||||
}
|
||||
static init(app: IGraphicApp, da: SectionDraw) {
|
||||
return new SectionPointEditPlugin(app, da);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Section[] | undefined {
|
||||
return grahpics.filter((g) => g.type == Section.Type) as Section[];
|
||||
}
|
||||
bind(g: Section): void {
|
||||
g.lineGraphic.eventMode = 'static';
|
||||
g.lineGraphic.cursor = 'pointer';
|
||||
g.lineGraphic.hitArea = new SectionGraphicHitArea(g);
|
||||
g.transformSave = true;
|
||||
g.labelGraphic.eventMode = 'static';
|
||||
g.labelGraphic.cursor = 'pointer';
|
||||
g.labelGraphic.selectable = true;
|
||||
g.labelGraphic.draggable = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
g.on('unselected', this.onUnselected, this);
|
||||
g.on('transformstart', this.onDragMove, this);
|
||||
// g.on('_rightclick', this.onContextMenu, this);
|
||||
}
|
||||
unbind(g: Section): void {
|
||||
g.off('selected', this.onSelected, this);
|
||||
g.off('unselected', this.onUnselected, this);
|
||||
g.off('transformstart', this.onDragMove, this);
|
||||
// g.off('_rightclick', this.onContextMenu, this);
|
||||
}
|
||||
|
||||
onContextMenu(e: FederatedMouseEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const section = target.getGraphic() as Section;
|
||||
this.app.updateSelected(section);
|
||||
if (section.datas.sectionType === SectionType.TurnoutPhysical) {
|
||||
return;
|
||||
}
|
||||
const p = section.screenToLocalPoint(e.global);
|
||||
addWaypointConfig.handler = () => {
|
||||
const linePoints = section.linePoints;
|
||||
const { start, end } = getWaypointRangeIndex(
|
||||
linePoints,
|
||||
false,
|
||||
p,
|
||||
SectionConsts.lineWidth
|
||||
);
|
||||
addWayPoint(section, false, start, end, p);
|
||||
};
|
||||
clearWaypointsConfig.handler = () => {
|
||||
clearWayPoint(section, false);
|
||||
};
|
||||
splitSectionConfig.disabled = false;
|
||||
splitSectionConfig.handler = () => {
|
||||
Dialog.create({
|
||||
title: '拆分区段',
|
||||
message: '请选择生成数量和方向',
|
||||
component: SectionSplitDialog,
|
||||
cancel: true,
|
||||
persistent: true,
|
||||
}).onOk((data: { num: number; dir: 'ltr' | 'rtl' }) => {
|
||||
const { num, dir } = data;
|
||||
const sectionData = section.datas;
|
||||
const points = section.getSplitPoints(num);
|
||||
const children: LogicSection[] = [];
|
||||
let codeAppend = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.slice(0, num);
|
||||
if (
|
||||
(dir === 'ltr' &&
|
||||
sectionData.points[0].x >
|
||||
sectionData.points[sectionData.points.length - 1].x) ||
|
||||
(dir === 'rtl' &&
|
||||
sectionData.points[0].x <
|
||||
sectionData.points[sectionData.points.length - 1].x)
|
||||
) {
|
||||
codeAppend = codeAppend.split('').reverse().join('');
|
||||
}
|
||||
points.forEach((ps, i) => {
|
||||
const data = new LogicSectionData();
|
||||
const logicSectionDraw =
|
||||
this.drawAssistant.app.getDrawAssistant<LogicSectionDraw>(
|
||||
LogicSection.Type
|
||||
);
|
||||
data.id = logicSectionDraw.nextId();
|
||||
data.code = `${sectionData.code}-${codeAppend.charAt(i % 26)}`;
|
||||
data.points = ps.map(
|
||||
(p) => new graphicData.Point({ x: p.x, y: p.y })
|
||||
);
|
||||
data.id = this.drawAssistant.nextId();
|
||||
data.childTransforms = [
|
||||
new ChildTransform(
|
||||
'label',
|
||||
new GraphicTransform(
|
||||
{
|
||||
x:
|
||||
data.points[0].x +
|
||||
(data.points[1].x - data.points[0].x) / 2,
|
||||
y:
|
||||
data.points[0].y +
|
||||
(data.points[1].y - data.points[0].y) / 2 +
|
||||
20,
|
||||
},
|
||||
{ x: 0, y: 0 },
|
||||
0,
|
||||
{ x: 0, y: 0 }
|
||||
)
|
||||
),
|
||||
];
|
||||
const g = logicSectionDraw.graphicTemplate.new();
|
||||
g.loadData(data);
|
||||
logicSectionDraw.storeGraphic(g);
|
||||
children.push(g);
|
||||
});
|
||||
// sectionData.children = children.map((g) => g.datas.id);
|
||||
section.repaint();
|
||||
section.buildRelation();
|
||||
section.draggable = false;
|
||||
children.forEach((c) => c.buildRelation());
|
||||
this.app.updateSelected(...children);
|
||||
});
|
||||
};
|
||||
SectionEditMenu.open(e.global);
|
||||
}
|
||||
|
||||
onSelected(g: DisplayObject): void {
|
||||
const section = g as Section;
|
||||
if (section.datas.sectionType === SectionType.TurnoutPhysical) {
|
||||
return;
|
||||
}
|
||||
if (section.datas.isCurve) {
|
||||
let lep = section.getAssistantAppend<SectionBazierCurveEditPlugin>(
|
||||
SectionBazierCurveEditPlugin.Name
|
||||
);
|
||||
if (!lep) {
|
||||
lep = new SectionBazierCurveEditPlugin(section, {
|
||||
onEditPointCreate,
|
||||
});
|
||||
section.addAssistantAppend(lep);
|
||||
}
|
||||
lep.showAll();
|
||||
} else {
|
||||
let lep = section.getAssistantAppend<SectionPolylineEditPlugin>(
|
||||
SectionPolylineEditPlugin.Name
|
||||
);
|
||||
if (!lep) {
|
||||
lep = new SectionPolylineEditPlugin(section, { onEditPointCreate });
|
||||
section.addAssistantAppend(lep);
|
||||
}
|
||||
lep.showAll();
|
||||
}
|
||||
}
|
||||
onUnselected(g: DisplayObject): void {
|
||||
const section = g as Section;
|
||||
if (section.datas.isCurve) {
|
||||
const lep = section.getAssistantAppend<SectionBazierCurveEditPlugin>(
|
||||
SectionBazierCurveEditPlugin.Name
|
||||
);
|
||||
if (lep) {
|
||||
lep.hideAll();
|
||||
}
|
||||
} else {
|
||||
const lep = section.getAssistantAppend<SectionPolylineEditPlugin>(
|
||||
SectionPolylineEditPlugin.Name
|
||||
);
|
||||
if (lep) {
|
||||
lep.hideAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
onDragMove(e: GraphicTransformEvent) {
|
||||
const section = e.target as Section;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildDragMoveAbsorbablePositions(section),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { Graphics, IPointData } from 'pixi.js';
|
||||
import { assertBezierPoints, convertToBezierParams } from 'jl-graphic';
|
||||
|
||||
export class SectionGraphic extends Graphics {
|
||||
static Type = 'SectionGraphic';
|
||||
private _points: IPointData[] = [];
|
||||
public get points(): IPointData[] {
|
||||
return this._points;
|
||||
}
|
||||
public set points(value: IPointData[]) {
|
||||
if (!this.isCurve) {
|
||||
if (value.length < 2) {
|
||||
throw Error('Polyline must have at least 2 points');
|
||||
}
|
||||
} else {
|
||||
assertBezierPoints(value);
|
||||
}
|
||||
this._points = value;
|
||||
}
|
||||
|
||||
private _segmentsCount = 10;
|
||||
public get segmentsCount(): number {
|
||||
return this._segmentsCount;
|
||||
}
|
||||
public set segmentsCount(value: number) {
|
||||
if (value < 1) {
|
||||
throw Error('segmentsCount must be at least 1');
|
||||
}
|
||||
this._segmentsCount = value;
|
||||
}
|
||||
|
||||
isCurve = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
paint() {
|
||||
if (this.isCurve) {
|
||||
const bps = convertToBezierParams(this.points);
|
||||
bps.forEach((bp) => {
|
||||
this.drawBezierCurve(bp.p1, bp.p2, bp.cp1, bp.cp2, this.segmentsCount);
|
||||
});
|
||||
} else {
|
||||
this.moveTo(this.points[0].x, this.points[0].y);
|
||||
for (let i = 1; i < this.points.length; i++) {
|
||||
this.lineTo(this.points[i].x, this.points[i].y);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
import { Graphics, Point } from 'pixi.js';
|
||||
import { calculateMirrorPoint, GraphicAnimation, JlGraphic } from 'jl-graphic';
|
||||
import { ISignalState, SignalColorEnum, signalConsts } from './Signal';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
|
||||
// export enum LampEnum {
|
||||
// lampPostColor = '0xFFFFFF',
|
||||
// redLamp = '0XFF0000',
|
||||
// greenLamp = '0X00FF00',
|
||||
// yellowLamp = '0XFFFF00',
|
||||
// whiteLamp = '0XFFFFFF',
|
||||
// blueLamp = '0X0033FF',
|
||||
// }
|
||||
|
||||
// const lampConsts = {
|
||||
// verticalLampPostLength: 16,
|
||||
// levelLampPostLength: 4,
|
||||
// postLineWidth: 3,
|
||||
// lampRadius: 8,
|
||||
// };
|
||||
|
||||
/* const anmiationNameConst = {
|
||||
signaRedFlash: 'signal_red_flash',
|
||||
signalGreenFlash: 'signal_green_flash',
|
||||
signalYellowFlash: 'signal_yellow_flash',
|
||||
signalWhiteFlash: 'signal_white_flash',
|
||||
signalBlueFlash: 'signal_blue_flash',
|
||||
}; */
|
||||
|
||||
export class LampMainBody extends JlGraphic {
|
||||
static Type = 'LampMainBody';
|
||||
lampNum = 1;
|
||||
lampPost: Graphics = new Graphics();
|
||||
lamps: Graphics = new Graphics();
|
||||
redFlashAnimation: GraphicAnimation | null = null;
|
||||
mirror = false;
|
||||
deltaTime = 0;
|
||||
states: ISignalState | null = null;
|
||||
|
||||
constructor() {
|
||||
super(LampMainBody.Type);
|
||||
this.addChild(this.lampPost);
|
||||
this.addChild(this.lamps);
|
||||
}
|
||||
paint(
|
||||
mt: electronicMapGraphicData.Signal.Model,
|
||||
mirror: boolean,
|
||||
states: ISignalState
|
||||
) {
|
||||
this.lampPost.clear();
|
||||
this.lamps.clear();
|
||||
this.mirror = mirror;
|
||||
this.states = states;
|
||||
if (
|
||||
mt === electronicMapGraphicData.Signal.Model.HL ||
|
||||
mt === electronicMapGraphicData.Signal.Model.AB
|
||||
) {
|
||||
this.lampNum = 2;
|
||||
} else {
|
||||
this.lampNum = 3;
|
||||
}
|
||||
let lpp = new Point(signalConsts.levelLampPostLength, 0);
|
||||
if (mirror) {
|
||||
lpp = calculateMirrorPoint(new Point(0, 0), lpp);
|
||||
}
|
||||
this.lampPost
|
||||
.lineStyle(signalConsts.postLineWidth, SignalColorEnum.lampPostColor)
|
||||
.moveTo(0, -signalConsts.verticalLampPostLength / 2)
|
||||
.lineTo(0, signalConsts.verticalLampPostLength / 2)
|
||||
.moveTo(0, 0)
|
||||
.lineTo(lpp.x, lpp.y);
|
||||
this.chagneState(this.states);
|
||||
}
|
||||
doRepaint() {
|
||||
// this.paint(this.lampNum, this.mirror, this.states);
|
||||
}
|
||||
// stopAnmiation() {
|
||||
// const redFlashA = this.animation(anmiationNameConst.signaRedFlash);
|
||||
// const greenFlashA = this.animation(anmiationNameConst.signalGreenFlash);
|
||||
// const blueFlashA = this.animation(anmiationNameConst.signalBlueFlash);
|
||||
// const yellowFlashA = this.animation(anmiationNameConst.signalYellowFlash);
|
||||
// const whiteFlashA = this.animation(anmiationNameConst.signalWhiteFlash);
|
||||
// if (redFlashA) {
|
||||
// redFlashA.pause();
|
||||
// }
|
||||
// if (greenFlashA) {
|
||||
// greenFlashA.pause();
|
||||
// }
|
||||
// if (blueFlashA) {
|
||||
// blueFlashA.pause();
|
||||
// }
|
||||
// if (yellowFlashA) {
|
||||
// yellowFlashA.pause();
|
||||
// }
|
||||
// if (whiteFlashA) {
|
||||
// whiteFlashA.pause();
|
||||
// }
|
||||
// }
|
||||
paintLamp(colors: string[]) {
|
||||
this.lamps.lineStyle(
|
||||
signalConsts.lampLineWidth,
|
||||
SignalColorEnum.lampLineColor
|
||||
);
|
||||
for (let i = 0; i < this.lampNum; i++) {
|
||||
const radiusX =
|
||||
(1 + i * 2) * signalConsts.lampRadius +
|
||||
signalConsts.levelLampPostLength;
|
||||
let lrp = new Point(radiusX, 0);
|
||||
if (this.mirror) {
|
||||
lrp = calculateMirrorPoint(new Point(0, 0), lrp);
|
||||
}
|
||||
const color = colors[i] ? colors[i] : SignalColorEnum.closeLamp;
|
||||
const alpha = color === SignalColorEnum.closeLamp ? 0 : 1;
|
||||
this.lamps.beginFill(color, alpha);
|
||||
this.lamps.drawCircle(lrp.x, lrp.y, signalConsts.lampRadius);
|
||||
this.lamps.endFill();
|
||||
}
|
||||
}
|
||||
chagneState(states: ISignalState) {
|
||||
console.log(states); //待之后处理
|
||||
try {
|
||||
/* if (states.aspect === state.Signal.Aspect.H) {
|
||||
this.paintLamp([SignalColorEnum.redLamp]);
|
||||
} else if (states.aspect === state.Signal.Aspect.L) {
|
||||
this.paintLamp(['', SignalColorEnum.greenLamp]);
|
||||
} else if (states.aspect === state.Signal.Aspect.U) {
|
||||
this.paintLamp(['', '', SignalColorEnum.yellowLamp]);
|
||||
} else if (states.aspect === state.Signal.Aspect.HU) {
|
||||
this.paintLamp([SignalColorEnum.redLamp, '', SignalColorEnum.yellowLamp]);
|
||||
} else if (states.aspect === state.Signal.Aspect.A) {
|
||||
this.paintLamp([SignalColorEnum.blueLamp]);
|
||||
} else if (states.aspect === state.Signal.Aspect.B) {
|
||||
this.paintLamp([SignalColorEnum.whiteLamp]);
|
||||
} else if (states.aspect === state.Signal.Aspect.OFF) {
|
||||
this.paintLamp([]);
|
||||
} */
|
||||
} catch (error) {
|
||||
console.error('信号机状态处理异常！', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,311 @@
|
|||
import { Graphics, Point } from 'pixi.js';
|
||||
import {
|
||||
calculateDistanceFromPointToLine,
|
||||
calculateFootPointFromPointToLine,
|
||||
GraphicData,
|
||||
GraphicRelationParam,
|
||||
GraphicState,
|
||||
isPointOnLine,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
} from 'jl-graphic';
|
||||
import { calculateMirrorPoint } from 'jl-graphic';
|
||||
import { LampMainBody } from './LampMainBody';
|
||||
import {
|
||||
drawArrow,
|
||||
IRelatedRefData,
|
||||
createRelatedRefProto,
|
||||
} from '../CommonGraphics';
|
||||
import { SignalCode } from './SignalCode';
|
||||
import { Section, DevicePort, SectionType } from '../section/Section';
|
||||
import { Turnout } from '../turnout/Turnout';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
|
||||
export enum Direction {
|
||||
LEFT = 0,
|
||||
RIGHT = 1,
|
||||
}
|
||||
|
||||
export interface KilometerSystem {
|
||||
get coordinateSystem(): string;
|
||||
set coordinateSystem(v: string);
|
||||
get kilometer(): number;
|
||||
set kilometer(v: number);
|
||||
get direction(): Direction;
|
||||
set direction(v: Direction);
|
||||
}
|
||||
|
||||
export interface ISignalData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
get mirror(): boolean;
|
||||
set mirror(v: boolean);
|
||||
get kilometerSystem(): KilometerSystem;
|
||||
set kilometerSystem(v: KilometerSystem);
|
||||
get refDev(): IRelatedRefData;
|
||||
set refDev(v: IRelatedRefData);
|
||||
get centralizedStations(): number[];
|
||||
set centralizedStations(v: number[]);
|
||||
get mt(): electronicMapGraphicData.Signal.Model;
|
||||
set mt(v: electronicMapGraphicData.Signal.Model);
|
||||
get direction(): electronicMapGraphicData.Direction;
|
||||
set direction(v: electronicMapGraphicData.Direction);
|
||||
clone(): ISignalData;
|
||||
copyFrom(data: ISignalData): void;
|
||||
eq(other: ISignalData): boolean;
|
||||
}
|
||||
|
||||
export interface ISignalState extends GraphicState {
|
||||
id?: string;
|
||||
get aspect(): number;
|
||||
set aspect(v: number);
|
||||
}
|
||||
|
||||
|
||||
export enum SignalColorEnum {
|
||||
humanControlColor = '0xffff00',
|
||||
fleetModeColor = '0x00ff00',
|
||||
blockedColor = '0XFF0000',
|
||||
defaultCodeColor = '0XFFFFFF',
|
||||
lampPostColor = '0xFFFFFF',
|
||||
//redLamp = '0XFF0000',
|
||||
greenLamp = '0X00FF00',
|
||||
yellowLamp = '0XFFFF00',
|
||||
//whiteLamp = '0XFFFFFF',
|
||||
blueLamp = '0X0033FF',
|
||||
closeLamp = '0X000000',
|
||||
logicModeColor = '0x000000',
|
||||
lampLineColor = '0x3149c3',
|
||||
}
|
||||
|
||||
export const signalConsts = {
|
||||
fleetModeLength: 24,
|
||||
fleetModeRadius: 8,
|
||||
fleetModeLineWidth: 6,
|
||||
humanControlRadius: 8,
|
||||
codeOffset: 20,
|
||||
codeFontSize: 11,
|
||||
blockedLineWidth: 1,
|
||||
verticalLampPostLength: 16,
|
||||
levelLampPostLength: 4,
|
||||
postLineWidth: 3,
|
||||
lampRadius: 8,
|
||||
logicModeLineWidth: 2,
|
||||
logicModeDistance: 5,
|
||||
lampLineWidth: 1,
|
||||
};
|
||||
export class Signal extends JlGraphic {
|
||||
static Type = 'signal';
|
||||
signalCode: SignalCode = new SignalCode();
|
||||
humanControl: Graphics = new Graphics();
|
||||
fleetMode: Graphics = new Graphics();
|
||||
lampMainBody: LampMainBody = new LampMainBody();
|
||||
blockedMode: Graphics = new Graphics();
|
||||
|
||||
constructor() {
|
||||
super(Signal.Type);
|
||||
this.addChild(this.humanControl);
|
||||
this.addChild(this.fleetMode);
|
||||
this.addChild(this.lampMainBody);
|
||||
this.addChild(this.signalCode);
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
|
||||
get datas(): ISignalData {
|
||||
return this.getDatas<ISignalData>();
|
||||
}
|
||||
|
||||
get states(): ISignalState {
|
||||
return this.getStates<ISignalState>();
|
||||
}
|
||||
get mirror(): boolean {
|
||||
return this.datas.mirror;
|
||||
}
|
||||
set mirror(v: boolean) {
|
||||
const old = this.datas.clone();
|
||||
old.mirror = v;
|
||||
this.updateData(old);
|
||||
}
|
||||
|
||||
paint(): void {
|
||||
const mirror = this.datas.mirror;
|
||||
this.lampMainBody.paint(this.datas.mt, mirror, this.states);
|
||||
this.signalCode.paint(this.datas);
|
||||
const codeTransform = this.datas?.childTransforms?.find(
|
||||
(item) => item.name === 'signalCode'
|
||||
);
|
||||
if (codeTransform) {
|
||||
const position = codeTransform?.transform.position;
|
||||
const rotation = codeTransform?.transform?.rotation;
|
||||
this.signalCode.position.set(position?.x, position?.y);
|
||||
this.signalCode.rotation = rotation || 0;
|
||||
} else {
|
||||
this.signalCode.position.set(0, signalConsts.codeOffset);
|
||||
}
|
||||
}
|
||||
|
||||
doRepaint(): void {
|
||||
this.paint();
|
||||
this.fleetMode.clear();
|
||||
// if (this.states.fleetMode) {
|
||||
// this.createFleetMode();
|
||||
// }
|
||||
// this.humanControl.clear();
|
||||
// if (this.states.autoRouteDisable) {
|
||||
// this.createHumanControl();
|
||||
// }
|
||||
}
|
||||
createFleetMode(): void {
|
||||
const mirror = this.datas.mirror;
|
||||
this.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
|
||||
let lmp = new Point(
|
||||
this.lampMainBody.width + signalConsts.fleetModeLength,
|
||||
0
|
||||
);
|
||||
if (mirror) {
|
||||
lmp = calculateMirrorPoint(new Point(0, 0), lmp);
|
||||
}
|
||||
drawArrow(
|
||||
this.fleetMode,
|
||||
lmp.x,
|
||||
0,
|
||||
signalConsts.fleetModeLength,
|
||||
signalConsts.fleetModeRadius,
|
||||
signalConsts.fleetModeLineWidth,
|
||||
mirror
|
||||
);
|
||||
this.fleetMode.endFill();
|
||||
}
|
||||
createHumanControl(): void {
|
||||
const mirror = this.datas.mirror;
|
||||
this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
|
||||
if (this.humanControl.drawRegularPolygon) {
|
||||
let hmp = new Point(-signalConsts.humanControlRadius, 0);
|
||||
if (mirror) {
|
||||
hmp = calculateMirrorPoint(new Point(0, 0), hmp);
|
||||
}
|
||||
this.humanControl.drawRegularPolygon(
|
||||
hmp.x,
|
||||
hmp.y,
|
||||
signalConsts.humanControlRadius,
|
||||
3,
|
||||
(Math.PI / 2) * (mirror ? -1 : 1)
|
||||
);
|
||||
}
|
||||
this.humanControl.endFill();
|
||||
}
|
||||
|
||||
buildRelation() {
|
||||
const sections = this.queryStore
|
||||
.queryByType<Section>(Section.Type)
|
||||
.filter((s) => s.datas.sectionType === SectionType.Physical);
|
||||
const turnouts = this.queryStore.queryByType<Turnout>(Turnout.Type);
|
||||
let deviceId = 0;
|
||||
let deviceType = '';
|
||||
let minD = Number.MAX_SAFE_INTEGER;
|
||||
let port: DevicePort = DevicePort.A;
|
||||
sections.forEach((sec: Section) => {
|
||||
const verticesList = sec.getVerticesList();
|
||||
for (let i = 0; i < verticesList.length - 1; i++) {
|
||||
const d = calculateDistanceFromPointToLine(
|
||||
sec.localToCanvasPoint(verticesList[i]),
|
||||
sec.localToCanvasPoint(verticesList[i + 1]),
|
||||
this.position
|
||||
);
|
||||
const p = calculateFootPointFromPointToLine(
|
||||
sec.localToCanvasPoint(verticesList[i]),
|
||||
sec.localToCanvasPoint(verticesList[i + 1]),
|
||||
this.position
|
||||
);
|
||||
const onLine = isPointOnLine(
|
||||
sec.localToCanvasPoint(verticesList[i]),
|
||||
sec.localToCanvasPoint(verticesList[i + 1]),
|
||||
p
|
||||
);
|
||||
if (onLine && d < minD) {
|
||||
minD = d;
|
||||
deviceId = sec.id;
|
||||
deviceType = sec.type;
|
||||
port = DevicePort.A;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
turnouts.forEach((turnout: Turnout) => {
|
||||
for (let i = 0; i < turnout.datas.pointA.length; i++) {
|
||||
const p1 = turnout.localToCanvasPoint(
|
||||
i === 0 ? new Point(0, 0) : turnout.datas.pointA[i - 1]
|
||||
);
|
||||
const p2 = turnout.localToCanvasPoint(turnout.datas.pointA[i]);
|
||||
const d = calculateDistanceFromPointToLine(p1, p2, this.position);
|
||||
const p = calculateFootPointFromPointToLine(p1, p2, this.position);
|
||||
const onLine = isPointOnLine(p1, p2, p);
|
||||
if (onLine && d < minD) {
|
||||
minD = d;
|
||||
deviceId = turnout.id;
|
||||
deviceType = turnout.type;
|
||||
port = DevicePort.A;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < turnout.datas.pointB.length; i++) {
|
||||
const p1 = turnout.localToCanvasPoint(
|
||||
i === 0 ? new Point(0, 0) : turnout.datas.pointB[i - 1]
|
||||
);
|
||||
const p2 = turnout.localToCanvasPoint(turnout.datas.pointB[i]);
|
||||
const d = calculateDistanceFromPointToLine(p1, p2, this.position);
|
||||
const p = calculateFootPointFromPointToLine(p1, p2, this.position);
|
||||
const onLine = isPointOnLine(p1, p2, p);
|
||||
if (onLine && d < minD) {
|
||||
minD = d;
|
||||
deviceId = turnout.id;
|
||||
deviceType = turnout.type;
|
||||
port = DevicePort.B;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < turnout.datas.pointC.length; i++) {
|
||||
const p1 = turnout.localToCanvasPoint(
|
||||
i === 0 ? new Point(0, 0) : turnout.datas.pointC[i - 1]
|
||||
);
|
||||
const p2 = turnout.localToCanvasPoint(turnout.datas.pointC[i]);
|
||||
const d = calculateDistanceFromPointToLine(p1, p2, this.position);
|
||||
const p = calculateFootPointFromPointToLine(p1, p2, this.position);
|
||||
const onLine = isPointOnLine(p1, p2, p);
|
||||
if (onLine && d < minD) {
|
||||
minD = d;
|
||||
deviceId = turnout.id;
|
||||
deviceType = turnout.type;
|
||||
port = DevicePort.C;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (deviceId) {
|
||||
this.datas.refDev = createRelatedRefProto(deviceType, deviceId, port);
|
||||
}
|
||||
}
|
||||
loadRelations() {
|
||||
if (this.datas.refDev) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, ''),
|
||||
new GraphicRelationParam(
|
||||
this.queryStore.queryById(this.datas.refDev.id),
|
||||
this.datas.refDev.devicePort
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class SignalTemplate extends JlGraphicTemplate<Signal> {
|
||||
constructor(dataTemplate: ISignalData, stateTemplate: ISignalState) {
|
||||
super(Signal.Type, { dataTemplate, stateTemplate });
|
||||
}
|
||||
new(): Signal {
|
||||
const g = new Signal();
|
||||
g.loadData(this.datas);
|
||||
g.loadState(this.states);
|
||||
return g;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { Container, Graphics, Point } from 'pixi.js';
|
||||
import { VectorText } from 'jl-graphic';
|
||||
import {
|
||||
ISignalData,
|
||||
SignalColorEnum,
|
||||
signalConsts,
|
||||
} from './Signal';
|
||||
|
||||
export class SignalCode extends Container {
|
||||
blockedMode: Graphics = new Graphics();
|
||||
codeGraph: VectorText = new VectorText('');
|
||||
name = 'signalCode';
|
||||
constructor() {
|
||||
super();
|
||||
this.addChild(this.blockedMode);
|
||||
this.addChild(this.codeGraph);
|
||||
}
|
||||
paint(datas: ISignalData) {
|
||||
this.codeGraph.text = datas?.code || '信号机编号';
|
||||
this.codeGraph.style.fill = SignalColorEnum.defaultCodeColor;
|
||||
this.codeGraph.setVectorFontSize(signalConsts.codeFontSize);
|
||||
this.codeGraph.anchor.set(0.5);
|
||||
this.codeGraph.position.set(0, 0);
|
||||
this.blockedMode.clear();
|
||||
// if (states.blocked) {
|
||||
// this.createBlockedMode();
|
||||
// }
|
||||
}
|
||||
createBlockedMode() {
|
||||
const codeRect = this.codeGraph.getBounds();
|
||||
const rectP = this.screenToLocalPoint(new Point(codeRect.x, codeRect.y));
|
||||
this.blockedMode.clear();
|
||||
this.blockedMode.lineStyle(
|
||||
signalConsts.blockedLineWidth,
|
||||
SignalColorEnum.blockedColor
|
||||
);
|
||||
this.blockedMode.drawRect(
|
||||
rectP.x,
|
||||
rectP.y,
|
||||
codeRect.width,
|
||||
codeRect.height
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
import { DisplayObject, FederatedPointerEvent, IHitArea, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
GraphicTransformEvent,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import { ISignalData, Signal, SignalTemplate } from './Signal';
|
||||
|
||||
export interface ISignalDrawOptions {
|
||||
newData: () => ISignalData;
|
||||
}
|
||||
|
||||
export class SignalDraw extends GraphicDrawAssistant<
|
||||
SignalTemplate,
|
||||
ISignalData
|
||||
> {
|
||||
_signal: Signal | null = null;
|
||||
|
||||
constructor(app: IDrawApp, template: SignalTemplate) {
|
||||
super(
|
||||
app,
|
||||
template,
|
||||
'svguse: ../../drawIcon.svg#icon-signal',
|
||||
'信号机Signal'
|
||||
);
|
||||
|
||||
SignalInteraction.init(app);
|
||||
}
|
||||
|
||||
public get signal(): Signal {
|
||||
if (!this._signal) {
|
||||
this._signal = this.graphicTemplate.new();
|
||||
this._signal.loadData(this.graphicTemplate.datas);
|
||||
this.container.addChild(this._signal);
|
||||
}
|
||||
return this._signal;
|
||||
}
|
||||
|
||||
onLeftUp(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.signal.paint();
|
||||
this.container.position.set(p.x, p.y);
|
||||
}
|
||||
prepareData(data: ISignalData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export class SignalGraphicHitArea implements IHitArea {
|
||||
signal: Signal;
|
||||
constructor(signal: Signal) {
|
||||
this.signal = signal;
|
||||
}
|
||||
contains(x: number, y: number): boolean {
|
||||
const bound = this.signal.getLocalBounds();
|
||||
const maxX = bound.x + bound.width;
|
||||
const minX = bound.x;
|
||||
const maxY = bound.y + bound.height;
|
||||
const minY = bound.y;
|
||||
return maxX >= x && x >= minX && maxY >= y && y >= minY;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建吸附线
|
||||
* @param signal
|
||||
*/
|
||||
function buildAbsorbablePositions(signal: Signal): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const signals = signal.queryStore.queryByType<Signal>(Signal.Type);
|
||||
const canvas = signal.getCanvas();
|
||||
signals.forEach((item) => {
|
||||
if (item.id === signal.id) {
|
||||
return;
|
||||
}
|
||||
const ala = new AbsorbableLine(
|
||||
new Point(item.x, 0),
|
||||
new Point(item.x, canvas.height)
|
||||
);
|
||||
const alb = new AbsorbableLine(
|
||||
new Point(0, item.y),
|
||||
new Point(canvas.width, item.y)
|
||||
);
|
||||
aps.push(ala);
|
||||
aps.push(alb);
|
||||
});
|
||||
|
||||
return aps;
|
||||
}
|
||||
/**
|
||||
* 信号机名称构建吸附线
|
||||
* @param signal
|
||||
*/
|
||||
function buildCodeAbsorbablePositions(signal: Signal): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const signals = signal.queryStore.queryByType<Signal>(Signal.Type);
|
||||
const canvas = signal.getCanvas();
|
||||
signals.forEach((item) => {
|
||||
if (item.id === signal.id) {
|
||||
return;
|
||||
}
|
||||
const codePoint = item.signalCode.getPositionOnCanvas();
|
||||
const ala = new AbsorbableLine(
|
||||
new Point(codePoint.x, 0),
|
||||
new Point(codePoint.x, canvas.height)
|
||||
);
|
||||
const alb = new AbsorbableLine(
|
||||
new Point(0, codePoint.y),
|
||||
new Point(canvas.width, codePoint.y)
|
||||
);
|
||||
aps.push(ala);
|
||||
aps.push(alb);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class SignalInteraction extends GraphicInteractionPlugin<Signal> {
|
||||
static Name = 'signal_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(SignalInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new SignalInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Signal[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Signal.Type)
|
||||
.map((g) => g as Signal);
|
||||
}
|
||||
bind(g: Signal): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.lampMainBody.hitArea = new SignalGraphicHitArea(g);
|
||||
g.on('transformstart', this.transformstart, this);
|
||||
g.signalCode.on('transformstart', this.codetransformstart, this);
|
||||
g.signalCode.draggable = true;
|
||||
g.signalCode.selectable = true;
|
||||
g.signalCode.rotatable = true;
|
||||
g.signalCode.transformSave = true;
|
||||
g.signalCode.eventMode = 'static';
|
||||
}
|
||||
|
||||
unbind(g: Signal): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.off('transformstart', this.transformstart, this);
|
||||
g.signalCode.off('transformstart', this.codetransformstart, this);
|
||||
g.signalCode.draggable = false;
|
||||
g.signalCode.selectable = false;
|
||||
g.signalCode.rotatable = false;
|
||||
g.signalCode.transformSave = false;
|
||||
g.signalCode.eventMode = 'none';
|
||||
}
|
||||
transformstart(e: GraphicTransformEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const signal = target.getGraphic() as Signal;
|
||||
signal.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(signal),
|
||||
});
|
||||
}
|
||||
codetransformstart(e: GraphicTransformEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const signal = target.getGraphic() as Signal;
|
||||
signal.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildCodeAbsorbablePositions(signal),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import {
|
||||
GraphicData,
|
||||
GraphicState,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'jl-graphic';
|
||||
import { KilometerSystem } from '../signal/Signal';
|
||||
import { Platform } from '../platform/Platform';
|
||||
|
||||
export interface IStationData extends GraphicData {
|
||||
get code(): string; // 车站站名
|
||||
set code(v: string);
|
||||
get stationName(): string; // 车站名
|
||||
set stationName(v: string);
|
||||
get stationNameAcronym(): string; // 车站名拼音简写
|
||||
set stationNameAcronym(v: string);
|
||||
get kilometerSystem(): KilometerSystem;
|
||||
set kilometerSystem(v: KilometerSystem);
|
||||
get concentrationStations(): boolean; //是否集中站
|
||||
set concentrationStations(v: boolean);
|
||||
get depots(): boolean; //是否车辆段
|
||||
set depots(v: boolean);
|
||||
get manageStations(): number[]; //集中站管理的车站
|
||||
set manageStations(v: number[]);
|
||||
clone(): IStationData;
|
||||
copyFrom(data: IStationData): void;
|
||||
eq(other: IStationData): boolean;
|
||||
}
|
||||
|
||||
export interface IStationState extends GraphicState {
|
||||
id: number;
|
||||
}
|
||||
|
||||
const stationConsts = {
|
||||
codeColor: '0xF48815',
|
||||
codeFontSize: 22,
|
||||
kilometerCodeColor: '0xFFFFFF',
|
||||
kilometerCodeFontSize: 8,
|
||||
kilometerCodeOffsetY: -25,
|
||||
};
|
||||
export class Station extends JlGraphic {
|
||||
static Type = 'station';
|
||||
codeGraph: VectorText = new VectorText(''); //车站站名
|
||||
kilometerGraph: VectorText = new VectorText(''); //公里标
|
||||
constructor() {
|
||||
super(Station.Type);
|
||||
this.addChild(this.codeGraph);
|
||||
this.addChild(this.kilometerGraph);
|
||||
}
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
get datas(): IStationData {
|
||||
return this.getDatas<IStationData>();
|
||||
}
|
||||
get states(): IStationState {
|
||||
return this.getStates<IStationState>();
|
||||
}
|
||||
|
||||
doRepaint(): void {
|
||||
const codeGraph = this.codeGraph;
|
||||
const kilometerGraph = this.kilometerGraph;
|
||||
codeGraph.text = this.datas?.code || '车站Station';
|
||||
codeGraph.style.fill = stationConsts.codeColor;
|
||||
codeGraph.setVectorFontSize(stationConsts.codeFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
const kilometerCode = this.datas.kilometerSystem?.kilometer || 12345678;
|
||||
if (Math.floor(kilometerCode * 1000).toString().length > 3) {
|
||||
const kiloBit = Math.floor(Number(kilometerCode) / 1000000).toString();
|
||||
kilometerGraph.text =
|
||||
'K' +
|
||||
kiloBit +
|
||||
'+' +
|
||||
(
|
||||
Number(kilometerCode.toString().substring(kiloBit.length)) / 1000
|
||||
).toFixed(3);
|
||||
} else {
|
||||
kilometerGraph.text = (kilometerCode * 1000).toFixed(3);
|
||||
}
|
||||
kilometerGraph.style.fill = stationConsts.kilometerCodeColor;
|
||||
kilometerGraph.setVectorFontSize(stationConsts.kilometerCodeFontSize);
|
||||
kilometerGraph.anchor.set(0.5);
|
||||
kilometerGraph.position.set(0, stationConsts.kilometerCodeOffsetY);
|
||||
}
|
||||
|
||||
getPlatforms(): Platform[] {
|
||||
const relations = this.relationManage.getRelationsOfGraphicAndOtherType(
|
||||
this,
|
||||
Platform.Type
|
||||
);
|
||||
return relations.map((r) => r.getOtherGraphic(this));
|
||||
}
|
||||
}
|
||||
|
||||
export class StationTemplate extends JlGraphicTemplate<Station> {
|
||||
hasControl: boolean;
|
||||
constructor(dataTemplate: IStationData, stateTemplate: IStationState) {
|
||||
super(Station.Type, {
|
||||
dataTemplate,
|
||||
stateTemplate,
|
||||
});
|
||||
this.hasControl = true;
|
||||
}
|
||||
new(): Station {
|
||||
const station = new Station();
|
||||
station.loadData(this.datas);
|
||||
station.loadState(this.states);
|
||||
return station;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import { FederatedPointerEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
|
||||
import { IStationData, Station, StationTemplate } from './Station';
|
||||
|
||||
export interface IStationDrawOptions {
|
||||
newData: () => IStationData;
|
||||
}
|
||||
|
||||
export class StationDraw extends GraphicDrawAssistant<
|
||||
StationTemplate,
|
||||
IStationData
|
||||
> {
|
||||
codeGraph: Station;
|
||||
constructor(app: IDrawApp, template: StationTemplate) {
|
||||
super(
|
||||
app,
|
||||
template,
|
||||
'svguse:../../drawIcon.svg#icon-station',
|
||||
'车站Station'
|
||||
);
|
||||
this.codeGraph = this.graphicTemplate.new();
|
||||
this.container.addChild(this.codeGraph);
|
||||
stationInteraction.init(app);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.codeGraph.loadData(this.graphicTemplate.datas);
|
||||
this.codeGraph.doRepaint();
|
||||
}
|
||||
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
|
||||
prepareData(data: IStationData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function buildAbsorbablePositions(station: Station): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const stations = station.queryStore.queryByType<Station>(Station.Type);
|
||||
const { width } = station.getGraphicApp().canvas;
|
||||
stations.forEach((other) => {
|
||||
if (other.id == station.id) {
|
||||
return;
|
||||
}
|
||||
const ps = other.datas.transform.position;
|
||||
const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
|
||||
aps.push(xs);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class stationInteraction extends GraphicInteractionPlugin<Station> {
|
||||
static Name = 'station_transform';
|
||||
constructor(app: IDrawApp) {
|
||||
super(stationInteraction.Name, app);
|
||||
}
|
||||
static init(app: IDrawApp) {
|
||||
return new stationInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Station[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === Station.Type)
|
||||
.map((g) => g as Station);
|
||||
}
|
||||
bind(g: Station): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
}
|
||||
unbind(g: Station): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.off('selected', this.onSelected, this);
|
||||
}
|
||||
onSelected(): void {
|
||||
const station = this.app.selectedGraphics[0] as Station;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(station),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import { Color, FederatedPointerEvent, Graphics, Point } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicDrawAssistant,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
} from 'jl-graphic';
|
||||
import { AxleCounting } from '../axleCounting/AxleCounting';
|
||||
import { AxleCountingDraw } from '../axleCounting/AxleCountingDrawAssistant';
|
||||
import { useDrawStore } from 'src/stores/electronicMap-draw-store';
|
||||
|
||||
interface IOneClickData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
}
|
||||
|
||||
export class OneClickGenerate extends JlGraphic {
|
||||
static Type = 'OneClickGenerate';
|
||||
lineGraphic: Graphics = new Graphics();
|
||||
constructor() {
|
||||
super(OneClickGenerate.Type);
|
||||
this.addChild(this.lineGraphic);
|
||||
}
|
||||
|
||||
doRepaint(): void {
|
||||
this.lineGraphic.clear();
|
||||
this.lineGraphic.lineStyle(1, new Color('0xff0000'));
|
||||
this.lineGraphic.moveTo(-1920, 0);
|
||||
this.lineGraphic.lineTo(1920, 0);
|
||||
}
|
||||
}
|
||||
|
||||
export class OneClickGenerateTemplate extends JlGraphicTemplate<OneClickGenerate> {
|
||||
constructor() {
|
||||
super(OneClickGenerate.Type, {});
|
||||
}
|
||||
new(): OneClickGenerate {
|
||||
return new OneClickGenerate();
|
||||
}
|
||||
}
|
||||
|
||||
export class OneClickGenerateDraw extends GraphicDrawAssistant<
|
||||
OneClickGenerateTemplate,
|
||||
IOneClickData
|
||||
> {
|
||||
lineGraph: OneClickGenerate;
|
||||
constructor(app: IDrawApp, template: OneClickGenerateTemplate) {
|
||||
super(app, template, 'sym_o_square', '不展示');
|
||||
this.lineGraph = this.graphicTemplate.new();
|
||||
this.container.addChild(this.lineGraph);
|
||||
}
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.lineGraph.doRepaint();
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
const type = useDrawStore().oneClickType;
|
||||
if (type == 'AxleCounting') {
|
||||
const axleCountingDraw = this.app.getDrawAssistant(
|
||||
AxleCounting.Type
|
||||
) as AxleCountingDraw;
|
||||
axleCountingDraw.oneGenerates(this.toCanvasCoordinates(e.global));
|
||||
}
|
||||
this.finish();
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
prepareData(): boolean {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,463 @@
|
|||
import { Graphics, IPointData } from 'pixi.js';
|
||||
import {
|
||||
GraphicAnimation,
|
||||
GraphicData,
|
||||
GraphicRelationParam,
|
||||
GraphicState,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
angleOfIncludedAngle,
|
||||
distance2,
|
||||
} from 'jl-graphic';
|
||||
import { Section, DevicePort, SectionType } from '../section/Section';
|
||||
import {
|
||||
IRelatedRefData,
|
||||
createRelatedRefProto,
|
||||
protoPort2Data,
|
||||
} from '../CommonGraphics';
|
||||
import { KilometerSystem } from '../signal/Signal';
|
||||
import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
|
||||
const tolerance = 0.01;
|
||||
|
||||
export interface ITurnoutData extends GraphicData {
|
||||
get code(): string;
|
||||
set code(code: string);
|
||||
get pointA(): IPointData[]; //A端点列表(从岔心向外)
|
||||
set pointA(point: IPointData[]);
|
||||
get pointB(): IPointData[];
|
||||
set pointB(point: IPointData[]);
|
||||
get pointC(): IPointData[];
|
||||
set pointC(point: IPointData[]);
|
||||
get paRef(): IRelatedRefData | undefined;
|
||||
set paRef(ref: IRelatedRefData | undefined);
|
||||
get pbRef(): IRelatedRefData | undefined;
|
||||
set pbRef(ref: IRelatedRefData | undefined);
|
||||
get pcRef(): IRelatedRefData | undefined;
|
||||
set pcRef(ref: IRelatedRefData | undefined);
|
||||
get kilometerSystem(): KilometerSystem;
|
||||
set kilometerSystem(v: KilometerSystem);
|
||||
get paTrackSectionId(): number;
|
||||
set paTrackSectionId(v: number);
|
||||
get pbTrackSectionId(): number;
|
||||
set pbTrackSectionId(v: number);
|
||||
get pcTrackSectionId(): number;
|
||||
set pcTrackSectionId(v: number);
|
||||
get switchMachineType(): electronicMapGraphicData.Turnout.SwitchMachineType;
|
||||
set switchMachineType(v: electronicMapGraphicData.Turnout.SwitchMachineType);
|
||||
get centralizedStations(): number[];
|
||||
set centralizedStations(v: number[]);
|
||||
clone(): ITurnoutData;
|
||||
copyFrom(data: ITurnoutData): void;
|
||||
eq(other: ITurnoutData): boolean;
|
||||
}
|
||||
|
||||
export interface ITurnoutState extends GraphicState {
|
||||
id?: number;
|
||||
normal?: boolean;
|
||||
reverse?: boolean;
|
||||
dw?: boolean;
|
||||
fw?: boolean;
|
||||
qdc?: boolean;
|
||||
qfc?: boolean;
|
||||
qyc?: boolean;
|
||||
dc?: boolean;
|
||||
fc?: boolean;
|
||||
yc?: boolean;
|
||||
occupied?: boolean;
|
||||
}
|
||||
|
||||
export const TurnoutConsts = {
|
||||
lineColor: '#5578b6',
|
||||
occupiedColor: '#f00',
|
||||
lineWidth: 5,
|
||||
forkLenth: 20,
|
||||
labelFontSize: 12,
|
||||
normalLabelColor: '#0f0',
|
||||
reverseLabelColor: '#ff0',
|
||||
};
|
||||
|
||||
export enum TurnoutPosition {
|
||||
NORMAL = 0,
|
||||
REVERSE = 1,
|
||||
}
|
||||
|
||||
export function getForkPoint(r: number, p: IPointData): IPointData {
|
||||
if (r === 0) return { x: 0, y: 0 };
|
||||
const len = Math.sqrt((-p.x) ** 2 + (-p.y) ** 2);
|
||||
const scale = r / len;
|
||||
return { x: scale * p.x, y: scale * p.y };
|
||||
}
|
||||
|
||||
export class TurnoutSection extends Graphics {
|
||||
turnout: Turnout;
|
||||
port: DevicePort;
|
||||
constructor(turnout: Turnout, port: DevicePort) {
|
||||
super();
|
||||
this.turnout = turnout;
|
||||
this.port = port;
|
||||
}
|
||||
|
||||
paint() {
|
||||
let pList: IPointData[] = [];
|
||||
switch (this.port) {
|
||||
case DevicePort.A:
|
||||
pList = this.turnout.datas.pointA;
|
||||
break;
|
||||
case DevicePort.B:
|
||||
pList = this.turnout.datas.pointB;
|
||||
break;
|
||||
case DevicePort.C:
|
||||
pList = this.turnout.datas.pointC;
|
||||
break;
|
||||
}
|
||||
const gap = this.port === DevicePort.A ? 0 : TurnoutConsts.forkLenth;
|
||||
let color = TurnoutConsts.lineColor;
|
||||
if (this.turnout.states.occupied) {
|
||||
if (
|
||||
this.port === DevicePort.A ||
|
||||
(this.turnout.states.dw && this.port === DevicePort.B) ||
|
||||
(this.turnout.states.fw && this.port === DevicePort.C)
|
||||
) {
|
||||
color = TurnoutConsts.occupiedColor;
|
||||
}
|
||||
}
|
||||
const start = getForkPoint(gap, pList[0]);
|
||||
this.clear()
|
||||
.lineStyle(TurnoutConsts.lineWidth, color)
|
||||
.moveTo(start.x, start.y);
|
||||
pList.forEach((p) => {
|
||||
const { x, y } = p;
|
||||
this.lineTo(x, y);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class ForkGraphic extends Graphics {
|
||||
turnout: Turnout;
|
||||
constructor(turnout: Turnout) {
|
||||
super();
|
||||
this.turnout = turnout;
|
||||
}
|
||||
|
||||
paint(p: IPointData) {
|
||||
const target = getForkPoint(TurnoutConsts.forkLenth, p);
|
||||
const color = this.turnout.states.occupied
|
||||
? TurnoutConsts.occupiedColor
|
||||
: TurnoutConsts.lineColor;
|
||||
this.clear()
|
||||
.lineStyle(TurnoutConsts.lineWidth, color)
|
||||
.moveTo(0, 0)
|
||||
.lineTo(target.x, target.y);
|
||||
}
|
||||
}
|
||||
|
||||
export class Turnout extends JlGraphic {
|
||||
static Type = 'Turnout';
|
||||
graphics: {
|
||||
fork: ForkGraphic;
|
||||
sections: [TurnoutSection, TurnoutSection, TurnoutSection];
|
||||
label: VectorText;
|
||||
};
|
||||
deltaTime: number;
|
||||
|
||||
constructor() {
|
||||
super(Turnout.Type);
|
||||
this.name = 'turnout';
|
||||
this.graphics = {
|
||||
fork: new ForkGraphic(this),
|
||||
sections: [
|
||||
new TurnoutSection(this, DevicePort.A),
|
||||
new TurnoutSection(this, DevicePort.B),
|
||||
new TurnoutSection(this, DevicePort.C),
|
||||
],
|
||||
label: new VectorText(),
|
||||
};
|
||||
this.deltaTime = 0;
|
||||
this.addChild(this.graphics.fork);
|
||||
// this.addChild(...this.graphics.sections);
|
||||
this.addChild(this.graphics.sections[0]);
|
||||
this.addChild(this.graphics.sections[1]);
|
||||
this.addChild(this.graphics.sections[2]);
|
||||
this.graphics.label.anchor.set(0.5);
|
||||
this.graphics.label.style.fill = '#0f0';
|
||||
this.graphics.label.setVectorFontSize(TurnoutConsts.labelFontSize);
|
||||
this.graphics.label.position.set(20, 20);
|
||||
this.graphics.label.transformSave = true;
|
||||
this.graphics.label.name = 'label';
|
||||
this.addChild(this.graphics.label);
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.datas.code;
|
||||
}
|
||||
|
||||
get datas(): ITurnoutData {
|
||||
return this.getDatas<ITurnoutData>();
|
||||
}
|
||||
|
||||
get states(): ITurnoutState {
|
||||
return this.getStates<ITurnoutState>();
|
||||
}
|
||||
getPortPoints() {
|
||||
return [this.datas.pointA, this.datas.pointB, this.datas.pointC];
|
||||
}
|
||||
|
||||
doRepaint(): void {
|
||||
const { pointB, pointC } = this.datas;
|
||||
if (this.states.dw) {
|
||||
this.graphics.fork.paint(pointB[0]);
|
||||
this.graphics.label.style.stroke = TurnoutConsts.normalLabelColor;
|
||||
} else if (this.states.fw) {
|
||||
this.graphics.fork.paint(pointC[0]);
|
||||
this.graphics.label.style.stroke = TurnoutConsts.reverseLabelColor;
|
||||
}
|
||||
this.graphics.label.text = this.datas.code;
|
||||
|
||||
this.graphics.sections.forEach((sectionGraphic) => sectionGraphic.paint());
|
||||
|
||||
if (!this.states.dw && !this.states.fw) {
|
||||
// 失表
|
||||
this.graphics.fork.visible = false;
|
||||
} else {
|
||||
this.graphics.fork.visible = true;
|
||||
}
|
||||
}
|
||||
initTurnoutSplit() {
|
||||
// 道岔失表
|
||||
const name = `${this.datas.id}_turnout_split`;
|
||||
let turnoutSplit = this.animation(name);
|
||||
if (!turnoutSplit) {
|
||||
turnoutSplit = GraphicAnimation.init({
|
||||
name: name,
|
||||
run: (dt: number) => {
|
||||
this.deltaTime += dt;
|
||||
this.deltaTime = this.deltaTime % 60;
|
||||
this.graphics.fork.visible = this.deltaTime > 30;
|
||||
},
|
||||
});
|
||||
this.addAnimation(turnoutSplit);
|
||||
}
|
||||
turnoutSplit.resume();
|
||||
}
|
||||
stopTurnoutSplit() {
|
||||
const name = `${this.datas.id}_turnout_split`;
|
||||
const turnoutSplit = this.animation(name);
|
||||
if (turnoutSplit) {
|
||||
turnoutSplit.pause();
|
||||
this.deltaTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
getConnectElement(port: DevicePort) {
|
||||
const relation = this.relationManage
|
||||
.getRelationsOfGraphic(this)
|
||||
.find(
|
||||
(relation) =>
|
||||
relation.getRelationParam(this).getParam<DevicePort>() === port &&
|
||||
(relation.getOtherGraphic(this) instanceof Section ||
|
||||
relation.getOtherGraphic(this) instanceof Turnout)
|
||||
);
|
||||
if (!relation) {
|
||||
return;
|
||||
}
|
||||
return {
|
||||
g: relation?.getOtherGraphic(this) as Section | Turnout,
|
||||
port: relation?.getOtherRelationParam(this).getParam<DevicePort>(),
|
||||
};
|
||||
}
|
||||
|
||||
buildRelation(): void {
|
||||
this.relationManage.deleteRelationOfGraphic(this);
|
||||
|
||||
/** 道岔和区段 */
|
||||
this.queryStore.queryByType<Section>(Section.Type).forEach((section) => {
|
||||
if (section.datas.sectionType !== SectionType.Physical) return;
|
||||
this.getPortPoints().forEach((port, i) => {
|
||||
if (
|
||||
distance2(
|
||||
section.localToCanvasPoint(section.getStartPoint()),
|
||||
this.localToCanvasPoint(port[port.length - 1])
|
||||
) <= tolerance
|
||||
) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(
|
||||
this,
|
||||
[DevicePort.A, DevicePort.B, DevicePort.C][i]
|
||||
),
|
||||
new GraphicRelationParam(section, DevicePort.A)
|
||||
);
|
||||
}
|
||||
if (
|
||||
distance2(
|
||||
section.localToCanvasPoint(section.getEndPoint()),
|
||||
this.localToCanvasPoint(port[port.length - 1])
|
||||
) <= tolerance
|
||||
) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(
|
||||
this,
|
||||
[DevicePort.A, DevicePort.B, DevicePort.C][i]
|
||||
),
|
||||
new GraphicRelationParam(section, DevicePort.B)
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/** 道岔和道岔 */
|
||||
this.getPortPoints().forEach((thisPort, i) => {
|
||||
let params: GraphicRelationParam[] = [],
|
||||
deflection = 180;
|
||||
this.queryStore.queryByType<Turnout>(Turnout.Type).forEach((turnout) => {
|
||||
if (turnout.id === this.id) return;
|
||||
turnout.getPortPoints().forEach((otherPort, j) => {
|
||||
if (
|
||||
distance2(
|
||||
this.localToCanvasPoint(thisPort[thisPort.length - 1]),
|
||||
turnout.localToCanvasPoint(otherPort[otherPort.length - 1])
|
||||
) <= tolerance
|
||||
) {
|
||||
const angle = angleOfIncludedAngle(
|
||||
this.localToCanvasPoint(thisPort[thisPort.length - 1]) /* 交点 */,
|
||||
thisPort[thisPort.length - 2]
|
||||
? this.localToCanvasPoint(thisPort[thisPort.length - 2])
|
||||
: this.position,
|
||||
otherPort[otherPort.length - 2]
|
||||
? turnout.localToCanvasPoint(otherPort[otherPort.length - 2])
|
||||
: turnout.position
|
||||
);
|
||||
if (180 - Math.abs(angle) <= deflection) {
|
||||
deflection = 180 - Math.abs(angle);
|
||||
params = [
|
||||
new GraphicRelationParam(
|
||||
this,
|
||||
[DevicePort.A, DevicePort.B, DevicePort.C][i]
|
||||
),
|
||||
new GraphicRelationParam(
|
||||
turnout,
|
||||
[DevicePort.A, DevicePort.B, DevicePort.C][j]
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (params.length === 2) {
|
||||
this.relationManage.addRelation(params[0], params[1]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
saveRelations() {
|
||||
const paRelation = this.relationManage
|
||||
.getRelationsOfGraphic(this)
|
||||
.find(
|
||||
(relation) =>
|
||||
relation.getRelationParam(this).param === DevicePort.A &&
|
||||
(relation.getOtherGraphic(this) instanceof Section ||
|
||||
relation.getOtherGraphic(this) instanceof Turnout)
|
||||
);
|
||||
const paDevice = paRelation?.getOtherGraphic<Section | Turnout>(this);
|
||||
if (paDevice) {
|
||||
this.datas.paRef = createRelatedRefProto(
|
||||
paDevice.type,
|
||||
paDevice.id,
|
||||
paRelation?.getOtherRelationParam(this).param
|
||||
);
|
||||
} else {
|
||||
this.datas.paRef = undefined;
|
||||
}
|
||||
const pbRelation = this.relationManage
|
||||
.getRelationsOfGraphic(this)
|
||||
.find(
|
||||
(relation) =>
|
||||
relation.getRelationParam(this).param === DevicePort.B &&
|
||||
(relation.getOtherGraphic(this) instanceof Section ||
|
||||
relation.getOtherGraphic(this) instanceof Turnout)
|
||||
);
|
||||
const pbDevice = pbRelation?.getOtherGraphic<Section | Turnout>(this);
|
||||
if (pbDevice) {
|
||||
this.datas.pbRef = createRelatedRefProto(
|
||||
pbDevice.type,
|
||||
pbDevice.id,
|
||||
pbRelation?.getOtherRelationParam(this).param
|
||||
);
|
||||
} else {
|
||||
this.datas.pbRef = undefined;
|
||||
}
|
||||
const pcRelation = this.relationManage
|
||||
.getRelationsOfGraphic(this)
|
||||
.find(
|
||||
(relation) => relation.getRelationParam(this).param === DevicePort.C
|
||||
);
|
||||
const pcDevice = pcRelation?.getOtherGraphic<Section | Turnout>(this);
|
||||
if (pcDevice) {
|
||||
this.datas.pcRef = createRelatedRefProto(
|
||||
pcDevice.type,
|
||||
pcDevice.id,
|
||||
pcRelation?.getOtherRelationParam(this).param
|
||||
);
|
||||
} else {
|
||||
this.datas.pcRef = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
loadRelations() {
|
||||
if (this.datas.paRef?.id) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, DevicePort.A),
|
||||
new GraphicRelationParam(
|
||||
this.queryStore.queryById(this.datas.paRef.id),
|
||||
protoPort2Data(this.datas.paRef.devicePort)
|
||||
)
|
||||
);
|
||||
}
|
||||
if (this.datas.pbRef?.id) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, DevicePort.B),
|
||||
new GraphicRelationParam(
|
||||
this.queryStore.queryById(this.datas.pbRef.id),
|
||||
protoPort2Data(this.datas.pbRef.devicePort)
|
||||
)
|
||||
);
|
||||
}
|
||||
if (this.datas.pcRef?.id) {
|
||||
this.relationManage.addRelation(
|
||||
new GraphicRelationParam(this, DevicePort.C),
|
||||
new GraphicRelationParam(
|
||||
this.queryStore.queryById(this.datas.pcRef.id),
|
||||
protoPort2Data(this.datas.pcRef.devicePort)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
getGraphicOfPort(port: DevicePort) {
|
||||
return this.relationManage
|
||||
.getRelationsOfGraphic(this)
|
||||
.filter(
|
||||
(relation) =>
|
||||
relation.getRelationParam(this).getParam<DevicePort>() === port
|
||||
)
|
||||
.map((relation) => {
|
||||
return relation.getOtherGraphic(this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class TurnoutTemplate extends JlGraphicTemplate<Turnout> {
|
||||
constructor(dataTemplate: ITurnoutData, stateTemplate?: ITurnoutState) {
|
||||
super(Turnout.Type, {
|
||||
dataTemplate,
|
||||
stateTemplate,
|
||||
});
|
||||
}
|
||||
|
||||
new() {
|
||||
const g = new Turnout();
|
||||
g.loadData(this.datas);
|
||||
g.loadState(this.states);
|
||||
return g;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,567 @@
|
|||
import {
|
||||
AbsorbablePosition,
|
||||
DraggablePoint,
|
||||
IGraphicApp,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
GraphicTransformEvent,
|
||||
IDrawApp,
|
||||
JlGraphic,
|
||||
VectorText,
|
||||
linePoint,
|
||||
polylinePoint,
|
||||
AppConsts,
|
||||
GraphicEditPlugin,
|
||||
getWaypointRangeIndex,
|
||||
ContextMenu,
|
||||
MenuItemOptions,
|
||||
AbsorbablePoint,
|
||||
AbsorbableLine,
|
||||
distance,
|
||||
} from 'jl-graphic';
|
||||
import {
|
||||
ITurnoutData,
|
||||
Turnout,
|
||||
TurnoutConsts,
|
||||
TurnoutSection,
|
||||
TurnoutTemplate,
|
||||
getForkPoint,
|
||||
} from './Turnout';
|
||||
import {
|
||||
DisplayObject,
|
||||
FederatedMouseEvent,
|
||||
IHitArea,
|
||||
IPointData,
|
||||
Point,
|
||||
} from 'pixi.js';
|
||||
import { DevicePort, Section } from '../section/Section';
|
||||
|
||||
export class TurnoutDraw extends GraphicDrawAssistant<
|
||||
TurnoutTemplate,
|
||||
ITurnoutData
|
||||
> {
|
||||
turnout: Turnout;
|
||||
constructor(app: IDrawApp, template: TurnoutTemplate) {
|
||||
super(app, template, 'sym_o_ramp_left', '道岔Turnout');
|
||||
|
||||
this.turnout = this.graphicTemplate.new();
|
||||
this.container.addChild(this.turnout);
|
||||
|
||||
TurnoutPointsInteractionPlugin.init(app);
|
||||
}
|
||||
|
||||
onLeftUp(e: FederatedMouseEvent): void {
|
||||
this.turnout.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
prepareData(data: ITurnoutData): boolean {
|
||||
data.transform = this.turnout.saveTransform();
|
||||
data.code = 'A000000';
|
||||
return true;
|
||||
}
|
||||
|
||||
redraw(cp: Point): void {
|
||||
this.turnout.position.copyFrom(cp);
|
||||
}
|
||||
}
|
||||
|
||||
export class ForkHitArea implements IHitArea {
|
||||
turnout: Turnout;
|
||||
constructor(turnout: Turnout) {
|
||||
this.turnout = turnout;
|
||||
}
|
||||
contains(x: number, y: number): boolean {
|
||||
const intersectPointB = getForkPoint(
|
||||
TurnoutConsts.forkLenth,
|
||||
this.turnout.datas.pointB[0]
|
||||
);
|
||||
const intersectPointC = getForkPoint(
|
||||
TurnoutConsts.forkLenth,
|
||||
this.turnout.datas.pointC[0]
|
||||
);
|
||||
|
||||
return (
|
||||
linePoint(
|
||||
intersectPointB,
|
||||
{ x: 0, y: 0 },
|
||||
{ x, y },
|
||||
TurnoutConsts.lineWidth
|
||||
) ||
|
||||
linePoint(
|
||||
intersectPointC,
|
||||
{ x: 0, y: 0 },
|
||||
{ x, y },
|
||||
TurnoutConsts.lineWidth
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class TurnoutSectionHitArea implements IHitArea {
|
||||
section: TurnoutSection;
|
||||
constructor(section: TurnoutSection) {
|
||||
this.section = section;
|
||||
}
|
||||
contains(x: number, y: number): boolean {
|
||||
let points: IPointData[];
|
||||
let start: IPointData;
|
||||
switch (this.section.port) {
|
||||
case DevicePort.A:
|
||||
points = this.section.turnout.datas.pointA;
|
||||
start = { x: 0, y: 0 };
|
||||
break;
|
||||
case DevicePort.B:
|
||||
points = this.section.turnout.datas.pointB;
|
||||
start = getForkPoint(TurnoutConsts.forkLenth, points[0]);
|
||||
break;
|
||||
case DevicePort.C:
|
||||
points = this.section.turnout.datas.pointC;
|
||||
start = getForkPoint(TurnoutConsts.forkLenth, points[0]);
|
||||
break;
|
||||
}
|
||||
return polylinePoint([start, ...points], { x, y }, TurnoutConsts.lineWidth);
|
||||
}
|
||||
}
|
||||
|
||||
function buildAbsorbablePositions(turnout: Turnout): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
|
||||
const sections = turnout.queryStore.queryByType<Section>(Section.Type);
|
||||
sections.forEach((section) => {
|
||||
const ps = new AbsorbablePoint(
|
||||
section.localToCanvasPoint(section.getStartPoint())
|
||||
);
|
||||
const pe = new AbsorbablePoint(
|
||||
section.localToCanvasPoint(section.getEndPoint())
|
||||
);
|
||||
aps.push(ps, pe); //区段端点
|
||||
});
|
||||
|
||||
const turnouts = turnout.queryStore.queryByType<Turnout>(Turnout.Type);
|
||||
turnouts.forEach((otherTurnout) => {
|
||||
const {
|
||||
pointA: [A],
|
||||
pointB: [B],
|
||||
pointC: [C],
|
||||
} = otherTurnout.datas;
|
||||
|
||||
[A, B, C].forEach((p) => {
|
||||
aps.push(
|
||||
new AbsorbablePoint(otherTurnout.localToCanvasPoint(p)), //道岔端点
|
||||
new AbsorbableLine(
|
||||
otherTurnout.localToCanvasPoint({ x: -5 * p.x, y: -5 * p.y }),
|
||||
otherTurnout.localToCanvasPoint({ x: 5 * p.x, y: 5 * p.y })
|
||||
) //道岔延长线
|
||||
);
|
||||
});
|
||||
aps.push(
|
||||
new AbsorbableLine(
|
||||
otherTurnout.localToCanvasPoint({ x: 0, y: -500 }),
|
||||
otherTurnout.localToCanvasPoint({ x: 0, y: 500 })
|
||||
), //岔心垂直线
|
||||
new AbsorbableLine(
|
||||
otherTurnout.localToCanvasPoint({ x: -500, y: 0 }),
|
||||
otherTurnout.localToCanvasPoint({ x: 500, y: 0 })
|
||||
), //岔心水平线
|
||||
new AbsorbableLine(
|
||||
otherTurnout.localToCanvasPoint({ x: -500, y: 500 }),
|
||||
otherTurnout.localToCanvasPoint({ x: 500, y: -500 })
|
||||
), //岔心/
|
||||
new AbsorbableLine(
|
||||
otherTurnout.localToCanvasPoint({ x: -500, y: -500 }),
|
||||
otherTurnout.localToCanvasPoint({ x: 500, y: 500 })
|
||||
) //岔心\
|
||||
);
|
||||
});
|
||||
|
||||
return aps;
|
||||
}
|
||||
|
||||
type dragType = Turnout | Section;
|
||||
class DragMoveAbsorbablePoint extends AbsorbablePoint {
|
||||
moveTarget:
|
||||
| {
|
||||
position: IPointData;
|
||||
portPos: IPointData[];
|
||||
}
|
||||
| undefined;
|
||||
constructor(point: IPointData, absorbRange = 15) {
|
||||
super(point, absorbRange);
|
||||
}
|
||||
tryAbsorb(...dragTargets: dragType[]): void {
|
||||
const dragTarget = dragTargets[0];
|
||||
if (dragTarget instanceof Turnout) {
|
||||
if (this.moveTarget == undefined) {
|
||||
const {
|
||||
pointA: [A],
|
||||
pointB: [B],
|
||||
pointC: [C],
|
||||
} = dragTarget.datas;
|
||||
this.moveTarget = {
|
||||
position: dragTarget
|
||||
.getGraphicApp()
|
||||
.toCanvasCoordinates(dragTarget.getGlobalPosition()),
|
||||
portPos: [
|
||||
dragTarget.localToCanvasPoint(A),
|
||||
dragTarget.localToCanvasPoint(B),
|
||||
dragTarget.localToCanvasPoint(C),
|
||||
],
|
||||
};
|
||||
}
|
||||
const {
|
||||
pointA: [A],
|
||||
pointB: [B],
|
||||
pointC: [C],
|
||||
} = dragTarget.datas;
|
||||
[A, B, C].forEach((p, i) => {
|
||||
const changePos = dragTarget.localToCanvasPoint(p);
|
||||
if (
|
||||
distance(this._point.x, this._point.y, changePos.x, changePos.y) <
|
||||
this.absorbRange &&
|
||||
this.moveTarget
|
||||
) {
|
||||
dragTarget.updatePositionByCanvasPosition(
|
||||
new Point(
|
||||
this.moveTarget.position.x +
|
||||
this._point.x -
|
||||
this.moveTarget.portPos[i].x,
|
||||
this.moveTarget.position.y +
|
||||
this._point.y -
|
||||
this.moveTarget.portPos[i].y
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (this.moveTarget == undefined) {
|
||||
this.moveTarget = {
|
||||
position: dragTarget
|
||||
.getGraphicApp()
|
||||
.toCanvasCoordinates(dragTarget.getGlobalPosition()),
|
||||
portPos: [
|
||||
dragTarget.localToCanvasPoint(dragTarget.getStartPoint()),
|
||||
dragTarget.localToCanvasPoint(dragTarget.getEndPoint()),
|
||||
],
|
||||
};
|
||||
}
|
||||
dragTarget
|
||||
.localToCanvasPoints(...dragTarget.datas.points)
|
||||
.forEach((p, i) => {
|
||||
if (
|
||||
distance(this._point.x, this._point.y, p.x, p.y) <
|
||||
this.absorbRange &&
|
||||
this.moveTarget
|
||||
) {
|
||||
dragTarget.updatePositionByCanvasPosition(
|
||||
new Point(
|
||||
this.moveTarget.position.x +
|
||||
this._point.x -
|
||||
this.moveTarget.portPos[i].x,
|
||||
this.moveTarget.position.y +
|
||||
this._point.y -
|
||||
this.moveTarget.portPos[i].y
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function buildDragMoveAbsorbablePositions(
|
||||
target: dragType
|
||||
): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
|
||||
const sections = target.queryStore.queryByType<Section>(Section.Type);
|
||||
sections.forEach((section) => {
|
||||
if (section.id !== target.id) {
|
||||
section.localToCanvasPoints(...section.datas.points).forEach((p) => {
|
||||
aps.push(new DragMoveAbsorbablePoint(p)); //区段端点
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const turnouts = target.queryStore.queryByType<Turnout>(Turnout.Type);
|
||||
turnouts.forEach((otherTurnout) => {
|
||||
if (otherTurnout.id !== target.id) {
|
||||
const {
|
||||
pointA: [A],
|
||||
pointB: [B],
|
||||
pointC: [C],
|
||||
} = otherTurnout.datas;
|
||||
[A, B, C].forEach((p) => {
|
||||
aps.push(
|
||||
new DragMoveAbsorbablePoint(otherTurnout.localToCanvasPoint(p)) //道岔端点
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return aps;
|
||||
}
|
||||
|
||||
function onEditPointCreate(turnout: Turnout, dp: DraggablePoint) {
|
||||
dp.on('transformstart', (e: GraphicTransformEvent) => {
|
||||
if (e.isShift()) {
|
||||
turnout.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(turnout),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const addPointConfig: MenuItemOptions = { name: '添加路径点' };
|
||||
const clearPointConfig: MenuItemOptions = { name: '清除路径点' };
|
||||
|
||||
const turnoutSectionEditMenu: ContextMenu = ContextMenu.init({
|
||||
name: '道岔区段路径编辑',
|
||||
groups: [
|
||||
{
|
||||
items: [addPointConfig, clearPointConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export class TurnoutPointsInteractionPlugin extends GraphicInteractionPlugin<Turnout> {
|
||||
static Name = 'TurnoutPointsDrag';
|
||||
static init(app: IDrawApp) {
|
||||
return new TurnoutPointsInteractionPlugin(app);
|
||||
}
|
||||
|
||||
constructor(app: IGraphicApp) {
|
||||
super(TurnoutPointsInteractionPlugin.Name, app);
|
||||
app.registerMenu(turnoutSectionEditMenu);
|
||||
}
|
||||
|
||||
onSectionContextMenu(e: FederatedMouseEvent, section: TurnoutSection) {
|
||||
const p = section.turnout.screenToLocalPoint(e.global);
|
||||
addPointConfig.handler = () => {
|
||||
if (section.port === DevicePort.A) {
|
||||
const { start } = getWaypointRangeIndex(
|
||||
[{ x: 0, y: 0 }, ...section.turnout.datas.pointA],
|
||||
false,
|
||||
p,
|
||||
TurnoutConsts.lineWidth
|
||||
);
|
||||
const points = section.turnout.datas.pointA;
|
||||
const ps = points.slice(0, start);
|
||||
ps.push(new Point(p.x, p.y));
|
||||
ps.push(...points.slice(start));
|
||||
section.turnout.datas.pointA = ps;
|
||||
}
|
||||
if (section.port === DevicePort.B) {
|
||||
const { start } = getWaypointRangeIndex(
|
||||
[{ x: 0, y: 0 }, ...section.turnout.datas.pointB],
|
||||
false,
|
||||
p,
|
||||
TurnoutConsts.lineWidth
|
||||
);
|
||||
const points = section.turnout.datas.pointB;
|
||||
const ps = points.slice(0, start);
|
||||
ps.push(new Point(p.x, p.y));
|
||||
ps.push(...points.slice(start));
|
||||
section.turnout.datas.pointB = ps;
|
||||
}
|
||||
if (section.port === DevicePort.C) {
|
||||
const { start } = getWaypointRangeIndex(
|
||||
[{ x: 0, y: 0 }, ...section.turnout.datas.pointC],
|
||||
false,
|
||||
p,
|
||||
TurnoutConsts.lineWidth
|
||||
);
|
||||
const points = section.turnout.datas.pointC;
|
||||
const ps = points.slice(0, start);
|
||||
ps.push(new Point(p.x, p.y));
|
||||
ps.push(...points.slice(start));
|
||||
section.turnout.datas.pointC = ps;
|
||||
}
|
||||
this.onSelected(section.turnout);
|
||||
};
|
||||
clearPointConfig.handler = () => {
|
||||
if (section.port === DevicePort.A)
|
||||
section.turnout.datas.pointA = [
|
||||
section.turnout.datas.pointA[section.turnout.datas.pointA.length - 1],
|
||||
];
|
||||
if (section.port === DevicePort.B)
|
||||
section.turnout.datas.pointB = [
|
||||
section.turnout.datas.pointB[section.turnout.datas.pointB.length - 1],
|
||||
];
|
||||
if (section.port === DevicePort.C)
|
||||
section.turnout.datas.pointC = [
|
||||
section.turnout.datas.pointC[section.turnout.datas.pointC.length - 1],
|
||||
];
|
||||
const tep = section.turnout.getAssistantAppend<TurnoutEditPlugin>(
|
||||
TurnoutEditPlugin.Name
|
||||
);
|
||||
if (tep) {
|
||||
tep.reset();
|
||||
}
|
||||
section.turnout.repaint();
|
||||
};
|
||||
turnoutSectionEditMenu.open(e.global);
|
||||
}
|
||||
|
||||
bind(g: Turnout): void {
|
||||
g.graphics.fork.eventMode = 'static';
|
||||
g.graphics.fork.cursor = 'pointer';
|
||||
g.graphics.fork.hitArea = new ForkHitArea(g);
|
||||
g.graphics.sections.forEach((sectionGraphic) => {
|
||||
sectionGraphic.eventMode = 'static';
|
||||
sectionGraphic.cursor = 'pointer';
|
||||
sectionGraphic.hitArea = new TurnoutSectionHitArea(sectionGraphic);
|
||||
sectionGraphic.on(
|
||||
'rightclick',
|
||||
(e) => this.onSectionContextMenu(e, sectionGraphic),
|
||||
sectionGraphic
|
||||
);
|
||||
});
|
||||
g.graphics.label.eventMode = 'static';
|
||||
g.graphics.label.cursor = 'pointer';
|
||||
g.graphics.label.draggable = true;
|
||||
g.graphics.label.selectable = true;
|
||||
g.graphics.label.name = 'label';
|
||||
g.graphics.label.transformSave = true;
|
||||
g.transformSave = true;
|
||||
g.on('selected', this.onSelected, this);
|
||||
g.on('unselected', this.onUnSelected, this);
|
||||
g.on('transformstart', this.onDragMove, this);
|
||||
}
|
||||
|
||||
unbind(g: Turnout): void {
|
||||
g.off('selected', this.onSelected, this);
|
||||
g.off('unselected', this.onUnSelected, this);
|
||||
g.graphics.sections.forEach((sectionGraphic) => {
|
||||
sectionGraphic.off('rightclick');
|
||||
});
|
||||
g.off('transformstart', this.onDragMove, this);
|
||||
}
|
||||
|
||||
onSelected(g: DisplayObject) {
|
||||
const turnout = g as Turnout;
|
||||
let tep = turnout.getAssistantAppend<TurnoutEditPlugin>(
|
||||
TurnoutEditPlugin.Name
|
||||
);
|
||||
if (!tep) {
|
||||
tep = new TurnoutEditPlugin(turnout, { onEditPointCreate });
|
||||
turnout.addAssistantAppend(tep);
|
||||
}
|
||||
tep.editPoints = [[], [], []];
|
||||
tep.removeChildren();
|
||||
tep.initEditPoints();
|
||||
//tep.reset();
|
||||
tep.showAll();
|
||||
}
|
||||
|
||||
onUnSelected(g: DisplayObject) {
|
||||
const turnout = g as Turnout;
|
||||
const tep = turnout.getAssistantAppend<TurnoutEditPlugin>(
|
||||
TurnoutEditPlugin.Name
|
||||
);
|
||||
if (tep) {
|
||||
tep.hideAll();
|
||||
}
|
||||
}
|
||||
|
||||
filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
|
||||
return grahpics.filter((g) => g.type == Turnout.Type) as Turnout[];
|
||||
}
|
||||
|
||||
onDragMove(e: GraphicTransformEvent) {
|
||||
const turnout = e.target as Turnout;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildDragMoveAbsorbablePositions(turnout),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
type onTurnoutEditPointCreate = (turnout: Turnout, dp: DraggablePoint) => void;
|
||||
|
||||
export interface ITurnoutEditOptions {
|
||||
onEditPointCreate?: onTurnoutEditPointCreate;
|
||||
}
|
||||
|
||||
export class TurnoutEditPlugin extends GraphicEditPlugin<Turnout> {
|
||||
static Name = 'TurnoutEdit';
|
||||
options: ITurnoutEditOptions;
|
||||
editPoints: DraggablePoint[][] = [[], [], []];
|
||||
labels: VectorText[] = [];
|
||||
|
||||
constructor(graphic: Turnout, options?: ITurnoutEditOptions) {
|
||||
super(graphic);
|
||||
this.name = TurnoutEditPlugin.Name;
|
||||
this.options = Object.assign({}, options);
|
||||
this.initEditPoints();
|
||||
}
|
||||
reset(): void {
|
||||
this.destoryEditPoints();
|
||||
this.removeChildren();
|
||||
this.initEditPoints();
|
||||
}
|
||||
hideAll(): void {
|
||||
super.hideAll();
|
||||
}
|
||||
|
||||
initEditPoints() {
|
||||
const cpA = this.graphic.localToCanvasPoints(...this.graphic.datas.pointA);
|
||||
const cpB = this.graphic.localToCanvasPoints(...this.graphic.datas.pointB);
|
||||
const cpC = this.graphic.localToCanvasPoints(...this.graphic.datas.pointC);
|
||||
const cpMap: Map<Point[], IPointData[]> = new Map([
|
||||
[cpA, this.graphic.datas.pointA],
|
||||
[cpB, this.graphic.datas.pointB],
|
||||
[cpC, this.graphic.datas.pointC],
|
||||
]);
|
||||
Array.from(cpMap.entries()).forEach(([cpDatas, dataPoints], i) => {
|
||||
cpDatas.forEach((cpData, j) => {
|
||||
const dp = new DraggablePoint(cpData);
|
||||
dp.on('transforming', () => {
|
||||
const localPoint = this.graphic.canvasToLocalPoint(dp.position);
|
||||
dataPoints[j].x = localPoint.x;
|
||||
dataPoints[j].y = localPoint.y;
|
||||
|
||||
this.graphic.repaint();
|
||||
});
|
||||
if (this.options.onEditPointCreate) {
|
||||
this.options.onEditPointCreate(this.graphic, dp);
|
||||
}
|
||||
this.editPoints[i].push(dp);
|
||||
});
|
||||
});
|
||||
this.editPoints.forEach((cps) => {
|
||||
this.addChild(...cps);
|
||||
});
|
||||
this.labels = ['A', 'B', 'C'].map((str) => {
|
||||
const vc = new VectorText(str, { fill: AppConsts.assistantElementColor });
|
||||
vc.setVectorFontSize(14);
|
||||
vc.anchor.set(0.5);
|
||||
return vc;
|
||||
});
|
||||
this.addChild(...this.labels);
|
||||
}
|
||||
|
||||
destoryEditPoints() {
|
||||
this.editPoints.forEach((dps) => {
|
||||
dps.forEach((dp) => {
|
||||
dp.off('transforming');
|
||||
dp.destroy();
|
||||
this.removeChild(dp);
|
||||
});
|
||||
});
|
||||
this.editPoints = [[], [], []];
|
||||
}
|
||||
|
||||
updateEditedPointsPosition() {
|
||||
const cpA = this.graphic.localToCanvasPoints(...this.graphic.datas.pointA);
|
||||
const cpB = this.graphic.localToCanvasPoints(...this.graphic.datas.pointB);
|
||||
const cpC = this.graphic.localToCanvasPoints(...this.graphic.datas.pointC);
|
||||
[cpA, cpB, cpC].forEach((cps, i) => {
|
||||
cps.forEach((cp, j) => {
|
||||
this.editPoints[i][j].position.copyFrom(cp);
|
||||
if (j === cps.length - 1) {
|
||||
this.labels[i].position.copyFrom({ x: cp.x, y: cp.y + 12 });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,311 @@
|
|||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<q-header reveal class="bg-primary text-white">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="q-gutter-sm">
|
||||
<q-btn color="accent" label="功能菜单">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item
|
||||
v-for="item in leftMenuConfig"
|
||||
:key="item.label"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="item.click"
|
||||
>
|
||||
<q-item-section>{{ item.label }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn-toggle
|
||||
v-model="selectUtil"
|
||||
color="brown"
|
||||
text-color="white"
|
||||
toggle-color="orange"
|
||||
toggle-text-color="black"
|
||||
:options="utilsOption"
|
||||
@update:model-value="drawSelect"
|
||||
>
|
||||
<template
|
||||
v-for="(ctl, idx) in utilsOption"
|
||||
:key="idx"
|
||||
v-slot:[ctl.value]
|
||||
>
|
||||
<q-tooltip>{{ ctl.tip }}</q-tooltip>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</q-toolbar-title>
|
||||
<q-btn square color="purple" style="margin-right: 10px" icon="search">
|
||||
<q-popup-edit
|
||||
ref="popupEdit"
|
||||
v-model="searchId"
|
||||
:cover="false"
|
||||
:offset="[0, 10]"
|
||||
v-slot="scope"
|
||||
>
|
||||
<q-input
|
||||
color="accent"
|
||||
v-model="scope.value"
|
||||
label="设备Id"
|
||||
dense
|
||||
autofocus
|
||||
@keyup.enter="scope.set"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" color="accent" />
|
||||
</template>
|
||||
</q-input>
|
||||
</q-popup-edit>
|
||||
</q-btn>
|
||||
<q-btn-dropdown
|
||||
color="orange"
|
||||
label="数据管理"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="item in dataManageConfig"
|
||||
:key="item.label"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="item.click"
|
||||
>
|
||||
<q-item-section>{{ item.label }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
<q-btn color="info" label="返回" @click="backConfirm" />
|
||||
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
|
||||
</q-toolbar>
|
||||
<q-resize-observer @resize="onHeaderResize" />
|
||||
</q-header>
|
||||
|
||||
<q-drawer show-if-above bordered v-model="rightDrawerOpen" side="right">
|
||||
<q-resize-observer @resize="onRightResize" />
|
||||
<axleCounting-config
|
||||
v-if="showGenerateAxleCountingConfig"
|
||||
@close="closeGenerateAxleCountingConfig"
|
||||
/>
|
||||
<draw-properties v-else></draw-properties>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
<div id="draw-app-container" class="overflow-hidden"></div>
|
||||
</q-page-container>
|
||||
|
||||
<q-dialog
|
||||
v-model="saveAsDialog"
|
||||
persistent
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-card style="width: 300px">
|
||||
<q-card-section>
|
||||
<div class="text-h6">另存为</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<q-input
|
||||
outlined
|
||||
label="草稿名称"
|
||||
v-model="saveAsName"
|
||||
:rules="[(val) => val.trim() != '' || '草稿名称不能为空']"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn color="primary" label="提交" @click="saveAs(saveAsName)" />
|
||||
<q-btn label="取消" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-resize-observer @resize="onResize" />
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DrawProperties from 'src/components/draw-app/electronicMapDrawProperties.vue';
|
||||
import { useDrawStore } from 'src/stores/electronicMap-draw-store';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
import AxleCountingConfig from 'src/components/draw-app/properties/electronicMap/AxleCountingConfig.vue';
|
||||
//import { Station } from 'src/graphics/electronicMap/station/Station';
|
||||
import { Platform } from 'src/graphics/electronicMap/platform/Platform';
|
||||
/* import { ScreenDoor } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
|
||||
import { Section } from 'src/graphics/electronicMap/section/Section';
|
||||
import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
|
||||
import { Signal } from 'src/graphics/electronicMap/signal/Signal'; */
|
||||
import { saveDrawToServer } from 'src/drawApp/commonApp';
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const searchId = ref(0);
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
|
||||
watch(
|
||||
() => drawStore.drawMode,
|
||||
(drawMode) => {
|
||||
if (!drawMode) {
|
||||
selectUtil.value = '';
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => searchId.value,
|
||||
() => {
|
||||
try {
|
||||
if (searchId.value) {
|
||||
const device = drawStore
|
||||
.getDrawApp()
|
||||
.queryStore.queryById(searchId.value);
|
||||
drawStore.getDrawApp().makeGraphicCenterShow(device);
|
||||
drawStore.getDrawApp().updateSelected(device);
|
||||
searchId.value = 0;
|
||||
}
|
||||
} catch (err) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: `未查找到id为【${searchId.value}】的设备`,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const rightDrawerOpen = ref(false);
|
||||
function toggleRightDrawer() {
|
||||
rightDrawerOpen.value = !rightDrawerOpen.value;
|
||||
onResize();
|
||||
}
|
||||
|
||||
//工具栏所用
|
||||
const selectUtil = ref();
|
||||
const utilsOption: ControlItem[] = reactive([]);
|
||||
const drawSelect = (item: string) => {
|
||||
drawStore.getDrawApp().interactionPlugin(item).resume();
|
||||
};
|
||||
class ControlItem {
|
||||
value: string;
|
||||
slot: string;
|
||||
icon: string;
|
||||
tip: string;
|
||||
show = true;
|
||||
|
||||
constructor(value: string, icon: string, tip: string, show?: boolean) {
|
||||
this.value = value;
|
||||
this.slot = value;
|
||||
this.icon = icon;
|
||||
this.tip = tip;
|
||||
if (show != undefined) {
|
||||
this.show = show;
|
||||
}
|
||||
}
|
||||
}
|
||||
//左侧功能按钮
|
||||
const leftMenuConfig = [
|
||||
{ label: '保存', click: saveAllDrawDatas },
|
||||
{ label: '另存为', click: () => (saveAsDialog.value = true) },
|
||||
{ label: '一键关联', click: buildRelations },
|
||||
{ label: '一键生成计轴', click: oneClickAxleCounting },
|
||||
];
|
||||
|
||||
//数据管理下拉按钮
|
||||
const showScreenDoorConfig = ref(false);
|
||||
const showGenerateAxleCountingConfig = ref(false);
|
||||
const closeGenerateAxleCountingConfig = () => {
|
||||
showGenerateAxleCountingConfig.value = false;
|
||||
};
|
||||
const dataManageConfig = [
|
||||
{ label: '屏蔽门配置', click: () => (showScreenDoorConfig.value = true) },
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
console.log('绘制应用layout mounted');
|
||||
drawStore.setDraftId(+route.params.id as number);
|
||||
const dom = document.getElementById('draw-app-container');
|
||||
if (dom) {
|
||||
drawStore.setDraftId(+route.params.id as number);
|
||||
const drawApp = drawStore.initDrawApp();
|
||||
drawApp.bindDom(dom);
|
||||
drawApp.reload();
|
||||
onResize();
|
||||
} else {
|
||||
drawStore.setDraftId(null);
|
||||
}
|
||||
/* const drawAssistantsTypes = [
|
||||
Station.Type,
|
||||
Platform.Type,
|
||||
ScreenDoor.Type,
|
||||
Section.Type,
|
||||
Turnout.Type,
|
||||
Signal.Type,
|
||||
]; */
|
||||
const drawAssistantsTypes = [Platform.Type];
|
||||
drawAssistantsTypes.forEach((type) => {
|
||||
const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
|
||||
if (drawAssistant) {
|
||||
utilsOption.push(
|
||||
new ControlItem(
|
||||
drawAssistant.name,
|
||||
drawAssistant.icon,
|
||||
drawAssistant.description || drawAssistant.name
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const canvasWidth = ref(0);
|
||||
const canvasHeight = ref(0);
|
||||
const headerHeight = ref(0);
|
||||
const rightWidth = ref(0);
|
||||
|
||||
function onHeaderResize(size: { height: number; width: number }) {
|
||||
headerHeight.value = size.height;
|
||||
onResize();
|
||||
}
|
||||
|
||||
function onRightResize(size: { height: number; width: number }) {
|
||||
rightWidth.value = size.width;
|
||||
onResize();
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
const clientWidth = document.documentElement.clientWidth;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
canvasWidth.value =
|
||||
clientWidth - (rightDrawerOpen.value ? rightWidth.value : 0);
|
||||
canvasHeight.value = clientHeight - headerHeight.value;
|
||||
const dom = document.getElementById('draw-app-container');
|
||||
if (dom) {
|
||||
dom.style.width = canvasWidth.value + 'px';
|
||||
dom.style.height = canvasHeight.value + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function saveAllDrawDatas() {
|
||||
let base64 = '';
|
||||
saveDrawToServer(base64);
|
||||
}
|
||||
|
||||
function buildRelations() {
|
||||
const app = drawStore.getDrawApp();
|
||||
app?.detectRelations();
|
||||
}
|
||||
|
||||
function oneClickAxleCounting() {
|
||||
//一键生成计轴--先展示配置
|
||||
drawStore.oneClickType;
|
||||
showGenerateAxleCountingConfig.value = true;
|
||||
}
|
||||
|
||||
function backConfirm() {
|
||||
router.go(-1);
|
||||
}
|
||||
|
||||
const saveAsDialog = ref(false);
|
||||
const saveAsName = ref('');
|
||||
</script>
|
||||
|
|
@ -72,6 +72,7 @@ const visible = ref(false);
|
|||
const loginInfo = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
orgId: 0,
|
||||
});
|
||||
|
||||
let orgInfo;
|
||||
|
|
@ -81,7 +82,7 @@ onMounted(async () => {
|
|||
} else {
|
||||
orgInfo = await getDefaultOrg();
|
||||
}
|
||||
console.log(orgInfo, 6666);
|
||||
loginInfo.orgId = orgInfo.id;
|
||||
});
|
||||
|
||||
const authStore = useAuthStore();
|
||||
|
|
|
|||
|
|
@ -8,13 +8,23 @@ export namespace common {
|
|||
export enum Role {
|
||||
Role_Unknown = 0,
|
||||
Role_Admin = 1,
|
||||
Role_User = 2
|
||||
Role_User = 2,
|
||||
Role_OrgManager = 11,
|
||||
Role_OrgTeacher = 12,
|
||||
Role_OrgStudent = 13,
|
||||
Role_OrgGuest = 14
|
||||
}
|
||||
export enum DataType {
|
||||
DataType_Unknown = 0,
|
||||
DataType_Em = 1,
|
||||
DataType_Iscs = 4
|
||||
}
|
||||
export enum LineType {
|
||||
LineType_Unknown = 0,
|
||||
LineType_Ur = 1,
|
||||
LineType_Ir = 2,
|
||||
LineType_Cr = 3
|
||||
}
|
||||
export enum IscsStyle {
|
||||
IscsStyle_Unknown = 0,
|
||||
IscsStyle_DaShiZhiNeng = 1
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,426 +0,0 @@
|
|||
/**
|
||||
* Generated by the protoc-gen-ts. DO NOT EDIT!
|
||||
* compiler version: 5.27.4
|
||||
* source: em_data.proto
|
||||
* git: https://github.com/thesayyn/protoc-gen-ts */
|
||||
import * as dependency_1 from "./common";
|
||||
import * as pb_1 from "google-protobuf";
|
||||
export namespace em_data {
|
||||
export class Em extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
canvas?: dependency_1.common.Canvas;
|
||||
stations?: Station[];
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("canvas" in data && data.canvas != undefined) {
|
||||
this.canvas = data.canvas;
|
||||
}
|
||||
if ("stations" in data && data.stations != undefined) {
|
||||
this.stations = data.stations;
|
||||
}
|
||||
}
|
||||
}
|
||||
get canvas() {
|
||||
return pb_1.Message.getWrapperField(this, dependency_1.common.Canvas, 1) as dependency_1.common.Canvas;
|
||||
}
|
||||
set canvas(value: dependency_1.common.Canvas) {
|
||||
pb_1.Message.setWrapperField(this, 1, value);
|
||||
}
|
||||
get has_canvas() {
|
||||
return pb_1.Message.getField(this, 1) != null;
|
||||
}
|
||||
get stations() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Station, 2) as Station[];
|
||||
}
|
||||
set stations(value: Station[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 2, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
canvas?: ReturnType<typeof dependency_1.common.Canvas.prototype.toObject>;
|
||||
stations?: ReturnType<typeof Station.prototype.toObject>[];
|
||||
}): Em {
|
||||
const message = new Em({});
|
||||
if (data.canvas != null) {
|
||||
message.canvas = dependency_1.common.Canvas.fromObject(data.canvas);
|
||||
}
|
||||
if (data.stations != null) {
|
||||
message.stations = data.stations.map(item => Station.fromObject(item));
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
canvas?: ReturnType<typeof dependency_1.common.Canvas.prototype.toObject>;
|
||||
stations?: ReturnType<typeof Station.prototype.toObject>[];
|
||||
} = {};
|
||||
if (this.canvas != null) {
|
||||
data.canvas = this.canvas.toObject();
|
||||
}
|
||||
if (this.stations != null) {
|
||||
data.stations = this.stations.map((item: Station) => item.toObject());
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.has_canvas)
|
||||
writer.writeMessage(1, this.canvas, () => this.canvas.serialize(writer));
|
||||
if (this.stations.length)
|
||||
writer.writeRepeatedMessage(2, this.stations, (item: Station) => item.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Em {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Em();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
reader.readMessage(message.canvas, () => message.canvas = dependency_1.common.Canvas.deserialize(reader));
|
||||
break;
|
||||
case 2:
|
||||
reader.readMessage(message.stations, () => pb_1.Message.addToRepeatedWrapperField(message, 2, Station.deserialize(reader), Station));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Em {
|
||||
return Em.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class KilometerMark extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
coordinate?: string;
|
||||
value?: number;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("coordinate" in data && data.coordinate != undefined) {
|
||||
this.coordinate = data.coordinate;
|
||||
}
|
||||
if ("value" in data && data.value != undefined) {
|
||||
this.value = data.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
get coordinate() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
|
||||
}
|
||||
set coordinate(value: string) {
|
||||
pb_1.Message.setField(this, 1, value);
|
||||
}
|
||||
get value() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 2, 0) as number;
|
||||
}
|
||||
set value(value: number) {
|
||||
pb_1.Message.setField(this, 2, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
coordinate?: string;
|
||||
value?: number;
|
||||
}): KilometerMark {
|
||||
const message = new KilometerMark({});
|
||||
if (data.coordinate != null) {
|
||||
message.coordinate = data.coordinate;
|
||||
}
|
||||
if (data.value != null) {
|
||||
message.value = data.value;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
coordinate?: string;
|
||||
value?: number;
|
||||
} = {};
|
||||
if (this.coordinate != null) {
|
||||
data.coordinate = this.coordinate;
|
||||
}
|
||||
if (this.value != null) {
|
||||
data.value = this.value;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.coordinate.length)
|
||||
writer.writeString(1, this.coordinate);
|
||||
if (this.value != 0)
|
||||
writer.writeInt64(2, this.value);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): KilometerMark {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new KilometerMark();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
message.coordinate = reader.readString();
|
||||
break;
|
||||
case 2:
|
||||
message.value = reader.readInt64();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): KilometerMark {
|
||||
return KilometerMark.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Station extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
common?: dependency_1.common.CommonInfo;
|
||||
name?: string;
|
||||
zhanName?: string;
|
||||
namePinyin?: string;
|
||||
km?: KilometerMark;
|
||||
concentration?: boolean;
|
||||
depots?: boolean;
|
||||
manageStationIds?: number[];
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [13], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("common" in data && data.common != undefined) {
|
||||
this.common = data.common;
|
||||
}
|
||||
if ("name" in data && data.name != undefined) {
|
||||
this.name = data.name;
|
||||
}
|
||||
if ("zhanName" in data && data.zhanName != undefined) {
|
||||
this.zhanName = data.zhanName;
|
||||
}
|
||||
if ("namePinyin" in data && data.namePinyin != undefined) {
|
||||
this.namePinyin = data.namePinyin;
|
||||
}
|
||||
if ("km" in data && data.km != undefined) {
|
||||
this.km = data.km;
|
||||
}
|
||||
if ("concentration" in data && data.concentration != undefined) {
|
||||
this.concentration = data.concentration;
|
||||
}
|
||||
if ("depots" in data && data.depots != undefined) {
|
||||
this.depots = data.depots;
|
||||
}
|
||||
if ("manageStationIds" in data && data.manageStationIds != undefined) {
|
||||
this.manageStationIds = data.manageStationIds;
|
||||
}
|
||||
}
|
||||
}
|
||||
get common() {
|
||||
return pb_1.Message.getWrapperField(this, dependency_1.common.CommonInfo, 1) as dependency_1.common.CommonInfo;
|
||||
}
|
||||
set common(value: dependency_1.common.CommonInfo) {
|
||||
pb_1.Message.setWrapperField(this, 1, value);
|
||||
}
|
||||
get has_common() {
|
||||
return pb_1.Message.getField(this, 1) != null;
|
||||
}
|
||||
get name() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
|
||||
}
|
||||
set name(value: string) {
|
||||
pb_1.Message.setField(this, 2, value);
|
||||
}
|
||||
get zhanName() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
|
||||
}
|
||||
set zhanName(value: string) {
|
||||
pb_1.Message.setField(this, 3, value);
|
||||
}
|
||||
get namePinyin() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 4, "") as string;
|
||||
}
|
||||
set namePinyin(value: string) {
|
||||
pb_1.Message.setField(this, 4, value);
|
||||
}
|
||||
get km() {
|
||||
return pb_1.Message.getWrapperField(this, KilometerMark, 6) as KilometerMark;
|
||||
}
|
||||
set km(value: KilometerMark) {
|
||||
pb_1.Message.setWrapperField(this, 6, value);
|
||||
}
|
||||
get has_km() {
|
||||
return pb_1.Message.getField(this, 6) != null;
|
||||
}
|
||||
get concentration() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 10, false) as boolean;
|
||||
}
|
||||
set concentration(value: boolean) {
|
||||
pb_1.Message.setField(this, 10, value);
|
||||
}
|
||||
get depots() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 11, false) as boolean;
|
||||
}
|
||||
set depots(value: boolean) {
|
||||
pb_1.Message.setField(this, 11, value);
|
||||
}
|
||||
get manageStationIds() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 13, []) as number[];
|
||||
}
|
||||
set manageStationIds(value: number[]) {
|
||||
pb_1.Message.setField(this, 13, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
|
||||
name?: string;
|
||||
zhanName?: string;
|
||||
namePinyin?: string;
|
||||
km?: ReturnType<typeof KilometerMark.prototype.toObject>;
|
||||
concentration?: boolean;
|
||||
depots?: boolean;
|
||||
manageStationIds?: number[];
|
||||
}): Station {
|
||||
const message = new Station({});
|
||||
if (data.common != null) {
|
||||
message.common = dependency_1.common.CommonInfo.fromObject(data.common);
|
||||
}
|
||||
if (data.name != null) {
|
||||
message.name = data.name;
|
||||
}
|
||||
if (data.zhanName != null) {
|
||||
message.zhanName = data.zhanName;
|
||||
}
|
||||
if (data.namePinyin != null) {
|
||||
message.namePinyin = data.namePinyin;
|
||||
}
|
||||
if (data.km != null) {
|
||||
message.km = KilometerMark.fromObject(data.km);
|
||||
}
|
||||
if (data.concentration != null) {
|
||||
message.concentration = data.concentration;
|
||||
}
|
||||
if (data.depots != null) {
|
||||
message.depots = data.depots;
|
||||
}
|
||||
if (data.manageStationIds != null) {
|
||||
message.manageStationIds = data.manageStationIds;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
|
||||
name?: string;
|
||||
zhanName?: string;
|
||||
namePinyin?: string;
|
||||
km?: ReturnType<typeof KilometerMark.prototype.toObject>;
|
||||
concentration?: boolean;
|
||||
depots?: boolean;
|
||||
manageStationIds?: number[];
|
||||
} = {};
|
||||
if (this.common != null) {
|
||||
data.common = this.common.toObject();
|
||||
}
|
||||
if (this.name != null) {
|
||||
data.name = this.name;
|
||||
}
|
||||
if (this.zhanName != null) {
|
||||
data.zhanName = this.zhanName;
|
||||
}
|
||||
if (this.namePinyin != null) {
|
||||
data.namePinyin = this.namePinyin;
|
||||
}
|
||||
if (this.km != null) {
|
||||
data.km = this.km.toObject();
|
||||
}
|
||||
if (this.concentration != null) {
|
||||
data.concentration = this.concentration;
|
||||
}
|
||||
if (this.depots != null) {
|
||||
data.depots = this.depots;
|
||||
}
|
||||
if (this.manageStationIds != null) {
|
||||
data.manageStationIds = this.manageStationIds;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.has_common)
|
||||
writer.writeMessage(1, this.common, () => this.common.serialize(writer));
|
||||
if (this.name.length)
|
||||
writer.writeString(2, this.name);
|
||||
if (this.zhanName.length)
|
||||
writer.writeString(3, this.zhanName);
|
||||
if (this.namePinyin.length)
|
||||
writer.writeString(4, this.namePinyin);
|
||||
if (this.has_km)
|
||||
writer.writeMessage(6, this.km, () => this.km.serialize(writer));
|
||||
if (this.concentration != false)
|
||||
writer.writeBool(10, this.concentration);
|
||||
if (this.depots != false)
|
||||
writer.writeBool(11, this.depots);
|
||||
if (this.manageStationIds.length)
|
||||
writer.writePackedUint32(13, this.manageStationIds);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Station {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Station();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
reader.readMessage(message.common, () => message.common = dependency_1.common.CommonInfo.deserialize(reader));
|
||||
break;
|
||||
case 2:
|
||||
message.name = reader.readString();
|
||||
break;
|
||||
case 3:
|
||||
message.zhanName = reader.readString();
|
||||
break;
|
||||
case 4:
|
||||
message.namePinyin = reader.readString();
|
||||
break;
|
||||
case 6:
|
||||
reader.readMessage(message.km, () => message.km = KilometerMark.deserialize(reader));
|
||||
break;
|
||||
case 10:
|
||||
message.concentration = reader.readBool();
|
||||
break;
|
||||
case 11:
|
||||
message.depots = reader.readBool();
|
||||
break;
|
||||
case 13:
|
||||
message.manageStationIds = reader.readPackedUint32();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Station {
|
||||
return Station.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
/**
|
||||
* Generated by the protoc-gen-ts. DO NOT EDIT!
|
||||
* compiler version: 5.27.4
|
||||
* source: picture.proto
|
||||
* git: https://github.com/thesayyn/protoc-gen-ts */
|
||||
import * as pb_1 from "google-protobuf";
|
||||
export enum PictureType {
|
||||
FireAlarm = 0,
|
||||
Electromechanical = 1,
|
||||
Broadcast = 2,
|
||||
PassengerInformation = 3,
|
||||
CCTV = 4,
|
||||
PSD = 5,
|
||||
TicketSalesAndChecking = 6,
|
||||
AccessControl = 7,
|
||||
FloodGate = 8,
|
||||
NetworkStatus = 9
|
||||
}
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
/**
|
||||
* Generated by the protoc-gen-ts. DO NOT EDIT!
|
||||
* compiler version: 5.27.4
|
||||
* source: simulation.proto
|
||||
* git: https://github.com/thesayyn/protoc-gen-ts */
|
||||
import * as dependency_1 from "./google\\protobuf\\any";
|
||||
import * as pb_1 from "google-protobuf";
|
||||
export namespace simulation {
|
||||
export enum OperationType {
|
||||
Unknown = 0,
|
||||
Pause = 1,
|
||||
Unpause = 2,
|
||||
Reset = 3,
|
||||
SetSpeed = 4,
|
||||
Destroy = 5
|
||||
}
|
||||
export class Operation extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [[2]];
|
||||
constructor(data?: any[] | ({
|
||||
otype?: OperationType;
|
||||
} & (({
|
||||
setSpeedParam?: SetSpeedParam;
|
||||
})))) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("otype" in data && data.otype != undefined) {
|
||||
this.otype = data.otype;
|
||||
}
|
||||
if ("setSpeedParam" in data && data.setSpeedParam != undefined) {
|
||||
this.setSpeedParam = data.setSpeedParam;
|
||||
}
|
||||
}
|
||||
}
|
||||
get otype() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 1, OperationType.Unknown) as OperationType;
|
||||
}
|
||||
set otype(value: OperationType) {
|
||||
pb_1.Message.setField(this, 1, value);
|
||||
}
|
||||
get setSpeedParam() {
|
||||
return pb_1.Message.getWrapperField(this, SetSpeedParam, 2) as SetSpeedParam;
|
||||
}
|
||||
set setSpeedParam(value: SetSpeedParam) {
|
||||
pb_1.Message.setOneofWrapperField(this, 2, this.#one_of_decls[0], value);
|
||||
}
|
||||
get has_setSpeedParam() {
|
||||
return pb_1.Message.getField(this, 2) != null;
|
||||
}
|
||||
get param() {
|
||||
const cases: {
|
||||
[index: number]: "none" | "setSpeedParam";
|
||||
} = {
|
||||
0: "none",
|
||||
2: "setSpeedParam"
|
||||
};
|
||||
return cases[pb_1.Message.computeOneofCase(this, [2])];
|
||||
}
|
||||
static fromObject(data: {
|
||||
otype?: OperationType;
|
||||
setSpeedParam?: ReturnType<typeof SetSpeedParam.prototype.toObject>;
|
||||
}): Operation {
|
||||
const message = new Operation({});
|
||||
if (data.otype != null) {
|
||||
message.otype = data.otype;
|
||||
}
|
||||
if (data.setSpeedParam != null) {
|
||||
message.setSpeedParam = SetSpeedParam.fromObject(data.setSpeedParam);
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
otype?: OperationType;
|
||||
setSpeedParam?: ReturnType<typeof SetSpeedParam.prototype.toObject>;
|
||||
} = {};
|
||||
if (this.otype != null) {
|
||||
data.otype = this.otype;
|
||||
}
|
||||
if (this.setSpeedParam != null) {
|
||||
data.setSpeedParam = this.setSpeedParam.toObject();
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.otype != OperationType.Unknown)
|
||||
writer.writeEnum(1, this.otype);
|
||||
if (this.has_setSpeedParam)
|
||||
writer.writeMessage(2, this.setSpeedParam, () => this.setSpeedParam.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Operation {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Operation();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
message.otype = reader.readEnum();
|
||||
break;
|
||||
case 2:
|
||||
reader.readMessage(message.setSpeedParam, () => message.setSpeedParam = SetSpeedParam.deserialize(reader));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Operation {
|
||||
return Operation.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class SetSpeedParam extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
speed?: number;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("speed" in data && data.speed != undefined) {
|
||||
this.speed = data.speed;
|
||||
}
|
||||
}
|
||||
}
|
||||
get speed() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
|
||||
}
|
||||
set speed(value: number) {
|
||||
pb_1.Message.setField(this, 1, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
speed?: number;
|
||||
}): SetSpeedParam {
|
||||
const message = new SetSpeedParam({});
|
||||
if (data.speed != null) {
|
||||
message.speed = data.speed;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
speed?: number;
|
||||
} = {};
|
||||
if (this.speed != null) {
|
||||
data.speed = this.speed;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.speed != 0)
|
||||
writer.writeFloat(1, this.speed);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): SetSpeedParam {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new SetSpeedParam();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
message.speed = reader.readFloat();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): SetSpeedParam {
|
||||
return SetSpeedParam.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,6 +94,14 @@ const routes: RouteRecordRaw[] = [
|
|||
hidden: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/electronicMapPainting/:id',
|
||||
name: 'electronicMapPainting',
|
||||
component: () => import('layouts/electronicMapDrawLayout.vue'),
|
||||
meta: {
|
||||
hidden: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/:catchAll(.*)*',
|
||||
meta: {
|
||||
|
|
|
|||
|
|
@ -12,14 +12,12 @@ import {
|
|||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
import { markRaw } from 'vue';
|
||||
import { PictureType } from 'src/protos/picture';
|
||||
|
||||
export const useDrawStore = defineStore('draw', {
|
||||
state: () => ({
|
||||
drawAssistant: null as DrawAssistant | null,
|
||||
selectedGraphics: null as JlGraphic[] | null,
|
||||
draftId: null as number | null,
|
||||
drawPictureType: null as PictureType | null,
|
||||
selectSubmenuAndStation: { submenu: '', station: '', partition: '' },
|
||||
}),
|
||||
getters: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import {
|
||||
initElectronicMapDrawApp,
|
||||
destroyElectronicMapDrawApp,
|
||||
getElectronicMapDrawApp,
|
||||
} from 'src/drawApp/electronicMapApp';
|
||||
import {
|
||||
DrawAssistant,
|
||||
GraphicData,
|
||||
IDrawApp,
|
||||
IJlCanvas,
|
||||
JlGraphic,
|
||||
} from 'jl-graphic';
|
||||
import { markRaw } from 'vue';
|
||||
|
||||
export const useDrawStore = defineStore('draw', {
|
||||
state: () => ({
|
||||
drawAssistant: null as DrawAssistant | null,
|
||||
selectedGraphics: null as JlGraphic[] | null,
|
||||
draftId: null as number | null,
|
||||
oneClickType: '',
|
||||
}),
|
||||
getters: {
|
||||
drawMode: (state) => state.drawAssistant != null,
|
||||
drawGraphicType: (state) => state.drawAssistant?.type,
|
||||
drawGraphicName: (state) => state.drawAssistant?.description,
|
||||
drawGraphicTemplate: (state) => state.drawAssistant?.graphicTemplate,
|
||||
selectedGraphicType: (state) => {
|
||||
if (state.selectedGraphics) {
|
||||
if (state.selectedGraphics.length === 1) {
|
||||
return state.selectedGraphics[0].type;
|
||||
}
|
||||
}
|
||||
},
|
||||
selectedObjName(state): string {
|
||||
if (state.selectedGraphics) {
|
||||
if (state.selectedGraphics.length == 0) {
|
||||
return '画布';
|
||||
} else if (state.selectedGraphics.length == 1) {
|
||||
const name = getElectronicMapDrawApp()?.getDrawAssistant(
|
||||
state.selectedGraphics[0].type
|
||||
).description;
|
||||
return name || '';
|
||||
}
|
||||
return '批量设置';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
selectedGraphic: (state) => {
|
||||
if (state.selectedGraphics) {
|
||||
if (state.selectedGraphics.length === 1) {
|
||||
return state.selectedGraphics[0];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
getDrawApp(): IDrawApp {
|
||||
const app = getElectronicMapDrawApp();
|
||||
if (app == null) {
|
||||
throw new Error('未初始化app');
|
||||
}
|
||||
return app;
|
||||
},
|
||||
getJlCanvas(): IJlCanvas {
|
||||
return this.getDrawApp().canvas;
|
||||
},
|
||||
bindFormData(form: GraphicData): void {
|
||||
const app = this.getDrawApp();
|
||||
app.bindFormData(form);
|
||||
},
|
||||
unbindFormData(form: GraphicData): void {
|
||||
const app = this.getDrawApp();
|
||||
app.unbindFormData(form);
|
||||
},
|
||||
initDrawApp() {
|
||||
const app = initElectronicMapDrawApp();
|
||||
if (app == null) {
|
||||
throw new Error('未初始化app');
|
||||
}
|
||||
app.on('interaction-plugin-resume', (plugin) => {
|
||||
if (plugin.isAppPlugin()) {
|
||||
if (Object.hasOwn(plugin, '__GraphicDrawAssistant')) {
|
||||
this.drawAssistant = plugin as DrawAssistant;
|
||||
} else {
|
||||
this.drawAssistant = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
app.on('graphicselected', (graphics) => {
|
||||
this.selectedGraphics = markRaw(graphics);
|
||||
});
|
||||
this.selectedGraphics = [];
|
||||
return app;
|
||||
},
|
||||
destroy() {
|
||||
// console.log('绘制状态清空，绘制应用销毁');
|
||||
this.drawAssistant = null;
|
||||
this.selectedGraphics = null;
|
||||
destroyElectronicMapDrawApp();
|
||||
},
|
||||
setDraftId(id: number | null) {
|
||||
this.draftId = id;
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue