继电器柜
This commit is contained in:
joylink_zhaoerwei
parent
ce0f99803f
commit
541a45ef85
37
src/components/draw-app/DrawRelayCabinetProperties.vue
Normal file
37
src/components/draw-app/DrawRelayCabinetProperties.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<!-- 画布或图形对象属性 -->
|
||||
<div v-if="drawStore.selectedGraphics !== null">
|
||||
<q-card flat>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ drawStore.selectedObjName + ' 属性' }}</div>
|
||||
</q-card-section>
|
||||
<q-separator inset></q-separator>
|
||||
<template v-if="drawStore.selectedGraphics.length === 0">
|
||||
<q-card-section>
|
||||
<canvas-property></canvas-property>
|
||||
</q-card-section>
|
||||
</template>
|
||||
<template v-else-if="drawStore.selectedGraphics.length === 1">
|
||||
<q-card-section>
|
||||
<relay-cabinet-property
|
||||
v-if="drawStore.selectedGraphicType === RelayCabinet.Type"
|
||||
></relay-cabinet-property>
|
||||
<relay-property
|
||||
v-if="drawStore.selectedGraphicType === Relay.Type"
|
||||
></relay-property>
|
||||
</q-card-section>
|
||||
</template>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CanvasProperty from './properties/CanvasProperty.vue';
|
||||
import RelayCabinetProperty from './properties/RelayCabinetProperty.vue';
|
||||
import { RelayCabinet } from 'src/graphics/relayCabinet/RelayCabinet';
|
||||
import RelayProperty from './properties/RelayProperty.vue';
|
||||
import { Relay } from 'src/graphics/relay/Relay';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
</script>
|
||||
54
src/components/draw-app/properties/RelayCabinetProperty.vue
Normal file
54
src/components/draw-app/properties/RelayCabinetProperty.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input
|
||||
outlined
|
||||
readonly
|
||||
v-model="relayCabinetModel.id"
|
||||
label="id"
|
||||
hint=""
|
||||
/>
|
||||
<q-input
|
||||
outlined
|
||||
v-model="relayCabinetModel.code"
|
||||
@blur="onUpdate"
|
||||
label="继电器柜"
|
||||
lazy-rules
|
||||
/>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RelayCabinetData } from 'src/drawApp/relayCabinetGraphics/RelayCabinetInteraction';
|
||||
import { RelayCabinet } from 'src/graphics/relayCabinet/RelayCabinet';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const relayCabinetModel = reactive(new RelayCabinetData());
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
() => drawStore.selectedGraphic,
|
||||
(val) => {
|
||||
if (val && val.type == RelayCabinet.Type) {
|
||||
relayCabinetModel.copyFrom(val.saveData() as RelayCabinetData);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const RelayCabinet = drawStore.selectedGraphic as RelayCabinet;
|
||||
if (RelayCabinet) {
|
||||
relayCabinetModel.copyFrom(RelayCabinet.saveData());
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
const RelayCabinet = drawStore.selectedGraphic as RelayCabinet;
|
||||
if (RelayCabinet) {
|
||||
drawStore
|
||||
.getDrawApp()
|
||||
.updateGraphicAndRecord(RelayCabinet, relayCabinetModel);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
46
src/components/draw-app/properties/RelayProperty.vue
Normal file
46
src/components/draw-app/properties/RelayProperty.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<q-form>
|
||||
<q-input outlined readonly v-model="relayModel.id" label="id" hint="" />
|
||||
<q-input
|
||||
outlined
|
||||
v-model="relayModel.code"
|
||||
@blur="onUpdate"
|
||||
label="继电器"
|
||||
lazy-rules
|
||||
/>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RelayData } from 'src/drawApp/relayCabinetGraphics/RelayInteraction';
|
||||
import { Relay } from 'src/graphics/relay/Relay';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const relayModel = reactive(new RelayData());
|
||||
|
||||
drawStore.$subscribe;
|
||||
watch(
|
||||
() => drawStore.selectedGraphic,
|
||||
(val) => {
|
||||
if (val && val.type == Relay.Type) {
|
||||
relayModel.copyFrom(val.saveData() as RelayData);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const Relay = drawStore.selectedGraphic as Relay;
|
||||
if (Relay) {
|
||||
relayModel.copyFrom(Relay.saveData());
|
||||
}
|
||||
});
|
||||
|
||||
function onUpdate() {
|
||||
const Relay = drawStore.selectedGraphic as Relay;
|
||||
if (Relay) {
|
||||
drawStore.getDrawApp().updateGraphicAndRecord(Relay, relayModel);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
152
src/drawApp/relayCabinetGraphics/GraphicDataBase.ts
Normal file
152
src/drawApp/relayCabinetGraphics/GraphicDataBase.ts
Normal file
@ -0,0 +1,152 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import {
|
||||
ChildTransform,
|
||||
GraphicData,
|
||||
GraphicState,
|
||||
GraphicTransform,
|
||||
IChildTransform,
|
||||
IGraphicTransform,
|
||||
} from 'src/jl-graphic';
|
||||
// import { toStorageTransform } from '..';
|
||||
import { graphicData } from 'src/protos/relayCabinetLayoutGraphics';
|
||||
import { IPointData, Point } from 'pixi.js';
|
||||
|
||||
export interface ICommonInfo {
|
||||
id: string;
|
||||
graphicType: string;
|
||||
transform: IGraphicTransform;
|
||||
childTransforms: IChildTransform[];
|
||||
}
|
||||
export function fromStoragePoint(p: graphicData.Point): Point {
|
||||
return new Point(p.x, p.y);
|
||||
}
|
||||
|
||||
export function toStoragePoint(p: IPointData): graphicData.Point {
|
||||
return new graphicData.Point({ x: p.x, y: p.y });
|
||||
}
|
||||
export function fromStorageTransfrom(
|
||||
transfrom: graphicData.Transform
|
||||
): GraphicTransform {
|
||||
return new GraphicTransform(
|
||||
fromStoragePoint(transfrom.position),
|
||||
fromStoragePoint(transfrom.scale),
|
||||
transfrom.rotation,
|
||||
fromStoragePoint(transfrom.skew)
|
||||
);
|
||||
}
|
||||
|
||||
export function toStorageTransform(
|
||||
transform: GraphicTransform
|
||||
): graphicData.Transform {
|
||||
return new graphicData.Transform({
|
||||
position: toStoragePoint(transform.position),
|
||||
scale: toStoragePoint(transform.scale),
|
||||
rotation: transform.rotation,
|
||||
skew: toStoragePoint(transform.skew),
|
||||
});
|
||||
}
|
||||
|
||||
export interface IProtoGraphicData extends pb_1.Message {
|
||||
common: ICommonInfo;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
export abstract class GraphicDataBase implements GraphicData {
|
||||
_data: IProtoGraphicData;
|
||||
constructor(data: IProtoGraphicData) {
|
||||
this._data = data;
|
||||
}
|
||||
|
||||
static defaultCommonInfo(graphicType: string): graphicData.CommonInfo {
|
||||
return new graphicData.CommonInfo({
|
||||
id: '',
|
||||
graphicType: graphicType,
|
||||
transform: new graphicData.Transform({
|
||||
position: new graphicData.Point({ x: 0, y: 0 }),
|
||||
scale: new graphicData.Point({ x: 1, y: 1 }),
|
||||
rotation: 0,
|
||||
skew: new graphicData.Point({ x: 0, y: 0 }),
|
||||
}),
|
||||
childTransforms: [],
|
||||
});
|
||||
}
|
||||
|
||||
getData<D extends IProtoGraphicData>(): D {
|
||||
return this._data as D;
|
||||
}
|
||||
|
||||
get id(): string {
|
||||
return this._data.common.id;
|
||||
}
|
||||
set id(v: string) {
|
||||
this._data.common.id = v;
|
||||
}
|
||||
get graphicType(): string {
|
||||
return this._data.common.graphicType;
|
||||
}
|
||||
set graphicType(v: string) {
|
||||
this._data.common.graphicType = v;
|
||||
}
|
||||
get transform(): GraphicTransform {
|
||||
return GraphicTransform.from(this._data.common.transform);
|
||||
}
|
||||
set transform(v: GraphicTransform) {
|
||||
this._data.common.transform = toStorageTransform(v);
|
||||
}
|
||||
get childTransforms(): ChildTransform[] | undefined {
|
||||
const cts: ChildTransform[] = [];
|
||||
if (this._data.common.childTransforms) {
|
||||
this._data.common.childTransforms.forEach((ct) => {
|
||||
cts.push(ChildTransform.from(ct));
|
||||
});
|
||||
}
|
||||
return cts;
|
||||
}
|
||||
set childTransforms(v: ChildTransform[] | undefined) {
|
||||
if (v) {
|
||||
const cts: graphicData.ChildTransform[] = [];
|
||||
v.forEach((ct) =>
|
||||
cts.push(
|
||||
new graphicData.ChildTransform({
|
||||
...ct,
|
||||
transform: toStorageTransform(ct.transform),
|
||||
})
|
||||
)
|
||||
);
|
||||
this._data.common.childTransforms = cts;
|
||||
} else {
|
||||
this._data.common.childTransforms = [];
|
||||
}
|
||||
}
|
||||
|
||||
clone(): GraphicData {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
copyFrom(gd: GraphicDataBase): void {
|
||||
pb_1.Message.copyInto(gd._data, this._data);
|
||||
}
|
||||
eq(other: GraphicDataBase): boolean {
|
||||
return pb_1.Message.equals(this._data, other._data);
|
||||
}
|
||||
}
|
||||
|
||||
export abstract class GraphicStateBase implements GraphicState {
|
||||
_graphicType: string;
|
||||
_state: pb_1.Message;
|
||||
constructor(state: pb_1.Message, graphicType: string) {
|
||||
this._state = state;
|
||||
this._graphicType = graphicType;
|
||||
}
|
||||
abstract get code(): string;
|
||||
abstract copyFrom(data: GraphicState): void;
|
||||
abstract eq(data: GraphicState): boolean;
|
||||
getState<S extends pb_1.Message>(): S {
|
||||
return this._state as S;
|
||||
}
|
||||
get graphicType(): string {
|
||||
return this._graphicType;
|
||||
}
|
||||
clone(): GraphicState {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
}
|
||||
44
src/drawApp/relayCabinetGraphics/RelayCabinetInteraction.ts
Normal file
44
src/drawApp/relayCabinetGraphics/RelayCabinetInteraction.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import {
|
||||
IRelayCabinetData,
|
||||
RelayCabinet,
|
||||
} from 'src/graphics/relayCabinet/RelayCabinet';
|
||||
import { graphicData } from 'src/protos/relayCabinetLayoutGraphics';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
|
||||
export class RelayCabinetData
|
||||
extends GraphicDataBase
|
||||
implements IRelayCabinetData
|
||||
{
|
||||
constructor(data?: graphicData.RelayCabinet) {
|
||||
let relayCabinet;
|
||||
if (!data) {
|
||||
relayCabinet = new graphicData.RelayCabinet({
|
||||
common: GraphicDataBase.defaultCommonInfo(RelayCabinet.Type),
|
||||
});
|
||||
} else {
|
||||
relayCabinet = data;
|
||||
}
|
||||
super(relayCabinet);
|
||||
}
|
||||
|
||||
public get data(): graphicData.RelayCabinet {
|
||||
return this.getData<graphicData.RelayCabinet>();
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
clone(): RelayCabinetData {
|
||||
return new RelayCabinetData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: RelayCabinetData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: RelayCabinetData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
44
src/drawApp/relayCabinetGraphics/RelayInteraction.ts
Normal file
44
src/drawApp/relayCabinetGraphics/RelayInteraction.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import * as pb_1 from 'google-protobuf';
|
||||
import {
|
||||
IRelayData,
|
||||
Relay,
|
||||
} from 'src/graphics/relay/Relay';
|
||||
import { graphicData } from 'src/protos/relayCabinetLayoutGraphics';
|
||||
import { GraphicDataBase } from './GraphicDataBase';
|
||||
|
||||
export class RelayData
|
||||
extends GraphicDataBase
|
||||
implements IRelayData
|
||||
{
|
||||
constructor(data?: graphicData.Relay) {
|
||||
let relay;
|
||||
if (!data) {
|
||||
relay = new graphicData.Relay({
|
||||
common: GraphicDataBase.defaultCommonInfo(Relay.Type),
|
||||
});
|
||||
} else {
|
||||
relay = data;
|
||||
}
|
||||
super(relay);
|
||||
}
|
||||
|
||||
public get data(): graphicData.Relay {
|
||||
return this.getData<graphicData.Relay>();
|
||||
}
|
||||
|
||||
get code(): string {
|
||||
return this.data.code;
|
||||
}
|
||||
set code(v: string) {
|
||||
this.data.code = v;
|
||||
}
|
||||
clone(): RelayData {
|
||||
return new RelayData(this.data.cloneMessage());
|
||||
}
|
||||
copyFrom(data: RelayData): void {
|
||||
pb_1.Message.copyInto(data.data, this.data);
|
||||
}
|
||||
eq(other: RelayData): boolean {
|
||||
return pb_1.Message.equals(this.data, other.data);
|
||||
}
|
||||
}
|
||||
205
src/drawApp/relayCabinetLayoutApp.ts
Normal file
205
src/drawApp/relayCabinetLayoutApp.ts
Normal file
@ -0,0 +1,205 @@
|
||||
import { fromUint8Array, toUint8Array } from 'js-base64';
|
||||
|
||||
import {
|
||||
CombinationKey,
|
||||
GraphicApp,
|
||||
GraphicData,
|
||||
JlDrawApp,
|
||||
KeyListener,
|
||||
} from 'src/jl-graphic';
|
||||
import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
|
||||
import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
|
||||
import { successNotify, errorNotify } from '../utils/CommonNotify';
|
||||
import { Dialog } from 'quasar';
|
||||
import { saveDraft, getDraft } from 'src/api/DraftApi';
|
||||
import { checkMapData } from 'src/api/Simulation';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
import { graphicData } from 'src/protos/relayCabinetLayoutGraphics';
|
||||
import { toStorageTransform } from './relayCabinetGraphics/GraphicDataBase';
|
||||
import {
|
||||
RelayCabinet,
|
||||
RelayCabinetTemplate,
|
||||
} from 'src/graphics/relayCabinet/RelayCabinet';
|
||||
import { RelayCabinetData } from './relayCabinetGraphics/RelayCabinetInteraction';
|
||||
import { RelayCabinetDraw } from 'src/graphics/relayCabinet/RelayCabinetDrawAssistant';
|
||||
import { Relay, RelayTemplate } from 'src/graphics/relay/Relay';
|
||||
import { RelayData } from './relayCabinetGraphics/RelayInteraction';
|
||||
import { RelayDraw } from 'src/graphics/relay/RelayDrawAssistant';
|
||||
|
||||
const UndoOptions: MenuItemOptions = {
|
||||
name: '撤销',
|
||||
};
|
||||
const RedoOptions: MenuItemOptions = {
|
||||
name: '重做',
|
||||
};
|
||||
const SelectAllOptions: MenuItemOptions = {
|
||||
name: '全选',
|
||||
};
|
||||
|
||||
export const DefaultCanvasMenu = new ContextMenu({
|
||||
name: '绘制-画布菜单',
|
||||
groups: [
|
||||
{
|
||||
items: [UndoOptions, RedoOptions],
|
||||
},
|
||||
{
|
||||
items: [SelectAllOptions],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
let drawApp: JlDrawApp | null = null;
|
||||
|
||||
export function getDrawApp(): JlDrawApp | null {
|
||||
return drawApp;
|
||||
}
|
||||
|
||||
export function destroyDrawApp(): void {
|
||||
if (drawApp) {
|
||||
drawApp.destroy();
|
||||
drawApp = null;
|
||||
}
|
||||
}
|
||||
|
||||
export function initDrawApp(dom: HTMLElement): JlDrawApp {
|
||||
drawApp = new JlDrawApp(dom);
|
||||
const app = drawApp;
|
||||
//根据草稿图类型加载绘图工具
|
||||
const draftType = useDrawStore().$state.draftType;
|
||||
let drawAssistants: (RelayDraw | RelayCabinetDraw)[] = [];
|
||||
if (draftType === 'Line') {
|
||||
drawAssistants = [
|
||||
new RelayCabinetDraw(
|
||||
app,
|
||||
new RelayCabinetTemplate(new RelayCabinetData())
|
||||
),
|
||||
new RelayDraw(app, new RelayTemplate(new RelayData())),
|
||||
];
|
||||
}
|
||||
app.setOptions({ drawAssistants: drawAssistants });
|
||||
|
||||
// 画布右键菜单
|
||||
app.registerMenu(DefaultCanvasMenu);
|
||||
app.canvas.on('_rightclick', (e) => {
|
||||
if (app._drawing) return;
|
||||
UndoOptions.disabled = !app.opRecord.hasUndo;
|
||||
RedoOptions.disabled = !app.opRecord.hasRedo;
|
||||
|
||||
UndoOptions.handler = () => {
|
||||
app.opRecord.undo();
|
||||
};
|
||||
RedoOptions.handler = () => {
|
||||
app.opRecord.redo();
|
||||
};
|
||||
SelectAllOptions.handler = () => {
|
||||
app.selectAllGraphics();
|
||||
};
|
||||
DefaultCanvasMenu.open(e.global);
|
||||
});
|
||||
app.addKeyboardListener(
|
||||
new KeyListener({
|
||||
value: 'KeyS',
|
||||
global: true,
|
||||
combinations: [CombinationKey.Ctrl],
|
||||
onPress: () => {
|
||||
saveDrawToServer(app);
|
||||
},
|
||||
})
|
||||
);
|
||||
return drawApp;
|
||||
}
|
||||
|
||||
export function checkDataToServer(app: JlDrawApp) {
|
||||
const base64 = saveDrawDatas(app);
|
||||
checkMapData({ mapProto: base64 })
|
||||
.then((res) => {
|
||||
if (res.data.success) {
|
||||
successNotify('校验数据成功！');
|
||||
} else {
|
||||
let message = '';
|
||||
res.data.errors.forEach((err: string) => {
|
||||
message += `<div>${err};<div>`;
|
||||
});
|
||||
Dialog.create({
|
||||
title: '校验失败',
|
||||
message: message,
|
||||
html: true,
|
||||
persistent: true,
|
||||
ok: {
|
||||
ali: 'center',
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
errorNotify(err.message, err);
|
||||
});
|
||||
}
|
||||
|
||||
export function saveDrawToServer(app: JlDrawApp) {
|
||||
const base64 = saveDrawDatas(app);
|
||||
const drawStore = useDrawStore();
|
||||
const id = drawStore.draftId;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
saveDraft(id as number, { proto: base64 })
|
||||
.then(() => {
|
||||
successNotify('保存数据成功！');
|
||||
})
|
||||
.catch((err) => {
|
||||
errorNotify(err.message, err);
|
||||
});
|
||||
}
|
||||
|
||||
// const StorageKey = 'graphic-storage';
|
||||
export function saveDrawDatas(app: JlDrawApp) {
|
||||
const storage = new graphicData.RelayCabinetGraphicStorage();
|
||||
const canvasData = app.canvas.saveData();
|
||||
storage.canvas = new graphicData.Canvas({
|
||||
...canvasData,
|
||||
viewportTransform: toStorageTransform(canvasData.viewportTransform),
|
||||
});
|
||||
const graphics = app.queryStore.getAllGraphics();
|
||||
graphics.forEach((g) => {
|
||||
if (RelayCabinet.Type === g.type) {
|
||||
const relayCabinetData = (g as RelayCabinet).saveData();
|
||||
storage.relayCabinets.push((relayCabinetData as RelayCabinetData).data);
|
||||
}
|
||||
if (Relay.Type === g.type) {
|
||||
const relayData = (g as Relay).saveData();
|
||||
storage.relays.push((relayData as RelayData).data);
|
||||
}
|
||||
});
|
||||
const base64 = fromUint8Array(storage.serialize());
|
||||
console.log('保存数据', storage);
|
||||
// localStorage.setItem(StorageKey, base64);
|
||||
return base64;
|
||||
}
|
||||
|
||||
export async function loadDrawDatas(app: GraphicApp) {
|
||||
// const base64 = localStorage.getItem(StorageKey);
|
||||
const drawStore = useDrawStore();
|
||||
const id = drawStore.draftId;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
const { proto: base64 } = await getDraft(id);
|
||||
if (base64) {
|
||||
const storage = graphicData.RelayCabinetGraphicStorage.deserialize(
|
||||
toUint8Array(base64)
|
||||
);
|
||||
app.updateCanvas(storage.canvas);
|
||||
const datas: GraphicData[] = [];
|
||||
storage.relayCabinets.forEach((relayCabinet) => {
|
||||
datas.push(new RelayCabinetData(relayCabinet));
|
||||
});
|
||||
storage.relays.forEach((relay) => {
|
||||
datas.push(new RelayData(relay));
|
||||
});
|
||||
|
||||
await app.loadGraphic(datas);
|
||||
} else {
|
||||
app.loadGraphic([]);
|
||||
}
|
||||
}
|
||||
76
src/graphics/relay/Relay.ts
Normal file
76
src/graphics/relay/Relay.ts
Normal file
@ -0,0 +1,76 @@
|
||||
import { Color, Graphics } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
} from 'src/jl-graphic';
|
||||
|
||||
export interface IRelayData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
clone(): IRelayData;
|
||||
copyFrom(data: IRelayData): void;
|
||||
eq(other: IRelayData): boolean;
|
||||
}
|
||||
|
||||
export const relayConsts = {
|
||||
radius: 15,
|
||||
lineWidth: 3,
|
||||
lineColor: '0xff0000',
|
||||
};
|
||||
|
||||
export class Relay extends JlGraphic {
|
||||
static Type = 'Relay';
|
||||
relayGraphic: Graphics = new Graphics();
|
||||
labelGraphic = new VectorText();
|
||||
|
||||
constructor() {
|
||||
super(Relay.Type);
|
||||
this.addChild(this.relayGraphic);
|
||||
this.setTextGraphic(this.labelGraphic, 'label');
|
||||
this.addChild(this.labelGraphic);
|
||||
}
|
||||
|
||||
get datas(): IRelayData {
|
||||
return this.getDatas<IRelayData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
this.labelGraphic.text = this.datas.code;
|
||||
const labelPosition = this.datas.childTransforms?.find(
|
||||
(t) => t.name === this.labelGraphic.name
|
||||
)?.transform.position;
|
||||
if (labelPosition) {
|
||||
this.labelGraphic.position.set(labelPosition.x, labelPosition.y);
|
||||
} else {
|
||||
this.labelGraphic.position.set(0, 0);
|
||||
}
|
||||
const relayGraphic = this.relayGraphic;
|
||||
relayGraphic
|
||||
.clear()
|
||||
.lineStyle(relayConsts.lineWidth, new Color(relayConsts.lineColor));
|
||||
relayGraphic.beginFill(relayConsts.lineColor);
|
||||
relayGraphic.drawCircle(0, 0, relayConsts.radius);
|
||||
relayGraphic.endFill;
|
||||
}
|
||||
setTextGraphic(g: VectorText, name: string) {
|
||||
g.setVectorFontSize(14);
|
||||
g.anchor.set(0.5);
|
||||
g.style.fill = '#0f0';
|
||||
g.transformSave = true;
|
||||
g.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
export class RelayTemplate extends JlGraphicTemplate<Relay> {
|
||||
constructor(dataTemplate: IRelayData) {
|
||||
super(Relay.Type, {
|
||||
dataTemplate,
|
||||
});
|
||||
}
|
||||
new(): Relay {
|
||||
const relay = new Relay();
|
||||
relay.loadData(this.datas);
|
||||
return relay;
|
||||
}
|
||||
}
|
||||
102
src/graphics/relay/RelayDrawAssistant.ts
Normal file
102
src/graphics/relay/RelayDrawAssistant.ts
Normal file
@ -0,0 +1,102 @@
|
||||
import { FederatedPointerEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
} from 'src/jl-graphic';
|
||||
|
||||
import { IRelayData, Relay, RelayTemplate } from './Relay';
|
||||
|
||||
export interface IRelayDrawOptions {
|
||||
newData: () => IRelayData;
|
||||
}
|
||||
|
||||
export class RelayDraw extends GraphicDrawAssistant<RelayTemplate, IRelayData> {
|
||||
relayGraphic: Relay;
|
||||
|
||||
constructor(app: JlDrawApp, template: RelayTemplate) {
|
||||
super(app, template, 'sym_o_circle', '继电器Relay');
|
||||
this.relayGraphic = this.graphicTemplate.new();
|
||||
this.container.addChild(this.relayGraphic);
|
||||
relayInteraction.init(app);
|
||||
}
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.relayGraphic.loadData(this.graphicTemplate.datas);
|
||||
this.relayGraphic.doRepaint();
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
//this.relayGraphic.clear();
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
prepareData(data: IRelayData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建吸附位置
|
||||
* @param polygon
|
||||
* @returns
|
||||
*/
|
||||
function buildAbsorbablePositions(relayCabinet: Relay): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const relayCabinets = relayCabinet.queryStore.queryByType<Relay>(Relay.Type);
|
||||
const { width, height } = relayCabinet.getGraphicApp().canvas;
|
||||
relayCabinets.forEach((other) => {
|
||||
if (other.id == relayCabinet.id) {
|
||||
return;
|
||||
}
|
||||
const ps = other.datas.transform.position;
|
||||
const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
|
||||
const ys = new AbsorbableLine({ x: ps.x, y: 0 }, { x: ps.x, y: height });
|
||||
aps.push(xs, ys);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class relayInteraction extends GraphicInteractionPlugin<Relay> {
|
||||
static Name = 'relay_transform';
|
||||
constructor(app: JlDrawApp) {
|
||||
super(relayInteraction.Name, app);
|
||||
}
|
||||
static init(app: JlDrawApp) {
|
||||
return new relayInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): Relay[] | undefined {
|
||||
return grahpics.filter((g) => g.type === Relay.Type).map((g) => g as Relay);
|
||||
}
|
||||
bind(g: Relay): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.labelGraphic.eventMode = 'static';
|
||||
g.labelGraphic.selectable = true;
|
||||
g.labelGraphic.draggable = true;
|
||||
g.on('transformstart', this.move, this);
|
||||
}
|
||||
unbind(g: Relay): void {
|
||||
g.eventMode = 'none';
|
||||
g.labelGraphic.eventMode = 'none';
|
||||
g.labelGraphic.selectable = false;
|
||||
g.labelGraphic.draggable = false;
|
||||
g.off('transformstart', this.move, this);
|
||||
}
|
||||
move(): void {
|
||||
const trainWindow = this.app.selectedGraphics[0] as Relay;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(trainWindow),
|
||||
});
|
||||
}
|
||||
}
|
||||
92
src/graphics/relayCabinet/RelayCabinet.ts
Normal file
92
src/graphics/relayCabinet/RelayCabinet.ts
Normal file
@ -0,0 +1,92 @@
|
||||
import { Color, Graphics, Rectangle } from 'pixi.js';
|
||||
import {
|
||||
GraphicData,
|
||||
JlGraphic,
|
||||
JlGraphicTemplate,
|
||||
VectorText,
|
||||
getRectangleCenter,
|
||||
} from 'src/jl-graphic';
|
||||
|
||||
export interface IRelayCabinetData extends GraphicData {
|
||||
get code(): string; // 编号
|
||||
set code(v: string);
|
||||
clone(): IRelayCabinetData;
|
||||
copyFrom(data: IRelayCabinetData): void;
|
||||
eq(other: IRelayCabinetData): boolean;
|
||||
}
|
||||
|
||||
export const relayCabinetConsts = {
|
||||
width: 150,
|
||||
height: 300,
|
||||
lineWidth: 3,
|
||||
lineColor: '0x0fe81f',
|
||||
};
|
||||
|
||||
export class RelayCabinet extends JlGraphic {
|
||||
static Type = 'RelayCabinet';
|
||||
relayCabinetGraphic: Graphics = new Graphics();
|
||||
labelGraphic = new VectorText();
|
||||
constructor() {
|
||||
super(RelayCabinet.Type);
|
||||
this.addChild(this.relayCabinetGraphic);
|
||||
this.setTextGraphic(this.labelGraphic, 'label');
|
||||
this.addChild(this.labelGraphic);
|
||||
}
|
||||
|
||||
get datas(): IRelayCabinetData {
|
||||
return this.getDatas<IRelayCabinetData>();
|
||||
}
|
||||
doRepaint(): void {
|
||||
this.labelGraphic.text = this.datas.code;
|
||||
const labelPosition = this.datas.childTransforms?.find(
|
||||
(t) => t.name === this.labelGraphic.name
|
||||
)?.transform.position;
|
||||
if (labelPosition) {
|
||||
this.labelGraphic.position.set(labelPosition.x, labelPosition.y);
|
||||
} else {
|
||||
this.labelGraphic.position.set(0, -relayCabinetConsts.height / 2 - 15);
|
||||
}
|
||||
const relayCabinetGraphic = this.relayCabinetGraphic;
|
||||
relayCabinetGraphic
|
||||
.clear()
|
||||
.lineStyle(
|
||||
relayCabinetConsts.lineWidth,
|
||||
new Color(relayCabinetConsts.lineColor)
|
||||
);
|
||||
relayCabinetGraphic.beginFill(relayCabinetConsts.lineColor, 0.00001);
|
||||
relayCabinetGraphic.drawRect(
|
||||
0,
|
||||
0,
|
||||
relayCabinetConsts.width,
|
||||
relayCabinetConsts.height
|
||||
);
|
||||
relayCabinetGraphic.endFill;
|
||||
const rectP = new Rectangle(
|
||||
0,
|
||||
0,
|
||||
relayCabinetConsts.width,
|
||||
relayCabinetConsts.height
|
||||
);
|
||||
relayCabinetGraphic.pivot = getRectangleCenter(rectP);
|
||||
}
|
||||
setTextGraphic(g: VectorText, name: string) {
|
||||
g.setVectorFontSize(14);
|
||||
g.anchor.set(0.5);
|
||||
g.style.fill = '#0f0';
|
||||
g.transformSave = true;
|
||||
g.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
export class RelayCabinetTemplate extends JlGraphicTemplate<RelayCabinet> {
|
||||
constructor(dataTemplate: IRelayCabinetData) {
|
||||
super(RelayCabinet.Type, {
|
||||
dataTemplate,
|
||||
});
|
||||
}
|
||||
new(): RelayCabinet {
|
||||
const relayCabinet = new RelayCabinet();
|
||||
relayCabinet.loadData(this.datas);
|
||||
return relayCabinet;
|
||||
}
|
||||
}
|
||||
115
src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts
Normal file
115
src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts
Normal file
@ -0,0 +1,115 @@
|
||||
import { FederatedPointerEvent, Point } from 'pixi.js';
|
||||
import {
|
||||
AbsorbableLine,
|
||||
AbsorbablePosition,
|
||||
GraphicDrawAssistant,
|
||||
GraphicInteractionPlugin,
|
||||
JlDrawApp,
|
||||
JlGraphic,
|
||||
} from 'src/jl-graphic';
|
||||
|
||||
import {
|
||||
IRelayCabinetData,
|
||||
RelayCabinet,
|
||||
RelayCabinetTemplate,
|
||||
} from './RelayCabinet';
|
||||
|
||||
export interface IRelayCabinetDrawOptions {
|
||||
newData: () => IRelayCabinetData;
|
||||
}
|
||||
|
||||
export class RelayCabinetDraw extends GraphicDrawAssistant<
|
||||
RelayCabinetTemplate,
|
||||
IRelayCabinetData
|
||||
> {
|
||||
relayCabinetGraphic: RelayCabinet;
|
||||
|
||||
constructor(app: JlDrawApp, template: RelayCabinetTemplate) {
|
||||
super(app, template, 'sym_o_square', '继电器柜RelayCabinet');
|
||||
this.relayCabinetGraphic = this.graphicTemplate.new();
|
||||
this.container.addChild(this.relayCabinetGraphic);
|
||||
relayCabinetInteraction.init(app);
|
||||
}
|
||||
bind(): void {
|
||||
super.bind();
|
||||
this.relayCabinetGraphic.loadData(this.graphicTemplate.datas);
|
||||
this.relayCabinetGraphic.doRepaint();
|
||||
}
|
||||
|
||||
clearCache(): void {
|
||||
//this.relayCabinetGraphic.clear();
|
||||
}
|
||||
onLeftDown(e: FederatedPointerEvent): void {
|
||||
this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
|
||||
this.createAndStore(true);
|
||||
}
|
||||
|
||||
redraw(p: Point): void {
|
||||
this.container.position.copyFrom(p);
|
||||
}
|
||||
prepareData(data: IRelayCabinetData): boolean {
|
||||
data.transform = this.container.saveTransform();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建吸附位置
|
||||
* @param polygon
|
||||
* @returns
|
||||
*/
|
||||
function buildAbsorbablePositions(
|
||||
relayCabinet: RelayCabinet
|
||||
): AbsorbablePosition[] {
|
||||
const aps: AbsorbablePosition[] = [];
|
||||
const relayCabinets = relayCabinet.queryStore.queryByType<RelayCabinet>(
|
||||
RelayCabinet.Type
|
||||
);
|
||||
const { width, height } = relayCabinet.getGraphicApp().canvas;
|
||||
relayCabinets.forEach((other) => {
|
||||
if (other.id == relayCabinet.id) {
|
||||
return;
|
||||
}
|
||||
const ps = other.datas.transform.position;
|
||||
const xs = new AbsorbableLine({ x: 0, y: ps.y }, { x: width, y: ps.y });
|
||||
const ys = new AbsorbableLine({ x: ps.x, y: 0 }, { x: ps.x, y: height });
|
||||
aps.push(xs, ys);
|
||||
});
|
||||
return aps;
|
||||
}
|
||||
|
||||
export class relayCabinetInteraction extends GraphicInteractionPlugin<RelayCabinet> {
|
||||
static Name = 'relayCabinet_transform';
|
||||
constructor(app: JlDrawApp) {
|
||||
super(relayCabinetInteraction.Name, app);
|
||||
}
|
||||
static init(app: JlDrawApp) {
|
||||
return new relayCabinetInteraction(app);
|
||||
}
|
||||
filter(...grahpics: JlGraphic[]): RelayCabinet[] | undefined {
|
||||
return grahpics
|
||||
.filter((g) => g.type === RelayCabinet.Type)
|
||||
.map((g) => g as RelayCabinet);
|
||||
}
|
||||
bind(g: RelayCabinet): void {
|
||||
g.eventMode = 'static';
|
||||
g.cursor = 'pointer';
|
||||
g.labelGraphic.eventMode = 'static';
|
||||
g.labelGraphic.selectable = true;
|
||||
g.labelGraphic.draggable = true;
|
||||
g.on('transformstart', this.move, this);
|
||||
}
|
||||
unbind(g: RelayCabinet): void {
|
||||
g.eventMode = 'none';
|
||||
g.labelGraphic.eventMode = 'none';
|
||||
g.labelGraphic.selectable = false;
|
||||
g.labelGraphic.draggable = false;
|
||||
g.off('transformstart', this.move, this);
|
||||
}
|
||||
move(): void {
|
||||
const trainWindow = this.app.selectedGraphics[0] as RelayCabinet;
|
||||
this.app.setOptions({
|
||||
absorbablePositions: buildAbsorbablePositions(trainWindow),
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -29,8 +29,9 @@ export class VectorText extends Text implements VectorGraphic {
|
||||
* 设置矢量文字的字体大小
|
||||
*/
|
||||
setVectorFontSize(fontSize: number) {
|
||||
if (this.vectorFontSize !== fontSize) {
|
||||
this.vectorFontSize = fontSize;
|
||||
// this.style.fontSize = fontSize;
|
||||
this.updateOnScaled();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
383
src/layouts/RelayCabinetLayout.vue
Normal file
383
src/layouts/RelayCabinetLayout.vue
Normal file
@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<q-header reveal class="bg-primary text-white">
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="q-gutter-sm">
|
||||
<q-btn color="accent" label="功能菜单">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable v-close-popup @click="saveAllDrawDatas">
|
||||
<q-item-section>保存</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="saveAsDialog = true">
|
||||
<q-item-section>另存为</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="handleCheckData">
|
||||
<q-item-section>数据校验</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="buildRelations">
|
||||
<q-item-section>一键关联</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn-toggle
|
||||
v-model="selectUtil"
|
||||
color="brown"
|
||||
text-color="white"
|
||||
toggle-color="orange"
|
||||
toggle-text-color="black"
|
||||
:options="utilsOption"
|
||||
@update:model-value="drawSelect"
|
||||
>
|
||||
<template
|
||||
v-for="(ctl, idx) in utilsOption"
|
||||
:key="idx"
|
||||
v-slot:[ctl.value]
|
||||
>
|
||||
<q-tooltip>{{ ctl.tip }}</q-tooltip>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</q-toolbar-title>
|
||||
<q-btn square color="purple" style="margin-right: 10px" icon="search">
|
||||
<q-popup-edit
|
||||
ref="popupEdit"
|
||||
v-model="searchId"
|
||||
:cover="false"
|
||||
:offset="[0, 10]"
|
||||
v-slot="scope"
|
||||
>
|
||||
<q-input
|
||||
color="accent"
|
||||
v-model="scope.value"
|
||||
label="设备Id"
|
||||
dense
|
||||
autofocus
|
||||
@keyup.enter="scope.set"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" color="accent" />
|
||||
</template>
|
||||
</q-input>
|
||||
</q-popup-edit>
|
||||
</q-btn>
|
||||
<q-btn color="info" label="返回" @click="backConfirm" />
|
||||
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
|
||||
</q-toolbar>
|
||||
<q-resize-observer @resize="onHeaderResize" />
|
||||
</q-header>
|
||||
|
||||
<q-drawer v-model="leftDrawerOpen" bordered side="left">
|
||||
<q-resize-observer @resize="onLeftResize" />
|
||||
<!-- drawer content -->
|
||||
<q-list bordered padding class="rounded-borders text-primary">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'inbox'"
|
||||
@click="link = 'inbox'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="inbox" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Inbox</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'outbox'"
|
||||
@click="link = 'outbox'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="send" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Outbox</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'trash'"
|
||||
@click="link = 'trash'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="delete" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Trash</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator spaced />
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'settings'"
|
||||
@click="link = 'settings'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="settings" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Settings</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'help'"
|
||||
@click="link = 'help'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="help" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Help</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-drawer>
|
||||
|
||||
<q-drawer show-if-above bordered v-model="rightDrawerOpen" side="right">
|
||||
<q-resize-observer @resize="onRightResize" />
|
||||
<draw-relayCabinetProperties></draw-relayCabinetProperties>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
<div id="draw-app-container"></div>
|
||||
</q-page-container>
|
||||
|
||||
<q-dialog
|
||||
v-model="saveAsDialog"
|
||||
persistent
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-card style="width: 300px">
|
||||
<q-card-section>
|
||||
<div class="text-h6">另存为</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<q-input
|
||||
outlined
|
||||
label="草稿名称"
|
||||
v-model="saveAsName"
|
||||
:rules="[(val) => val.trim() != '' || '草稿名称不能为空']"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn color="primary" label="提交" @click="saveAs(saveAsName)" />
|
||||
<q-btn label="取消" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DrawRelayCabinetProperties from 'src/components/draw-app/DrawRelayCabinetProperties.vue';
|
||||
import {
|
||||
getDrawApp,
|
||||
loadDrawDatas,
|
||||
saveDrawDatas,
|
||||
saveDrawToServer,
|
||||
checkDataToServer,
|
||||
} from 'src/drawApp/relayCabinetLayoutApp';
|
||||
import { JlDrawApp } from 'src/jl-graphic';
|
||||
import { useDrawStore } from 'src/stores/relayCabinet-store';
|
||||
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { errorNotify, successNotify } from 'src/utils/CommonNotify';
|
||||
import { saveAsDraft } from 'src/api/DraftApi';
|
||||
import { ApiError } from 'src/boot/axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const searchId = ref('');
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
|
||||
watch(
|
||||
() => drawStore.drawMode,
|
||||
(drawMode) => {
|
||||
if (!drawMode) {
|
||||
selectUtil.value = '';
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => searchId.value,
|
||||
() => {
|
||||
try {
|
||||
if (searchId.value) {
|
||||
const device = drawStore
|
||||
.getDrawApp()
|
||||
.queryStore.queryById(searchId.value);
|
||||
drawStore.getDrawApp().makeGraphicCenterShow(device);
|
||||
drawStore.getDrawApp().updateSelected(device);
|
||||
}
|
||||
} catch (err) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: `未查找到id为【${searchId.value}】的设备`,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const leftDrawerOpen = ref(false);
|
||||
const rightDrawerOpen = ref(false);
|
||||
function toggleRightDrawer() {
|
||||
rightDrawerOpen.value = !rightDrawerOpen.value;
|
||||
onResize();
|
||||
}
|
||||
|
||||
const link = ref('outbox');
|
||||
|
||||
//工具栏所用
|
||||
const selectUtil = ref();
|
||||
const utilsOption: ControlItem[] = reactive([]);
|
||||
const drawSelect = (item: string) => {
|
||||
getDrawApp()?.interactionPlugin(item).resume();
|
||||
};
|
||||
class ControlItem {
|
||||
value: string;
|
||||
slot: string;
|
||||
icon: string;
|
||||
tip: string;
|
||||
show = true;
|
||||
|
||||
constructor(value: string, icon: string, tip: string, show?: boolean) {
|
||||
this.value = value;
|
||||
this.slot = value;
|
||||
this.icon = icon;
|
||||
this.tip = tip;
|
||||
if (show != undefined) {
|
||||
this.show = show;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('绘制应用layout mounted');
|
||||
const dom = document.getElementById('draw-app-container');
|
||||
drawStore.setDraftType(route.params.type as string);
|
||||
if (dom) {
|
||||
drawStore.setDraftId(+route.params.id as number);
|
||||
const drawApp = drawStore.initDrawApp(dom);
|
||||
loadDrawDatas(drawApp);
|
||||
|
||||
onResize();
|
||||
} else {
|
||||
drawStore.setDraftId(null);
|
||||
}
|
||||
|
||||
const drawAssistants = (getDrawApp()?._options as { drawAssistants: [] })
|
||||
.drawAssistants;
|
||||
drawAssistants.forEach(
|
||||
(da: { name: string; icon: string; description: string }) => {
|
||||
if (da.description === '不展示') return;
|
||||
utilsOption.push(
|
||||
new ControlItem(
|
||||
da.name,
|
||||
da.icon,
|
||||
da.description ? da.description : da.name
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const canvasWidth = ref(0);
|
||||
const canvasHeight = ref(0);
|
||||
const headerHeight = ref(0);
|
||||
const leftWidth = ref(0);
|
||||
const rightWidth = ref(0);
|
||||
|
||||
function onHeaderResize(size: { height: number; width: number }) {
|
||||
headerHeight.value = size.height;
|
||||
onResize();
|
||||
}
|
||||
function onLeftResize(size: { height: number; width: number }) {
|
||||
leftWidth.value = size.width;
|
||||
onResize();
|
||||
}
|
||||
function onRightResize(size: { height: number; width: number }) {
|
||||
rightWidth.value = size.width;
|
||||
onResize();
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
const clientWidth = document.body.clientWidth;
|
||||
const clientHeight = document.body.clientHeight;
|
||||
canvasWidth.value =
|
||||
clientWidth -
|
||||
(leftDrawerOpen.value ? leftWidth.value : 0) -
|
||||
(rightDrawerOpen.value ? rightWidth.value : 0);
|
||||
canvasHeight.value = clientHeight - headerHeight.value;
|
||||
const dom = document.getElementById('draw-app-container');
|
||||
if (dom) {
|
||||
dom.style.width = canvasWidth.value + 'px';
|
||||
dom.style.height = canvasHeight.value + 'px';
|
||||
}
|
||||
const drawApp = getDrawApp();
|
||||
if (drawApp) {
|
||||
drawApp.onDomResize(canvasWidth.value, canvasHeight.value);
|
||||
}
|
||||
}
|
||||
function saveAllDrawDatas() {
|
||||
const drawApp = getDrawApp();
|
||||
saveDrawToServer(drawApp as JlDrawApp);
|
||||
}
|
||||
|
||||
function handleCheckData() {
|
||||
const drawApp = getDrawApp();
|
||||
checkDataToServer(drawApp as JlDrawApp);
|
||||
}
|
||||
|
||||
function buildRelations() {
|
||||
const app = getDrawApp();
|
||||
app?.detectRelations();
|
||||
}
|
||||
|
||||
function backConfirm() {
|
||||
router.go(-1);
|
||||
}
|
||||
|
||||
const saveAsDialog = ref(false);
|
||||
const saveAsName = ref('');
|
||||
|
||||
async function saveAs(name: string) {
|
||||
try {
|
||||
const drawApp = getDrawApp();
|
||||
const base64 = saveDrawDatas(drawApp as JlDrawApp);
|
||||
const record = await saveAsDraft(+route.params.id as number, {
|
||||
name,
|
||||
proto: base64,
|
||||
});
|
||||
if (record) {
|
||||
router.replace(`/painting/${record.id}/${record.type}`);
|
||||
}
|
||||
successNotify('另存为成功');
|
||||
saveAsDialog.value = false;
|
||||
} catch (e) {
|
||||
const error = e as ApiError;
|
||||
errorNotify(error.title, e);
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
drawStore.destroy();
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,5 +6,6 @@
|
||||
import * as pb_1 from "google-protobuf";
|
||||
export enum PictureType {
|
||||
StationLayout = 0,
|
||||
Psl = 1
|
||||
Psl = 1,
|
||||
RelayCabinetLayout = 2
|
||||
}
|
||||
|
||||
916
src/protos/relayCabinetLayoutGraphics.ts
Normal file
916
src/protos/relayCabinetLayoutGraphics.ts
Normal file
@ -0,0 +1,916 @@
|
||||
/**
|
||||
* Generated by the protoc-gen-ts. DO NOT EDIT!
|
||||
* compiler version: 4.23.1
|
||||
* source: relayCabinetLayoutGraphics.proto
|
||||
* git: https://github.com/thesayyn/protoc-gen-ts */
|
||||
import * as pb_1 from "google-protobuf";
|
||||
export namespace graphicData {
|
||||
export class RelayCabinetGraphicStorage extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
canvas?: Canvas;
|
||||
relayCabinets?: RelayCabinet[];
|
||||
relays?: Relay[];
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("canvas" in data && data.canvas != undefined) {
|
||||
this.canvas = data.canvas;
|
||||
}
|
||||
if ("relayCabinets" in data && data.relayCabinets != undefined) {
|
||||
this.relayCabinets = data.relayCabinets;
|
||||
}
|
||||
if ("relays" in data && data.relays != undefined) {
|
||||
this.relays = data.relays;
|
||||
}
|
||||
}
|
||||
}
|
||||
get canvas() {
|
||||
return pb_1.Message.getWrapperField(this, Canvas, 1) as Canvas;
|
||||
}
|
||||
set canvas(value: Canvas) {
|
||||
pb_1.Message.setWrapperField(this, 1, value);
|
||||
}
|
||||
get has_canvas() {
|
||||
return pb_1.Message.getField(this, 1) != null;
|
||||
}
|
||||
get relayCabinets() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, RelayCabinet, 2) as RelayCabinet[];
|
||||
}
|
||||
set relayCabinets(value: RelayCabinet[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 2, value);
|
||||
}
|
||||
get relays() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, Relay, 3) as Relay[];
|
||||
}
|
||||
set relays(value: Relay[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 3, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
canvas?: ReturnType<typeof Canvas.prototype.toObject>;
|
||||
relayCabinets?: ReturnType<typeof RelayCabinet.prototype.toObject>[];
|
||||
relays?: ReturnType<typeof Relay.prototype.toObject>[];
|
||||
}): RelayCabinetGraphicStorage {
|
||||
const message = new RelayCabinetGraphicStorage({});
|
||||
if (data.canvas != null) {
|
||||
message.canvas = Canvas.fromObject(data.canvas);
|
||||
}
|
||||
if (data.relayCabinets != null) {
|
||||
message.relayCabinets = data.relayCabinets.map(item => RelayCabinet.fromObject(item));
|
||||
}
|
||||
if (data.relays != null) {
|
||||
message.relays = data.relays.map(item => Relay.fromObject(item));
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
canvas?: ReturnType<typeof Canvas.prototype.toObject>;
|
||||
relayCabinets?: ReturnType<typeof RelayCabinet.prototype.toObject>[];
|
||||
relays?: ReturnType<typeof Relay.prototype.toObject>[];
|
||||
} = {};
|
||||
if (this.canvas != null) {
|
||||
data.canvas = this.canvas.toObject();
|
||||
}
|
||||
if (this.relayCabinets != null) {
|
||||
data.relayCabinets = this.relayCabinets.map((item: RelayCabinet) => item.toObject());
|
||||
}
|
||||
if (this.relays != null) {
|
||||
data.relays = this.relays.map((item: Relay) => item.toObject());
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.has_canvas)
|
||||
writer.writeMessage(1, this.canvas, () => this.canvas.serialize(writer));
|
||||
if (this.relayCabinets.length)
|
||||
writer.writeRepeatedMessage(2, this.relayCabinets, (item: RelayCabinet) => item.serialize(writer));
|
||||
if (this.relays.length)
|
||||
writer.writeRepeatedMessage(3, this.relays, (item: Relay) => item.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): RelayCabinetGraphicStorage {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new RelayCabinetGraphicStorage();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
reader.readMessage(message.canvas, () => message.canvas = Canvas.deserialize(reader));
|
||||
break;
|
||||
case 2:
|
||||
reader.readMessage(message.relayCabinets, () => pb_1.Message.addToRepeatedWrapperField(message, 2, RelayCabinet.deserialize(reader), RelayCabinet));
|
||||
break;
|
||||
case 3:
|
||||
reader.readMessage(message.relays, () => pb_1.Message.addToRepeatedWrapperField(message, 3, Relay.deserialize(reader), Relay));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): RelayCabinetGraphicStorage {
|
||||
return RelayCabinetGraphicStorage.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Canvas extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
width?: number;
|
||||
height?: number;
|
||||
backgroundColor?: string;
|
||||
viewportTransform?: Transform;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("width" in data && data.width != undefined) {
|
||||
this.width = data.width;
|
||||
}
|
||||
if ("height" in data && data.height != undefined) {
|
||||
this.height = data.height;
|
||||
}
|
||||
if ("backgroundColor" in data && data.backgroundColor != undefined) {
|
||||
this.backgroundColor = data.backgroundColor;
|
||||
}
|
||||
if ("viewportTransform" in data && data.viewportTransform != undefined) {
|
||||
this.viewportTransform = data.viewportTransform;
|
||||
}
|
||||
}
|
||||
}
|
||||
get width() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
|
||||
}
|
||||
set width(value: number) {
|
||||
pb_1.Message.setField(this, 1, value);
|
||||
}
|
||||
get height() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 2, 0) as number;
|
||||
}
|
||||
set height(value: number) {
|
||||
pb_1.Message.setField(this, 2, value);
|
||||
}
|
||||
get backgroundColor() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
|
||||
}
|
||||
set backgroundColor(value: string) {
|
||||
pb_1.Message.setField(this, 3, value);
|
||||
}
|
||||
get viewportTransform() {
|
||||
return pb_1.Message.getWrapperField(this, Transform, 4) as Transform;
|
||||
}
|
||||
set viewportTransform(value: Transform) {
|
||||
pb_1.Message.setWrapperField(this, 4, value);
|
||||
}
|
||||
get has_viewportTransform() {
|
||||
return pb_1.Message.getField(this, 4) != null;
|
||||
}
|
||||
static fromObject(data: {
|
||||
width?: number;
|
||||
height?: number;
|
||||
backgroundColor?: string;
|
||||
viewportTransform?: ReturnType<typeof Transform.prototype.toObject>;
|
||||
}): Canvas {
|
||||
const message = new Canvas({});
|
||||
if (data.width != null) {
|
||||
message.width = data.width;
|
||||
}
|
||||
if (data.height != null) {
|
||||
message.height = data.height;
|
||||
}
|
||||
if (data.backgroundColor != null) {
|
||||
message.backgroundColor = data.backgroundColor;
|
||||
}
|
||||
if (data.viewportTransform != null) {
|
||||
message.viewportTransform = Transform.fromObject(data.viewportTransform);
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
width?: number;
|
||||
height?: number;
|
||||
backgroundColor?: string;
|
||||
viewportTransform?: ReturnType<typeof Transform.prototype.toObject>;
|
||||
} = {};
|
||||
if (this.width != null) {
|
||||
data.width = this.width;
|
||||
}
|
||||
if (this.height != null) {
|
||||
data.height = this.height;
|
||||
}
|
||||
if (this.backgroundColor != null) {
|
||||
data.backgroundColor = this.backgroundColor;
|
||||
}
|
||||
if (this.viewportTransform != null) {
|
||||
data.viewportTransform = this.viewportTransform.toObject();
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.width != 0)
|
||||
writer.writeInt32(1, this.width);
|
||||
if (this.height != 0)
|
||||
writer.writeInt32(2, this.height);
|
||||
if (this.backgroundColor.length)
|
||||
writer.writeString(3, this.backgroundColor);
|
||||
if (this.has_viewportTransform)
|
||||
writer.writeMessage(4, this.viewportTransform, () => this.viewportTransform.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Canvas {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Canvas();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
message.width = reader.readInt32();
|
||||
break;
|
||||
case 2:
|
||||
message.height = reader.readInt32();
|
||||
break;
|
||||
case 3:
|
||||
message.backgroundColor = reader.readString();
|
||||
break;
|
||||
case 4:
|
||||
reader.readMessage(message.viewportTransform, () => message.viewportTransform = Transform.deserialize(reader));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Canvas {
|
||||
return Canvas.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Point extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
x?: number;
|
||||
y?: number;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("x" in data && data.x != undefined) {
|
||||
this.x = data.x;
|
||||
}
|
||||
if ("y" in data && data.y != undefined) {
|
||||
this.y = data.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
get x() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 1, 0) as number;
|
||||
}
|
||||
set x(value: number) {
|
||||
pb_1.Message.setField(this, 1, value);
|
||||
}
|
||||
get y() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 2, 0) as number;
|
||||
}
|
||||
set y(value: number) {
|
||||
pb_1.Message.setField(this, 2, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
x?: number;
|
||||
y?: number;
|
||||
}): Point {
|
||||
const message = new Point({});
|
||||
if (data.x != null) {
|
||||
message.x = data.x;
|
||||
}
|
||||
if (data.y != null) {
|
||||
message.y = data.y;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
x?: number;
|
||||
y?: number;
|
||||
} = {};
|
||||
if (this.x != null) {
|
||||
data.x = this.x;
|
||||
}
|
||||
if (this.y != null) {
|
||||
data.y = this.y;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.x != 0)
|
||||
writer.writeFloat(1, this.x);
|
||||
if (this.y != 0)
|
||||
writer.writeFloat(2, this.y);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Point {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Point();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
message.x = reader.readFloat();
|
||||
break;
|
||||
case 2:
|
||||
message.y = reader.readFloat();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Point {
|
||||
return Point.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Transform extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
position?: Point;
|
||||
scale?: Point;
|
||||
rotation?: number;
|
||||
skew?: Point;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("position" in data && data.position != undefined) {
|
||||
this.position = data.position;
|
||||
}
|
||||
if ("scale" in data && data.scale != undefined) {
|
||||
this.scale = data.scale;
|
||||
}
|
||||
if ("rotation" in data && data.rotation != undefined) {
|
||||
this.rotation = data.rotation;
|
||||
}
|
||||
if ("skew" in data && data.skew != undefined) {
|
||||
this.skew = data.skew;
|
||||
}
|
||||
}
|
||||
}
|
||||
get position() {
|
||||
return pb_1.Message.getWrapperField(this, Point, 1) as Point;
|
||||
}
|
||||
set position(value: Point) {
|
||||
pb_1.Message.setWrapperField(this, 1, value);
|
||||
}
|
||||
get has_position() {
|
||||
return pb_1.Message.getField(this, 1) != null;
|
||||
}
|
||||
get scale() {
|
||||
return pb_1.Message.getWrapperField(this, Point, 2) as Point;
|
||||
}
|
||||
set scale(value: Point) {
|
||||
pb_1.Message.setWrapperField(this, 2, value);
|
||||
}
|
||||
get has_scale() {
|
||||
return pb_1.Message.getField(this, 2) != null;
|
||||
}
|
||||
get rotation() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 3, 0) as number;
|
||||
}
|
||||
set rotation(value: number) {
|
||||
pb_1.Message.setField(this, 3, value);
|
||||
}
|
||||
get skew() {
|
||||
return pb_1.Message.getWrapperField(this, Point, 4) as Point;
|
||||
}
|
||||
set skew(value: Point) {
|
||||
pb_1.Message.setWrapperField(this, 4, value);
|
||||
}
|
||||
get has_skew() {
|
||||
return pb_1.Message.getField(this, 4) != null;
|
||||
}
|
||||
static fromObject(data: {
|
||||
position?: ReturnType<typeof Point.prototype.toObject>;
|
||||
scale?: ReturnType<typeof Point.prototype.toObject>;
|
||||
rotation?: number;
|
||||
skew?: ReturnType<typeof Point.prototype.toObject>;
|
||||
}): Transform {
|
||||
const message = new Transform({});
|
||||
if (data.position != null) {
|
||||
message.position = Point.fromObject(data.position);
|
||||
}
|
||||
if (data.scale != null) {
|
||||
message.scale = Point.fromObject(data.scale);
|
||||
}
|
||||
if (data.rotation != null) {
|
||||
message.rotation = data.rotation;
|
||||
}
|
||||
if (data.skew != null) {
|
||||
message.skew = Point.fromObject(data.skew);
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
position?: ReturnType<typeof Point.prototype.toObject>;
|
||||
scale?: ReturnType<typeof Point.prototype.toObject>;
|
||||
rotation?: number;
|
||||
skew?: ReturnType<typeof Point.prototype.toObject>;
|
||||
} = {};
|
||||
if (this.position != null) {
|
||||
data.position = this.position.toObject();
|
||||
}
|
||||
if (this.scale != null) {
|
||||
data.scale = this.scale.toObject();
|
||||
}
|
||||
if (this.rotation != null) {
|
||||
data.rotation = this.rotation;
|
||||
}
|
||||
if (this.skew != null) {
|
||||
data.skew = this.skew.toObject();
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.has_position)
|
||||
writer.writeMessage(1, this.position, () => this.position.serialize(writer));
|
||||
if (this.has_scale)
|
||||
writer.writeMessage(2, this.scale, () => this.scale.serialize(writer));
|
||||
if (this.rotation != 0)
|
||||
writer.writeFloat(3, this.rotation);
|
||||
if (this.has_skew)
|
||||
writer.writeMessage(4, this.skew, () => this.skew.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Transform {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Transform();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
reader.readMessage(message.position, () => message.position = Point.deserialize(reader));
|
||||
break;
|
||||
case 2:
|
||||
reader.readMessage(message.scale, () => message.scale = Point.deserialize(reader));
|
||||
break;
|
||||
case 3:
|
||||
message.rotation = reader.readFloat();
|
||||
break;
|
||||
case 4:
|
||||
reader.readMessage(message.skew, () => message.skew = Point.deserialize(reader));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Transform {
|
||||
return Transform.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class ChildTransform extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
name?: string;
|
||||
transform?: Transform;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("name" in data && data.name != undefined) {
|
||||
this.name = data.name;
|
||||
}
|
||||
if ("transform" in data && data.transform != undefined) {
|
||||
this.transform = data.transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
get name() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
|
||||
}
|
||||
set name(value: string) {
|
||||
pb_1.Message.setField(this, 1, value);
|
||||
}
|
||||
get transform() {
|
||||
return pb_1.Message.getWrapperField(this, Transform, 2) as Transform;
|
||||
}
|
||||
set transform(value: Transform) {
|
||||
pb_1.Message.setWrapperField(this, 2, value);
|
||||
}
|
||||
get has_transform() {
|
||||
return pb_1.Message.getField(this, 2) != null;
|
||||
}
|
||||
static fromObject(data: {
|
||||
name?: string;
|
||||
transform?: ReturnType<typeof Transform.prototype.toObject>;
|
||||
}): ChildTransform {
|
||||
const message = new ChildTransform({});
|
||||
if (data.name != null) {
|
||||
message.name = data.name;
|
||||
}
|
||||
if (data.transform != null) {
|
||||
message.transform = Transform.fromObject(data.transform);
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
name?: string;
|
||||
transform?: ReturnType<typeof Transform.prototype.toObject>;
|
||||
} = {};
|
||||
if (this.name != null) {
|
||||
data.name = this.name;
|
||||
}
|
||||
if (this.transform != null) {
|
||||
data.transform = this.transform.toObject();
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.name.length)
|
||||
writer.writeString(1, this.name);
|
||||
if (this.has_transform)
|
||||
writer.writeMessage(2, this.transform, () => this.transform.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): ChildTransform {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new ChildTransform();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
message.name = reader.readString();
|
||||
break;
|
||||
case 2:
|
||||
reader.readMessage(message.transform, () => message.transform = Transform.deserialize(reader));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): ChildTransform {
|
||||
return ChildTransform.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class CommonInfo extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
id?: string;
|
||||
graphicType?: string;
|
||||
transform?: Transform;
|
||||
childTransforms?: ChildTransform[];
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("id" in data && data.id != undefined) {
|
||||
this.id = data.id;
|
||||
}
|
||||
if ("graphicType" in data && data.graphicType != undefined) {
|
||||
this.graphicType = data.graphicType;
|
||||
}
|
||||
if ("transform" in data && data.transform != undefined) {
|
||||
this.transform = data.transform;
|
||||
}
|
||||
if ("childTransforms" in data && data.childTransforms != undefined) {
|
||||
this.childTransforms = data.childTransforms;
|
||||
}
|
||||
}
|
||||
}
|
||||
get id() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
|
||||
}
|
||||
set id(value: string) {
|
||||
pb_1.Message.setField(this, 1, value);
|
||||
}
|
||||
get graphicType() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
|
||||
}
|
||||
set graphicType(value: string) {
|
||||
pb_1.Message.setField(this, 2, value);
|
||||
}
|
||||
get transform() {
|
||||
return pb_1.Message.getWrapperField(this, Transform, 3) as Transform;
|
||||
}
|
||||
set transform(value: Transform) {
|
||||
pb_1.Message.setWrapperField(this, 3, value);
|
||||
}
|
||||
get has_transform() {
|
||||
return pb_1.Message.getField(this, 3) != null;
|
||||
}
|
||||
get childTransforms() {
|
||||
return pb_1.Message.getRepeatedWrapperField(this, ChildTransform, 4) as ChildTransform[];
|
||||
}
|
||||
set childTransforms(value: ChildTransform[]) {
|
||||
pb_1.Message.setRepeatedWrapperField(this, 4, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
id?: string;
|
||||
graphicType?: string;
|
||||
transform?: ReturnType<typeof Transform.prototype.toObject>;
|
||||
childTransforms?: ReturnType<typeof ChildTransform.prototype.toObject>[];
|
||||
}): CommonInfo {
|
||||
const message = new CommonInfo({});
|
||||
if (data.id != null) {
|
||||
message.id = data.id;
|
||||
}
|
||||
if (data.graphicType != null) {
|
||||
message.graphicType = data.graphicType;
|
||||
}
|
||||
if (data.transform != null) {
|
||||
message.transform = Transform.fromObject(data.transform);
|
||||
}
|
||||
if (data.childTransforms != null) {
|
||||
message.childTransforms = data.childTransforms.map(item => ChildTransform.fromObject(item));
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
id?: string;
|
||||
graphicType?: string;
|
||||
transform?: ReturnType<typeof Transform.prototype.toObject>;
|
||||
childTransforms?: ReturnType<typeof ChildTransform.prototype.toObject>[];
|
||||
} = {};
|
||||
if (this.id != null) {
|
||||
data.id = this.id;
|
||||
}
|
||||
if (this.graphicType != null) {
|
||||
data.graphicType = this.graphicType;
|
||||
}
|
||||
if (this.transform != null) {
|
||||
data.transform = this.transform.toObject();
|
||||
}
|
||||
if (this.childTransforms != null) {
|
||||
data.childTransforms = this.childTransforms.map((item: ChildTransform) => item.toObject());
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.id.length)
|
||||
writer.writeString(1, this.id);
|
||||
if (this.graphicType.length)
|
||||
writer.writeString(2, this.graphicType);
|
||||
if (this.has_transform)
|
||||
writer.writeMessage(3, this.transform, () => this.transform.serialize(writer));
|
||||
if (this.childTransforms.length)
|
||||
writer.writeRepeatedMessage(4, this.childTransforms, (item: ChildTransform) => item.serialize(writer));
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): CommonInfo {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new CommonInfo();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
message.id = reader.readString();
|
||||
break;
|
||||
case 2:
|
||||
message.graphicType = reader.readString();
|
||||
break;
|
||||
case 3:
|
||||
reader.readMessage(message.transform, () => message.transform = Transform.deserialize(reader));
|
||||
break;
|
||||
case 4:
|
||||
reader.readMessage(message.childTransforms, () => pb_1.Message.addToRepeatedWrapperField(message, 4, ChildTransform.deserialize(reader), ChildTransform));
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): CommonInfo {
|
||||
return CommonInfo.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class RelayCabinet extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
common?: CommonInfo;
|
||||
code?: string;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("common" in data && data.common != undefined) {
|
||||
this.common = data.common;
|
||||
}
|
||||
if ("code" in data && data.code != undefined) {
|
||||
this.code = data.code;
|
||||
}
|
||||
}
|
||||
}
|
||||
get common() {
|
||||
return pb_1.Message.getWrapperField(this, CommonInfo, 1) as CommonInfo;
|
||||
}
|
||||
set common(value: CommonInfo) {
|
||||
pb_1.Message.setWrapperField(this, 1, value);
|
||||
}
|
||||
get has_common() {
|
||||
return pb_1.Message.getField(this, 1) != null;
|
||||
}
|
||||
get code() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
|
||||
}
|
||||
set code(value: string) {
|
||||
pb_1.Message.setField(this, 2, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
}): RelayCabinet {
|
||||
const message = new RelayCabinet({});
|
||||
if (data.common != null) {
|
||||
message.common = CommonInfo.fromObject(data.common);
|
||||
}
|
||||
if (data.code != null) {
|
||||
message.code = data.code;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
} = {};
|
||||
if (this.common != null) {
|
||||
data.common = this.common.toObject();
|
||||
}
|
||||
if (this.code != null) {
|
||||
data.code = this.code;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.has_common)
|
||||
writer.writeMessage(1, this.common, () => this.common.serialize(writer));
|
||||
if (this.code.length)
|
||||
writer.writeString(2, this.code);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): RelayCabinet {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new RelayCabinet();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
reader.readMessage(message.common, () => message.common = CommonInfo.deserialize(reader));
|
||||
break;
|
||||
case 2:
|
||||
message.code = reader.readString();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): RelayCabinet {
|
||||
return RelayCabinet.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
export class Relay extends pb_1.Message {
|
||||
#one_of_decls: number[][] = [];
|
||||
constructor(data?: any[] | {
|
||||
common?: CommonInfo;
|
||||
code?: string;
|
||||
}) {
|
||||
super();
|
||||
pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
|
||||
if (!Array.isArray(data) && typeof data == "object") {
|
||||
if ("common" in data && data.common != undefined) {
|
||||
this.common = data.common;
|
||||
}
|
||||
if ("code" in data && data.code != undefined) {
|
||||
this.code = data.code;
|
||||
}
|
||||
}
|
||||
}
|
||||
get common() {
|
||||
return pb_1.Message.getWrapperField(this, CommonInfo, 1) as CommonInfo;
|
||||
}
|
||||
set common(value: CommonInfo) {
|
||||
pb_1.Message.setWrapperField(this, 1, value);
|
||||
}
|
||||
get has_common() {
|
||||
return pb_1.Message.getField(this, 1) != null;
|
||||
}
|
||||
get code() {
|
||||
return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
|
||||
}
|
||||
set code(value: string) {
|
||||
pb_1.Message.setField(this, 2, value);
|
||||
}
|
||||
static fromObject(data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
}): Relay {
|
||||
const message = new Relay({});
|
||||
if (data.common != null) {
|
||||
message.common = CommonInfo.fromObject(data.common);
|
||||
}
|
||||
if (data.code != null) {
|
||||
message.code = data.code;
|
||||
}
|
||||
return message;
|
||||
}
|
||||
toObject() {
|
||||
const data: {
|
||||
common?: ReturnType<typeof CommonInfo.prototype.toObject>;
|
||||
code?: string;
|
||||
} = {};
|
||||
if (this.common != null) {
|
||||
data.common = this.common.toObject();
|
||||
}
|
||||
if (this.code != null) {
|
||||
data.code = this.code;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
serialize(): Uint8Array;
|
||||
serialize(w: pb_1.BinaryWriter): void;
|
||||
serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
|
||||
const writer = w || new pb_1.BinaryWriter();
|
||||
if (this.has_common)
|
||||
writer.writeMessage(1, this.common, () => this.common.serialize(writer));
|
||||
if (this.code.length)
|
||||
writer.writeString(2, this.code);
|
||||
if (!w)
|
||||
return writer.getResultBuffer();
|
||||
}
|
||||
static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Relay {
|
||||
const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Relay();
|
||||
while (reader.nextField()) {
|
||||
if (reader.isEndGroup())
|
||||
break;
|
||||
switch (reader.getFieldNumber()) {
|
||||
case 1:
|
||||
reader.readMessage(message.common, () => message.common = CommonInfo.deserialize(reader));
|
||||
break;
|
||||
case 2:
|
||||
message.code = reader.readString();
|
||||
break;
|
||||
default: reader.skipField();
|
||||
}
|
||||
}
|
||||
return message;
|
||||
}
|
||||
serializeBinary(): Uint8Array {
|
||||
return this.serialize();
|
||||
}
|
||||
static deserializeBinary(bytes: Uint8Array): Relay {
|
||||
return Relay.deserialize(bytes);
|
||||
}
|
||||
}
|
||||
}
|
||||
91
src/stores/relayCabinet-store.ts
Normal file
91
src/stores/relayCabinet-store.ts
Normal file
@ -0,0 +1,91 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import {
|
||||
destroyDrawApp,
|
||||
getDrawApp,
|
||||
initDrawApp,
|
||||
} from 'src/drawApp/relayCabinetLayoutApp';
|
||||
import { DrawAssistant, JlCanvas, JlDrawApp, JlGraphic } from 'src/jl-graphic';
|
||||
|
||||
export const useDrawStore = defineStore('draw', {
|
||||
state: () => ({
|
||||
drawAssistant: null as DrawAssistant | null,
|
||||
selectedGraphics: null as JlGraphic[] | null,
|
||||
draftId: null as number | null,
|
||||
draftType: 'Line',
|
||||
oneClickType: '',
|
||||
}),
|
||||
getters: {
|
||||
drawMode: (state) => state.drawAssistant != null,
|
||||
drawGraphicType: (state) => state.drawAssistant?.type,
|
||||
drawGraphicName: (state) => state.drawAssistant?.description,
|
||||
drawGraphicTemplate: (state) => state.drawAssistant?.graphicTemplate,
|
||||
|
||||
selectedGraphicType: (state) => {
|
||||
if (state.selectedGraphics) {
|
||||
if (state.selectedGraphics.length === 1) {
|
||||
return state.selectedGraphics[0].type;
|
||||
}
|
||||
}
|
||||
},
|
||||
selectedObjName: (state) => {
|
||||
if (state.selectedGraphics) {
|
||||
if (state.selectedGraphics.length == 0) {
|
||||
return '画布';
|
||||
} else if (state.selectedGraphics.length == 1) {
|
||||
return state.selectedGraphics[0].type;
|
||||
}
|
||||
return '多选';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
selectedGraphic: (state) => {
|
||||
if (state.selectedGraphics) {
|
||||
if (state.selectedGraphics.length === 1) {
|
||||
return state.selectedGraphics[0];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
getDrawApp(): JlDrawApp {
|
||||
const app = getDrawApp();
|
||||
if (app == null) {
|
||||
throw new Error('未初始化app');
|
||||
}
|
||||
return app;
|
||||
},
|
||||
getJlCanvas(): JlCanvas {
|
||||
return this.getDrawApp().canvas;
|
||||
},
|
||||
initDrawApp(dom: HTMLElement) {
|
||||
const app = initDrawApp(dom);
|
||||
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('graphicselectedchange', () => {
|
||||
this.selectedGraphics = app.selectedGraphics;
|
||||
});
|
||||
this.selectedGraphics = [];
|
||||
return app;
|
||||
},
|
||||
destroy() {
|
||||
// console.log('绘制状态清空，绘制应用销毁');
|
||||
this.drawAssistant = null;
|
||||
this.selectedGraphics = null;
|
||||
destroyDrawApp();
|
||||
},
|
||||
setDraftId(id: number | null) {
|
||||
this.draftId = id;
|
||||
},
|
||||
setDraftType(type: string) {
|
||||
this.draftType = type;
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user