update 能源,规格:
This commit is contained in:
		@@ -1,25 +1,98 @@
 | 
			
		||||
import cls from "./index.module.css";
 | 
			
		||||
import { randomInt } from "../../../../utils";
 | 
			
		||||
import * as echarts from "echarts";
 | 
			
		||||
import { Switch, Radio } from "antd";
 | 
			
		||||
import ReactECharts from "echarts-for-react";
 | 
			
		||||
import { useState } from "react";
 | 
			
		||||
import { useSelector } from "react-redux";
 | 
			
		||||
 | 
			
		||||
const EnergyCostChart = (props) => {
 | 
			
		||||
  const options = {
 | 
			
		||||
  const elecTrend = useSelector((state) => state.energy.trend.elec);
 | 
			
		||||
  const gasITrend = useSelector((state) => state.energy.trend.natGas1);
 | 
			
		||||
  const gasIITrend = useSelector((state) => state.energy.trend.natGas2);
 | 
			
		||||
  const [source, setSource] = useState("elec");
 | 
			
		||||
  const [period, setPeriod] = useState("week");
 | 
			
		||||
 | 
			
		||||
  const currentTrend =
 | 
			
		||||
    source == "elec" ? elecTrend : source == "gasi" ? gasITrend : gasIITrend;
 | 
			
		||||
 | 
			
		||||
  const options = getOptions(
 | 
			
		||||
    period,
 | 
			
		||||
    source,
 | 
			
		||||
    currentTrend ?? { week: [], month: [], year: [] }
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div className={cls.energyCostChart}>
 | 
			
		||||
      <div className={cls.titleBar}>
 | 
			
		||||
        <h2>能耗趋势图</h2>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <div className={`${cls.choiceBar} flex items-center justify-between`}>
 | 
			
		||||
        <Radio.Group
 | 
			
		||||
          value={source}
 | 
			
		||||
          buttonStyle="solid"
 | 
			
		||||
          onChange={(v) => setSource(v.target.value)}
 | 
			
		||||
          className={`${cls.radioGroup} flex items-center justify-between`}
 | 
			
		||||
        >
 | 
			
		||||
          <Radio.Button value="elec" className="radio-group__item">
 | 
			
		||||
            电
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="gasi" className="radio-group__item">
 | 
			
		||||
            天然气I
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="gasii" className="radio-group__item">
 | 
			
		||||
            天然气II
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
        </Radio.Group>
 | 
			
		||||
 | 
			
		||||
        <Radio.Group
 | 
			
		||||
          value={period}
 | 
			
		||||
          buttonStyle="solid"
 | 
			
		||||
          onChange={(v) => setPeriod(v.target.value)}
 | 
			
		||||
          className={cls.radioGroup}
 | 
			
		||||
        >
 | 
			
		||||
          <Radio.Button value="week" className="radio-group__item">
 | 
			
		||||
            周
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="month" className="radio-group__item">
 | 
			
		||||
            月
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="year" className="radio-group__item">
 | 
			
		||||
            年
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
        </Radio.Group>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <div className="flex-1" style={{ marginTop: "8px" }}>
 | 
			
		||||
        <ReactECharts option={options} style={{ height: "180px" }} />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default EnergyCostChart;
 | 
			
		||||
 | 
			
		||||
function getOptions(period, source, trend) {
 | 
			
		||||
  console.log("trend ==> ", trend);
 | 
			
		||||
 | 
			
		||||
  return {
 | 
			
		||||
    color: ["#FFD160", "#12FFF5", "#2760FF"],
 | 
			
		||||
    grid: { top: 32, right: 12, bottom: 56, left: 48 },
 | 
			
		||||
    xAxis: {
 | 
			
		||||
      type: "category",
 | 
			
		||||
      data: Array(7)
 | 
			
		||||
        .fill(1)
 | 
			
		||||
        .map((_, index) => {
 | 
			
		||||
          const today = new Date();
 | 
			
		||||
          const dtimestamp = today - index * 24 * 60 * 60 * 1000;
 | 
			
		||||
          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
 | 
			
		||||
            dtimestamp
 | 
			
		||||
          ).getDate()}`;
 | 
			
		||||
        })
 | 
			
		||||
        .reverse(),
 | 
			
		||||
      data:
 | 
			
		||||
        source == "elec"
 | 
			
		||||
          ? trend[period].map((item) => item.time)
 | 
			
		||||
          : Array(period == "week" ? 7 : period == "year" ? 12 : 30)
 | 
			
		||||
              .fill(1)
 | 
			
		||||
              .map((_, index) => {
 | 
			
		||||
                const today = new Date();
 | 
			
		||||
                const dtimestamp = today - index * 24 * 60 * 60 * 1000;
 | 
			
		||||
                return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
 | 
			
		||||
                  dtimestamp
 | 
			
		||||
                ).getDate()}`;
 | 
			
		||||
              })
 | 
			
		||||
              .reverse(),
 | 
			
		||||
      axisLabel: {
 | 
			
		||||
        color: "#fff",
 | 
			
		||||
        fontSize: 12,
 | 
			
		||||
@@ -43,7 +116,7 @@ const EnergyCostChart = (props) => {
 | 
			
		||||
      axisLabel: {
 | 
			
		||||
        color: "#fff",
 | 
			
		||||
        fontSize: 12,
 | 
			
		||||
        formatter: "{value} %",
 | 
			
		||||
        // formatter: "{value} %",
 | 
			
		||||
      },
 | 
			
		||||
      axisLine: {
 | 
			
		||||
        show: true,
 | 
			
		||||
@@ -56,17 +129,16 @@ const EnergyCostChart = (props) => {
 | 
			
		||||
          color: "#213259a0",
 | 
			
		||||
        },
 | 
			
		||||
      },
 | 
			
		||||
      interval: 10,
 | 
			
		||||
      min: 0,
 | 
			
		||||
      max: 100,
 | 
			
		||||
      // interval: 10,
 | 
			
		||||
      // min: 0,
 | 
			
		||||
      // max: 100,
 | 
			
		||||
    },
 | 
			
		||||
    series: [
 | 
			
		||||
      {
 | 
			
		||||
        data: Array(7)
 | 
			
		||||
          .fill(1)
 | 
			
		||||
          .map((_) => {
 | 
			
		||||
            return randomInt(60, 100);
 | 
			
		||||
          }),
 | 
			
		||||
        data:
 | 
			
		||||
          source == "elec"
 | 
			
		||||
            ? trend[period].map((item) => item.qty)
 | 
			
		||||
            : trend[period],
 | 
			
		||||
        type: "line",
 | 
			
		||||
        areaStyle: {
 | 
			
		||||
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
@@ -82,60 +154,4 @@ const EnergyCostChart = (props) => {
 | 
			
		||||
      trigger: "axis",
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  function handleSwitchChange(val) {}
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div className={cls.energyCostChart}>
 | 
			
		||||
      <div className={cls.titleBar}>
 | 
			
		||||
        <h2>能耗趋势图</h2>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <div className={`${cls.choiceBar} flex items-center justify-between`}>
 | 
			
		||||
        <Radio.Group
 | 
			
		||||
          defaultValue="oxygen"
 | 
			
		||||
          buttonStyle="solid"
 | 
			
		||||
          className={`${cls.radioGroup} flex items-center justify-between`}
 | 
			
		||||
        >
 | 
			
		||||
          <Radio.Button value="oxygen" className="radio-group__item">
 | 
			
		||||
            氧气含量
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="so2" className="radio-group__item">
 | 
			
		||||
            二氧化硫
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="no" className="radio-group__item">
 | 
			
		||||
            一氧化氮
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="no2" className="radio-group__item">
 | 
			
		||||
            二氧化氮
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
        </Radio.Group>
 | 
			
		||||
 | 
			
		||||
        <Radio.Group
 | 
			
		||||
          defaultValue="week"
 | 
			
		||||
          buttonStyle="solid"
 | 
			
		||||
          className={cls.radioGroup}
 | 
			
		||||
        >
 | 
			
		||||
          <Radio.Button value="day" className="radio-group__item">
 | 
			
		||||
            日
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="week" className="radio-group__item">
 | 
			
		||||
            周
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="month" className="radio-group__item">
 | 
			
		||||
            月
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
          <Radio.Button value="year" className="radio-group__item">
 | 
			
		||||
            年
 | 
			
		||||
          </Radio.Button>
 | 
			
		||||
        </Radio.Group>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
      <div className="flex-1" style={{ marginTop: "8px" }}>
 | 
			
		||||
        <ReactECharts option={options} style={{ height: "180px" }} />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default EnergyCostChart;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -6,8 +6,7 @@ import { useSelector } from "react-redux";
 | 
			
		||||
 | 
			
		||||
function EnergyCost(props) {
 | 
			
		||||
  const energyInfo = useSelector((state) => state.energy?.info);
 | 
			
		||||
  if (energyInfo) {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <Container title="能耗" icon="battery" className={cls.energyCost}>
 | 
			
		||||
      <div className={`flex flex-col`}>
 | 
			
		||||
 
 | 
			
		||||
@@ -13,6 +13,76 @@ export const initialState = {
 | 
			
		||||
    // 天然气2
 | 
			
		||||
    ngQty2: "0", // m³
 | 
			
		||||
  },
 | 
			
		||||
  trend: {
 | 
			
		||||
    natGas1: {
 | 
			
		||||
      // 暂时只存了周数据:
 | 
			
		||||
      week: [],
 | 
			
		||||
      month: [],
 | 
			
		||||
      year: [],
 | 
			
		||||
    },
 | 
			
		||||
    natGasII: {
 | 
			
		||||
      week: [],
 | 
			
		||||
      month: [],
 | 
			
		||||
      year: [],
 | 
			
		||||
    },
 | 
			
		||||
    elec: {
 | 
			
		||||
      week: [
 | 
			
		||||
        // { qty: 10, time: "01" },
 | 
			
		||||
        // { qty: 20, time: "02" },
 | 
			
		||||
        // { qty: 30, time: "03" },
 | 
			
		||||
        // { qty: 40, time: "04" },
 | 
			
		||||
        // { qty: 50, time: "05" },
 | 
			
		||||
        // { qty: 60, time: "06" },
 | 
			
		||||
        // { qty: 70, time: "07" },
 | 
			
		||||
      ],
 | 
			
		||||
      month: [
 | 
			
		||||
        // { qty: 20, time: "02" },
 | 
			
		||||
        // { qty: 30, time: "03" },
 | 
			
		||||
        // { qty: 40, time: "04" },
 | 
			
		||||
        // { qty: 50, time: "05" },
 | 
			
		||||
        // { qty: 60, time: "06" },
 | 
			
		||||
        // { qty: 70, time: "07" },
 | 
			
		||||
        // { qty: 80, time: "08" },
 | 
			
		||||
        // { qty: 90, time: "09" },
 | 
			
		||||
        // { qty: 100, time: "10" },
 | 
			
		||||
        // { qty: 110, time: "11" },
 | 
			
		||||
        // { qty: 120, time: "12" },
 | 
			
		||||
        // { qty: 130, time: "13" },
 | 
			
		||||
        // { qty: 140, time: "14" },
 | 
			
		||||
        // { qty: 150, time: "15" },
 | 
			
		||||
        // { qty: 160, time: "16" },
 | 
			
		||||
        // { qty: 170, time: "17" },
 | 
			
		||||
        // { qty: 180, time: "18" },
 | 
			
		||||
        // { qty: 190, time: "19" },
 | 
			
		||||
        // { qty: 200, time: "20" },
 | 
			
		||||
        // { qty: 210, time: "21" },
 | 
			
		||||
        // { qty: 220, time: "22" },
 | 
			
		||||
        // { qty: 230, time: "23" },
 | 
			
		||||
        // { qty: 240, time: "24" },
 | 
			
		||||
        // { qty: 250, time: "25" },
 | 
			
		||||
        // { qty: 260, time: "26" },
 | 
			
		||||
        // { qty: 270, time: "27" },
 | 
			
		||||
        // { qty: 280, time: "28" },
 | 
			
		||||
        // { qty: 290, time: "29" },
 | 
			
		||||
        // { qty: 300, time: "30" },
 | 
			
		||||
        // { qty: 310, time: "31" },
 | 
			
		||||
      ],
 | 
			
		||||
      year: [
 | 
			
		||||
        // { qty: 10, time: "01" },
 | 
			
		||||
        // { qty: 20, time: "02" },
 | 
			
		||||
        // { qty: 30, time: "03" },
 | 
			
		||||
        // { qty: 40, time: "04" },
 | 
			
		||||
        // { qty: 50, time: "05" },
 | 
			
		||||
        // { qty: 60, time: "06" },
 | 
			
		||||
        // { qty: 70, time: "07" },
 | 
			
		||||
        // { qty: 80, time: "08" },
 | 
			
		||||
        // { qty: 90, time: "09" },
 | 
			
		||||
        // { qty: 100, time: "10" },
 | 
			
		||||
        // { qty: 110, time: "11" },
 | 
			
		||||
        // { qty: 120, time: "12" },
 | 
			
		||||
      ],
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const energySlice = createSlice({
 | 
			
		||||
@@ -22,6 +92,23 @@ const energySlice = createSlice({
 | 
			
		||||
    setInfo: (state, action) => {
 | 
			
		||||
      state.info = { ...state.info, ...action.payload };
 | 
			
		||||
    },
 | 
			
		||||
    setElecTrend: (state, action) => {
 | 
			
		||||
      state.trend.elec = action.payload;
 | 
			
		||||
    },
 | 
			
		||||
    setSumGasData: (state, action) => {
 | 
			
		||||
      if ("sumGas1Now" in action.payload) {
 | 
			
		||||
        state.info.ngQty1 = action.payload.sumGas1Now;
 | 
			
		||||
      }
 | 
			
		||||
      if ("sumGas2Now" in action.payload) {
 | 
			
		||||
        state.info.ngQty2 = action.payload.sumGas2Now;
 | 
			
		||||
      }
 | 
			
		||||
      if ("hisSumGas1" in action.payload) {
 | 
			
		||||
        state.trend.natGas1.week = action.payload.hisSumGas1;
 | 
			
		||||
      }
 | 
			
		||||
      if ("hisSumGas2" in action.payload) {
 | 
			
		||||
        state.trend.natGas2.week = action.payload.hisSumGas2;
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										50
									
								
								src/utils/IS.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										50
									
								
								src/utils/IS.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,50 @@
 | 
			
		||||
import { store } from "../store";
 | 
			
		||||
import { MessageItem } from "./checkTypeHelper";
 | 
			
		||||
 | 
			
		||||
export default function handler(msg: MessageEvent) {
 | 
			
		||||
  let serializedData: MessageItem | null = null;
 | 
			
		||||
  try {
 | 
			
		||||
    serializedData = JSON.parse(msg.data);
 | 
			
		||||
  } catch (error) {
 | 
			
		||||
    console.log("[*] websocket: [unable to serialize] --->  ", msg);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  console.log("[ISRA DATA] ---> ", serializedData);
 | 
			
		||||
 | 
			
		||||
  if (serializedData == null) return;
 | 
			
		||||
 | 
			
		||||
  // 处理 checkTypeList
 | 
			
		||||
  store.dispatch({
 | 
			
		||||
    type: "isra/setCheckType",
 | 
			
		||||
    payload: serializedData.checkType,
 | 
			
		||||
  });
 | 
			
		||||
  // for (const checkType of serializedData.checkTypeList) {
 | 
			
		||||
  //   store.dispatch({
 | 
			
		||||
  //     type: 'isra/setCheckTypeList',
 | 
			
		||||
  //     payload: serializedData.checkTypeList
 | 
			
		||||
  //   })
 | 
			
		||||
  // }
 | 
			
		||||
 | 
			
		||||
  // 处理 dayStatistic 等数据
 | 
			
		||||
  if ("dayStatistic" in serializedData) {
 | 
			
		||||
    store.dispatch({
 | 
			
		||||
      type: "isra/setDayStatistic",
 | 
			
		||||
      payload: serializedData.dayStatistic,
 | 
			
		||||
    });
 | 
			
		||||
  } else if ("weekStatistic" in serializedData) {
 | 
			
		||||
    store.dispatch({
 | 
			
		||||
      type: "isra/setWeekStatistic",
 | 
			
		||||
      payload: serializedData.weekStatistic,
 | 
			
		||||
    });
 | 
			
		||||
  } else if ("monthStatistic" in serializedData) {
 | 
			
		||||
    store.dispatch({
 | 
			
		||||
      type: "isra/setMonthStatistic",
 | 
			
		||||
      payload: serializedData.monthStatistic,
 | 
			
		||||
    });
 | 
			
		||||
  } else if ("yearStatistic" in serializedData) {
 | 
			
		||||
    store.dispatch({
 | 
			
		||||
      type: "isra/setYearStatistic",
 | 
			
		||||
      payload: serializedData.yearStatistic,
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										42
									
								
								src/utils/cutting.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										42
									
								
								src/utils/cutting.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,42 @@
 | 
			
		||||
import { store } from "../store";
 | 
			
		||||
type TableDataType = {
 | 
			
		||||
  name: "table";
 | 
			
		||||
  type: "cutting";
 | 
			
		||||
  data: any[];
 | 
			
		||||
};
 | 
			
		||||
type ChartDataType = {
 | 
			
		||||
  name: "chart";
 | 
			
		||||
  type: "cutting";
 | 
			
		||||
  nightPushData: any[];
 | 
			
		||||
  dayPushData: any[];
 | 
			
		||||
  allPushData: any[];
 | 
			
		||||
  dateType: "day" | "week" | "month" | "year";
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default function handler(msg: MessageEvent) {
 | 
			
		||||
  let serializedData: TableDataType | ChartDataType | null = null;
 | 
			
		||||
  try {
 | 
			
		||||
    serializedData = JSON.parse(msg.data);
 | 
			
		||||
  } catch (error) {
 | 
			
		||||
    console.log("[*] websocket: [unable to serialize] --->  ", msg);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  console.log("[CUTTING DATA] ---> ", serializedData);
 | 
			
		||||
 | 
			
		||||
  if (serializedData == null) return;
 | 
			
		||||
 | 
			
		||||
  switch (serializedData.name) {
 | 
			
		||||
    case "table":
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "cutting/setCuttingTable",
 | 
			
		||||
        payload: serializedData,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    case "chart":
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "cutting/setCuttingChart",
 | 
			
		||||
        payload: serializedData,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										138
									
								
								src/utils/dcs.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										138
									
								
								src/utils/dcs.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,138 @@
 | 
			
		||||
import { store } from "../store";
 | 
			
		||||
 | 
			
		||||
export default function handler(msg: MessageEvent) {
 | 
			
		||||
  let serializedData: { type: string; data: any } | null = null;
 | 
			
		||||
  try {
 | 
			
		||||
    serializedData = JSON.parse(msg.data);
 | 
			
		||||
  } catch (error) {
 | 
			
		||||
    console.log("[*] websocket: [unable to serialize] --->  ", msg);
 | 
			
		||||
  }
 | 
			
		||||
  switch (serializedData?.type) {
 | 
			
		||||
    case "KilnInfo": {
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "kiln/setKilnInfo",
 | 
			
		||||
        payload: serializedData.data,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "CombustionAirInfo": {
 | 
			
		||||
      // 助燃风流量 实时
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "combustionAir/setRuntime",
 | 
			
		||||
        payload: serializedData.data.combustionAirNow, // []
 | 
			
		||||
      });
 | 
			
		||||
      // 助燃风流量 历史
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "combustionAir/setHistory",
 | 
			
		||||
        payload: serializedData.data.combustionAirHis, // {}
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "GasInfo": {
 | 
			
		||||
      // 天然气流量 1 实时
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "natGas/setGasIRuntime",
 | 
			
		||||
        payload: serializedData.data.gas1Now,
 | 
			
		||||
      });
 | 
			
		||||
      // 天然气流量 1 历史
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "natGas/setGasIHistory",
 | 
			
		||||
        payload: serializedData.data.hisGas1,
 | 
			
		||||
      });
 | 
			
		||||
      // 天然气流量 2 实时
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "natGas/setGasIIRuntime",
 | 
			
		||||
        payload: serializedData.data.gas2Now,
 | 
			
		||||
      });
 | 
			
		||||
      // 天然气流量 2 历史
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "natGas/setGasIIHistory",
 | 
			
		||||
        payload: serializedData.data.hisGas2,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "FanFrequencyInfo": {
 | 
			
		||||
      // 风机运行频率 暂时只有实时数据
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "fanFrequence/setRuntime",
 | 
			
		||||
        payload: serializedData.data.FanFrequencyInfo,
 | 
			
		||||
      });
 | 
			
		||||
      // 风机运行频率 历史 暂无
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "TopTempInfo": {
 | 
			
		||||
      // 碹顶温度列表
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "temperature/setTopTemp",
 | 
			
		||||
        payload: serializedData.data.topTempInfo,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "BottomTempInfo": {
 | 
			
		||||
      // 碹底温度列表
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "temperature/setBottomTemp",
 | 
			
		||||
        payload: serializedData.data.bottomTempInfo,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "FeederInfo": {
 | 
			
		||||
      // 投料机信息
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "feeder/setFeederInfo",
 | 
			
		||||
        payload: serializedData.data,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "FireInfo": {
 | 
			
		||||
      // 火向时间信息
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "fireInfo/setFireInfo",
 | 
			
		||||
        payload: serializedData.data,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "FanInfo": {
 | 
			
		||||
      // 风机信息
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "fanInfo/setInfo",
 | 
			
		||||
        payload: serializedData.data.fanInfo,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "AnnealFanFrequencyInfo": {
 | 
			
		||||
      // 退火-风机运行频率
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "annealFanFrequence/setRuntime",
 | 
			
		||||
        payload: serializedData.data.AnnealFanFrequencyInfo,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "AnnealTempInfo": {
 | 
			
		||||
      // 退火-温度列表
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "annealTemperature/setTemp",
 | 
			
		||||
        payload: serializedData.data,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "AnnealFanInfo": {
 | 
			
		||||
      // 退火-风机故障信息
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "annealFanInfo/setInfo",
 | 
			
		||||
        payload: serializedData.data.annealFanInfo,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "SumGasInfo": {
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "energy/setSumGasData",
 | 
			
		||||
        payload: serializedData.data,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    default: {
 | 
			
		||||
      console.log("websocket message: [unknown] --->  ", msg.data);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										30
									
								
								src/utils/energe.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										30
									
								
								src/utils/energe.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,30 @@
 | 
			
		||||
import { store } from "../store";
 | 
			
		||||
 | 
			
		||||
export default function handler(msg: MessageEvent) {
 | 
			
		||||
  let serializedData: { type: string; data: any } | null = null;
 | 
			
		||||
  try {
 | 
			
		||||
    serializedData = JSON.parse(msg.data);
 | 
			
		||||
  } catch (error) {
 | 
			
		||||
    console.log("[*] websocket: [unable to serialize] --->  ", msg);
 | 
			
		||||
  }
 | 
			
		||||
  switch (serializedData?.type) {
 | 
			
		||||
    case "EnergyInfo": {
 | 
			
		||||
      // 能耗数据
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "energy/setInfo",
 | 
			
		||||
        payload: serializedData.data,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    case "EnergyTrend": {
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "energy/setTrend",
 | 
			
		||||
        payload: serializedData.data,
 | 
			
		||||
      });
 | 
			
		||||
      break;
 | 
			
		||||
    }
 | 
			
		||||
    default: {
 | 
			
		||||
      console.log("websocket message: [unknown] --->  ", msg.data);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -1,15 +1,8 @@
 | 
			
		||||
import { store } from "../store";
 | 
			
		||||
import { MessageItem } from "./checkTypeHelper";
 | 
			
		||||
import { v4 as uuidv4 } from 'uuid'
 | 
			
		||||
 | 
			
		||||
export function randomInt(min: number, max: number, includeMax = false) {
 | 
			
		||||
  let Fn = includeMax ? Math.ceil : Math.floor;
 | 
			
		||||
  let num = Fn(Math.random() * max);
 | 
			
		||||
  while (num < min) {
 | 
			
		||||
    num = Fn(Math.random() * max);
 | 
			
		||||
  }
 | 
			
		||||
  return num;
 | 
			
		||||
}
 | 
			
		||||
import { v4 as uuidv4 } from "uuid";
 | 
			
		||||
import cuttingHandler from "./cutting";
 | 
			
		||||
import energeHandler from "./energe";
 | 
			
		||||
import IsHandler from "./IS";
 | 
			
		||||
import dcsHandler from "./dcs";
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * new XClient('ws://192.168.1.12:8081/xc-screen/websocket/xc001', 'DCS')
 | 
			
		||||
@@ -45,164 +38,16 @@ new XClient(
 | 
			
		||||
  "ws://10.70.180.10:8081/xc-screen/websocket/xc001",
 | 
			
		||||
  // "ws://192.168.1.12:8081/xc-screen/websocket/xc001",
 | 
			
		||||
  "DCS_DATA",
 | 
			
		||||
  (msg: MessageEvent) => {
 | 
			
		||||
    let serializedData: { type: string; data: any } | null = null;
 | 
			
		||||
    try {
 | 
			
		||||
      serializedData = JSON.parse(msg.data);
 | 
			
		||||
    } catch (error) {
 | 
			
		||||
      console.log("[*] websocket: [unable to serialize] --->  ", msg);
 | 
			
		||||
    }
 | 
			
		||||
    switch (serializedData?.type) {
 | 
			
		||||
      case "KilnInfo": {
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "kiln/setKilnInfo",
 | 
			
		||||
          payload: serializedData.data,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "CombustionAirInfo": {
 | 
			
		||||
        // 助燃风流量 实时
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "combustionAir/setRuntime",
 | 
			
		||||
          payload: serializedData.data.combustionAirNow, // []
 | 
			
		||||
        });
 | 
			
		||||
        // 助燃风流量 历史
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "combustionAir/setHistory",
 | 
			
		||||
          payload: serializedData.data.combustionAirHis, // {}
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "GasInfo": {
 | 
			
		||||
        // 天然气流量 1 实时
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "natGas/setGasIRuntime",
 | 
			
		||||
          payload: serializedData.data.gas1Now,
 | 
			
		||||
        });
 | 
			
		||||
        // 天然气流量 1 历史
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "natGas/setGasIHistory",
 | 
			
		||||
          payload: serializedData.data.hisGas1,
 | 
			
		||||
        });
 | 
			
		||||
        // 天然气流量 2 实时
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "natGas/setGasIIRuntime",
 | 
			
		||||
          payload: serializedData.data.gas2Now,
 | 
			
		||||
        });
 | 
			
		||||
        // 天然气流量 2 历史
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "natGas/setGasIIHistory",
 | 
			
		||||
          payload: serializedData.data.hisGas2,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "FanFrequencyInfo": {
 | 
			
		||||
        // 风机运行频率 暂时只有实时数据
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "fanFrequence/setRuntime",
 | 
			
		||||
          payload: serializedData.data.FanFrequencyInfo,
 | 
			
		||||
        });
 | 
			
		||||
        // 风机运行频率 历史 暂无
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "TopTempInfo": {
 | 
			
		||||
        // 碹顶温度列表
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "temperature/setTopTemp",
 | 
			
		||||
          payload: serializedData.data.topTempInfo,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "BottomTempInfo": {
 | 
			
		||||
        // 碹底温度列表
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "temperature/setBottomTemp",
 | 
			
		||||
          payload: serializedData.data.bottomTempInfo,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "FeederInfo": {
 | 
			
		||||
        // 投料机信息
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "feeder/setFeederInfo",
 | 
			
		||||
          payload: serializedData.data,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "FireInfo": {
 | 
			
		||||
        // 火向时间信息
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "fireInfo/setFireInfo",
 | 
			
		||||
          payload: serializedData.data,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "FanInfo": {
 | 
			
		||||
        // 风机信息
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "fanInfo/setInfo",
 | 
			
		||||
          payload: serializedData.data.fanInfo,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "AnnealFanFrequencyInfo": {
 | 
			
		||||
        // 退火-风机运行频率
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "annealFanFrequence/setRuntime",
 | 
			
		||||
          payload: serializedData.data.AnnealFanFrequencyInfo,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "AnnealTempInfo": {
 | 
			
		||||
        // 退火-温度列表
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "annealTemperature/setTemp",
 | 
			
		||||
          payload: serializedData.data,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case "AnnealFanInfo": {
 | 
			
		||||
        // 退火-风机故障信息
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "annealFanInfo/setInfo",
 | 
			
		||||
          payload: serializedData.data.annealFanInfo,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      default: {
 | 
			
		||||
        console.log("websocket message: [unknown] --->  ", msg.data);
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  dcsHandler
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const newUser = uuidv4()
 | 
			
		||||
const newUser = uuidv4();
 | 
			
		||||
new XClient(
 | 
			
		||||
  "ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser,
 | 
			
		||||
  // "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
 | 
			
		||||
  // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",
 | 
			
		||||
  "MES_DATA",
 | 
			
		||||
  (msg) => {
 | 
			
		||||
    let serializedData: { type: string; data: any } | null = null;
 | 
			
		||||
    try {
 | 
			
		||||
      serializedData = JSON.parse(msg.data);
 | 
			
		||||
    } catch (error) {
 | 
			
		||||
      console.log("[*] websocket: [unable to serialize] --->  ", msg);
 | 
			
		||||
    }
 | 
			
		||||
    switch (serializedData?.type) {
 | 
			
		||||
      case "EnergyInfo": {
 | 
			
		||||
        // 能耗数据
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "energy/setInfo",
 | 
			
		||||
          payload: serializedData.data,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      default: {
 | 
			
		||||
        console.log("websocket message: [unknown] --->  ", msg.data);
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  energeHandler
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
// 产线缺陷相关数据
 | 
			
		||||
@@ -210,98 +55,22 @@ new XClient(
 | 
			
		||||
  "ws://10.70.2.2:8080/websocket/message?userId=IS" + newUser,
 | 
			
		||||
  // "ws://192.168.0.33:48082/websocket/message?userId=IS111",
 | 
			
		||||
  "QUALITY_DATA",
 | 
			
		||||
  (msg) => {
 | 
			
		||||
    let serializedData: MessageItem | null = null;
 | 
			
		||||
    try {
 | 
			
		||||
      serializedData = JSON.parse(msg.data);
 | 
			
		||||
    } catch (error) {
 | 
			
		||||
      console.log("[*] websocket: [unable to serialize] --->  ", msg);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    console.log("[ISRA DATA] ---> ", serializedData);
 | 
			
		||||
 | 
			
		||||
    if (serializedData == null) return;
 | 
			
		||||
 | 
			
		||||
    // 处理 checkTypeList
 | 
			
		||||
    store.dispatch({
 | 
			
		||||
      type: "isra/setCheckType",
 | 
			
		||||
      payload: serializedData.checkType,
 | 
			
		||||
    });
 | 
			
		||||
    // for (const checkType of serializedData.checkTypeList) {
 | 
			
		||||
    //   store.dispatch({
 | 
			
		||||
    //     type: 'isra/setCheckTypeList',
 | 
			
		||||
    //     payload: serializedData.checkTypeList
 | 
			
		||||
    //   })
 | 
			
		||||
    // }
 | 
			
		||||
 | 
			
		||||
    // 处理 dayStatistic 等数据
 | 
			
		||||
    if ("dayStatistic" in serializedData) {
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "isra/setDayStatistic",
 | 
			
		||||
        payload: serializedData.dayStatistic,
 | 
			
		||||
      });
 | 
			
		||||
    } else if ("weekStatistic" in serializedData) {
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "isra/setWeekStatistic",
 | 
			
		||||
        payload: serializedData.weekStatistic,
 | 
			
		||||
      });
 | 
			
		||||
    } else if ("monthStatistic" in serializedData) {
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "isra/setMonthStatistic",
 | 
			
		||||
        payload: serializedData.monthStatistic,
 | 
			
		||||
      });
 | 
			
		||||
    } else if ("yearStatistic" in serializedData) {
 | 
			
		||||
      store.dispatch({
 | 
			
		||||
        type: "isra/setYearStatistic",
 | 
			
		||||
        payload: serializedData.yearStatistic,
 | 
			
		||||
      });
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  IsHandler
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
type TableDataType = {
 | 
			
		||||
  name: "table";
 | 
			
		||||
  type: "cutting";
 | 
			
		||||
  data: any[];
 | 
			
		||||
};
 | 
			
		||||
type ChartDataType = {
 | 
			
		||||
  name: "chart";
 | 
			
		||||
  type: "cutting";
 | 
			
		||||
  nightPushData: any[];
 | 
			
		||||
  dayPushData: any[];
 | 
			
		||||
  allPushData: any[];
 | 
			
		||||
  dateType: "day" | "week" | "month" | "year";
 | 
			
		||||
};
 | 
			
		||||
// 良品率相关数据
 | 
			
		||||
new XClient(
 | 
			
		||||
  // "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
 | 
			
		||||
  "ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
 | 
			
		||||
  "CUTTING_DATA",
 | 
			
		||||
  (msg) => {
 | 
			
		||||
    let serializedData: TableDataType | ChartDataType | null = null;
 | 
			
		||||
    try {
 | 
			
		||||
      serializedData = JSON.parse(msg.data);
 | 
			
		||||
    } catch (error) {
 | 
			
		||||
      console.log("[*] websocket: [unable to serialize] --->  ", msg);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    console.log("[CUTTING DATA] ---> ", serializedData);
 | 
			
		||||
 | 
			
		||||
    if (serializedData == null) return;
 | 
			
		||||
 | 
			
		||||
    switch (serializedData.name) {
 | 
			
		||||
      case "table":
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "cutting/setCuttingTable",
 | 
			
		||||
          payload: serializedData,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
      case "chart":
 | 
			
		||||
        store.dispatch({
 | 
			
		||||
          type: "cutting/setCuttingChart",
 | 
			
		||||
          payload: serializedData,
 | 
			
		||||
        });
 | 
			
		||||
        break;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  cuttingHandler
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
export function randomInt(min: number, max: number, includeMax = false) {
 | 
			
		||||
  let Fn = includeMax ? Math.ceil : Math.floor;
 | 
			
		||||
  let num = Fn(Math.random() * max);
 | 
			
		||||
  while (num < min) {
 | 
			
		||||
    num = Fn(Math.random() * max);
 | 
			
		||||
  }
 | 
			
		||||
  return num;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user