Merge branch 'master' of git.code.tencent.com:xian-ncc-da/xian-ncc-da-client

src/api/PublishApi.ts

@@ -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;
+}

src/components/SysMenu.vue

@@ -76,5 +76,10 @@ const list = reactive([
       },
     ],
   },
+  {
+    path: '/monitor',
+    label: '监控',
+    icon: 'computer',
+  },
 ]);
 </script>

src/components/draw-app/properties/RunLineProperty.vue

@@ -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>

src/configs/UrlManage.ts

@@ -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';
 }
 

src/drawApp/graphics/PlatformInteraction.ts

@@ -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 = {
+const removeSkipStopConfig: MenuItemOptions = {
-  name: '设置跳停',
+  name: '取消跳停',
 };
 const dockTimeConfig: MenuItemOptions = {
   name: '设置停站时间',
@@ -222,10 +221,10 @@ const PlatformOperateMenu: ContextMenu = ContextMenu.init({
   groups: [
     {
       items: [
-        arrestCarConfig,
+        holdConfig,
-        removeArrestCarConfig,
+        removeHoldrConfig,
-        earlyDepartureConfig,
+        skipStopConfig,
-        platformMessadeConfig,
+        removeSkipStopConfig,
       ],
     },
   ],
@@ -236,13 +235,13 @@ const dispatchPlatformOperateMenu: ContextMenu = ContextMenu.init({
   groups: [
     {
       items: [
-        arrestCarConfig,
+        holdConfig,
-        removeArrestCarConfig,
+        removeHoldrConfig,
-        batchArrestCarConfig,
+        batchHoldConfig,
-        removeBatchArrestCarConfig,
+        removeBatchHoldConfig,
         earlyDepartureConfig,
-        jumpStopConfig,
+        skipStopConfig,
-        removeJumpStopConfig,
+        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 = () => {
+    holdConfig.handler = () => {
-      platform.states.close = true;
+      platform.states.upHold = true;
-      platform.changeState();
+      platform.states.upOccHold = true;
+      platform.doRepaint();
     };
-    removeArrestCarConfig.handler = () => {
+    removeHoldrConfig.handler = () => {
-      platform.states.close = false;
+      platform.states.upHold = false;
-      platform.changeState();
+      platform.states.upOccHold = false;
+      platform.doRepaint();
     };
-    earlyDepartureConfig.handler = () => {
+    skipStopConfig.handler = () => {
-      console.log(2222);
+      platform.states.upSkipstop = true;
+      platform.doRepaint();
     };
-    platformMessadeConfig.handler = () => {
+    removeSkipStopConfig.handler = () => {
-      console.log(2222);
+      platform.states.upSkipstop = false;
+      platform.doRepaint();
     };
 
     PlatformOperateMenu.open(e.global);

src/drawApp/graphics/RunLineInteraction.ts

@@ -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());
   }

src/drawApp/graphics/StationInteraction.ts

@@ -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 {
+  get ipRtuStusDown(): boolean {
-    return this.states.ipStaStusTermMode1;
+    return this.states.ipRtuStusDown;
   }
-  set ipStaStusTermMode1(v: boolean) {
+  set ipRtuStusDown(v: boolean) {
-    this.states.ipStaStusTermMode1 = v;
+    this.states.ipRtuStusDown = v;
   }
-  get ipStaStusTermMode2(): boolean {
+  get ipRtuStusInLocalCtrl(): boolean {
-    return this.states.ipStaStusTermMode2;
+    return this.states.ipRtuStusInLocalCtrl;
   }
-  set ipStaStusTermMode2(v: boolean) {
+  set ipRtuStusInLocalCtrl(v: boolean) {
-    this.states.ipStaStusTermMode2 = v;
+    this.states.ipRtuStusInLocalCtrl = v;
   }
-  get ipStaStusTermMode3(): boolean {
+  get ipRtuStusInCentralCtrl(): boolean {
-    return this.states.ipStaStusTermMode3;
+    return this.states.ipRtuStusInCentralCtrl;
   }
-  set ipStaStusTermMode3(v: boolean) {
+  set ipRtuStusInCentralCtrl(v: boolean) {
-    this.states.ipStaStusTermMode3 = v;
+    this.states.ipRtuStusInCentralCtrl = v;
   }
-  get ipStaStusTermMode4(): boolean {
+  get ipRtuStusInEmergencyCtrl(): boolean {
-    return this.states.ipStaStusTermMode4;
+    return this.states.ipRtuStusInEmergencyCtrl;
   }
-  set ipStaStusTermMode4(v: boolean) {
+  set ipRtuStusInEmergencyCtrl(v: boolean) {
-    this.states.ipStaStusTermMode4 = v;
+    this.states.ipRtuStusInEmergencyCtrl = v;
   }
-  get ipStaStusTermMode5(): boolean {
+  get states(): state.Rtu {
-    return this.states.ipStaStusTermMode5;
+    return this.getState<state.Rtu>();
-  }
-  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>();
   }
 
   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 = () => {

src/drawApp/index.ts

@@ -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 {

src/drawApp/lineNetApp.ts

@@ -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;
+  const { proto: base64, name: lineNetName } = await getPublishLineNet();
-  if (!id) {
-    return;
-  }
-  const { proto: base64, name: lineNetName } = await getPublishMapInfoById(id);
   lineNetStore.setLineNetName(lineNetName);
   if (base64) {
     const storage = graphicData.RtssGraphicStorage.deserialize(

src/graphics/platform/Platform.ts

@@ -56,34 +56,31 @@ export interface IPlatformState extends GraphicState {
 
 //站台颜色
 export enum PlatformColorEnum {
-  blue = '0x0fe81f', //站台的颜色
+  grey = '0x7F7F7F', //站台没有列车停站
-  lightBlue = '0x55d15d',
+  yellow = '0xfbff00', //列车在站台停站
-  yellow = '0xfbff00',
+  blue = '0xC0C0FE', //列车在站台跳停
-  white = '0xffffff',
   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(
+    let fillColor = PlatformColorEnum.grey;
-      platformConsts.lineWidth,
+    if (state.trainberth) {
-      new Color(PlatformColorEnum.yellow)
+      fillColor = PlatformColorEnum.yellow;
-    );
+    }
-    rectGraphic.beginFill(PlatformColorEnum.yellow, 1);
+    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(
+    let lineColor = PlatformColorEnum.doorGreen;
-      platformConsts.lineWidth,
+    if (stateData.psdCut) {
-      new Color(PlatformColorEnum.doorBlue)
+      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(
+    doorCloseGraphic.lineStyle(platformConsts.lineWidth, new Color(lineColor));
-      platformConsts.lineWidth,
-      new Color(PlatformColorEnum.doorBlue)
-    );
     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
+  character: VectorText = new VectorText(''); //扣车H
-  characterN: VectorText = new VectorText(''); //站台旁数字
+  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,
+        (platformConsts.besideSpacing * 2) / 3,
-      0
+      (platformConsts.height * 3) / 4
     );
-    character.style.fill = PlatformColorEnum.HCharYellow;
+    character.style.fill = PlatformColorEnum.whiteNumbers;
-    const characterN = this.characterN;
+    const circle = this.circle;
-    characterN.text = '9';
+    circle.clear();
-    characterN.anchor.set(0.5);
+    circle.lineStyle(0.5, PlatformColorEnum.whiteCircle);
-    characterN.position.set(
+    circle.drawCircle(0, 0, platformConsts.circleRadius);
+    circle.position.set(
       -platformConsts.width / 2 -
         platformConsts.lineWidth / 2 -
-        platformConsts.besideSpacing,
+        (platformConsts.besideSpacing * 4) / 3,
-      (-platformConsts.besideSpacing * 3) / 2
+      (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 -
+      0,
-        platformConsts.lineWidth / 2 -
+      -platformConsts.height / 2 -
-        platformConsts.besideSpacing,
+        platformConsts.doorPlatformSpacing -
-      0
+        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();
+  platformGraphic: rectGraphic = new rectGraphic();
-  doorGraphic: childJlGraphic = new doorGraphic();
+  doorGraphic: doorGraphic = new doorGraphic();
-  besideGraphic: childJlGraphic = new besideGraphic();
+  besideGraphic: besideGraphic = new besideGraphic();
-  codeGraph: childJlGraphic = new codeGraph();
+  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 +
+        0,
-          platformConsts.lineWidth +
+        platformConsts.height +
-          platformConsts.besideSpacing * 2,
+          platformConsts.doorPlatformSpacing * 2 +
-        0
+          (platformConsts.height * 2) / 3
       );
-      this.codeGraph.position.set(
+      this.codeGraph.children[0].position.set(
-        platformConsts.width +
+        platformConsts.width / 2 +
-          platformConsts.lineWidth +
+          platformConsts.lineWidth / 2 +
-          platformConsts.besideSpacing * 2,
+          (platformConsts.besideSpacing * 2) / 3,
-        0
+        -(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);
   }
 }
 

src/graphics/platform/PlatformDrawAssistant.ts

@@ -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();
+  platformGraphic: rectGraphic = new rectGraphic();
-  doorGraphic: childJlGraphic = new doorGraphic();
+  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.platformGraphic.draw(this.graphicTemplate.states as IPlatformState);
-    this.doorGraphic.draw();
+    this.doorGraphic.draw(this.graphicTemplate.states as IPlatformState);
   }
 
   clearCache(): void {

src/graphics/runLine/RunLine.ts

@@ -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> {

src/graphics/signal/Lamp.ts

@@ -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
+    this.circleLamp.lineStyle(
-      .beginFill(color, 1)
+      lampConsts.lampLineWidth,
-      .drawCircle(this.radiusX, this.radiusY, lampConsts.lampRadius)
+      lampConsts.lampLineColor
-      .endFill();
+    );
+    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

src/graphics/signal/LampMainBody.ts

@@ -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) => {
+          this.lamps[lampIndex].createLamp(color);
-            lamp.createLamp(color);
-          });
         } else if (this.deltaTime > 30) {
           this.lamps.forEach((lamp) => {
             lamp.createLamp(bgColor);

src/graphics/signal/Signal.ts

@@ -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.lampMainBody.paint(signalConsts.lampNum, mirror, this.states);
-    this.signalCode.paint(this.datas);
+    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> {

src/graphics/signal/SignalCode.ts

@@ -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();
-    }
-  }
 }

src/graphics/signal/SignalDrawAssistant.ts

@@ -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),
+    });
+  }
 }

src/graphics/station/Station.ts

@@ -22,126 +22,109 @@ export interface IStationData extends GraphicData {
 }
 
 export interface IStationState extends GraphicState {
-  get ipStaStusTermMode1(): boolean;
+  get ipRtuStusDown(): boolean;
-  set ipStaStusTermMode1(v: boolean);
+  set ipRtuStusDown(v: boolean);
-  get ipStaStusTermMode2(): boolean;
+  get ipRtuStusInLocalCtrl(): boolean;
-  set ipStaStusTermMode2(v: boolean);
+  set ipRtuStusInLocalCtrl(v: boolean);
-  get ipStaStusTermMode3(): boolean;
+  get ipRtuStusInCentralCtrl(): boolean;
-  set ipStaStusTermMode3(v: boolean);
+  set ipRtuStusInCentralCtrl(v: boolean);
-  get ipStaStusTermMode4(): boolean;
+  get ipRtuStusInEmergencyCtrl(): boolean;
-  set ipStaStusTermMode4(v: boolean);
+  set ipRtuStusInEmergencyCtrl(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);
 }
 
 const stationConsts = {
-  radius: 5,
+  radius: 3,
   borderWidth: 1,
-  borderColor: '0xff0000',
+  circleColorGrey: '0x808080',
-  fillColor: '0xff0000',
+  circleColorBlue: '0x08F80D',
-  transferRadius: 3.5,
+  circleColorYellow: '0xFFFA0C',
-  transferWidth: 0.2,
-  transferColor: '0x0fe81f',
   codeColor: '0xF48815',
   codeFontSize: 22,
-  codeControlFontSize: 18,
+  codeControlFontSize: 12,
-  codeOffsetX: -60,
+  codeOffsetY: 30,
-  codeOffsetY: -25,
+  circleOffsetY: 20,
-  circleOffsetY: -50,
+  circleBetweenOffset: 40,
-  circleBetweenOffset: 60,
+  kilometerCodeColor: '0xFFFFFF',
-  kilometerCodeColor: '0x0fe81f',
+  kilometerCodeFontSize: 8,
-  kilometerCodeFontSize: 11,
   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(''); //控制名--遥控
+  codeGraphB: VectorText = new VectorText(''); //控制名--中控
-  circleC: Graphics = new Graphics();
+  arrow: Graphics = new Graphics();
-  codeGraphC: VectorText = new VectorText(''); //控制名--站控
+  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.arrow);
-    this.addChild(this.codeGraphC);
+    this.addChild(this.inArrow);
     this.codeGraphA.setVectorFontSize(stationConsts.codeFontSize);
+    this.codeGraphB.setVectorFontSize(stationConsts.codeFontSize);
   }
-  draw(): void {
+  draw(states: IStationState): void {
-    this.drawCircleCode(this.circleA, this.codeGraphA, '站控');
+    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.circleBetweenOffset / 2,
-      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.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);
     }
   }
 }

src/graphics/trainWindow/TrainWindow.ts

@@ -23,7 +23,7 @@ export const TrainWindowConsts = {
   height: 15,
   lineWidth: 2,
   lineColor: '0x0fe81f',
-  offsetSection: 60,
+  offsetSection: 120,
 };
 
 export class TrainWindow extends JlGraphic {

src/graphics/trainWindow/TrainWindowDrawAssistant.ts

@@ -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),

src/graphics/trainWindow/oneClickDrawAssistant.ts

@@ -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;
+  }
+}

src/layouts/DrawLayout.vue

@@ -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 { OneClickGenerate } from 'src/graphics/trainWindow/oneClickDrawAssistant';
-import { TrainWindow } from 'src/graphics/trainWindow/TrainWindow';
 
 const route = useRoute();
 const router = useRouter();
@@ -304,10 +303,7 @@ function buildRelations() {
 }
 
 function oneClickGeneration() {
-  const trainWindowDraw = drawStore
+  drawStore.getDrawApp().interactionPlugin(OneClickGenerate.Type).resume();
-    .getDrawApp()
-    .getDrawAssistant(TrainWindow.Type) as TrainWindowDraw;
-  trainWindowDraw.oneGenerates();
 }
 
 function backConfirm() {

src/layouts/MainLayout.vue

@@ -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>

src/pages/DraftManage.vue

@@ -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',

src/pages/MonitorPage.vue

@@ -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>

src/router/routes.ts

@@ -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

src/stores/line-net-store.ts

@@ -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;
     },