状态显示

src/components/line-app/StateProperties.vue

@@ -1,12 +1,23 @@
 <template>
   <q-scroll-area class="fit">
     <div class="q-pa-sm">
-      <train-info
+      <train-info v-if="lineStore.selectedGraphicType === Train.Type" />
-        v-if="lineStore.selectedGraphicType === Train.Type"
-      ></train-info>
       <turnout-state
         v-else-if="lineStore.selectedGraphicType === Turnout.Type"
-      ></turnout-state>
+      />
+      <signal-state v-else-if="lineStore.selectedGraphicType === Signal.Type" />
+      <station-state
+        v-else-if="lineStore.selectedGraphicType === Station.Type"
+      />
+      <platform-state
+        v-else-if="lineStore.selectedGraphicType === Platform.Type"
+      />
+      <link-state
+        v-else-if="lineStore.selectedGraphicType === SectionLink.Type"
+      />
+      <section-state
+        v-else-if="lineStore.selectedGraphicType === Section.Type"
+      />
     </div>
   </q-scroll-area>
 </template>
@@ -17,6 +28,16 @@ import { useLineStore } from 'src/stores/line-store';
 import TrainInfo from './infos/TrainInfo.vue';
 import TurnoutState from './states/TurnoutState.vue';
 import { Turnout } from 'src/graphics/turnout/Turnout';
+import SignalState from './states/SignalState.vue';
+import { Signal } from 'src/graphics/signal/Signal';
+import StationState from './states/StationState.vue';
+import { Station } from 'src/graphics/station/Station';
+import PlatformState from './states/PlatformState.vue';
+import { Platform } from 'src/graphics/platform/Platform';
+import LinkState from './states/LinkState.vue';
+import { SectionLink } from 'src/graphics/sectionLink/SectionLink';
+import SectionState from './states/SectionState.vue';
+import { Section } from 'src/graphics/section/Section';
 
 const lineStore = useLineStore();
 </script>

src/components/line-app/states/LinkState.vue

@@ -0,0 +1,75 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section>
+      <div class="text-h6">信号机状态</div>
+    </q-card-section>
+    <q-separator inset />
+    <q-form>
+      <q-input
+        outlined
+        readonly
+        v-model="linkState.index"
+        label="索引"
+        hint=""
+      />
+      <q-input outlined readonly v-model.number="linkState.code" label="名称" />
+    </q-form>
+    <q-card-actions align="center">
+      <q-btn label="修改" type="submit" color="primary" @click="submitState" />
+      <q-btn
+        label="重置"
+        type="reset"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        @click="onReset"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+import { ApiError } from 'src/boot/axios';
+import { SectionLink } from 'src/graphics/sectionLink/SectionLink';
+
+const $q = useQuasar();
+const lineStore = useLineStore();
+const linkState = ref({ index: 0, code: '' });
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val?.length == 1 && val[0].type == SectionLink.Type) {
+      setLinkState(val[0] as SectionLink);
+    } else {
+      linkState.value = {
+        index: 0,
+        code: '',
+      };
+    }
+  }
+);
+function setLinkState(link: SectionLink) {
+  linkState.value = {
+    index: link.datas.index,
+    code: link.datas.code,
+  };
+}
+function submitState() {
+  if (lineStore.simulationId) {
+  }
+}
+function onReset() {
+  if (lineStore.selectedGraphics) {
+    setLinkState(lineStore.selectedGraphics[0] as SectionLink);
+  }
+}
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    setLinkState(lineStore.selectedGraphics[0] as SectionLink);
+  }
+});
+</script>

src/components/line-app/states/PlatformState.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section>
+      <div class="text-h6">信号机状态</div>
+    </q-card-section>
+    <q-separator inset />
+    <q-form>
+      <q-input
+        outlined
+        readonly
+        v-model="platformState.index"
+        label="索引"
+        hint=""
+      />
+      <q-input
+        outlined
+        readonly
+        v-model.number="platformState.code"
+        label="名称"
+      />
+    </q-form>
+    <q-card-actions align="center">
+      <q-btn label="修改" type="submit" color="primary" @click="submitState" />
+      <q-btn
+        label="重置"
+        type="reset"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        @click="onReset"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+import { ApiError } from 'src/boot/axios';
+import { Platform } from 'src/graphics/platform/Platform';
+
+const $q = useQuasar();
+const lineStore = useLineStore();
+const platformState = ref({ index: 0, code: '' });
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val?.length == 1 && val[0].type == Platform.Type) {
+      setPlatformState(val[0] as Platform);
+    } else {
+      platformState.value = {
+        index: 0,
+        code: '',
+      };
+    }
+  }
+);
+function setPlatformState(platform: Platform) {
+  platformState.value = {
+    index: platform.datas.index,
+    code: platform.datas.code,
+  };
+}
+function submitState() {
+  if (lineStore.simulationId) {
+  }
+}
+function onReset() {
+  if (lineStore.selectedGraphics) {
+    setPlatformState(lineStore.selectedGraphics[0] as Platform);
+  }
+}
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    setPlatformState(lineStore.selectedGraphics[0] as Platform);
+  }
+});
+</script>

src/components/line-app/states/SectionState.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section>
+      <div class="text-h6">轨道状态</div>
+    </q-card-section>
+    <q-separator inset />
+    <q-form>
+      <q-input
+        outlined
+        readonly
+        v-model="sectionState.index"
+        label="索引"
+        hint=""
+      />
+      <q-input
+        outlined
+        readonly
+        v-model.number="sectionState.code"
+        label="名称"
+      />
+    </q-form>
+    <q-card-actions align="center">
+      <q-btn label="修改" type="submit" color="primary" @click="submitState" />
+      <q-btn
+        label="重置"
+        type="reset"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        @click="onReset"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+import { ApiError } from 'src/boot/axios';
+import { Section } from 'src/graphics/section/Section';
+
+const $q = useQuasar();
+const lineStore = useLineStore();
+const sectionState = ref({ index: 0, code: '' });
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val?.length == 1 && val[0].type == Section.Type) {
+      setSectionState(val[0] as Section);
+    } else {
+      sectionState.value = {
+        index: 0,
+        code: '',
+      };
+    }
+  }
+);
+function setSectionState(section: Section) {
+  sectionState.value = {
+    index: section.datas.index,
+    code: section.datas.code,
+  };
+}
+function submitState() {
+  if (lineStore.simulationId) {
+  }
+}
+function onReset() {
+  if (lineStore.selectedGraphics) {
+    setSectionState(lineStore.selectedGraphics[0] as Section);
+  }
+}
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    setSectionState(lineStore.selectedGraphics[0] as Section);
+  }
+});
+</script>

src/components/line-app/states/SignalState.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section>
+      <div class="text-h6">信号机状态</div>
+    </q-card-section>
+    <q-separator inset />
+    <q-form>
+      <q-input
+        outlined
+        readonly
+        v-model="signalState.index"
+        label="索引"
+        hint=""
+      />
+      <q-input
+        outlined
+        readonly
+        v-model.number="signalState.code"
+        label="名称"
+      />
+    </q-form>
+    <q-card-actions align="center">
+      <q-btn label="修改" type="submit" color="primary" @click="submitState" />
+      <q-btn
+        label="重置"
+        type="reset"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        @click="onReset"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+import { ApiError } from 'src/boot/axios';
+import { Signal } from 'src/graphics/signal/Signal';
+
+const $q = useQuasar();
+const lineStore = useLineStore();
+const signalState = ref({ index: 0, code: '' });
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val?.length == 1 && val[0].type == Signal.Type) {
+      setSignalState(val[0] as Signal);
+    } else {
+      signalState.value = {
+        index: 0,
+        code: '',
+      };
+    }
+  }
+);
+function setSignalState(signal: Signal) {
+  signalState.value = {
+    index: signal.datas.index,
+    code: signal.datas.code,
+  };
+}
+function submitState() {
+  if (lineStore.simulationId) {
+  }
+}
+function onReset() {
+  if (lineStore.selectedGraphics) {
+    setSignalState(lineStore.selectedGraphics[0] as Signal);
+  }
+}
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    setSignalState(lineStore.selectedGraphics[0] as Signal);
+  }
+});
+</script>

src/components/line-app/states/StationState.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section>
+      <div class="text-h6">车站状态</div>
+    </q-card-section>
+    <q-separator inset />
+    <q-form>
+      <q-input
+        outlined
+        readonly
+        v-model="stationState.index"
+        label="索引"
+        hint=""
+      />
+      <q-input
+        outlined
+        readonly
+        v-model.number="stationState.code"
+        label="名称"
+      />
+    </q-form>
+    <q-card-actions align="center">
+      <q-btn label="修改" type="submit" color="primary" @click="submitState" />
+      <q-btn
+        label="重置"
+        type="reset"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        @click="onReset"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+import { ApiError } from 'src/boot/axios';
+import { Station } from 'src/graphics/station/Station';
+
+const $q = useQuasar();
+const lineStore = useLineStore();
+const stationState = ref({ index: 0, code: '' });
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val?.length == 1 && val[0].type == Station.Type) {
+      setStationState(val[0] as Station);
+    } else {
+      stationState.value = {
+        index: 0,
+        code: '',
+      };
+    }
+  }
+);
+function setStationState(station: Station) {
+  stationState.value = {
+    index: station.datas.index,
+    code: station.datas.code,
+  };
+}
+function submitState() {
+  if (lineStore.simulationId) {
+  }
+}
+function onReset() {
+  if (lineStore.selectedGraphics) {
+    setStationState(lineStore.selectedGraphics[0] as Station);
+  }
+}
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    setStationState(lineStore.selectedGraphics[0] as Station);
+  }
+});
+</script>

src/components/line-app/states/TurnoutState.vue

@@ -30,16 +30,6 @@
         label="是否反位"
         :disable="turnoutState.normal"
       />
-      <!-- <div style="text-align: center; margin-top: 20px">
-        <q-btn label="Submit" type="submit" color="primary" />
-        <q-btn
-          label="Reset"
-          type="reset"
-          color="primary"
-          flat
-          class="q-ml-sm"
-        />
-      </div> -->
     </q-form>
     <q-card-actions align="center">
       <q-btn label="修改" type="submit" color="primary" @click="submitState" />
@@ -58,7 +48,11 @@
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { useLineStore } from 'src/stores/line-store';
 import { ref, watch, onMounted } from 'vue';
+import { setSwitchPosition } from 'src/api/Simulation';
+import { useQuasar } from 'quasar';
+import { ApiError } from 'src/boot/axios';
 
+const $q = useQuasar();
 const lineStore = useLineStore();
 const turnoutState = ref({ index: 0, code: '', normal: false, reverse: false });
 
@@ -86,7 +80,24 @@ function setTurnoutState(turnout: Turnout) {
   };
 }
 function submitState() {
-  console.log('111');
+  if (lineStore.simulationId) {
+    setSwitchPosition({
+      simulationId: lineStore.simulationId,
+      switchIndex: turnoutState.value.index,
+      turnNormal: turnoutState.value.normal,
+      turnReverse: turnoutState.value.reverse,
+    })
+      .then(() => {
+        $q.notify({ type: 'positive', message: '修改道岔状态成功' });
+      })
+      .catch((err) => {
+        const error = err as ApiError;
+        $q.notify({
+          type: 'negative',
+          message: '修改道岔状态失败' + error.title,
+        });
+      });
+  }
 }
 function onReset() {
   if (lineStore.selectedGraphics) {

src/drawApp/graphics/PlatformInteraction.ts

@@ -14,6 +14,7 @@ import {
   GraphicInteractionPlugin,
   JlGraphic,
 } from 'src/jl-graphic';
+import { useLineStore } from 'src/stores/line-store';
 import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 
 export class PlatformData extends GraphicDataBase implements IPlatformData {
@@ -196,15 +197,17 @@ export class PlatformOperateInteraction extends GraphicInteractionPlugin<Platfor
     g.eventMode = 'static';
     g.cursor = 'pointer';
     g.selectable = true;
-    // g.on('_rightclick', this.onContextMenu, this);
+    g.on('_leftclick', this.onLeftClick, this);
   }
 
   unbind(g: Platform): void {
     g.selectable = false;
     g.eventMode = 'none';
-    // g.off('_rightclick', this.onContextMenu, this);
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
   }
-
   // onContextMenu(e: FederatedMouseEvent) {
   //   const target = e.target as DisplayObject;
   //   const platform = target.getGraphic() as Platform;

src/drawApp/graphics/SectionInteraction.ts

@@ -3,6 +3,13 @@ import { GraphicDataBase } from './GraphicDataBase';
 import { ISectionData, Section } from 'src/graphics/section/Section';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { IPointData } from 'pixi.js';
+import {
+  GraphicApp,
+  GraphicInteractionPlugin,
+  JlGraphic,
+} from 'src/jl-graphic';
+import { useLineStore } from 'src/stores/line-store';
+import { SectionGraphicHitArea } from 'src/graphics/section/SectionDrawAssistant';
 
 export class SectionData extends GraphicDataBase implements ISectionData {
   constructor(data?: graphicData.Section) {
@@ -73,3 +80,42 @@ export class SectionData extends GraphicDataBase implements ISectionData {
     return pb_1.Message.equals(this.data, other.data);
   }
 }
+
+export class SectionOperateInteraction extends GraphicInteractionPlugin<Section> {
+  static Name = 'section_operate_menu';
+  constructor(app: GraphicApp) {
+    super(SectionOperateInteraction.Name, app);
+  }
+  static init(app: GraphicApp) {
+    return new SectionOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Section[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Section.Type)
+      .map((g) => g as Section);
+  }
+  bind(g: Section): void {
+    g.lineGraphic.eventMode = 'static';
+    g.lineGraphic.cursor = 'pointer';
+    g.lineGraphic.hitArea = new SectionGraphicHitArea(g);
+    g.lineGraphic.selectable = true;
+    g.selectable = true;
+    g.labelGraphic.eventMode = 'static';
+    g.labelGraphic.cursor = 'pointer';
+    g.labelGraphic.selectable = true;
+    g.on('_leftclick', this.onLeftClick, this);
+  }
+
+  unbind(g: Section): void {
+    g.lineGraphic.eventMode = 'none';
+    g.lineGraphic.scalable = false;
+    g.lineGraphic.selectable = false;
+    g.selectable = false;
+    g.labelGraphic.eventMode = 'none';
+    g.labelGraphic.selectable = false;
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
+  }
+}

src/drawApp/graphics/SectionLinkInteraction.ts

@@ -127,20 +127,26 @@ export class SectionLinkOperateInteraction extends GraphicInteractionPlugin<Sect
     g.lineGraphic.eventMode = 'static';
     g.lineGraphic.cursor = 'pointer';
     g.lineGraphic.hitArea = new SectionLinkGraphicHitArea(g);
+    g.selectable = true;
     g.labelGraphic.eventMode = 'static';
     g.labelGraphic.cursor = 'pointer';
     g.labelGraphic.selectable = true;
     g.on('_rightclick', this.onContextMenu, this);
+    g.on('_leftclick', this.onLeftClick, this);
   }
 
   unbind(g: SectionLink): void {
     g.lineGraphic.eventMode = 'none';
     g.lineGraphic.selectable = false;
+    g.selectable = false;
     g.labelGraphic.eventMode = 'none';
     g.labelGraphic.selectable = false;
     g.off('_rightclick', this.onContextMenu, this);
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
   }
-
   onContextMenu(e: FederatedMouseEvent) {
     const target = e.target as DisplayObject;
     const link = target.getGraphic() as SectionLink;

src/drawApp/graphics/SignalInteraction.ts

@@ -16,6 +16,7 @@ import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
 import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
 import { FederatedMouseEvent, DisplayObject } from 'pixi.js';
 import { state } from 'src/protos/device_state';
+import { useLineStore } from 'src/stores/line-store';
 
 export class SignalData extends GraphicDataBase implements ISignalData {
   constructor(data?: graphicData.Signal) {
@@ -327,15 +328,17 @@ export class SignalOperateInteraction extends GraphicInteractionPlugin<Signal> {
     g.eventMode = 'static';
     g.cursor = 'pointer';
     g.selectable = true;
-    // g.on('_rightclick', this.onContextMenu, this);
+    g.on('_leftclick', this.onLeftClick, this);
   }
 
   unbind(g: Signal): void {
     g.selectable = false;
     g.eventMode = 'none';
-    // g.off('_rightclick', this.onContextMenu, this);
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
   }
-
   // onContextMenu(e: FederatedMouseEvent) {
   //   const target = e.target as DisplayObject;
   //   const signal = target.getGraphic() as Signal;

src/drawApp/graphics/StationInteraction.ts

@@ -16,6 +16,7 @@ import {
 } from 'src/jl-graphic';
 import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 import { KilometerSystem } from 'src/graphics/signal/Signal';
+import { useLineStore } from 'src/stores/line-store';
 
 export class StationData extends GraphicDataBase implements IStationData {
   constructor(data?: graphicData.Station) {
@@ -167,12 +168,17 @@ export class StationOperateInteraction extends GraphicInteractionPlugin<Station>
     g.cursor = 'pointer';
     g.selectable = true;
     g.on('_rightclick', this.onContextMenu, this);
+    g.on('_leftclick', this.onLeftClick, this);
   }
 
   unbind(g: Station): void {
     g.selectable = false;
     g.eventMode = 'none';
     g.off('_rightclick', this.onContextMenu, this);
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
   }
 
   onContextMenu(e: FederatedMouseEvent) {

src/drawApp/lineApp.ts

@@ -32,7 +32,10 @@ import {
   TurnoutStates,
 } from './graphics/TurnoutInteraction';
 import { Turnout, TurnoutTemplate } from 'src/graphics/turnout/Turnout';
-import { SectionData } from './graphics/SectionInteraction';
+import {
+  SectionData,
+  SectionOperateInteraction,
+} from './graphics/SectionInteraction';
 import { Section, SectionTemplate } from 'src/graphics/section/Section';
 import { getPublishMapInfoByLineId } from 'src/api/PublishApi';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
@@ -153,6 +156,7 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
         SectionLink.Type,
         Train.Type,
         Turnout.Type,
+        Section.Type,
       ],
     },
   });
@@ -160,6 +164,7 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
   PlatformOperateInteraction.init(lineApp);
   StationOperateInteraction.init(lineApp);
   SectionLinkOperateInteraction.init(lineApp);
+  SectionOperateInteraction.init(lineApp);
   TrainOperateInteraction.init(lineApp);
   TurnoutOperationPlugin.init(lineApp);
   // 画布右键菜单

src/graphics/section/SectionDrawAssistant.ts

@@ -205,7 +205,7 @@ export class SectionDraw extends GraphicDrawAssistant<
   }
 }
 
-class SectionGraphicHitArea implements IHitArea {
+export class SectionGraphicHitArea implements IHitArea {
   section: Section;
   constructor(section: Section) {
     this.section = section;