显示控制调整
This commit is contained in:
dong
parent
6e6907e299
commit
bcd75ea583
@ -10,6 +10,12 @@
|
||||
label="全部"
|
||||
@update:modelValue="allListFn"
|
||||
/>
|
||||
<q-checkbox
|
||||
style="width: 150px"
|
||||
v-model="defaultCheck"
|
||||
label="默认显示"
|
||||
@update:modelValue="defaultListFn"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="row justify-center">
|
||||
@ -33,12 +39,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useLineStore } from 'src/stores/line-store';
|
||||
|
||||
interface ItemData {
|
||||
label: string;
|
||||
value: string;
|
||||
defaultShow: boolean;
|
||||
}
|
||||
|
||||
const lineStore = useLineStore();
|
||||
@ -72,6 +79,7 @@ watch(
|
||||
if (val) {
|
||||
list.value = props.showLayer;
|
||||
allList.value = props.layerList.length == props.showLayer.length;
|
||||
defaultCheck.value = isEqualArr(defaultShowList.value, list.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -83,6 +91,7 @@ watch(
|
||||
(val) => {
|
||||
lineStore.setShowLayer(val);
|
||||
allList.value = props.layerList.length == val.length;
|
||||
defaultCheck.value = isEqualArr(defaultShowList.value, list.value);
|
||||
emits('setShowLayer', val);
|
||||
}
|
||||
);
|
||||
@ -90,5 +99,35 @@ watch(
|
||||
function onDialogCancel() {
|
||||
emits('onDialogClose');
|
||||
}
|
||||
|
||||
const defaultCheck = ref(false);
|
||||
const defaultShowList = computed(() => {
|
||||
const arr: string[] = [];
|
||||
props.layerList.forEach((item) => {
|
||||
if (item.defaultShow) {
|
||||
arr.push(item.value);
|
||||
}
|
||||
});
|
||||
return arr;
|
||||
});
|
||||
|
||||
function defaultListFn() {
|
||||
const arr: string[] = [];
|
||||
if (defaultCheck.value) {
|
||||
defaultShowList.value.forEach((item) => {
|
||||
arr.push(item);
|
||||
});
|
||||
list.value = arr;
|
||||
} else {
|
||||
list.value = arr;
|
||||
}
|
||||
}
|
||||
function isEqualArr(arr1: string[], arr2: string[]): boolean {
|
||||
let s = false;
|
||||
if (arr1.length === arr2.length && arr1.filter((t) => !arr2.includes(t))) {
|
||||
s = true;
|
||||
}
|
||||
return s;
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
@ -206,45 +206,29 @@ export function destroyDrawApp(): void {
|
||||
}
|
||||
}
|
||||
|
||||
const showType = [
|
||||
// 默认显示的图层
|
||||
Section.Type,
|
||||
AxleCounting.Type,
|
||||
Platform.Type,
|
||||
Station.Type,
|
||||
Turnout.Type,
|
||||
Signal.Type,
|
||||
Separator.Type,
|
||||
StopPosition.Type,
|
||||
SpksSwitch.Type,
|
||||
GatedBox.Type,
|
||||
EsbButton.Type,
|
||||
Transponder.Type,
|
||||
TrainWindow.Type,
|
||||
SlopeKiloMarker.Type,
|
||||
Slope.Type,
|
||||
CurvatureKiloMarker.Type,
|
||||
Curvature.Type,
|
||||
];
|
||||
export const drawLayerList = [
|
||||
// 图层列表
|
||||
{ label: '区段', value: Section.Type },
|
||||
{ label: 'SectionLink', value: SectionLink.Type },
|
||||
{ label: '计轴', value: AxleCounting.Type },
|
||||
{ label: '站台', value: Platform.Type },
|
||||
{ label: '车站', value: Station.Type },
|
||||
{ label: '道岔', value: Turnout.Type },
|
||||
{ label: '信号机', value: Signal.Type },
|
||||
{ label: '分隔符', value: Separator.Type },
|
||||
{ label: '停车位置标', value: StopPosition.Type },
|
||||
{ label: 'Spks开关', value: SpksSwitch.Type },
|
||||
{ label: '门控箱', value: GatedBox.Type },
|
||||
{ label: '紧急关闭按钮', value: EsbButton.Type },
|
||||
{ label: '应答器', value: Transponder.Type },
|
||||
{ label: '车次窗', value: TrainWindow.Type },
|
||||
{ label: '计轴区段', value: AxleCountingSection.Type },
|
||||
{ label: '逻辑区段', value: LogicSection.Type },
|
||||
{ label: 'Link', value: Link.Type },
|
||||
// 图层列表 默认显示的图层defaultShow: true
|
||||
{ label: '区段', value: Section.Type, defaultShow: true },
|
||||
{ label: 'SectionLink', value: SectionLink.Type, defaultShow: false },
|
||||
{ label: '计轴', value: AxleCounting.Type, defaultShow: true },
|
||||
{ label: '站台', value: Platform.Type, defaultShow: true },
|
||||
{ label: '车站', value: Station.Type, defaultShow: true },
|
||||
{ label: '道岔', value: Turnout.Type, defaultShow: true },
|
||||
{ label: '信号机', value: Signal.Type, defaultShow: true },
|
||||
{ label: '分隔符', value: Separator.Type, defaultShow: true },
|
||||
{ label: '停车位置标', value: StopPosition.Type, defaultShow: true },
|
||||
{ label: 'Spks开关', value: SpksSwitch.Type, defaultShow: true },
|
||||
{ label: '门控箱', value: GatedBox.Type, defaultShow: true },
|
||||
{ label: '紧急关闭按钮', value: EsbButton.Type, defaultShow: true },
|
||||
{ label: '应答器', value: Transponder.Type, defaultShow: true },
|
||||
{ label: '车次窗', value: TrainWindow.Type, defaultShow: true },
|
||||
{ label: '计轴区段', value: AxleCountingSection.Type, defaultShow: false },
|
||||
{ label: '逻辑区段', value: LogicSection.Type, defaultShow: false },
|
||||
{ label: 'Link', value: Link.Type, defaultShow: false },
|
||||
{ label: '坡度公里标', value: SlopeKiloMarker.Type, defaultShow: true },
|
||||
{ label: '坡度', value: Slope.Type, defaultShow: true },
|
||||
{ label: '曲度公里标', value: CurvatureKiloMarker.Type, defaultShow: true },
|
||||
{ label: '曲度', value: Curvature.Type, defaultShow: true },
|
||||
];
|
||||
|
||||
export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
@ -558,16 +542,22 @@ export async function loadLinkDatas(app: GraphicApp) {
|
||||
}
|
||||
|
||||
function initShowLayer(app: GraphicApp) {
|
||||
const showTypeList: string[] = [];
|
||||
drawLayerList.forEach((item) => {
|
||||
if (item.defaultShow) {
|
||||
showTypeList.push(item.value);
|
||||
}
|
||||
});
|
||||
const alllGraphic = app.queryStore.getAllGraphics();
|
||||
alllGraphic.forEach((g) => {
|
||||
if (showType.includes(g.type)) {
|
||||
if (showTypeList.includes(g.type)) {
|
||||
g.visible = true;
|
||||
} else {
|
||||
g.visible = false;
|
||||
}
|
||||
});
|
||||
const lineStore = useLineStore();
|
||||
lineStore.setShowLayer(showType);
|
||||
lineStore.setShowLayer(showTypeList);
|
||||
}
|
||||
|
||||
export async function loadDrawDatas(app: GraphicApp) {
|
||||
|
||||
@ -48,13 +48,22 @@ import {
|
||||
AxleCountingTemplate,
|
||||
} from 'src/graphics/axleCounting/AxleCounting';
|
||||
import { AxleCountingData } from './graphics/AxleCountingInteraction';
|
||||
import { TrainWindowTemplate } from 'src/graphics/trainWindow/TrainWindow';
|
||||
import {
|
||||
TrainWindow,
|
||||
TrainWindowTemplate,
|
||||
} from 'src/graphics/trainWindow/TrainWindow';
|
||||
import { TrainWindowData } from './graphics/TrainWindowInteraction';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
|
||||
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
|
||||
import { AxleCountingSectionTemplate } from 'src/graphics/axleCountingSection/AxleCountingSection';
|
||||
import { LogicSectionTemplate } from 'src/graphics/logicSection/LogicSection';
|
||||
import {
|
||||
AxleCountingSection,
|
||||
AxleCountingSectionTemplate,
|
||||
} from 'src/graphics/axleCountingSection/AxleCountingSection';
|
||||
import {
|
||||
LogicSection,
|
||||
LogicSectionTemplate,
|
||||
} from 'src/graphics/logicSection/LogicSection';
|
||||
import {
|
||||
SectionLink,
|
||||
SectionLinkTemplate,
|
||||
@ -87,10 +96,22 @@ import {
|
||||
TransponderTemplate,
|
||||
} from 'src/graphics/transponder/Transponder';
|
||||
import { TransponderData } from './graphics/TransponderInteraction';
|
||||
import { SlopeKiloMarkerTemplate } from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
|
||||
import {
|
||||
SlopeKiloMarker,
|
||||
SlopeKiloMarkerTemplate,
|
||||
} from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
|
||||
import { SlopeKiloMarkerData } from './graphics/SlopeKiloMarkerInteraction';
|
||||
import { Link, LinkTemplate } from 'src/graphics/link/Link';
|
||||
import { LinkData } from './graphics/LinkInteraction';
|
||||
import { Slope, SlopeTemplate } from 'src/graphics/slope/Slope';
|
||||
import {
|
||||
CurvatureKiloMarker,
|
||||
CurvatureKiloMarkerTemplate,
|
||||
} from 'src/graphics/curvatureKiloMarker/CurvatureKiloMarker';
|
||||
import { Curvature, CurvatureTemplate } from 'src/graphics/curvature/Curvature';
|
||||
import { SlopeData } from './graphics/SlopeInteraction';
|
||||
import { CurvatureKiloMarkerData } from './graphics/CurvatureKiloMarkerInteraction';
|
||||
import { CurvatureData } from './graphics/CurvatureInteraction';
|
||||
|
||||
let lineApp: GraphicApp | null = null;
|
||||
|
||||
@ -117,39 +138,31 @@ const DefaultCanvasMenu = new ContextMenu({
|
||||
},
|
||||
],
|
||||
});
|
||||
const showType = [
|
||||
// 默认显示的图层
|
||||
Section.Type,
|
||||
Platform.Type,
|
||||
Station.Type,
|
||||
Turnout.Type,
|
||||
Signal.Type,
|
||||
Separator.Type,
|
||||
Train.Type,
|
||||
StopPosition.Type,
|
||||
SpksSwitch.Type,
|
||||
GatedBox.Type,
|
||||
EsbButton.Type,
|
||||
Transponder.Type,
|
||||
];
|
||||
|
||||
export const layerList = [
|
||||
// 图层列表
|
||||
{ label: '区段', value: Section.Type },
|
||||
{ label: 'SectionLink', value: SectionLink.Type },
|
||||
{ label: '计轴', value: AxleCounting.Type },
|
||||
{ label: '站台', value: Platform.Type },
|
||||
{ label: '车站', value: Station.Type },
|
||||
{ label: '道岔', value: Turnout.Type },
|
||||
{ label: '信号机', value: Signal.Type },
|
||||
{ label: '分隔符', value: Separator.Type },
|
||||
{ label: '列车', value: Train.Type },
|
||||
{ label: '停车位置标', value: StopPosition.Type },
|
||||
{ label: 'Spks开关', value: SpksSwitch.Type },
|
||||
{ label: '门控箱', value: GatedBox.Type },
|
||||
{ label: '紧急关闭按钮', value: EsbButton.Type },
|
||||
{ label: '应答器', value: Transponder.Type },
|
||||
{ label: 'Link', value: Link.Type },
|
||||
// 图层列表 默认显示的图层defaultShow: true
|
||||
{ label: '区段', value: Section.Type, defaultShow: true },
|
||||
{ label: 'SectionLink', value: SectionLink.Type, defaultShow: false },
|
||||
{ label: '计轴', value: AxleCounting.Type, defaultShow: false },
|
||||
{ label: '站台', value: Platform.Type, defaultShow: true },
|
||||
{ label: '车站', value: Station.Type, defaultShow: true },
|
||||
{ label: '道岔', value: Turnout.Type, defaultShow: true },
|
||||
{ label: '信号机', value: Signal.Type, defaultShow: true },
|
||||
{ label: '分隔符', value: Separator.Type, defaultShow: true },
|
||||
{ label: '列车', value: Train.Type, defaultShow: true },
|
||||
{ label: '停车位置标', value: StopPosition.Type, defaultShow: true },
|
||||
{ label: 'Spks开关', value: SpksSwitch.Type, defaultShow: true },
|
||||
{ label: '门控箱', value: GatedBox.Type, defaultShow: true },
|
||||
{ label: '紧急关闭按钮', value: EsbButton.Type, defaultShow: true },
|
||||
{ label: '应答器', value: Transponder.Type, defaultShow: true },
|
||||
{ label: 'Link', value: Link.Type, defaultShow: false },
|
||||
{ label: '车次窗', value: TrainWindow.Type, defaultShow: false },
|
||||
{ label: '计轴区段', value: AxleCountingSection.Type, defaultShow: false },
|
||||
{ label: '逻辑区段', value: LogicSection.Type, defaultShow: false },
|
||||
{ label: '坡度公里标', value: SlopeKiloMarker.Type, defaultShow: false },
|
||||
{ label: '坡度', value: Slope.Type, defaultShow: false },
|
||||
{ label: '曲度公里标', value: CurvatureKiloMarker.Type, defaultShow: false },
|
||||
{ label: '曲度', value: Curvature.Type, defaultShow: false },
|
||||
];
|
||||
|
||||
export function initLineApp(dom: HTMLElement): GraphicApp {
|
||||
@ -174,6 +187,10 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
|
||||
new TransponderTemplate(new TransponderData()),
|
||||
new SlopeKiloMarkerTemplate(new SlopeKiloMarkerData()),
|
||||
new LinkTemplate(new LinkData()),
|
||||
new TrainWindowTemplate(new TrainWindowData()),
|
||||
new SlopeTemplate(new SlopeData()),
|
||||
new CurvatureKiloMarkerTemplate(new CurvatureKiloMarkerData()),
|
||||
new CurvatureTemplate(new CurvatureData()),
|
||||
];
|
||||
lineApp.registerGraphicTemplates(...graphicTemplate);
|
||||
lineApp.setOptions({
|
||||
@ -292,11 +309,26 @@ export async function loadLineDatas(app: GraphicApp) {
|
||||
storage.slopeKiloMarker.forEach((slopeKilometer) => {
|
||||
datas.push(new SlopeKiloMarkerData(slopeKilometer));
|
||||
});
|
||||
storage.curvatureKiloMarker.forEach((curvatureKiloMarker) => {
|
||||
datas.push(new CurvatureKiloMarkerData(curvatureKiloMarker));
|
||||
});
|
||||
storage.slopes.forEach((slope) => {
|
||||
datas.push(new SlopeData(slope));
|
||||
});
|
||||
storage.curvatures.forEach((curvature) => {
|
||||
datas.push(new CurvatureData(curvature));
|
||||
});
|
||||
await app.loadGraphic(datas);
|
||||
|
||||
const showTypeList: string[] = [];
|
||||
layerList.forEach((item) => {
|
||||
if (item.defaultShow) {
|
||||
showTypeList.push(item.value);
|
||||
}
|
||||
});
|
||||
const alllGraphic = (lineApp as GraphicApp).queryStore.getAllGraphics();
|
||||
alllGraphic.forEach((g) => {
|
||||
if (showType.includes(g.type)) {
|
||||
if (showTypeList.includes(g.type)) {
|
||||
g.visible = true;
|
||||
} else {
|
||||
g.visible = false;
|
||||
@ -306,7 +338,7 @@ export async function loadLineDatas(app: GraphicApp) {
|
||||
(g as Transponder).labelGraphic.visible = false;
|
||||
}
|
||||
});
|
||||
lineStore.setShowLayer(showType);
|
||||
lineStore.setShowLayer(showTypeList);
|
||||
app.enableWsMassaging({
|
||||
engine: ClientEngine.Centrifugo,
|
||||
wsUrl: `${getWebsocketUrl()}`,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user