# react-router-auth

**Repository Path**: smdzy/react-router-auth

## Basic Information

- **Project Name**: react-router-auth
- **Description**: react 路由鉴权模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-09-11
- **Last Updated**: 2023-06-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 ### 模拟路由权限功能

import { Form, LoadIndicator } from 'devextreme-react';
import React, { useEffect, useRef, useState } from 'react';
import Style from './index.less';
import { formTittleToString } from '@/utils/func';

import moment from 'moment';
import { ButtonItem, SimpleItem } from 'devextreme-react/form';
import {
  Chart,
  CommonSeriesSettings,
  Legend,
  SeriesTemplate,
  Animation,
  ArgumentAxis,
  Tick,
  Title,
  ValueAxis,
  Tooltip,
  Series,
} from 'devextreme-react/chart';

import { getEquipmentStatusChange } from './service';
import { notifyError } from '@/utils/devExtremeUtils';

const dataSource = [
  {
    process: '工序1',
    start: '2021-12-01T07:00:00+08:00',
    end: '2021-12-02T06:59:59+08:00',
    status: 'ENG',
  },
  {
    process: '工序1',
    start: '2021-12-02T06:59:59+08:00',
    end: '2021-12-03T06:59:59+08:00',
    status: 'NST',
  },
  {
    process: '工序1',
    start: '2021-12-01T010:00:00+08:00',
    end: '2021-12-02T10:59:59+08:00',
    status: 'ENG',
  },
  {
    process: '工序1',
    start: '2021-12-03T06:59:59+08:00',
    end: '2021-12-04T06:59:59+08:00',
    status: 'PROD',
  },
  {
    process: '工序2',
    start: '2021-12-01T07:00:00+08:00',
    end: '2021-12-02T06:59:59+08:00',
    status: 'ENG',
  },
  {
    process: '工序2',
    start: '2021-12-02T06:59:59+08:00',
    end: '2021-12-03T06:59:59+08:00',
    status: 'NST',
  },
  {
    process: '工序2',
    start: '2021-12-03T06:59:59+08:00',
    end: '2021-12-04T06:59:59+08:00',
    status: 'PROD',
  },
  {
    process: '工序3',
    start: '2021-12-01T07:00:00+08:00',
    end: '2021-12-02T06:59:59+08:00',
    status: 'ENG',
  },
  {
    process: '工序3',
    start: '2021-12-02T06:59:59+08:00',
    end: '2021-12-03T06:59:59+08:00',
    status: 'NST',
  },
  {
    process: '工序3',
    start: '2021-12-03T06:59:59+08:00',
    end: '2021-12-04T06:59:59+08:00',
    status: 'PROD',
  },
];

const DeviceStatusHistory = () => {
  let initstart, initend;
  if (moment().hours() >= 7) {
    initstart = moment()
      .hour(7)
      .minute(0)
      .second(0)
      .format('YYYY-MM-DD HH:mm:ss');
    initend = moment()
      .add(1, 'day')
      .hour(7)
      .minute(0)
      .second(0)
      .format('YYYY-MM-DD HH:mm:ss');
  } else {
    initstart = moment()
      .add(-1, 'day')
      .hour(7)
      .minute(0)
      .second(0)
      .format('YYYY-MM-DD HH:mm:ss');
    initend = moment()
      .hour(7)
      .minute(0)
      .second(0)
      .format('YYYY-MM-DD HH:mm:ss');
  }

  const [loading, setLoading] = useState(false);

  const [formData, setFormData] = useState({
    StartTime: initstart,
    EndTime: initend,
  });
  const formRef: any = useRef(null);

  const query = () => {
    if (formRef.current) {
      if (!formRef.current.instance.validate().isValid) {
        return;
      }
      getChartsData(formData);
    }
  };

  // 获取数据
  const getChartsData = (params: any) => {
    setLoading(true);
    getEquipmentStatusChange(params)
      .then(res => {
        console.log(res);
        res.forEach((item: any, index: any) => {
          item.id = index;
        });
        setLoading(false);
      })
      .catch(error => {
        notifyError(error.message);
        setLoading(false);
      });
  };

  // const TooltipTemplate = (arg: any) => {
  //   console.log(arg);
  //   return <span>11</span>;
  // };

  // 设置 series 颜色
  const customizeSeries = (arg: any) => {
    let color = '';
    switch (arg) {
      case 'NST':
        color = 'grey';
        break;
      case 'ENG':
        color = 'blue';
        break;
      case 'PROD':
        color = 'green';
        break;
      case 'STBY':
        color = 'yellow';
        break;
      case 'SDT':
        color = 'pink';
        break;
      case 'UDT':
        color = 'red';
        break;
      default:
        break;
    }
    if (arg === 'NST') {
      color = 'grey';
    }
    return {
      color: color,
    };
  };

  useEffect(() => {
    getChartsData(formData);
  }, []);

  return (
    <div className={Style['process-record']} id="process-record">
      <LoadIndicator
        style={{ position: 'fixed', left: '50%', top: '50%', zIndex: 100 }}
        visible={loading}
        id="process-record"
        height={40}
        width={40}
      />
      <div className={Style['form-style']}>
        <Form
          ref={formRef}
          colCount={3}
          formData={formData}
          labelMode={'outside'}
          labelLocation={'top'}
        >
          <SimpleItem
            dataField="StartTime"
            label={{ text: formTittleToString('form.label.开始时间') }}
            editorType="dxDateBox"
            editorOptions={{
              type: 'datetime',
              openOnFieldClick: true,
              displayFormat: 'yyyy/MM/dd HH:mm:ss',
            }}
            validationRules={[{ type: 'required' }]}
          />
          <SimpleItem
            dataField="EndTime"
            label={{ text: formTittleToString('form.label.结束时间') }}
            editorType="dxDateBox"
            editorOptions={{
              type: 'datetime',
              openOnFieldClick: true,
              displayFormat: 'yyyy/MM/dd HH:mm:ss',
            }}
            validationRules={[{ type: 'required' }]}
          />
          <ButtonItem
            horizontalAlignment="left"
            verticalAlignment="center"
            buttonOptions={{
              text: formTittleToString('button.text.查询'),
              type: 'default',
              onClick: () => {
                query();
              },
              disabled: loading,
            }}
          />
        </Form>
      </div>
      <div className={Style['content-style']}>
        <Chart
          className={Style['chart-style']}
          dataSource={dataSource}
          barGroupPadding={0.2}
          rotated={true}
        >
          <ArgumentAxis>
            <Tick visible={true} />
          </ArgumentAxis>

          <ValueAxis valueType="datetime">
            <Tick visible={true} />
          </ValueAxis>

          <CommonSeriesSettings
            type="rangeBar"
            argumentField="process"
            rangeValue1Field="start"
            rangeValue2Field="end"
            barOverlapGroup="processs"
            ignoreEmptyPoints={true}
          ></CommonSeriesSettings>
          <SeriesTemplate
            nameField="status"
            customizeSeries={customizeSeries}
          />

          {/* <CommonSeriesSettings
            rangeValue1Field="start"
            rangeValue2Field="end"
            argumentField="process"
            type="rangebar"
          />

          <Series
            name={'NST'}
            rangeValue1Field="start"
            rangeValue2Field="end"
            color={'grey'}
            valueField={'process'}
          />
          <Series
            name={'ENG'}
            rangeValue1Field="start"
            rangeValue2Field="end"
            color={'blue'}
            valueField={'process'}
          />
          <Series
            name={'PROD'}
            rangeValue1Field="start"
            rangeValue2Field="end"
            color={'green'}
            valueField={'process'}
          /> */}

          <Legend
            verticalAlignment="bottom"
            horizontalAlignment="center"
          ></Legend>

          <Tooltip
            enabled={true}
            shared={true}
            // contentRender={TooltipTemplate}
          />
          <Animation enabled={false} />
        </Chart>
      </div>
    </div>
  );
};

export default DeviceStatusHistory;