35 changed files with 895 additions and 26 deletions
@ -0,0 +1,17 @@ |
|||
import type { CSSProperties } from 'vue' |
|||
|
|||
export interface showDialogOption { |
|||
confirmButtonText?: string |
|||
dangerouslyUseHTMLString?: boolean |
|||
showClose?: boolean |
|||
callback?: Function |
|||
showInput?: boolean |
|||
inputPlaceholder?: string |
|||
draggable?: boolean |
|||
closeOnClickModal?: boolean |
|||
showCancelButton?: boolean |
|||
closeOnPressEscape?: boolean |
|||
autofocus?: boolean |
|||
customClass?: string |
|||
customStyle?: CSSProperties |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import { defineMenu } from '@/runtime/DefineMenu.ts' |
|||
|
|||
export default defineMenu((menus) => { |
|||
menus.insertChildren('modelFile', { |
|||
name: 'modelFile', |
|||
label: '编辑', |
|||
icon: renderIcon('ModelFile'), |
|||
order: 1 |
|||
}, [ |
|||
{ |
|||
name: 'find', label: '查找', icon: renderIcon('ModelFile'), order: 1, tip: 'Ctrl+F', divided: true, |
|||
click: () => { |
|||
system.msg('查找') |
|||
} |
|||
}, |
|||
{ |
|||
name: 'undo', label: '撤销', icon: renderIcon('ModelFile'), order: 2, tip: 'Ctrl+Z', |
|||
click: () => { |
|||
system.msg('撤销') |
|||
} |
|||
}, |
|||
{ |
|||
name: 'redo', label: '重做', icon: renderIcon('ModelFile'), order: 3, tip: 'Ctrl+Y', divided: true, |
|||
click: () => { |
|||
system.msg('重做') |
|||
} |
|||
}, |
|||
{ |
|||
name: 'copy', label: '复制', icon: renderIcon('ModelFile'), order: 4, tip: 'Ctrl+C', |
|||
click: () => { |
|||
system.msg('复制') |
|||
} |
|||
}, |
|||
{ |
|||
name: 'cut', label: '剪切', icon: renderIcon('ModelFile'), order: 5, tip: 'Ctrl+X', |
|||
click: () => { |
|||
system.msg('剪切') |
|||
} |
|||
}, |
|||
{ |
|||
name: 'paste', label: '粘贴', icon: renderIcon('ModelFile'), order: 6, tip: 'Ctrl+V', |
|||
click: () => { |
|||
system.msg('粘贴') |
|||
} |
|||
} |
|||
]) |
|||
}) |
|||
@ -0,0 +1,30 @@ |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import { defineMenu } from '@/runtime/DefineMenu.ts' |
|||
|
|||
export default defineMenu((menus) => { |
|||
menus.insertChildren('file', |
|||
{ |
|||
name: 'file', label: '模型', icon: renderIcon('ModelFile'), order: 1, disabled: false |
|||
}, |
|||
[ |
|||
{ |
|||
name: 'open', label: '打开', icon: renderIcon('ModelFile'), order: 1, tip: 'Ctrl+O', |
|||
click: () => { |
|||
system.msg('打开模型文件') |
|||
} |
|||
}, |
|||
{ |
|||
name: 'save', label: '保存', icon: renderIcon('ModelFile'), order: 2, tip: 'Ctrl+S', |
|||
click: () => { |
|||
system.msg('保存模型文件') |
|||
} |
|||
}, |
|||
{ |
|||
name: 'saveAs', label: '另存为', icon: renderIcon('ModelFile'), order: 3, |
|||
click: () => { |
|||
system.msg('另存为模型文件') |
|||
} |
|||
} |
|||
] |
|||
) |
|||
}) |
|||
@ -0,0 +1,12 @@ |
|||
import { defineWidget } from '@/runtime/DefineWidget.ts' |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import AlarmView from './AlarmView.vue' |
|||
|
|||
export default defineWidget({ |
|||
name: 'alarm', |
|||
title: '告警', |
|||
icon: renderIcon('AlarmClock'), |
|||
side: 'right', |
|||
order: 2, |
|||
component: AlarmView |
|||
}) |
|||
@ -0,0 +1,12 @@ |
|||
import { defineWidget } from '@/runtime/DefineWidget.ts' |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import LoggerView from './LoggerView.vue' |
|||
|
|||
export default defineWidget({ |
|||
name: 'logger', |
|||
title: '日志', |
|||
icon: renderIcon('AlarmClock'), |
|||
side: 'bottom', |
|||
order: 2, |
|||
component: LoggerView |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
LoggerView |
|||
</template> |
|||
@ -0,0 +1,12 @@ |
|||
import { defineWidget } from '@/runtime/DefineWidget.ts' |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import ModeltreeView from './ModeltreeView.vue' |
|||
|
|||
export default defineWidget({ |
|||
name: 'modeltree', |
|||
title: '模型', |
|||
icon: renderIcon('AlarmClock'), |
|||
side: 'left', |
|||
order: 1, |
|||
component: ModeltreeView |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
ModeltreeView |
|||
</template> |
|||
@ -0,0 +1,12 @@ |
|||
import { defineWidget } from '@/runtime/DefineWidget.ts' |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import MonitorView from './MonitorView.vue' |
|||
|
|||
export default defineWidget({ |
|||
name: 'monitor', |
|||
title: '监控', |
|||
icon: renderIcon('AlarmClock'), |
|||
side: 'left', |
|||
order: 2, |
|||
component: MonitorView |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
MonitorView |
|||
</template> |
|||
@ -0,0 +1,12 @@ |
|||
import { defineWidget } from '@/runtime/DefineWidget.ts' |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import PropertyView from './PropertyView.vue' |
|||
|
|||
export default defineWidget({ |
|||
name: 'property', |
|||
title: '属性', |
|||
icon: renderIcon('AlarmClock'), |
|||
side: 'right', |
|||
order: 1, |
|||
component: PropertyView |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
PropertyView |
|||
</template> |
|||
@ -0,0 +1,12 @@ |
|||
import { defineWidget } from '../../../runtime/DefineWidget.ts' |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import ScriptView from './ScriptView.vue' |
|||
|
|||
export default defineWidget({ |
|||
name: 'script', |
|||
title: '脚本', |
|||
icon: renderIcon('AlarmClock'), |
|||
side: 'bottom', |
|||
order: 3, |
|||
component: ScriptView |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
ScriptView |
|||
</template> |
|||
@ -0,0 +1,12 @@ |
|||
import { defineWidget } from '@/runtime/DefineWidget.ts' |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import TaskView from './TaskView.vue' |
|||
|
|||
export default defineWidget({ |
|||
name: 'task', |
|||
title: '任务', |
|||
icon: renderIcon('AlarmClock'), |
|||
side: 'bottom', |
|||
order: 1, |
|||
component: TaskView |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
TaskView |
|||
</template> |
|||
@ -0,0 +1,83 @@ |
|||
import type { Component } from 'vue' |
|||
|
|||
export interface MenuOption { |
|||
name: string |
|||
label?: string |
|||
icon?: Component |
|||
order?: number |
|||
tip?: string |
|||
disabled?: boolean | (() => boolean) |
|||
divided?: boolean, |
|||
click?: () => void |
|||
children?: MenuOption[] |
|||
} |
|||
|
|||
export class Menus { |
|||
menus: MenuOption[] = [] |
|||
|
|||
constructor() { |
|||
this.menus = [] |
|||
} |
|||
|
|||
insertChildren(parentName: string, parentIfNotExists: MenuOption, menus: MenuOption[]) { |
|||
const parent = this.getMenu(parentName) |
|||
if (parent) { |
|||
if (!parent.children) { |
|||
parent.children = [] |
|||
} |
|||
// 去重
|
|||
const existingChildren = parent.children.filter((item) => { |
|||
return !menus.some((menu) => menu.name === item.name) |
|||
}) |
|||
menus = [...existingChildren, ...menus] |
|||
// 排序
|
|||
menus.sort((a, b) => { |
|||
return (a.order || 0) - (b.order || 0) |
|||
}) |
|||
parent.children = menus |
|||
|
|||
} else { |
|||
const newParent = { ...parentIfNotExists, children: menus } |
|||
this.insertMenu(newParent) |
|||
} |
|||
} |
|||
|
|||
insertMenu(menu: MenuOption) { |
|||
const existingMenu = this.getMenu(menu.name) |
|||
if (existingMenu) { |
|||
console.log(`Menu ${menu.name} already exists`) |
|||
return |
|||
} |
|||
this.menus.push(menu) |
|||
} |
|||
|
|||
getMenu(name: string): MenuOption | undefined { |
|||
return this.menus.find((menu) => menu.name === name) |
|||
} |
|||
} |
|||
|
|||
const _menus = new Menus() |
|||
|
|||
export interface MenuDefineResult { |
|||
install(): void |
|||
} |
|||
|
|||
export function getRootMenu() { |
|||
return _menus.menus |
|||
} |
|||
|
|||
export function getChildrenMenu(name: string) { |
|||
const menu = _menus.getMenu(name) |
|||
return menu ? menu.children : [] |
|||
} |
|||
|
|||
/** |
|||
* 定义一个 Widget |
|||
*/ |
|||
export function defineMenu(func: (menus: Menus) => void): MenuDefineResult { |
|||
return { |
|||
install() { |
|||
func(_menus) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
import type { Component } from 'vue' |
|||
|
|||
export type WidgetSide = 'left' | 'right' | 'bottom' |
|||
|
|||
export interface WidgetOption { |
|||
name: string |
|||
title?: string |
|||
icon: Component |
|||
side: WidgetSide |
|||
component: Component |
|||
order?: number |
|||
} |
|||
|
|||
const _widgetMap = new Map<string, WidgetOption>() |
|||
|
|||
export class WidgetInfo { |
|||
option: WidgetOption |
|||
|
|||
constructor(option: WidgetOption) { |
|||
this.option = option |
|||
} |
|||
|
|||
public install() { |
|||
if (!this.option.name) { |
|||
throw new Error('Widget name is required') |
|||
} |
|||
if (!this.option.component) { |
|||
throw new Error('Widget component is required') |
|||
} |
|||
if (_widgetMap.has(this.option.name)) { |
|||
console.log(`Widget ${this.option.name} already exists`) |
|||
return |
|||
} |
|||
_widgetMap.set(this.option.name, this.option) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 根据 Widget 定义的位置获取 Widget, 并按 order 排序 |
|||
*/ |
|||
export function getWidgetBySide(side: WidgetSide): WidgetOption[] { |
|||
return Array.from(_widgetMap.values()) |
|||
.filter((widget) => widget.side === side) |
|||
.sort((a, b) => (a.order || 0) - (b.order || 0)) |
|||
} |
|||
|
|||
/** |
|||
* 定义一个 Widget |
|||
*/ |
|||
export function defineWidget(option: WidgetOption): WidgetInfo { |
|||
return new WidgetInfo(option) |
|||
} |
|||
@ -0,0 +1,188 @@ |
|||
import $ from 'jquery' |
|||
import _ from 'lodash' |
|||
import localforage from 'localforage' |
|||
import JSON5 from 'json5' |
|||
import { defineComponent, h, markRaw, nextTick, reactive, toRaw, unref, type App, createApp } from 'vue' |
|||
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus' |
|||
import { QuestionFilled } from '@element-plus/icons-vue' |
|||
import { renderIcon } from '@/utils/webutils.ts' |
|||
import type { showDialogOption } from '@/SystemOption' |
|||
|
|||
export default class System { |
|||
_ = _ |
|||
$ = $ |
|||
createApp = createApp |
|||
toRaw = toRaw |
|||
unref = unref |
|||
nextTick = nextTick |
|||
defer = _.defer |
|||
defineComponent = defineComponent |
|||
markRaw = markRaw |
|||
reactive = reactive |
|||
renderIcon = renderIcon |
|||
|
|||
JSON5 = JSON5 |
|||
json5 = JSON5 |
|||
app!: App |
|||
|
|||
errorDialogContent: string[] = reactive([]) |
|||
errorDialogIsShowing: boolean = false |
|||
|
|||
constructor(app: App) { |
|||
this.app = app |
|||
} |
|||
|
|||
/** |
|||
* 轻量级提示信息 |
|||
* @param message 消息内容 |
|||
*/ |
|||
msg(message: string) { |
|||
// ElMessage(cc)
|
|||
console.trace(message) |
|||
|
|||
const $body = $('body') |
|||
|
|||
$body.find('[xtype=tooltip]').remove() |
|||
const $w = $( |
|||
'<div xtype="tooltip" class="yvan-msg yvan-anim yvan-anim-00">' + |
|||
' <div class="yvan-msg-content">' + |
|||
_.escape(message) + |
|||
'</div></div>' |
|||
) |
|||
$body.append($w) |
|||
|
|||
const iframeWidth = $w.parent().width() as number |
|||
const iframeHeight = $w.parent().height() as number |
|||
|
|||
const windowWidth = $w.width() as number |
|||
const windowHeight = $w.height() as number |
|||
|
|||
let setWidth = (iframeWidth - windowWidth) / 2 |
|||
let setHeight = (iframeHeight - windowHeight) / 2 |
|||
if (iframeHeight < windowHeight || setHeight < 0) { |
|||
setHeight = 0 |
|||
} |
|||
if (iframeWidth < windowWidth || setWidth < 0) { |
|||
setWidth = 0 |
|||
} |
|||
$w.css({ left: setWidth, top: setHeight }) |
|||
setTimeout(() => { |
|||
$w.remove() |
|||
}, 3000) |
|||
} |
|||
|
|||
/** |
|||
* 弹出用户必须点击确认的错误信息 |
|||
*/ |
|||
showErrorDialog(msgOrTitle: string, msg?: string, dangerouslyUseHTMLString?: boolean, closeCallBack?: () => void) { |
|||
let title, message |
|||
if (!msg) { |
|||
console.trace(msgOrTitle) |
|||
title = '错误' |
|||
message = msgOrTitle |
|||
|
|||
} else { |
|||
console.trace(msg) |
|||
title = msgOrTitle |
|||
message = msg |
|||
} |
|||
|
|||
// 如果有一样的内容，就不添加
|
|||
if (_.findIndex(this.errorDialogContent, r => r === message) >= 0) { |
|||
return |
|||
} |
|||
this.errorDialogContent.push(message) |
|||
if (!this.errorDialogIsShowing) { |
|||
// 只有在没有弹出对话框的清空下才弹出
|
|||
this.errorDialogIsShowing = true |
|||
ElMessageBox.alert( |
|||
//@ts-ignore
|
|||
() => { |
|||
if (this.errorDialogContent.length <= 0) { |
|||
return '' |
|||
} |
|||
return _.map(this.errorDialogContent, (item) => |
|||
h('div', null, item) |
|||
) |
|||
}, |
|||
title, |
|||
{ |
|||
dangerouslyUseHTMLString: false, |
|||
closeOnPressEscape: true, |
|||
closeOnClickModal: true, |
|||
confirmButtonText: '关闭', |
|||
type: 'error', |
|||
draggable: true, |
|||
callback: () => { |
|||
this.errorDialogIsShowing = false |
|||
nextTick(() => { |
|||
this.errorDialogContent.splice(0, this.errorDialogContent.length) |
|||
}) |
|||
if (closeCallBack) closeCallBack() |
|||
} |
|||
} |
|||
) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 弹出用户必须确认的提示信息 |
|||
*/ |
|||
showInfoDialog(content: string, option: showDialogOption = { |
|||
confirmButtonText: '关闭', |
|||
draggable: true, |
|||
showCancelButton: false, |
|||
showClose: false, |
|||
dangerouslyUseHTMLString: true, |
|||
autofocus: true, |
|||
closeOnClickModal: false, |
|||
closeOnPressEscape: true |
|||
}) { |
|||
return this.alert(content, option) |
|||
} |
|||
|
|||
/** |
|||
* 信息提示内容，强提示，必须用户点击确认 |
|||
*/ |
|||
alert(msg: string, option?: showDialogOption): Promise<any> { |
|||
console.trace(msg) |
|||
|
|||
// 将 msg 转译为 html enable 格式
|
|||
msg = _.join(_.split(_.escape(msg), '\n'), '<br />') |
|||
|
|||
const newOption = _.extend({ |
|||
confirmButtonText: '关闭', |
|||
draggable: true, |
|||
showCancelButton: false, |
|||
showClose: false, |
|||
dangerouslyUseHTMLString: true, |
|||
autofocus: true, |
|||
closeOnClickModal: false, |
|||
closeOnPressEscape: true |
|||
}, option) |
|||
|
|||
//@ts-ignore
|
|||
return ElMessageBox.alert(msg, '提示', newOption) |
|||
} |
|||
|
|||
/** |
|||
* 弹出确认对话框 |
|||
* @param msg 消息内容 |
|||
*/ |
|||
confirm(msg: string): Promise<void> { |
|||
return new Promise((resolve, reject) => { |
|||
ElMessageBox.confirm(msg, '再次确认', |
|||
{ |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
icon: markRaw(QuestionFilled) |
|||
} |
|||
).then(() => { |
|||
resolve() |
|||
|
|||
}).catch(() => { |
|||
reject() |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
import _ from 'lodash' |
|||
import $ from 'jquery' |
|||
import type System from '@/runtime/System' |
|||
|
|||
declare global { |
|||
const $: $ |
|||
const _: _ |
|||
const system: System |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
import AlarmMeta from '@/components/viewWidgets/alarm/AlarmMeta' |
|||
import LoggerMeta from '@/components/viewWidgets/logger/LoggerMeta' |
|||
import ModeltreeMeta from '@/components/viewWidgets/modeltree/ModeltreeMeta' |
|||
import MonitorMeta from '@/components/viewWidgets/monitor/MonitorMeta' |
|||
import PropertyMeta from '@/components/viewWidgets/property/PropertyMeta' |
|||
import ScriptMeta from '@/components/viewWidgets/script/ScriptMeta' |
|||
import TaskMeta from '@/components/viewWidgets/task/TaskMeta' |
|||
|
|||
import FileMenu from '@/components/viewMenus/fileMenu/FileMenu' |
|||
import EditMenu from '@/components/viewMenus/editMenu/EditMenu' |
|||
|
|||
/** |
|||
* 初始化模型编辑器的基础控件 |
|||
*/ |
|||
export default function ModelMainInit() { |
|||
AlarmMeta.install() |
|||
LoggerMeta.install() |
|||
ModeltreeMeta.install() |
|||
MonitorMeta.install() |
|||
PropertyMeta.install() |
|||
ScriptMeta.install() |
|||
TaskMeta.install() |
|||
|
|||
FileMenu.install() |
|||
EditMenu.install() |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
<template> |
|||
AlarmView |
|||
</template> |
|||
@ -1,3 +0,0 @@ |
|||
<template> |
|||
AlarmView |
|||
</template> |
|||
@ -1,3 +0,0 @@ |
|||
<template> |
|||
AlarmView |
|||
</template> |
|||
@ -1,3 +0,0 @@ |
|||
<template> |
|||
AlarmView |
|||
</template> |
|||
@ -1,3 +0,0 @@ |
|||
<template> |
|||
AlarmView |
|||
</template> |
|||
@ -1,3 +0,0 @@ |
|||
<template> |
|||
AlarmView |
|||
</template> |
|||
Loading…
Reference in new issue