yongxu-web/src/pages/DataBoard/sliderData.tsx

import React, { useEffect, useRef } from 'react';
import * as datav from '@jiaminghi/data-view-react';
import styles from './sliderData.less';
import * as echarts from 'echarts';
import { connect } from '@@/plugin-dva/exports';

interface propsData {
  data: any;
  MQTTMessage: any;
}

/**
 * 底部轮播
 * @constructor
 */
const SliderData: React.FC<propsData> = (props) => {
  const { MQTTMessage, data } = props;
  const chartRef: any = useRef();

  useEffect(() => {
    if (MQTTMessage.message?.DeviceCode === data.electric_id) {
      console.log();
    }

    const myChart = echarts.init(chartRef.current);
    const options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#57617B',
          },
        },
      },
      grid: {
        top: '10%',
        left: '0',
        right: '5%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false,
          },
          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35'],
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '单位（%）',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
            },
          },
          splitLine: { show: false },
        },
      ],
      series: [
        {
          name: '移动',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 3,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: 'rgba(16,97,204, 0.3)',
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(17,235,210, 0)',
                  },
                ],
                false,
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10,
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(16,97,204,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(17,235,210,1)',
                },
              ]),
            },
            emphasis: {
              color: 'rgb(0,196,132)',
              borderColor: 'rgba(0,196,132,0.2)',
              extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
              borderWidth: 10,
            },
          },
          data: [220, 182, 191, 134, 150, 120, 110, 125],
        },
      ],
    };
    myChart.setOption(options, true);
    // 组件卸载
    return () => {
      myChart.dispose();
    };
  }, []);

  return (
    <div>
      <datav.BorderBox12
        className={styles.decoration_bottom_border}
        style={{ width: '40vw', height: '26vh' }}
      >
        <div className={styles.home_detail}>
          <div className={styles.detail_left}>
            <div className={styles.detail_left_left}>
              {/*<img src={home} alt="家图标" className={styles.home_icon}/>*/}
              <div className={styles.decoration_on} />
              <div className={styles.home_name}>{data?.home_name ? data?.home_name : '我的家'}</div>
            </div>
            <div className={styles.detail_left_right}>
              <table className={styles.detail_item}>
                <tr>
                  <td className={styles.detail_item_title}>管理员</td>
                  <td className={styles.detail_item_value}>{data?.admin}</td>
                </tr>
                <tr>
                  <td className={styles.detail_item_title}>是否在线</td>
                  <td className={styles.detail_item_value}>{data?.is_online ? '在线' : '离线'}</td>
                </tr>
                <tr>
                  <td className={styles.detail_item_title}>运行状态</td>
                  <td className={styles.detail_item_value}>{{ 0: '关', 1: '开' }[data?.power]}</td>
                </tr>
                <tr>
                  <td className={styles.detail_item_title}>模式</td>
                  <td className={styles.detail_item_value}></td>
                </tr>
              </table>
            </div>
          </div>
          <div className={styles.detail_right}>
            <div className={styles.detail_right_top}>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>电压</div>
                <div className={styles.content_value}></div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>设定温度</div>
                <div className={styles.content_value}>{data?.set_temp}</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>室内温度</div>
                <div className={styles.content_value}>{data?.temperature}</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>湿度</div>
                <div className={styles.content_value}>{data?.humidity}</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>PM25</div>
                <div className={styles.content_value}>{data?.air_quality}</div>
              </div>
              <div className={styles.detail_right_top_content}>
                <div className={styles.content_title}>CO2</div>
                <div className={styles.content_value}>{data?.co2}</div>
              </div>
            </div>
            <div style={{ color: '#fff', marginTop: '10px' }}>用电量</div>
            <div ref={chartRef} style={{ width: '23w', height: '13vh' }} />
          </div>
        </div>
      </datav.BorderBox12>
    </div>
  );
};
export default connect(({ MQTTMessage }: any) => ({
  MQTTMessage,
}))(SliderData);