feat: call gateway api

app/containers/App/index.tsx

@@ -22,7 +22,7 @@ import React from 'react'
 import Helmet from 'react-helmet'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import { Route, HashRouter as Router, Switch, Redirect } from 'react-router-dom'
+import { Route, HashRouter as Router, Switch, Redirect, withRouter } from 'react-router-dom'
 import { RouteComponentWithParams } from 'utils/types'
 
 import { compose } from 'redux'
@@ -35,13 +35,14 @@ import saga from './sagas'
 import { makeSelectLogged } from './selectors'
 
 import checkLogin from 'utils/checkLogin'
-import { setToken } from 'utils/request'
+import request, { setToken } from 'utils/request'
 import { statistic } from 'utils/statistic/statistic.dv'
 import FindPassword from 'containers/FindPassword'
 
 import { Background } from 'containers/Background/Loadable'
 import { Main } from 'containers/Main/Loadable'
 import { Activate } from 'containers/Register/Loadable'
+import api from 'utils/api'
 
 type MappedStates = ReturnType<typeof mapStateToProps>
 type MappedDispatches = ReturnType<typeof mapDispatchToProps>
@@ -51,12 +52,12 @@ export class App extends React.PureComponent<AppProps> {
 
   constructor(props: AppProps) {
     super(props)
-    props.onGetServerConfigurations()
     this.checkTokenLink()
+    props.onGetServerConfigurations()
   }
 
   private getQs = () => {
-    const search = location.search
+    const search = this.props.history.location.search
     const qs = search ? search.substr(1) : ''
     if (qs) {
       return qs
@@ -106,7 +107,22 @@ export class App extends React.PureComponent<AppProps> {
       this.props.onLogged(JSON.parse(loginUser))
       statistic.sendPrevDurationRecord()
     } else {
-      this.props.onLogout()
+      const qs = this.getQs()
+      const ticket = qs['ticket']
+      if (ticket) {
+        request(api.getUserInfo + `?ticket=${ticket}`, { method: 'get' })
+          .then((data) => {
+            if (data?.code === 200 && data.data) {
+              setToken(data.data?.token)
+              const loginUser = data.data.userInfo
+              this.props.onLogged(JSON.parse(loginUser))
+              statistic.sendPrevDurationRecord()
+            }
+          })
+      } else {
+        console.log('onLogout')
+        this.props.onLogout()
+      }
     }
   }
 
@@ -114,11 +130,11 @@ export class App extends React.PureComponent<AppProps> {
     const { logged } = this.props
 
     return (
-      logged ? (
-        <Redirect to='/project/1/dataManager' />
-      ) : (
-        <Redirect to='/login' />
-      )
+      // logged ? (
+      <Redirect to='/project/1/dataManager' />
+      // ) : (
+      //   <Redirect to='/login' />
+      // )
     )
   }
 
@@ -176,5 +192,6 @@ const withConnect = connect(
 export default compose(
   withReducer,
   withSaga,
-  withConnect
+  withConnect,
+  withRouter
 )(App)

app/containers/Background/index.tsx

@@ -53,15 +53,15 @@ export const Background: FC = () => {
   return (
     <div className={styles.container}>
       <Canvas />
-      <img
-        className={styles.logo}
-        src={require('assets/images/logo_light.svg')}
-      />
+      {/*<img*/}
+      {/*  className={styles.logo}*/}
+      {/*  src={require('assets/images/logo_light.svg')}*/}
+      {/*/>*/}
       <Switch>
         <Route path="/login" component={Login} />
         <Route path="/register" component={Register} />
         <Route path="/joinOrganization" component={JoinOrganization} />
-        <Redirect to="/login" />
+        {/*<Redirect to="/login" />*/}
       </Switch>
       <div className={styles.version}>{davinciVersion}</div>
     </div>

app/containers/DataManager/Sidebar.tsx

@@ -66,7 +66,6 @@ const sidebarSource: Array<{
     routes: ['dataDictionarys'],
     permissionName: 'dataDictionaryPermission'
   }
-
 ]
 
 const MainSidebar: React.FC<PropsWithChildren<{}>> = (props) => {
@@ -83,7 +82,8 @@ const MainSidebar: React.FC<PropsWithChildren<{}>> = (props) => {
   const currentProject = useSelector(makeSelectCurrentProject())
 
   // @ts-ignore
-  const nextPermission = useMemo<IProjectPermission>(() => ({
+  const nextPermission = useMemo<IProjectPermission>(
+    () => ({
       ...(currentProject?.permission ?? {}),
       ...{
         dataOverviiewPermission: 3,
@@ -92,8 +92,9 @@ const MainSidebar: React.FC<PropsWithChildren<{}>> = (props) => {
         qualityAuditPermission: 3,
         auditAnalysisPermission: 3
       }
-    })
-    , [currentProject?.permission])
+    }),
+    [currentProject?.permission]
+  )
 
   useEffect(() => {
     if (!currentProject) {
@@ -107,9 +108,7 @@ const MainSidebar: React.FC<PropsWithChildren<{}>> = (props) => {
     })
 
     if (match) {
-
       const hasPermission = SidebarPermissions.some((sidebarPermission) => {
-
         if (nextPermission[sidebarPermission] > 0) {
           const path = sidebarPermission.slice(0, -10)
           history.replace(`/project/${projectId}/dataManager/${path}s`)
@@ -162,7 +161,6 @@ const MainSidebar: React.FC<PropsWithChildren<{}>> = (props) => {
         )
       }
     )
-    console.log(sidebarOptions)
     return <Sidebar>{sidebarOptions}</Sidebar>
   }, [currentProject?.id, nextPermission, pathname])
 

app/containers/DataManagerOverview/index.less

@@ -16,9 +16,14 @@
       background-color: #fff;
       margin-right: 20px;
       padding: 20px;
+      display: flex;
+      flex-direction: column;
       &:last-child {
         margin-right: 0;
       }
+      &>div:last-child {
+        flex: 1;
+      }
       .chart-title {
         font-size: 16px;
       }

app/containers/DataManagerOverview/index.tsx

@@ -1,32 +1,138 @@
-import React from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Helmet from 'react-helmet'
 import Container from 'components/Container'
+import { init, EChartOption, ECharts } from 'echarts'
 import styles from './index.less'
-// const styles = require('./index.less')
+import api from 'utils/api'
+import request from 'utils/request'
+
+const DEFAULT_COLORS = [
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#73c0de',
+  '#3ba272',
+  '#fc8452',
+  '#9a60b4',
+  '#ea7ccc'
+]
+
+// tslint:disable-next-line:interface-name
+interface DataOverviewState {
+  originDept: number, // 来源部门数量
+  countCatalogue: number, // 近一个月目录增长数量
+  originSystem: number, // 来源系统数量
+  dataSource: number, // 数据资源数量
+  industryData: Array<{ name: string, value: number }>, // 行业分类饼图
+  originDeptData: Array<{ name: string, value: number }>, // 来源部门柱状图
+}
 
 export default function DataOverview() {
+  const pieElementRef = useRef<HTMLDivElement>(null)
+  const barElementRef = useRef<HTMLDivElement>(null)
+  const pieRef = useRef<ECharts>(null)
+  const barRef = useRef<ECharts>(null)
+  const [overview, setOverview] = useState<DataOverviewState>(
+    {
+      originDept: 0,
+      countCatalogue: 0,
+      originSystem: 0,
+      dataSource: 0,
+      industryData: [],
+      originDeptData: []
+    })
+
+  const getDataScreening = async() => {
+    try {
+      const data = await request(api.dataScreening, { method: 'get' })
+      setOverview((data as unknown as DataOverviewState))
+    } catch (e) {
+      console.log(e)
+    }
+  }
+  const pieOption = useMemo<EChartOption>(() => ({
+    tooltip: {
+      trigger: 'item'
+    },
+    color: DEFAULT_COLORS,
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 'middle'
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: '50%',
+        data: overview.industryData,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }), [overview.industryData])
+  const barOption = useMemo<EChartOption>(() => ({
+    tooltip: {},
+    dataset: {
+      dimensions: ['name', 'value'],
+      source: overview.originDeptData
+    },
+    xAxis: {},
+    yAxis: {
+      type: 'category',
+      data: overview.originDeptData.map((o) => o.name)
+    },
+    series: [{
+      type: 'bar',
+      data: overview.originDeptData.map((o, idx) => ({
+        value: o.value, itemStyle: {
+          color: DEFAULT_COLORS[idx]
+        }
+      }))
+    }]
+  }), [overview.originDeptData])
+
+  useEffect(() => {
+    getDataScreening()
+  }, [])
+
+
+  useEffect(() => {
+    barRef.current = init(barElementRef.current)
+    barRef.current.setOption(barOption)
+  }, [barOption])
+
+  useEffect(() => {
+    pieRef.current = init(pieElementRef.current)
+    pieRef.current.setOption(pieOption)
+  }, [pieOption])
   return (
     <Container>
-      <Helmet title="数据总览" />
+      <Helmet title='数据总览' />
 
       <div className={styles['overview-container']}>
         <div className={styles['card-list']}>
           {[
             {
               title: '数据资源数量',
-              num: 131
+              num: overview.dataSource
             },
             {
               title: '来源部门数量',
-              num: 9
+              num: overview.originDept
             },
             {
               title: '来源系统数量',
-              num: 10
+              num: overview.originSystem
             },
             {
               title: '近一月目录新增数量',
-              num: 3
+              num: overview.countCatalogue
             }
           ].map((item) => (
             <div className={styles.item} key={item.title}>
@@ -41,10 +147,12 @@ export default function DataOverview() {
           <div>
             <div className={styles['chart-title']}>行业分类</div>
             <div className={styles['chart-desc']}>资源目录各行业资源数量</div>
+            <div ref={pieElementRef} />
           </div>
           <div>
             <div className={styles['chart-title']}>数据资源来源部门</div>
             <div className={styles['chart-desc']}>数据资源来源部门TOP10</div>
+            <div ref={barElementRef} />
           </div>
         </div>
       </div>

app/containers/Main/index.tsx

@@ -94,7 +94,7 @@ export class Main extends React.Component<IMainProps, {}> {
     if (oauth2Enabled) {
       history.replace(EXTERNAL_LOG_OUT_URL)
     } else {
-      history.replace('/login')
+      // history.replace('/login')
     }
   }
 

app/utils/api.ts

@@ -46,5 +46,9 @@ export default {
   star: `${API_HOST}/star`,
   download: `${API_HOST}/download`,
   buriedPoints: `${API_HOST}/statistic`,
-  configurations: `${API_HOST}/configurations`
+  configurations: `${API_HOST}/configurations`,
+
+  // 根据ticket获取用户信息
+  getUserInfo: `/taihu-auth/thirdLogin/getUserInfo`,
+  dataScreening: `/api/v3/dataScreening`
 }

app/utils/request.ts

@@ -52,7 +52,7 @@ export default function request (url: string | AxiosRequestConfig, options?: Axi
 export function setToken (token: string) {
   localStorage.setItem('TOKEN', token)
   localStorage.setItem('TOKEN_EXPIRE', `${new Date().getTime() + tokenExpired}`)
-  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
+  axios.defaults.headers.common['Authorization'] = `${token}`
 }
 
 function syncToken (e: StorageEvent) {
@@ -61,7 +61,7 @@ function syncToken (e: StorageEvent) {
   if (!newValue) {
     delete axios.defaults.headers.common['Authorization']
   } else {
-    axios.defaults.headers.common['Authorization'] = `Bearer ${newValue}`
+    axios.defaults.headers.common['Authorization'] = `${newValue}`
   }
 }
 

internals/webpack/webpack.base.babel.js

@@ -20,7 +20,9 @@ module.exports = (options) => ({
   entry: options.entry,
   devServer: {
     proxy: {
-      '/api': 'http://davinci.xt.wenhq.top:8083/'
+      // '/api': 'http://davinci.xt.wenhq.top:8083/'
+      '/api': 'http://thgateway.xt.wenhq.top:8083/taihu-analysis/',
+      '/taihu-auth': 'http://thgateway.xt.wenhq.top:8083/'
     }
   },
   output: Object.assign(

server/middlewares/addDevMiddlewares.js

@@ -22,7 +22,8 @@ module.exports = function addDevMiddlewares(app, webpackConfig) {
     webpackConfig.output.publicPath
   )
 
-  let proxyTarget = 'http://davinci.xt.wenhq.top:8083/'
+  // let proxyTarget = 'http://davinci.xt.wenhq.top:8083/'
+  let proxyTarget = 'http://thgateway.xt.wenhq.top:8083/taihu-analysis/'
   const configFilePath = path.resolve(__dirname, '../config.json')
 
   if (fs.existsSync(configFilePath)) {
@@ -35,6 +36,10 @@ module.exports = function addDevMiddlewares(app, webpackConfig) {
     ['/api/v3', '/image'],
     proxy({ target: proxyTarget, changeOrigin: true })
   )
+  app.use(
+    ['/taihu-auth'],
+    proxy({ target: 'http://thgateway.xt.wenhq.top:8083/', changeOrigin: true })
+  )
   app.use(middleware)
   app.use(webpackHotMiddleware(compiler))