feat: 完成连接池状态页面

src/app/app.component.scss

@@ -45,6 +45,11 @@
         }
       }
     }
+    .status-title{
+      font-weight: 700;
+      margin-left: 12px;
+      margin-top: 12px;
+    }
   }
   .left-list{
     margin: 10px;
@@ -80,6 +85,8 @@
   }
 }
 .database-right{
+  min-width: 400px;
+  overflow: auto;
   .bi-flex-center-adapt-layout{
     height: 100%;
     .data-connection-background{
@@ -87,6 +94,54 @@
       background-size: contain;
     }
   }
+  .right-status-title{
+    border-bottom: 1px solid #e8eaed;
+    color: #3d4d66;
+    line-height: 40px;
+    padding-left: 10px;
+    font-weight: 700;
+  }
+  .right-status-body{
+    margin: 10px 30px 0px 30px;
+    height: 50%;
+    .right-status-item{
+      height: 150px;
+      width: 50%;
+      top: 0; left: 0;
+      position: absolute !important;
+      .right-status-board { margin-left: 25px; position: relative !important; left: -25px;}
+    }
+    .right-status-right{
+      height: 150px;
+      width: 50%;
+      top: 0; right:0;
+      position: absolute !important;
+      .right-status-board { margin-right: 25px; position: relative !important; left: 25px; }
+    }
+    .right-status-board{
+      background-color: #f7f8fa;
+      color: #3d4d66;
+      width: 100%;
+      height: 100%;
+      .right-status-board-item{
+        text-align: center;
+        margin-top: 35px;
+        margin-bottom: 6px;
+        .right-status-text{
+          display: inline-block;
+        }
+        .card-font1{
+          color: #13CD66;
+          font-size: 32px;
+        }
+        .card-font2{
+          color: #3685F2;
+          font-size: 32px;
+        }
+      }
+      
+    }
+  }
   .right-content{
     height: 100%;
     .right-title{

src/app/app.model.ts

@@ -4,7 +4,7 @@ import {LinkType} from '@ui/type';
 const linkList: LinkType[] = [];
 const Model: ModelType = {
     
-  childContext: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'moreLinkSelected'],
+  childContext: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'moreLinkSelected', 'statusSelected', 'connectionNameErr'],
   state () {
     return {
       tab: '数据连接管理',
@@ -12,6 +12,8 @@ const Model: ModelType = {
       linkSelected: {},
       linkUpdate: {},
       moreLinkSelected:'',
+      statusSelected:'',
+      connectionNameErr:'',
     };
   },
   computed: {

src/app/link_set/link-set.model.ts

@@ -7,7 +7,7 @@ import {saveConnection} from './link-set.service';
 
 const className = 'fr.model.linkset';
 const Model: ModelType = {
-  context: ['tab', 'linkList', 'linkSelected', 'linkUpdate'],
+  context: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'connectionNameErr'],
   actions: {
     /**
      * 左侧点击链接选中
@@ -161,7 +161,9 @@ const Model: ModelType = {
         connectionName:name,
       };
     },
-    
+    setConnectionNameErr(err: string) {
+      this.model.connectionNameErr = err;
+    },
   },
 };
 BI.model(className, BI.inherit(Fix.Model, Model));

src/app/link_set/right/right_edit/right.edit.component.ts

@@ -5,11 +5,23 @@ import Model from '../../link-set.model';
 import FormItem from '@shared/components/form.item.component';
 import Title from '@shared/components/title.component';
 import {getDrivers} from './right.edit.service';
+let ConnectionName: any = null;
 const className = 'fr.component.right.edit';
 const Widget: WidgetType = {
   _store() {
     return BI.Models.getModel(Model);
   },
+  watch:{
+    connectionNameErr(msg: string) {
+      if (msg) {
+        BI.Bubbles.show('singleBubble', msg, ConnectionName, {
+          level: 'error',
+        });
+      } else {
+        BI.Bubbles.hide('singleBubble');
+      }
+    },
+  },
   render() {
     const linkSelected: LinkType = this.model.linkSelected;
     const that = this;
@@ -27,6 +39,9 @@ const Widget: WidgetType = {
             cls: 'bi-border',
             width: 300,
             value: linkSelected.connectionName,
+            ref(ref: any) {
+              ConnectionName = ref;
+            },
             listeners: [{
               eventName: BI.Editor.EVENT_CHANGE,
               action() {
@@ -35,6 +50,11 @@ const Widget: WidgetType = {
                   connectionName: this.getValue(),
                 });
               },
+            }, {
+              eventName: BI.Editor.EVENT_FOCUS,
+              action() {
+                that.store.setConnectionNameErr('');
+              },
             }],
           },
         },

src/app/link_set/right/right_edit/right.edit.service.ts

@@ -2,7 +2,7 @@ import {LinkType} from '@ui/type';
 
 export function getDrivers(linkSelected: LinkType): {text: string; value: string}[] {
   const drivers: {text: string; value: string}[] = [];
-  if (linkSelected.drivers.length > 0) {
+  if (linkSelected.drivers && linkSelected.drivers.length > 0) {
     linkSelected.drivers.forEach(item => {
       drivers.push({
         text: item,

src/app/link_set/right/right_title/right.title.component.ts

@@ -9,6 +9,7 @@ const Widget: WidgetType = {
   },
   render() {
     const linkSelected: LinkType = this.model.linkSelected;
+    const linkList: LinkType[] = this.model.linkList;
     const that = this;
     const {isEdit} = this.options;
     
@@ -37,9 +38,14 @@ const Widget: WidgetType = {
           invisible: !isEdit,
           text: '保存',
           handler() {
+            const result = BI.find(linkList, (idx: number, value: LinkType) => that.model.linkUpdate.connectionName === value.connectionName && value.connectionId !== that.model.linkUpdate.connectionId);
+            if (result) {
+              that.store.setConnectionNameErr('数据链接名已存在');
+            } else {
               saveConnection(that.model.linkUpdate).then(() => {
                 that.store.setEdit(false);
               });
+            }
           },
         },
         {

src/app/link_status/left/left.component.ts

@@ -0,0 +1,31 @@
+import {WidgetType, Vertical} from '@ui';
+import Model from './left.model';
+import {LinkType} from '@ui/type';
+import {getLinks} from './left.service';
+const className = 'fr.component.linkStatus.left';
+let leftContent: any = null;
+const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(Model);
+  },
+  watch:{
+    linkList(linkList: LinkType[]) {
+      const title = linkList.length > 0 ? linkList[0].connectionName : '';
+      this.store.setStatusSelected(title);
+    },
+    statusSelected(title: string) {
+      const linkList = this.model.linkList;
+      leftContent.populate(BI.createItems(getLinks(linkList, title)));
+    },
+  },
+  render() {
+    return {
+      type: Vertical,
+      ref(_ref: any) {
+        leftContent = _ref;
+      },
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_status/left/left.item.component.ts

@@ -0,0 +1,39 @@
+import {WidgetType, Left, Label} from '@ui';
+import Model from './left.model';
+const className = 'fr.component.linkStatus.left.item';
+const Widget: WidgetType = {
+  props: {
+    title:'',
+    id:'',
+    creator: '',
+  },
+  _store() {
+    return BI.Models.getModel(Model);
+  },
+  render() {
+    const {title, extraCls, creator, text, id} = this.options;
+    
+    return {
+      type: Left,
+      cls: 'left-item',
+      extraCls,
+      items: [
+        {
+          type: Label,
+          cls:'link-title',
+          textAlign: 'left',
+          text: title,
+          title,
+        },
+      ],
+    };
+  },
+  mounted() {
+    const {title} = this.options;
+    this.element.on('click', () => {
+      this.store.setStatusSelected(title);
+    });
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_status/left/left.model.ts

@@ -0,0 +1,17 @@
+import {ModelType} from '@ui';
+const className = 'fr.model.linkstatus.left';
+const Model: ModelType = {
+  context: ['tab', 'linkList', 'statusSelected'],
+  state () {
+    return {
+      selected:'',
+    };
+  },
+  actions: {
+    setStatusSelected(title: string) {
+      this.model.statusSelected = title;
+    },
+  },
+};
+BI.model(className, BI.inherit(Fix.Model, Model));
+export default className;

src/app/link_status/left/left.service.ts

@@ -0,0 +1,18 @@
+import {LinkType} from '@ui/type';
+import LeftItem from './left.item.component';
+
+export const getLinks = (linkList: LinkType[], selectTitle = ''): any => {
+  const links: any[] = [];
+  linkList.forEach((item: LinkType) => {
+    links.push({
+      type: LeftItem,
+      extraCls: item.connectionName === selectTitle ? 'left-item-selected' : '',
+      title: item.connectionName,
+      id: item.connectionId,
+      creator: item.creator,
+      text: item.text ? item.text : '默认',
+    });
+  });
+  
+  return links;
+};

src/app/link_status/link_status.component.ts

@@ -1,5 +1,7 @@
-import {WidgetType, Htape} from '@ui';
+import {WidgetType, Htape, Vtape, Left, Label} from '@ui';
 import linkStatusModel from './link_status.model';
+import LeftList from './left/left.component';
+import Right from './right/right.component';
 const className = 'fr.linkstatus';
 
 const Widget: WidgetType = {
@@ -17,17 +19,31 @@ const Widget: WidgetType = {
       cls: 'linkStatus',
       items: [{
         el: {
-          type: 'bi.label',
+          type: Vtape,
-          cls: 'layout-bg2',
+          cls: 'database-left',
-          textAlign: 'left',
+          items: [
-          text: '222',
+            {
+              el: {
+                type: Left,
+                cls:'select-group',
+                items:[
+                  {
+                    type: Label,
+                    cls:'status-title',
+                    text: '数据连接',
+                  },
+                ],
+              },
+              height: 40,
+            }, {
+              type: LeftList,
+              cls: 'left-list',
+            },
+          ],
         },
         width: 280,
       }, {
-        type: 'bi.label',
+        type: Right,
-        cls: 'layout-bg2',
-        textAlign: 'left',
-        text: '宽度充满剩余空间',
       }],
     };
   },

src/app/link_status/link_status.model.ts

@@ -1,9 +1,8 @@
 import {ModelType} from '@ui';
 const className = 'fr.model.linkstatus';
 const Model: ModelType = {
-  context: ['tab'],
+  context: ['tab', 'linkList'],
   actions: {
-    
   },
 };
 BI.model(className, BI.inherit(Fix.Model, Model));

src/app/link_status/right/right.card.component.ts

@@ -0,0 +1,89 @@
+import {WidgetType, Left, Label, Vertical} from '@ui/index';
+const className = 'fr.component.linkStatus.right.card';
+const Widget: WidgetType = {
+  render() {
+    return {
+      type: Left,
+      items: [
+        {
+          type: Left,
+          cls: 'right-status-item',
+          items: [
+            {
+              type: Vertical,
+              cls:'right-status-board',
+              items: [
+                {
+                  type: Vertical,
+                  cls:'right-status-board-item',
+                  items: [
+                    {
+                      type: Label,
+                      cls: 'right-status-text',
+                      extraCls: 'card-font1',
+                      text: '0',
+                    },
+                    {
+                      type: Label,
+                      cls: 'right-status-text',
+                      text: '/',
+                    },
+                    {
+                      type: Label,
+                      cls: 'right-status-text',
+                      text: '50',
+                    },
+                  ],
+                },
+                {
+                  type: Label,
+                  text: '活动连接数',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: Left,
+          cls: 'right-status-right',
+          items: [
+            {
+              type: Vertical,
+              cls:'right-status-board',
+              items: [
+                {
+                  type: Vertical,
+                  cls:'right-status-board-item',
+                  items: [
+                    {
+                      type: Label,
+                      cls: 'right-status-text',
+                      extraCls: 'card-font2',
+                      text: '0',
+                    },
+                    {
+                      type: Label,
+                      cls: 'right-status-text',
+                      text: '/',
+                    },
+                    {
+                      type: Label,
+                      cls: 'right-status-text',
+                      text: '50',
+                    },
+                  ],
+                },
+                {
+                  type: Label,
+                  text: '空闲连接数',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_status/right/right.component.ts

@@ -0,0 +1,48 @@
+import {WidgetType, Vertical, Left, Label} from '@ui/index';
+import Model from './right.model';
+import RightCard from './right.card.component';
+const className = 'fr.component.linkStatus.right';
+let Title: any = null;
+
+const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(Model);
+  },
+  watch:{
+    statusSelected(title: string) {
+      Title.setText(`数据连接(${title})`);
+    },
+  },
+  render() {
+    return {
+      type:Vertical,
+      cls:'database-right',
+      items:[
+        {
+          type: Left,
+          height: 40,
+          cls: 'right-status-title',
+          items:[
+            {
+              type: Label,
+              text:'数据连接',
+            },
+          ],
+          ref(ref: any) {
+            Title = ref;
+          },
+        }, {
+          type: Vertical,
+          cls: 'right-status-body',
+          items: [
+            {
+              type: RightCard,
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_status/right/right.model.ts

@@ -0,0 +1,14 @@
+import {ModelType} from '@ui';
+const className = 'fr.model.linkstatus.right';
+const Model: ModelType = {
+  context: ['linkList', 'statusSelected'],
+  state () {
+    return {
+      selected:'',
+    };
+  },
+  actions: {
+  },
+};
+BI.model(className, BI.inherit(Fix.Model, Model));
+export default className;

src/ui/fineui.ts

@@ -34,6 +34,7 @@ export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view';
 export const BubbleCombo = 'bi.bubble_combo';
 export const SearchEditor = 'bi.search_editor';
 export const Img = 'bi.img';
+export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt';
 
 // 布局
 export const VerticalAdapt = 'bi.vertical_adapt';