luoyang-screen/src/page/LinePage4-2/Left/LeftUp.tsx

import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import SwitchButton from "../Component/SwitchButton";
import getOptions from "../../Component/SummaryBarChart/chart.config";
import { useState } from "react";
import {useAppSelector} from "./../../../store/hooks"
import {selectLine4After} from "./../../../store/LinePageSlice"
function LeftUp() {
  const data = useAppSelector(selectLine4After);
  // 假数据
  const dataSource = {
    day: {
      xData: [],
      series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
    },
    week: {
      xData: [],
      series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
    },
    month: {
      xData: [],
      series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
    },
  };
  const nameList = [
    { name: "天", ename: "day" },
    { name: "周", ename: "week" },
    { name: "月", ename: "month" },
  ];
  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
  let chartData = (dataSource as { [key: string]: any })[activeName];
  const handleButtonChange = (activeName: string) => {
    setActiveName(activeName);
  };
  // @ts-ignore
  if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
    let sum: number[] = [];
    // 生成obj
    // @ts-ignore
    data.scrapBars.forEach((item,index) => {
      let obj = {
            data: [],
            type: "bar",
            stack: "a",
            name: item,
            barWidth: 14,
            label: {
              show: true,
              position: "right",
              color: "inherit",
            },
          }
        dataSource.day.series.push(obj)
    })
    // @ts-ignore
    dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
    dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
      // @ts-ignore
      const lastDigitA = parseInt(a[a.length - 1], 10);
      // @ts-ignore
      const lastDigitB = parseInt(b[b.length - 1], 10);
      return lastDigitA - lastDigitB;
    })
    for (let k = 0; k < dataSource.day.xData.length; k++) {
      let item = dataSource.day.xData[k];
      let sumIner = 0
      for(let i = 0;i < dataSource.day.series.length;i++){
        let itemSeries = dataSource.day.series[i]
      // @ts-ignore
        data.todayAllProductionScraps[item].forEach((itemInner,indexInner)=>{
          // @ts-ignore
          if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
            // @ts-ignore
            itemSeries.data.push(itemInner.scrapNum || 0)
            sumIner += itemInner.scrapNum || 0
            return
          }
        })
        if (itemSeries.data.length === k) {
          itemSeries.data.push(0)
        }
      }
      sum.push(sumIner)
    }
    dataSource.day.series.push({
      data: sum,
      type: "bar",
      stack: "a",
      name: "",
      label: {
        show: true,
        position: "top",
        color: "#fff",
        formatter: function (params: any) {
          return sum[params.dataIndex];
        },
      },
    })
  }else{
    dataSource.day.xData = []
    dataSource.day.series = []
  }
  // @ts-ignore
  if (data.weekAllProductionScraps && Object.keys(data.weekAllProductionScraps).length > 0) {
    let sum: number[] = [];
    // 生成obj
    // @ts-ignore
    data.scrapBars.forEach((item,index) => {
      let obj = {
            data: [],
            type: "bar",
            stack: "a",
            name: item,
            barWidth: 14,
            label: {
              show: true,
              position: "right",
              color: "inherit",
            },
          }
        dataSource.week.series.push(obj)
    })
    // @ts-ignore
    dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
    dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
      // @ts-ignore
      const lastDigitA = parseInt(a[a.length - 1], 10);
      // @ts-ignore
      const lastDigitB = parseInt(b[b.length - 1], 10);
      return lastDigitA - lastDigitB;
    })
    for (let k = 0; k < dataSource.week.xData.length; k++) {
      let item = dataSource.week.xData[k];
      let sumIner = 0
      for(let i = 0;i < dataSource.week.series.length;i++){
        let itemSeries = dataSource.week.series[i]
      // @ts-ignore
        data.weekAllProductionScraps[item].forEach((itemInner,indexInner)=>{
          // @ts-ignore
          if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
            // @ts-ignore
            itemSeries.data.push(itemInner.scrapNum || 0)
            sumIner += itemInner.scrapNum || 0
            return
          }
        })
        if (itemSeries.data.length === k) {
          itemSeries.data.push(0)
        }
      }
      sum.push(sumIner)
    }
    dataSource.week.series.push({
      data: sum,
      type: "bar",
      stack: "a",
      name: "",
      label: {
        show: true,
        position: "top",
        color: "#fff",
        formatter: function (params: any) {
          return sum[params.dataIndex];
        },
      },
    })
  }else{
    dataSource.week.xData = []
    dataSource.week.series = []
  }
  // @ts-ignore
  if (data.monthAllProductionScraps && Object.keys(data.monthAllProductionScraps).length > 0) {
    let sum: number[] = [];
    // 生成obj
    // @ts-ignore
    data.scrapBars.forEach((item,index) => {
      let obj = {
            data: [],
            type: "bar",
            stack: "a",
            name: item,
            barWidth: 14,
            label: {
              show: true,
              position: "right",
              color: "inherit",
            },
          }
        dataSource.month.series.push(obj)
    })
    // @ts-ignore
    dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
    dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
      // @ts-ignore
      const lastDigitA = parseInt(a[a.length - 1], 10);
      // @ts-ignore
      const lastDigitB = parseInt(b[b.length - 1], 10);
      return lastDigitA - lastDigitB;
    })
    for (let k = 0; k < dataSource.month.xData.length; k++) {
      let item = dataSource.month.xData[k];
      let sumIner = 0
      for(let i = 0;i < dataSource.month.series.length;i++){
        let itemSeries = dataSource.month.series[i]
      // @ts-ignore
        data.monthAllProductionScraps[item].forEach((itemInner,indexInner)=>{
          // @ts-ignore
          if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
            // @ts-ignore
            itemSeries.data.push(itemInner.scrapNum || 0)
            sumIner += itemInner.scrapNum || 0
            return
          }
        })
        if (itemSeries.data.length === k) {
          itemSeries.data.push(0)
        }
      }
      sum.push(sumIner)
    }
    dataSource.month.series.push({
      data: sum,
      type: "bar",
      stack: "a",
      name: "",
      label: {
        show: true,
        position: "top",
        color: "#fff",
        formatter: function (params: any) {
          return sum[params.dataIndex];
        },
      },
    })
  }else{
    dataSource.month.xData = []
    dataSource.month.series = []
  }
  const options = getOptions(chartData);
  console.log('dataSource',dataSource)
  return (
    <div className="left_up">
      <TitleBox title={"left_up"} />
      <div className="left_up_switch">
        <SwitchButton nameList={nameList} onChange={handleButtonChange} />
      </div>
      {// @ts-ignore
      dataSource[activeName].xData.length>0 ? (
        <div className="left_up_chart">
          {<ReactECharts option={options} style={{ height: "100%" }} />}
        </div>
      ):(
        <p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "72px",
          }}
        >
          暂无数据
        </p>
      )}
    </div>
  );
}
export default LeftUp;