import React from 'react';
import 'antd-mobile/dist/antd-mobile.css';
import {Toast,List, ListView,Tabs,Card, WingBlank, WhiteSpace, Button, Flex, Accordion } from 'antd-mobile';
import { Http } from '../../Utils/help';
import Format from '../../Utils/NumericFormat';
const Item = List.Item;
const Brief = Item.Brief;
const F2 = require('@antv/f2');
const PieLabel = require('@antv/f2/lib/plugin/pie-label');
const tabs = [
    { title: '机台详情'},
    { title: '报修单' },
    { title: '维修单'},
  ];

export default class MacStatusNowInfo extends React.Component {
    constructor(props) {
        super(props);
        this.NUM_SECTIONS = 1;
        this.NUM_ROWS_PER_SECTION = 50;
        const { code, status } = this.props.location.state;
        console.log(code, status)
        this.loadData_t = this.loadData_t.bind(this);
        //this.maintainChartRender=this.maintainChartRender(this);
        // this.makeData = this.makeData.bind(this);
        this.devFilter = this.devFilter.bind(this);
        this.pavFilter = this.pavFilter.bind(this);
        this.paraFilter = this.paraFilter.bind(this);
        this.onEndReached=this.onEndReached.bind(this);
        this.genData=this.genData.bind(this);
        this.formatDate=this.formatDate.bind(this)
        this.onTabClick=this.onTabClick.bind(this)//页签点击事件
        this.onSuccess=this.onSuccess.bind(this)
        //this.chartRender = this.chartRender.bind(this);
        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });
        const repdataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });
        this.state = {
            code: code,
            status: status,
            mstate: [],
            macstatus_f: [],
            macstatus_para: [],
            mac: ["", ""],
            gddata: { "fun": [], "data": [] },
            gddata_use: { "fun": [], "data": [] },
            singledev: [],
            curmacstatus: [],
            linedata: [],
            avglinedata: [],
            comparedata: [],
            //警报数据
            alertcookiedata: [],
            alertmacdata: [],
            alertmactopdata: [],
            alerttopdata: [],
            //维修数据
            maintaintime: [],
            tag: { 'DAY': 'primary' },
            type: 'DAY',
            typech: '日',
            openAccordion: status === 3 || status === '3' ? ['alert'] : ['open'],
            //页签
            page: 1,
            pageSize: 10,
            height: document.documentElement.clientHeight * 1,
            repdataSource:repdataSource,
            dataSource: dataSource,
            nodata: true,
            isLoading: false,
            data:{},//维修单的数据
            repdata:{},//报修单的数据
            deviceid:null,
            tabsselect:0,//当前页签
            show:false,//展示
            //是否加载完成
            // toasthide: '',
            i:{},
            ifin:false,
        };
        // refreshvar = setInterval(
        //     this.refreshmac
        //     , 20 * 1000);
    }
    onTabClick=(index)=>{     
        this.setState({show:false})
        this.setState({tabsselect:index,page:1},()=>{
        if(index===1){
            this.dataAjax= Http.getJSON2("repairs", {"deviceid":this.state.deviceid,"page":this.state.page, "pageSize":this.state.pageSize,  "orderby":'createtime desc'}).done((data)=>{
                console.log(data.data)
                try {
                    this.genData(data.data);
                    console.log(data.data, this.state)
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
                        data: data.data,
                        nodata: !data || data.length == 0,
                    },()=>{this.setState({show:true})});
                    console.log("this.state", this.state)
                } catch (err) {
                    console.error(err.message);
                    console.error(err.stack);
                }
            })
        }
        if(index===2){
            this.dataAjax= Http.getJSON2("maintain", {"position":this.state.deviceid,"page":this.state.page, "pageSize":this.state.pageSize,  "orderby":'createtime desc'}).done((data)=>{
                console.log(data.data)
                try {
                    this.genData(data.data);
                    console.log(data.data, this.state)
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
                        data: data.data,
                        nodata: !data || data.length == 0,
                    },()=>{this.setState({show:true})});
                    console.log("this.state", this.state)
                } catch (err) {
                    console.error(err.message);
                    console.error(err.stack);
                }
            })
        }
        
    })
        
    }
    onEndReached(event){
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        // if (this.state.isLoading && !this.state.hasMore) {
        //     return;
        //   }
          console.log('reach end', event);
          let that = this;
          if(this.state.tabsselect == 1 ){
                this.dataAjax = Http.getJSON2("repairs", { "deviceid":this.state.deviceid,"page":++this.state.page,"pageSize":this.state.pageSize,  "orderby":'createtime desc'})
              }
          else if(this.state.tabsselect == 2){
                this.dataAjax = Http.getJSON2("maintain", {"position":this.state.deviceid,"page":++this.state.page, "pageSize":this.state.pageSize,  "orderby":'createtime desc'})
              }  
          this.dataAjax.done((data) => {
                  console.log("onEndReached:", data.data)
                //   console.log(this.state.page)               
                //   console.log(data.data.length>0)
                //   console.log(this.state.ifin)
                //   console.log(this.state.i)
                //   console.log(data.data.length>0 && this.state.ifin)
                  if(data.data.length>0 && this.state.ifin ){
                    this.state.i['value']['page']=this.state.page
                    this.setState({i:this.state.i})
                    console.log(this.state.i)
                  }

                  if(data.data && data.data.length>0){
                      try {
                          //var c=data.data.concat(that.state.data);
                          var c = that.state.data.concat(data.data)
                          that.genData(c);
                          console.log(data, that.state)
                          that.setState({
                          dataSource: that.state.dataSource.cloneWithRowsAndSections(that.dataBlobs, that.sectionIDs, that.rowIDs),
                          data:c,
                          page:data.Page,
                          nodata:!data||data.length==0,
                          isLoading:false,
                          });
                      } catch (err) {
                          console.error(err.message);
                          console.error(err.stack);
                      }
                  }
              }
              );
    }
    onSuccess = (data) =>{
        this.genData(data.data);
        console.log(data.data, this.state)
        this.setState({
        dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
        data:data.data,
        nodata:!data||data.length==0,
        isLoading:false,
        }, this.lv.scrollTo(0,0));
        console.log("this.state", this.state)           
    }
    formatDate = (date_str) => {//时间格式处理
        if (date_str === null)
            return ''
        var date = new Date(Date.parse(date_str.replace(/-/g, "/")));
        var seperator1 = "-";
        var seperator2 = ":";
        var year=date.getFullYear() 
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
        var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
        var currentdate = year + seperator1+month + seperator1 + strDate
            + " " + hour + seperator2 + minute
        return currentdate;
    }
    genData = (datas) => {
        this.dataBlobs = {};
        this.sectionIDs = [];
        this.rowIDs = [];
        if (!datas)
            return;

        let pIndex = 0;
        this.NUM_ROWS_PER_SECTION = datas.length;
        for (let i = 0; i < this.NUM_SECTIONS; i++) {
            const ii = (pIndex * this.NUM_SECTIONS) + i;
            const sectionName = `Section ${ii}`;
            this.sectionIDs.push(sectionName);
            this.dataBlobs[sectionName] = sectionName;
            this.rowIDs[ii] = [];

            for (let jj = 0; jj < this.NUM_ROWS_PER_SECTION; jj++) {
                const rowName = `S${ii}, R${jj}`;
                this.rowIDs[ii].push(rowName);
                this.dataBlobs[rowName] = datas[jj];
            }
        }
        this.sectionIDs = [...this.sectionIDs];
        this.rowIDs = [...this.rowIDs];
    }
    componentWillMount(){
        this.loadData_t(this.state.code);
        if(typeof(window.conditionarr)=="undefined"){window.conditionarr=[]}
        console.log(window.conditionarr) 
        window.conditionarr.map((data=>{
           // keys.push()
           if(data['key']==='macstatusnowinfo'){
               console.log(data)
               if(data['value']['devicecode']!==this.state.code){
                    this.state.ifin=false
                    this.setState({ifin:false})
                    return
               }
               this.state.ifin=true
               this.state.i=data               
               this.setState({ifin:true,i:data},()=>{
                if(this.state.ifin){
                    //this.onTabClick( this.state.i['value']['tabsselect'])
                    this.setState({show:false})
                    this.setState({tabsselect:this.state.i['value']['tabsselect'],page:1},()=>{
                    if(this.state.i['value']['tabsselect']===1){
                        this.dataAjax= Http.getJSON2("repairs", {"deviceid":this.state.i['value']['deviceid'],"page":this.state.page, "pageSize":this.state.pageSize,  "orderby":'createtime desc'}).done((data)=>{
                            console.log(data.data)
                            try {
                                this.genData(data.data);
                                console.log(data.data, this.state)
                                this.setState({
                                    dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
                                    data: data.data,
                                    nodata: !data || data.length == 0,
                                },()=>{this.setState({show:true})});
                                console.log("this.state", this.state)
                            } catch (err) {
                                console.error(err.message);
                                console.error(err.stack);
                            }
                        })
                    }
                    if(this.state.i['value']['tabsselect']===2){
                        this.dataAjax= Http.getJSON2("maintain", {"position":this.state.i['value']['deviceid'],"page":this.state.page, "pageSize":this.state.pageSize,  "orderby":'createtime desc'}).done((data)=>{
                            console.log(data.data)
                            try {
                                this.genData(data.data);
                                console.log(data.data, this.state)
                                this.setState({
                                    dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
                                    data: data.data,
                                    nodata: !data || data.length == 0,
                                },()=>{this.setState({show:true})});
                                console.log("this.state", this.state)
                            } catch (err) {
                                console.error(err.message);
                                console.error(err.stack);
                            }
                        })
                    }
                    
                })
                    }               
               })
               return
           }
        }))
       // console.log(window.conditionarr['macstatusnowinfo']['tabsselect'])

    }
    componentDidMount() {
        console.log("componentDidMount")
        this.setState({ isLoading: true });
        this.dataAjax = Http.getJSON2("device", { "code":this.state.code}).done((data)=>{
            // console.log('机台',data.data)
             this.setState({deviceid:data.data[0].deviceid})
             console.log(this.state.deviceid)

         })

    }

    loadData_t(macnum) {
        console.log("进入loadData_t")
        this.dataAjax3 = Http.getJSON2("ds/data/kbmacalertcon/kbmacalert", {}).done((macalertstatus) => {
            var devicecode = this.state.code
            try {
                var alertstatus = []
                for (var i = 0; i < macalertstatus.length; i++) {
                    if (macalertstatus[i].devcode == devicecode) {
                        alertstatus.push(macalertstatus[i])
                    }
                }
                this.setState(
                    {
                        macalertstatus: macalertstatus,
                        alertstatus: alertstatus,
                    }, () => {
                        // Toast.hide();
                    }
                )
            } catch (error) {
                console.error(error.message);
                console.error(error.stack);
            }
        })

        this.dataAjax3 = Http.getJSON2("ds/data/kbmacruncon/kbmacsta", {}).done((DataSource) => {
            var devicecode = this.state.code
            var linedata = []
            for (var i = 0; i < DataSource.length; i++) {
                if (DataSource[i].devcode == devicecode) {
                    linedata.push(DataSource[i])
                }
            }
            // console.log(linedata)
            try {
                this.setState(
                    {
                        singledev: linedata,
                    }, () => {
                        // Toast.hide();
                    });
            } catch (error) {
                console.error(error.message);
                console.error(error.stack);
            }
        })

        this.dataAjax = Http.getJSON2("ds/data/macstatus/mstate", { "macnum": macnum }).done((result) => {
            try {
                let mstate = result
                this.setState({
                    mstate: mstate,
                    macstatus_f: this.devFilter(mstate, macnum),
                    macstatus_para: this.pavFilter(this.devFilter(mstate, macnum)),
                }, () => {
                    //Toast.hide();
                });
            } catch (err) {
                console.error(err.message);
                console.error(err.stack);
            }
        });

        this.dataAjax = Http.getJSON2("ds/data/maintain/maintaindetail", { "dateType": this.state.type, "code": this.state.code }).done((result) => {
             try {
                console.log("maintaintime:",result)
                this.setState({
                    maintaintime: result,
                }, () => {
                    this.maintainChartRender();
                });
            } catch (err) {
                console.error(err.message);
                console.error(err.stack);
            }
        });

        //当前状态
        if (!this.state.status || this.state.status === '') {
            this.dataAjax = Http.getJSON2("ds/data/macstatus/macstatusmerge").done((result) => {
                try {
                    const { maclist } = result;
                    this.setState({
                        status: this.getStatus(maclist),
                        openAccordion: this.getOpenAccordion(maclist),
                    });
                } catch (err) {
                    console.error(err.message);
                    console.error(err.stack);
                }
            })
        }
        this.getOpenChartData()
        this.getAlertChartData()
    }

    getStatus = (val) => {
        let status = 0
        if (val && val.length > 0) {
            val.map(data => {
                if (data.macnum === this.state.code) {
                    status = data.inused
                }
            })
        }
        return status
    }

    getOpenAccordion = (val) => {
        let openacc = []
        if (val && val.length > 0) {
            val.map(data => {
                if (data.macnum === this.state.code) {
                    openacc = data.inused === 3 ? ['alert'] : ['open']
                }
            })
        }
        return openacc
    }

    getOpenChartData = () => {
        // Toast.loading('加载中...', 0);
        this.dataAjax2 = Http.getJSON2("ds/data/kbmacruncon/kbmacswitch", { "devcode": this.state.code, "type": this.state.type }).done((DataSource) => {
            try {
                console.log(DataSource)
                var allvalue = 0
                if (DataSource.length) {
                    DataSource.map(dataItem => {
                        if (dataItem.cursta == 2) {
                            allvalue += dataItem.statime
                        }
                    })
                }

                //1为当前机台7日曲线图数据,
                //0为所有机台7日平均曲线图数据，
                //2为扇图,
                ///判断devcode为当前机台和所有机台7日平均数据对比柱形图
                let data = {}
                let linedata = [], avglinedata = [], datavalues = [], comparedata = []
                var percent = 0
                for (let j = 0; j < DataSource.length; j++) {
                    if (DataSource[j].cursta == 1) {
                        data.type = DataSource[j].staname
                        data.value = DataSource[j].statime
                        data.date = DataSource[j].typename
                        linedata.push(data)
                        data = {}
                    } else if (DataSource[j].cursta == 0) {
                        data.type = "平均" + DataSource[j].staname
                        data.value = DataSource[j].statime
                        data.date = DataSource[j].typename
                        avglinedata.push(data)
                        data = {}
                    } else if (DataSource[j].cursta == 2) {
                        data.name = DataSource[j].staname
                        data.aa = "1"
                        data.allvalue = allvalue
                        data.value = DataSource[j].statime
                        percent = (data.value * data.aa) / allvalue
                        data.percent = (Number)(percent.toFixed(2))
                        datavalues.push(data)
                        data = {}
                    }
                    if (DataSource[j].cursta == 0 && DataSource[j].staname == '开机') {
                        data.type = "平均" + DataSource[j].staname
                        data.value = DataSource[j].statime
                        data.date = DataSource[j].typename
                        comparedata.push(data)
                        data = {}
                    } else if (DataSource[j].cursta == 1 && DataSource[j].staname == '开机') {
                        data.type = DataSource[j].staname
                        data.value = DataSource[j].statime
                        data.date = DataSource[j].typename
                        comparedata.push(data)
                        data = {}
                    }
                }

                this.setState(
                    {
                        curmacstatus: datavalues,
                        linedata: linedata,
                        avglinedata: avglinedata,
                        comparedata: this.getComparedata(comparedata),
                        // toasthide: this.state.toasthide += 'open'
                    }, () => {
                        // if (this.state.toasthide.indexOf('open') > -1 && this.state.toasthide.indexOf('alert') > -1) {
                        //     // Toast.hide();
                        // }
                        this.state.openAccordion.map((val) => {
                            if (val === 'open')
                                this.chartRender();
                        })
                    }
                )
            } catch (error) {
                console.error(error.message)
                console.error(error.stack)
            }
        })
    }

    getComparedata = (data) => {
        let redata = []
        let arrdata = {}//{date:'',avgvalue:0,value:0}
        if (data && data.length > 0) {
            let dataval = []
            data.map(val => {
                if (val.type === '平均开机') {
                    arrdata.date = val.date
                    arrdata.avgvalue = val.value
                    dataval.push(arrdata)
                    arrdata = {}
                }
            })
            dataval.map(daval => {
                data.map(val => {
                    if (val.date === daval.date) {
                        if (val.type === '开机') {
                            arrdata.date = daval.date
                            arrdata.平均开机时间 = daval.avgvalue
                            arrdata.开机时间 = val.value
                            redata.push(arrdata)
                            arrdata = {}
                        } else {
                            arrdata.date = daval.date
                            arrdata.平均开机时间 = daval.avgvalue
                            arrdata.开机时间 = 0
                            redata.push(arrdata)
                            arrdata = {}
                        }
                    }
                })
            })
        }
        return redata
    }

    getAlertChartData = () => {
        // Toast.loading('加载中...', 0);
        this.dataAjax2 = Http.getJSON2("ds/data/kbmacalertcon/kbmacalertlist", { "devcode": this.state.code, "type": this.state.type }).done((DataSource) => {
            try {
                //饼图数据
                var allvalue = 0
                if (DataSource.length > 0) {
                    var devicecode = this.state.code
                    DataSource.map(dataItem => {
                        if (dataItem.devcode === devicecode && dataItem.cursta && dataItem.dispart == 0) {
                            allvalue += dataItem.alertqty
                        }
                    })
                }
                //cursta==true 饼图
                //dispart==1 最近6天当前机台与机台平均警报数对比
                // dispart == 2 当前设备一段时间报警分布
                // dispart == 3所有设备一段时间报警分布
                let data = {}
                let datavalues = [], linedata = [], areadataone = [], areadatatwo = []
                var percent = 0
                for (let i = 0; i < DataSource.length; i++) {
                    if (DataSource[i].cursta && DataSource[i].dispart == 0) {
                        data.name = DataSource[i].alertname
                        data.aa = '1'
                        data.allvalue = allvalue
                        data.value = DataSource[i].alertqty
                        percent = (data.value * data.aa) / allvalue
                        data.percent = (Number)(percent.toFixed(2))
                        datavalues.push(data)
                        data = {}
                    } else if (DataSource[i].dispart == 1) {
                        data.type = DataSource[i].devcode
                        data.value = DataSource[i].alertqty
                        data.date = DataSource[i].typename
                        linedata.push(data)
                        data = {}
                    } else if (DataSource[i].dispart == 2) {
                        data.alerttype = DataSource[i].alertname
                        data.date = DataSource[i].typename
                        data.value = DataSource[i].alertqty
                        areadataone.push(data)
                        data = {}
                    } else if (DataSource[i].dispart == 3) {
                        data.alerttype = DataSource[i].alertname
                        data.date = DataSource[i].typename
                        data.value = DataSource[i].alertqty
                        areadatatwo.push(data)
                        data = {}
                    }
                }

                this.setState(
                    {
                        alertmactopdata: areadataone,//警报 ，当前机台分布
                        alerttopdata: areadatatwo,//警报 ，所有机台分布图
                        alertmacdata: linedata,//警报折线图
                        alertcookiedata: datavalues,//警报饼图
                        // toasthide: this.state.toasthide += 'alert'
                    }, () => {
                        // if (this.state.toasthide.indexOf('open') > -1 && this.state.toasthide.indexOf('alert') > -1) {
                        //     Toast.hide();
                        // }
                        console.log(this.state.alertcookiedata)
                        this.state.openAccordion.map((val) => {
                            if (val === 'alert')
                                this.alertChartRender();
                        })
                    }
                )
            } catch (error) {
                console.error(error.message);
                console.error(error.stack);
            }
        })
    }

    chartRender = () => {
        if (this.state.curmacstatus && JSON.stringify(this.state.curmacstatus) !== '[]')//机台今日开机时间占比
            this.StockageData(this.state.curmacstatus, 'curmacstatus')
        if (this.state.linedata && JSON.stringify(this.state.linedata) !== '[]')//当前机台最近7日开关机数据
            this.StockageData2(this.state.linedata, 'linedata')
        if (this.state.avglinedata && JSON.stringify(this.state.avglinedata) !== '[]')//所有机台最近7日开关机数据
            this.StockageData2(this.state.avglinedata, 'avglinedata')
        if (this.state.comparedata && JSON.stringify(this.state.comparedata) !== '[]')//当前机台与平均数据对比
            this.StockageData4(this.state.comparedata, 'comparedata')


    }

    alertChartRender = () => {
        if (this.state.alertcookiedata && JSON.stringify(this.state.alertcookiedata) !== '[]')//警报饼图
            this.StockageData(this.state.alertcookiedata, 'alertcookiedata')
        if (this.state.alertmacdata && JSON.stringify(this.state.alertmacdata) !== '[]')//警报折线图
            this.StockageData2(this.state.alertmacdata, 'alertmacdata')
        if (this.state.alertmactopdata && JSON.stringify(this.state.alertmactopdata) !== '[]')//警报 ，当前机台分布
            this.StockageData3(this.state.alertmactopdata, 'alertmactopdata')
        if (this.state.alerttopdata && JSON.stringify(this.state.alerttopdata))//警报 ，所有机台分布图
            this.StockageData3(this.state.alerttopdata, 'alerttopdata')
    }
    maintainChartRender = () => {
        if (this.state.maintaintime && JSON.stringify(this.state.maintaintime) !== '[]'&&JSON.stringify(this.state.maintaintime)!=='{}')//当前机台维修时长
        this.StockageData5(this.state.maintaintime)
    }

    StockageData = (data, sign) => {
        try {
            var chart = new F2.Chart({
                id: sign,
                pixelRatio: window.devicePixelRatio,
                plugins: PieLabel
            });
            chart.source(data)
            chart.pieLabel({
                sidePadding: 40,
                label1: function label1(data, color) {
                    return {
                        text: data.name,
                        fill: color
                    };
                },
                label2: function label2(data) {
                    return {
                        text: (data.aa * data.percent * 100).toFixed(0) + "%",
                        fill: '#808080',
                        fontWeight: 'bold'
                    };
                }
            });
            chart.legend(false)
            chart.tooltip(false);
            chart.coord('polar', {
                transposed: true,
                radius: 0.8
            });
            chart.axis(false);
            if (sign !== 'alertcookiedata') {
                chart.interval().position('aa*percent').color('name', function (name) {
                    if (name === '开机') {
                        return '#489304';
                    } else if (name === '待机') {
                        return '#e0b71a';
                    } else if (name === '关机') {
                        return '#898989'
                    }
                }).adjust('stack').style({
                    //lineWidth: 1,
                    stroke: '#fff',
                    lineJoin: 'round',
                    lineCap: 'round'
                }).animate({
                    appear: {
                        duration: 1200,
                        easing: 'bounceOut'
                    }
                });
            } else {
                chart.interval().position('aa*percent').color('name').adjust('stack').style({
                    //lineWidth: 1,
                    stroke: '#fff',
                    lineJoin: 'round',
                    lineCap: 'round'
                }).animate({
                    appear: {
                        duration: 1200,
                        easing: 'bounceOut'
                    }
                });
            }
            //渲染图表
            chart.render();
        } catch (error) {
            console.error(error.message)
            console.error(error.stack)
        }
    }

    StockageData2 = (linedata, sign) => {
        try {
            var chart = new F2.Chart({
                id: sign,
                // padding: ['auto', 0, 'auto', 20],
                pixelRatio: window.devicePixelRatio
            });
            chart.source(linedata, {
                value: {
                    tickCount: 5
                }
            });

            if (this.state.type === 'DAY') {
                chart.scale('date', {
                    type: 'timeCat',
                    tickCount: 6,
                    mask: 'MM-DD',
                    range: [0.04, 1],
                });
            } else {
                chart.scale('date', {
                    type: 'cat',
                    tickCount: 6,
                    formatter: function formatter(value) {
                        let retval = value.replace(/\s*/g, "")//.substring(4, 20)
                        return retval
                    }
                })
            }

            if (sign !== 'alertmacdata') {
                chart.point().position('date*value').color('type', function (type) {
                    if (type.indexOf('开机') > -1) {
                        return '#489304';
                    } else if (type.indexOf('待机') > -1) {
                        return '#e0b71a';
                    } else if (type.indexOf('关机') > -1) {
                        return '#898989'
                    }
                }).shape('smooth');
                chart.line().position('date*value').color('type', function (type) {
                    if (type.indexOf('开机') > -1) {
                        return '#489304';
                    } else if (type.indexOf('待机') > -1) {
                        return '#e0b71a';
                    } else if (type.indexOf('关机') > -1) {
                        return '#898989'
                    }
                }).shape('smooth', function (type) {
                });
            }
            else {
                chart.point().position('date*value').color('type').shape('smooth');
                chart.line().position('date*value').color('type').shape('smooth');
            }
            chart.render();
        } catch (error) {
            console.error(error.message)
            console.error(error.stack)
        }
    }

    StockageData3 = (data, sign) => {
        var chart = new F2.Chart({
            id: sign,
            pixelRatio: window.devicePixelRatio
        });

        chart.source(data, {
            value: {
                tickCount: 7
            }
        });

        if (this.state.type === 'DAY') {
            chart.scale('date', {
                type: 'timeCat',
                tickCount: 6,
                mask: 'MM-DD',
                range: [0, 1],
            });

            chart.axis('date', {
                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;
                }
            });
        } else {
            chart.scale('date', {
                type: 'cat',
                tickCount: 6,
                formatter: function formatter(value) {
                    let retval = value.replace(/\s*/g, "")//.substring(4, 20)
                    return retval
                }
            })
        }

        chart.point().position('date*value').color('alerttype').shape('smooth');
        chart.area().position('date*value').color('alerttype').adjust('stack').shape('smooth');
        chart.line().position('date*value').color('alerttype').adjust('stack').shape('smooth');
        chart.render();
    }

    StockageData4 = (comparedata, sign) => {
        try {
            var chart = new F2.Chart({
                id: sign,
                syncY: true,
                padding: ['auto', 'auto', 'auto', 16],
                pixelRatio: window.devicePixelRatio
            });
            chart.source(comparedata);

            if (this.state.type !== 'DAY') {
                chart.scale('date', {
                    type: 'cat',
                    tickCount: 6,
                    formatter: function formatter(value) {
                        let retval = value.replace(/\s*/g, "")//.substring(4, 20)
                        return retval
                    }
                })
            } else {
                chart.scale('date', {
                    type: 'timeCat',
                    mask: 'MM-DD',
                    range: [0.07, 0.95],
                });
            }
            chart.tooltip({
                showCrosshairs: true,
                onShow: function onShow(ev) {
                    ev.items.pop(); // 将重复的去除
                    var items = ev.items;
                    items = items.splice(0, 1)
                    if (items && JSON.stringify(items) !== '[]') {
                        items.map((val, ind) => {
                            items[ind].name = items[ind].name //=== 'value' ? '开机时间' : '平均开机时间';
                            items[ind].value = items[ind].value;
                        })
                    }
                }
            });
            chart.axis('平均开机时间', false);
            chart.axis('开机时间', {
                label: function label(text, index, total) {
                    var cfg = {
                        textAlign: 'start',
                        top: true,
                        text: text
                    };

                    return cfg;
                }
            });
            chart.interval().position('date*开机时间').color('#489304');
            chart.line().position('date*平均开机时间').color('#FF00FF').shape('smooth');
            chart.point().position('date*平均开机时间').style({
                stroke: '#FF00FF',
                fill: '#fff',
                lineWidth: 2
            });
            chart.render();
        } catch (error) {
            console.error(error.message)
            console.error(error.stack)
        }
    }

    StockageData5 = (data) => {
        try {
        console.log("进入渲染：", data)
        var legendItems = [{
            name: '维修时长（小时）',
            marker: 'square',
            fill: '#108ee9',
            checked: true
          }, {
            name: '维修次数',
            marker: function marker(x, y, r, ctx) {
              ctx.lineWidth = 1;
              ctx.strokeStyle = ctx.fillStyle;
              ctx.moveTo(x - r - 3, y);
              ctx.lineTo(x + r + 3, y);
              ctx.stroke();
              ctx.arc(x, y, r, 0, Math.PI * 2, false);
              ctx.fill();
            },
            fill: '#000',
            checked: true
        }];
          var chart = new F2.Chart({
            id: 'maintainrecord',
            pixelRatio: window.devicePixelRatio,
            padding: ['auto', 'auto', 90, 'auto']
          });
          chart.source(data, 
            {
            maintaintime: {
              alias: '维修时长'
            },
            maintaincount: {
              alias: '维修次数'
            }
          }
          );
          if (this.state.type !== 'DAY') {
            chart.scale('date', {
                type: 'cat',
                tickCount: 5,
                formatter: function formatter(value) {
                    let retval = value.substring(2,20)
                    return retval
                }
            })
        } else {
            chart.scale('date', {
                type: 'timeCat',
                mask: 'MM-DD',
                tickCount: 5,
                range: [0.07, 0.95],
            });
        }
          chart.axis('maintaincount', {
            grid: null,
            label: function label() {
                var cfg = {};
                  cfg.fill = '#000';
                return cfg;
              }
          });
         
          chart.axis('maintaintime', {
            label: function label() {
                var cfg = {};
                  cfg.fill = ' #108ee9';
                return cfg;
              }
          });

          // 自定义图例内容以及交互行为
          chart.legend({
            custom: true,
            items: legendItems,
          });
        
          chart.interval().position('date*maintaintime').color('#108ee9');
          chart.line().position('date*maintaincount').color('#000');
          chart.point().position('date*maintaincount').color('#000');
          chart.render();
        } catch (error) {
            console.error(error.message)
            console.error(error.stack)
        }
    }

    macfilter = (sv, type) => {
        let rv = [];
        let rvcondtion = false;
        let cvcondtion = false;
        let rvc = 0;
        let cvc = 0;
        if (JSON.stringify(sv) === '{}' || JSON.stringify(sv) === '[]')
            return rv;
        sv.forEach((i) => {
            rvcondtion = false;
            if ("" != i.usetype && (0 == type)) {
                rv.forEach((j) => {
                    if (i.usetype == j.value) {
                        rvcondtion = true;
                        cvcondtion = false;
                        j.children.forEach((k) => {
                            if (i.macnum == k.value) {
                                cvcondtion = true;
                                return false;
                            }
                        });
                        if (!cvcondtion) {
                            cvc = j.children.length;
                            j.children[cvc] = { value: i.macnum, label: i.macnum };
                        }
                        return;
                    }
                });
                if (!rvcondtion) {
                    rvc = rv.length;
                    rv[rvc] = { value: i.usetype, label: i.usetype };
                    rv[rvc].children = [];
                    rv[rvc].children[0] = { value: i.macnum, label: i.macnum };
                }
            }
            if ("" != i.usetype && (1 == type && 1 == i.inused)) {
                rv.forEach((j) => {
                    if (i.macnum == j.value) {
                        rvcondtion = true;
                        return;
                    }
                });
                if (!rvcondtion) {
                    rvc = rv.length;
                    rv[rvc] = { value: i.macnum, label: i.macnum };
                }
            }

        });
        return rv;
    }

    //选出指定参数pv的数据
    paraFilter = (datalist, para) => {
        var data = datalist;
        if (data.length > 0)
            data = data.filter((element, index, array) => {
                return element.fn == para;
            })
        data = data.length > 0 ? data : [{ "fn": "", "fv": "" }]
        // console.log(data)
        return data;
    }

    //显示所有动态变量
    detail = (bill) => {
        let item = bill;
        // console.log(item)
        if (item) {
            return (
                item.map((dtl, idx) => {
                    if (idx % 3 == 0) {
                        return (
                            <div key={idx}>
                                <WhiteSpace size="lg" />
                                <Flex>
                                    <Flex.Item >
                                        <div style={{ fontSize: '20px', color: '#111E27', textAlign: "center" }}>
                                            <font>
                                                {item.length > idx ? typeof (item[idx].fv) === 'string' ? item[idx].fv === "" ? '无' : item[idx].fv : Format.FormatUtil(item[idx].fv, 2) : ''}
                                            </font>
                                            <font size="1" color="#8B8B7A" style={{ float: "center" }}>{item.length > idx ? (item[idx].id != null && item[idx].standard != null) ? " " + item[idx].standard : "" : ""}</font>
                                        </div>
                                        <div style={{ textAlign: 'center' }}><span style={{ fontSize: '13px', borderTop: '1px solid #ddd' }}>
                                            <font color="#0000FF">{item.length > idx ? item[idx].fname : ''}</font>
                                        </span></div>
                                    </Flex.Item>
                                    <Flex.Item >
                                        <div style={{ fontSize: '20px', color: '#111E27', textAlign: "center" }}>
                                            <font>
                                                {item.length > idx + 1 ? typeof (item[idx + 1].fv) === 'string' ? item[idx + 1].fv === "" ? '无' : item[idx + 1].fv : Format.FormatUtil(item[idx + 1].fv, 2) : ''}
                                            </font>
                                            <font size="1" color="#8B8B7A" style={{ float: "center" }}>{item.length > idx + 1 ? (item[idx + 1].id != null && item[idx + 1].standard != null) ? " " + item[idx + 1].standard : "" : ""}</font>
                                        </div>
                                        <div style={{ textAlign: 'center' }}><span style={{ fontSize: '13px', borderTop: '1px solid #ddd' }}>
                                            <font color="#0000FF">{item.length > idx + 1 ? item[idx + 1].fname : ''}</font>
                                        </span></div>
                                    </Flex.Item>
                                    <Flex.Item>
                                        <div style={{ fontSize: '20px', color: '#111E27', textAlign: "center" }}>
                                            <font>
                                                {item.length > idx + 2 ? typeof (item[idx + 2].fv) === 'string' ? item[idx + 2].fv === "" ? '无' : item[idx + 2].fv : Format.FormatUtil(item[idx + 2].fv, 2) : ''}
                                            </font>
                                            <font size="1" color="#8B8B7A" style={{ float: "center" }}>{item.length > idx + 2 ? (item[idx + 2].id != null && item[idx + 2].standard != null) ? " " + item[idx + 2].standard : "" : ""}</font>
                                        </div>
                                        <div style={{ textAlign: 'center' }}><span style={{ fontSize: '13px', borderTop: '1px solid #ddd' }}>
                                            <font color="#0000FF">{item.length > idx + 2 ? item[idx + 2].fname : ''}</font>
                                        </span></div>
                                    </Flex.Item>
                                </Flex>
                            </div>
                        )
                    }
                })
            )
        }
    }

    //选出机台所有需动态显示参数
    pavFilter = (datalist) => {
        var data = datalist;
        if (data && data.length > 0)
            data = data.filter((element, index, array) => {
                return element.fname !== null;
            })
        data = (data && data.length) ? data : []
        // console.log(data)
        return data;
    }

    //选出指定机台dev的各项参数
    devFilter = (datalist, dev) => {
        var data = datalist;
        if (data && data.length > 0)
            data = data.filter((element, index, array) => {
                return element.devcode == dev;
            })
        // console.log(data);
        // console.log(this.pavFilter(data));
        return data;
    }

    ButtonOnChange = (value) => {
        if (value !== this.state.type) {
            let tag = this.state.tag
            tag = {}
            tag[value] = 'primary'
            this.setState({
                tag: tag,
                type: value,
                typech: value === 'DAY' ? '日' : value === 'WEEK' ? '周' : '月',
                // toasthide: '',
            }, () => {
                this.getOpenChartData()
                this.getAlertChartData()
                this.loadData_t(this.state.code);
            });
        }
    };

    onAccordionChange = (key) => {
        console.log(key)
        this.setState({
            openAccordion: key
        }, () => {
            this.state.openAccordion.map((val) => {
                console.log(val)
                if (val === 'open') {
                    this.chartRender();
                } if(val === 'alert') {
                    this.alertChartRender();
                }
                else{
                    this.maintainChartRender();
                }
            })
        });
    }

    getColor = (value) => {
        if (value === '3' || value === 3) {//警报
            return '#d02a0c'
        } else if (value === '2' || value === 2) {//待机
            return '#d2a911'
        } else if (value === '1' || value === 1) {//开机
            return '#468a0a'
        } else if (value === '0' || value === 0) {//关机
            return '#818181'
        }
    }
    render() {
        let itemcss = {
            height: '35px',
        }
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: '#F5F5F9',
                    height: 4,
                    borderTop: '1px solid #ECECED',
                    borderBottom: '1px solid #ECECED',
                }}
            />
        );

       const reprow = (rowData, sectionID, rowID) => {
        return (
            <div key={rowID} >
            <List className="am-list-content">
            <Item multipleLine onClick={() => { 
                console.log("rowData", rowData)
                if (null != rowID && '' != rowID) {
                    const { history } = this.props;
                    history.push({
                        pathname: '/devrepairsdetail',
                        state: {
                            func: this.state.func,//没有这段代码，页面不能跳转
                            rowData: rowData,
                        }
                    });
                }
            }} 
            //修改对应的一个字段名
            
           // extra={rowData.ExtraDatas.repstatusname}
            >
            {/* <div style={{overflow:'hidden', textOverflow:'ellipsis' }}>维修单号:{rowData.billno}</div> */}
            报修单号：{rowData.code}
            <Flex>
            <Flex.Item  style={{ flex: '0.4' }} ><Brief>报修人员:{rowData.ExtraDatas.repairsname}</Brief></Flex.Item>
            <Flex.Item  style={{ flex: '0.6' }}><Brief>报修状态:{rowData.ExtraDatas.repstatusname}</Brief></Flex.Item>
            </Flex>
            <Flex>
                <Flex.Item>
                    <Brief><Item wrap style={{ paddingLeft: 0 }}><div style={{ color: "#8E8E8E", fontSize: '15px' }}>问题描述:{rowData.trouble}</div></Item></Brief>
                </Flex.Item>
            </Flex>
            
            <Brief>单据日期:{this.formatDate(rowData.createtime)}</Brief>

            </Item>
            </List>
            </div>
        );
    };
        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID} >
                    <List className="am-list-content">
                        <Item multipleLine onClick={() => {
                            console.log("rowData", rowData)
                            if (null != rowID && '' != rowID) {
                                const { history } = this.props;
                                history.push({
                                    pathname: '/maintaindetail',
                                    state: {
                                        func: this.state.func,//没有这段代码，页面不能跳转
                                        rowData: rowData,
                                    }
                                });
                            }
                        }}
                          //  extra={rowData.ExtraDatas.staconname}
                            >
                            {/* <div style={{overflow:'hidden', textOverflow:'ellipsis' }}>维修单号:{rowData.billno}</div> */}
                            维修单号：{rowData.billno}
                            <Flex>
                            <Flex.Item style={{ flex: '0.4' }}><Brief>维修人员:{rowData.ExtraDatas.employeename}</Brief></Flex.Item>
                            <Flex.Item style={{ flex: '0.6' }}><Brief>维修状态:{rowData.ExtraDatas.staconname}</Brief></Flex.Item>
                            </Flex>
                            <Flex>
                                <Flex.Item>
                                    <Brief><Item wrap style={{ paddingLeft: 0 }}><div style={{ color: "#8E8E8E", fontSize: '15px' }}>问题描述:{rowData.trouble}</div></Item></Brief>
                                </Flex.Item>
                            </Flex>
                            <Brief>单据日期:{this.formatDate(rowData.createtime)}</Brief>

                        </Item>
                    </List>
                </div>
            );
        };
        return (
            <div>
             <Tabs tabs={tabs} initialPage={this.state.ifin?this.state.i['value']['tabsselect']:0} animated={false} useOnPan={false} onTabClick={(tabs,index)=>{
                //  if(index==1 || index==2)
                //  {
                //     {Toast.info('加载中...', 0.4, () => {this.setState({isloading:false,show:true})})}
                //  }
                //保存条件S
                window.conditionarr.map((data=>{
                    // keys.push()
                    if(data['key']==='macstatusnowinfo'){
                        this.state.ifin=true
                        this.state.i=data
                        this.setState({ifin:true,i:data})
                        return
                    }
                }))
                if(this.state.ifin){
                    this.state.i['value']['tabsselect']=index
                    this.state.i['value']['deviceid']=this.state.deviceid
                    this.state.i['value']['devicecode']=this.state.code
                    //this.state.i['value']['page']=this.state.page
                }
                else{
                    window.conditionarr.push({key:'macstatusnowinfo',
                    value:{tabsselect:index,deviceid:this.state.deviceid,page:1,devicecode:this.state.code       
                    }})
                    //保存条件S
                    window.conditionarr.map((data=>{
                    // keys.push()
                    if(data['key']==='macstatusnowinfo'){
                        this.state.ifin=true
                        this.state.i=data
                        this.setState({ifin:true,i:data})
                        return
                    }
                    }))
                }

                //End  
                this.onTabClick(index)}}>
            <div>
                <div id='topdiv' />
                <WhiteSpace size="md" />
                <WingBlank size="md">
                    <Card>
                        <Card.Header
                            title={"机台" + this.state.code}
                            extra={<span>
                                <div style={{ float: 'left', color: '#000000', marginRight: '5px' }}>状态:</div>
                                <div style={{ float: 'left', background: this.getColor(this.state.status), width: '20px', heigth: '20px', borderRadius: '50%', color: this.getColor(this.state.status) }}>a</div>
                            </span>}
                        />
                        <Card.Body >
                            {
                                this.state.status && this.state.status === '3' ?
                                    this.state.alertstatus && this.state.alertstatus.length > 0 ? this.state.alertstatus.map(dataItem =>
                                        <div key={dataItem.devcode}>
                                            <div style={{ marginTop: 2 }}>警报名称：{dataItem.alertname}</div>
                                            <div>开始时间：{dataItem.creatime} </div>
                                            <div>持续时间(小时)：{dataItem.livetime}</div>
                                            <div>当前状态：{dataItem.levelname}</div>
                                            <br />
                                        </div>
                                    ) : "没有数据"

                                    : this.state.singledev && this.state.singledev.length > 0 ? this.state.singledev.map(dataItem =>
                                        <div key={dataItem.devcode}>
                                            <div style={{ marginTop: 2 }}>开始时间：{dataItem.stime} </div>
                                            <div>持续时间(小时)：{dataItem.delaytime}</div>
                                            <br />
                                        </div>
                                    ) : "没有数据"
                            }
                            {
                                this.state.status !== '0' && this.state.status !== 0 ?
                                    <div style={{ marginBottom: '10px', borderTop: '1px dashed #c4ccd4', paddingTop: '5px' }}>
                                        {/* <div style={{ fontSize: '15px', color: '#111E27', fontWeight: "bold", left: '20px' }}>机台参数</div> */}
                                        <div>
                                            {this.detail(this.state.macstatus_para)}
                                        </div>
                                    </div>
                                    : ''
                            }
                        </Card.Body>
                    </Card>
                </WingBlank>
                <WhiteSpace size="md" />
                <WingBlank size="md">
                    <div style={{ height: 'auto', textAlign: 'center' }}>
                        <Flex>
                            <Flex.Item>
                                <Button key='DAY' type={this.state.tag['DAY']} size="small" onClick={(e) => this.ButtonOnChange('DAY')} >日</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button key='WEEK' type={this.state.tag['WEEK']} size="small" onClick={(e) => this.ButtonOnChange('WEEK')}>周</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button key='MONTH' type={this.state.tag['MONTH']} size="small" onClick={(e) => this.ButtonOnChange('MONTH')}>月</Button>
                            </Flex.Item>
                        </Flex>
                    </div>
                </WingBlank>
                <WhiteSpace size="md" />
                <WingBlank size="md">
                    <Accordion activeKey={this.state.openAccordion} onChange={this.onAccordionChange}>
                        <Accordion.Panel key='alert' header="警报">
                            {this.state.alertcookiedata && JSON.stringify(this.state.alertcookiedata) !== '[]' ?
                                <div>
                                    <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                        {this.state.code + "机台" + this.state.typech + "警报占比"}
                                    </div>
                                    <div style={{ width: "100%", height: "100%" }}>
                                        <canvas id='alertcookiedata' style={{ width: "100%", height: "90%" }}></canvas>
                                    </div>
                                </div>
                                : 
                                <div>
                                <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                    {this.state.code + "机台" + this.state.typech + "警报占比"}
                                </div>
                                <div style={{ textAlign:'center' }}>
                                   <p>暂无数据</p>
                                </div>
                             </div>
                            }
                            {this.state.alertmacdata && JSON.stringify(this.state.alertmacdata) !== '[]' ?
                                <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                    <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                        {this.state.code + "机台与所有机台最近" + this.state.typech + "警报数据对比"}
                                    </div>
                                    <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                                        <canvas id='alertmacdata' style={{ width: "100%", height: "100%" }}></canvas>
                                    </div>
                                </div>
                                : 
                                <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                    {this.state.code + "机台与所有机台最近" + this.state.typech + "警报数据对比"}
                                </div>
                                <div style={{ textAlign:'center' }}>
                                   <p>暂无数据</p>
                                </div>
                             </div>
                            }

                            {this.state.alertmactopdata && JSON.stringify(this.state.alertmactopdata) !== '[]' ?
                                <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                    <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                        {this.state.code + "机台" + this.state.typech + "警报分布"}
                                    </div>
                                    <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                                        <canvas id='alertmactopdata' style={{ width: "100%", height: "100%" }}></canvas>
                                    </div>
                                </div>
                                : 
                                <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                    {this.state.code + "机台" + this.state.typech + "警报分布"}
                                </div>
                                <div style={{ textAlign:'center' }}>
                                   <p>暂无数据</p>
                                </div>
                            </div>
                            }
                            {this.state.alerttopdata && JSON.stringify(this.state.alerttopdata) !== '[]' ?
                                <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                    <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                        {"所有机台" + this.state.typech + "警报分布"}
                                    </div>
                                    <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                                        <canvas id='alerttopdata' style={{ width: "100%", height: "100%" }}></canvas>
                                    </div>
                                </div>
                                : 
                                <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                    {"所有机台" + this.state.typech + "警报分布"}
                                </div>
                                <div style={{ textAlign:'center' }}>
                                   <p>暂无数据</p>
                                </div>
                            </div>
                            }
                        </Accordion.Panel>
                        <Accordion.Panel key='open' header="开关机">
                            {
                                this.state.curmacstatus && JSON.stringify(this.state.curmacstatus) !== '[]' ?
                                    <div>
                                        <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                            {this.state.code + '今' + this.state.typech.substring(1, 4) + "开机时间占比"}
                                        </div>
                                        <div>
                                            <div style={{ width: "100%", height: "100%" }}>
                                                <canvas id='curmacstatus' style={{ width: "100%", height: "90%" }}></canvas>
                                            </div>
                                        </div>
                                    </div>
                                    : 
                                    <div>
                                    <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                        {this.state.code + '今' + this.state.typech.substring(1, 4) + "开机时间占比"}
                                    </div>
                                    <div>
                                    <div style={{  textAlign:'center'}}>
                                         <p>暂无数据</p>
                                    </div>
                                    </div>
                                   </div>
                            }
                            {
                                this.state.linedata && JSON.stringify(this.state.linedata) !== '[]' ?
                                    <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                        <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                            {this.state.code + "最近" + this.state.typech + "开关机数据"}
                                        </div>
                                        <div style={{ width: "100%", height: "auto", margin: "0 auto" }}>
                                            <canvas id='linedata' style={{ width: "100%", height: "100%" }}></canvas>
                                        </div>
                                    </div>
                                    : 
                                    <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                    <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                        {this.state.code + "最近" + this.state.typech + "开关机数据"}
                                    </div>
                                    <div style={{  textAlign:'center'}}>
                                         <p>暂无数据</p>
                                    </div>
                                   </div>
                            }
                            {
                                this.state.avglinedata && JSON.stringify(this.state.avglinedata) !== '[]' ?
                                    <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                        <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                            {"所有机台最近" + this.state.typech + "平均开关机数据"}
                                        </div>
                                        <div style={{ width: "100%", height: "auto", margin: "0 auto" }}>
                                            <canvas id='avglinedata' style={{ width: "100%", height: "100%" }}></canvas>
                                        </div>
                                    </div>
                                    : 
                                    <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                    <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                        {"所有机台最近" + this.state.typech + "平均开关机数据"}
                                    </div>
                                    <div style={{  textAlign:'center'}}>
                                         <p>暂无数据</p>
                                    </div>
                                 </div>
                            }
                            {
                                this.state.comparedata && JSON.stringify(this.state.comparedata) !== '[]' ?
                                    <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                        <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                            {this.state.code + "机台与所有机台" + this.state.typech + "平均数据对比"}
                                        </div>
                                        <div style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                                            <canvas id='comparedata' style={{ width: "100%", height: "100%" }}></canvas>
                                        </div>
                                    </div>
                                    : 
                                    <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #c4ccd4' }}>
                                    <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                        {this.state.code + "机台与所有机台" + this.state.typech + "平均数据对比"}
                                    </div>
                                    <div style={{ textAlign:'center'}}>
                                        <p>暂无数据</p>
                                </div>
                                </div>
                            }
                        </Accordion.Panel>
                        <Accordion.Panel key='maintain' header="维修" >
                            {
                                this.state.maintaintime && JSON.stringify(this.state.maintaintime) !== '[]'&& JSON.stringify(this.state.maintaintime) !== '{}' ?
                                    <div>
                                        <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                            {this.state.code  + this.state.typech + "维修次数时长"}
                                        </div>
                                        <div>
                                            <div style={{ width: "100%", height: "100%" }}>
                                                <canvas id='maintainrecord' style={{ width: "100%", height: "90%" }}></canvas>
                                            </div>
                                        </div>
                                    </div>
                                     : 
                                     <div>
                                     <div style={{ fontSize: '15px', padding: '9px 17px', color: '#000', left: '50px', display: 'flex' }}>
                                         {this.state.code  + this.state.typech + "维修次数时长"}
                                     </div>
                                     <div>
                                     <div style={{ textAlign:'center'}}>
                                        <p>暂无数据</p>
                                     </div>
                                     </div>
                                 </div>
                            }
                        </Accordion.Panel>
                    </Accordion>
                </WingBlank>
                <WhiteSpace size="md" />
                <div id='gotop'
                    style={{ width: '40px', height: '40xp', position: 'fixed', right: '5%', top: '94%' }}
                    onClick={() => { document.getElementById('topdiv').scrollIntoView(true) }}
                >
                    <img src={require('../../images/upcircle.png')} style={{ width: '100%', height: '100%' }} />
                </div>          
            </div>
            <div>
                <WhiteSpace size="md" />
                <WingBlank size="sm">
                <div style={{paddingLeft:'10px',fontSize:'20px'}}>
                机台: {this.state.code}
                </div> 
                <WhiteSpace size="md" />    
                { 
                this.state.data.length !=0 && this.state.show ?
                <ListView className="am-list-header"
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    //renderHeader={() => <span><h3>品质警报</h3><div >信息总数：{this.state.datalength} 未读信息数：{this.state.arraylength}</div></span>}
                    renderRow={reprow}
                    renderSeparator={separator}
                    className="am-list"
                    initialListSize={40}
                    // useBodyScroll
                    onScroll={() => { console.log('scroll'); }}
                    scrollRenderAheadDistance={500}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                />:this.state.show?
                <div style={{paddingLeft:'10px'}}>无报修纪录</div>:null
                }
                </WingBlank>
            </div>
            <div >
                <WhiteSpace size="md" />      
                <WingBlank size="md"> 
                <div style={{paddingLeft:'10px',fontSize:'20px'}}>
                机台: {this.state.code}
                </div> 
                <WhiteSpace size="md" />    
                { 
                this.state.data.length !=0 && this.state.show?
                <ListView className="am-list-header"
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    //renderHeader={() => <span><h3>品质警报</h3><div >信息总数：{this.state.datalength} 未读信息数：{this.state.arraylength}</div></span>}
                    renderRow={row}
                    renderSeparator={separator}
                    className="am-list"
                    initialListSize={40}
                    // useBodyScroll
                    onScroll={() => { console.log('scroll'); }}
                    scrollRenderAheadDistance={500}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                />:this.state.show?
                <div style={{paddingLeft:'10px'}}>无维修纪录</div>:null
                }
                
            </WingBlank>

            </div>
            </Tabs>
        </div>
        );
        
    }
}