Merge branch 'master' of git.code.tencent.com:xian-ncc-da/xian-ncc-da-client
This commit is contained in:
commit
37be5d34d8
@ -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
|
||||
|
85
src/components/common/DraggableDialog.vue
Normal file
85
src/components/common/DraggableDialog.vue
Normal file
@ -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>
|
@ -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"
|
||||
|
119
src/components/errrorMessageBox.vue
Normal file
119
src/components/errrorMessageBox.vue
Normal file
@ -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>
|
@ -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([]);
|
||||
}
|
||||
|
@ -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(
|
||||
x,
|
||||
ps.y - direction * TrainWindowConsts.offsetSection
|
||||
);
|
||||
trainWindow.position.set(x, ps.y);
|
||||
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(
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user