luoyang-screen/src/page/LinePage1-1/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 {selectLine1Before} from "./../../../store/LinePageSlice"
function LeftUp() {
  const data = useAppSelector(selectLine1Before);
  console.log('页面数据1-1：',data)
  // 假数据
  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.map((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.map((item,index)=>{
      let sumIner = 0
      // @ts-ignore
      data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
        sumIner += itemInner.scrapNum
        dataSource.day.series.map((itemSeries,indexSeries)=>{
          // @ts-ignore
          if (itemSeries.name === itemInner.sectionName) {
            // @ts-ignore
            itemSeries.data.push(itemInner.scrapNum)
          }
        })
      })
      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.map((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.map((item,index)=>{
      let sumIner = 0
      // @ts-ignore
      data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
        sumIner += itemInner.scrapNum
        dataSource.week.series.map((itemSeries,indexSeries)=>{
          // @ts-ignore
          if (itemSeries.name === itemInner.sectionName) {
            // @ts-ignore
            itemSeries.data.push(itemInner.scrapNum)
          }
        })
      })
      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.map((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.map((item,index)=>{
      let sumIner = 0
      // @ts-ignore
      data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
        sumIner += itemInner.scrapNum
        dataSource.month.series.map((itemSeries,indexSeries)=>{
          // @ts-ignore
          if (itemSeries.name === itemInner.sectionName) {
            // @ts-ignore
            itemSeries.data.push(itemInner.scrapNum)
          }
        })
      })
      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);
  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;