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

完善绘制风格配置

Browse Source
This commit is contained in:
joylink_zhaoerwei 2024-10-12 17:02:24 +08:00
parent 975a8a89aa
commit aacfdf8b2d
4 changed files with 175 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Iscs/IscsBottomAlarm.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div style="height: 50px; font-size: 24px">状态栏</div>
</template>

106
src/configs/iscsStyleConfig.ts
View File

@ -1,118 +1,182 @@
import { IscsStyle } from 'src/api/DraftApi';
export interface I_DA_SHI_ZHI_NENG {
menuName: string;
icon: string;
activeIcon: string;
sunMenu: {
sunMenuName: string;
displayForm: DisplayForm;
heightPercent?: number; //绘制占的百分比
}[];
}
export enum DisplayForm {
draw,
component,
drawAndComponent,
}
//达实智能（福州一号线）
const DA_SHI_ZHI_NENG = [
const DA_SHI_ZHI_NENG: I_DA_SHI_ZHI_NENG[] = [
{
menuName: 'Plan',
icon: 'svguse:../iscsMenuIcon.svg#icon-Plan',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Plan-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [
{ sunMenuName: '设备运行图', displayForm: DisplayForm.draw },
{ sunMenuName: '站厅布局图', displayForm: DisplayForm.draw },
{ sunMenuName: '站台布局图', displayForm: DisplayForm.draw },
{ sunMenuName: '出入口布局图', displayForm: DisplayForm.draw },
],
},
{
menuName: 'PSCADA',
icon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [
{ sunMenuName: '一次图', displayForm: DisplayForm.draw },
{ sunMenuName: '自动化系统图', displayForm: DisplayForm.draw },
{ sunMenuName: '定值召唤', displayForm: DisplayForm.draw },
{ sunMenuName: '实时SOE', displayForm: DisplayForm.draw },
{ sunMenuName: '历史SOE', displayForm: DisplayForm.draw },
{ sunMenuName: '光字幕', displayForm: DisplayForm.draw },
{ sunMenuName: '交流直屏', displayForm: DisplayForm.draw },
],
},
{
menuName: 'BAS',
icon: 'svguse:../iscsMenuIcon.svg#icon-BAS',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-BAS-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [
{ sunMenuName: '大系统', displayForm: DisplayForm.draw },
{ sunMenuName: '小系统', displayForm: DisplayForm.draw },
{ sunMenuName: '隧道通风系统', displayForm: DisplayForm.draw },
{ sunMenuName: '水系统', displayForm: DisplayForm.draw },
{ sunMenuName: '给排水', displayForm: DisplayForm.draw },
{ sunMenuName: '电扶梯', displayForm: DisplayForm.draw },
{ sunMenuName: '照明系统', displayForm: DisplayForm.draw },
{ sunMenuName: '传感器', displayForm: DisplayForm.draw },
{ sunMenuName: '导向标识/广告', displayForm: DisplayForm.draw },
{ sunMenuName: '人防门', displayForm: DisplayForm.draw },
{ sunMenuName: 'BAS系统', displayForm: DisplayForm.draw },
{ sunMenuName: '模式控制', displayForm: DisplayForm.draw },
{ sunMenuName: '时间表', displayForm: DisplayForm.draw },
{ sunMenuName: '操作场所切换', displayForm: DisplayForm.draw },
],
},
{
menuName: 'FAS',
icon: 'svguse:../iscsMenuIcon.svg#icon-FAS',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-FAS-active',
sunMenu: [
{ sunMenuName: '设备分区图' },
{ sunMenuName: '火灾报警平面图' },
{ sunMenuName: 'FAS气灭系统图' },
{ sunMenuName: '设备分区图', displayForm: DisplayForm.draw },
{ sunMenuName: '火灾报警平面图', displayForm: DisplayForm.draw },
{ sunMenuName: 'FAS气灭系统图', displayForm: DisplayForm.draw },
],
},
{
menuName: 'TFDS',
icon: 'svguse:../iscsMenuIcon.svg#icon-TFDS',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-TFDS-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [
{ sunMenuName: '感温光纤状态监视图', displayForm: DisplayForm.draw },
],
},
{
menuName: 'AFC',
icon: 'svguse:../iscsMenuIcon.svg#icon-AFC',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-AFC-active',
sunMenu: [{ sunMenuName: '屏蔽门' }],
sunMenu: [
{ sunMenuName: '自动售检票系统监视图', displayForm: DisplayForm.draw },
],
},
{
menuName: 'CCTV',
icon: 'svguse:../iscsMenuIcon.svg#icon-CCTV',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-CCTV-active',
sunMenu: [{ sunMenuName: '监控布局图' }, { sunMenuName: 'CCTV设备布局图' }],
sunMenu: [
{ sunMenuName: '监控布局图', displayForm: DisplayForm.draw },
{ sunMenuName: 'CCTV设备布局图', displayForm: DisplayForm.draw },
],
},
{
menuName: 'PIS',
icon: 'svguse:../iscsMenuIcon.svg#icon-PIS',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PIS-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [{ sunMenuName: 'PIS监控', displayForm: DisplayForm.draw }],
},
{
menuName: 'PA',
icon: 'svguse:../iscsMenuIcon.svg#icon-PA',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PA-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [{ sunMenuName: 'PA监控', displayForm: DisplayForm.draw }],
},
{
menuName: 'SIG/RAD',
icon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
},
{
menuName: 'ACS',
icon: 'svguse:../iscsMenuIcon.svg#icon-ACS',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-ACS-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [
{ sunMenuName: '门禁总览图', displayForm: DisplayForm.draw },
{ sunMenuName: '门禁监视布局图-站厅', displayForm: DisplayForm.draw },
{ sunMenuName: '门禁监视布局图-站台', displayForm: DisplayForm.draw },
],
},
{
menuName: 'PSD',
icon: 'svguse:../iscsMenuIcon.svg#icon-PSD',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSD-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [{ sunMenuName: '屏蔽门系统图', displayForm: DisplayForm.draw }],
},
{
menuName: 'FG',
icon: 'svguse:../iscsMenuIcon.svg#icon-FG',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-FG-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [
{ sunMenuName: '防淹门状态监视图', displayForm: DisplayForm.draw },
],
},
{
menuName: 'ALM',
icon: 'svguse:../iscsMenuIcon.svg#icon-ALM',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-ALM-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
},
{
menuName: 'NMS',
icon: 'svguse:../iscsMenuIcon.svg#icon-NMS',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-NMS-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [{ sunMenuName: '网络状态监视图', displayForm: DisplayForm.draw }],
},
{
menuName: 'OPS',
icon: 'svguse:../iscsMenuIcon.svg#icon-OPS',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-OPS-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
},
{
menuName: '数据',
icon: 'svguse:../iscsMenuIcon.svg#icon-Data',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Data-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
},
{
menuName: '联动',
icon: 'svguse:../iscsMenuIcon.svg#icon-Linkage',
activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Linkage-active',
sunMenu: [{ sunMenuName: '子目录' }],
sunMenu: [
{
sunMenuName: '子目录',
displayForm: DisplayForm.drawAndComponent,
heightPercent: 50,
},
],
},
];

8
src/graphics/line/LineDrawAssistant.ts
View File

@ -110,6 +110,14 @@ export class LineDraw extends GraphicDrawAssistant<LineTemplate, ILineData> {
}
}
onRightClick(): void {
if (this.points.length < 2) {
this.finish();
return;
}
this.createAndStore(true);
}
onEsc(): void {
if (this.points.length < 2) {
this.finish();

111
src/layouts/IscsDrawLayout.vue
View File

@ -8,6 +8,14 @@
<span class="data-margin">{{ currentTime }}</span>
</div>
<div class="top-menu-right">
<q-btn
round
dense
flat
color="white"
:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
@click="$q.fullscreen.toggle()"
/>
<q-btn color="accent" label="功能菜单">
<q-menu>
<q-list style="min-width: 100px">
@ -167,13 +175,26 @@
</q-drawer>
<q-page-container>
<div id="draw-app-container" class="overflow-hidden"></div>
<div
ref="drawAppContainer"
v-show="subMenuDisplayForm !== DisplayForm.component"
id="draw-app-container"
class="overflow-hidden"
></div>
<q-separator
inset
v-show="subMenuDisplayForm == DisplayForm.drawAndComponent"
></q-separator>
<div
v-if="subMenuDisplayForm !== DisplayForm.draw"
class="overflow-hidden"
>
组件展示
</div>
</q-page-container>
<q-footer>
<q-toolbar>
<q-toolbar-title>状态栏</q-toolbar-title>
</q-toolbar>
<iscs-bottom-alarm />
<q-resize-observer @resize="onFooterResize" />
</q-footer>
@ -210,16 +231,8 @@
:height="drawDialogHeight"
v-model="showDrawTool"
canNotClose
position="left"
>
<!-- <q-btn-toggle
v-model="selectUtil"
color="brown"
text-color="white"
toggle-color="orange"
toggle-text-color="black"
:options="utilsOption"
@update:model-value="drawSelect"
> -->
<div class="row wrap">
<template v-for="(ctl, idx) in utilsOption" :key="idx">
<q-btn
@ -232,9 +245,6 @@
</q-btn>
</template>
</div>
<!-- <q-tooltip>{{ ctl.tip }}</q-tooltip> -->
<!-- </q-btn-toggle> -->
</draggable-dialog>
<q-resize-observer @resize="onResize" />
</q-layout>
@ -250,7 +260,11 @@ import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
import { Arrow } from 'src/graphics/arrow/Arrow';
import { TextContent } from 'src/graphics/textContent/TextContent';
import { Rect } from 'src/graphics/rect/Rect';
import { getIscsStyleConfig } from 'src/configs/iscsStyleConfig';
import {
DisplayForm,
getIscsStyleConfig,
I_DA_SHI_ZHI_NENG,
} from 'src/configs/iscsStyleConfig';
import { IscsStyle, saveAsDraft } from 'src/api/DraftApi';
import DraggableDialog from 'src/components/common/DraggableDialog.vue';
import { successNotify } from 'src/utils/CommonNotify';
@ -263,6 +277,7 @@ import { JlOperation } from 'jl-graphic';
import { common } from 'src/protos/common';
import { toStorageTransform } from 'src/drawApp/graphics/GraphicDataBase';
import { Circle } from 'src/graphics/circle/Circle';
import IscsBottomAlarm from 'src/components/Iscs/IscsBottomAlarm.vue';
const $q = useQuasar();
const route = useRoute();
@ -531,8 +546,16 @@ function onResize() {
canvasHeight.value = clientHeight - headerHeight.value - footerHeight.value;
const dom = document.getElementById('draw-app-container');
if (dom) {
dom.style.width = canvasWidth.value + 'px';
dom.style.height = canvasHeight.value + 'px';
if (subMenuDisplayForm.value == DisplayForm.draw) {
dom.style.width = canvasWidth.value + 'px';
dom.style.height = canvasHeight.value + 'px';
} else if (subMenuDisplayForm.value == DisplayForm.drawAndComponent) {
const heightPercent = subMenuOption.value.find(
(subMenu) => subMenu.value == selectSubMenuName.value
).heightPercent;
dom.style.width = canvasWidth.value + 'px';
dom.style.height = (heightPercent / 100) * canvasHeight.value + 'px';
}
}
}
@ -575,6 +598,7 @@ const updateTime = () => {
};
//目录车站切换
const subMenuDisplayForm = ref(DisplayForm.draw);
const selectMenuName = ref('');
let menuOption = [];
function selectedMenu(menuName: string) {
@ -582,30 +606,45 @@ function selectedMenu(menuName: string) {
for (let i = 0; i < iscsTypeConfig.length; i++) {
if (iscsTypeConfig[i].menuName == menuName) {
subMenuOption.value = iscsTypeConfig[i].sunMenu.map((sunMenu) => {
return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
return {
label: sunMenu.sunMenuName,
value: sunMenu.sunMenuName,
displayForm: sunMenu.displayForm,
heightPercent: sunMenu?.heightPercent || 0,
};
});
selectSubMenuName.value = subMenuOption.value[0].value;
selectedSubMenu(selectSubMenuName.value);
break;
}
}
handleUtilsOption();
}
const selectSubMenuName = ref('');
const subMenuOption = ref([]);
const subMenuOption = ref<
{
label: string;
value: string;
displayForm: DisplayForm;
heightPercent?: number;
}[]
>([]);
function selectedSubMenu(subName: string) {
drawStore.selectSubmenuAndStation.submenu = subName;
forceReloadDate();
handleUtilsOption();
subMenuDisplayForm.value = subMenuOption.value.find(
(subMenu) => subMenu.value == subName
).displayForm;
if (subMenuDisplayForm.value !== DisplayForm.component) {
showDrawTool.value = true;
forceReloadDate();
handleUtilsOption();
} else {
showDrawTool.value = false;
}
onResize();
}
let iscsTypeConfig: {
menuName: string;
icon: string;
activeIcon: string;
sunMenu: { sunMenuName: string }[];
}[] = [];
let iscsTypeConfig: I_DA_SHI_ZHI_NENG[] = [];
function initMunuOption() {
iscsTypeConfig = getIscsStyleConfig(route.query.iscsStyle as IscsStyle);
menuOption = iscsTypeConfig.map((menu) => {
@ -618,9 +657,17 @@ function initMunuOption() {
});
selectMenuName.value = menuOption[0].value;
subMenuOption.value = iscsTypeConfig[0].sunMenu.map((sunMenu) => {
return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
return {
label: sunMenu.sunMenuName,
value: sunMenu.sunMenuName,
displayForm: sunMenu.displayForm,
heightPercent: sunMenu?.heightPercent || 0,
};
});
selectSubMenuName.value = subMenuOption.value[0].value;
subMenuDisplayForm.value = subMenuOption.value[0].displayForm;
showDrawTool.value =
subMenuOption.value[0].displayForm !== DisplayForm.component;
drawStore.selectSubmenuAndStation.submenu = selectSubMenuName.value;
drawStore.selectSubmenuAndStation.station = stationOption[0].value;
}
@ -733,7 +780,7 @@ onUnmounted(() => {
top: 10px;
}
.menu-nav-text {
width: 90px;
width: 4.8vw;
margin-top: 28px;
text-align: center;
color: white;