luoyang-screen/src/page/LinePage1-1/Center/CenterDown.tsx

import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "../../Component/LineChart/chart.config";
import {useAppSelector} from "./../../../store/hooks"
import {selectLine1Before} from "./../../../store/LinePageSlice"
import dayjs from "dayjs";
function CenterDown() {
  const data = useAppSelector(selectLine1Before);
  // 假数据
  const dataSource = {
    day: {
      xData:[],
      series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
    },
    week: {
      xData:[],
      series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
    },
    month: {
      xData:[],
      series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
    },
  };
  const nameList = [
    { name: "天", ename: "day" },
    { name: "周", ename: "week" },
    { name: "月", ename: "month" },
  ];
  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
  const handleButtonChange = (activeName: string) => {
    setActiveName(activeName);
  };
  const config = {
    header: ["序号", "报警时间", "报警设备", "报警内容"],
    headerHeight: 36,
    rowNum: 6,
    align: ["center", "left", "left", "left"],
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [80, 137, 137, 137],
    data: []
  };
  // 报警数据
  let arr:any = []
  let sumAlarm = 0
  // @ts-ignore
  if (data.alarms && data.alarms.length > 0) {
    // @ts-ignore
    sumAlarm = data.alarms.length
    // @ts-ignore
    data.alarms.map((item,index) => {
      let arrInner = []
      arrInner.push(
        index+1,
        dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
        item.name,
        item.status === '故障'?"<span style='color:#FF1E1E'>故障</span>":"<span style='color:#FFB40F'>离线</span>",
      );
      arr.push(arrInner)
    });
  }
  config.data = arr
  // 产线成品率
  // @ts-ignore
  if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
    // @ts-ignore
    let keys = Object.keys(data.todayProductionRates)
    // @ts-ignore
    data.todayProductionRates[keys[0]].map((item,index)=>{
      // @ts-ignore
      dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
    })
    keys.map((item,index)=>{
      let obj = {
        name: "",
        type: "line",
        symbol: "circle",
        symbolSize: 4,
        data:[]
      }
      // @ts-ignore
      obj.name = data.todayProductionRates[item][0].lineName
        // @ts-ignore
      data.todayProductionRates[item].map((subItem,index)=>{
        // @ts-ignore
        obj.data.push(subItem.passRate)
      })
      dataSource.day.series.push(obj)
    })
  }else{
    dataSource.day.xData = []
    dataSource.day.series = []
  }
  // @ts-ignore
  if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
    // @ts-ignore
    let keys = Object.keys(data.weekProductionRates)
    // @ts-ignore
    data.weekProductionRates[keys[0]].map((item,index)=>{
      // @ts-ignore
      dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
    })
    keys.map((item,index)=>{
      let obj = {
        name: "",
        type: "line",
        symbol: "circle",
        symbolSize: 4,
        data:[]
      }
      // @ts-ignore
      obj.name = data.weekProductionRates[item][0].lineName
        // @ts-ignore
      data.weekProductionRates[item].map((subItem,index)=>{
        // @ts-ignore
        obj.data.push(subItem.passRate)
      })
      dataSource.week.series.push(obj)
    })
  }else{
    dataSource.week.xData = []
    dataSource.week.series = []
  }
  // @ts-ignore
  if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
    // @ts-ignore
    let keys = Object.keys(data.monthProductionRates)
    // @ts-ignore
    data.monthProductionRates[keys[0]].map((item,index)=>{
      // @ts-ignore
      dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
    })
    keys.map((item,index)=>{
      let obj = {
        name: "",
        type: "line",
        symbol: "circle",
        symbolSize: 4,
        data:[]
      }
      // @ts-ignore
      obj.name = data.monthProductionRates[item][0].lineName
        // @ts-ignore
      data.monthProductionRates[item].map((subItem,index)=>{
        // @ts-ignore
        obj.data.push(subItem.passRate)
      })
      dataSource.month.series.push(obj)
    })
  }else{
    dataSource.month.xData = []
    dataSource.month.series = []
  }
  let chartData = (dataSource as { [key: string]: any })[activeName];
  const options = getOptions(chartData);
  return (
    <div className="center_down flex-row">
      <div className="center_down_inner flex-col left-box">
        <TitleBox title={"center_down_left"} />
        <span className="alarm_num_title">— 报警总数 —</span>
        <div className="alarm_num">{sumAlarm}</div>
        <div style={{ padding: 10, height: "270px" }}>
        {arr.length>0?<ScrollBoard
            config={config}
            style={{ width: "492px", height: "250px" }}
          />:(<p
            style={{
              color: "#cccf",
              fontSize: "24px",
              userSelect: "none",
              textAlign: "center",
              paddingTop: "50px",
              margin:0
            }}
          >
            暂无数据
          </p>)}
        </div>
      </div>
      {/* 产线成品率 */}
      <div className="center_down_inner flex-col right_box">
        <TitleBox title={"center_down_right"} />
        <div className="left_up_switch">
          <SwitchButton nameList={nameList} onChange={handleButtonChange} />
        </div>
        {chartData.xData.length>0 && (
          <div className="chart_box">
            {<ReactECharts option={options} style={{ height: "100%" }} />}
          </div>
        )}
        {chartData.xData.length==0 && (
          <p
            style={{
              color: "#cccf",
              fontSize: "24px",
              userSelect: "none",
              textAlign: "center",
              paddingTop: "120px",
              margin:0
            }}
          >
            暂无数据
          </p>
        )}
      </div>
    </div>
  );
}
export default CenterDown;