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

所有绘制app用一个store

This commit is contained in:
joylink_zhaoerwei 2024-09-14 16:33:04 +08:00
parent 2b180e5bec
commit f637a37383
13 changed files with 72 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/draw-app/CCTVDrawProperties.vue
View File

@ -25,7 +25,6 @@
<q-card-section>
<iscs-text-property
v-if="drawStore.selectedGraphicType === TextContent.Type"
:drawStore="drawStore"
/>
<cctv-button-property
v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
@ -40,12 +39,12 @@
</template>
<script setup lang="ts">
import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
import { useDrawStore } from 'src/stores/draw-store';
import CanvasProperty from './properties/CCTV/CanvasCCTVProperty.vue';
import IscsTextProperty from './properties/IscsTextProperty.vue';
import { TextContent } from 'src/graphics/textContent/TextContent';
import cctvButtonProperty from './properties/CCTV/CCTVButtonProperty.vue';
import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
const drawStore = useCCTVDrawStore();
const drawStore = useDrawStore();
</script>

7
src/components/draw-app/FireAlarmDrawProperties.vue
View File

@ -25,7 +25,6 @@
<q-card-section>
<iscs-text-property
v-if="drawStore.selectedGraphicType === TextContent.Type"
:drawStore="drawStore"
/>
</q-card-section>
</template>
@ -37,10 +36,10 @@
</template>
<script setup lang="ts">
import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
import CanvasProperty from './properties/CanvasProperty.vue';
import { useDrawStore } from 'src/stores/draw-store';
import CanvasProperty from './properties/FireAlarm/CanvasFireAlarmProperty.vue';
import IscsTextProperty from './properties/IscsTextProperty.vue';
import { TextContent } from 'src/graphics/textContent/TextContent';
const drawStore = useFireAlarmDrawStore();
const drawStore = useDrawStore();
</script>

4
src/components/draw-app/properties/CCTV/CCTVButtonProperty.vue
View File

@ -23,13 +23,13 @@
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
import { useDrawStore } from 'src/stores/draw-store';
import { CCTVGraphicData } from 'src/protos/cctv_graphic_data';
import { CCTVButtonData } from 'src/drawApp/graphics/CCTV/CCTVButtonInteraction';
const { data: cctvButtonModel, onUpdate } = useFormData(
new CCTVButtonData(),
useCCTVDrawStore().getDrawApp()
useDrawStore().getDrawApp()
);
const optionsButtonType = [

4
src/components/draw-app/properties/CCTV/CanvasCCTVProperty.vue
View File

@ -47,9 +47,9 @@
</template>
<script setup lang="ts">
import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, onUnmounted, reactive } from 'vue';
const drawStore = useCCTVDrawStore();
const drawStore = useDrawStore();
const canvas = reactive({
width: 1920,

4
src/components/draw-app/properties/CanvasProperty.vue → src/components/draw-app/properties/FireAlarm/CanvasFireAlarmProperty.vue
View File

@ -47,9 +47,9 @@
</template>
<script setup lang="ts">
import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
import { useDrawStore } from 'src/stores/draw-store';
import { onMounted, onUnmounted, reactive } from 'vue';
const drawStore = useFireAlarmDrawStore();
const drawStore = useDrawStore();
const canvas = reactive({
width: 1920,

3
src/components/draw-app/properties/IscsTextProperty.vue
View File

@ -40,8 +40,9 @@
<script setup lang="ts">
import { useFormData } from 'src/components/DrawAppFormUtils';
import { IscsTextData } from 'src/drawApp/graphics/IscsTextContentInteraction';
import { useDrawStore } from 'src/stores/draw-store';
const { drawStore } = defineProps(['drawStore'])
const drawStore = useDrawStore();
const { data: textContentModel, onUpdate } = useFormData(
new IscsTextData(),

10
src/drawApp/cctvApp.ts
View File

@ -6,7 +6,6 @@ import {
KeyListener,
newDrawApp,
} from 'jl-graphic';
import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
import { CCTVGraphicData } from 'src/protos/cctv_graphic_data';
import { fromUint8Array } from 'js-base64';
import {
@ -17,21 +16,22 @@ import {
import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
import { useDrawStore } from 'src/stores/draw-store';
let drawApp: IDrawApp | null = null;
export function getDrawApp(): IDrawApp | null {
export function getCCTVDrawApp(): IDrawApp | null {
return drawApp;
}
export function destroyDrawApp(): void {
export function destroyCCTVDrawApp(): void {
if (drawApp) {
drawApp.destroy();
drawApp = null;
}
}
export function initDrawApp(): IDrawApp {
export function initCCTVDrawApp(): IDrawApp {
const isSupportDeletion = (g: JlGraphic) => {
console.log(g);
return true;
@ -58,7 +58,7 @@ export function initDrawApp(): IDrawApp {
}
export async function loadDrawDatas(): Promise<IGraphicStorage> {
const drawStore = useFireAlarmDrawStore();
const drawStore = useDrawStore();
const id = drawStore.draftId;
if (!id) {
throw new Error('获取数据异常：为获取到草稿地图ID');

4
src/drawApp/commonApp.ts
View File

@ -4,7 +4,6 @@ import {
IDrawApp,
MenuItemOptions,
} from 'jl-graphic';
import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
import { toStorageTransform } from './graphics/GraphicDataBase';
import { Arrow, ArrowTemplate } from 'src/graphics/arrow/Arrow';
import { ArrowData } from './graphics/ArrowInteraction';
@ -16,6 +15,7 @@ import {
import { TextContentDraw } from 'src/graphics/textContent/TextContentDrawAssistant';
import { IscsTextData } from './graphics/IscsTextContentInteraction';
import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
import { useDrawStore } from 'src/stores/draw-store';
const UndoOptions: MenuItemOptions = {
name: '撤销',
@ -104,7 +104,7 @@ export function saveCommonDrawDatas(app: IDrawApp, storage: ICommonStorage) {
}
export function saveDrawToServer(base64: string) {
const drawStore = useFireAlarmDrawStore();
const drawStore = useDrawStore();
const id = drawStore.draftId;
if (!id) {
return;

13
src/drawApp/fireAlarmApp.ts
View File

@ -6,7 +6,6 @@ import {
KeyListener,
newDrawApp,
} from 'jl-graphic';
import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
import { FireAlarmGraphicData } from 'src/protos/fire_alarm_graphic_data';
import { fromUint8Array } from 'js-base64';
import {
@ -14,24 +13,22 @@ import {
saveCommonDrawDatas,
saveDrawToServer,
} from './commonApp';
// import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
// import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
// import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
import { useDrawStore } from 'src/stores/draw-store';
let drawApp: IDrawApp | null = null;
export function getDrawApp(): IDrawApp | null {
export function getFireAlarmDrawApp(): IDrawApp | null {
return drawApp;
}
export function destroyDrawApp(): void {
export function destroyFireAlarmDrawApp(): void {
if (drawApp) {
drawApp.destroy();
drawApp = null;
}
}
export function initDrawApp(): IDrawApp {
export function initFireAlarmDrawApp(): IDrawApp {
const isSupportDeletion = (g: JlGraphic) => {
console.log(g);
return true;
@ -58,7 +55,7 @@ export function initDrawApp(): IDrawApp {
}
export async function loadDrawDatas(): Promise<IGraphicStorage> {
const drawStore = useFireAlarmDrawStore();
const drawStore = useDrawStore();
const id = drawStore.draftId;
if (!id) {
throw new Error('获取数据异常：为获取到草稿地图ID');

9
src/layouts/CCTVDrawLayout.vue
View File

@ -110,18 +110,18 @@ import { onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { successNotify } from 'src/utils/CommonNotify';
import { useQuasar } from 'quasar';
import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
import { useDrawStore } from 'src/stores/draw-store';
import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
import { Arrow } from 'src/graphics/arrow/Arrow';
import { TextContent } from 'src/graphics/textContent/TextContent';
import { PictureType } from 'src/protos/picture';
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const searchId = ref(0);
const drawStore = useCCTVDrawStore();
const drawStore = useDrawStore();
watch(
() => drawStore.drawMode,
@ -190,6 +190,7 @@ const leftMenuConfig = [
onMounted(() => {
console.log('绘制应用layout mounted');
const dom = document.getElementById('draw-app-container');
drawStore.drawPictureType = PictureType.CCTV;
if (dom) {
drawStore.setDraftId(+route.params.id as number);
const drawApp = drawStore.initDrawApp();
@ -199,7 +200,7 @@ onMounted(() => {
} else {
drawStore.setDraftId(null);
}
const drawAssistantsTypes = [Arrow.Type,TextContent.Type,CCTVButton.Type];
const drawAssistantsTypes = [Arrow.Type, TextContent.Type, CCTVButton.Type];
drawAssistantsTypes.forEach((type) => {
const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
if (drawAssistant) {

6
src/layouts/FireAlarmDrawLayout.vue
View File

@ -110,7 +110,8 @@ import { onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { successNotify } from 'src/utils/CommonNotify';
import { useQuasar } from 'quasar';
import { useFireAlarmDrawStore } from 'src/stores/fire-alarm-draw-store';
import { useDrawStore } from 'src/stores/draw-store';
import { PictureType } from 'src/protos/picture';
import { Arrow } from 'src/graphics/arrow/Arrow';
import { TextContent } from 'src/graphics/textContent/TextContent';
@ -119,7 +120,7 @@ const route = useRoute();
const router = useRouter();
const searchId = ref(0);
const drawStore = useFireAlarmDrawStore();
const drawStore = useDrawStore();
watch(
() => drawStore.drawMode,
@ -187,6 +188,7 @@ const leftMenuConfig = [
onMounted(() => {
console.log('绘制应用layout mounted');
drawStore.drawPictureType = PictureType.FireAlarm;
const dom = document.getElementById('draw-app-container');
if (dom) {
drawStore.setDraftId(+route.params.id as number);

106
src/stores/cctv-draw-store.ts
View File

@ -1,106 +0,0 @@
import { defineStore } from 'pinia';
import { initDrawApp, destroyDrawApp, getDrawApp } from 'src/drawApp/cctvApp';
import {
DrawAssistant,
GraphicData,
IDrawApp,
IJlCanvas,
JlGraphic,
} from 'jl-graphic';
import { markRaw } from 'vue';
export const useCCTVDrawStore = defineStore('cctvDraw', {
state: () => ({
drawAssistant: null as DrawAssistant | null,
selectedGraphics: null as JlGraphic[] | null,
draftId: null as number | null,
}),
getters: {
drawMode: (state) => state.drawAssistant != null,
drawGraphicType: (state) => state.drawAssistant?.type,
drawGraphicName: (state) => state.drawAssistant?.description,
drawGraphicTemplate: (state) => state.drawAssistant?.graphicTemplate,
getApp: () => {
return getDrawApp();
},
selectedGraphicType: (state) => {
if (state.selectedGraphics) {
if (state.selectedGraphics.length === 1) {
return state.selectedGraphics[0].type;
}
}
},
selectedObjName(state): string {
if (state.selectedGraphics) {
if (state.selectedGraphics.length == 0) {
return '画布';
} else if (state.selectedGraphics.length == 1) {
const name = this.getApp?.getDrawAssistant(
state.selectedGraphics[0].type
).description;
return name || '';
}
return '批量设置';
}
return '';
},
selectedGraphic: (state) => {
if (state.selectedGraphics) {
if (state.selectedGraphics.length === 1) {
return state.selectedGraphics[0];
}
}
return null;
},
},
actions: {
getDrawApp(): IDrawApp {
const app = this.getApp;
if (app == null) {
throw new Error('未初始化app');
}
return app;
},
getJlCanvas(): IJlCanvas {
return this.getDrawApp().canvas;
},
bindFormData(form: GraphicData): void {
const app = this.getDrawApp();
app.bindFormData(form);
},
unbindFormData(form: GraphicData): void {
const app = this.getDrawApp();
app.unbindFormData(form);
},
initDrawApp() {
let app: IDrawApp | null = null;
app = initDrawApp();
if (app == null) {
throw new Error('未初始化app');
}
app.on('interaction-plugin-resume', (plugin) => {
if (plugin.isAppPlugin()) {
if (Object.hasOwn(plugin, '__GraphicDrawAssistant')) {
this.drawAssistant = plugin as DrawAssistant;
} else {
this.drawAssistant = null;
}
}
});
app.on('graphicselected', (graphics) => {
this.selectedGraphics = markRaw(graphics);
});
this.selectedGraphics = [];
return app;
},
destroy() {
// console.log('绘制状态清空，绘制应用销毁');
this.drawAssistant = null;
this.selectedGraphics = null;
destroyDrawApp();
},
setDraftId(id: number | null) {
this.draftId = id;
},
},
});

49
src/stores/fire-alarm-draw-store.ts → src/stores/draw-store.ts
View File

@ -1,9 +1,13 @@
import { defineStore } from 'pinia';
import { QTable } from 'quasar';
import {
initDrawApp,
destroyDrawApp,
getDrawApp,
initCCTVDrawApp,
destroyCCTVDrawApp,
getCCTVDrawApp,
} from 'src/drawApp/cctvApp';
import {
initFireAlarmDrawApp,
destroyFireAlarmDrawApp,
getFireAlarmDrawApp,
} from 'src/drawApp/fireAlarmApp';
import {
DrawAssistant,
@ -13,22 +17,31 @@ import {
JlGraphic,
} from 'jl-graphic';
import { markRaw } from 'vue';
import { PictureType } from 'src/protos/picture';
export const useFireAlarmDrawStore = defineStore('FireAlarmDraw', {
export const useDrawStore = defineStore('draw', {
state: () => ({
drawAssistant: null as DrawAssistant | null,
selectedGraphics: null as JlGraphic[] | null,
draftId: null as number | null,
oneClickType: '',
table: undefined as QTable | undefined,
drawPictureType: null as PictureType | null,
}),
getters: {
drawMode: (state) => state.drawAssistant != null,
drawGraphicType: (state) => state.drawAssistant?.type,
drawGraphicName: (state) => state.drawAssistant?.description,
drawGraphicTemplate: (state) => state.drawAssistant?.graphicTemplate,
getApp: () => {
return getDrawApp();
getApp: (state) => {
let app = null;
switch (state.drawPictureType) {
case PictureType.CCTV:
app = getCCTVDrawApp();
break;
case PictureType.FireAlarm:
app = getFireAlarmDrawApp();
break;
}
return app;
},
selectedGraphicType: (state) => {
if (state.selectedGraphics) {
@ -81,7 +94,14 @@ export const useFireAlarmDrawStore = defineStore('FireAlarmDraw', {
},
initDrawApp() {
let app: IDrawApp | null = null;
app = initDrawApp();
switch (this.drawPictureType) {
case PictureType.CCTV:
app = initCCTVDrawApp();
break;
case PictureType.FireAlarm:
app = initFireAlarmDrawApp();
break;
}
if (app == null) {
throw new Error('未初始化app');
}
@ -104,7 +124,14 @@ export const useFireAlarmDrawStore = defineStore('FireAlarmDraw', {
// console.log('绘制状态清空，绘制应用销毁');
this.drawAssistant = null;
this.selectedGraphics = null;
destroyDrawApp();
switch (this.drawPictureType) {
case PictureType.CCTV:
destroyCCTVDrawApp();
break;
case PictureType.FireAlarm:
destroyFireAlarmDrawApp();
break;
}
},
setDraftId(id: number | null) {
this.draftId = id;