Merge branch 'master' of git.code.tencent.com:xian-ncc-da/xian-ncc-da-client
This commit is contained in:
Yuan
commit
ae4fab38f9
@ -22,7 +22,7 @@ export class PagingQueryParams extends PageQueryDto {
|
||||
*/
|
||||
export function publishDraft(data: {
|
||||
name: string;
|
||||
lineId: number;
|
||||
lineId?: number;
|
||||
draftingId: number;
|
||||
}) {
|
||||
return api.post(`${PublishUriBase}/publish`, data);
|
||||
@ -33,7 +33,7 @@ export function publishDraft(data: {
|
||||
* @param params
|
||||
* @returns
|
||||
*/
|
||||
export async function getDraft(id: number): Promise<Item> {
|
||||
export async function getDraft(): Promise<Item> {
|
||||
const response = await api.get(`${PublishUriBase}/list`);
|
||||
return response.data;
|
||||
}
|
||||
@ -67,3 +67,10 @@ export async function getPublishMapInfoById(id: number): Promise<Item> {
|
||||
const response = await api.get(`${PublishUriBase}/${id}`);
|
||||
return response.data;
|
||||
}
|
||||
/**
|
||||
* 获取已发布的线路地图数据
|
||||
*/
|
||||
export async function getPublishLineNet(): Promise<Item> {
|
||||
const response = await api.get(`${PublishUriBase}/publish/lineNetwork/info`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
@ -76,5 +76,10 @@ const list = reactive([
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/monitor',
|
||||
label: '监控',
|
||||
icon: 'computer',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
@ -73,6 +73,26 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<q-select
|
||||
outlined
|
||||
style="margin-top: 10px"
|
||||
v-model="runLineModel.containSta"
|
||||
:options="stationLines"
|
||||
option-value="id"
|
||||
option-label="code"
|
||||
:multiple="true"
|
||||
:map-options="true"
|
||||
:emit-value="true"
|
||||
@blur="onUpdate"
|
||||
label="关联车站"
|
||||
>
|
||||
<template v-slot:after>
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="生成"
|
||||
@click="generateContainSta"
|
||||
/> </template
|
||||
></q-select>
|
||||
<div style="margin-top: 10px; display: flex; justify-content: center">
|
||||
<q-btn
|
||||
color="primary"
|
||||
@ -90,9 +110,14 @@ import { RunLine } from 'src/graphics/runLine/RunLine';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
import { Point } from 'pixi.js';
|
||||
import {
|
||||
IStationLineData,
|
||||
StationLine,
|
||||
} from 'src/graphics/stationLine/StationLine';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const runLineModel = reactive(new RunLineData());
|
||||
const stationLines: IStationLineData[] = reactive([]);
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
@ -106,6 +131,10 @@ watch(
|
||||
|
||||
onMounted(() => {
|
||||
const runLine = drawStore.selectedGraphic as RunLine;
|
||||
const stations = drawStore
|
||||
.getDrawApp()
|
||||
.queryStore.queryByType(StationLine.Type) as StationLine[];
|
||||
stations.forEach((item) => stationLines.push(item.datas));
|
||||
if (runLine) {
|
||||
runLineModel.copyFrom(runLine.saveData());
|
||||
}
|
||||
@ -113,6 +142,7 @@ onMounted(() => {
|
||||
|
||||
function onUpdate() {
|
||||
const runLine = drawStore.selectedGraphic as RunLine;
|
||||
console.log(runLineModel, '*******');
|
||||
if (runLine) {
|
||||
drawStore.getDrawApp().updateGraphicAndRecord(runLine, runLineModel);
|
||||
}
|
||||
@ -126,4 +156,11 @@ function generatePathLine() {
|
||||
runLine.generatePathLine(points1);
|
||||
}
|
||||
}
|
||||
function generateContainSta() {
|
||||
const runLine = drawStore.selectedGraphic as RunLine;
|
||||
if (runLine) {
|
||||
runLine.generateContainSta();
|
||||
runLineModel.copyFrom(runLine.saveData());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
function getHost(): string {
|
||||
// return '192.168.3.7:9081';
|
||||
// return '192.168.3.47:9081';
|
||||
// return '192.168.3.37:9081';
|
||||
// return '192.168.3.15:9081';
|
||||
return '192.168.3.233:9081';
|
||||
}
|
||||
|
||||
|
||||
@ -179,27 +179,26 @@ export class PlatformState extends GraphicStateBase implements IPlatformState {
|
||||
}
|
||||
}
|
||||
|
||||
const arrestCarConfig: MenuItemOptions = {
|
||||
const holdConfig: MenuItemOptions = {
|
||||
name: '扣车',
|
||||
};
|
||||
const removeArrestCarConfig: MenuItemOptions = {
|
||||
const removeHoldrConfig: MenuItemOptions = {
|
||||
name: '取消扣车',
|
||||
disabled: true,
|
||||
};
|
||||
const batchArrestCarConfig: MenuItemOptions = {
|
||||
const batchHoldConfig: MenuItemOptions = {
|
||||
name: '批量扣车',
|
||||
};
|
||||
const removeBatchArrestCarConfig: MenuItemOptions = {
|
||||
const removeBatchHoldConfig: MenuItemOptions = {
|
||||
name: '批量取消扣车',
|
||||
};
|
||||
const earlyDepartureConfig: MenuItemOptions = {
|
||||
name: '提前发车',
|
||||
};
|
||||
const jumpStopConfig: MenuItemOptions = {
|
||||
const skipStopConfig: MenuItemOptions = {
|
||||
name: '设置跳停',
|
||||
};
|
||||
const removeJumpStopConfig: MenuItemOptions = {
|
||||
name: '设置跳停',
|
||||
const removeSkipStopConfig: MenuItemOptions = {
|
||||
name: '取消跳停',
|
||||
};
|
||||
const dockTimeConfig: MenuItemOptions = {
|
||||
name: '设置停站时间',
|
||||
@ -222,10 +221,10 @@ const PlatformOperateMenu: ContextMenu = ContextMenu.init({
|
||||
groups: [
|
||||
{
|
||||
items: [
|
||||
arrestCarConfig,
|
||||
removeArrestCarConfig,
|
||||
earlyDepartureConfig,
|
||||
platformMessadeConfig,
|
||||
holdConfig,
|
||||
removeHoldrConfig,
|
||||
skipStopConfig,
|
||||
removeSkipStopConfig,
|
||||
],
|
||||
},
|
||||
],
|
||||
@ -236,13 +235,13 @@ const dispatchPlatformOperateMenu: ContextMenu = ContextMenu.init({
|
||||
groups: [
|
||||
{
|
||||
items: [
|
||||
arrestCarConfig,
|
||||
removeArrestCarConfig,
|
||||
batchArrestCarConfig,
|
||||
removeBatchArrestCarConfig,
|
||||
holdConfig,
|
||||
removeHoldrConfig,
|
||||
batchHoldConfig,
|
||||
removeBatchHoldConfig,
|
||||
earlyDepartureConfig,
|
||||
jumpStopConfig,
|
||||
removeJumpStopConfig,
|
||||
skipStopConfig,
|
||||
removeSkipStopConfig,
|
||||
dockTimeConfig,
|
||||
operatingLevelConfig,
|
||||
numberOfRegionalTrainsConfig,
|
||||
@ -284,19 +283,23 @@ export class PlatformOperateInteraction extends GraphicInteractionPlugin<Platfor
|
||||
const target = e.target as DisplayObject;
|
||||
const platform = target.getGraphic() as Platform;
|
||||
this.app.updateSelected(platform);
|
||||
arrestCarConfig.handler = () => {
|
||||
platform.states.close = true;
|
||||
platform.changeState();
|
||||
holdConfig.handler = () => {
|
||||
platform.states.upHold = true;
|
||||
platform.states.upOccHold = true;
|
||||
platform.doRepaint();
|
||||
};
|
||||
removeArrestCarConfig.handler = () => {
|
||||
platform.states.close = false;
|
||||
platform.changeState();
|
||||
removeHoldrConfig.handler = () => {
|
||||
platform.states.upHold = false;
|
||||
platform.states.upOccHold = false;
|
||||
platform.doRepaint();
|
||||
};
|
||||
earlyDepartureConfig.handler = () => {
|
||||
console.log(2222);
|
||||
skipStopConfig.handler = () => {
|
||||
platform.states.upSkipstop = true;
|
||||
platform.doRepaint();
|
||||
};
|
||||
platformMessadeConfig.handler = () => {
|
||||
console.log(2222);
|
||||
removeSkipStopConfig.handler = () => {
|
||||
platform.states.upSkipstop = false;
|
||||
platform.doRepaint();
|
||||
};
|
||||
|
||||
PlatformOperateMenu.open(e.global);
|
||||
|
||||
@ -75,6 +75,12 @@ export class RunLineData extends GraphicDataBase implements IRunLineData {
|
||||
set downPathLineId(v: string) {
|
||||
this.data.downPathLineId = v;
|
||||
}
|
||||
get containSta(): string[] {
|
||||
return this.data.containSta;
|
||||
}
|
||||
set containSta(v: string[]) {
|
||||
this.data.containSta = v;
|
||||
}
|
||||
clone(): RunLineData {
|
||||
return new RunLineData(this.data.cloneMessage());
|
||||
}
|
||||
|
||||
@ -68,7 +68,7 @@ export class StationData extends GraphicDataBase implements IStationData {
|
||||
}
|
||||
|
||||
export class StationState extends GraphicStateBase implements IStationState {
|
||||
constructor(proto?: state.Station) {
|
||||
constructor(proto?: state.Rtu) {
|
||||
let states;
|
||||
if (proto) {
|
||||
states = proto;
|
||||
@ -78,153 +78,32 @@ export class StationState extends GraphicStateBase implements IStationState {
|
||||
super(states, Station.Type);
|
||||
}
|
||||
|
||||
get ipStaStusTermMode1(): boolean {
|
||||
return this.states.ipStaStusTermMode1;
|
||||
get ipRtuStusDown(): boolean {
|
||||
return this.states.ipRtuStusDown;
|
||||
}
|
||||
set ipStaStusTermMode1(v: boolean) {
|
||||
this.states.ipStaStusTermMode1 = v;
|
||||
set ipRtuStusDown(v: boolean) {
|
||||
this.states.ipRtuStusDown = v;
|
||||
}
|
||||
get ipStaStusTermMode2(): boolean {
|
||||
return this.states.ipStaStusTermMode2;
|
||||
get ipRtuStusInLocalCtrl(): boolean {
|
||||
return this.states.ipRtuStusInLocalCtrl;
|
||||
}
|
||||
set ipStaStusTermMode2(v: boolean) {
|
||||
this.states.ipStaStusTermMode2 = v;
|
||||
set ipRtuStusInLocalCtrl(v: boolean) {
|
||||
this.states.ipRtuStusInLocalCtrl = v;
|
||||
}
|
||||
get ipStaStusTermMode3(): boolean {
|
||||
return this.states.ipStaStusTermMode3;
|
||||
get ipRtuStusInCentralCtrl(): boolean {
|
||||
return this.states.ipRtuStusInCentralCtrl;
|
||||
}
|
||||
set ipStaStusTermMode3(v: boolean) {
|
||||
this.states.ipStaStusTermMode3 = v;
|
||||
set ipRtuStusInCentralCtrl(v: boolean) {
|
||||
this.states.ipRtuStusInCentralCtrl = v;
|
||||
}
|
||||
get ipStaStusTermMode4(): boolean {
|
||||
return this.states.ipStaStusTermMode4;
|
||||
get ipRtuStusInEmergencyCtrl(): boolean {
|
||||
return this.states.ipRtuStusInEmergencyCtrl;
|
||||
}
|
||||
set ipStaStusTermMode4(v: boolean) {
|
||||
this.states.ipStaStusTermMode4 = v;
|
||||
set ipRtuStusInEmergencyCtrl(v: boolean) {
|
||||
this.states.ipRtuStusInEmergencyCtrl = v;
|
||||
}
|
||||
get ipStaStusTermMode5(): boolean {
|
||||
return this.states.ipStaStusTermMode5;
|
||||
}
|
||||
set ipStaStusTermMode5(v: boolean) {
|
||||
this.states.ipStaStusTermMode5 = v;
|
||||
}
|
||||
get ipStaStusTermMode6(): boolean {
|
||||
return this.states.ipStaStusTermMode6;
|
||||
}
|
||||
set ipStaStusTermMode6(v: boolean) {
|
||||
this.states.ipStaStusTermMode6 = v;
|
||||
}
|
||||
get ipStaStusExpectTermMode1(): boolean {
|
||||
return this.states.ipStaStusExpectTermMode1;
|
||||
}
|
||||
set ipStaStusExpectTermMode1(v: boolean) {
|
||||
this.states.ipStaStusExpectTermMode1 = v;
|
||||
}
|
||||
get ipStaStusExpectTermMode2(): boolean {
|
||||
return this.states.ipStaStusExpectTermMode2;
|
||||
}
|
||||
set ipStaStusExpectTermMode2(v: boolean) {
|
||||
this.states.ipStaStusExpectTermMode2 = v;
|
||||
}
|
||||
get ipStaStusExpectTermMode3(): boolean {
|
||||
return this.states.ipStaStusExpectTermMode3;
|
||||
}
|
||||
set ipStaStusExpectTermMode3(v: boolean) {
|
||||
this.states.ipStaStusExpectTermMode3 = v;
|
||||
}
|
||||
|
||||
get ipStaStusExpectTermMode4(): boolean {
|
||||
return this.states.ipStaStusExpectTermMode4;
|
||||
}
|
||||
set ipStaStusExpectTermMode4(v: boolean) {
|
||||
this.states.ipStaStusExpectTermMode4 = v;
|
||||
}
|
||||
get ipStaStusExpectTermMode5(): boolean {
|
||||
return this.states.ipStaStusExpectTermMode5;
|
||||
}
|
||||
set ipStaStusExpectTermMode5(v: boolean) {
|
||||
this.states.ipStaStusExpectTermMode5 = v;
|
||||
}
|
||||
get ipStaStusExpectTermMode6(): boolean {
|
||||
return this.states.ipStaStusExpectTermMode6;
|
||||
}
|
||||
set ipStaStusExpectTermMode6(v: boolean) {
|
||||
this.states.ipStaStusExpectTermMode6 = v;
|
||||
}
|
||||
get ipStaStusInCycle1(): boolean {
|
||||
return this.states.ipStaStusInCycle1;
|
||||
}
|
||||
set ipStaStusInCycle1(v: boolean) {
|
||||
this.states.ipStaStusInCycle1 = v;
|
||||
}
|
||||
get ipStaStusInCycle2(): boolean {
|
||||
return this.states.ipStaStusInCycle2;
|
||||
}
|
||||
set ipStaStusInCycle2(v: boolean) {
|
||||
this.states.ipStaStusInCycle2 = v;
|
||||
}
|
||||
get ipStaStusInCycle3(): boolean {
|
||||
return this.states.ipStaStusInCycle3;
|
||||
}
|
||||
set ipStaStusInCycle3(v: boolean) {
|
||||
this.states.ipStaStusInCycle3 = v;
|
||||
}
|
||||
get ipStaStusInCycle4(): boolean {
|
||||
return this.states.ipStaStusInCycle4;
|
||||
}
|
||||
set ipStaStusInCycle4(v: boolean) {
|
||||
this.states.ipStaStusInCycle4 = v;
|
||||
}
|
||||
get ipStaStusInCycle5(): boolean {
|
||||
return this.states.ipStaStusInCycle5;
|
||||
}
|
||||
set ipStaStusInCycle5(v: boolean) {
|
||||
this.states.ipStaStusInCycle5 = v;
|
||||
}
|
||||
get ipStaStusInCycle6(): boolean {
|
||||
return this.states.ipStaStusInCycle6;
|
||||
}
|
||||
set ipStaStusInCycle6(v: boolean) {
|
||||
this.states.ipStaStusInCycle6 = v;
|
||||
}
|
||||
get ipStaStusExpectCycle1(): boolean {
|
||||
return this.states.ipStaStusExpectCycle1;
|
||||
}
|
||||
set ipStaStusExpectCycle1(v: boolean) {
|
||||
this.states.ipStaStusExpectCycle1 = v;
|
||||
}
|
||||
get ipStaStusExpectCycle2(): boolean {
|
||||
return this.states.ipStaStusExpectCycle2;
|
||||
}
|
||||
set ipStaStusExpectCycle2(v: boolean) {
|
||||
this.states.ipStaStusExpectCycle2 = v;
|
||||
}
|
||||
get ipStaStusExpectCycle3(): boolean {
|
||||
return this.states.ipStaStusExpectCycle3;
|
||||
}
|
||||
set ipStaStusExpectCycle3(v: boolean) {
|
||||
this.states.ipStaStusExpectCycle3 = v;
|
||||
}
|
||||
get ipStaStusExpectCycle4(): boolean {
|
||||
return this.states.ipStaStusExpectCycle4;
|
||||
}
|
||||
set ipStaStusExpectCycle4(v: boolean) {
|
||||
this.states.ipStaStusExpectCycle4 = v;
|
||||
}
|
||||
get ipStaStusExpectCycle5(): boolean {
|
||||
return this.states.ipStaStusExpectCycle5;
|
||||
}
|
||||
set ipStaStusExpectCycle5(v: boolean) {
|
||||
this.states.ipStaStusExpectCycle5 = v;
|
||||
}
|
||||
get ipStaStusExpectCycle6(): boolean {
|
||||
return this.states.ipStaStusExpectCycle6;
|
||||
}
|
||||
set ipStaStusExpectCycle6(v: boolean) {
|
||||
this.states.ipStaStusExpectCycle6 = v;
|
||||
}
|
||||
get states(): state.Station {
|
||||
return this.getState<state.Station>();
|
||||
get states(): state.Rtu {
|
||||
return this.getState<state.Rtu>();
|
||||
}
|
||||
|
||||
clone(): StationState {
|
||||
@ -232,6 +111,10 @@ export class StationState extends GraphicStateBase implements IStationState {
|
||||
}
|
||||
}
|
||||
|
||||
const powerUnlockConfig: MenuItemOptions = {
|
||||
name: '上电解锁',
|
||||
};
|
||||
|
||||
const chainConfig: MenuItemOptions = {
|
||||
name: '全站设置连锁自动触发',
|
||||
};
|
||||
@ -242,7 +125,7 @@ const StationOperateMenu: ContextMenu = ContextMenu.init({
|
||||
name: '车站操作菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [chainConfig, removeChainConfig],
|
||||
items: [powerUnlockConfig, chainConfig, removeChainConfig],
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -278,7 +161,14 @@ export class StationOperateInteraction extends GraphicInteractionPlugin<Station>
|
||||
const target = e.target as DisplayObject;
|
||||
const station = target.getGraphic() as Station;
|
||||
this.app.updateSelected(station);
|
||||
powerUnlockConfig.handler = () => {
|
||||
station.states.ipRtuStusInLocalCtrl = true;
|
||||
station.doRepaint();
|
||||
console.log(2222);
|
||||
};
|
||||
chainConfig.handler = () => {
|
||||
station.states.ipRtuStusDown = true;
|
||||
station.doRepaint();
|
||||
console.log(2222);
|
||||
};
|
||||
removeChainConfig.handler = () => {
|
||||
|
||||
@ -47,6 +47,10 @@ import {
|
||||
} from 'src/graphics/trainLine/TrainLine';
|
||||
import { TrainLineDraw } from 'src/graphics/trainLine/TrainLineAssistant';
|
||||
import { TrainLineData } from './graphics/TrainLineInteraction';
|
||||
import {
|
||||
OneClickGenerateDraw,
|
||||
OneClickGenerateTemplate,
|
||||
} from 'src/graphics/trainWindow/oneClickDrawAssistant';
|
||||
import {
|
||||
TrainWindow,
|
||||
TrainWindowTemplate,
|
||||
@ -153,6 +157,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
| PathLineDraw
|
||||
| TrainWindowDraw
|
||||
| TrainDraw
|
||||
| OneClickGenerateDraw
|
||||
)[] = [];
|
||||
if (draftType === 'Line') {
|
||||
drawAssistants = [
|
||||
@ -172,6 +177,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
new SectionDraw(app, new SectionTemplate(new SectionData())),
|
||||
new TurnoutDraw(app, new TurnoutTemplate(new TurnoutData())),
|
||||
new TrainWindowDraw(app, new TrainWindowTemplate(new TrainWindowData())),
|
||||
new OneClickGenerateDraw(app, new OneClickGenerateTemplate()),
|
||||
];
|
||||
DrawSignalInteraction.init(app);
|
||||
} else {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { GraphicApp, GraphicData } from 'src/jl-graphic';
|
||||
import { getPublishMapInfoById } from 'src/api/PublishApi';
|
||||
import { getPublishLineNet } from 'src/api/PublishApi';
|
||||
import { graphicData } from 'src/protos/stationLayoutGraphics';
|
||||
|
||||
import { RunLineTemplate } from 'src/graphics/runLine/RunLine';
|
||||
@ -51,11 +51,7 @@ export function initLineNetApp(dom: HTMLElement): GraphicApp {
|
||||
|
||||
export async function loadLineNetDatas(app: GraphicApp) {
|
||||
const lineNetStore = useLineNetStore();
|
||||
const id = lineNetStore.lineNetId;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
const { proto: base64, name: lineNetName } = await getPublishMapInfoById(id);
|
||||
const { proto: base64, name: lineNetName } = await getPublishLineNet();
|
||||
lineNetStore.setLineNetName(lineNetName);
|
||||
if (base64) {
|
||||
const storage = graphicData.RtssGraphicStorage.deserialize(
|
||||
|
||||
@ -56,34 +56,31 @@ export interface IPlatformState extends GraphicState {
|
||||
|
||||
//站台颜色
|
||||
export enum PlatformColorEnum {
|
||||
blue = '0x0fe81f', //站台的颜色
|
||||
lightBlue = '0x55d15d',
|
||||
yellow = '0xfbff00',
|
||||
white = '0xffffff',
|
||||
grey = '0x7F7F7F', //站台没有列车停站
|
||||
yellow = '0xfbff00', //列车在站台停站
|
||||
blue = '0xC0C0FE', //列车在站台跳停
|
||||
lozengeRed = '0xff0000', //站台旁的菱形图标
|
||||
whiteNumbers = '0xffffff', //站台旁白色数字
|
||||
whiteCircle = '0xffffff', //H字符旁的圆圈
|
||||
HCharYellow = '0xfbff00', //站台旁的H字符
|
||||
HCharWhite = '0xffffff',
|
||||
HCharRed = '0xff0000',
|
||||
doorBlue = '0x008000', //屏蔽门的颜色
|
||||
doorGreen = '0x00FF00', //屏蔽门的颜色
|
||||
doorRed = '0xff0000',
|
||||
doorBlue = '0x4048C4',
|
||||
}
|
||||
|
||||
const platformConsts = {
|
||||
width: 60,
|
||||
width: 90,
|
||||
height: 20,
|
||||
lineWidth: 3,
|
||||
besideFontSize: 12,
|
||||
doorOpenSpacing: 5,
|
||||
doorOpenSpacing: 15,
|
||||
doorPlatformSpacing: 10,
|
||||
besideSpacing: 10,
|
||||
circleRadius: 1,
|
||||
};
|
||||
|
||||
export interface childJlGraphic extends Container {
|
||||
clear(): void;
|
||||
draw(): void;
|
||||
}
|
||||
|
||||
//子元素--矩形
|
||||
export class rectGraphic extends Container {
|
||||
static Type = 'RectPlatForm';
|
||||
@ -93,27 +90,27 @@ export class rectGraphic extends Container {
|
||||
this.rectGraphic = new Graphics();
|
||||
this.addChild(this.rectGraphic);
|
||||
}
|
||||
draw(): void {
|
||||
draw(state: IPlatformState): void {
|
||||
const rectGraphic = this.rectGraphic;
|
||||
rectGraphic.clear();
|
||||
rectGraphic.lineStyle(
|
||||
platformConsts.lineWidth,
|
||||
new Color(PlatformColorEnum.yellow)
|
||||
);
|
||||
rectGraphic.beginFill(PlatformColorEnum.yellow, 1);
|
||||
let fillColor = PlatformColorEnum.grey;
|
||||
if (state.trainberth) {
|
||||
fillColor = PlatformColorEnum.yellow;
|
||||
}
|
||||
if (state.upSkipstop || state.downSkipstop) {
|
||||
fillColor = PlatformColorEnum.blue;
|
||||
}
|
||||
rectGraphic.lineStyle(platformConsts.lineWidth, new Color(fillColor));
|
||||
rectGraphic.beginFill(fillColor, 1);
|
||||
rectGraphic.drawRect(0, 0, platformConsts.width, platformConsts.height);
|
||||
rectGraphic.endFill;
|
||||
const rectP = new Rectangle(
|
||||
0,
|
||||
0,
|
||||
platformConsts.width,
|
||||
platformConsts.width
|
||||
platformConsts.height
|
||||
);
|
||||
rectGraphic.pivot = getRectangleCenter(rectP);
|
||||
rectGraphic.position.set(
|
||||
0,
|
||||
platformConsts.height / 2 + platformConsts.doorPlatformSpacing
|
||||
);
|
||||
}
|
||||
clear(): void {
|
||||
this.rectGraphic.clear();
|
||||
@ -131,15 +128,16 @@ export class doorGraphic extends Container {
|
||||
this.addChild(this.doorGraphic);
|
||||
this.addChild(this.doorCloseGraphic);
|
||||
}
|
||||
draw(): void {
|
||||
draw(stateData: IPlatformState): void {
|
||||
const doorGraphic = this.doorGraphic;
|
||||
const doorCloseGraphic = this.doorCloseGraphic;
|
||||
doorGraphic.clear();
|
||||
doorCloseGraphic.clear();
|
||||
doorGraphic.lineStyle(
|
||||
platformConsts.lineWidth,
|
||||
new Color(PlatformColorEnum.doorBlue)
|
||||
);
|
||||
let lineColor = PlatformColorEnum.doorGreen;
|
||||
if (stateData.psdCut) {
|
||||
lineColor = PlatformColorEnum.doorRed;
|
||||
}
|
||||
doorGraphic.lineStyle(platformConsts.lineWidth, new Color(lineColor));
|
||||
doorGraphic.moveTo(
|
||||
-platformConsts.width / 2 - platformConsts.lineWidth / 2,
|
||||
0
|
||||
@ -151,10 +149,7 @@ export class doorGraphic extends Container {
|
||||
0
|
||||
);
|
||||
//屏蔽门闭合
|
||||
doorCloseGraphic.lineStyle(
|
||||
platformConsts.lineWidth,
|
||||
new Color(PlatformColorEnum.doorBlue)
|
||||
);
|
||||
doorCloseGraphic.lineStyle(platformConsts.lineWidth, new Color(lineColor));
|
||||
doorCloseGraphic.moveTo(-platformConsts.doorOpenSpacing, 0);
|
||||
doorCloseGraphic.lineTo(platformConsts.doorOpenSpacing, 0);
|
||||
doorGraphic.position.set(
|
||||
@ -166,51 +161,127 @@ export class doorGraphic extends Container {
|
||||
-platformConsts.height / 2 - platformConsts.doorPlatformSpacing
|
||||
);
|
||||
}
|
||||
openDoor(): void {
|
||||
this.doorCloseGraphic.visible = false;
|
||||
}
|
||||
clear(): void {
|
||||
this.doorGraphic.clear();
|
||||
this.doorCloseGraphic.clear();
|
||||
}
|
||||
changeState(stateData: IPlatformState): void {
|
||||
if (stateData.psdOpen) {
|
||||
this.doorCloseGraphic.visible = false;
|
||||
} else {
|
||||
this.doorCloseGraphic.visible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
//子元素--字符
|
||||
class codeGraph extends Container {
|
||||
static Type = 'Code';
|
||||
character: VectorText = new VectorText(''); //站台旁字符H或P
|
||||
characterN: VectorText = new VectorText(''); //站台旁数字
|
||||
character: VectorText = new VectorText(''); //扣车H
|
||||
runTime: VectorText = new VectorText(''); //运行时间
|
||||
stopTime: VectorText = new VectorText(''); //停站时间
|
||||
circle: Graphics = new Graphics();
|
||||
constructor() {
|
||||
super();
|
||||
this.addChild(this.character);
|
||||
this.addChild(this.characterN);
|
||||
this.addChild(this.runTime);
|
||||
this.addChild(this.circle);
|
||||
this.addChild(this.stopTime);
|
||||
this.character.setVectorFontSize(platformConsts.besideFontSize);
|
||||
this.characterN.setVectorFontSize(platformConsts.besideFontSize);
|
||||
this.runTime.setVectorFontSize(platformConsts.besideFontSize);
|
||||
this.stopTime.setVectorFontSize(platformConsts.besideFontSize);
|
||||
}
|
||||
draw(): void {
|
||||
//扣车
|
||||
const character = this.character;
|
||||
character.text = 'H';
|
||||
character.anchor.set(0.5);
|
||||
character.position.set(
|
||||
-platformConsts.width / 2 -
|
||||
platformConsts.lineWidth / 2 -
|
||||
platformConsts.besideSpacing,
|
||||
0
|
||||
(platformConsts.besideSpacing * 2) / 3,
|
||||
(platformConsts.height * 3) / 4
|
||||
);
|
||||
character.style.fill = PlatformColorEnum.HCharYellow;
|
||||
const characterN = this.characterN;
|
||||
characterN.text = '9';
|
||||
characterN.anchor.set(0.5);
|
||||
characterN.position.set(
|
||||
character.style.fill = PlatformColorEnum.whiteNumbers;
|
||||
const circle = this.circle;
|
||||
circle.clear();
|
||||
circle.lineStyle(0.5, PlatformColorEnum.whiteCircle);
|
||||
circle.drawCircle(0, 0, platformConsts.circleRadius);
|
||||
circle.position.set(
|
||||
-platformConsts.width / 2 -
|
||||
platformConsts.lineWidth / 2 -
|
||||
platformConsts.besideSpacing,
|
||||
(-platformConsts.besideSpacing * 3) / 2
|
||||
(platformConsts.besideSpacing * 4) / 3,
|
||||
(platformConsts.height * 3) / 5
|
||||
);
|
||||
characterN.style.fill = PlatformColorEnum.HCharYellow;
|
||||
//区间运行等级状态
|
||||
const runTime = this.runTime;
|
||||
runTime.anchor.set(0.5);
|
||||
runTime.position.set(
|
||||
platformConsts.width / 2 +
|
||||
platformConsts.lineWidth / 2 +
|
||||
platformConsts.besideSpacing,
|
||||
-platformConsts.besideSpacing
|
||||
);
|
||||
runTime.style.fill = PlatformColorEnum.whiteNumbers;
|
||||
//停站时间
|
||||
const stopTime = this.stopTime;
|
||||
stopTime.anchor.set(0.5);
|
||||
stopTime.position.set(
|
||||
platformConsts.width / 2 +
|
||||
platformConsts.lineWidth / 2 +
|
||||
platformConsts.besideSpacing,
|
||||
platformConsts.besideSpacing
|
||||
);
|
||||
stopTime.style.fill = PlatformColorEnum.whiteNumbers;
|
||||
character.visible = false;
|
||||
circle.visible = false;
|
||||
runTime.visible = false;
|
||||
stopTime.visible = false;
|
||||
}
|
||||
clear(): void {
|
||||
this.character.destroy();
|
||||
}
|
||||
changeState(stateData: IPlatformState): void {
|
||||
if (
|
||||
stateData.upHold ||
|
||||
stateData.upOccHold ||
|
||||
stateData.downHold ||
|
||||
stateData.downOccHold
|
||||
) {
|
||||
this.character.text = 'H';
|
||||
this.character.visible = true;
|
||||
this.circle.visible = true;
|
||||
//上行扣车
|
||||
if (stateData.upHold) {
|
||||
this.character.style.fill = PlatformColorEnum.HCharYellow;
|
||||
}
|
||||
if (stateData.upOccHold) {
|
||||
this.character.style.fill = PlatformColorEnum.HCharWhite;
|
||||
}
|
||||
if (stateData.upHold && stateData.upOccHold) {
|
||||
this.character.style.fill = PlatformColorEnum.HCharRed;
|
||||
}
|
||||
//下行扣车
|
||||
if (stateData.downHold) {
|
||||
this.character.style.fill = PlatformColorEnum.HCharYellow;
|
||||
}
|
||||
if (stateData.downOccHold) {
|
||||
this.character.style.fill = PlatformColorEnum.HCharWhite;
|
||||
}
|
||||
if (stateData.downHold && stateData.downOccHold) {
|
||||
this.character.style.fill = PlatformColorEnum.HCharRed;
|
||||
}
|
||||
//运行等级
|
||||
if (stateData.nextSectionRunTime) {
|
||||
this.runTime.visible = true;
|
||||
this.runTime.text = stateData.nextSectionRunTime;
|
||||
}
|
||||
//停站时间
|
||||
if (stateData.stopTime) {
|
||||
this.stopTime.visible = true;
|
||||
this.stopTime.text = stateData.stopTime;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//子元素--站台旁菱形图标
|
||||
class besideGraphic extends Container {
|
||||
@ -225,12 +296,14 @@ class besideGraphic extends Container {
|
||||
const besideGraphic = this.besideGraphic;
|
||||
besideGraphic.clear();
|
||||
besideGraphic.lineStyle(1, new Color(PlatformColorEnum.lozengeRed));
|
||||
besideGraphic.beginFill(PlatformColorEnum.lozengeRed, 1);
|
||||
besideGraphic.drawRect(
|
||||
0,
|
||||
0,
|
||||
platformConsts.height / 4,
|
||||
platformConsts.height / 4
|
||||
);
|
||||
besideGraphic.endFill();
|
||||
const rect = new Rectangle(
|
||||
0,
|
||||
0,
|
||||
@ -240,23 +313,31 @@ class besideGraphic extends Container {
|
||||
besideGraphic.pivot = getRectangleCenter(rect);
|
||||
besideGraphic.rotation = Math.PI / 4;
|
||||
besideGraphic.position.set(
|
||||
-platformConsts.width / 2 -
|
||||
platformConsts.lineWidth / 2 -
|
||||
platformConsts.besideSpacing,
|
||||
0
|
||||
0,
|
||||
-platformConsts.height / 2 -
|
||||
platformConsts.doorPlatformSpacing -
|
||||
platformConsts.height / 3
|
||||
);
|
||||
besideGraphic.visible = false;
|
||||
}
|
||||
clear(): void {
|
||||
this.besideGraphic.clear();
|
||||
}
|
||||
changeState(stateData: IPlatformState): void {
|
||||
if (stateData.emergstop) {
|
||||
this.besideGraphic.visible = true;
|
||||
} else {
|
||||
this.besideGraphic.visible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class Platform extends JlGraphic {
|
||||
static Type = 'Platform';
|
||||
platformGraphic: childJlGraphic = new rectGraphic();
|
||||
doorGraphic: childJlGraphic = new doorGraphic();
|
||||
besideGraphic: childJlGraphic = new besideGraphic();
|
||||
codeGraph: childJlGraphic = new codeGraph();
|
||||
platformGraphic: rectGraphic = new rectGraphic();
|
||||
doorGraphic: doorGraphic = new doorGraphic();
|
||||
besideGraphic: besideGraphic = new besideGraphic();
|
||||
codeGraph: codeGraph = new codeGraph();
|
||||
constructor() {
|
||||
super(Platform.Type);
|
||||
this.addChild(this.platformGraphic);
|
||||
@ -274,9 +355,9 @@ export class Platform extends JlGraphic {
|
||||
doRepaint(): void {
|
||||
this.doorGraphic.clear();
|
||||
if (this.datas.hasdoor) {
|
||||
this.doorGraphic.draw();
|
||||
this.doorGraphic.draw(this.states);
|
||||
}
|
||||
this.platformGraphic.draw();
|
||||
this.platformGraphic.draw(this.states);
|
||||
this.besideGraphic.draw();
|
||||
this.codeGraph.draw();
|
||||
this.doorGraphic.position.set(0, 0);
|
||||
@ -289,24 +370,42 @@ export class Platform extends JlGraphic {
|
||||
platformConsts.height + platformConsts.doorPlatformSpacing * 2
|
||||
);
|
||||
this.besideGraphic.position.set(
|
||||
platformConsts.width +
|
||||
platformConsts.lineWidth +
|
||||
platformConsts.besideSpacing * 2,
|
||||
0
|
||||
0,
|
||||
platformConsts.height +
|
||||
platformConsts.doorPlatformSpacing * 2 +
|
||||
(platformConsts.height * 2) / 3
|
||||
);
|
||||
this.codeGraph.position.set(
|
||||
platformConsts.width +
|
||||
platformConsts.lineWidth +
|
||||
platformConsts.besideSpacing * 2,
|
||||
0
|
||||
this.codeGraph.children[0].position.set(
|
||||
platformConsts.width / 2 +
|
||||
platformConsts.lineWidth / 2 +
|
||||
(platformConsts.besideSpacing * 2) / 3,
|
||||
-(platformConsts.height * 3) / 4
|
||||
);
|
||||
this.codeGraph.children[1].position.set(
|
||||
-platformConsts.width / 2 -
|
||||
platformConsts.lineWidth / 2 -
|
||||
platformConsts.besideSpacing,
|
||||
(platformConsts.besideSpacing * 3) / 2
|
||||
platformConsts.besideSpacing
|
||||
);
|
||||
this.codeGraph.children[2].position.set(
|
||||
platformConsts.width / 2 +
|
||||
platformConsts.lineWidth / 2 +
|
||||
(platformConsts.besideSpacing * 4) / 3,
|
||||
(-platformConsts.height * 10) / 11
|
||||
);
|
||||
this.codeGraph.children[3].position.set(
|
||||
-platformConsts.width / 2 -
|
||||
platformConsts.lineWidth / 2 -
|
||||
platformConsts.besideSpacing,
|
||||
-platformConsts.besideSpacing
|
||||
);
|
||||
}
|
||||
this.changeState();
|
||||
}
|
||||
changeState(): void {
|
||||
this.doorGraphic.changeState(this.states);
|
||||
this.besideGraphic.changeState(this.states);
|
||||
this.codeGraph.changeState(this.states);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ import {
|
||||
PlatformTemplate,
|
||||
rectGraphic,
|
||||
doorGraphic,
|
||||
childJlGraphic,
|
||||
IPlatformState,
|
||||
} from './Platform';
|
||||
|
||||
export interface IPlatformDrawOptions {
|
||||
@ -25,8 +25,8 @@ export class PlatformDraw extends GraphicDrawAssistant<
|
||||
PlatformTemplate,
|
||||
IPlatformData
|
||||
> {
|
||||
platformGraphic: childJlGraphic = new rectGraphic();
|
||||
doorGraphic: childJlGraphic = new doorGraphic();
|
||||
platformGraphic: rectGraphic = new rectGraphic();
|
||||
doorGraphic: doorGraphic = new doorGraphic();
|
||||
|
||||
constructor(app: JlDrawApp, template: PlatformTemplate) {
|
||||
super(
|
||||
@ -42,8 +42,8 @@ export class PlatformDraw extends GraphicDrawAssistant<
|
||||
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.platformGraphic.draw();
|
||||
this.doorGraphic.draw();
|
||||
this.platformGraphic.draw(this.graphicTemplate.states as IPlatformState);
|
||||
this.doorGraphic.draw(this.graphicTemplate.states as IPlatformState);
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
|
||||
@ -11,6 +11,8 @@ import { RunLineName } from './RunLineName';
|
||||
import { PathLine } from '../pathLine/PathLine';
|
||||
import { PathLineDraw } from '../pathLine/PathLineDrawAssistant';
|
||||
import { getDrawApp } from 'src/drawApp';
|
||||
import { StationLine } from '../stationLine/StationLine';
|
||||
import { calculateDistanceFromPointToLine } from 'src/jl-graphic';
|
||||
|
||||
export interface IRunLineData extends GraphicData {
|
||||
get code(): string;
|
||||
@ -25,6 +27,8 @@ export interface IRunLineData extends GraphicData {
|
||||
set upPathLineId(v: string);
|
||||
get downPathLineId(): string;
|
||||
set downPathLineId(v: string);
|
||||
get containSta(): string[];
|
||||
set containSta(v: string[]);
|
||||
|
||||
clone(): IRunLineData;
|
||||
copyFrom(data: IRunLineData): void;
|
||||
@ -236,6 +240,27 @@ export class RunLine extends JlGraphic {
|
||||
}
|
||||
}
|
||||
}
|
||||
generateContainSta(): void {
|
||||
const app = getDrawApp();
|
||||
if (!app) return;
|
||||
const stations = app.queryStore.queryByType(StationLine.Type);
|
||||
const containSta: string[] = [];
|
||||
this.datas.points.forEach((p, index) => {
|
||||
if (index) {
|
||||
stations.forEach((station) => {
|
||||
const distance = calculateDistanceFromPointToLine(
|
||||
p,
|
||||
this.datas.points[index - 1],
|
||||
station.position
|
||||
);
|
||||
if (distance < 4) {
|
||||
containSta.push(station.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
this.datas.containSta = containSta;
|
||||
}
|
||||
}
|
||||
|
||||
export class RunLineTemplate extends JlGraphicTemplate<RunLine> {
|
||||
|
||||
@ -5,8 +5,9 @@ const lampConsts = {
|
||||
lampRadius: 8,
|
||||
logicModeLineWidth: 2,
|
||||
logicModeDistance: 5,
|
||||
lampDefaultColor: '0xff0000',
|
||||
logicModeColor: '0x000000',
|
||||
lampLineWidth: 1,
|
||||
lampLineColor: '0x3149c3',
|
||||
};
|
||||
|
||||
export class Lamp extends Container {
|
||||
@ -23,14 +24,24 @@ export class Lamp extends Container {
|
||||
paint(radiusX: number, radiusY: number) {
|
||||
this.radiusX = radiusX;
|
||||
this.radiusY = radiusY;
|
||||
this.createLamp(lampConsts.lampDefaultColor);
|
||||
this.createLamp();
|
||||
}
|
||||
createLamp(color: string) {
|
||||
createLamp(color?: string) {
|
||||
this.circleLamp.clear();
|
||||
this.circleLamp
|
||||
.beginFill(color, 1)
|
||||
.drawCircle(this.radiusX, this.radiusY, lampConsts.lampRadius)
|
||||
.endFill();
|
||||
this.circleLamp.lineStyle(
|
||||
lampConsts.lampLineWidth,
|
||||
lampConsts.lampLineColor
|
||||
);
|
||||
if (!color) {
|
||||
color = '0X' + this.getCanvas().backgroundColor.substring(1);
|
||||
}
|
||||
this.circleLamp.beginFill(color, 1);
|
||||
this.circleLamp.drawCircle(
|
||||
this.radiusX,
|
||||
this.radiusY,
|
||||
lampConsts.lampRadius
|
||||
);
|
||||
this.circleLamp.endFill();
|
||||
}
|
||||
createLogicMode() {
|
||||
this.logicMode
|
||||
|
||||
@ -8,7 +8,7 @@ import { Lamp } from './Lamp';
|
||||
import { ISignalState } from './Signal';
|
||||
|
||||
export enum LampEnum {
|
||||
lampPostColor = '0xc0c0c0',
|
||||
lampPostColor = '0x3149c3',
|
||||
redLamp = '0XFF0000',
|
||||
greenLamp = '0X00FF00',
|
||||
yellowLamp = '0XFFFF00',
|
||||
@ -39,12 +39,14 @@ export class LampMainBody extends JlGraphic {
|
||||
redFlashAnimation: GraphicAnimation | null = null;
|
||||
mirror = false;
|
||||
deltaTime = 0;
|
||||
states: ISignalState | null = null;
|
||||
|
||||
constructor() {
|
||||
super(LampMainBody.Type);
|
||||
}
|
||||
paint(lampNum: number, mirror: boolean) {
|
||||
paint(lampNum: number, mirror: boolean, states: ISignalState) {
|
||||
this.mirror = mirror;
|
||||
this.states = states;
|
||||
if (lampNum < 1) {
|
||||
throw new Error('信号机灯数量异常');
|
||||
}
|
||||
@ -66,6 +68,7 @@ export class LampMainBody extends JlGraphic {
|
||||
this.lamps = [];
|
||||
for (let i = 0; i < this.lampNum; i++) {
|
||||
const lamp = new Lamp();
|
||||
this.addChild(lamp);
|
||||
const radiusX =
|
||||
(1 + i * 2) * lampConsts.lampRadius + lampConsts.levelLampPostLength;
|
||||
let lrp = new Point(radiusX, 0);
|
||||
@ -73,12 +76,12 @@ export class LampMainBody extends JlGraphic {
|
||||
lrp = calculateMirrorPoint(new Point(0, 0), lrp);
|
||||
}
|
||||
lamp.paint(lrp.x, lrp.y);
|
||||
this.addChild(lamp);
|
||||
this.lamps.push(lamp);
|
||||
}
|
||||
this.chagneState(this.states);
|
||||
}
|
||||
doRepaint() {
|
||||
this.paint(this.lampNum, this.mirror);
|
||||
// this.paint(this.lampNum, this.mirror, this.states);
|
||||
}
|
||||
stopAnmiation() {
|
||||
const redFlashA = this.animation(anmiationNameConst.signaRedFlash);
|
||||
@ -110,13 +113,14 @@ export class LampMainBody extends JlGraphic {
|
||||
this.lamps.forEach((lamp) => lamp.logicModeClear());
|
||||
}
|
||||
if (states.redOpen) {
|
||||
this.lamps.forEach((lamp) => lamp.createLamp(LampEnum.redLamp));
|
||||
this.lamps[0].createLamp(LampEnum.redLamp);
|
||||
} else if (states.redFlash) {
|
||||
let redFlashA = this.animation(anmiationNameConst.signaRedFlash);
|
||||
if (!redFlashA) {
|
||||
redFlashA = this.createFlashAnmiation(
|
||||
anmiationNameConst.signaRedFlash,
|
||||
LampEnum.redLamp
|
||||
LampEnum.redLamp,
|
||||
0
|
||||
);
|
||||
}
|
||||
this.addAnimation(redFlashA);
|
||||
@ -128,7 +132,8 @@ export class LampMainBody extends JlGraphic {
|
||||
if (!greenFlashA) {
|
||||
greenFlashA = this.createFlashAnmiation(
|
||||
anmiationNameConst.signalGreenFlash,
|
||||
LampEnum.greenLamp
|
||||
LampEnum.greenLamp,
|
||||
1
|
||||
);
|
||||
}
|
||||
this.addAnimation(greenFlashA);
|
||||
@ -140,7 +145,8 @@ export class LampMainBody extends JlGraphic {
|
||||
if (!yellowFlashA) {
|
||||
yellowFlashA = this.createFlashAnmiation(
|
||||
anmiationNameConst.signalYellowFlash,
|
||||
LampEnum.yellowLamp
|
||||
LampEnum.yellowLamp,
|
||||
1
|
||||
);
|
||||
}
|
||||
this.addAnimation(yellowFlashA);
|
||||
@ -152,7 +158,8 @@ export class LampMainBody extends JlGraphic {
|
||||
if (!blueFlashA) {
|
||||
blueFlashA = this.createFlashAnmiation(
|
||||
anmiationNameConst.signalBlueFlash,
|
||||
LampEnum.blueLamp
|
||||
LampEnum.blueLamp,
|
||||
1
|
||||
);
|
||||
}
|
||||
this.addAnimation(blueFlashA);
|
||||
@ -164,14 +171,19 @@ export class LampMainBody extends JlGraphic {
|
||||
if (!whiteFlashA) {
|
||||
whiteFlashA = this.createFlashAnmiation(
|
||||
anmiationNameConst.signalWhiteFlash,
|
||||
LampEnum.whiteLamp
|
||||
LampEnum.whiteLamp,
|
||||
1
|
||||
);
|
||||
}
|
||||
this.addAnimation(whiteFlashA);
|
||||
whiteFlashA.resume();
|
||||
}
|
||||
}
|
||||
createFlashAnmiation(name: string, color: string): GraphicAnimation {
|
||||
createFlashAnmiation(
|
||||
name: string,
|
||||
color: string,
|
||||
lampIndex: number
|
||||
): GraphicAnimation {
|
||||
const bgColor = '0X' + this.getCanvas().backgroundColor.substring(1);
|
||||
const flashAnmiation = GraphicAnimation.init({
|
||||
name: name,
|
||||
@ -179,9 +191,7 @@ export class LampMainBody extends JlGraphic {
|
||||
this.deltaTime += dt;
|
||||
if (this.deltaTime > 60) {
|
||||
this.deltaTime = 0;
|
||||
this.lamps.forEach((lamp) => {
|
||||
lamp.createLamp(color);
|
||||
});
|
||||
this.lamps[lampIndex].createLamp(color);
|
||||
} else if (this.deltaTime > 30) {
|
||||
this.lamps.forEach((lamp) => {
|
||||
lamp.createLamp(bgColor);
|
||||
|
||||
@ -80,6 +80,7 @@ const signalConsts = {
|
||||
fleetModeRadius: 8,
|
||||
fleetModeLineWidth: 6,
|
||||
humanControlRadius: 8,
|
||||
codeOffset: 20,
|
||||
};
|
||||
export class Signal extends JlGraphic {
|
||||
static Type = 'signal';
|
||||
@ -91,10 +92,10 @@ export class Signal extends JlGraphic {
|
||||
|
||||
constructor() {
|
||||
super(Signal.Type);
|
||||
this.addChild(this.signalCode);
|
||||
this.addChild(this.humanControl);
|
||||
this.addChild(this.fleetMode);
|
||||
this.addChild(this.lampMainBody);
|
||||
this.addChild(this.signalCode);
|
||||
}
|
||||
|
||||
get datas(): ISignalData {
|
||||
@ -116,8 +117,8 @@ export class Signal extends JlGraphic {
|
||||
|
||||
paint(): void {
|
||||
const mirror = this.datas.mirror;
|
||||
this.lampMainBody.paint(signalConsts.lampNum, mirror);
|
||||
this.signalCode.paint(this.datas);
|
||||
this.lampMainBody.paint(signalConsts.lampNum, mirror, this.states);
|
||||
this.signalCode.paint(this.datas, this.states);
|
||||
const codeTransform = this.datas?.childTransforms?.find(
|
||||
(item) => item.name === 'signalCode'
|
||||
);
|
||||
@ -126,15 +127,24 @@ export class Signal extends JlGraphic {
|
||||
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.clear();
|
||||
this.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
|
||||
let lmp = new Point(
|
||||
this.lampMainBody.width + signalConsts.fleetModeLength,
|
||||
@ -156,7 +166,6 @@ export class Signal extends JlGraphic {
|
||||
}
|
||||
createHumanControl(): void {
|
||||
const mirror = this.datas.mirror;
|
||||
this.humanControl.clear();
|
||||
this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
|
||||
if (this.humanControl.drawRegularPolygon) {
|
||||
let hmp = new Point(-signalConsts.humanControlRadius, 0);
|
||||
@ -173,23 +182,6 @@ export class Signal extends JlGraphic {
|
||||
}
|
||||
this.humanControl.endFill();
|
||||
}
|
||||
createBlockedMode(): void {
|
||||
this.blockedMode.clear();
|
||||
}
|
||||
chagneState(): void {
|
||||
this.lampMainBody.chagneState(this.states);
|
||||
this.signalCode.chagneState(this.states);
|
||||
if (this.states.fleetMode) {
|
||||
this.createFleetMode();
|
||||
} else {
|
||||
this.fleetMode.clear();
|
||||
}
|
||||
if (this.states.autoRouteDisable) {
|
||||
this.createHumanControl();
|
||||
} else {
|
||||
this.humanControl.clear();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class SignalTemplate extends JlGraphicTemplate<Signal> {
|
||||
|
||||
@ -3,12 +3,11 @@ import { VectorText } from 'src/jl-graphic';
|
||||
import { ISignalData, ISignalState } from './Signal';
|
||||
|
||||
export enum CodeColorEnum {
|
||||
defaultCodeColor = '0X000000',
|
||||
defaultCodeColor = '0XFFFFFF',
|
||||
}
|
||||
|
||||
const signalCodeConsts = {
|
||||
codeFontSize: 11,
|
||||
nameOffsetY: 20,
|
||||
blockedLineWidth: 1,
|
||||
blockedColor: '0XFF0000',
|
||||
};
|
||||
@ -22,12 +21,16 @@ export class SignalCode extends Container {
|
||||
this.addChild(this.blockedMode);
|
||||
this.addChild(this.codeGraph);
|
||||
}
|
||||
paint(datas: ISignalData) {
|
||||
paint(datas: ISignalData, states: ISignalState) {
|
||||
this.codeGraph.text = datas?.code || '信号机编号';
|
||||
this.codeGraph.style.fill = CodeColorEnum.defaultCodeColor;
|
||||
this.codeGraph.setVectorFontSize(signalCodeConsts.codeFontSize);
|
||||
this.codeGraph.anchor.set(0.5);
|
||||
this.codeGraph.position.set(0, signalCodeConsts.nameOffsetY);
|
||||
this.codeGraph.position.set(0, 0);
|
||||
this.blockedMode.clear();
|
||||
if (states.blocked) {
|
||||
this.createBlockedMode();
|
||||
}
|
||||
}
|
||||
createBlockedMode() {
|
||||
const codeRect = this.codeGraph.getBounds();
|
||||
@ -44,11 +47,4 @@ export class SignalCode extends Container {
|
||||
codeRect.height
|
||||
);
|
||||
}
|
||||
chagneState(states: ISignalState) {
|
||||
if (states.blocked) {
|
||||
this.createBlockedMode();
|
||||
} else {
|
||||
this.blockedMode.clear();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,6 +84,32 @@ function buildAbsorbablePositions(signal: Signal): AbsorbablePosition[] {
|
||||
|
||||
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';
|
||||
@ -104,6 +130,7 @@ export class signalInteraction extends GraphicInteractionPlugin<Signal> {
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
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;
|
||||
@ -116,6 +143,7 @@ export class signalInteraction extends GraphicInteractionPlugin<Signal> {
|
||||
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;
|
||||
@ -129,4 +157,11 @@ export class signalInteraction extends GraphicInteractionPlugin<Signal> {
|
||||
absorbablePositions: buildAbsorbablePositions(signal),
|
||||
});
|
||||
}
|
||||
codetransformstart(e: GraphicTransformEvent) {
|
||||
const target = e.target as DisplayObject;
|
||||
const signal = target.getGraphic() as Signal;
|
||||
signal.getGraphicApp().setOptions({
|
||||
absorbablePositions: buildCodeAbsorbablePositions(signal),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,126 +22,109 @@ export interface IStationData extends GraphicData {
|
||||
}
|
||||
|
||||
export interface IStationState extends GraphicState {
|
||||
get ipStaStusTermMode1(): boolean;
|
||||
set ipStaStusTermMode1(v: boolean);
|
||||
get ipStaStusTermMode2(): boolean;
|
||||
set ipStaStusTermMode2(v: boolean);
|
||||
get ipStaStusTermMode3(): boolean;
|
||||
set ipStaStusTermMode3(v: boolean);
|
||||
get ipStaStusTermMode4(): boolean;
|
||||
set ipStaStusTermMode4(v: boolean);
|
||||
get ipStaStusTermMode5(): boolean;
|
||||
set ipStaStusTermMode5(v: boolean);
|
||||
get ipStaStusTermMode6(): boolean;
|
||||
set ipStaStusTermMode6(v: boolean);
|
||||
get ipStaStusExpectTermMode1(): boolean;
|
||||
set ipStaStusExpectTermMode1(v: boolean);
|
||||
get ipStaStusExpectTermMode2(): boolean;
|
||||
set ipStaStusExpectTermMode2(v: boolean);
|
||||
get ipStaStusExpectTermMode3(): boolean;
|
||||
set ipStaStusExpectTermMode3(v: boolean);
|
||||
get ipStaStusExpectTermMode4(): boolean;
|
||||
set ipStaStusExpectTermMode4(v: boolean);
|
||||
get ipStaStusExpectTermMode5(): boolean;
|
||||
set ipStaStusExpectTermMode5(v: boolean);
|
||||
get ipStaStusExpectTermMode6(): boolean;
|
||||
set ipStaStusExpectTermMode6(v: boolean);
|
||||
get ipStaStusInCycle1(): boolean;
|
||||
set ipStaStusInCycle1(v: boolean);
|
||||
get ipStaStusInCycle2(): boolean;
|
||||
set ipStaStusInCycle2(v: boolean);
|
||||
get ipStaStusInCycle3(): boolean;
|
||||
set ipStaStusInCycle3(v: boolean);
|
||||
get ipStaStusInCycle4(): boolean;
|
||||
set ipStaStusInCycle4(v: boolean);
|
||||
get ipStaStusInCycle5(): boolean;
|
||||
set ipStaStusInCycle5(v: boolean);
|
||||
get ipStaStusInCycle6(): boolean;
|
||||
set ipStaStusInCycle6(v: boolean);
|
||||
get ipStaStusExpectCycle1(): boolean;
|
||||
set ipStaStusExpectCycle1(v: boolean);
|
||||
get ipStaStusExpectCycle2(): boolean;
|
||||
set ipStaStusExpectCycle2(v: boolean);
|
||||
get ipStaStusExpectCycle3(): boolean;
|
||||
set ipStaStusExpectCycle3(v: boolean);
|
||||
get ipStaStusExpectCycle4(): boolean;
|
||||
set ipStaStusExpectCycle4(v: boolean);
|
||||
get ipStaStusExpectCycle5(): boolean;
|
||||
set ipStaStusExpectCycle5(v: boolean);
|
||||
get ipStaStusExpectCycle6(): boolean;
|
||||
set ipStaStusExpectCycle6(v: boolean);
|
||||
get ipRtuStusDown(): boolean;
|
||||
set ipRtuStusDown(v: boolean);
|
||||
get ipRtuStusInLocalCtrl(): boolean;
|
||||
set ipRtuStusInLocalCtrl(v: boolean);
|
||||
get ipRtuStusInCentralCtrl(): boolean;
|
||||
set ipRtuStusInCentralCtrl(v: boolean);
|
||||
get ipRtuStusInEmergencyCtrl(): boolean;
|
||||
set ipRtuStusInEmergencyCtrl(v: boolean);
|
||||
}
|
||||
|
||||
const stationConsts = {
|
||||
radius: 5,
|
||||
radius: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: '0xff0000',
|
||||
fillColor: '0xff0000',
|
||||
transferRadius: 3.5,
|
||||
transferWidth: 0.2,
|
||||
transferColor: '0x0fe81f',
|
||||
circleColorGrey: '0x808080',
|
||||
circleColorBlue: '0x08F80D',
|
||||
circleColorYellow: '0xFFFA0C',
|
||||
codeColor: '0xF48815',
|
||||
codeFontSize: 22,
|
||||
codeControlFontSize: 18,
|
||||
codeOffsetX: -60,
|
||||
codeOffsetY: -25,
|
||||
circleOffsetY: -50,
|
||||
circleBetweenOffset: 60,
|
||||
kilometerCodeColor: '0x0fe81f',
|
||||
kilometerCodeFontSize: 11,
|
||||
codeControlFontSize: 12,
|
||||
codeOffsetY: 30,
|
||||
circleOffsetY: 20,
|
||||
circleBetweenOffset: 40,
|
||||
kilometerCodeColor: '0xFFFFFF',
|
||||
kilometerCodeFontSize: 8,
|
||||
kilometerCodeOffsetY: -25,
|
||||
};
|
||||
class constrolGraphic extends Container {
|
||||
circleA: Graphics = new Graphics();
|
||||
codeGraphA: VectorText = new VectorText(''); //控制名--紧急站控
|
||||
codeGraphA: VectorText = new VectorText(''); //控制名--站控
|
||||
circleB: Graphics = new Graphics();
|
||||
codeGraphB: VectorText = new VectorText(''); //控制名--遥控
|
||||
circleC: Graphics = new Graphics();
|
||||
codeGraphC: VectorText = new VectorText(''); //控制名--站控
|
||||
codeGraphB: VectorText = new VectorText(''); //控制名--中控
|
||||
arrow: Graphics = new Graphics();
|
||||
inArrow: Graphics = new Graphics();
|
||||
constructor() {
|
||||
super();
|
||||
this.addChild(this.circleA);
|
||||
this.addChild(this.codeGraphA);
|
||||
this.addChild(this.circleB);
|
||||
this.addChild(this.codeGraphB);
|
||||
this.addChild(this.circleC);
|
||||
this.addChild(this.codeGraphC);
|
||||
this.addChild(this.arrow);
|
||||
this.addChild(this.inArrow);
|
||||
this.codeGraphA.setVectorFontSize(stationConsts.codeFontSize);
|
||||
this.codeGraphB.setVectorFontSize(stationConsts.codeFontSize);
|
||||
}
|
||||
draw(): void {
|
||||
this.drawCircleCode(this.circleA, this.codeGraphA, '站控');
|
||||
draw(states: IStationState): void {
|
||||
let StationControlFillColor = stationConsts.circleColorGrey;
|
||||
let centralControlFillColor = stationConsts.circleColorBlue;
|
||||
let inArrowFillColor = stationConsts.circleColorGrey;
|
||||
if (states.ipRtuStusInLocalCtrl) {
|
||||
StationControlFillColor = stationConsts.circleColorYellow;
|
||||
centralControlFillColor = stationConsts.circleColorGrey;
|
||||
if (!states.ipRtuStusDown) {
|
||||
inArrowFillColor = stationConsts.circleColorBlue;
|
||||
}
|
||||
}
|
||||
this.drawCircleCode(
|
||||
this.circleA,
|
||||
this.codeGraphA,
|
||||
'站控',
|
||||
StationControlFillColor
|
||||
);
|
||||
this.circleA.position.set(
|
||||
stationConsts.codeOffsetX,
|
||||
stationConsts.circleBetweenOffset / 2,
|
||||
stationConsts.circleOffsetY
|
||||
);
|
||||
this.codeGraphA.position.set(
|
||||
stationConsts.codeOffsetX,
|
||||
stationConsts.circleBetweenOffset / 2,
|
||||
stationConsts.codeOffsetY
|
||||
);
|
||||
this.drawCircleCode(this.circleB, this.codeGraphB, '遥控', '0x0fe81f');
|
||||
this.drawCircleCode(
|
||||
this.circleB,
|
||||
this.codeGraphB,
|
||||
'中控',
|
||||
centralControlFillColor
|
||||
);
|
||||
this.circleB.position.set(
|
||||
stationConsts.codeOffsetX - stationConsts.circleBetweenOffset,
|
||||
-stationConsts.circleBetweenOffset / 2,
|
||||
stationConsts.circleOffsetY
|
||||
);
|
||||
this.codeGraphB.position.set(
|
||||
stationConsts.codeOffsetX - stationConsts.circleBetweenOffset,
|
||||
stationConsts.codeOffsetY
|
||||
);
|
||||
this.drawCircleCode(this.circleC, this.codeGraphC, '紧急站控');
|
||||
this.circleC.position.set(
|
||||
stationConsts.codeOffsetX - stationConsts.circleBetweenOffset * 2,
|
||||
stationConsts.circleOffsetY
|
||||
);
|
||||
this.codeGraphC.position.set(
|
||||
stationConsts.codeOffsetX - stationConsts.circleBetweenOffset * 2,
|
||||
-stationConsts.circleBetweenOffset / 2,
|
||||
stationConsts.codeOffsetY
|
||||
);
|
||||
const arrow = this.arrow;
|
||||
arrow.clear();
|
||||
arrow.lineStyle(stationConsts.borderWidth, new Color('0xFFFFFF'));
|
||||
const points = [0, 0, 2, 2, 2, 1, 14, 1, 14, -1, 2, -1, 2, -2];
|
||||
arrow.beginFill('0xFFFFFF');
|
||||
arrow.drawPolygon(points);
|
||||
arrow.endFill();
|
||||
arrow.scale.set(1.1, 1.1);
|
||||
arrow.position.set(-7, stationConsts.circleOffsetY);
|
||||
const inArrow = this.inArrow;
|
||||
inArrow.beginFill(inArrowFillColor);
|
||||
inArrow.drawPolygon(points);
|
||||
inArrow.endFill();
|
||||
inArrow.position.set(-6.5, stationConsts.circleOffsetY);
|
||||
}
|
||||
drawCircleCode(
|
||||
circle: Graphics,
|
||||
codeGraph: VectorText,
|
||||
code: string,
|
||||
fillcolor = stationConsts.fillColor
|
||||
fillcolor: string
|
||||
): void {
|
||||
circle.clear();
|
||||
circle.lineStyle(stationConsts.borderWidth, new Color(fillcolor));
|
||||
@ -149,17 +132,17 @@ class constrolGraphic extends Container {
|
||||
circle.drawCircle(0, 0, stationConsts.radius);
|
||||
circle.endFill;
|
||||
codeGraph.text = code;
|
||||
codeGraph.style.fill = stationConsts.codeColor;
|
||||
codeGraph.style.fill = fillcolor;
|
||||
codeGraph.setVectorFontSize(stationConsts.codeControlFontSize);
|
||||
codeGraph.anchor.set(0.5);
|
||||
}
|
||||
clear(): void {
|
||||
this.circleA.clear();
|
||||
this.circleB.clear();
|
||||
this.circleC.clear();
|
||||
this.codeGraphA.text = '';
|
||||
this.codeGraphB.text = '';
|
||||
this.codeGraphC.text = '';
|
||||
this.arrow.clear();
|
||||
this.inArrow.clear();
|
||||
}
|
||||
}
|
||||
export class Station extends JlGraphic {
|
||||
@ -215,7 +198,7 @@ export class Station extends JlGraphic {
|
||||
});
|
||||
}
|
||||
if (this.datas.hasControl) {
|
||||
controlGraphic.draw();
|
||||
controlGraphic.draw(this.states);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ export const TrainWindowConsts = {
|
||||
height: 15,
|
||||
lineWidth: 2,
|
||||
lineColor: '0x0fe81f',
|
||||
offsetSection: 60,
|
||||
offsetSection: 120,
|
||||
};
|
||||
|
||||
export class TrainWindow extends JlGraphic {
|
||||
|
||||
@ -94,20 +94,8 @@ export class TrainWindowDraw extends GraphicDrawAssistant<
|
||||
}
|
||||
this.storeGraphic(...trainWindows);
|
||||
}
|
||||
oneGenerates() {
|
||||
oneGenerates(height: Point) {
|
||||
const sections = this.app.queryStore.queryByType<Section>(Section.Type);
|
||||
const sectionSelect = this.app.selectedGraphics[0] as Section;
|
||||
let height = 0;
|
||||
if (sections.length && sectionSelect !== undefined) {
|
||||
if (sectionSelect.datas.transform.position.y == 0) {
|
||||
height = sectionSelect.datas.points[0].y + 5;
|
||||
} else {
|
||||
height =
|
||||
sectionSelect.datas.points[0].y +
|
||||
sectionSelect.datas.transform.position.y +
|
||||
5;
|
||||
}
|
||||
}
|
||||
const trainWindowAll = this.app.queryStore.queryByType<TrainWindow>(
|
||||
TrainWindow.Type
|
||||
);
|
||||
@ -120,7 +108,7 @@ export class TrainWindowDraw extends GraphicDrawAssistant<
|
||||
ps.push(new Point(point.x + transPos.x, point.y + transPos.y));
|
||||
});
|
||||
let direction = 1;
|
||||
if (ps[0].y > height) {
|
||||
if (ps[0].y > height.y) {
|
||||
direction = -1;
|
||||
}
|
||||
for (let i = 0; i < ps.length - 1; i++) {
|
||||
@ -206,15 +194,15 @@ export class TrainWindowInteraction extends GraphicInteractionPlugin<TrainWindow
|
||||
g.scalable = true;
|
||||
g.rotatable = true;
|
||||
g.rectGraphic.hitArea = new RectGraphicHitArea(g);
|
||||
g.on('selected', this.onSelected, this);
|
||||
g.on('transformstart', this.move, this);
|
||||
}
|
||||
unbind(g: TrainWindow): void {
|
||||
g.eventMode = 'none';
|
||||
g.scalable = false;
|
||||
g.rotatable = false;
|
||||
g.off('selected', this.onSelected, this);
|
||||
g.off('selected', this.move, this);
|
||||
}
|
||||
onSelected(): void {
|
||||
move(): void {
|
||||
const trainWindow = this.app.selectedGraphics[0] as TrainWindow;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(trainWindow),
|
||||
|
||||
71
src/graphics/trainWindow/oneClickDrawAssistant.ts
Normal file
71
src/graphics/trainWindow/oneClickDrawAssistant.ts
Normal file
@ -0,0 +1,71 @@
|
||||
import { Color, FederatedPointerEvent, Graphics, Point } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
GraphicDrawAssistant,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
} from 'src/jl-graphic';
|
||||
import { TrainWindow } from './TrainWindow';
|
||||
import { TrainWindowDraw } from './TrainWindowDrawAssistant';
|
||||
|
||||
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: JlDrawApp, 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 {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
const trainWindowDraw = this.app.getDrawAssistant(
|
||||
TrainWindow.Type
|
||||
) as TrainWindowDraw;
|
||||
trainWindowDraw.oneGenerates(this.toCanvasCoordinates(e.global));
|
||||
this.finish();
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
prepareData(): boolean {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -177,8 +177,7 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
import { errorNotify, successNotify } from 'src/utils/CommonNotify';
|
||||
import { saveAsDraft } from 'src/api/DraftApi';
|
||||
import { ApiError } from 'src/boot/axios';
|
||||
import { TrainWindowDraw } from 'src/graphics/trainWindow/TrainWindowDrawAssistant';
|
||||
import { TrainWindow } from 'src/graphics/trainWindow/TrainWindow';
|
||||
import { OneClickGenerate } from 'src/graphics/trainWindow/oneClickDrawAssistant';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -304,10 +303,7 @@ function buildRelations() {
|
||||
}
|
||||
|
||||
function oneClickGeneration() {
|
||||
const trainWindowDraw = drawStore
|
||||
.getDrawApp()
|
||||
.getDrawAssistant(TrainWindow.Type) as TrainWindowDraw;
|
||||
trainWindowDraw.oneGenerates();
|
||||
drawStore.getDrawApp().interactionPlugin(OneClickGenerate.Type).resume();
|
||||
}
|
||||
|
||||
function backConfirm() {
|
||||
|
||||
@ -30,13 +30,14 @@
|
||||
</q-header>
|
||||
|
||||
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
|
||||
<q-resize-observer @resize="onLeftResize" />
|
||||
<sys-menu></sys-menu>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<q-scroll-area :style="{ height: scrollHeight + 'px' }">
|
||||
<router-view :sizeHeight="scrollHeight" />
|
||||
<router-view :sizeHeight="scrollHeight" :sizeWidth="scrollWidth" />
|
||||
</q-scroll-area>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
@ -50,14 +51,24 @@ const leftDrawerOpen = ref(false);
|
||||
|
||||
function toggleLeftDrawer() {
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value;
|
||||
onResize();
|
||||
}
|
||||
const scrollHeight = ref(100);
|
||||
const scrollWidth = ref(100);
|
||||
function onResize() {
|
||||
scrollHeight.value = window.innerHeight - headerSize.height;
|
||||
scrollWidth.value =
|
||||
window.innerWidth - (leftDrawerOpen.value ? leftDrawerSize.width : 0);
|
||||
}
|
||||
const headerSize = reactive({} as { width: number; height: number });
|
||||
function onHeaderResize(size: { width: number; height: number }) {
|
||||
headerSize.width = size.width;
|
||||
headerSize.height = size.height;
|
||||
}
|
||||
|
||||
const leftDrawerSize = reactive({} as { width: number; height: number });
|
||||
function onLeftResize(size: { width: number; height: number }) {
|
||||
leftDrawerSize.width = size.width;
|
||||
leftDrawerSize.height = size.height;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -112,6 +112,7 @@
|
||||
:rules="[(val) => val.length > 0 || '请输入名称！']"
|
||||
/>
|
||||
<q-select
|
||||
v-if="publishForm.type == 'Line'"
|
||||
v-model="publishForm.lineId"
|
||||
:options="lineOptions"
|
||||
emit-value
|
||||
@ -299,6 +300,7 @@ const publishForm = reactive({
|
||||
draftName: '',
|
||||
pubName: '',
|
||||
lineId: '',
|
||||
type: 'Line',
|
||||
});
|
||||
function prePublish(row: any) {
|
||||
publishFormShow.value = true;
|
||||
@ -306,17 +308,21 @@ function prePublish(row: any) {
|
||||
publishForm.draftName = row.name;
|
||||
publishForm.pubName = row.name;
|
||||
publishForm.lineId = '';
|
||||
publishForm.type = row.type || 'Line';
|
||||
}
|
||||
|
||||
async function publishGraphics() {
|
||||
pubForm.value?.validate().then(async (res) => {
|
||||
if (res) {
|
||||
try {
|
||||
await publishDraft({
|
||||
const params: { draftingId: number; name: string; lineId?: number } = {
|
||||
draftingId: +publishForm.id,
|
||||
name: publishForm.pubName,
|
||||
lineId: +publishForm.lineId,
|
||||
});
|
||||
};
|
||||
if (publishForm.type == 'Line') {
|
||||
params.lineId = +publishForm.lineId;
|
||||
}
|
||||
await publishDraft(params);
|
||||
publishFormShow.value = false;
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
|
||||
56
src/pages/MonitorPage.vue
Normal file
56
src/pages/MonitorPage.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<q-page class="row items-center justify-evenly">
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<div id="line-app-container"></div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch } from 'vue';
|
||||
import { useLineNetStore } from 'src/stores/line-net-store';
|
||||
import { loadLineNetDatas, getLineNetApp } from 'src/drawApp/lineNetApp';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
sizeHeight: number;
|
||||
sizeWidth: number;
|
||||
}>(),
|
||||
{ sizeHeight: 500, sizeWidth: 500 }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.sizeHeight,
|
||||
() => {
|
||||
onResize();
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.sizeWidth,
|
||||
() => {
|
||||
onResize();
|
||||
}
|
||||
);
|
||||
|
||||
const lineNetStore = useLineNetStore();
|
||||
|
||||
function onResize() {
|
||||
const dom = document.getElementById('line-app-container');
|
||||
if (dom) {
|
||||
dom.style.width = props.sizeWidth + 'px';
|
||||
dom.style.height = props.sizeHeight + 'px';
|
||||
}
|
||||
const lineNetApp = getLineNetApp();
|
||||
if (lineNetApp) {
|
||||
lineNetApp.onDomResize(props.sizeWidth, props.sizeHeight - 32);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('line-app-container');
|
||||
if (dom) {
|
||||
const lineApp = lineNetStore.initLineNetApp(dom);
|
||||
loadLineNetDatas(lineApp);
|
||||
onResize();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -4,6 +4,7 @@ const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
redirect: '/monitor',
|
||||
component: () => import('layouts/MainLayout.vue'),
|
||||
children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
|
||||
},
|
||||
@ -66,6 +67,12 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'linemap',
|
||||
component: () => import('layouts/LineLayout.vue'),
|
||||
},
|
||||
{
|
||||
path: '/monitor',
|
||||
name: 'monitor',
|
||||
component: () => import('layouts/MainLayout.vue'),
|
||||
children: [{ path: '', component: () => import('pages/MonitorPage.vue') }],
|
||||
},
|
||||
|
||||
// Always leave this as last one,
|
||||
// but you can also remove it
|
||||
|
||||
@ -9,7 +9,6 @@ import {
|
||||
export const useLineNetStore = defineStore('lineNet', {
|
||||
state: () => ({
|
||||
selectedGraphics: null as JlGraphic[] | null,
|
||||
lineNetId: null as number | null,
|
||||
lineNetName: null as string | null,
|
||||
}),
|
||||
getters: {
|
||||
@ -44,9 +43,6 @@ export const useLineNetStore = defineStore('lineNet', {
|
||||
this.selectedGraphics = null;
|
||||
destroyLineNetApp();
|
||||
},
|
||||
setLineNetId(id: number | null) {
|
||||
this.lineNetId = id;
|
||||
},
|
||||
setLineNetName(name: string | null) {
|
||||
this.lineNetName = name;
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user