Merge branch 'dev' of ssh://10.10.100.21/source/uas-office-integration into dev

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

@@ -23,29 +23,55 @@ export default class BarGraph extends Component {
   }
 
   render () {
-    let { data, title } = this.props
-    var keyArr = []
-    data = data.data
-    for (let i in data[0]) {
-      keyArr.push(i)
-    }
+    let { chartData } = this.props
+    let { data, title, valueDisp, keyDisp, unit } = chartData
+    data = this.formatData(JSON.parse(data))
     const defs = [{
-      dataKey: keyArr[0],
+      dataKey: 'xField',
     }, {
-      dataKey: keyArr[1],
+      dataKey: 'yField',
       tickCount: 4,   //多少个刻点数
     }]
-    const pixelRatio = window.devicePixelRatio * 2  //像素清晰度
 
+    const xLabel =
+      (text, item, index) => {
+        // text: 坐标轴对应字段的数值
+        return {
+          textAlign: 'center', // 文本对齐方向，可取值为： start center end
+          fill: '#333333', // 文本的颜色
+          fontSize: '12', // 文本大小
+          textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
+          rotate: -126,
+        }
+      }
+    const yLabel =
+      (text, item, index) => {
+        // text: 坐标轴对应字段的数值
+        return {
+          textAlign: 'center', // 文本对齐方向，可取值为： start center end
+          fill: '#333333', // 文本的颜色
+          fontSize: '12', // 文本大小
+          textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
+        }
+      }
     return (
       <div className='bar-graph' style={{ width: '100%', backgroundColor: '#fff' }}>
         <div className="ant-table-title">{title}</div>
-        <Chart padding={['6%', '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/>
+        <div className="ant-table-title-second">{keyDisp ? keyDisp : ''}{valueDisp} {'单位(' + unit + ')'}</div>
+        <Chart padding={['6%', '6%', 'auto', '10%']} data={data} defs={defs} pixelRatio={window.devicePixelRatio * 2}>
+          <Axis
+            labelOffset={10}
+            dataKey='xField'
+            grid={null}
+            label={xLabel}/>
+          <Axis
+            dataKey='yField'
+            grid={Global._defaultAxis.grid}
+            label={yLabel}
+          />
+          <Coord/>
           <Tooltip onShow={this.onShowTooltip}/>
-          <Geom geom="interval" position={keyArr[0] + '*' + keyArr[1]}/>
+          <Geom geom="interval" position='xField*yField'/>
         </Chart>
       </div>
     )
@@ -55,7 +81,16 @@ 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 + this.props.chartData.unit}`
+  }
+
+  formatData = (data) => {
+    data = data.map(function (item, index, arr) {
+      item.yField = Number(item.yField)
+      return item
+    })
+    data.reverse()
+    return data
   }
 
 }

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

@@ -31,20 +31,20 @@ export default class CommonCharts extends Component {
 
   render () {
     //BarGraph柱状 LineChart折线 PieChart圆饼 TableChart表格
-    let { type, list, title } = this.props.chartData
+    let { type } = 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}/>
+            case 'column':
+              return <BarGraph chartData={this.props.chartData}/>
+            case 'line':
+              return <LineChart chartData={this.props.chartData}/>
+            case 'pie':
+              return <PieChart chartData={this.props.chartData}/>
+            case 'list':
+              return <TableChart chartData={this.props.chartData}/>
             default:
               return null
           }

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

@@ -23,28 +23,53 @@ export default class LineChart extends Component {
   }
 
   render () {
-    let { data, title } = this.props
-    var keyArr = []
-    data = data.data
-    for (let i in data[0]) {
-      keyArr.push(i)
-    }
+    let { chartData } = this.props
+    let { data, title, valueDisp, keyDisp, unit } = chartData
+    data = this.formatData(JSON.parse(data))
+    const label =
+      (text, item, index) => {
+        // text: 坐标轴对应字段的数值
+        return {
+          textAlign: 'center', // 文本对齐方向，可取值为： start center end
+          fill: '#333333', // 文本的颜色
+          fontSize: '12', // 文本大小
+          textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
+        }
+      }
     return (
       <div className='charts-line' style={{ width: '100%', backgroundColor: '#fff' }}>
         <div className="ant-table-title">{title}</div>
+        <div className="ant-table-title-second">{keyDisp ? keyDisp : ''}{valueDisp} {'单位(' + unit + ')'}</div>
         <Chart height={240} data={data} pixelRatio={window.devicePixelRatio * 2}>
-          <Axis dataKey={keyArr[0]} label={{ fontSize: 12 }}/>
-          <Axis dataKey={keyArr[1]} label={{ fontSize: 12 }}/>
+          <Axis dataKey='xField' label={label}/>
+          <Axis
+            dataKey='yField'
+            label={label}/>
           {/* 点击悬浮信息 */}
-          <Tooltip showCrosshairs/>
+          <Tooltip showCrosshairs onShow={this.onShowTooltip}/>
           {/* 顶部标题 */}
           <Legend align="center"/>
-          <Geom geom="line" position={keyArr[0] + '*' + keyArr[1]} color={keyArr[2]}/>
-          <Geom geom="point" position={keyArr[0] + '*' + keyArr[1]} color={keyArr[2]}
+          <Geom geom="line" position='xField*yField'/>
+          <Geom geom="point" position='xField*yField'
                 style={{ lineWidth: 1, stroke: '#FFF' }}/>
         </Chart>
       </div>
     )
   }
 
+  onShowTooltip = (ev) => {
+    const items = ev.items
+    items[0].name = null
+    items[0].name = items[0].title
+    items[0].value = `${items[0].value + this.props.chartData.unit}`
+  }
+
+  formatData = (data) => {
+    data = data.map(function (item, index, arr) {
+      item.yField = Number(item.yField)
+      return item
+    })
+    return data
+  }
+
 }

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

@@ -4,7 +4,8 @@
  */
 
 import React, { Component } from 'react'
-import { Chart, Geom, Coord, Legend } from 'bizgoblin'
+import { Chart, Geom, Coord, Legend, Tooltip } from 'bizgoblin'
+import { getFloat } from '../../../utils/common/common.util'
 
 export default class PieChart extends Component {
 
@@ -23,26 +24,28 @@ export default class PieChart extends Component {
   }
 
   render () {
-    const pixelRatio = window.devicePixelRatio * 2 //像素清晰度
-    let { data, map } = this.props.data
-    let { title } = this.props
-    var keyArr = []
-    for (let i in data[0]) {
-      keyArr.push(i)
-    }
+    let { chartData } = this.props
+    let { data, title, valueDisp, keyDisp, unit } = chartData
+    let obj = this.formatData(JSON.parse(data))
+    let map
     const defs = [{
-      dataKey: 'percent',
+      dataKey: 'yField',
       formatter: val => `${val * 100}%`,
     }]
+    data = obj.data
+    map = obj.map
+
     return (
       <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}>
+        <div className="ant-table-title-second">{keyDisp ? keyDisp : ''}{valueDisp} {'单位(' + unit + ')'}</div>
+        <Chart padding={['0', 'auto', 'auto', '1%']} height={240} data={data} defs={defs}
+               pixelRatio={window.devicePixelRatio * 2}>
           <Coord type="polar" transposed radius={0.8}/>
           <Geom
             geom="interval"
-            position="a*percent"
-            color={[keyArr[0]]}
+            position="a*yField"
+            color='xField'
             adjust="stack"
             style={{
               lineWidth: 1,
@@ -57,4 +60,30 @@ export default class PieChart extends Component {
     )
   }
 
+  formatData = (data) => {
+    //取得总数
+    let ageSum = data.reduce((ageSum, item) => {
+      return ageSum + Number(item.yField)
+    }, 0)
+    ageSum = Math.round(ageSum * 100) / 100
+
+    //取得百分比数
+    data = data.map(function (item, index, arr) {
+      item.yField = Number(item.yField) / ageSum
+      return item
+    })
+
+    let map = {}
+    for (var i = 0; i < data.length; i++) {
+      // let displayValue = data[i].yField * ageSum + '(' + this.props.chartData.unit + ')';
+      let displayValue = data[i].yField * ageSum
+      map[data[i].xField] = displayValue + '   ' + getFloat((data[i].yField * 100), 3) + '%'
+    }
+    let obj = {
+      data: data,
+      map: map,
+    }
+    return obj
+  }
+
 }

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

@@ -23,22 +23,45 @@ export default class TableChart extends Component {
   }
 
   render () {
-    let { data, columns } = this.props.data
-    let { title } = this.props
+    let { chartData } = this.props
+    let { data, formulaDets, title, valueDisp, keyDisp } = chartData
+    let obj = this.formatData(data, formulaDets)
+    let columns = obj.columns
+    data = obj.data
 
     return (
-      <div className='table-charts' style={{ width: '100%' }}>
+      <div className='table-charts' style={{ width: '100%', overflowY: 'auto' }}>
         <Table
+          scroll={{ x: '100%' }}
+          style={{ height: '320px' }}
           title={() => title}
           pagination={false}
           bordered={true}
           columns={columns}
           dataSource={data}
           size="small"
-          scroll={{ x: true }}
+          tableLayout='fixed'
         />
       </div>
     )
   }
 
+  formatData = (data, formulaDets) => {
+    let columns = formulaDets.map(item => ({
+      title: item.description_,
+      dataIndex: item.field_,
+      key: item.field_,
+      width: item.width_,
+    }))
+    data = data.map(function (item, index, arr) {
+      item.key = index
+      return item
+    })
+    let obj = {
+      data: data,
+      columns: columns,
+    }
+    return obj
+  }
+
 }

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

@@ -7,6 +7,11 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import CommonCharts from '../../../components/common/bizgoblin/CommonCharts'
 import { isObjEmpty } from '../../../utils/common/common.util'
+import { fetchPostForm } from '../../../utils/common/fetchRequest'
+import { fetchGet } from '../../../utils/common/fetchRequest'
+import { API } from '../../../configs/api.config'
+import { Toast } from 'antd-mobile'
+import { message } from 'antd'
 
 class KanBan extends Component {
 
@@ -14,160 +19,27 @@ class KanBan extends Component {
     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',
-            }],
-        },
-      }],
+      subsData: [],
     }
   }
 
   componentDidMount () {
+    Toast.loading('正在获取数据', 0)
+    fetchGet(API.COMMON_GETSUBSDATA)
+      .then(response => {
+        Toast.hide()
+        this.setState({
+          subsData: response.data.list,
+        })
+        message.success('请求成功')
+      }).catch(error => {
+      Toast.hide()
+      if (typeof error === 'string') {
+        message.error(error)
+      } else {
+        message.error('图表数据获取失败')
+      }
+    })
 
   }
 
@@ -176,9 +48,10 @@ class KanBan extends Component {
   }
 
   render () {
-    let sourceData = this.state.list
     const chartItem = []
-    sourceData.forEach((item, index) => {
+    let { subsData } = this.state
+
+    subsData.forEach((item, index) => {
       if (!isObjEmpty(item)) {
         chartItem.push(
           <CommonCharts chartData={item} key={index}/>,

uas-office-web/uas-mobile/src/configs/antd.config.less

@@ -55,9 +55,15 @@
 
 /********************图表的title***********************/
 .ant-table-title {
+  font-size: 14px !important;
   padding: 8px 8px !important;
 }
 
+.ant-table-title-second {
+  font-size: 12px !important;
+  padding: 0px 8px !important;
+}
+
 /********************日历***********************/
 .calendar-box {
   .ant-picker-calendar-header {
@@ -88,3 +94,8 @@
 .am-textarea-control textarea {
   font-size: 14px !important;
 }
+
+/********************Table表格***********************/
+.ant-empty-normal {
+  margin: 65px 0 !important;
+}

uas-office-web/uas-mobile/src/configs/api.config.js

@@ -22,6 +22,8 @@ export const API = {
   COMMON_GETACCOUNTLIST: _baseURL + '/common/getAbleMasters.action',
   //切换账套
   COMMON_CHANGEACCOUNT: _baseURL + '/common/changeMaster.action',
+  //获取图表
+  COMMON_GETSUBSDATA: _baseURL + '/mobile/appcommon/showChartOnHome.action',
 
   /*******************************应用*************************************/
   //应用菜单列表

uas-office-web/uas-mobile/src/pages/private/taskTodo/TaskTodo.jsx

@@ -61,7 +61,6 @@ class TaskTodo extends Component {
           data: response.data.list,
           refreshing: false,
         })
-        message.success('请求成功')
       }).catch(error => {
       Toast.hide()
       this.setState({

uas-office-web/uas-mobile/src/utils/common/common.util.js

@@ -516,4 +516,11 @@ export function getOS () {
   return os
 }
 
+/**
+ * 保留小数（四舍五入）
+ *
+ */
+export function getFloat (number, precision) {
+  return Math.round(+number + 'e' + precision) / Math.pow(10, precision)
+}