欢迎页面样式初步提交

Procedure/frontend/projectb/src/pages/Welcome.tsx

@@ -4,6 +4,7 @@ import { useModel } from '@umijs/max';
 import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { ArrowDownOutlined, ArrowUpOutlined, MoreOutlined } from '@ant-design/icons';
 import * as echarts from 'echarts';
+import ECharts from '@/pages/example/components/ECharts';
 
 const Welcome: React.FC = () => {
   const { initialState } = useModel('@@initialState');
@@ -231,77 +232,388 @@ const Welcome: React.FC = () => {
     );
   };
 
+const chartOne = {
+  title: {
+    text: '表内业务风险暴露（一级）风险加权资产占比',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '90%',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+};
+
+
+
+const chartTwo = {
+  title: {
+    text: '表外业务风险暴露（一级）风险加权资产占比',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '90%',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+};
+
+
+const chartThree = {
+  title: {
+    text: '前十大机构信用风险加权资产合计',
+    left: 'center'
+  },
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [120, 200, 150, 80, 70, 110, 130],
+      type: 'bar'
+    }
+  ]
+};
+
+
+const chartFour =  {
+  title: {
+    text: '风险暴露（一级）风险加权资产占比',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '90%',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+};
+
+const chartFive =  {
+  title: {
+    text: '风险暴露（一级）缓释前风险暴露占比',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '90%',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+};
+
+
+const chartSix =  {
+  title: {
+    text: '信用风险缓释工具当期缓释覆盖金额占比',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '90%',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+};
+
+
+
+const chartSeven ={
+  title: {
+    text: '风险暴露分类（一级）当期缓释情况',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      crossStyle: {
+        color: '#999'
+      }
+    }
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: true },
+      magicType: { show: true, type: ['line', 'bar'] },
+      restore: { show: true },
+      saveAsImage: { show: true }
+    }
+  },
+  legend: {
+    top:'90%',
+    data: ['A', 'Precipitation', 'Temperature']
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisPointer: {
+        type: 'shadow'
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      name: 'Precipitation',
+      min: 0,
+      max: 250,
+      interval: 50,
+      axisLabel: {
+        formatter: '{value} ml'
+      }
+    },
+    {
+      type: 'value',
+      name: 'Temperature',
+      min: 0,
+      max: 25,
+      interval: 5,
+      axisLabel: {
+        formatter: '{value} °C'
+      }
+    }
+  ],
+  series: [
+    {
+      name: 'A',
+      type: 'bar',
+      tooltip: {
+        valueFormatter: function (value: number) {
+          return (value as number) + ' 万元';
+        }
+      },
+      stack: 'total',
+      data: [
+        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+      ]
+    },
+    {
+      name: 'Precipitation',
+      type: 'bar',
+      tooltip: {
+        valueFormatter: function (value: number) {
+          return (value as number) + ' 万元';
+        }
+      },
+      stack: 'total',
+      data: [
+        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+      ]
+    },
+    {
+      name: 'Temperature',
+      type: 'line',
+      yAxisIndex: 1,
+      tooltip: {
+        valueFormatter: function (value: number) {
+          return (value as number) + ' %';
+        }
+      },
+      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+    }
+  ]
+};
+
+
   return (
     <PageContainer>
-    <div className="site-card-wrapper">
-      {/* <Row gutter={[16, 8]} align='middle'>
-        {cols}
-      </Row> */}
-      <ProCard className="taskCard" gutter={15}>
-        <ProCard colSpan={{ xs: 6, sm: 6, md: 6, lg: 6, xl: 6 }}>
-          {drawTaskCard('今日任务', 0)}
-        </ProCard>
-        <ProCard colSpan={{ xs: 6, sm: 6, md: 6, lg: 6, xl: 6 }}>
-          {drawTaskCard('今日完成任务', 2)}
-        </ProCard>
-        <ProCard colSpan={{ xs: 6, sm: 6, md: 6, lg: 6, xl: 6 }}>
-          {drawTaskCard('今日未完成任务', 4)}
-        </ProCard>
-        <ProCard colSpan={{ xs: 6, sm: 6, md: 6, lg: 6, xl: 6 }}>
-          {drawTaskCard('今日废弃任务', 6)}
-        </ProCard>
-      </ProCard>
-      <ProCard className="contCard" gutter={15}>
-        <ProCard colSpan={{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }}>
-          <div style={{ width: '96%', height: '350px', float: 'left' }}>
-            <div id="contCard-prodUseCount" style={{ width: '85%', height: '100%' }} />
-          </div>
-        </ProCard>
-        <ProCard colSpan={{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }}>
-          <div style={{ width: '100%', height: '350px' }}>
-            <div style={{ marginBottom: '10px' }}>
-              <span style={{ fontSize: '20px', fontWeight: 'bold' }}>用户使用功能统计</span>
-            </div>
-            <List
-              itemLayout="horizontal"
-              dataSource={contUuCount}
-              pagination={{
-                pageSize: 3,
-              }}
-              renderItem={(item) => (
-                <List.Item>
-                  <List.Item.Meta
-                    avatar={<Avatar src={item.avatar ? item.avatar : '/avatar.png'} />}
-                    title={(() => {
-                      const tags: React.ReactNode[] = [];
-                      if (item.tags) {
-                        let tagIndex = 0;
-                        item.tags.forEach((tagItem: { color: string; title: string }) => {
-                          tags.push(
-                            <Tag key={'tag_' + tagIndex++} color={tagItem.color}>
-                              {tagItem.title}
-                            </Tag>,
-                          );
-                        });
-                      }
-                      return (
-                        <>
-                          <a onClick={() => {}} style={{ marginRight: '10px' }}>
-                            {item.title}
-                          </a>
-                          {tags.length > 0 && <Space size={0}>{tags}</Space>}
-                        </>
-                      );
-                    })()}
-                    description={item.description ? item.description : '此处无内容...'}
-                  />
-                </List.Item>
-              )}
-            />
-          </div>
-        </ProCard>
-      </ProCard>
-    </div>
+    <ECharts
+      elementId={"chartOne"} height={'400px'} option={chartOne} width={'100%'}></ECharts>
+    <ECharts
+      elementId={"chartTwo"} height={'400px'} option={chartTwo} width={'100%'}></ECharts>
+    <ECharts
+      elementId={"chartThree"} height={'400px'} option={chartThree} width={'100%'}></ECharts>
+    <ECharts
+      elementId={"chartFour"} height={'400px'} option={chartFour} width={'100%'}></ECharts>
+      <ECharts
+      elementId={"chartFive"} height={'400px'} option={chartFive} width={'100%'}></ECharts>
+      <ECharts
+      elementId={"chartSix"} height={'400px'} option={chartSix} width={'100%'}></ECharts>
+    <ECharts
+      elementId={"chartSeven"} height={'400px'} option={chartSeven} width={'100%'}></ECharts>
     </PageContainer>
   );
 };

Procedure/frontend/projectb/src/pages/product/rwa/rwa_welcome.tsx

@@ -1,21 +1,19 @@
 import React from 'react';
 
 import { SDPage } from '@sundata/ui-frame';
-// import ECharts from '@/pages/example/components/ECharts';
+import ECharts from '@/pages/example/components/ECharts';
 // import echarts from 'echarts/types/dist/echarts';
 
-type welcomeProps = {};
 
 
+const rwa_welcome: React.FC = () => {
 
-const rwa_welcome: React.FC<welcomeProps> = (prop: welcomeProps) => {
+type EChartsOption = echarts.EChartsOption;
 
-// type EChartsOption = echarts.EChartsOption;
-//
 // var chartDom = document.getElementById('main')!;
 // var myChart = echarts.init(chartDom);
 // var option: EChartsOption;
-//
+
 // option = {
 //   tooltip: {
 //     trigger: 'axis',
@@ -73,7 +71,7 @@ const rwa_welcome: React.FC<welcomeProps> = (prop: welcomeProps) => {
 //       name: 'A',
 //       type: 'bar',
 //       tooltip: {
-//         valueFormatter: function (value) {
+//         valueFormatter: function (value: number) {
 //           return (value as number) + ' 万元';
 //         }
 //       },
@@ -86,7 +84,7 @@ const rwa_welcome: React.FC<welcomeProps> = (prop: welcomeProps) => {
 //       name: 'Precipitation',
 //       type: 'bar',
 //       tooltip: {
-//         valueFormatter: function (value) {
+//         valueFormatter: function (value: number) {
 //           return (value as number) + ' 万元';
 //         }
 //       },
@@ -108,12 +106,18 @@ const rwa_welcome: React.FC<welcomeProps> = (prop: welcomeProps) => {
 //     }
 //   ]
 // };
-//
+const option = {
+  title: { text: '快速示例' },
+    series: [{ type: 'pie', data: [{ value: 335, name: 'A' }, { value: 310, name: 'B' }] }]
+  };
+
+
+
 // option && myChart.setOption(option);
 
   return <SDPage>
-    {/*<ECharts*/}
-    {/* elementId={"id1"} height={'100px'} option={} width={'100px'}></ECharts>*/}
+   <ECharts
+    elementId={"id1"} height={'100px'} option={option} width={'100px'}></ECharts>
   </SDPage>
 }