xlyErp / xlyUmi

/* eslint-disable object-curly-newline */
import React, { Component } from 'react';
import { message, Progress } from 'antd-v4';
import baseChar from '../Common/baseChar'; /* 获取图表配置及数据 */
import styles from './index.less';
import Bar from '../Charts/Bar';
import Columnar from '../Charts/Columnar';
import ColumnarGroup from '../Charts/ColumnarGroup';
import BrokenLine from '../Charts/BrokenLine';
import WaterWave from '../Charts/WaterWave';
import Gauge from '../Charts/Gauge';
import ColumnarStack from '../Charts/ColumnarStack';
import PieGroup from '../Charts/PieGroup';
import Pie from '../Charts/Pie';
import TimeLineGroup from '../Charts/TimeLineGroup';
import ColorBlock from '../Charts/ColorBlock';
import * as commonUtils from '../../utils/utils';
import CommonList from '../Common/CommonList';
import Gantt from '../Charts/Gantt';
import commonConfig from '../../utils/config';

const data = {
  data: [
    {
      id: 1, text: 'Task #1', start_date: '15-04-2019', duration: 3, progress: 0.6,
    },
    {
      id: 2, text: 'Task #2', start_date: '18-04-2019', duration: 3, progress: 0.4,
    },
  ],
  links: [
    {
      id: 1, source: 1, target: 2, type: '0',
    },
  ],
};
const zoom = 'Hours';

class CommonAuto extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentWillMount() {
    setTimeout(() => {
      // console.log('初始时间:', new Date());
      this.timer = setInterval(() => {
        try {
          console.log('定时时间:', new Date(), '设定间隔:', this.props.dRefreshTime);
          const pageNum = commonUtils.isEmpty(this.props.pageNum) ? 2 : this.props.pageNum + 1;
          this.props.onGetData({ ...this.props }, pageNum);
        } catch (e) {
          console.log('error', e.message);
        }
      }, commonUtils.isNotEmptyNumber(this.props.dRefreshTime) && this.props.dRefreshTime !== 0 ? this.props.dRefreshTime : 100000);
    }, 8000);

    /* 获取顶元素配置的刷新时间 */
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ ...nextProps });
  }
  handleInitLabelData = () => {
    const tableData = [{ iOrder: 1,
      sChinese: '8号模切机',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "flex": "1","borderLeft": "1px solid #fff",  "backgroundColor": "#E17D31" }' }, { iOrder: 2,
      sChinese: '9号模切机',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "flex": "1","borderLeft": "1px solid #fff",  "backgroundColor": "#E17D31" }' }, { iOrder: 3,
      sChinese: '10号模切机',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "flex": "1","borderLeft": "1px solid #fff",  "backgroundColor": "#07A346" }' }, { iOrder: 4,
      sChinese: '11号模切机',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "flex": "1","borderLeft": "1px solid #fff",  "backgroundColor": "#E17D31" }' }];
    return tableData;
  }
  handleInitLabelData5 = () => {
    const tableData = [{ iOrder: 1,
      sChinese: '工单',
      sName: '工单',
      sType: 'sLable',
      sTypeValue: '{ "width": "20%" }' }, { iOrder: 2,
      sChinese: 'DY19080045-1',
      sName: 'DY',
      sType: 'sLable',
      sTypeValue: '{ "width": "50%" }' }, { iOrder: 3,
      sChinese: '90',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "width": "30%",  "color": "#ff0000" }' }];
    return tableData;
  }
  handleInitLabelData61 = () => {
    const tableData = [{ iOrder: 1,
      sChinese: '班组数据',
      sName: '班组数据',
      sType: 'sLable',
      sTypeValue: '{ "width": "20%" }' }];
    return tableData;
  }
  handleInitLabelData62 = () => {
    const tableData = [{ iOrder: 2,
      sChinese: '今日数据',
      sName: 'DY',
      sType: 'sLable',
      sTypeValue: '{ "textAlign": "center", "fontSize": "1em" }' }, { iOrder: 3,
      sChinese: '合计 90',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "fontSize": "0.85em" }' }, { iOrder: 3,
      sChinese: '计划达成 3/4',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "fontSize": "0.85em" }' }, { iOrder: 3,
      sChinese: '设备稼动 60%',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "fontSize": "0.85em" }' }, { iOrder: 3,
      sChinese: '速度稼动 100%',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "fontSize": "0.85em" }' }, { iOrder: 3,
      sChinese: '生产异常 0起',
      sName: 'title',
      sType: 'sLable',
      sTypeValue: '{ "fontSize": "0.85em" }' }];
    return tableData;
  }
  /* 通用自定义模板1 初始化数据 */
  handleInitLabelDataT1 = (props) => {
    const tableData = [];
    const { labelConfigData } = this.state;
    const { childConfig } = props;
    if (commonUtils.isNotEmptyArr(labelConfigData) && commonUtils.isNotEmptyArr(childConfig)) {
      childConfig.forEach((child) => {
        const addState = {};
        addState.sType = 'sLable';
        addState.sTypeValue = '';
        const { sName, showName } = child;
        if (sName === 'noQuery') {
          addState.sChinese = showName;
        } else {
          const filterData = labelConfigData.filter(item => item.sName === sName);
          if (commonUtils.isNotEmptyArr(filterData)) {
            addState.sChinese = filterData[0].sValue;
          }
        }
        tableData.push(addState);
      });
    }
    return tableData;
  }

  handleChar = (props) => {
    const { sCharType, child, iHeight, sStyle } = props;
    let content = '';
    if (commonUtils.isNotEmptyObject(child)) {
      child.height = props.iHeight;
      const style = {
        color: '#ffffff',
        fontSize: '12px',
        textAlign: 'left',
      };
      let sStyleObject = {};
      if (commonUtils.isNotEmptyObject(sStyle)) {
        try {
          sStyleObject = JSON.parse(sStyle);
          if (commonUtils.isNotEmptyObject(sStyleObject.color)) {
            style.color = sStyleObject.color;
          } if (commonUtils.isNotEmptyNumber(sStyleObject.fontSize && commonUtils.isNum(sStyleObject.fontSize))) {
            style.fontSize = sStyleObject.fontSize;
          } if (commonUtils.isNotEmptyObject(sStyleObject.textAlign)) {
            style.textAlign = sStyleObject.textAlign;
          }
        } catch (e) {
          message.error(`JSON数据配置错误！${e.message}`);
        }
      }
      child.style = style;
      child.projectName = 'commonAuto';
      if (sCharType === 'sBar') {
        /* 横向条形图 */
        content = <Bar {...child} />;
      } else if (sCharType === 'sColumnar') {
        /* 纵向条形图 */
        content = <Columnar {...child} />;
      } else if (sCharType === 'sColumnarGroup') {
        /* 纵向条形图 */
        content = <ColumnarGroup {...child} />;
      } else if (sCharType === 'sBrokenLine') {
        content = <BrokenLine {...child} />;
      } else if (sCharType === 'sWaterWave') {
        content = <WaterWave {...child} />;
      } else if (sCharType === 'sGauge') {
        content = <Gauge {...child} />;
      } else if (sCharType === 'sColumnarStack') {
        content = <ColumnarStack {...child} />;
      } else if (sCharType === 'sPieGroup') {
        content = <PieGroup {...child} />;
      } else if (sCharType === 'sPie') {
        content = <Pie {...child} />;
      } else if (sCharType === 'TimeLineGroup') {
        content = <TimeLineGroup {...child} />;
      } else if (sCharType === 'ColorBlock') {
        content = <ColorBlock {...child} />;
      } else if (sCharType === 'Gantt') {
        content = <div className="gantt-container" style={sStyleObject}><Gantt tasks={data} zoom={zoom} /></div>;
      }
    } else if (sCharType === 'commonList') {
      const routing = { pathname: '/commonAuto' };
      const listProps = { ...this.props, ...child, routing, formRoute: 'commonList', isSmall: true, iHeight, sModelsId: props.sActiveId, pageNum: this.state.pageNum, onToFirst: this.props.onToFirst };
      content = <div className="commonRollChar"><CommonList {...listProps} /></div>;
    } else if (sCharType === 'sLabel') {
      content = this.handleGetLabel(props);
    } else if (sCharType === 'Progress') {
      const processData = this.handleGetProgress(props);
      if (commonUtils.isNotEmptyArr(processData)) {
        const processObj = processData[0];
        const percent = commonUtils.isNotEmptyObject(processObj.percent) ? processObj.percent : 0;
        const status = commonUtils.isNotEmptyObject(processObj.status) ? processObj.status : 'active';
        const strokeColor = commonUtils.isNotEmptyObject(child.strokeColor) ? processObj.status : '#2db7f5';
        // content = <div className="processDiv"> <Progress percent={percent} status={status} strokeColor={strokeColor} /></div>;
        content = <div className="processDiv"> <Progress percent={percent} status={status} strokeColor={strokeColor} strokeWidth={14} /></div>;
      }
    }
    return content;
  };

  handleGetAllDiv = () => {
    const { charConfigAndData } = this.state; /* 加载自定义界面所有配置 */
    const rootDiv = commonUtils.isNotEmptyArr(charConfigAndData) ? charConfigAndData.filter(item => item.sCharType === 'Div' && commonUtils.isEmpty(item.sCharParentId)) : []; /* 找到所有一级Div 一级没有sCharParenetId */
    const elements = [];
    if (commonUtils.isNotEmptyArr(rootDiv)) {
      rootDiv.forEach((itemChar) => {
        const { sId, sStyle } = itemChar;
        let { sEnglish } = itemChar;
        sEnglish = commonUtils.isNotEmptyObject(sEnglish) ? sEnglish : '';
        let sStyleObject;
        if (commonUtils.isNotEmptyObject(sStyle)) {
          sStyleObject = JSON.parse(sStyle);
        }
        elements.push(<div style={sStyleObject} className={sEnglish}>{this.handleGetChildDiv(sId)}</div>);
      });
    }
    return elements;
  };
  handleGetChildDiv = (sParentId) => {
    const { charConfigAndData, labelConfigData, location, sBackgroundImage } = this.state; /* 加载自定义界面配置 */
    const childDiv = commonUtils.isNotEmptyArr(charConfigAndData) ? charConfigAndData.filter(item => item.sCharParentId === sParentId) : [];
    const elements = [];
    let backgroundImage = '';
    let mybackground = '';
    if (commonUtils.isNotEmptyObject(sBackgroundImage)) {
      backgroundImage = `${commonConfig.server_host}file/download?savePathStr=${sBackgroundImage}&sModelsId=100`;
      mybackground = `url(${backgroundImage}) no-repeat left top`;
    }
    childDiv.forEach((childChar) => {
      const { sId, sStyle, sCharType } = childChar;
      let { sEnglish } = childChar;
      sEnglish = commonUtils.isNotEmptyObject(sEnglish) ? sEnglish : '';
      let sStyleObject;
      if (commonUtils.isNotEmptyObject(sStyle)) {
        sStyleObject = JSON.parse(sStyle);
      }
      /* 内容区根据上传的图片设置背景 */
      if (sEnglish === 'mybg') {
        sStyleObject.background = mybackground;
        sStyleObject.backgroundSize = '100% 99%';
      }

      if (sCharType === 'Div') {
        if (commonUtils.isNotEmptyObject(location.pathname)) {
          /* 通过接口返回的背景颜色，是否显示 控制div的样式 */
          if (commonUtils.isNotEmptyArr(labelConfigData)) {
            if (commonUtils.isNotEmptyObject(sStyleObject)) {
              if (commonUtils.isNotEmptyObject(sStyleObject.backgroundColor)) {
                const backgroundColorValue = sStyleObject.backgroundColor;
                const iIndex = labelConfigData.findIndex(item => item.sName === backgroundColorValue);
                if (iIndex > -1) {
                  sStyleObject.backgroundColor = labelConfigData[iIndex].sValue;
                }
              }
              if (commonUtils.isNotEmptyObject(sStyleObject.display)) {
                const displayValue = sStyleObject.display;
                const iIndex = labelConfigData.findIndex(item => item.sName === displayValue);
                if (iIndex > -1) {
                  const sDisplay = labelConfigData[iIndex].sValue;
                  if (sDisplay === 'none') { /* 隐藏警报灯 */
                    sStyleObject.display = labelConfigData[iIndex].sValue;
                  } else if (sDisplay === 'block') { /* 显示警报灯 */
                    sStyleObject.display = labelConfigData[iIndex].sValue;
                  }
                }
              }
            }
            /* 动态加载背景图 */
            if (commonUtils.isNotEmptyObject(sEnglish) && sEnglish.includes('#')) {
              const iIndex = labelConfigData.findIndex(item => item.sName === sEnglish);
              if (iIndex > -1) {
                sEnglish = labelConfigData[iIndex].sValue;
              }
              // sEnglish = 'redMid';
            }
          }
        }
        elements.push(<div style={sStyleObject} className={sEnglish}>{this.handleGetChildDiv(sId)}</div>);
      } else {
        elements.push(<div style={sStyleObject} className={sEnglish}>{this.handleChar(childChar)}</div>);
      }
    });
    return elements;
  };

  handleGetLabel = (props) => {
    const { showName } = props;
    let allData = [];
    if (showName.indexOf('Div-5') > -1) {
      allData = this.handleInitLabelData5();
    } else if (showName.indexOf('班组数据') > -1) {
      allData = this.handleInitLabelData61();
    } else if (showName.indexOf('今日数据') > -1) {
      allData = this.handleInitLabelData62();
    } else if (showName.indexOf('本月数据') > -1) {
      allData = this.handleInitLabelData62();
    } else if (showName.indexOf('Div-1') > -1) {
      allData = this.handleInitLabelData();
    } else {
      allData = this.handleInitLabelDataT1(props);
    }
    if (commonUtils.isNotEmptyArr(allData)) {
      const elements = [];
      allData.forEach((childChar) => {
        const { sChinese, sTypeValue } = childChar;
        let sStyle;
        if (commonUtils.isNotEmptyObject(sTypeValue)) {
          try {
            sStyle = JSON.parse(sTypeValue);
          } catch (e) {
            message.error(`JSON数据配置错误！${e.message}`);
          }
        }
        elements.push(<div style={sStyle}>{sChinese}</div>);
      });
      return elements;
    }
  };
  /* 从根元素存储过程数据集中取步骤条数据 */
  handleGetProgress = (props) => {
    const { labelConfigData } = this.state; /* 根元素存储过程数据集 */
    const { childConfig } = props;
    const tableData = [];
    if (commonUtils.isNotEmptyArr(labelConfigData) && commonUtils.isNotEmptyArr(childConfig)) {
      childConfig.forEach((child) => {
        const addState = {};
        const { sName } = child;
        if (sName !== 'noQuery') {
          const filterData = labelConfigData.filter(item => item.sName === sName);
          if (commonUtils.isNotEmptyArr(filterData)) {
            // eslint-disable-next-line prefer-destructuring
            const sValue = filterData[0].sValue;
            if (commonUtils.isNotEmptyObject(sValue)) {
              addState.sType = 'Progress';
              addState.percent = sValue;
            }
          }
        }
        tableData.push(addState);
      });
    }
    return tableData;
  };

  render() {
    return (
      <div className={styles.rootDiv} id="commonSreen" >
        {
          this.handleGetAllDiv()
        }
      </div>
    );
  }
}

export default baseChar(CommonAuto);