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

src/api/DecisionInfo.ts

@@ -40,6 +40,14 @@ export async function alarmInfoPageQuery(
   return response.data;
 }
 
+/**
+ * 根据id获取决策信息
+ * @param id 草稿id
+ */
+export function queryAlarmInfoById(id: number): Promise<Item> {
+  return api.get(`${DraftUriBase}/id/${id}`);
+}
+
 /**
  * 创建决策信息
  * @param params

src/components/common/DraggableDialog.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { QBar, useDialogPluginComponent } from 'quasar';
+import { ref, onMounted, onUnmounted, reactive, withDefaults } from 'vue';
+
+const emit = defineEmits([...useDialogPluginComponent.emits]);
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    width?: number;
+    height?: number;
+  }>(),
+  { width: 500, height: 800 }
+);
+
+const { dialogRef, onDialogHide /* , onDialogCancel, onDialogOK */ } =
+  useDialogPluginComponent();
+
+const headerRef = ref<InstanceType<typeof QBar> | null>(null);
+
+const offset = reactive({
+  x: 0,
+  y: 0,
+});
+
+const start = { x: 0, y: 0 };
+
+onMounted(() => {
+  window.addEventListener('mousedown', onMouseDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('mousedown', onMouseDown);
+});
+
+function onMove(e: MouseEvent) {
+  [offset.x, offset.y] = [e.screenX - start.x, e.screenY - start.y];
+}
+function onMouseUp() {
+  window.removeEventListener('mousemove', onMove);
+  window.removeEventListener('mouseup', onMouseUp);
+}
+function onMouseDown(e: MouseEvent) {
+  if (headerRef.value?.$el !== e.target) return;
+  start.x = e.screenX - offset.x;
+  start.y = e.screenY - offset.y;
+  window.addEventListener('mousemove', onMove);
+  window.addEventListener('mouseup', onMouseUp);
+}
+function onHide() {
+  emit('hide');
+  onDialogHide();
+}
+</script>
+
+<template>
+  <q-dialog
+    ref="dialogRef"
+    @hide="onHide"
+    v-bind="$attrs"
+    transitionShow="jump-up"
+    transitionHide="jump-down"
+    class="column"
+  >
+    <q-card
+      :style="{ transform: `translate3d(${offset.x}px, ${offset.y}px, 1px)` }"
+      style="max-width: 2000px"
+    >
+      <q-bar
+        ref="headerRef"
+        class="bg-primary text-white non-selectable q-gutter-l"
+        style="cursor: move"
+      >
+        <div>{{ props.title }}</div>
+        <q-space />
+        <q-btn dense flat icon="sym_o_close" v-close-popup></q-btn>
+      </q-bar>
+      <q-scroll-area
+        :style="`width: ${props.width}px; height: ${props.height}px;`"
+      >
+        <slot></slot>
+      </q-scroll-area>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -1,6 +1,15 @@
 <template>
   <q-form>
     <q-input outlined readonly v-model="platformModel.id" label="id" hint="" />
+    <q-input
+      outlined
+      label="站台名称"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="platformModel.code"
+      lazy-rules
+      autogrow
+    />
     <q-select
       outlined
       @blur="onUpdate"

src/components/errrorMessageBox.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import DraggableDialog from './common/DraggableDialog.vue';
+import { useLineNetStore } from 'src/stores/line-net-store';
+import { onMounted, ref } from 'vue';
+import { queryAlarmInfoById } from 'src/api/DecisionInfo';
+import { ApiError } from 'src/boot/axios';
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
+const lineNetStore = useLineNetStore();
+const alarmInfo = ref({
+  id: '',
+  time: '',
+  level: '',
+  deviceInfo: '',
+  type: '',
+  info: '',
+  reason: '',
+});
+
+alarmInfo.value.time = lineNetStore.alarmInfo[0].alert_time;
+alarmInfo.value.level = lineNetStore.alarmInfo[0].level;
+alarmInfo.value.deviceInfo = lineNetStore.alarmInfo[0].device_info;
+alarmInfo.value.info = lineNetStore.alarmInfo[0].info;
+alarmInfo.value.reason = lineNetStore.alarmInfo[0].reason;
+
+onMounted(() => {
+  search();
+});
+
+async function search() {
+  try {
+    const id = lineNetStore.alarmInfo[0].alert_tip_id;
+    const response = await queryAlarmInfoById(id);
+    alarmInfo.value.type = response.type;
+  } catch (err) {
+    const error = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: error.title,
+    });
+  }
+}
+</script>
+
+<template>
+  <DraggableDialog seamless title="设备故障" :width="720" :height="380">
+    <div>
+      <div alarm-message class="alarm-message">
+        <q-card class="box-card">
+          <div class="text-h6">故障信息</div>
+          <div class="alarm-message-detail">
+            <div class="left">
+              <div class="text">时间:{{ alarmInfo.time }}</div>
+              <div class="text">级别:{{ alarmInfo.level }}</div>
+              <div class="text">设备:{{ alarmInfo.deviceInfo }}</div>
+            </div>
+            <div class="right">
+              <div class="text">类型:{{ alarmInfo.type }}</div>
+              <div class="text">信息:{{ alarmInfo.info }}</div>
+              <div class="text">原因:{{ alarmInfo.reason }}</div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+      <div class="decision-message">
+        <q-card class="box-card">
+          <div class="text-h6">行车方面</div>
+          <div>
+            <div class="text item">1、核对站级ATS是否蓝显</div>
+          </div>
+        </q-card>
+        <q-card class="box-card">
+          <div class="text-h6">信息报送方面</div>
+          <div>
+            <div class="text item">
+              1、文字信息：发党群信息群、故障群/应急群。
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </DraggableDialog>
+</template>
+
+<style lang='scss' scoped>
+.alarm-message {
+  padding: 15px 10px 5px 10px;
+  .box-card {
+    .alarm-message-detail {
+      display: flex;
+      .left,
+      .right {
+        width: 50%;
+        padding: 0 5px;
+        .text {
+          font-size: 18px;
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+}
+.decision-message {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  .box-card {
+    width: 49%;
+    padding: 0 5px;
+    .text {
+      font-size: 14px;
+    }
+    .item {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>

src/drawApp/lineNetApp.ts

@@ -33,6 +33,7 @@ import { useLineNetStore } from 'src/stores/line-net-store';
 import { toUint8Array } from 'js-base64';
 import { getWebsocketUrl } from 'src/configs/UrlManage';
 import { getJwtToken } from 'src/configs/TokenManage';
+import { alert } from 'src/protos/alertInfo';
 
 let lineNetApp: GraphicApp | null = null;
 let msgBroker: AppWsMsgBroker | null = null;
@@ -131,6 +132,13 @@ export async function loadLineNetDatas(app: GraphicApp) {
         return states;
       },
     });
+    /*     msgBroker.subscribe({
+      destination: '/queue/xian/ncc/alert',
+      messageHandle: (message: Uint8Array) => {
+        const storage = alert.NccAlertInfoMessage.deserialize(message);
+        lineNetStore.$state.alarmInfo = storage.messages as [];
+      },
+    }); */
   } else {
     app.loadGraphic([]);
   }

src/graphics/trainWindow/TrainWindowDrawAssistant.ts

@@ -98,29 +98,28 @@ export class TrainWindowDraw extends GraphicDrawAssistant<
   draw(x: number, ps: Point, direction: number, section: Section) {
     const trainWindow = new TrainWindow();
     trainWindow.loadData(this.graphicTemplate.datas);
-    trainWindow.position.set(
+    trainWindow.position.set(x, ps.y);
-      x,
-      ps.y - direction * TrainWindowConsts.offsetSection
-    );
     trainWindow.id = GraphicIdGenerator.next();
     trainWindow.datas.sectionId = section.id;
     this.storeGraphic(trainWindow);
     trainWindow.loadRelations();
   }
   oneGenerates(height: Point) {
-    const sections = this.app.queryStore.queryByType<Section>(Section.Type);
+    const turnoutSections = this.app.queryStore
+      .queryByType<Section>(Section.Type)
+      .filter((g) => g.datas.sectionType == SectionType.TurnoutPhysical);
     const trainWindowAll = this.app.queryStore.queryByType<TrainWindow>(
       TrainWindow.Type
     );
     this.app.deleteGraphics(...trainWindowAll);
-    sections.forEach((section) => {
+    turnoutSections.forEach((section) => {
       const ps = section.localToCanvasPoint(section.getStartPoint());
       const pe = section.localToCanvasPoint(section.getEndPoint());
       let direction = 1;
       if (ps.y > height.y) {
         direction = -1;
       }
-      const x = (ps.x + pe.x) / 2;
+      const x = section.labelGraphic.position.x;
       if (section.datas.children.length) {
         section.childSections.forEach((childSection) => {
           const psChild = childSection.localToCanvasPoint(

src/pages/MonitorPage.vue

@@ -11,6 +11,8 @@ import { useLineNetStore } from 'src/stores/line-net-store';
 import { loadLineNetDatas, getLineNetApp } from 'src/drawApp/lineNetApp';
 import { RunLine } from 'src/graphics/runLine/RunLine';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import errrorMessageBox from 'src/components/errrorMessageBox.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -58,6 +60,21 @@ function onResize() {
   }
 }
 
+//报警信息弹框
+watch(
+  () => lineNetStore.alarmInfo,
+  (val) => {
+    if (val.length) {
+      alarm();
+    }
+  }
+);
+
+const $q = useQuasar();
+function alarm() {
+  $q.dialog({ component: errrorMessageBox });
+}
+
 onMounted(() => {
   const dom = document.getElementById('line-app-container');
   if (dom) {

src/stores/line-net-store.ts

@@ -5,11 +5,20 @@ import {
   getLineNetApp,
   destroyLineNetApp,
 } from 'src/drawApp/lineNetApp';
-
+interface alarmInfo {
+  alert_tip_id: number;
+  id: string;
+  alert_time: string;
+  level: string;
+  device_info: string;
+  info: string;
+  reason: string;
+}
 export const useLineNetStore = defineStore('lineNet', {
   state: () => ({
     selectedGraphics: null as JlGraphic[] | null,
     lineNetName: null as string | null,
+    alarmInfo: [] as alarmInfo[], //报警信息
   }),
   getters: {
     selectedGraphicType: (state) => {
@@ -54,5 +63,8 @@ export const useLineNetStore = defineStore('lineNet', {
     setLineNetName(name: string | null) {
       this.lineNetName = name;
     },
+    setAlarmInfo(data: []) {
+      this.alarmInfo = data;
+    },
   },
 });