feat: DEC-9068 无数据连接时显示提示图片

src/modules/pages/connection_pool/connection_pool.ts

@@ -1,5 +1,5 @@
 import { shortcut, store } from '@core/core';
-import { ButtonGroup, Htape, Vtape, Label, Vertical, Layout } from 'ui';
+import { ButtonGroup, Htape, Vtape, Label, Vertical, Layout, CenterAdapt } from 'ui';
 import { ConnectionPoolModel, ConnectionPoolModelXtype } from './connection_pool.model';
 import { ListItemXtype } from './list_item/list_item';
 import { PoolXtype } from './pool/pool';
@@ -57,28 +57,60 @@ export class ConnectionPool extends BI.Widget {
                     },
                     width: 275,
                 },
+                this.model.connectionJDBC.length > 0 ?
+                    this.renderPool() : this.renderNoConnection(),
+            ],
+        };
+    }
+
+    private renderPool() {
+        return {
+            type: Vtape,
+            items: [
+                {
+                    el: {
+                        type: Label,
+                        cls: 'bi-border-bottom',
+                        textAlign: 'left',
+                        lgap: 10,
+                        ref: (_ref: any) => {
+                            this.title = _ref;
+                        },
+                    },
+                    height: 40,
+                },
+                this.model.connectionJDBC.length > 0 ?
+                    {
+                        type: PoolXtype,
+                    } :
+                    {
+                        type: Layout,
+                    },
+            ],
+        };
+    }
+
+    private renderNoConnection() {
+        return {
+            type: CenterAdapt,
+            items: [
                 {
                     type: Vtape,
+                    width: 260,
+                    height: 150,
                     items: [
                         {
                             el: {
-                                type: Label,
-                                cls: 'bi-border-bottom',
-                                textAlign: 'left',
-                                lgap: 10,
-                                ref: (_ref: any) => {
-                                    this.title = _ref;
-                                },
-                            },
-                            height: 40,
-                        },
-                        this.model.connectionJDBC.length > 0 ?
-                            {
-                                type: PoolXtype,
-                            } :
-                            {
                                 type: Layout,
+                                cls: 'data-connection-background',
                             },
+                            height: 130,
+                        },
+                        {
+                            type: Label,
+                            cls: 'bi-tips',
+                            text: BI.i18nText('Dec-Dcm_Connection_Plase_Add_One'),
+                        },
                     ],
                 },
             ],