joylink/xian-ncc-da-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
fan 2023-09-22 11:06:02 +08:00
commit 73b00b10aa
45 changed files with 1192 additions and 763 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/api/AlarmTipTimeConfig.ts Normal file
View File

@ -0,0 +1,56 @@
import { api } from 'src/boot/axios';
import { PageDto, PageQueryDto } from './ApiCommon';
const BaseUrl = '/api/alert/tip/time';
export interface TimeConfigItem {
id?: number;
timeName: string;
startHour: string;
endHour: string;
timeType: string;
publicPeak?: string;
}
export enum TipTimeConfig {
假期早高峰 = 'HOLIDAYS_MORN_PEAK',
假期晚高峰 = 'HOLIDAYS_EVENING_PEAK',
早高峰 = 'MORN_PEAK',
晚高峰 = 'EVENING_PEARK',
低峰 = 'NORMAL_UNPEARK',
}
export enum ShowTipTimeConfig {
HOLIDAYS_MORN_PEAK = '假期早高峰',
HOLIDAYS_EVENING_PEAK = '假期晚高峰',
MORN_PEAK = '早高峰',
EVENING_PEARK = '晚高峰',
NORMAL_UNPEARK = '低峰',
}
/**
* 创建/修改时间配置
* @param data
* @returns
*/
export function creatOrEditTimeConfig(data: TimeConfigItem) {
return api.post(`${BaseUrl}`, data);
}
class PageQueryParams extends PageQueryDto {
timeName?: string;
timeType?: string;
}
/**
* 获取报警提示时间配置列表
* @param params
* @returns
*/
export async function alarmTipTimeConfigPageQuery(
params: PageQueryParams
): Promise<PageDto<TimeConfigItem>> {
const response = await api.post(`${BaseUrl}/page`, {
params: params,
});
return response.data;
}

15
src/api/AlertMock.ts
View File

@ -4,6 +4,21 @@ import { AlarmInfo } from './DecisionInfo';
const alertUriBase = '/api/alert/mock';
//故障测试
export function mockLocalDemoTestSet(
alertType: string,
data: {
lineId: number;
rtuId: number;
deviceInfos: { deviceName: string; deviceType: string }[];
status: string;
groupId?: string;
}
) {
return api.post(`${alertUriBase}/localDemoTest/${alertType}`, data);
}
//故障演练
export function mockAlertSet(data: {
lineId: number;
alertType: string;

25
src/api/DecisionInfo.ts
View File

@ -1,11 +1,13 @@
import { api } from 'src/boot/axios';
import { PageDto, PageQueryDto } from './ApiCommon';
import { TimeConfigItem } from './AlarmTipTimeConfig';
const AlertTipUriBase = '/api/alertTip';
interface AlarmInfoCreateParams {
id: number;
alertType: string;
timeType: string;
tipTimeIds: string[];
areaConfigId: number;
drivingInfo: string;
submissionInfo: string;
@ -14,13 +16,17 @@ interface AlarmInfoCreateParams {
export interface AlarmInfoListItem {
id: number;
alertType: string;
timeType: string;
timeConfigList: TimeConfigItem[];
areaConfigId: number;
drivingInfo: string;
submissionInfo: string;
areaConfigName?: string;
}
export interface AlarmInfo<T = unknown> {
data: T;
}
export class PagingQueryParams extends PageQueryDto {
alertType?: string;
timeType?: string;
@ -62,7 +68,7 @@ export function queryAlarmInfoByType(
}
/**
* 创建决策信息
* 创建或编辑决策信息
* @param params
* @returns
*/
@ -78,19 +84,6 @@ export function deleteAlarmInfo(id: number) {
return api.delete(`${AlertTipUriBase}/id/${id}`);
}
/**
* 更新决策信息
* @param data
* @returns
*/
export function updataAlarmInfo(id: number, data: AlarmInfoListItem) {
return api.put(`${AlertTipUriBase}/id`, data);
}
export interface AlarmInfo<T = unknown> {
data: T;
}
/**
* 根据故障类型获取对应的范围配置
* @param id 线路id

30
src/components/DrawAppFormUtils.ts Normal file
View File

@ -0,0 +1,30 @@
import { type GraphicDataBase } from 'src/drawApp/graphics/GraphicDataBase';
import { IDrawApp, JlGraphic } from 'src/jl-graphic';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, onUnmounted, reactive } from 'vue';
const drawStore = useDrawStore();
export function useFormData<T extends GraphicDataBase>(
source: T,
app: IDrawApp
) {
const data = reactive<T>(source);
onMounted(() => {
app.bindFormData(data);
});
onUnmounted(() => {
app.unbindFormData(data);
});
function onUpdate() {
const graphic = drawStore.selectedGraphic as JlGraphic;
if (graphic) {
app.updateGraphicAndRecord(graphic, data);
}
}
return { data, onUpdate };
}

5
src/components/SysMenu.vue
View File

@ -84,6 +84,11 @@ const list = reactive([
label: '报警故障阈值配置',
icon: 'format_indent_increase',
},
{
path: '/dataManage/alarmTipTimeConfig',
label: '报警提示时间配置',
icon: 'access_time',
},
],
},
{

13
src/components/alarm/alarmInfoEnum.ts
View File

@ -19,6 +19,8 @@ export enum showAlertTypeData {
'道岔大面积失表',
'列车信号故障',
'全线蓝显',
'联锁区红光带',
'联锁区橙光带',
I = 'I类信息',
II = 'II类信息',
III = 'III类信息',
@ -45,6 +47,8 @@ export enum showAlertTypeData {
SWITCH_LOST_MOST = '道岔大面积失表',
TRAIN_EB_ATP = '列车信号故障',
ALL_LINE_BLUE_DISPLAY = '全线蓝显',
AXLE_LED_RED_INTERLOCK_AREA = '联锁区红光带',
AXLE_LED_ORANGE_INTERLOCK_AREA = '联锁区橙光带',
}
export enum saveAlertTypeData {
@ -70,6 +74,8 @@ export enum saveAlertTypeData {
道岔大面积失表 = 'SWITCH_LOST_MOST',
列车信号故障 = 'TRAIN_EB_ATP',
全线蓝显 = 'ALL_LINE_BLUE_DISPLAY',
联锁区红光带 = 'AXLE_LED_RED_INTERLOCK_AREA',
联锁区橙光带 = 'AXLE_LED_ORANGE_INTERLOCK_AREA',
}
export const GuardConfigTypeData = {
@ -101,3 +107,10 @@ export const GuardConfigTypeData = {
deviceType: '信号',
},
};
export function isArraysEqual(arr1: string[], arr2: string[]) {
if (arr1.length !== arr2.length) {
return false;
}
return arr1.sort().join(',') === arr2.sort().join(',');
}

240
src/components/alarm/setAlarmMock.vue Normal file
View File

@ -0,0 +1,240 @@
<template>
<draggable-dialog
v-if="showsetAlartText"
seamless
title="设置故障演练"
:width="300"
:height="0"
>
<template v-slot:footer>
<div>
<q-card class="q-gutter-sm q-px-sm q-mt-sm">
<q-form ref="myForm" @submit="onSubmit" @reset="onReset">
<q-input
outlined
label="线路ID"
v-model.number="setAlartTextData.lineId"
type="number"
lazy-rules
:rules="[(val) => val || '请输入线路ID！']"
/>
<q-select
outlined
label="故障类型"
v-model="setAlartTextData.alertType"
:options="optionsAlertType"
:rules="[(val) => val.length > 0 || '请选择故障类型！']"
/>
<q-list bordered separator class="rounded-borders">
<q-item>
<q-item-section no-wrap class="q-gutter-y-sm column">
<q-item-label> 框选的设备 </q-item-label>
<div class="q-gutter-sm row">
<q-chip
v-for="item in setAlartTextData.deviceCodes"
:key="item"
square
color="primary"
text-color="white"
removable
@remove="removeSelect(item)"
>
{{ item }}
</q-chip>
</div>
<q-btn
v-show="setAlartTextData.deviceCodes.length > 0"
style="width: 120px"
label="清空框选的设备"
color="red"
@click="clearSelect"
/>
</q-item-section>
</q-item>
</q-list>
<div class="q-gutter-sm q-pa-md row justify-center">
<q-btn
label="提交"
type="submit"
color="primary"
class="q-mr-md"
/>
<q-btn label="重置" type="reset" color="primary" />
</div>
</q-form>
</q-card>
</div>
</template>
</draggable-dialog>
</template>
<script setup lang="ts">
import DraggableDialog from '../common/DraggableDialog.vue';
import { onMounted, ref, watch } from 'vue';
import { JlGraphic } from 'src/jl-graphic';
import { Station } from 'src/graphics/station/Station';
import { useLineStore } from 'src/stores/line-store';
import { QForm, useQuasar } from 'quasar';
import { ApiError } from 'src/boot/axios';
import { mockAlertSet } from 'src/api/AlertMock';
import { isArraysEqual, saveAlertTypeData } from './alarmInfoEnum';
import { Section, SectionType } from 'src/graphics/section/Section';
import { LogicSection } from 'src/graphics/logicSection/LogicSection';
const lineStore = useLineStore();
const setAlartTextData = ref<{
lineId: string;
alertType: string;
deviceCodes: string[];
}>({
lineId: '',
alertType: '',
deviceCodes: [],
});
const optionsAlertType = [
'蓝显',
'全线蓝显',
'整侧站台门无法打开',
'整侧站台门无法关闭',
'道岔失表',
'道岔大面积失表',
'计轴红光带',
'计轴大面积红光带',
'计轴橙光带',
'计轴大面积橙光带',
'列车信号故障',
];
const mapAlertType = new Map([
['蓝显', ['station']],
['全线蓝显', ['station']],
['整侧站台门无法打开', ['Platform']],
['整侧站台门无法关闭', ['Platform']],
['道岔失表', ['Turnout']],
['道岔大面积失表', ['Turnout']],
['计轴红光带', ['LogicSection', 'Turnout']],
['计轴大面积红光带', ['LogicSection', 'Turnout']],
['计轴橙光带', ['LogicSection', 'Turnout']],
['计轴大面积橙光带', ['LogicSection', 'Turnout']],
['列车信号故障', ['LogicSection', 'Turnout']],
['联锁区红光带', ['LogicSection', 'Turnout']],
['联锁区橙光带', ['LogicSection', 'Turnout']],
]);
let selectGraphic: JlGraphic[] = [];
watch(
() => lineStore.selectedGraphics,
(val) => {
if (val && val.length > 0) {
const selectGraphicId = selectGraphic.map((g) => g.id);
const appSelectedGraphicsId = lineStore.selectedGraphics?.map(
(g) => g.id
);
if (
appSelectedGraphicsId !== undefined &&
isArraysEqual(selectGraphicId, appSelectedGraphicsId)
) {
return;
}
const deviceFilter = lineStore.selectedGraphics?.filter((g) => {
let select = false;
if (
g.type == Station.Type &&
(g as Station).datas.concentrationStations &&
setAlartTextData.value.alertType == '蓝显'
) {
select = true;
}
if (
(g.type !== Station.Type &&
mapAlertType
.get(setAlartTextData.value.alertType)
?.includes(g.type)) ||
(g.type == Section.Type &&
(g as Section).datas.sectionType === SectionType.TurnoutPhysical &&
mapAlertType
.get(setAlartTextData.value.alertType)
?.includes(LogicSection.Type))
) {
select = true;
}
return select;
}) as JlGraphic[];
if (
['道岔失表', '计轴红光带', '计轴橙光带', '列车信号故障'].includes(
setAlartTextData.value.alertType
)
) {
selectGraphic = [deviceFilter[0]];
} else {
selectGraphic.push(...deviceFilter);
}
selectGraphic = Array.from(new Set(selectGraphic));
lineStore.getLineApp().updateSelected(...selectGraphic);
setAlartTextData.value.deviceCodes = selectGraphic.map((g) => g.code);
}
}
);
onMounted(() => {
clearSelect();
onReset();
});
const myForm = ref<QForm | null>(null);
const showsetAlartText = ref(true);
const $q = useQuasar();
async function onSubmit() {
myForm.value?.validate().then(async (res) => {
if (res) {
try {
const params = {
lineId: +setAlartTextData.value.lineId,
alertType: (saveAlertTypeData as never)[
setAlartTextData.value.alertType + ''
],
deviceCodes: setAlartTextData.value.deviceCodes,
};
await mockAlertSet(params);
$q.notify({
type: 'positive',
message: '设置故障演练成功',
});
onReset();
} catch (err) {
const apiErr = err as ApiError;
$q.notify({
type: 'negative',
message: apiErr.title,
});
} finally {
showsetAlartText.value = false;
}
}
});
}
function removeSelect(code: string) {
const removeIndex = setAlartTextData.value.deviceCodes.findIndex(
(item) => item == code
);
selectGraphic.splice(removeIndex, 1);
setAlartTextData.value.deviceCodes.splice(removeIndex, 1);
lineStore.getLineApp().updateSelected(...selectGraphic);
}
function clearSelect() {
setAlartTextData.value.deviceCodes = [];
selectGraphic = [];
lineStore.getLineApp().updateSelected();
}
function onReset() {
setAlartTextData.value = {
lineId: '',
alertType: '',
deviceCodes: [],
};
selectGraphic = [];
}
</script>

262
src/components/alarm/setAlarmText.vue Normal file
View File

@ -0,0 +1,262 @@
<template>
<draggable-dialog
v-if="showsetAlartText"
seamless
title="设置故障测试"
:width="300"
:height="0"
>
<template v-slot:footer>
<div>
<q-card class="q-gutter-sm q-px-sm q-mt-sm">
<q-form ref="myForm" @submit="onSubmit" @reset="onReset">
<q-input
outlined
label="线路ID"
v-model.number="setAlartTextData.lineId"
type="number"
lazy-rules
:rules="[(val) => val || '请输入线路ID！']"
/>
<q-input
outlined
label="集中站ID"
v-model.number="setAlartTextData.rtuId"
type="number"
lazy-rules
:rules="[(val) => val || '请输入集中站ID！']"
/>
<q-select
outlined
label="故障类型"
v-model="setAlartTextData.alertType"
:options="optionsAlertType"
:rules="[(val) => val.length > 0 || '请选择故障类型！']"
/>
<q-input
v-if="setAlartTextData.alertType == '列车信号故障'"
outlined
label="车组号"
v-model.number="setAlartTextData.groupId"
type="number"
lazy-rules
:rules="[(val) => val || '请输入车组号！']"
/>
<q-select
outlined
label="故障测试状态"
v-model="setAlartTextData.status"
:options="optionsStatus"
:rules="[(val) => val.length > 0 || '请选择故障类型！']"
map-options
emit-value
/>
<q-list bordered separator class="rounded-borders">
<q-item>
<q-item-section no-wrap class="q-gutter-y-sm column">
<q-item-label> 框选的设备 </q-item-label>
<div class="q-gutter-sm row">
<q-chip
v-for="item in setAlartTextData.deviceInfos"
:key="item.deviceName"
square
color="primary"
text-color="white"
removable
@remove="removeSelect(item)"
>
{{ item.deviceName }}
</q-chip>
</div>
<q-btn
v-show="setAlartTextData.deviceInfos.length > 0"
style="width: 120px"
label="清空框选的设备"
color="red"
@click="clearSelect"
/>
</q-item-section>
</q-item>
</q-list>
<div class="q-gutter-sm q-pa-md row justify-center">
<q-btn
label="提交"
type="submit"
color="primary"
class="q-mr-md"
/>
<q-btn label="重置" type="reset" color="primary" />
</div>
</q-form>
</q-card>
</div>
</template>
</draggable-dialog>
</template>
<script setup lang="ts">
import DraggableDialog from '../common/DraggableDialog.vue';
import { ref, watch } from 'vue';
import { JlGraphic } from 'src/jl-graphic';
import { Station } from 'src/graphics/station/Station';
import { useLineStore } from 'src/stores/line-store';
import { QForm, useQuasar } from 'quasar';
import { ApiError } from 'src/boot/axios';
import { mockLocalDemoTestSet } from 'src/api/AlertMock';
import { isArraysEqual, saveAlertTypeData } from './alarmInfoEnum';
const lineStore = useLineStore();
const setAlartTextData = ref<{
lineId: string;
rtuId: string;
alertType: string;
deviceInfos: { deviceName: string; deviceType: string }[];
status: string;
groupId: string;
}>({
lineId: '',
rtuId: '',
alertType: '',
deviceInfos: [],
status: '',
groupId: '',
});
const optionsAlertType = [
'蓝显',
'道岔失表',
'计轴红光带',
'计轴橙光带',
'列车信号故障',
];
const mapAlertType = new Map([
['蓝显', ['station']],
['道岔失表', ['Turnout']],
['计轴红光带', ['LogicSection', 'Turnout']],
['计轴橙光带', ['LogicSection', 'Turnout']],
['列车信号故障', ['LogicSection', 'Turnout']],
]);
enum DeviceType {
station = 'DEVICE_TYPE_RTU',
Turnout = 'DEVICE_TYPE_SWITCH',
LogicSection = 'DEVICE_TYPE_TRACK',
}
const optionsStatus = [
{ label: '正常', value: 'NORMAL' },
{ label: '设置', value: 'BEGIN' },
{ label: '报警', value: 'ALERT' },
];
let selectGraphic: JlGraphic[] = [];
watch(
() => lineStore.selectedGraphics,
(val) => {
if (val && val.length > 0) {
const selectGraphicId = selectGraphic.map((g) => g.id);
const appSelectedGraphicsId = lineStore.selectedGraphics?.map(
(g) => g.id
);
if (
appSelectedGraphicsId !== undefined &&
isArraysEqual(selectGraphicId, appSelectedGraphicsId)
) {
return;
}
const deviceFilter = lineStore.selectedGraphics?.filter((g) => {
let select = false;
if (
g.type == Station.Type &&
(g as Station).datas.concentrationStations &&
setAlartTextData.value.alertType == '蓝显'
) {
select = true;
}
if (
g.type !== Station.Type &&
mapAlertType.get(setAlartTextData.value.alertType)?.includes(g.type)
) {
select = true;
}
return select;
}) as JlGraphic[];
if (setAlartTextData.value.alertType !== '列车信号故障') {
selectGraphic.push(...deviceFilter);
} else {
selectGraphic = [deviceFilter[0]];
}
selectGraphic = Array.from(new Set(selectGraphic));
lineStore.getLineApp().updateSelected(...selectGraphic);
setAlartTextData.value.deviceInfos = [];
selectGraphic.forEach((g) => {
setAlartTextData.value.deviceInfos.push({
deviceName: g.code,
deviceType: (DeviceType as never)[g.type + ''],
});
});
}
}
);
const myForm = ref<QForm | null>(null);
const showsetAlartText = ref(true);
const $q = useQuasar();
async function onSubmit() {
myForm.value?.validate().then(async (res) => {
if (res) {
try {
const params = {
lineId: +setAlartTextData.value.lineId,
rtuId: +setAlartTextData.value.rtuId,
deviceInfos: setAlartTextData.value.deviceInfos,
status: setAlartTextData.value.status,
groupId: setAlartTextData.value.groupId,
};
const alertType = (saveAlertTypeData as never)[
setAlartTextData.value.alertType + ''
];
await mockLocalDemoTestSet(alertType, params);
$q.notify({
type: 'positive',
message: '设置故障测试成功',
});
onReset();
} catch (err) {
const apiErr = err as ApiError;
$q.notify({
type: 'negative',
message: apiErr.title,
});
} finally {
showsetAlartText.value = false;
}
}
});
}
function removeSelect(code: { deviceName: string; deviceType: string }) {
const removeIndex = setAlartTextData.value.deviceInfos.findIndex(
(item) => item == code
);
selectGraphic.splice(removeIndex, 1);
setAlartTextData.value.deviceInfos.splice(removeIndex, 1);
lineStore.getLineApp().updateSelected(...selectGraphic);
}
function clearSelect() {
setAlartTextData.value.deviceInfos = [];
selectGraphic = [];
lineStore.getLineApp().updateSelected();
}
function onReset() {
setAlartTextData.value = {
lineId: '',
rtuId: '',
alertType: '',
deviceInfos: [],
status: '',
groupId: '',
};
selectGraphic = [];
}
</script>

6
src/components/draw-app/DrawProperties.vue
View File

@ -19,9 +19,6 @@
<template v-if="drawStore.drawGraphicType === Station.Type">
<station-template></station-template>
</template>
<!-- <template v-if="drawStore.drawGraphicType === Train.Type">
<train-template></train-template>
</template> -->
</q-card-section>
</q-card>
</div>
@ -54,9 +51,6 @@
<station-line-property
v-if="drawStore.selectedGraphicType === StationLine.Type"
></station-line-property>
<!-- <train-property
v-if="drawStore.selectedGraphicType === Train.Type"
></train-property> -->
<iscs-fan-property
v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
></iscs-fan-property>

54
src/components/draw-app/properties/AxleCountingProperty.vue
View File

@ -19,7 +19,7 @@
<q-select
outlined
style="margin-top: 10px"
v-model="kilometerSystem.coordinateSystem"
v-model="axleCountingModel.kilometerSystem.coordinateSystem"
:options="CoordinateSystemOptions"
:map-options="true"
:emit-value="true"
@ -29,7 +29,7 @@
<q-input
outlined
style="margin-top: 10px"
v-model.number="kilometerSystem.kilometer"
v-model.number="axleCountingModel.kilometerSystem.kilometer"
type="number"
@blur="onUpdate"
label="公里标(mm):"
@ -72,17 +72,19 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { AxleCountingData } from 'src/drawApp/graphics/AxleCountingInteraction';
import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
import { Section } from 'src/graphics/section/Section';
import { Turnout } from 'src/graphics/turnout/Turnout';
import { useDrawStore } from 'src/stores/draw-store';
import { computed, onMounted, reactive, watch } from 'vue';
import { computed } from 'vue';
const drawStore = useDrawStore();
const axleCountingModel = reactive(new AxleCountingData());
const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
const { data: axleCountingModel, onUpdate } = useFormData(
new AxleCountingData(),
drawStore.getDrawApp()
);
const CoordinateSystemOptions = [
{ label: '车辆段', value: 'DEPOT' },
{ label: '停车场', value: 'PARKING_LOT' },
@ -90,46 +92,6 @@ const CoordinateSystemOptions = [
{ label: '换线', value: 'TRANSFER' },
];
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == AxleCounting.Type) {
axleCountingModel.copyFrom(val.saveData() as AxleCountingData);
if (axleCountingModel.kilometerSystem) {
kilometerSystem.coordinateSystem =
axleCountingModel.kilometerSystem.coordinateSystem;
kilometerSystem.kilometer = axleCountingModel.kilometerSystem.kilometer;
}
}
}
);
onMounted(() => {
const axleCounting = drawStore.selectedGraphic as AxleCounting;
if (axleCounting) {
axleCountingModel.copyFrom(axleCounting.saveData());
if (axleCountingModel.kilometerSystem) {
kilometerSystem.coordinateSystem =
axleCountingModel.kilometerSystem.coordinateSystem;
kilometerSystem.kilometer = axleCountingModel.kilometerSystem.kilometer;
}
}
});
function onUpdate() {
const axleCounting = drawStore.selectedGraphic as AxleCounting;
axleCountingModel.kilometerSystem = {
coordinateSystem: kilometerSystem.coordinateSystem,
kilometer: kilometerSystem.kilometer,
};
if (axleCounting) {
drawStore
.getDrawApp()
.updateGraphicAndRecord(axleCounting, axleCountingModel);
}
}
const sectionRelations = computed(() => {
const axleCounting = drawStore.selectedGraphic as AxleCounting;
const sectionRelations =

33
src/components/draw-app/properties/LinkProperty.vue
View File

@ -59,38 +59,13 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { LinkData } from 'src/drawApp/graphics/LinkInteraction';
import { Link } from 'src/graphics/link/Link';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, watch } from 'vue';
const drawStore = useDrawStore();
const linkModel = reactive(new LinkData());
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == Link.Type) {
// console.log('link变更');
linkModel.copyFrom(val.saveData() as LinkData);
}
}
const { data: linkModel, onUpdate } = useFormData(
new LinkData(),
drawStore.getDrawApp()
);
onMounted(() => {
// console.log('link 属性表单 mounted');
const link = drawStore.selectedGraphic as Link;
if (link) {
linkModel.copyFrom(link.saveData());
}
});
function onUpdate() {
console.log('link 属性更新');
const link = drawStore.selectedGraphic as Link;
if (link) {
drawStore.getDrawApp().updateGraphicAndRecord(link, linkModel);
}
}
</script>

33
src/components/draw-app/properties/LogicSectionProperty.vue
View File

@ -1,9 +1,15 @@
<template>
<q-form>
<q-input outlined readonly v-model="sectionModel.id" label="id" hint="" />
<q-input
outlined
v-model="sectionModel.code"
readonly
v-model="logicSectionModel.id"
label="id"
hint=""
/>
<q-input
outlined
v-model="logicSectionModel.code"
@blur="onUpdate"
label="编号"
/>
@ -11,26 +17,13 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
import { LogicSection } from 'src/graphics/logicSection/LogicSection';
import { useDrawStore } from 'src/stores/draw-store';
import { shallowRef, watchEffect } from 'vue';
const drawStore = useDrawStore();
const sectionModel = shallowRef(new LogicSectionData());
watchEffect(() => {
const section = drawStore.selectedGraphic;
if (section && section instanceof LogicSection) {
sectionModel.value = section.saveData();
}
});
const onUpdate = () => {
const section = drawStore.selectedGraphic as LogicSection;
if (section) {
drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel.value);
}
};
const { data: logicSectionModel, onUpdate } = useFormData(
new LogicSectionData(),
drawStore.getDrawApp()
);
</script>

30
src/components/draw-app/properties/PathLineProperty.vue
View File

@ -52,24 +52,17 @@
</q-form>
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { PathLineData } from 'src/drawApp/graphics/PathLineInteraction';
import { PathLine } from 'src/graphics/pathLine/PathLine';
import { useDrawStore } from 'src/stores/draw-store';
import { reactive, onMounted, watch } from 'vue';
import { reactive, onMounted } from 'vue';
import { getLineList } from 'src/api/LineInfoApi';
const drawStore = useDrawStore();
const pathLineModel = reactive(new PathLineData());
const lineList: { label: string; value: string }[] = reactive([]);
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == PathLine.Type) {
pathLineModel.copyFrom(val.saveData() as PathLineData);
}
}
const { data: pathLineModel, onUpdate } = useFormData(
new PathLineData(),
drawStore.getDrawApp()
);
const lineList: { label: string; value: string }[] = reactive([]);
onMounted(() => {
getLineList()
@ -81,16 +74,5 @@ onMounted(() => {
.catch((err) => {
console.error('获取线路列表失败：' + err.message);
});
const pathLine = drawStore.selectedGraphic as PathLine;
if (pathLine) {
pathLineModel.copyFrom(pathLine.saveData());
}
});
function onUpdate() {
const pathLine = drawStore.selectedGraphic as PathLine;
if (pathLine) {
drawStore.getDrawApp().updateGraphicAndRecord(pathLine, pathLineModel);
}
}
</script>

91
src/components/draw-app/properties/PlatformProperty.vue
View File

@ -13,23 +13,29 @@
<q-select
outlined
@blur="onUpdate"
v-model="hasDoor"
v-model="platformModel.hasdoor"
:options="optionsDoor"
label="是否有屏蔽门"
map-options
emit-value
/>
<q-select
outlined
@blur="onUpdate"
v-model="direction"
v-model="platformModel.direction"
:options="optionsDirection"
label="方向"
map-options
emit-value
/>
<q-select
outlined
@blur="onUpdate"
v-model="upAndDown"
v-model="platformModel.up"
:options="optionsUpAndDown"
label="上下行"
map-options
emit-value
/>
<q-list bordered separator class="rounded-borders">
<q-item>
@ -47,68 +53,35 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { PlatformData } from 'src/drawApp/graphics/PlatformInteraction';
import { Platform } from 'src/graphics/platform/Platform';
import { Station } from 'src/graphics/station/Station';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, ref, watch } from 'vue';
import { onMounted, ref } from 'vue';
const drawStore = useDrawStore();
const platformModel = reactive(new PlatformData());
const hasDoor = ref('是');
const optionsDoor = ['是', '否'];
const direction = ref('向上');
const upAndDown = ref('');
const optionsDirection = ['向上', '向下'];
const optionsUpAndDown = ['上行', '下行'];
const stationName = ref('');
enum showSelect {
是 = 'true',
否 = 'false',
向上 = 'up',
向下 = 'down',
}
enum showUp {
上行 = 'true',
下行 = 'false',
}
enum showSelectData {
true = '是',
false = '否',
up = '向上',
down = '向下',
}
enum showUpData {
true = '上行',
false = '下行',
}
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == Platform.Type) {
platformModel.copyFrom(val.saveData() as PlatformData);
hasDoor.value = (showSelectData as never)[platformModel.hasdoor + ''];
direction.value = (showSelectData as never)[platformModel.direction];
upAndDown.value = (showUpData as never)[platformModel.up + ''];
if (platformModel.refStation) {
const refStation = val.queryStore.queryById<Station>(
platformModel.refStation
) as Station;
stationName.value = refStation.datas.name;
}
}
}
const { data: platformModel, onUpdate } = useFormData(
new PlatformData(),
drawStore.getDrawApp()
);
const stationName = ref('');
const optionsDoor = [
{ label: '是', value: true },
{ label: '否', value: false },
];
const optionsDirection = [
{ label: '向上', value: 'up' },
{ label: '向下', value: 'down' },
];
const optionsUpAndDown = [
{ label: '上行', value: true },
{ label: '下行', value: false },
];
onMounted(() => {
const platform = drawStore.selectedGraphic as Platform;
if (platform) {
platformModel.copyFrom(platform.saveData());
hasDoor.value = (showSelectData as never)[platformModel.hasdoor + ''];
direction.value = (showSelectData as never)[platformModel.direction];
upAndDown.value = (showUpData as never)[platformModel.up + ''];
if (platformModel.refStation) {
const refStation = platform.queryStore.queryById<Station>(
platformModel.refStation
@ -117,14 +90,4 @@ onMounted(() => {
}
}
});
function onUpdate() {
platformModel.hasdoor = JSON.parse((showSelect as never)[hasDoor.value]);
platformModel.direction = (showSelect as never)[direction.value];
platformModel.up = JSON.parse((showUp as never)[upAndDown.value]);
const platform = drawStore.selectedGraphic as Platform;
if (platform) {
drawStore.getDrawApp().updateGraphicAndRecord(platform, platformModel);
}
}
</script>

30
src/components/draw-app/properties/RectProperty.vue
View File

@ -66,35 +66,13 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { RectData } from 'src/drawApp/graphics/RectInteraction';
import { Rect } from 'src/graphics/rect/Rect';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, watch } from 'vue';
const drawStore = useDrawStore();
const rectModel = reactive(new RectData());
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == Rect.Type) {
rectModel.copyFrom(val.saveData() as RectData);
}
}
const { data: rectModel, onUpdate } = useFormData(
new RectData(),
drawStore.getDrawApp()
);
onMounted(() => {
const Rect = drawStore.selectedGraphic as Rect;
if (Rect) {
rectModel.copyFrom(Rect.saveData());
}
});
function onUpdate() {
const Rect = drawStore.selectedGraphic as Rect;
if (Rect) {
drawStore.getDrawApp().updateGraphicAndRecord(Rect, rectModel);
}
}
</script>

29
src/components/draw-app/properties/RunLineProperty.vue
View File

@ -118,10 +118,11 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { RunLineData } from 'src/drawApp/graphics/RunLineInteraction';
import { RunLine } from 'src/graphics/runLine/RunLine';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, watch, ref } from 'vue';
import { onMounted, reactive } from 'vue';
import { Point } from 'pixi.js';
import {
IStationLineData,
@ -130,20 +131,13 @@ import {
import { getLineList } from 'src/api/LineInfoApi';
const drawStore = useDrawStore();
const runLineModel = reactive(new RunLineData());
const { data: runLineModel, onUpdate } = useFormData(
new RunLineData(),
useDrawStore().getDrawApp()
);
const stationLines: IStationLineData[] = reactive([]);
const lineList: { label: string; value: string }[] = reactive([]);
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == RunLine.Type) {
runLineModel.copyFrom(val.saveData() as RunLineData);
}
}
);
onMounted(() => {
getLineList()
.then((res) => {
@ -154,22 +148,12 @@ onMounted(() => {
.catch((err) => {
console.error('获取线路列表失败：' + err.message);
});
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());
}
});
function onUpdate() {
const runLine = drawStore.selectedGraphic as RunLine;
if (runLine) {
drawStore.getDrawApp().updateGraphicAndRecord(runLine, runLineModel);
}
}
function generatePathLine() {
const runLine = drawStore.selectedGraphic as RunLine;
if (runLine) {
@ -180,6 +164,7 @@ function generatePathLine() {
runLine.generatePathLine(points1);
}
}
function generateContainSta() {
const runLine = drawStore.selectedGraphic as RunLine;
if (runLine) {

22
src/components/draw-app/properties/SectionProperty.vue
View File

@ -73,16 +73,19 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { SectionData } from 'src/drawApp/graphics/SectionInteraction';
import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
import { Section, SectionType } from 'src/graphics/section/Section';
import { Turnout } from 'src/graphics/turnout/Turnout';
import { useDrawStore } from 'src/stores/draw-store';
import { computed, shallowRef, watchEffect } from 'vue';
import { computed } from 'vue';
const drawStore = useDrawStore();
const sectionModel = shallowRef(new SectionData());
const { data: sectionModel, onUpdate } = useFormData(
new SectionData(),
drawStore.getDrawApp()
);
const sectionRelations = computed(() => {
const section = drawStore.selectedGraphic as Section;
@ -137,17 +140,4 @@ const axleCountingRelations = computed(() => {
(relation) => relation.getOtherGraphic<AxleCounting>(section).datas.code
);
});
watchEffect(() => {
const section = drawStore.selectedGraphic;
if (section && section instanceof Section) {
sectionModel.value = section.saveData();
}
});
const onUpdate = () => {
const section = drawStore.selectedGraphic as Section;
if (section) {
drawStore.getDrawApp().updateGraphicAndRecord(section, sectionModel.value);
}
};
</script>

33
src/components/draw-app/properties/SeparatorProperty.vue
View File

@ -16,13 +16,16 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { SeparatorData } from 'src/drawApp/graphics/SeparatorInteraction';
import { Separator, separatorTypeEnum } from 'src/graphics/separator/Separator';
import { separatorTypeEnum } from 'src/graphics/separator/Separator';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, watch } from 'vue';
const drawStore = useDrawStore();
const separatorModel = reactive(new SeparatorData());
const { data: separatorModel, onUpdate } = useFormData(
new SeparatorData(),
drawStore.getDrawApp()
);
const typeOptions = [
{ label: '区段分隔符', value: separatorTypeEnum.section },
@ -30,28 +33,4 @@ const typeOptions = [
{ label: '左断路分隔符', value: separatorTypeEnum.endA },
{ label: '右断路分隔符', value: separatorTypeEnum.endB },
];
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == Separator.Type) {
separatorModel.copyFrom(val.saveData() as SeparatorData);
}
}
);
onMounted(() => {
const Separator = drawStore.selectedGraphic as Separator;
if (Separator) {
separatorModel.copyFrom(Separator.saveData());
}
});
function onUpdate() {
const Separator = drawStore.selectedGraphic as Separator;
if (Separator) {
drawStore.getDrawApp().updateGraphicAndRecord(Separator, separatorModel);
}
}
</script>

51
src/components/draw-app/properties/SignalProperty.vue
View File

@ -10,7 +10,7 @@
<q-select
outlined
style="margin-top: 10px"
v-model="kilometerSystem.coordinateSystem"
v-model="signalModel.kilometerSystem.coordinateSystem"
:options="CoordinateSystemOptions"
:map-options="true"
:emit-value="true"
@ -20,7 +20,7 @@
<q-input
outlined
style="margin-top: 10px"
v-model.number="kilometerSystem.kilometer"
v-model.number="signalModel.kilometerSystem.kilometer"
type="number"
@blur="onUpdate"
label="公里标(mm):"
@ -29,14 +29,15 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { SignalData } from 'src/drawApp/graphics/SignalInteraction';
import { Signal } from 'src/graphics/signal/Signal';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, watch } from 'vue';
const drawStore = useDrawStore();
const signalModel = reactive(new SignalData());
const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
const { data: signalModel, onUpdate } = useFormData(
new SignalData(),
drawStore.getDrawApp()
);
const CoordinateSystemOptions = [
{ label: '车辆段', value: 'DEPOT' },
@ -44,42 +45,4 @@ const CoordinateSystemOptions = [
{ label: '正线', value: 'MAIN_LINE' },
{ label: '换线', value: 'TRANSFER' },
];
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == Signal.Type) {
signalModel.copyFrom(val.saveData() as SignalData);
if (signalModel.kilometerSystem) {
kilometerSystem.coordinateSystem =
signalModel.kilometerSystem.coordinateSystem;
kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer;
}
}
}
);
onMounted(() => {
const signal = drawStore.selectedGraphic as Signal;
if (signal) {
signalModel.copyFrom(signal.saveData());
if (signalModel.kilometerSystem) {
kilometerSystem.coordinateSystem =
signalModel.kilometerSystem.coordinateSystem;
kilometerSystem.kilometer = signalModel.kilometerSystem.kilometer;
}
}
});
function onUpdate() {
const signal = drawStore.selectedGraphic as Signal;
signalModel.kilometerSystem = {
coordinateSystem: kilometerSystem.coordinateSystem,
kilometer: kilometerSystem.kilometer,
};
if (signal) {
drawStore.getDrawApp().updateGraphicAndRecord(signal, signalModel);
}
}
</script>

59
src/components/draw-app/properties/StationLineProperty.vue
View File

@ -24,64 +24,27 @@
<q-select
outlined
@blur="onUpdate"
v-model="hasTransfer"
v-model="stationLineModel.hasTransfer"
:options="optionsCircle"
label="是否有换乘"
map-options
emit-value
/>
</q-form>
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { StationLineData } from 'src/drawApp/graphics/StationLineInteraction';
import { StationLine } from 'src/graphics/stationLine/StationLine';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, ref, watch } from 'vue';
const drawStore = useDrawStore();
const stationLineModel = reactive(new StationLineData());
const hasTransfer = ref('是');
const optionsCircle = ['是', '否'];
enum showSelect {
是 = 'true',
否 = 'false',
}
enum showSelectData {
true = '是',
false = '否',
}
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == StationLine.Type) {
stationLineModel.copyFrom(val.saveData() as StationLineData);
hasTransfer.value = (showSelectData as never)[
stationLineModel.hasTransfer + ''
];
}
}
const { data: stationLineModel, onUpdate } = useFormData(
new StationLineData(),
drawStore.getDrawApp()
);
onMounted(() => {
const stationLine = drawStore.selectedGraphic as StationLine;
if (stationLine) {
stationLineModel.copyFrom(stationLine.saveData());
hasTransfer.value = (showSelectData as never)[
stationLineModel.hasTransfer + ''
];
}
});
function onUpdate() {
stationLineModel.hasTransfer = JSON.parse(
(showSelect as never)[hasTransfer.value]
);
const stationLine = drawStore.selectedGraphic as StationLine;
if (stationLine) {
drawStore
.getDrawApp()
.updateGraphicAndRecord(stationLine, stationLineModel);
}
}
const optionsCircle = [
{ label: '是', value: true },
{ label: '否', value: false },
];
</script>

88
src/components/draw-app/properties/StationProperty.vue
View File

@ -22,7 +22,7 @@
<q-select
outlined
style="margin-top: 10px"
v-model="kilometerSystem.coordinateSystem"
v-model="stationModel.kilometerSystem.coordinateSystem"
:options="CoordinateSystemOptions"
:map-options="true"
:emit-value="true"
@ -32,7 +32,7 @@
<q-input
outlined
style="margin-top: 10px"
v-model.number="kilometerSystem.kilometer"
v-model.number="stationModel.kilometerSystem.kilometer"
type="number"
@blur="onUpdate"
label="公里标(mm):"
@ -40,40 +40,38 @@
<q-select
outlined
@blur="onUpdate"
v-model="hasControl"
v-model="stationModel.hasControl"
:options="optionsControl"
label="是否有控制"
map-options
emit-value
/>
<q-select
outlined
@blur="onUpdate"
v-model="concentrationStations"
v-model="stationModel.concentrationStations"
:options="optionsControl"
label="是否集中站"
map-options
emit-value
/>
</q-form>
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { StationData } from 'src/drawApp/graphics/StationInteraction';
import { Station } from 'src/graphics/station/Station';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, ref, watch } from 'vue';
const drawStore = useDrawStore();
const stationModel = reactive(new StationData());
const hasControl = ref('是');
const concentrationStations = ref('否');
const optionsControl = ['是', '否'];
enum showSelect {
是 = 'true',
否 = 'false',
}
enum showSelectData {
true = '是',
false = '否',
}
const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
const { data: stationModel, onUpdate } = useFormData(
new StationData(),
drawStore.getDrawApp()
);
const optionsControl = [
{ label: '是', value: true },
{ label: '否', value: false },
];
const CoordinateSystemOptions = [
{ label: '车辆段', value: 'DEPOT' },
@ -81,56 +79,4 @@ const CoordinateSystemOptions = [
{ label: '正线', value: 'MAIN_LINE' },
{ label: '换线', value: 'TRANSFER' },
];
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == Station.Type) {
stationModel.copyFrom(val.saveData() as StationData);
hasControl.value = (showSelectData as never)[
stationModel.hasControl + ''
];
concentrationStations.value = (showSelectData as never)[
stationModel.concentrationStations + ''
];
if (stationModel.kilometerSystem) {
kilometerSystem.coordinateSystem =
stationModel.kilometerSystem.coordinateSystem;
kilometerSystem.kilometer = stationModel.kilometerSystem.kilometer;
}
}
}
);
onMounted(() => {
const station = drawStore.selectedGraphic as Station;
if (station) {
stationModel.copyFrom(station.saveData());
hasControl.value = (showSelectData as never)[stationModel.hasControl + ''];
concentrationStations.value = (showSelectData as never)[
stationModel.concentrationStations + ''
];
if (stationModel.kilometerSystem) {
kilometerSystem.coordinateSystem =
stationModel.kilometerSystem.coordinateSystem;
kilometerSystem.kilometer = stationModel.kilometerSystem.kilometer;
}
}
});
function onUpdate() {
stationModel.hasControl = JSON.parse((showSelect as never)[hasControl.value]);
stationModel.concentrationStations = JSON.parse(
(showSelect as never)[concentrationStations.value]
);
stationModel.kilometerSystem = {
coordinateSystem: kilometerSystem.coordinateSystem,
kilometer: kilometerSystem.kilometer,
};
const station = drawStore.selectedGraphic as Station;
if (station) {
drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
}
}
</script>

84
src/components/draw-app/properties/TrainProperty.vue
View File

@ -1,84 +0,0 @@
<template>
<q-form>
<q-input outlined readonly v-model="trainModel.id" label="id" hint="" />
<q-input
outlined
v-model="trainModel.code"
label="车号"
hint=""
@blur="onUpdate"
/>
<q-select
outlined
@blur="onUpdate"
v-model="hasBorder"
:options="optionsDoor"
label="是否有边框"
/>
<q-select
outlined
@blur="onUpdate"
v-model="trainDirection"
:options="optionsDirection"
label="行驶方向"
/>
</q-form>
</template>
<script setup lang="ts">
import { TrainData } from 'src/drawApp/graphics/TrainInteraction';
import { Train } from 'src/graphics/train/Train';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, reactive, ref, watch } from 'vue';
const drawStore = useDrawStore();
const trainModel = reactive(new TrainData());
const hasBorder = ref('是');
const optionsDoor = ['是', '否'];
const trainDirection = ref('向左');
const optionsDirection = ['向左', '向右'];
enum showSelect {
是 = 'true',
否 = 'false',
向左 = 'left',
向右 = 'right',
}
enum showSelectData {
true = '是',
false = '否',
left = '向左',
right = '向右',
}
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == Train.Type) {
trainModel.copyFrom(val.saveData() as TrainData);
hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
trainDirection.value = (showSelectData as never)[
trainModel.trainDirection
];
}
}
);
onMounted(() => {
const train = drawStore.selectedGraphic as Train;
if (train) {
trainModel.copyFrom(train.saveData());
hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
trainDirection.value = (showSelectData as never)[trainModel.trainDirection];
}
});
function onUpdate() {
trainModel.hasBorder = JSON.parse((showSelect as never)[hasBorder.value]);
trainModel.trainDirection = (showSelect as never)[trainDirection.value];
const train = drawStore.selectedGraphic as Train;
if (train) {
drawStore.getDrawApp().updateGraphicAndRecord(train, trainModel);
}
}
</script>

32
src/components/draw-app/properties/TrainWindowProperty.vue
View File

@ -55,42 +55,20 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { TrainWindowData } from 'src/drawApp/graphics/TrainWindowInteraction';
import { LogicSection } from 'src/graphics/logicSection/LogicSection';
import { Section } from 'src/graphics/section/Section';
import { TrainWindow } from 'src/graphics/trainWindow/TrainWindow';
import { useDrawStore } from 'src/stores/draw-store';
import { computed, onMounted, reactive, watch } from 'vue';
import { computed } from 'vue';
const drawStore = useDrawStore();
const trainWindowModel = reactive(new TrainWindowData());
drawStore.$subscribe;
watch(
() => drawStore.selectedGraphic,
(val) => {
if (val && val.type == TrainWindow.Type) {
trainWindowModel.copyFrom(val.saveData() as TrainWindowData);
}
}
const { data: trainWindowModel, onUpdate } = useFormData(
new TrainWindowData(),
drawStore.getDrawApp()
);
onMounted(() => {
const trainWindow = drawStore.selectedGraphic as TrainWindow;
if (trainWindow) {
trainWindowModel.copyFrom(trainWindow.saveData());
}
});
function onUpdate() {
const trainWindow = drawStore.selectedGraphic as TrainWindow;
if (trainWindow) {
drawStore
.getDrawApp()
.updateGraphicAndRecord(trainWindow, trainWindowModel);
}
}
const relatedLogicSection = computed((): LogicSection[] => {
if (
drawStore.selectedGraphic &&

45
src/components/draw-app/properties/TurnoutProperty.vue
View File

@ -10,7 +10,7 @@
<q-select
outlined
style="margin-top: 10px"
v-model="kilometerSystem[0].coordinateSystem"
v-model="turnoutModel.kilometerSystem[0].coordinateSystem"
:options="CoordinateSystemOptions"
:map-options="true"
:emit-value="true"
@ -20,7 +20,7 @@
<q-input
outlined
style="margin-top: 10px"
v-model.number="kilometerSystem[0].kilometer"
v-model.number="turnoutModel.kilometerSystem[0].kilometer"
type="number"
@blur="onUpdate"
label="公里标(mm):"
@ -28,7 +28,7 @@
<q-select
outlined
style="margin-top: 10px"
v-model="kilometerSystem[1].coordinateSystem"
v-model="turnoutModel.kilometerSystem[1].coordinateSystem"
:options="CoordinateSystemOptions"
:map-options="true"
:emit-value="true"
@ -38,7 +38,7 @@
<q-input
outlined
style="margin-top: 10px"
v-model.number="kilometerSystem[1].kilometer"
v-model.number="turnoutModel.kilometerSystem[1].kilometer"
type="number"
@blur="onUpdate"
label="公里标(mm):"
@ -71,24 +71,24 @@
</template>
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { TurnoutData } from 'src/drawApp/graphics/TurnoutInteraction';
import { Section } from 'src/graphics/section/Section';
import { Turnout } from 'src/graphics/turnout/Turnout';
import { useDrawStore } from 'src/stores/draw-store';
import { computed, reactive, shallowRef, watchEffect } from 'vue';
import { computed } from 'vue';
const drawStore = useDrawStore();
const { data: turnoutModel, onUpdate } = useFormData(
new TurnoutData(),
drawStore.getDrawApp()
);
const CoordinateSystemOptions = [
{ label: '车辆段', value: 'DEPOT' },
{ label: '停车场', value: 'PARKING_LOT' },
{ label: '正线', value: 'MAIN_LINE' },
{ label: '换线', value: 'TRANSFER' },
];
const turnoutModel = shallowRef(new TurnoutData());
const kilometerSystem = reactive([
{ coordinateSystem: '', kilometer: 0 },
{ coordinateSystem: '', kilometer: 0 },
]);
const sectionRelations = computed(() => {
const turnout = drawStore.selectedGraphic as Turnout;
@ -124,29 +124,4 @@ const turnoutRelations = computed(() => {
}(${relation.getOtherRelationParam(turnout).param})`
);
});
watchEffect(() => {
const turnout = drawStore.selectedGraphic;
if (turnout && turnout instanceof Turnout) {
turnoutModel.value = turnout.saveData();
if (turnoutModel.value.kilometerSystem.length > 0) {
kilometerSystem.forEach((ks, i) => {
ks.coordinateSystem =
turnoutModel.value.kilometerSystem[i].coordinateSystem;
ks.kilometer = turnoutModel.value.kilometerSystem[i].kilometer;
});
}
}
});
const onUpdate = () => {
const turnout = drawStore.selectedGraphic as Turnout;
turnoutModel.value.kilometerSystem = kilometerSystem.map((ks) => ({
coordinateSystem: ks.coordinateSystem,
kilometer: ks.kilometer,
}));
if (turnout) {
drawStore.getDrawApp().updateGraphicAndRecord(turnout, turnoutModel.value);
}
};
</script>

2
src/components/rangeConfigApp/RangeConfig.vue
View File

@ -130,6 +130,8 @@ const optionsAlertType = [
'计轴大面积橙光带',
'道岔大面积失表',
'列车信号故障',
'联锁区红光带',
'联锁区橙光带',
];
enum DeviceType {

25
src/components/rangeConfigApp/RangeList.vue
View File

@ -52,28 +52,25 @@ watch(
const onRequest: QTable['onRequest'] = async (props) => {
const { page, rowsPerPage } = props.pagination;
loading.value = true;
let resp;
try {
resp = await getDeviceAreaList({
const resp = await getDeviceAreaList({
lineId,
current: page,
size: rowsPerPage,
areaName: searchAreaName.value,
});
} catch (error) {
errorNotify('没有所查区域名称', '');
resp = await getDeviceAreaList({
lineId,
current: page,
size: rowsPerPage,
pagination.value.page = resp.current;
pagination.value.rowsNumber = resp.total;
pagination.value.rowsPerPage = resp.size;
rows.value = resp.records;
} catch (err) {
$q.notify({
type: 'negative',
message: '无法获取范围列表',
});
} finally {
loading.value = false;
}
pagination.value.page = resp.current;
pagination.value.rowsNumber = resp.total;
pagination.value.rowsPerPage = resp.size;
rows.value = resp.records;
loading.value = false;
};
const onDialogShow = () => {

9
src/configs/UrlManage.ts
View File

@ -13,3 +13,12 @@ export function getHttpBase() {
export function getWebsocketUrl() {
return `ws://${getHost()}/ws-default`;
}
export function getShowSetAlarmTextButton() {
let show = false;
const host = window.location.hostname;
if (process.env.NODE_ENV == 'development' || host == '192.168.3.233') {
show = true;
}
return show;
}

3
src/drawApp/graphics/AxleCountingInteraction.ts
View File

@ -33,6 +33,9 @@ export class AxleCountingData
this.data.code = v;
}
get kilometerSystem(): KilometerSystem {
if (!this.data.kilometerSystem) {
this.data.kilometerSystem = new graphicData.KilometerSystem();
}
return this.data.kilometerSystem;
}
set kilometerSystem(v: KilometerSystem) {

6
src/drawApp/graphics/LinkInteraction.ts
View File

@ -6,7 +6,7 @@ import { GraphicDataBase } from './GraphicDataBase';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
import {
GraphicApp,
IGraphicApp,
GraphicInteractionPlugin,
JlGraphic,
} from 'src/jl-graphic';
@ -119,12 +119,12 @@ const EpEditMenu: ContextMenu = ContextMenu.init({
export class DrawLinkPlugin extends GraphicInteractionPlugin<Link> {
static Name = 'link_draw_right_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(DrawLinkPlugin.Name, app);
app.registerMenu(LinkEditMenu);
app.registerMenu(EpEditMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new DrawLinkPlugin(app);
}
filter(...grahpics: JlGraphic[]): Link[] | undefined {

6
src/drawApp/graphics/LogicSectionInteraction.ts
View File

@ -10,7 +10,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
import { state } from 'src/protos/device_status';
import {
GraphicApp,
IGraphicApp,
GraphicInteractionPlugin,
JlGraphic,
} from 'src/jl-graphic';
@ -81,14 +81,14 @@ const LogicSectionMenu = ContextMenu.init({
export class LogicSectionOperationPlugin extends GraphicInteractionPlugin<LogicSection> {
static Name = 'logic_section_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(LogicSectionOperationPlugin.Name, app);
app.registerMenu(LogicSectionMenu);
}
filter(...grahpics: JlGraphic[]): LogicSection[] | undefined {
return grahpics.filter((g): g is LogicSection => g instanceof LogicSection);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new LogicSectionOperationPlugin(app);
}
bind(g: LogicSection): void {

6
src/drawApp/graphics/PlatformInteraction.ts
View File

@ -10,7 +10,7 @@ import { state } from 'src/protos/device_status';
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
import {
GraphicApp,
IGraphicApp,
GraphicInteractionPlugin,
JlGraphic,
} from 'src/jl-graphic';
@ -224,11 +224,11 @@ const PlatformOperateMenu: ContextMenu = ContextMenu.init({
export class PlatformOperateInteraction extends GraphicInteractionPlugin<Platform> {
static Name = 'platform_operate_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(PlatformOperateInteraction.Name, app);
app.registerMenu(PlatformOperateMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new PlatformOperateInteraction(app);
}
filter(...grahpics: JlGraphic[]): Platform[] | undefined {

6
src/drawApp/graphics/PolygonInteraction.ts
View File

@ -4,7 +4,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
import { GraphicDataBase } from './GraphicDataBase';
import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
import {
GraphicApp,
IGraphicApp,
GraphicInteractionPlugin,
JlGraphic,
} from 'src/jl-graphic';
@ -128,12 +128,12 @@ const EpEditMenu: ContextMenu = ContextMenu.init({
export class DrawPolygonPlugin extends GraphicInteractionPlugin<Polygon> {
static Name = 'polygon_draw_right_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(DrawPolygonPlugin.Name, app);
app.registerMenu(PolygonEditMenu);
app.registerMenu(EpEditMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new DrawPolygonPlugin(app);
}
filter(...grahpics: JlGraphic[]): Polygon[] | undefined {

10
src/drawApp/graphics/RunLineInteraction.ts
View File

@ -8,7 +8,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
import { GraphicDataBase } from './GraphicDataBase';
import {
GraphicInteractionPlugin,
GraphicApp,
IGraphicApp,
JlGraphic,
} from 'src/jl-graphic';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
@ -133,12 +133,12 @@ const EpEditMenu: ContextMenu = ContextMenu.init({
export class DrawRunLinePlugin extends GraphicInteractionPlugin<RunLine> {
static Name = 'runline_draw_right_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(DrawRunLinePlugin.Name, app);
app.registerMenu(RunLineEditMenu);
app.registerMenu(EpEditMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new DrawRunLinePlugin(app);
}
filter(...grahpics: JlGraphic[]): RunLine[] | undefined {
@ -221,11 +221,11 @@ export class DrawRunLinePlugin extends GraphicInteractionPlugin<RunLine> {
export class RunLineOperateInteraction extends GraphicInteractionPlugin<RunLine> {
static Name = 'runLine_operate_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(RunLineOperateInteraction.Name, app);
app.registerMenu(EpEditMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new RunLineOperateInteraction(app);
}
filter(...grahpics: JlGraphic[]): RunLine[] | undefined {

13
src/drawApp/graphics/SignalInteraction.ts
View File

@ -9,7 +9,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
import {
GraphicInteractionPlugin,
GraphicApp,
IGraphicApp,
JlGraphic,
} from 'src/jl-graphic';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
@ -48,6 +48,9 @@ export class SignalData extends GraphicDataBase implements ISignalData {
this.data.mirror = v;
}
get kilometerSystem(): KilometerSystem {
if (!this.data.kilometerSystem) {
this.data.kilometerSystem = new graphicData.KilometerSystem();
}
return this.data.kilometerSystem;
}
set kilometerSystem(v: KilometerSystem) {
@ -283,11 +286,11 @@ const SignalOperateMenu: ContextMenu = ContextMenu.init({
});
export class DrawSignalInteraction extends GraphicInteractionPlugin<Signal> {
static Name = 'signal_draw_right_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(DrawSignalInteraction.Name, app);
app.registerMenu(SignalEditMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new DrawSignalInteraction(app);
}
filter(...grahpics: JlGraphic[]): Signal[] | undefined {
@ -316,11 +319,11 @@ export class DrawSignalInteraction extends GraphicInteractionPlugin<Signal> {
export class SignalOperateInteraction extends GraphicInteractionPlugin<Signal> {
static Name = 'signal_operate_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(SignalOperateInteraction.Name, app);
app.registerMenu(SignalOperateMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new SignalOperateInteraction(app);
}
filter(...grahpics: JlGraphic[]): Signal[] | undefined {

9
src/drawApp/graphics/StationInteraction.ts
View File

@ -10,7 +10,7 @@ import { state } from 'src/protos/device_status';
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
import {
GraphicApp,
IGraphicApp,
GraphicInteractionPlugin,
JlGraphic,
} from 'src/jl-graphic';
@ -42,6 +42,9 @@ export class StationData extends GraphicDataBase implements IStationData {
this.data.code = v;
}
get kilometerSystem(): KilometerSystem {
if (!this.data.kilometerSystem) {
this.data.kilometerSystem = new graphicData.KilometerSystem();
}
return this.data.kilometerSystem;
}
set kilometerSystem(v: KilometerSystem) {
@ -160,11 +163,11 @@ const StationOperateMenu: ContextMenu = ContextMenu.init({
export class StationOperateInteraction extends GraphicInteractionPlugin<Station> {
static Name = 'station_operate_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(StationOperateInteraction.Name, app);
app.registerMenu(StationOperateMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new StationOperateInteraction(app);
}
filter(...grahpics: JlGraphic[]): Station[] | undefined {

6
src/drawApp/graphics/TrainInteraction.ts
View File

@ -7,7 +7,7 @@ import { train } from 'src/protos/train';
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
import {
GraphicApp,
IGraphicApp,
GraphicInteractionPlugin,
JlGraphic,
VectorText,
@ -269,12 +269,12 @@ const TrainOperateMenu: ContextMenu = ContextMenu.init({
export class TrainOperateInteraction extends GraphicInteractionPlugin<Train> {
static Name = 'train_operate_menu';
hoverLaber: TrainHoverLabel;
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(TrainOperateInteraction.Name, app);
this.hoverLaber = new TrainHoverLabel();
app.registerMenu(TrainOperateMenu);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new TrainOperateInteraction(app);
}
filter(...grahpics: JlGraphic[]): Train[] | undefined {

13
src/drawApp/graphics/TurnoutInteraction.ts
View File

@ -10,7 +10,7 @@ import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
import { KilometerSystem } from 'src/graphics/signal/Signal';
import { state } from 'src/protos/device_status';
import {
GraphicApp,
IGraphicApp,
GraphicInteractionPlugin,
JlGraphic,
} from 'src/jl-graphic';
@ -139,14 +139,14 @@ const TurnoutOperateMenu = ContextMenu.init({
export class TurnoutOperationPlugin extends GraphicInteractionPlugin<Turnout> {
static Name = 'turnout_operate_menu';
constructor(app: GraphicApp) {
constructor(app: IGraphicApp) {
super(TurnoutOperationPlugin.Name, app);
app.registerMenu(TurnoutOperateMenu);
}
filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
return grahpics.filter((g): g is Turnout => g instanceof Turnout);
}
static init(app: GraphicApp) {
static init(app: IGraphicApp) {
return new TurnoutOperationPlugin(app);
}
bind(g: Turnout): void {
@ -314,7 +314,12 @@ export class TurnoutData extends GraphicDataBase implements ITurnoutData {
this.data.pcRef = ref;
}
get kilometerSystem(): KilometerSystem[] {
return this.data.kilometerSystem;
return this.data.kilometerSystem.length > 0
? this.data.kilometerSystem
: (this.data.kilometerSystem = [
new graphicData.KilometerSystem(),
new graphicData.KilometerSystem(),
]);
}
set kilometerSystem(value: KilometerSystem[]) {
this.data.kilometerSystem = value.map(

108
src/layouts/MainLayout.vue
View File

@ -17,11 +17,18 @@
<q-toolbar-title> 西安NCC调度辅助决策系统 </q-toolbar-title>
<q-btn
v-show="route.path.includes('monitor')"
v-show="route.path.includes('line/monitor')"
color="info"
label="故障设置"
label="故障演练"
class="q-mr-sm"
@click="alertSetShow = true"
@click="openSetAlarmMockDialog"
/>
<q-btn
v-if="showSetAlarmTextButton && route.path.includes('line/monitor')"
color="info"
label="故障测试"
class="q-mr-sm"
@click="openSetAlarmTextDialog"
/>
<div class="q-gutter-sm row items-center no-wrap">
@ -84,7 +91,7 @@
>
<q-card style="width: 300px" class="q-pa-md">
<q-form ref="myForm" @submit="alarmMockSet" class="q-gutter-md">
<div class="text-h6">设置模拟故障</div>
<div class="text-h6">设置故障演练</div>
<q-input
outlined
label="线路ID"
@ -119,19 +126,16 @@
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import SysMenu from 'src/components/SysMenu.vue';
import { useRouter, useRoute } from 'vue-router';
import { Dialog, useQuasar } from 'quasar';
import { clearJwtToken } from 'src/configs/TokenManage';
import {
DeviceConfigItem,
getDeviceByAlarmType,
mockAlertSet,
} from 'src/api/AlertMock';
import commonAlarm from 'src/components/alarm/commonAlarm.vue';
import { saveAlertTypeData } from 'src/components/alarm/alarmInfoEnum';
import setAlarmText from 'src/components/alarm/setAlarmText.vue';
import setAlarmMock from 'src/components/alarm/setAlarmMock.vue';
import NCC from '/logo/NCC_白.png';
import { getShowSetAlarmTextButton } from 'src/configs/UrlManage';
const leftDrawerOpen = ref(false);
const router = useRouter();
@ -147,9 +151,6 @@ function onResize() {
scrollWidth.value =
window.innerWidth - (leftDrawerOpen.value ? leftDrawerSize.width : 0);
}
function backConfirm() {
router.replace('/monitor');
}
const headerSize = reactive({} as { width: number; height: number });
function onHeaderResize(size: { width: number; height: number }) {
headerSize.width = size.width;
@ -162,6 +163,27 @@ function onLeftResize(size: { width: number; height: number }) {
leftDrawerSize.height = size.height;
}
onMounted(() => {
if (getShowSetAlarmTextButton()) {
showSetAlarmTextButton.value = true;
}
});
//模拟报警
const $q = useQuasar();
function openSetAlarmMockDialog() {
$q.dialog({
component: setAlarmMock,
});
}
const showSetAlarmTextButton = ref(false);
function openSetAlarmTextDialog() {
$q.dialog({
component: setAlarmText,
});
}
function logOut() {
Dialog.create({
title: '登出确认',
@ -174,61 +196,7 @@ function logOut() {
});
}
//模拟报警
const $q = useQuasar();
const alertSetShow = ref(false);
const alertType = ref('');
const lineId = ref();
const optionsAlertType = [
'蓝显',
'全线蓝显',
'整侧站台门无法打开',
'整侧站台门无法关闭',
'道岔失表',
'道岔大面积失表',
'计轴红光带',
'计轴大面积红光带',
'计轴橙光带',
'计轴大面积橙光带',
'列车信号故障',
];
let optionsAlertDevice = ref<string[]>([]);
const alertDevice = ref<string[]>([]);
let alertDeviceList: DeviceConfigItem[] = [];
async function searchAlertDevice() {
try {
optionsAlertDevice.value = [];
alertDevice.value = [];
const type = (saveAlertTypeData as never)[alertType.value];
alertDeviceList = await getDeviceByAlarmType(3, type);
optionsAlertDevice.value = alertDeviceList.map((item) => item.name);
} catch (err) {
$q.notify({
type: 'negative',
message: '无法获取指定故障的设备列表',
});
}
}
async function alarmMockSet() {
try {
const type = (saveAlertTypeData as never)[alertType.value];
const Id = lineId.value;
let deviceCodes: string[] = [];
for (let i = 0; i < alertDevice.value.length; i++) {
const index = alertDeviceList.findIndex(
(item) => item.name == alertDevice.value[i]
);
deviceCodes.push(alertDeviceList[index].code);
}
await mockAlertSet({ lineId: Id, alertType: type, deviceCodes });
alertSetShow.value = false;
} catch (err) {
$q.notify({
type: 'negative',
message: '无法设置模拟故障',
});
}
function backConfirm() {
router.replace('/monitor');
}
</script>

2
src/pages/AlarmInfoList.vue
View File

@ -233,6 +233,8 @@ const optionsAlertType = [
'计轴大面积橙光带',
'道岔大面积失表',
'列车信号故障',
'联锁区红光带',
'联锁区橙光带',
];
function searchDecisionInfo() {
searchDialog.value = false;

261
src/pages/AlarmTipTimeConfig.vue Normal file
View File

@ -0,0 +1,261 @@
<template>
<div class="q-pa-md">
<q-table
ref="tableRef"
title="报警提示时间配置"
:style="{ height: tableHeight + 'px' }"
:rows="rows"
:columns="columnDefs"
row-key="id"
v-model:pagination="pagination"
:rows-per-page-options="[10, 20, 50, 100]"
:loading="loading"
binary-state-sort
@request="onRequest"
>
<template v-slot:top-right>
<q-btn color="primary" label="新建" @click="createFormShow = true" />
</template>
<template v-slot:body-cell-operations="props">
<q-td :props="props">
<div class="q-gutter-sm row justify-center">
<q-btn
color="primary"
:disable="operateDisabled"
label="编辑"
@click="editData(props.row)"
/>
</div>
</q-td>
</template>
</q-table>
<q-dialog
v-model="createFormShow"
persistent
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 350px">
<q-form
ref="myForm"
@submit="onCreate"
@reset="onReset"
class="q-gutter-md"
>
<q-card-section class="q-gutter-sm">
<div class="text-h6">
{{ creatForm.id ? '编辑时间配置' : '新建时间配置' }}
</div>
<!-- <q-input
outlined
label="时间名称"
v-model="creatForm.timeName"
lazy-rules
:rules="[(val) => val.trim() != '' || '时间名称不能为空']"
/> -->
<q-input
outlined
label="开始时间"
type="number"
v-model.number="creatForm.startHour"
lazy-rules
:rules="[(val) => val != '' || '时间名称不能为空']"
/>
<q-input
outlined
label="结束时间"
type="number"
v-model.number="creatForm.endHour"
lazy-rules
:rules="[(val) => val != '' || '时间名称不能为空']"
/>
<q-select
outlined
label="时间类型"
v-model="creatForm.timeType"
:options="optionsTimeType"
:rules="[(val) => val.trim() != '' || '时间类型不能为空']"
/>
</q-card-section>
<q-card-actions align="right">
<q-btn color="primary" label="创建" type="submit" />
<q-btn label="取消" type="reset" v-close-popup />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useQuasar, type QTableColumn, QForm, QTable } from 'quasar';
import {
alarmTipTimeConfigPageQuery,
TimeConfigItem,
creatOrEditTimeConfig,
ShowTipTimeConfig,
TipTimeConfig,
} from '../api/AlarmTipTimeConfig';
import { ApiError } from 'src/boot/axios';
const $q = useQuasar();
const props = withDefaults(
defineProps<{
sizeHeight: number;
}>(),
{ sizeHeight: 500 }
);
const tableHeight = computed(() => {
return props.sizeHeight - 32;
});
const columnDefs: QTableColumn[] = [
{
name: 'id',
label: '编号',
field: 'id',
required: true,
align: 'center',
},
/* {
name: 'timeName',
label: '时间名称',
field: 'timeName',
align: 'center',
}, */
{
name: 'startHour',
label: '开始小时',
field: 'startHour',
align: 'center',
},
{
name: 'endHour',
label: '结束小时',
field: 'endHour',
align: 'center',
},
{
name: 'timeType',
label: '时间类型',
field: (row) => {
if (row.timeType) {
return (ShowTipTimeConfig as never)[row.timeType + ''];
}
},
align: 'center',
},
{ name: 'operations', label: '操作', field: 'operations', align: 'center' },
];
const operateDisabled = ref(false);
const tableRef = ref();
const rows = reactive([]);
const loading = ref(false);
const pagination = ref({
sortBy: 'desc',
descending: false,
page: 1,
rowsPerPage: 10,
rowsNumber: 10,
});
const onRequest: QTable['onRequest'] = async (props) => {
const { page, rowsPerPage, sortBy, descending } = props.pagination;
loading.value = true;
try {
let response = await alarmTipTimeConfigPageQuery({
current: page,
size: rowsPerPage,
});
const pageData = response;
pagination.value.rowsNumber = pageData.total;
pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage;
pagination.value.sortBy = sortBy;
pagination.value.descending = descending;
rows.splice(0, rows.length, ...(pageData.records as []));
} catch (err) {
$q.notify({
type: 'negative',
message: '无法获取时间配置列表',
});
} finally {
loading.value = false;
}
};
onMounted(() => {
setTimeout(() => {
tableRef.value.requestServerInteraction();
});
});
const createFormShow = ref(false);
const myForm = ref<QForm | null>(null);
const creatForm = reactive({
id: '',
timeName: '',
startHour: '',
endHour: '',
timeType: '',
publicPeak: '',
});
const optionsTimeType = ['早高峰', '晚高峰', '低峰'];
function onCreate() {
myForm.value?.validate().then(async (res) => {
if (res) {
operateDisabled.value = true;
try {
const params = {
id: +creatForm.id,
timeName: creatForm.timeName,
startHour: creatForm.startHour,
endHour: creatForm.endHour,
timeType: (TipTimeConfig as never)[creatForm.timeType],
};
await creatOrEditTimeConfig(params);
onReset();
createFormShow.value = false;
tableRef.value.requestServerInteraction(); // 刷新列表
} catch (err) {
const apiErr = err as ApiError;
$q.notify({
type: 'negative',
message: apiErr.title,
});
} finally {
operateDisabled.value = false;
}
}
});
}
function editData(row: TimeConfigItem) {
creatForm.id = row.id + '';
creatForm.timeName = row.timeName;
creatForm.startHour = row.startHour;
creatForm.endHour = row.endHour;
creatForm.timeType = (ShowTipTimeConfig as never)[row.timeType + ''];
createFormShow.value = true;
}
function onReset() {
creatForm.id = '';
creatForm.timeName = '';
creatForm.startHour = '';
creatForm.endHour = '';
creatForm.timeType = '';
creatForm.publicPeak = '';
myForm.value?.resetValidation();
}
</script>

84
src/pages/DecisionInfoManage.vue
View File

@ -31,7 +31,7 @@
class="q-mr-md"
color="primary"
label="查询"
@click="searchDialog = true"
@click="openSearchDialog"
/>
<q-btn color="primary" label="新建" @click="createFormShow = true" />
</template>
@ -81,12 +81,13 @@
:rules="[(val) => val.length > 0 || '请选择故障类型！']"
@blur="searchLocationType"
/>
<!-- <q-select
<q-select
outlined
label="时间定义类型"
v-model="creatForm.timeType"
v-model="creatForm.tipTimeIds"
multiple
:options="optionsTimeType"
/> -->
/>
<q-select
outlined
label="地点定义类型"
@ -158,7 +159,6 @@ import {
alarmInfoPageQuery,
deleteAlarmInfo,
createAlarmInfo,
updataAlarmInfo,
AlarmInfoListItem,
getDeviceAreaByAlarmType,
AreaConfigItem,
@ -167,6 +167,8 @@ import {
showAlertTypeData,
saveAlertTypeData,
} from 'src/components/alarm/alarmInfoEnum';
import { ApiError } from 'src/boot/axios';
import { ShowTipTimeConfig, TipTimeConfig } from 'src/api/AlarmTipTimeConfig';
const $q = useQuasar();
@ -199,12 +201,19 @@ const columnDefs: QTableColumn[] = [
},
align: 'center',
},
/* {
{
name: 'timeType',
label: '时间定义类型',
field: 'timeType',
field: (row: AlarmInfoListItem) => {
if (row.timeConfigList) {
const ref = row.timeConfigList.map(
(timeConfig) => (ShowTipTimeConfig as never)[timeConfig.timeType + '']
);
return ref.join('\\');
}
},
align: 'center',
}, */
},
{
name: 'areaConfigId',
label: '地点定义类型',
@ -284,15 +293,13 @@ const filter = ref({
alertType: '',
areaConfigName: '',
});
function openSearchDialog() {
filter.value = { alertType: '', areaConfigName: '' };
searchDialog.value = true;
}
function searchDecisionInfo() {
searchDialog.value = false;
try {
tableRef.value.requestServerInteraction();
} finally {
setTimeout(() => {
filter.value = { alertType: '', areaConfigName: '' };
});
}
tableRef.value.requestServerInteraction();
}
const createFormShow = ref(false);
@ -300,7 +307,7 @@ const myForm = ref<QForm | null>(null);
const creatForm = reactive({
id: '',
alertType: '',
timeType: '',
tipTimeIds: [],
areaConfigId: '',
drivingInfo: '',
submissionInfo: '',
@ -323,20 +330,10 @@ const optionsAlertType = [
'计轴大面积橙光带',
'道岔大面积失表',
'列车信号故障',
'联锁区红光带',
'联锁区橙光带',
];
const optionsTimeType = ['CLOCK_7_9', 'CLOCK_7_9_AND_19_21', '无'];
let optionsLocationType = ref<string[]>([]);
function onReset() {
creatForm.id = '';
creatForm.alertType = '';
creatForm.timeType = '';
creatForm.areaConfigId = '';
creatForm.drivingInfo = '';
creatForm.submissionInfo = '';
myForm.value?.resetValidation();
}
let optionsLocationList: AreaConfigItem[] = [];
async function searchLocationType() {
try {
@ -354,6 +351,8 @@ async function searchLocationType() {
}
}
const optionsTimeType = ['早高峰', '晚高峰', '低峰'];
function onCreate() {
myForm.value?.validate().then(async (res) => {
if (res) {
@ -366,10 +365,14 @@ function onCreate() {
break;
}
}
const tipTimeIds: string[] = [];
creatForm.tipTimeIds?.forEach((tipTimeId) => {
tipTimeIds.push((TipTimeConfig as never)[tipTimeId + '']);
});
const params = {
id: +creatForm.id,
alertType: (saveAlertTypeData as never)[creatForm.alertType],
timeType: creatForm.timeType,
tipTimeIds: tipTimeIds,
areaConfigId: areaConfigId as number,
drivingInfo: creatForm.drivingInfo,
submissionInfo: creatForm.submissionInfo,
@ -380,18 +383,15 @@ function onCreate() {
if (creatForm.submissionInfo) {
params.submissionInfo = JSON.stringify(creatForm.submissionInfo);
}
if (creatForm.id) {
await updataAlarmInfo(+creatForm.id, params);
} else {
await createAlarmInfo(params);
}
await createAlarmInfo(params);
onReset();
createFormShow.value = false;
tableRef.value.requestServerInteraction(); // 刷新列表
} catch (err) {
const apiErr = err as ApiError;
$q.notify({
type: 'negative',
message: '创建或修改决策信息错误',
message: apiErr.title,
});
} finally {
operateDisabled.value = false;
@ -403,7 +403,9 @@ function onCreate() {
function editData(row: AlarmInfoListItem) {
creatForm.id = row.id + '';
creatForm.alertType = (showAlertTypeData as never)[row.alertType + ''];
creatForm.timeType = row.timeType || '';
creatForm.tipTimeIds = row.timeConfigList?.map(
(timeConfig) => (ShowTipTimeConfig as never)[timeConfig.timeType + '']
);
creatForm.areaConfigId = row.areaConfigName as string;
creatForm.drivingInfo = row.drivingInfo ? JSON.parse(row.drivingInfo) : '';
creatForm.submissionInfo = row.submissionInfo
@ -434,6 +436,16 @@ async function deleteData(row: AlarmInfoListItem) {
operateDisabled.value = false;
});
}
function onReset() {
creatForm.id = '';
creatForm.alertType = '';
creatForm.tipTimeIds = [];
creatForm.areaConfigId = '';
creatForm.drivingInfo = '';
creatForm.submissionInfo = '';
myForm.value?.resetValidation();
}
</script>
<style scoped>

5
src/router/routes.ts
View File

@ -50,6 +50,11 @@ const routes: RouteRecordRaw[] = [
name: 'thresholdValue',
component: () => import('pages/AlarmThresholdValue.vue'),
},
{
path: 'alarmTipTimeConfig',
name: 'alarmTipTimeConfig',
component: () => import('pages/AlarmTipTimeConfig.vue'),
},
],
},
{

5
src/stores/draw-store.ts
View File

@ -1,6 +1,7 @@
import { defineStore } from 'pinia';
import { destroyDrawApp, getDrawApp, initDrawApp } from 'src/drawApp';
import { DrawAssistant, IJlCanvas, IDrawApp, JlGraphic } from 'src/jl-graphic';
import { markRaw } from 'vue';
export const useDrawStore = defineStore('draw', {
state: () => ({
@ -65,8 +66,8 @@ export const useDrawStore = defineStore('draw', {
}
}
});
app.on('graphicselectedchange', () => {
this.selectedGraphics = app.selectedGraphics;
app.on('graphicselected', (graphics) => {
this.selectedGraphics = markRaw(graphics);
});
this.selectedGraphics = [];
return app;

5
src/stores/line-net-store.ts
View File

@ -5,6 +5,7 @@ import {
getLineNetApp,
destroyLineNetApp,
} from 'src/drawApp/lineNetApp';
import { markRaw } from 'vue';
export interface AlarmInfo {
id: string;
level: string;
@ -57,8 +58,8 @@ export const useLineNetStore = defineStore('lineNet', {
},
initLineNetApp() {
const app = initLineNetApp();
app.on('graphicselectedchange', () => {
this.selectedGraphics = app.selectedGraphics;
app.on('graphicselected', (graphics) => {
this.selectedGraphics = markRaw(graphics);
});
this.selectedGraphics = [];
return app;

5
src/stores/line-store.ts
View File

@ -1,6 +1,7 @@
import { defineStore } from 'pinia';
import { IJlCanvas, JlGraphic, IGraphicApp } from 'src/jl-graphic';
import { initLineApp, getLineApp, destroyLineApp } from 'src/drawApp/lineApp';
import { markRaw } from 'vue';
export const useLineStore = defineStore('line', {
state: () => ({
@ -39,8 +40,8 @@ export const useLineStore = defineStore('line', {
initLineApp(lineId: number) {
this.setLineId(lineId);
const app = initLineApp(lineId);
app.on('graphicselectedchange', () => {
this.selectedGraphics = app.selectedGraphics;
app.on('graphicselected', (graphics) => {
this.selectedGraphics = markRaw(graphics);
});
this.selectedGraphics = [];
return app;