studio

dlink-web/config/defaultSettings.ts

@@ -12,7 +12,7 @@ const Settings: LayoutSettings & {
   fixedHeader: false,
   fixSiderbar: true,
   colorWeak: false,
-  title: 'Dlink',
+  title: 'Dlink & Apache Flink',
   pwa: false,
   logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
   iconfontUrl: '',

dlink-web/config/routes.ts

@@ -21,12 +21,12 @@ export default [
     icon: 'home',
     component: './Welcome',
   },
-  {
+  /*{
     path: '/studio',
     name: 'studio',
     icon: 'consoleSql',
     component: './Studio',
-  },
+  },*/
   {
     path: '/flinksqlstudio',
     name: 'flinsqlstudio',

dlink-web/src/components/Common/index.tsx

+

dlink-web/src/components/Studio/StudioConsole/index.tsx

+import { Tabs,Empty } from "antd";
+import {CodeOutlined, TableOutlined,RadarChartOutlined,CalendarOutlined,FileSearchOutlined} from "@ant-design/icons";
+import {StateType} from "@/pages/FlinkSqlStudio/model";
+import {connect} from "umi";
+import styles from "./index.less";
+
+const { TabPane } = Tabs;
+
+
+
+const StudioConsole = (props:any) => {
+
+  const {sql} = props;
+
+  const executeSql = () =>{
+    console.log('获取'+sql);
+  };
+
+
+  return (
+    <Tabs defaultActiveKey="1" size="small">
+      <TabPane
+        tab={
+          <span>
+          <CodeOutlined />
+          信息
+        </span>
+        }
+        key="1"
+      >
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </TabPane>
+      <TabPane
+        tab={
+          <span>
+          <TableOutlined />
+          结果
+        </span>
+        }
+        key="2"
+      >
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </TabPane>
+      <TabPane
+        tab={
+          <span>
+          <RadarChartOutlined />
+          指标
+        </span>
+        }
+        key="3"
+      >
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </TabPane>
+      <TabPane
+        tab={
+          <span>
+          <CalendarOutlined />
+          历史
+        </span>
+        }
+        key="4"
+      >
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </TabPane>
+      <TabPane
+        tab={
+          <span>
+          <FileSearchOutlined />
+          文档
+        </span>
+        }
+        key="4"
+      >
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </TabPane>
+    </Tabs>
+  );
+};
+
+export default connect(({ Studio }: { Studio: StateType }) => ({
+  sql: Studio.sql,
+}))(StudioConsole);

dlink-web/src/components/Studio/StudioMenu/index.tsx

 import React from "react";
 import styles from "./index.less";
-import { Menu, Dropdown, Typography, Row, Col } from "antd";
-import {CaretRightOutlined, DownOutlined, PlayCircleOutlined } from "@ant-design/icons";
+import {Menu, Dropdown, Typography, Row, Col} from "antd";
+import {PauseCircleTwoTone, CopyTwoTone, DeleteTwoTone,PlayCircleTwoTone,DiffTwoTone,
+  FileAddTwoTone,FolderOpenTwoTone,SafetyCertificateTwoTone,SaveTwoTone,FlagTwoTone,EnvironmentOutlined} from "@ant-design/icons";
 import Space from "antd/es/space";
 import Divider from "antd/es/divider";
 import Button from "antd/es/button/button";
@@ -9,7 +10,7 @@ import Breadcrumb from "antd/es/breadcrumb/Breadcrumb";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
 
-const { SubMenu } = Menu;
+const {SubMenu} = Menu;
 //<Button shape="circle" icon={<CaretRightOutlined />} />
 const menu = (
   <Menu>
@@ -27,13 +28,12 @@ const menu = (
 );
 
 
-
-const StudioMenu = (props:any) => {
+const StudioMenu = (props: any) => {
 
   const {sql} = props;
   console.log(props);
-  const executeSql = () =>{
-    console.log('获取'+sql);
+  const executeSql = () => {
+    console.log('获取' + sql);
   };
 
   const runMenu = (
@@ -72,16 +72,69 @@ const StudioMenu = (props:any) => {
       </Col>
       <Divider className={styles["ant-divider-horizontal-0"]}/>
       <Col span={24}>
-        <Breadcrumb className={styles["dw-path"]}>
-          <Breadcrumb.Item>数据仓库</Breadcrumb.Item>
-          <Breadcrumb.Item>维度</Breadcrumb.Item>
-          <Breadcrumb.Item>用户信息</Breadcrumb.Item>
-        </Breadcrumb>
+        <Row>
+          <Col span={8}>
+            <Breadcrumb className={styles["dw-path"]}>
+              <EnvironmentOutlined />
+              <Divider type="vertical" />
+              <Breadcrumb.Item>数据仓库</Breadcrumb.Item>
+              <Breadcrumb.Item>维度</Breadcrumb.Item>
+              <Breadcrumb.Item>用户信息</Breadcrumb.Item>
+            </Breadcrumb>
+          </Col>
+          <Col span={8} offset={8}>
+            <Button
+              type="text"
+              icon={<FileAddTwoTone />}
+            />
+            <Button
+              type="text"
+              icon={<FolderOpenTwoTone />}
+            />
+            <Button
+              type="text"
+              icon={<SaveTwoTone />}
+            />
+            <Divider type="vertical" />
+            <Button
+              type="text"
+              icon={<SafetyCertificateTwoTone />}
+            />
+            <Button
+              type="text"
+              icon={<FlagTwoTone />}
+            />
+            <Button
+              type="text"
+              icon={<PlayCircleTwoTone />}
+              //loading={loadings[2]}
+              //onClick={() => this.enterLoading(2)}
+            />
+            <Button
+              type="text"
+              icon={<PauseCircleTwoTone />}
+            />
+            <Divider type="vertical" />
+            <Button
+              type="text"
+              icon={<DiffTwoTone />}
+            />
+            <Button
+              type="text"
+              icon={<CopyTwoTone />}
+            />
+            <Button
+              type="text"
+              icon={<DeleteTwoTone />}
+            />
+
+          </Col>
+        </Row>
       </Col>
     </Row>
   );
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   sql: Studio.sql,
 }))(StudioMenu);

dlink-web/src/components/Studio/StudioTabs/index.tsx

@@ -7,7 +7,7 @@ import {StateType} from "@/pages/FlinkSqlStudio/model";
 const { TabPane } = Tabs;
 
 const initialPanes = [
-  { title: '未命名', key: '0' ,value:'select * from ',closable: false,},
+  { title: '草稿', key: '0' ,value:'select * from ',closable: false,},
 ];
 
 class EditorTabs extends React.Component {

dlink-web/src/components/Studio/StudioTree/index.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from "react";
 import {connect} from "umi";
 import {StateType} from "@/pages/Demo/FormStepForm/model";
 import  {DownOutlined, FrownFilled, FrownOutlined, MehOutlined, SmileOutlined} from "@ant-design/icons";
-import {Tree, Input, Menu} from 'antd';
+import {Tree, Input, Menu, Empty,Button} from 'antd';
 import {getCatalogueTreeData} from "@/pages/FlinkSqlStudio/service";
 import {convertToTreeData, DataType, TreeDataNode} from "@/components/Studio/StudioTree/Function";
 import style from "./index.less";
@@ -40,34 +40,6 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const [treeData, setTreeData] = useState<TreeDataNode[]>();
   const [dataList, setDataList] = useState<[]>();
   const [rightClickNodeTreeItem,setRightClickNodeTreeItem] = useState<RightClickMenu>();
-  // const [searchValue,setSearchValue] = useState<string>();
-  // const [expandedKeys,setExpandedKeys] = useState<any>();
-  // const [autoExpandParent,setAutoExpandParent] = useState<boolean>(true);
-
-  /*const loop = data =>
-    data.map(item => {
-      const index = item.title.indexOf(searchValue);
-      const beforeStr = item.title.substr(0, index);
-      const afterStr = item.title.substr(index + searchValue.length);
-      const title =
-        index > -1 ? (
-          <span>
-              {beforeStr}
-            <span className="site-tree-search-value">{searchValue}</span>
-            {afterStr}
-            </span>
-        ) : (
-          <span>{item.title}</span>
-        );
-      if (item.children) {
-        return { title, key: item.key, children: loop(item.children) };
-      }
-
-      return {
-        title,
-        key: item.key,
-      };
-    });*/
 
   const getTreeData = async () => {
     const result = await getCatalogueTreeData();
@@ -87,25 +59,8 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     getTreeData();
   }, []);
 
-  /*const onExpand = () => {
-    setExpandedKeys(expandedKeys);
-    console.log(autoExpandParent);
-    setAutoExpandParent(!autoExpandParent);
-  };*/
-
   const onChange = (e:any) => {
-    /*const { value } = e.target;
-    const expandedKeys = dataList
-      .map(item => {
-        if (item.title.indexOf(value) > -1) {
-          return getParentKey(item.key, treeData);
-        }
-        return null;
-      })
-      .filter((item, i, self) => item && self.indexOf(item) === i);
-    setSearchValue(value);
-    setExpandedKeys(expandedKeys);
-    setAutoExpandParent(true);*/
+
   };
 
   const handleMenuClick=()=>{
@@ -134,6 +89,10 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     return (rightClickNodeTreeItem == null) ? '' : menu;
   };
 
+  const getEmpty = () =>{
+    const empty = (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} ><Button type="primary">创建目录</Button></Empty>);
+    return (treeData&&treeData.length==0)?empty:'';
+  };
   const onRightClick = (e:any) => {
     setRightClickNodeTreeItem({
       pageX: e.event.pageX,
@@ -143,28 +102,22 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     });
   };
 
-  const onSelect = (e:any) => {
+  const onSelect = () => {
     setRightClickNodeTreeItem(null);
-    // setAutoExpandParent(!autoExpandParent);
   };
 
   return (
     <div className={style.tree_div}>
       <Search style={{marginBottom: 8}} placeholder="Search" onChange={onChange}/>
         <DirectoryTree
-          /*onExpand={onExpand}
-          expandedKeys={expandedKeys}
-          autoExpandParent={autoExpandParent}*/
-          // showIcon
-          // showLine
           multiple
           onRightClick={onRightClick}
           onSelect={onSelect}
-          // defaultExpandAll
           switcherIcon={<DownOutlined/>}
           treeData={treeData}
         />
       {getNodeTreeRightClickMenu()}
+      {getEmpty()}
     </div>
   );
 };

dlink-web/src/components/Studio/index.less

@@ -6,7 +6,6 @@
 }
 .card {
   margin-bottom: 24px;
-
   :global {
     .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {
       width: 100%;

dlink-web/src/components/Studio/index.tsx

 import React, {useEffect, useState} from "react";
 import {connect} from "umi";
-import PageContainer from "@ant-design/pro-layout/es/components/PageContainer";
 import styles from './index.less';
+import {BarsOutlined,SettingOutlined} from "@ant-design/icons";
+
 import StudioMenu from "./StudioMenu";
-import {Row,Col,Card} from "antd";
+import {Row, Col, Card, Empty, Tabs} from "antd";
 import StudioTree from "./StudioTree";
 import StudioTabs from "./StudioTabs";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
+import StudioConsole from "./StudioConsole";
+
+const {TabPane} = Tabs;
 
 type StudioProps = {
   sql: StateType['sql'];
 };
-const Studio: React.FC<StudioProps> = ({ sql }) => {
+const Studio: React.FC<StudioProps> = ({sql}) => {
 
   const [console, setConsole] = useState<boolean>(false);
   const [sqls, setSqls] = useState<String>();
@@ -22,22 +26,31 @@ const Studio: React.FC<StudioProps> = ({ sql }) => {
 
   return (
 
-    <PageContainer
-      title={false}
-      content={<StudioMenu />}
-      className={styles.main}
-    >
-      <Card bordered={false} className={styles.card}>
+    <div>
+      <StudioMenu/>
+      <Card bordered={false} className={styles.card} size="small">
         <Row>
           <Col span={4}>
-            <StudioTree />
+            <Tabs defaultActiveKey="1" size="small">
+              <TabPane tab={<span><BarsOutlined/>目录</span>} key="1" >
+                <StudioTree/>
+              </TabPane>
+            </Tabs>
           </Col>
-          <Col span={20}>
-            <StudioTabs />
+          <Col span={16}>
+            <StudioTabs/>
+            <StudioConsole/>
+          </Col>
+          <Col span={4}>
+            <Tabs defaultActiveKey="1" size="small">
+              <TabPane tab={<span><SettingOutlined />配置</span>} key="1" >
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+              </TabPane>
+            </Tabs>
           </Col>
         </Row>
       </Card>
-    </PageContainer>
+    </div>
   )
 };
 
@@ -55,7 +68,7 @@ const Studio: React.FC<StudioProps> = ({ sql }) => {
 
 // export default connect(mapStateToProps)(Studio);
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   current: Studio.current,
   catalogue: Studio.catalogue,
   sql: Studio.sql,