tqv-data-operation-screen/src/pages/tlk/component/leftMenoyView.jsx

/*
 * @Author: dayan_hjm 库存金额
 * @Date: 2023-10-23 09:32:12 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2024-10-28 13:59:03
 */


import React, { useState, useEffect, Component } from "react";
import styles from "../style.less";
import { useHistory, useLocation, withRouter } from "react-router-dom";
import mod from '../mod';
import { getArrMax } from "@utils/util";
import { getThousandNum } from "@utils/util";
import {
  momeyService,
} from "../api";

@withRouter

class LeftMenoyView extends Component {
  // 构造函数，组件的实例创建时，最先执行
  constructor(props, context) {
    super(props, context);
    this.store = mod;
    this.state = {
      max1: [],
      total: 0,
      year: [
        {
          name: "氢氧化锂（电池级）",
          tips: '/ LHM(BG)',
        },
        {
          name: "氢氧化锂（工业级）",
          tips: '/ LHM(PG)',
        },
        {
          name: "氢氧化锂（待检验）",
          tips: '/ LHM(PENDING)',
        },],
      missionsIntensity_arr: [
        { value: 0, name: "氢氧化锂（电池级）/ LHM(BG)" },
        { value: 0, name: "氢氧化锂（工业级）/ LHM(PG)" },
        { value: 0, name: '氢氧化锂（待检验）/ LHM(PENDING)' },
      ],
    };
  }

  componentDidMount() {
    this.getUrl()
  }

  async getUrl() {
    let data_style = [
      {
        value: 0, name: '氢氧化锂（电池级）/ LHM(BG)', itemStyle: {
          borderRadius: 20,
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(141, 147, 255, 0)'
            }, {
              offset: 1,
              color: 'rgba(141, 147, 255, 1)'
            }]),
          }
        }
      },
      {
        value: 0, name: '氢氧化锂（工业级）/ LHM(PG)', itemStyle: {
          borderRadius: 20,
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(255, 206, 0, 0)'
            }, {
              offset: 1,
              color: 'rgba(255, 206, 0, 1)'
            }]),
          }
        }
      },
      {
        value: 0, name: '油氢氧化锂（待检验）/ LHM(PENDING)', itemStyle: {
          borderRadius: 20,
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(105, 255, 222, 0)'
            }, {
              offset: 1,
              color: 'rgba(105, 255, 222, 1)'
            }]),
          }
        }
      },
    ]
    await momeyService().then(({ data = [], resultCode }) => {
      if (+resultCode === 0) {
        let total = 0, max1 = [], num = [];
        data.map((x, i) => {
          if (x.IndexCode == '11') {
            data_style[0].value = x.IndexValue;
            num.push(x.IndexValue)
            total += Number(x.IndexValue || 0)
          } else if (x.IndexCode == '12') {
            num.push(x.IndexValue)
            data_style[1].value = x.IndexValue;
            total += Number(x.IndexValue || 0)
          } else if (x.IndexCode == '13') {
            num.push(x.IndexValue)
            data_style[2].value = x.IndexValue;
            total += Number(x.IndexValue || 0)
          }
        });
        const max_1 = getArrMax(num);
        for (let index = 0; index < data_style.length; index++) {
          max1.unshift(max_1 / 0.8)
        }
        this.setState({ missionsIntensity_arr: data_style, total:total.toFixed(2), max1 });
        this.setData();
        this.setData2();
      }
    });

  }


  setData() {
    const new_arr = this.state.missionsIntensity_arr.reverse();
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts41'));
      var option = {

        grid: {
          left: '0%',
          top: '4%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          show: false,
        }],
        yAxis: [{
          axisTick: 'none',
          axisLine: 'none',
          offset: '7',
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,.9)',
              fontSize: '0',
            }
          },
          data: this.state.year
        },
        {
          name: '单位：件',
          nameGap: '50',
          nameTextStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '16',
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },
          data: [],
        }],
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: new_arr,
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: function (param) {
                return getThousandNum(param.value) + 't';
                // return param.name+"："+param.value + '万元';

              },
              textStyle: {
                color: '#CDF1FF',
                fontSize: '10',
              }
            }
          },
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
                { offset: 0.7, color: '#ffd01d94' },
                { offset: 1, color: '#ffd01d94' },
              ]),
              barBorderRadius: 15,
              // borderColor: "rgba(255, 206, 0, 1)",
              // borderWidth: 1
            }
          },
          labelLine: {
            length: 10,
            length2: 50,
          },
          // labelLayout: {
          //   x: "20%",
          //   y: "20%",
          //   verticalAlign: "bottom",
          //   dy: -10,
          // },
          z: 2
        }, {
          name: '白框',
          type: 'bar',
          yAxisIndex: 1,
          barGap: '-100%',
          data: this.state.max1,
          barWidth: 15,
          itemStyle: {
            normal: {
              color: '#ffffff24',
              barBorderRadius: 15,

            }
          },
          z: 1
        }]
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }, 3000)
  }

  setData2() {
    setTimeout(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts61'));
      var option = {
        calculable: true,
        series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            data:this.state.missionsIntensity_arr,
            itemStyle: {
              borderRadius: 20,
            },
            labelLine: {
              show: false,
            }, label: {
              show: false,
              position: 'center',
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    }, 3000)
  }

  render() {
    const { total } = this.state;
    const { changNun } = this.props;
    return (
      <div className={["eacharView cbLeftMenoyView"]}>
        <div id="echarts6_box">
          <img
            src={require("@assets/imgs/dataVimg/guanghuan.png").default}
            alt=""
            class="guanghuan animate__animated animate__pulse animate__infinite animate__slower"
          />

          <div id="echarts61"></div>
          <div className="text_total">
            <p>
              {changNun && <span className="topMsg_number">{getThousandNum(Number(total))}</span>}
              {!changNun && <span className="topMsg_number" class="shu1">{Number(total)}</span>}
              <span className="topMsg_number_2">t</span>
            </p>
            <span className="topMsg_number_3">总库存</span>
          </div>
        </div>
        <ul className={"name_ul"}>
          {
            this.state.year.map(x => {
              return (<li>{x.name}<span style={{ fontSize: "0.7em" }}>{x.tips}</span></li>)
            })
          }
        </ul>
        <div id="echarts41"></div>
      </div>
    )
  }
}
export default LeftMenoyView;