uas手机版

首页 看板图表

uas-office-web/uas-mobile/src/components/common/bizgoblin/BarGraph.jsx

@@ -1,10 +1,10 @@
 /**
  * Created by hujs on 2020/11/12
- * Desc: 柱状图Demo
+ * Desc: 柱状图
  */
 
 import React, { Component } from 'react'
-import { Chart, Axis, Geom, Tooltip, Legend } from 'bizgoblin'
+import { Chart, Axis, Geom, Tooltip, Legend, Coord, Global } from 'bizgoblin'
 
 export default class BarGraph extends Component {
 
@@ -23,48 +23,29 @@ export default class BarGraph extends Component {
   }
 
   render () {
-    const data = [
-      {
-        year: '1951 年',
-        sales: 38,
-      }, {
-        year: '1952 年',
-        sales: 52,
-      }, {
-        year: '1956 年',
-        sales: 61,
-      }, {
-        year: '1957 年',
-        sales: 145,
-      }, {
-        year: '1958 年',
-        sales: 48,
-      }, {
-        year: '1959 年',
-        sales: 38,
-      }, {
-        year: '1960 年',
-        sales: 38,
-      }, {
-        year: '1962 年',
-        sales: 38,
-      },
-    ]
+    let { data, title } = this.props
+    var keyArr = []
+    data = data.data
+    for (let i in data[0]) {
+      keyArr.push(i)
+    }
     const defs = [{
-      dataKey: 'year',
+      dataKey: keyArr[0],
     }, {
-      dataKey: 'sales',
-      tickCount: 5,   //多少个刻点数
+      dataKey: keyArr[1],
+      tickCount: 3,   //多少个刻点数
     }]
     const pixelRatio = window.devicePixelRatio * 2  //像素清晰度
 
     return (
-      <div className='bar-graph'>
-        <Chart width="100%" data={data} defs={defs} animate={{ type: 'scaley' }} pixelRatio={pixelRatio}>
-          <Axis dataKey="year" label={{ fontSize: 8 }}/>
-          <Axis dataKey="sales"/>
-          <Tooltip showItemMarker={false} onShow={this.onShowTooltip}/>
-          <Geom geom="interval" position="year*sales"/>
+      <div className='bar-graph' style={{ width: '100%', backgroundColor: '#fff' }}>
+        <div className="ant-table-title">{title}</div>
+        <Chart padding={['0', '6%', 'auto', 'auto']} data={data} defs={defs} pixelRatio={pixelRatio}>
+          <Axis dataKey={keyArr[0]} grid={null} label={{ fontSize: 12 }}/>
+          <Axis dataKey={keyArr[1]} grid={Global._defaultAxis.grid} label={{ fontSize: 12 }}/>
+          <Coord transposed/>
+          <Tooltip onShow={this.onShowTooltip}/>
+          <Geom geom="interval" position={keyArr[0] + '*' + keyArr[1]}/>
         </Chart>
       </div>
     )
@@ -74,7 +55,7 @@ export default class BarGraph extends Component {
     const items = ev.items
     items[0].name = null
     items[0].name = items[0].title
-    items[0].value = `¥ ${items[0].value}`
+    // items[0].value = `${items[0].value}`
   }
 
 }

uas-office-web/uas-mobile/src/components/common/bizgoblin/CommonCharts.jsx

@@ -0,0 +1,56 @@
+/**
+ * Created by hujs on 2020/11/24
+ * Desc: 图表集合
+ */
+
+import React, { Component } from 'react'
+import BarGraph from './BarGraph'
+import LineChart from './LineChart'
+import PieChart from './PieChart'
+import TableChart from './TableChart'
+
+export default class CommonCharts extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {}
+  }
+
+  componentWillMount () {
+
+  }
+
+  componentDidMount () {
+
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    //BarGraph柱状 LineChart折线 PieChart圆饼 TableChart表格
+    let { type, list, title } = this.props.chartData
+
+    return (
+      <div className='common-charts' style={{ marginBottom: '8px' }}>
+        {(() => {
+          switch (type) {
+            case 'BarGraph':
+              return <BarGraph data={list} title={title}/>
+            case 'LineChart':
+              return <LineChart data={list} title={title}/>
+            case 'PieChart':
+              return <PieChart data={list} title={title}/>
+            case 'TableChart':
+              return <TableChart data={list} title={title}/>
+            default:
+              return null
+          }
+        })()}
+      </div>
+    )
+  }
+
+}

uas-office-web/uas-mobile/src/components/common/bizgoblin/LineChart.jsx

@@ -1,6 +1,6 @@
 /**
  * Created by hujs on 2020/11/12
- * Desc: 折线图Demo
+ * Desc: 折线图
  */
 
 import React, { Component } from 'react'
@@ -23,44 +23,25 @@ export default class LineChart extends Component {
   }
 
   render () {
-
-    const data = [
-      { month: 'Jan', city: 'Tokyo', temperature: 7 },
-      { month: 'Jan', city: 'London', temperature: 3.9 },
-      { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
-      { month: 'Feb', city: 'London', temperature: 4.2 },
-      { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
-      { month: 'Mar', city: 'London', temperature: 5.7 },
-      { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
-      { month: 'Apr', city: 'London', temperature: 8.5 },
-      { month: 'May', city: 'Tokyo', temperature: 18.4 },
-      { month: 'May', city: 'London', temperature: 11.9 },
-      { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
-      { month: 'Jun', city: 'London', temperature: 15.2 },
-      { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
-      { month: 'Jul', city: 'London', temperature: 17 },
-      { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
-      { month: 'Aug', city: 'London', temperature: 16.6 },
-      { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
-      { month: 'Sep', city: 'London', temperature: 14.2 },
-      { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
-      { month: 'Oct', city: 'London', temperature: 10.3 },
-      { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
-      { month: 'Nov', city: 'London', temperature: 6.6 },
-      { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
-      { month: 'Dec', city: 'London', temperature: 4.8 },
-    ]
+    let { data, title } = this.props
+    var keyArr = []
+    data = data.data
+    for (let i in data[0]) {
+      keyArr.push(i)
+    }
     return (
-      <div className='charts-line'>
-        <Chart width="100%" data={data} pixelRatio={window.devicePixelRatio * 2}>
-          <Axis dataKey="month"/>
-          <Axis dataKey="temperature"/>
+      <div className='charts-line' style={{ width: '100%', backgroundColor: '#fff' }}>
+        <div className="ant-table-title">{title}</div>
+        <Chart height={240} data={data} pixelRatio={window.devicePixelRatio * 2}>
+          <Axis dataKey={keyArr[0]} label={{ fontSize: 12 }}/>
+          <Axis dataKey={keyArr[1]} label={{ fontSize: 12 }}/>
           {/* 点击悬浮信息 */}
           <Tooltip showCrosshairs/>
           {/* 顶部标题 */}
           <Legend align="center"/>
-          <Geom geom="line" position="month*temperature" color="city"/>
-          <Geom geom="point" position="month*temperature" color="city" style={{ lineWidth: 1, stroke: '#FFF' }}/>
+          <Geom geom="line" position={keyArr[0] + '*' + keyArr[1]} color={keyArr[2]}/>
+          <Geom geom="point" position={keyArr[0] + '*' + keyArr[1]} color={keyArr[2]}
+                style={{ lineWidth: 1, stroke: '#FFF' }}/>
         </Chart>
       </div>
     )

uas-office-web/uas-mobile/src/components/common/bizgoblin/PieChart.jsx

@@ -1,6 +1,6 @@
 /**
  * Created by hujs on 2020/11/12
- * Desc: 圆饼图Demo
+ * Desc: 圆饼图
  */
 
 import React, { Component } from 'react'
@@ -24,48 +24,16 @@ export default class PieChart extends Component {
 
   render () {
     const pixelRatio = window.devicePixelRatio * 2 //像素清晰度
-    const map = {
-      芳华: '40%',
-      妖猫传: '20%',
-      机器之血: '18%',
-      心理罪: '15%',
-      寻梦环游记: '5%',
-      其他: '2%',
-    }
-    const data = [
-      {
-        name: '芳华',
-        percent: 0.4,
-        a: '1',
-      }, {
-        name: '妖猫传',
-        percent: 0.2,
-        a: '1',
-      }, {
-        name: '机器之血',
-        percent: 0.18,
-        a: '1',
-      }, {
-        name: '心理罪',
-        percent: 0.15,
-        a: '1',
-      }, {
-        name: '寻梦环游记',
-        percent: 0.05,
-        a: '1',
-      }, {
-        name: '其他',
-        percent: 0.02,
-        a: '1',
-      },
-    ]
+    let { data, map } = this.props.data
+    let { title } = this.props
     const defs = [{
       dataKey: 'percent',
       formatter: val => `${val * 100}%`,
     }]
     return (
-      <div className='charts-line'>
-        <Chart width="100%" data={data} defs={defs} pixelRatio={pixelRatio}>
+      <div className='charts-line' style={{ width: '100%', backgroundColor: '#fff' }}>
+        <div className="ant-table-title">{title}</div>
+        <Chart padding={['0', 'auto', 'auto', 'auto']} height={240} data={data} defs={defs} pixelRatio={pixelRatio}>
           <Coord type="polar" transposed radius={0.8}/>
           <Geom
             geom="interval"

uas-office-web/uas-mobile/src/components/common/bizgoblin/TableChart.jsx

@@ -1,6 +1,6 @@
 /**
  * Created by hujs on 2020/11/11
- * Desc: GridTableDemo
+ * Desc: GridTable
  */
 
 import React, { Component } from 'react'
@@ -23,49 +23,8 @@ export default class TableChart extends Component {
   }
 
   render () {
-    const data = [
-      {
-        key: '1',
-        name: '深爱半导体有限责任公司',
-        rank: 1,
-        money: '500',
-      },
-      {
-        key: '2',
-        name: '华商龙商务有限责任公司',
-        rank: 2,
-        money: '200',
-      },
-      {
-        key: '3',
-        name: '优软科技',
-        rank: 3,
-        money: '100',
-      },
-    ]
-    const columns = [
-      {
-        title: '排名',
-        dataIndex: 'rank',
-        key: 'rank',
-        align: 'center',
-        width: 80,
-        render: text => <a>{text}</a>,
-      },
-      {
-        title: '客户名称',
-        dataIndex: 'name',
-        ellipsis: true,
-        key: 'name',
-      },
-      {
-        title: '销售额（万元）',
-        dataIndex: 'money',
-        key: 'money',
-        align: 'center',
-      },
-    ]
-    const title = '客户销售金额排行榜'
+    let { data, columns } = this.props.data
+    let { title } = this.props
 
     return (
       <div className='table-charts' style={{ width: '100%' }}>

uas-office-web/uas-mobile/src/components/common/calendar/CommonCalendar.jsx

@@ -50,7 +50,7 @@ export default class CommonCalendar extends Component {
     for (let i = 0; i < calendarData.length; i++) {
       let date = calendarData[i].date
       if (clickDate === date) {
-        switch (calendarData[i].state) {
+        switch (calendarData[i].status) {
           case 0:
             listData = [
               { color: 'no' },

uas-office-web/uas-mobile/src/components/private/kanban/KanBan.jsx

@@ -0,0 +1,199 @@
+/**
+ * Created by Hujs on 2020/11/26
+ * Desc: 数据看板
+ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import CommonCharts from '../../../components/common/bizgoblin/CommonCharts'
+import { isObjEmpty } from '../../../utils/common.util'
+
+class KanBan extends Component {
+
+  constructor () {
+    super()
+
+    this.state = {
+      list: [{
+        type: 'BarGraph',
+        title: '销售趋势图',
+        list: {
+          data: [
+            {
+              year: '1951 年',
+              sales: 38,
+            }, {
+              year: '1952 年',
+              sales: 52,
+            }, {
+              year: '1956 年',
+              sales: 61,
+            }, {
+              year: '1957 年',
+              sales: 145,
+            }, {
+              year: '1958 年',
+              sales: 48,
+            }, {
+              year: '1959 年',
+              sales: 32,
+            }, {
+              year: '1960 年',
+              sales: 39,
+            }, {
+              year: '1962 年',
+              sales: 60,
+            }, {
+              year: '1951 年',
+              sales: 38,
+            },
+          ],
+        },
+      }, {
+        type: 'LineChart',
+        title: '销售趋势图',
+        list: {
+          data: [
+            { month: 'Jan', temperature: 7, city: 'Tokyo' },
+            { month: 'Jan', temperature: 3.9, city: 'London' },
+            { month: 'Feb', temperature: 6.9, city: 'Tokyo' },
+            { month: 'Feb', temperature: 4.2, city: 'London' },
+            { month: 'Mar', temperature: 9.5, city: 'Tokyo' },
+            { month: 'Mar', temperature: 5.7, city: 'London' },
+            { month: 'Apr', temperature: 14.5, city: 'Tokyo' },
+            { month: 'Apr', temperature: 8.5, city: 'London' },
+            { month: 'May', temperature: 18.4, city: 'Tokyo' },
+            { month: 'May', temperature: 11.9, city: 'London' },
+            { month: 'Jun', temperature: 21.5, city: 'Tokyo' },
+            { month: 'Jun', temperature: 15.2, city: 'London' },
+            { month: 'Jul', temperature: 25.2, city: 'Tokyo' },
+            { month: 'Jul', temperature: 17, city: 'London' },
+            { month: 'Aug', temperature: 26.5, city: 'Tokyo' },
+            { month: 'Aug', temperature: 16.6, city: 'London' },
+            { month: 'Sep', temperature: 23.3, city: 'Tokyo' },
+            { month: 'Sep', temperature: 14.2, city: 'London' },
+            { month: 'Oct', temperature: 18.3, city: 'Tokyo' },
+            { month: 'Oct', temperature: 10.3, city: 'London' },
+            { month: 'Nov', temperature: 13.9, city: 'Tokyo' },
+            { month: 'Nov', temperature: 6.6, city: 'London' },
+            { month: 'Dec', temperature: 9.6, city: 'Tokyo' },
+            { month: 'Dec', temperature: 4.8, city: 'London' },
+          ],
+        },
+      }, {
+        type: 'PieChart',
+        title: '销售分布图',
+        list: {
+          data: [
+            {
+              name: '芳华',
+              percent: 0.4,
+              a: '1',
+            }, {
+              name: '妖猫传',
+              percent: 0.2,
+              a: '1',
+            }, {
+              name: '机器之血',
+              percent: 0.18,
+              a: '1',
+            }, {
+              name: '心理罪',
+              percent: 0.15,
+              a: '1',
+            }, {
+              name: '寻梦环游记',
+              percent: 0.05,
+              a: '1',
+            }, {
+              name: '其他',
+              percent: 0.02,
+              a: '1',
+            },
+          ],
+          map: {
+            芳华: '40%',
+            妖猫传: '20%',
+            机器之血: '18%',
+            心理罪: '15%',
+            寻梦环游记: '5%',
+            其他: '2%',
+          },
+        },
+      }, {
+        type: 'TableChart',
+        title: '客户销售金额排行榜',
+        list: {
+          data: [{
+            key: '1',
+            name: '深爱半导体有限责任公司',
+            rank: 1,
+            money: '500',
+          },
+            {
+              key: '2',
+              name: '华商龙商务有限责任公司',
+              rank: 2,
+              money: '200',
+            },
+            {
+              key: '3',
+              name: '优软科技',
+              rank: 3,
+              money: '100',
+            }],
+          columns: [{
+            title: '排名',
+            dataIndex: 'rank',
+            key: 'rank',
+            align: 'center',
+            width: 80,
+            render: text => <a>{text}</a>,
+          },
+            {
+              title: '客户名称',
+              dataIndex: 'name',
+              ellipsis: true,
+              key: 'name',
+            },
+            {
+              title: '销售额（万元）',
+              dataIndex: 'money',
+              key: 'money',
+              align: 'center',
+            }],
+        },
+      }],
+    }
+  }
+
+  componentDidMount () {
+
+  }
+
+  componentWillUnmount () {
+
+  }
+
+  render () {
+    let sourceData = this.state.list
+    const chartItem = []
+    sourceData.forEach((item, index) => {
+      if (!isObjEmpty(item)) {
+        chartItem.push(
+          <CommonCharts chartData={item} key={index}/>,
+        )
+      }
+    })
+
+    return (
+      <>
+        {chartItem}
+      </>
+    )
+  }
+}
+
+let mapStateToProps = (state) => ({})
+
+export default connect(mapStateToProps)(KanBan)

uas-office-web/uas-mobile/src/pages/private/homePage/MainRoot.jsx

@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import FuncTitle from '../../../components/common/func/FuncTitle'
 import MainHeader from '../../../components/common/mainHeader/MainHeader'
+import KanBan from '../../../components/private/kanban/KanBan'
 import './main-root.less'
 import { withRouter } from 'react-router-dom'
 import FuncGroup from '../../../components/common/func/FuncGroup'
@@ -68,6 +69,7 @@ class MainRoot extends Component {
             }}
             rightIcon='uas-edit'
             onRightClick={this.onKanbanManage}/>
+          <KanBan/>
         </div>
       </div>
     )

uas-office-web/uas-mobile/src/pages/private/schedulePage/SchedulePage.jsx

@@ -48,15 +48,15 @@ class SchedulePage extends Component {
 
       calendarData: [{
         date: '2020-11-12',
-        state: 0,//正常 无
+        status: 0,//正常 无
       },
         {
           date: '2020-11-13',
-          state: 1,//迟到 red
+          status: 1,//迟到 red
         },
         {
           date: '2020-11-14',
-          state: 2,//有事项 gray
+          status: 2,//有事项 gray
         }],
     }
   }