import React from 'react'
import 'antd-mobile/dist/antd-mobile.css';
import { Card, WingBlank, WhiteSpace, Flex/* , DatePicker */, List } from 'antd-mobile';
import { Http } from '../../Utils/help';
import PropTypes from 'prop-types'
import { browserHistory } from 'react-router'; 

const Item = List.Item;
const F2 = require('@antv/f2');
const PieLabel = require('@antv/f2/lib/plugin/pie-label'); // 引入 PieLabel 模块
// require('@antv/f2/lib/component/guide');
// const Guide = require('@antv/f2/lib/plugin/guide');//加载插件 Guide

// const nowTimeStamp = Date.now();
// const now = new Date(nowTimeStamp);

export class Dashboard extends React.Component {
   constructor(props, context) {
      super(props, context);
      const { onClick } = this.props;
      this.onClick = onClick;
      //图表文本标注
      this.getHtmltitel = this.getHtmltitel.bind(this),

         //绘制图表
         this.TodayOpenTime = this.TodayOpenTime.bind(this),
         this.StockageData = this.StockageData.bind(this),
         this.StockageDataAlert = this.StockageDataAlert.bind(this),
         this.SevenData = this.SevenData.bind(this),
         this.SevenCostData = this.SevenCostData.bind(this),
         // this.SevenDataBytype = this.SevenDataBytype.bind(this),
         //数据处理
         this.getAlertNum = this.getAlertNum.bind(this),
         this.getSevenData = this.getSevenData.bind(this),
         this.getSevenAlert = this.getSevenAlert.bind(this),

         this.state = {
            repairsnum:'',//待接单数
            maintainingnum:'',//维修中数
            maintainfinishnum:'',//维修完成数
            func: 'dashboard',
            // date: now,
            openmac: [],
            opentrend: [],
            alertdata: [],
            alertnum: [],
            speeddata: [],
            speedtrend: [],
            timedata: [],
            timetrend: [],
            oeedata: [],
            oeetrend: [],
            costdata: [],
            costtrend: [],
            reachspeed: [],
            opentime: [],
            sevenalertbyday: [],
            sevenalertbytype: [],
            sevenoee: [],
            color: { "IMMEDIATELY": "red", "URGENCY": "#796161", "HIGH": "#d4c032", "NORMAL": "blue", "无警报": "white" },
         };
   }

   //取得json数据集
   componentWillMount() {
      // console.log("-----componentWillMount")
      // this.dataAjax = Http.getJSON2("ds/data/oeeinfo/oeeinfodetail", { "type": '0', "machine": '' });
     // this.dataAjax = Http.getJSON2("ds/data/kb_dashboard/dashboard", { "alerttype": 0 });
        this.dataAjax = Http.getJSON2("ds/data/kb_dashboard/dashboard");
            // 获取待接单数
            Http.getJSON2("repairs/getrepairs", {}, data=>{
               console.log(data.data.length)
               this.setState({repairsnum:data.data.length}) })
           //获取维修中数
          Http.getJSON2("maintain/gettodaying", {}, data=>{
               console.log(data.data.length)
               this.setState({maintainingnum:data.data.length}) })
          //获取今日维修完成数
          Http.getJSON2("maintain/Gettodayfinish", {}, data=>{
            console.log(data.data.length)
            this.setState({maintainfinishnum:data.data.length}) })
         
   }
      

   componentDidUpdate() {
   }


   componentDidMount() {
      // console.log("---componentDidMount")
      this.dataAjax.done((result) => {
         console.log(result);
         const { opennumber, thedatealert, speed_efficiency, oee_efficiency, reachspeed, timeefficiency, openminutes, sevendate, sevenalert } = result;
         try {
            this.setState(
               {
                  openmac: opennumber,//开机率
                  opentrend: this.getTrend(opennumber, 'open'),
                  speeddata: speed_efficiency,//速度效率(性能效率)
                  speedtrend: this.getTrend(speed_efficiency, 'speed'),
                  timedata: timeefficiency,//时间效率
                  timetrend: this.getTrend(timeefficiency, 'time'),
                  // oeedata: oee_efficiency,
                  // oeetrend: this.getTrend(oee_efficiency, 'oee'),
                  costdata: oee_efficiency,
                  // costtrend: this.getTrend(oee_efficiency, 'cost'),
                  reachspeed: reachspeed,

                  alertdata: this.getAlertNum(thedatealert, 'a'),//警报数据
                  alertnum: this.getAlertNum(thedatealert, 'b'),//警报数量

                  opentime: openminutes,//今日各时段开机时间

                  sevenalertbyday: this.getSevenData(sevendate, 'sevenbydaytotalalert'),//7天警报数
                  sevenoee: this.getSevenData(sevendate, 'OEE'),//7天OEE
                  sevenalertbytype: this.getSevenAlert(sevenalert),


               }, () => {
                  this.chartRender();
               }
            )
         } catch (error) {
            console.error(error.message);
            console.error(error.stack);
         }
      })
   }

   //取得与昨日同比差异
   getTrend = (senddata, sign) => {
      let trend = []
      if (senddata && senddata.length) {
         let now = sign === 'cost' ? senddata[0].cost : sign === 'open' ? senddata[0].ratio * 100 : senddata[0].rate
         let formerly
         if (senddata[1]) {
            formerly = sign === 'cost' ? senddata[1].cost : sign === 'open' ? senddata[1].ratio * 100 : senddata[1].rate
         }
         if (now >= formerly) {
            trend[0] = "+"
            trend[1] = (now - formerly).toFixed(0) + (sign === 'cost' ? '' : '%')
         } else if (now < formerly) {
            trend[0] = "-"
            trend[1] = (formerly - now).toFixed(0) + (sign === 'cost' ? '' : '%')
         } else {
            trend[0] = ''
            trend[1] = ''
         }
      }
      console.log(trend, sign)
      return trend;
   }

   getSevenData = (senddata, type) => {
      // console.log("***********getSevenData")
      let data = []
      if (senddata && JSON.stringify(senddata) !== '[]') {
         senddata.map(val => {
            if (val.type === type) {
               data.push(val)
            }
         })
      }
      // console.log(type, data)
      return data
   }

   getSevenAlert = (senddata) => {
      // console.log("*********getSevenAlert")
      let data = []
      let dataarray = {}
      if (senddata) {
         senddata.map(val => {
            if (val.num) {
               dataarray.vdate = val.vdate
               dataarray.name = val.name
               dataarray.num = val.num
            } else {
               dataarray.vdate = val.vdate
               dataarray.name = val.name
               dataarray.num = 0
            }
            data.push(dataarray)
            dataarray = {}
         })
      }
      return data
   }

   getAlertNum = (data, sign) => {
      let alerttotal = [];
      if (data) {
         data.map(val => {
            // console.log(val.a, sign)
            if (val.a === sign)
               alerttotal.push(val)
         })
      }
      // console.log(alerttotal)
      return alerttotal
   }

   chartRender = () => {
      try {
         console.log("chartrender...")
         if (this.state.openmac && JSON.stringify(this.state.openmac) !== "[]")
            this.StockageData(this.state.openmac, "open")//开关机比例图
         if (this.state.speeddata && JSON.stringify(this.state.speeddata) !== "[]")
            this.StockageData(this.state.speeddata, "speed")//性能效率图
         if (this.state.timedata && JSON.stringify(this.state.timedata) !== "[]")
            this.StockageData(this.state.timedata, "time")//时间效率图
         // if (this.state.oeedata && JSON.stringify(this.state.oeedata) !== "[]")
         //    this.StockageData(this.state.oeedata, "oee")//综合效率图
         if (this.state.costdata && JSON.stringify(this.state.costdata) !== "[]")
            this.SevenCostData(this.state.costdata, "cost")//有效成本
         if (this.state.alertdata && JSON.stringify(this.state.alertdata) !== '[]')
            this.StockageDataAlert(this.state.alertdata, "alert") //警告比例图
         if (this.state.opentime && JSON.stringify(this.state.opentime) !== '[]')
            this.TodayOpenTime(this.state.opentime) //今日开机时间    
         if (this.state.sevenalertbyday && JSON.stringify(this.state.sevenalertbyday) != '[]') //7天警报
            this.SevenData(this.state.sevenalertbyday, 'alertbyday')
         // if (this.state.sevenalertbytype && JSON.stringify(this.state.sevenalertbytype) !== '[]')//7天各机型警报
         //     this.SevenData(this.state.sevenalertbytype, 'alertbytype')
         if (this.state.sevenoee && JSON.stringify(this.state.sevenoee) !== '[]')//7天OEE
            this.SevenData(this.state.sevenoee, 'OEE')
         // if (JSON.stringify(this.state.reachspeed) !== "[]")
         //     this.StockageData(this.state.reachspeed, "reach")//速度达标图

      } catch (err) {
         console.error(err.message);
         console.error(err.stack);
      }
   }

   //绘制扇形图中间文字
   getHtmltitel = (ratio) => {
      var fontSize = 15 * (window.innerWidth / 375); // 字体适配不同屏幕
      var fontSize1 = 10 * (window.innerWidth / 375);
      let returndata = ""
      let diff = false
      var trend = false
      if (ratio.now > ratio.formerly) {
         ratio.formerly = "↑" + (ratio.now - ratio.formerly).toFixed(2)
         trend = true
      } else if (ratio.now < ratio.formerly) {
         ratio.formerly = "↓" + (ratio.formerly - ratio.now).toFixed(2)
         trend = false
      } else {
         ratio.formerly = (ratio.formerly - ratio.now).toFixed(2)
         diff = true
      }
      if (diff) {
         returndata = '<div style="width: 250px;height: 45px;text-align: center;position:initial;top:65px;left:-60px">' +
            // '<div style="font-size: ' + fontSize1 + 'px;color:#6cb9ff">' + ratio.formerly + '%</div>' +
            '<div style="font-size: ' + fontSize + 'px;color:#6cb9ff">' + ratio.now.toFixed(0) + '%</div>' +
            '</div>'
      } else {
         if (trend) {
            returndata = '<div style="width: 250px;height: 45px;text-align: center;position:initial;top:65px;left:-60px">' +
               // '<div style="font-size: ' + fontSize1 + 'px;color:#2fc25b">' + ratio.formerly + '%</div>' +
               '<div style="font-size: ' + fontSize + 'px;color:#6cb9ff">' + ratio.now.toFixed(0) + '%</div>' +
               '</div>'
         } else {
            returndata = '<div style="width: 250px;height: 45px;text-align: center;position:initial;top:65px;left:-60px">' +
               // '<div style="font-size: ' + fontSize1 + 'px;color:#FF0000">' + ratio.formerly + '%</div>' +
               '<div style="font-size: ' + fontSize + 'px;color:#6cb9ff">' + ratio.now.toFixed(0) + '%</div>' +
               '</div>'
         }
      }
      return returndata
   }

   StockageData = (senddata, sign) => {
      console.log(senddata, sign)
      //F2 绘制图表
      var fontSize = 15 * (window.innerWidth / 375); // 字体适配不同屏幕

      var data = [{
         x: '1',
         y: 0,
      }];
      let ratio = { formerly: "" }
      if (sign === 'open' && senddata.length > 1) {
         data[0].y = senddata[0].ratio * 100
         ratio.now = senddata[0].ratio * 100
         ratio.formerly = senddata[1].ratio * 100
      } else if ((sign === "speed" || sign === "time") && senddata[0]) {
         if (!senddata[0]) {
            data[0].y = 0
         } else if (senddata[0].rate > 100) {
            data[0].y = 100
         } else {
            data[0].y = senddata[0].rate
         }
         ratio.now = senddata[0].rate
         ratio.formerly = senddata[1] ? senddata[1].rate : ''
      } else if (sign === "reach") {
         data[0].y = (senddata[0].num / senddata[0].allnum * 100)
         ratio.now = (senddata[0].num / senddata[0].allnum * 100).toFixed(2)
      }

      var chart = new F2.Chart({
         id: 'chart' + sign,
         pixelRatio: window.devicePixelRatio
      });
      chart.source(data, {
         y: {
            max: 100,
            min: 0
         }
      });
      chart.axis(false);
      chart.tooltip(false);
      chart.coord('polar', {
         transposed: true,
         innerRadius: 0.95,
         radius: 0.95
      });
      chart.guide().arc({
         start: [0, 0],
         end: [1, 99.98],
         top: false,
         style: {
            lineWidth: 10,
            stroke: '#ccc'
         }
      });

      if (ratio.formerly === "") {
         chart.guide().text({
            position: ['50%', '50%'],
            content: ratio.now?ratio.now:0 + '%',
            style: {
               fontSize: 12 * (window.innerWidth / 375),
               fill: '#399df9',
               color: '#399df9'
            }
         });
      } else {
         chart.guide().html({
            position: ['52%', '64%'],
            html: '<div style="width: auto;height: 45px;text-align: center;">' +
               '<div style="font-size: ' + fontSize + 'px;color:#6cb9ff">' + ratio.now.toFixed(0) + '%</div>' +
               '</div>',//this.getHtmltitel(ratio),
         });
      }

      chart.interval().position('x*y').size(10).animate({
         appear: {
            duration: 1200,
            easing: 'cubicIn'
         }
      });
      chart.render();
   }
   StockageDataAlert = (data, sign) => {
      var chart = new F2.Chart({
         id: 'chart' + sign,
         pixelRatio: window.devicePixelRatio,
         plugins: PieLabel,
         padding: [20, 0, 15, 0]
      });

      chart.source(data);
      chart.coord('polar', {
         transposed: true,
         radius: 0.9
      });
      chart.legend(false);
      chart.axis(false);
      chart.tooltip(false);

      // 添加饼图文本
      chart.pieLabel({
         inflectionOffset: 5,
         sidePadding: 10,
         adjustOffset: 50,
         anchorOffset: 10,
         skipOverlapLabels: true,
         // label1: function label1(data, color) {
         //     return {
         //         text: data.name,
         //         fill: color
         //     };
         // },
         label1: function label1(data, color) {
            return {
               text: String((Math.floor(data.ratio * 10000) / 100).toFixed(0)).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '%',
               fill: color,
               // fontWeight: 'bold'
            };
         }
      });

      let mycolor = this.state.color;
      chart.interval().position('a*num').adjust('stack').color('name', function (name) {
         return mycolor[name];
      });
      chart.render();
   }
   //今日开机时间，实际开机时间对比
   TodayOpenTime = (senddata) => {
      let hourval = ''
      let hournum = ''
      senddata.map(val => {
         if (val.name === 'realityopentime' && val.tototime !== null) {
            hourval = val.hours
            hournum = val.tototime
         }
      })
      var chart = new F2.Chart({
         id: 'todayopentime',
         pixelRatio: window.devicePixelRatio,
         padding: [15, 0, 20, 50]
      });
      chart.source(senddata, {
         hours: {
            // type: 'cat',
            tickCount: 5,
            range: [0, 1]
         },
      });
      chart.axis('hours', {
         line: null,
         label: function label(text, index, total) {
            var textCfg = {};
            if (index === 0) {
               textCfg.textAlign = 'left';
            } else if (index === total - 1) {
               textCfg.textAlign = 'right';
            }
            return textCfg;
         }
      });
      chart.tooltip({
         custom: true,
         showXTip: true,
         showYTip: true,
         snap: true,
         crosshairsType: 'xy',
         crosshairsStyle: {
            lineDash: [2]
         }
      });

      chart.legend(false);
      chart.guide().tag({
         position: [hourval, hournum],
         content: hournum,
         direct: 'tr',
         background: {
            fill: '#2fc25b'
         },
         pointStyle: {
            fill: '#8659AF'
         }
      });
      chart.line({
         connectNulls: true // 配置，连接空值数据
      }).position('hours*tototime').color('name', ['#1890FF', '#2fc25b']).shape('name', function (name) {
         if (name === 'realityopentime') {
            return 'line';
         }
         if (name === 'opentime') {
            return 'dash';
         }
      });

      chart.render();
   }
   //7日数据折线图
   SevenData = (senddata, sign) => {
      // console.log("SevenData-------:" + sign)
      var chart = new F2.Chart({
         id: sign,
         pixelRatio: window.devicePixelRatio,
         animate: true,
         padding: sign === 'alertbytype' ? [55, 10, 20, 50] : [30, 10, 20, 50]
      });
      chart.source(senddata, {
         vdate: {
            type: 'timeCat',
            tickCount: 4,
            mask: 'MM-DD',
            range: [0, 1]
         },
         num: {
            tickCount: 5,
            range: [0, 1],
         },
      });

      if (sign === 'OEE') {
         chart.scale('num', {
            tickCount: 4,
            range: [0, 1],
            formatter: function formatter(ivalue) {
               return ivalue + '%';
            }
         });
      }
      //处理坐标轴缩进
      chart.axis('vdate', {
         label: function label(text, index, total) {
            var textCfg = {};
            if (index === 0) {
               textCfg.textAlign = 'left';
            } else if (index === total - 1) {
               textCfg.textAlign = 'right';
            }
            return textCfg;
         },
         grid: function label(text, index, total) {
            var textCfg = {};
            if (index === 0) {
               textCfg.textAlign = 'left';
            } else if (index === total - 1) {
               textCfg.textAlign = 'right';
            }
            return textCfg;
         }
      });


      chart.legend(false);
      if (sign === 'alertbyday' || sign === 'OEE') {
         // chart.tooltip({
         //     custom: true,
         //     showXTip: true,
         //     showYTip: true,
         //     snap: true,
         //     crosshairsType: 'xy',
         //     crosshairsStyle: {
         //         lineDash: [2]
         //     }
         // });
         chart.tooltip(false);
         // 辅助元素
         senddata.forEach(function (obj, index) {
            // 文字部分
            var color = '';
            if (sign === 'OEE') {
               color = obj.num > 70 ? '#2fc25b' : '#FC674D';
            } else if (sign === 'alertbyday') {
               color = obj.num < 50 ? '#2fc25b' : '#FC674D';
            } else {
               color = obj.num > 0 ? '#2fc25b' : '#FC674D';
            }

            chart.guide().text({
               position: [obj.vdate, obj.num > 0 ? obj.num : 0],
               content: sign === 'OEE' ? (obj.num + '%') : (obj.num),
               style: {
                  fill: color,
                  textBaseline: 'bottom'
               },
               offsetY: -5
            });
            // 背景部分
            var offset = 0.46;
            chart.guide().rect({
               start: [index - offset, 'max'],
               end: [index + offset, 'min'],
               style: {
                  fill: '#f8f8f8'
               }
            });
         });
         chart.point().position('vdate*num').shape('smooth');
         chart.line({
            connectNulls: true // 配置，连接空值数据
         }).position('vdate*num').shape('smooth');
      } else if (sign === 'alertbytype') {
         chart.tooltip({
            showCrosshairs: true
         });
         chart.point().position('vdate*num').color('name').shape('smooth');
         chart.area().position('vdate*num').color('name').shape('smooth');
         chart.line({
            connectNulls: true // 配置，连接空值数据
         }).position('vdate*num').color('name').shape('smooth');
      }
      chart.render();
   }

   //7日成本数据折线图
   SevenCostData = (senddata, sign) => {
      var chart = new F2.Chart({
         id: 'chart' + sign,
         pixelRatio: window.devicePixelRatio,
         padding: [25, 10, 20, 50]
      });
      chart.source(senddata, {
         ddate: {
            type: 'timeCat',
            tickCount: 4,
            mask: 'MM-DD',
            range: [0, 1]
         },
         vcost: {
            tickCount: 5,
            range: [0, 1],
         },
      });

      //处理坐标轴缩进
      chart.axis('ddate', {
         label: function label(text, index, total) {
            var textCfg = {};
            if (index === 0) {
               textCfg.textAlign = 'left';
            } else if (index === total - 1) {
               textCfg.textAlign = 'right';
            }
            return textCfg;
         },
         grid: function label(text, index, total) {
            var textCfg = {};
            if (index === 0) {
               textCfg.textAlign = 'left';
            } else if (index === total - 1) {
               textCfg.textAlign = 'right';
            }
            return textCfg;
         }
      });

      chart.legend(false);
      chart.line({
         connectNulls: true // 配置，连接空值数据
      }).position('ddate*vcost').color('type', function (type) {
         if (type === 'cost') {
            return '#2fc25b';
         }
         if (type === 'costbyday') {
            return '#1890FF';
         }
      }).shape('type', function (type) {
         if (type === 'cost') {
            return 'line';
         }
         if (type === 'costbyday') {
            return 'dash';
         }
      });
      chart.point().position('ddate*vcost').color('type', function (type) {
         if (type === 'cost') {
            return '#2fc25b';
         }
         if (type === 'costbyday') {
            return '#1890FF';
         }
      }).shape('smooth');
      chart.render();
   }
   getColor = (data) => {
      if (data === '+') {
         return '#2fc25b'
      } else if (data === '-') {
         return '#FF0000'
      } else {
         return '#6cb9ff'
      }
   }

   onClickLink = (val) => {
      // const { router } = this.context;
      let func = { route: '', name: '' }
      if (val == "open") {
         func.route = 'macstatuslist'
         func.name = '机台列表'
         func.onClick = this.onClick
         this.onClick('', '', func)
         // router.push('macstatuslist');
      }
      if (val == "alert") {
         func.route = 'dbalert'
         func.name = '警报',
            func.onClick = this.onClick
         this.onClick('', '', func)
      }
      if (val === 'oee') {
         func.route = 'macstatusoee'
         func.name = 'OEE'
         func.onClick = this.onClick
         this.onClick('', '', func)
      }
      if (val === 'todayopen') {
         func.route = 'todayopen'
         func.name = '今日开机'
         func.onClick = this.onClick
         this.onClick('', '', func)
      }
      if (val === 'mactypealert') {
         func.route = 'mactypealert'
         func.name = '警报'
         func.onClick = this.onClick
         this.onClick('', '', func)
      }
      if (val === 'cost') {
         func.route = 'costoeemap'
         func.name = '有效成本'
         func.onClick = this.onClick
         this.onClick('', '', func)
      }
      if(val === 'maintain'){
         browserHistory.push('maintainsituation');
      }
   }
   render() {
      return (
         <div key={"key1"} style={{ height: '100%' }}>
            {<WingBlank size="md">
               <WhiteSpace size="md" />
               <Card onClick={() => this.onClickLink('alert')}>
                  <Card.Header
                     style={{ fontSize: '16px', paddingBottom: '0px' }}
                     title="当前警报"
                  // thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                  />
                  <Card.Body style={{ border: 'none', paddingTop: '0px', marginTop: '0px' }}>
                     <Flex>
                        <Flex.Item style={{ flex: '0.4' }}>
                           <Card full='true' style={{ border: 'none' }}>
                              <div style={{ float: 'left', width: '100%', height: '100%', textAlign: 'center', margin: '0' }}>
                                 <div style={{ width: 'auto', height: 'auto', margin: '0', padding: '0', position: 'absolute', top: '8%', }}>
                                    <img src={require('../../images/alert.png')} style={{ width: '60%', height: '60%', marginTop: '2px' }} />
                                 </div>
                                 <div style={{ width: '100%', height: '60%', fontSize: 16 * (window.innerWidth / 375), position: 'absolute', top: '50%', textAlign: 'center' }}>
                                    <div style={{ fontSize: 13 * (window.innerWidth / 375) }}>机台数</div>
                                    <div>{JSON.stringify(this.state.alertnum) !== '[]' ? this.state.alertnum[0].num : ''}</div>
                                 </div>
                              </div>
                           </Card>
                        </Flex.Item>
                        <Flex.Item>
                           <Card full='true' style={{ borderTop: 'none', borderBottom: 'none', borderLeft: '1px dashed #c4ccd4', borderRight: '1px dashed #c4ccd4' }}>
                              <div style={{ float: 'left', width: '100%', height: 'auto', textAlign: 'center', margin: '0', position: 'absolute', top: '20%', }}>
                                 <List style={{ flexBasis: 'initial', width: '100%', height: '100%' }}>
                                    {this.state.alertdata ? this.state.alertdata.map(val =>
                                       <Item key={val.name} extra={val.num}><span style={{ fontSize: '13px' }}>{val.name}</span></Item>
                                    ) : ""}
                                 </List>
                              </div>
                           </Card>
                        </Flex.Item>
                        <Flex.Item>
                           <Card full='true' style={{ border: 'none' }}>
                              <div style={{ float: 'left', width: '100%', height: '100%', textAlign: 'center', margin: '0' }}>
                                 <canvas id="chartalert" style={{ width: '100%', height: document.body.clientHeight / 2 * 0.35 }}></canvas>
                              </div>
                           </Card>
                        </Flex.Item>
                     </Flex>
                  </Card.Body>
               </Card>
               <WhiteSpace size="md" />
               <Flex>
                  <Flex.Item onClick={() => this.onClickLink('open')}>
                     {/* <Card>
                                    <div>
                                        <div style={{ textAlign: 'center', fontSize: '16px', padding: '12% 0 0 0' }}>开机数/总机数</div>
                                        <div style={{ textAlign: 'center', fontSize: '20px', color: '#2fc25b', margin: '5px 0 0 0' }}>{this.state.openmac[0].num}/{this.state.openmac[0].num + this.state.openmac[1].num}</div>
                                    </div>
                                </Card> */}
                     <Card>
                        <div style={{ textAlign: 'center', fontSize: '16px', padding: '12% 0 0 0', margin: '0px 0 -20px 0', color: this.getColor(this.state.opentrend[0]) }}>开机数 {this.state.opentrend[0]}{this.state.opentrend[1]}</div>
                        <div style={{ height: document.body.clientHeight / 2 * 0.33 }}>
                           <canvas id="chartopen" style={{ width: "100%", height: document.body.clientHeight / 2 * 0.35 }}></canvas>
                        </div>
                     </Card>
                  </Flex.Item>
                  <Flex.Item onClick={() => this.onClickLink('oee')}>
                     <Card>
                        <div style={{ textAlign: 'center', fontSize: '16px', padding: '12% 0 0 0', margin: '0px 0 -20px 0', color: this.getColor(this.state.speedtrend[0]) }}>
                           性能效率 {this.state.speedtrend[0]}{this.state.speedtrend[1]}</div>
                        <div style={{ height: document.body.clientHeight / 2 * 0.33 }}>
                           <canvas id="chartspeed" style={{ width: "100%", height: document.body.clientHeight / 2 * 0.35 }}></canvas>
                        </div>
                     </Card>
                  </Flex.Item>
                  <Flex.Item onClick={() => this.onClickLink('oee')}>
                     <Card>
                        <div style={{ textAlign: 'center', fontSize: '16px', padding: '12% 0 0 0', margin: '0px 0 -20px 0', color: this.getColor(this.state.timetrend[0]) }}>
                           时间效率 {this.state.timetrend[0]}{this.state.timetrend[1]}
                        </div>
                        <div style={{ height: document.body.clientHeight / 2 * 0.33 }}>
                           <canvas id="charttime" style={{ width: "100%", height: document.body.clientHeight / 2 * 0.35 }}></canvas>
                        </div>
                     </Card>
                  </Flex.Item>
               </Flex>
               <WhiteSpace size="md" />
               <div style={{backgroundColor:'#FFF',border:'1px solid #d3d3d3'}}>
               <Flex onClick={() => this.onClickLink('maintain')}>
               <Flex.Item>
                  <div style={{ padding: '10px 0 10px 0',textAlign: 'center', color: '#1890ff' }}>
                     待接单 ({this.state.repairsnum})</div>
               </Flex.Item>
               <Flex.Item >
               <div style={{ padding: '10px 0 10px 0',textAlign: 'center', color:  '#1890ff' }}>
                     维修中({this.state.maintainingnum})</div>                  
               </Flex.Item>  
               <Flex.Item >
               <div style={{ padding: '10px 0 10px 0',textAlign: 'center', color: '#1890ff' }}>
                     维修完成({this.state.maintainfinishnum})</div>   
               </Flex.Item>
               </Flex>  
               </div>                    
               <WhiteSpace size="md" />
               <Flex.Item onClick={() => this.onClickLink('todayopen')}>
                  <Card>
                     <Card.Body style={{ paddingLeft: '5px' }}>
                        <div style={{ textAlign: 'center', color: '#1890ff' }}>今日开机时间</div>
                        {this.state.opentime && this.state.opentime.length > 0?
                        <canvas id="todayopentime" style={{ width: "100%", height: document.body.clientHeight / 2 * 0.35 }}></canvas>
                        :
                        <div style={{textAlign:'center',width: "100%", height: document.body.clientHeight / 2 * 0.35  }}>
                           <p>暂无数据</p>
                        </div>  
                        }
                     </Card.Body>
                  </Card>
               </Flex.Item>
               <WhiteSpace size="md" />
               <Flex.Item onClick={() => this.onClickLink('mactypealert')}>
                  <Card>
                     <Card.Body style={{ paddingLeft: '5px' }}>
                        <div style={{ textAlign: 'center', color: '#1890ff' }}>7日警报数</div>
                        {this.state.sevenalertbyday && this.state.sevenalertbyday.length > 0?
                        <canvas id="alertbyday" style={{ width: "100%", height: document.body.clientHeight / 2 * 0.35 }}></canvas>
                        :
                        <div style={{textAlign:'center',width: "100%", height: document.body.clientHeight / 2 * 0.35  }}>
                           <p>暂无数据</p>
                        </div>  
                        }
                     </Card.Body>
                  </Card>
               </Flex.Item>
               {/* <WhiteSpace size="md" />
                    <Card>
                        <Card.Body style={{ paddingLeft: '5px' }}>
                            <div style={{ textAlign: 'center', color: '#1890ff' }}>7日各机型警报数</div>
                            <canvas id="alertbytype" style={{ width: "100%", height: 'auto' }}></canvas>
                        </Card.Body>
                    </Card> */}

               <WhiteSpace size="md" />
               <Card>
                  <Card.Body style={{ paddingLeft: '5px' }}>
                     <div style={{ textAlign: 'center', color: '#1890ff' }}>7日OEE</div>
                     {this.state.sevenoee && this.state.sevenoee.length>0?
                     <canvas id="OEE" style={{ width: "100%", height: document.body.clientHeight / 2 * 0.35 }}></canvas>
                     :
                     <div style={{textAlign:'center',width: "100%", height: document.body.clientHeight / 2 * 0.35  }}>
                          <p>暂无数据</p>
                       </div>  
                     }
                  </Card.Body>
               </Card>

               <WhiteSpace size="md" />
               <Flex.Item onClick={() => this.onClickLink('cost')}>
                  <Card>
                     <Card.Body style={{ paddingLeft: '5px' }}>
                        <div style={{ textAlign: 'center', color: '#1890ff' }}>7日成本</div>
                        {
                           this.state.sevenalertbyday && this.state.sevenalertbyday.length > 0?
                           <canvas id="chartcost" style={{ width: "100%", height: document.body.clientHeight / 2 * 0.35 }}></canvas>
                           :
                           <div style={{textAlign:'center',width: "100%", height: document.body.clientHeight / 2 * 0.35  }}>
                              <p>暂无数据</p>
                           </div>  
                        }
                        
                     </Card.Body>
                  </Card>
               </Flex.Item>
            </WingBlank>}

            <WhiteSpace size="lg" />
         </div>
      )
   }
}

Dashboard.contextTypes = {
   router: PropTypes.object.isRequired
}