From fc97fb8b9ee9ea9be6b29eca3717d21327c5e5c4 Mon Sep 17 00:00:00 2001 From: alan Date: Thu, 16 May 2019 11:31:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8F=92=E4=BB=B6=E8=BF=9E=E6=8E=A5?= =?UTF-8?q?=E6=B1=A0=E9=A1=B5=E9=9D=A2=E5=8F=AF=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 61 ++++++++++++++++++++ src/app/app.component.ts | 1 + src/app/link_status/right/right.component.ts | 11 +++- src/demo/plugin.redis.preview.ts | 1 - src/demo/plugin.tedis.pool.ts | 53 +++++++++++++++++ 5 files changed, 124 insertions(+), 3 deletions(-) create mode 100644 src/demo/plugin.tedis.pool.ts diff --git a/README.md b/README.md index c43391d..0e5c11f 100644 --- a/README.md +++ b/README.md @@ -87,4 +87,65 @@ const form = { password: '123456' }; BI.config(ConstantName, (data: object) => form); +``` + +### 数据连接池页面 +ConstantName名称为`dec.constant.database.conf.connect.form.${name.toLowerCase()}.pool`，值为组件shortcut的名称 + +例如配置`Redis`的连接预览页面： + +```js +const classNamePool = 'fr.plugin.redis.pool'; + +const WidgetPool = BI.inherit(BI.Widget, { + render() { + const {maxActive, maxIdle, numActive, numIdle} = this.options; + + return { + type: 'bi.left', + items: [ + { + type: 'bi.left', + cls: 'right-status-item', + items: [ + { + type: 'bi.vertical', + cls:'right-status-board', + items: [ + { + type: 'bi.vertical', + cls:'right-status-board-item', + items: [ + { + type: 'bi.label', + cls: 'right-status-text', + extraCls: 'card-font1', + text: numActive, + }, + { + type: 'bi.label', + cls: 'right-status-text', + text: '/', + }, + { + type: 'bi.label', + cls: 'right-status-text', + text: maxActive, + }, + ], + }, + { + type: 'bi.label', + text: 'Redis连接数', + }, + ], + }, + ], + }, + ], + }; + }, +}); +BI.shortcut(classNamePool, WidgetPool); +BI.constant('dec.constant.database.conf.connect.form.redis.pool', classNamePool); ``` \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 26d5456..7b9da73 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,6 +6,7 @@ import linkSet from './link_set/link-set.component'; import linkStatus from './link_status/link_status.component'; import '../demo/plugin.redis.edit'; import '../demo/plugin.redis.preview'; +import '../demo/plugin.tedis.pool'; import {fetchLinkList} from '../shared/crud/crud.request'; import './app.component.scss'; diff --git a/src/app/link_status/right/right.component.ts b/src/app/link_status/right/right.component.ts index 594809d..35c4122 100644 --- a/src/app/link_status/right/right.component.ts +++ b/src/app/link_status/right/right.component.ts @@ -3,6 +3,9 @@ import Model from './right.model'; import {info} from '@shared/crud/crud.request'; import RightCard from './right.card.component'; import {InfoType} from './right.typings'; +import {LinkType} from '@ui/type'; +import pluginListConstant from '../../app.constant'; + const className = 'fr.component.linkStatus.right'; let Title: any = null; let Group: any = null; @@ -13,13 +16,17 @@ const Widget: WidgetType = { }, watch:{ statusSelected(title: string) { - Title.setText(`数据连接(${title})`); + const link = BI.find(this.model.linkList, (index: number, item: LinkType) => item.connectionName === title); + const plugins: string[] = BI.Constants.getConstant(pluginListConstant); + const isPlugin = link.text && BI.some(plugins, (index: number, item: string) => item === link.text); + const Pool = isPlugin ? BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${link.text.toLowerCase()}.pool`) : RightCard; info(name, (res: InfoType) => { Group.populate(BI.createItems([{ - type: RightCard, + type: Pool, ...res, }])); }); + Title.setText(`数据连接(${title})`); }, }, render() { diff --git a/src/demo/plugin.redis.preview.ts b/src/demo/plugin.redis.preview.ts index 281fbeb..7082bf3 100644 --- a/src/demo/plugin.redis.preview.ts +++ b/src/demo/plugin.redis.preview.ts @@ -1,7 +1,6 @@ const classNamePreview = 'fr.plugin.redis.preview'; const RedisConstantName = 'dec.constant.database.conf.connect.form.redis.value'; const form = BI.Constants.getConstant(RedisConstantName); -console.log('%cform: ', 'color: MidnightBlue; background: Aquamarine;', form); const Widget = BI.inherit(BI.Widget, { render() { diff --git a/src/demo/plugin.tedis.pool.ts b/src/demo/plugin.tedis.pool.ts new file mode 100644 index 0000000..4dc1c0d --- /dev/null +++ b/src/demo/plugin.tedis.pool.ts @@ -0,0 +1,53 @@ +const classNamePool = 'fr.plugin.redis.pool'; + +const WidgetPool = BI.inherit(BI.Widget, { + render() { + const {maxActive, maxIdle, numActive, numIdle} = this.options; + + return { + type: 'bi.left', + items: [ + { + type: 'bi.left', + cls: 'right-status-item', + items: [ + { + type: 'bi.vertical', + cls:'right-status-board', + items: [ + { + type: 'bi.vertical', + cls:'right-status-board-item', + items: [ + { + type: 'bi.label', + cls: 'right-status-text', + extraCls: 'card-font1', + text: numActive, + }, + { + type: 'bi.label', + cls: 'right-status-text', + text: '/', + }, + { + type: 'bi.label', + cls: 'right-status-text', + text: maxActive, + }, + ], + }, + { + type: 'bi.label', + text: 'Redis连接数', + }, + ], + }, + ], + }, + ], + }; + }, +}); +BI.shortcut(classNamePool, WidgetPool); +BI.constant('dec.constant.database.conf.connect.form.redis.pool', classNamePool);