main

分支 (1)

管理

管理

main

hengshi-echarts
/
testing.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合能源算法管理平台-调优监测</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/testing.css">
</head>

<body>

  <!-- 返回按钮 -->
  <a href="./login.html" class="back"></a>

  <!-- 公共头部 -->
  <div class="header">
    <a href="./testing.html" class="active">调优监测</a>
    <a href="./effect.html">调优效果</a>
    <a href="./manage.html">碳排管理</a>
    <a href="#">产品单耗</a>
  </div>

  <!-- 看板信息 -->
  <div class="info">
    <div class="item">
      <div class="title">现货价格</div>
      <ul>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>电力现货：</span>
          <i>0.7219 元/kWh</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>生物质颗粒：</span>
          <i>800 元/吨</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>碳CCER：</span>
          <i>91.55 元/吨CO2</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>桉树皮：</span>
          <i>102.82元/吨</i>
        </li>
      </ul>
    </div>
    <div class="item">
      <div class="title">供电监测</div>
      <ul>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>光伏出口电压：</span>
          <i>398.53 V</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>充电桩瞬时功率：</span>
          <i> 550.26kW</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>风机出口电压：</span>
          <i>401.79V</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>充电桩今日累计充电量：</span>
          <i>1855.91kWh</i>
        </li>
      </ul>
    </div>
    <div class="item">
      <div class="title">供冷监视</div>
      <ul>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>瞬时SCOP：</span>
          <i>4.2</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>逐月SCOP：</span>
          <i>4.1</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>负载率：</span>
          <i>92.14%</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>厂房5温度：</span>
          <i>25.9℃</i>
        </li>
      </ul>
    </div>
    <div class="item">
      <div class="title">供热监视</div>
      <ul>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>供热气压：</span>
          <i>0.51MPa</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>蒸汽温度：</span>
          <i>185.52℃</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>负载率：</span>
          <i> 82.35%</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>生物质仓储：</span>
          <i>21天</i>
        </li>
      </ul>
    </div>
  </div>

  <!-- AI预测 -->
  <div class="main">

    <!-- 第一行 -->
    <div class="row">
      <div class="content one"></div>
      <div class="box">
        <div class="title1"></div>
        <div class="box1"></div>
      </div>
      <div class="box">
        <div class="title2"></div>
        <div class="box2"></div>
      </div>
      <div class="box">
        <div class="title3"></div>
        <div class="box3"></div>
      </div>
      <div class="box">
        <div class="title4"></div>
        <div class="box4"></div>
      </div>
    </div>

    <!-- 第二行 -->
    <div class="row">
      <div class="content two"></div>
      <div class="box">
        <div class="title5"></div>
        <div class="box5"></div>
      </div>
      <div class="box">
        <div class="title6"></div>
        <div class="box6"></div>
      </div>
      <div class="box">
        <div class="title7"></div>
        <div class="box7"></div>
      </div>
      <div class="box">
        <div class="title8"></div>
        <div class="box8"></div>
      </div>
    </div>

    <!-- 第三行 -->
    <div class="row">
      <div class="content three"></div>
      <div class="box">
        <div class="title9"></div>
        <div class="box9"></div>
      </div>
      <div class="box">
        <div class="title10"></div>
        <div class="box10"></div>
      </div>
      <div class="box">
        <div class="title11"></div>
        <div class="box11"></div>
      </div>
      <div class="box">
        <div class="title12"></div>
        <div class="box12"></div>
      </div>
    </div>

  </div>

  <div class="time">调优周期：15min 最新调优时间：2024/8/8 16:15</div>


  <script src="./js/ip.js"></script>
  <script src="./js/mqtt.min.js"></script>
  <script src="./lib/echarts.js"></script>
  <script src="./js/data.js"></script>
  <script src="./js/data2.js"></script>
  <script>
    let count
    const timeHTML = document.querySelector('.time')

    // 首屏渲染
    getTime()

    // 文本大小缩放
    // 改变图表字体大小
    function transformFontSize(fontsize) {
      // 获取屏幕宽度
      const width = document.body.scrollWidth;
      const ratio = width / 1920;
      return parseInt(fontsize * ratio);
    }

    // 电负荷预测-----------------------------------------
    let myChart1 = echarts.init(document.querySelector('.box1'))
    let option1 = {
      title: {
        text: 'kW',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '10%',
        top: '0%'
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: electricLoadX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '15%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true,
        formatter: function (params) {
          // 自定义显示内容
          // params 是一个包含当前数据信息的数组或对象
          let result = params[0].name + '<br/>';
          // params.forEach(function (item) {
          result += params[0].seriesName + ': ' + params[0].value + '<br/>';
          // });
          return result;
        }
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: electricLoadY1,
          type: 'line',
          color: '#00DFFF',
          name: '电负荷 （kW）',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: electricLoadY2,
          type: 'line',
          color: '#00DFFF',
          name: '电负荷预测（kW）',
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            type: 'dotted'
          }
        }
      ]
    }

    // 冷负荷预测-----------------------------------------
    let myChart2 = echarts.init(document.querySelector('.box2'))
    let option2 = {
      title: {
        text: 'kW',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '10%',
        top: '0%'
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: coldLoadX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '15%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true,
        formatter: function (params) {
          // 自定义显示内容
          // params 是一个包含当前数据信息的数组或对象
          let result = params[0].name + '<br/>';
          // params.forEach(function (item) {
          result += params[0].seriesName + ': ' + params[0].value + '<br/>';
          // });
          return result;
        }
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: coldLoadY1,
          type: 'line',
          color: '#00A1FF',
          name: '冷负荷（kW）',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: coldLoadY2,
          type: 'line',
          color: '#00A1FF',
          name: '冷负荷预测（kW）',
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            type: 'dotted'
          }
        }
      ]
    }
    // 热负荷预测-----------------------------------------
    let myChart3 = echarts.init(document.querySelector('.box3'))
    let option3 = {
      title: {
        text: '吨/h（蒸汽）',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '3%',
        top: '0%'
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: hotLoadX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '10%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true,
        formatter: function (params) {
          // 自定义显示内容
          // params 是一个包含当前数据信息的数组或对象
          let result = params[0].name + '<br/>';
          // params.forEach(function (item) {
          result += params[0].seriesName + ': ' + params[0].value + '<br/>';
          // });
          return result;
        }
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: hotLoadY1,
          type: 'line',
          color: '#F75656',
          name: '热负荷（蒸汽，吨/h）',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: hotLoadY2,
          type: 'line',
          color: '#F75656',
          name: '热负荷预测（蒸汽，吨/h）',
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            type: 'dotted'
          }
        }
      ]
    }

    // 生物质价格预测-----------------------------------------
    let myChart4 = echarts.init(document.querySelector('.box4'))
    let option4 = {
      title: {
        text: '元',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '7%',
        top: '0%'
      },
      legend: {
        data: ['生物质颗粒价格', '桉树皮价格'],
        itemGap: 5,
        itemWidth: 10,
        itemHeight: 0,
        top: 5,
        left: 'center',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(12),
        }
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: biomassPriceX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '12%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      tooltip: {
        trigger: 'axis',
        appendToBody: true,
        formatter: function (params) {
          let result
          // 自定义显示内容
          console.log(params.length, 111111111)

          // params 是一个包含当前数据信息的数组或对象
          if (params.length <= 2) {
            // result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>';
            result = params[0].name + '<br/>';
            params.forEach(function (item) {
              result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
              result += item.seriesName + ': ' + item.value + '<br/>';
            });
          } else {
            result = params[0].name + '<br/>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>' + params[0].seriesName + ': ' + params[0].value + '<br/>';
            result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[2].color + '"></span>';
            result += params[2].seriesName + ': ' + params[2].value + '<br/>'
          }
          return result;
        }
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: biomassPriceY1,
          type: 'line',
          color: '#00A1FF',
          name: '生物质颗粒价格',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: biomassPriceY2,
          type: 'line',
          color: '#00A1FF',
          name: '生物质颗粒预测',
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            type: 'dotted'
          }
        },
        {
          symbol: 'none',
          data: casuarinaPriceY1,
          type: 'line',
          color: '#F2D93A',
          name: '桉树皮价格',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: casuarinaPriceY2,
          type: 'line',
          color: '#F2D93A',
          name: '桉树皮价格预测',
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            type: 'dotted'
          }
        },
      ]
    }

    // 光伏出力-----------------------------------------
    let myChart5 = echarts.init(document.querySelector('.box5'))
    let option5 = {
      title: {
        text: 'kW',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '10%',
        top: '0%'
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: pvOutputX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '15%',
        top: '17%',
        bottom: '12%',
        right: '5%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true,
        formatter: function (params) {
          // 自定义显示内容
          // params 是一个包含当前数据信息的数组或对象
          let result = params[0].name + '<br/>';
          // params.forEach(function (item) {
          result += params[0].seriesName + ': ' + params[0].value + '<br/>';
          // });
          return result;
        }
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: pvOutputY1,
          type: 'line',
          color: '#7B4CFF',
          name: '光伏出力（kW）',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: pvOutputY2,
          type: 'line',
          color: '#7B4CFF',
          name: '光伏出力预测（kW）',
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            type: 'dotted'
          }
        }
      ]
    }

    // 风机出力--------------------------------
    let myChart6 = echarts.init(document.querySelector('.box6'))
    let option6 = {
      title: {
        text: 'kW',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '10%',
        top: '0%'
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: windOutputX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '12%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true,
        formatter: function (params) {
          // 自定义显示内容
          // params 是一个包含当前数据信息的数组或对象
          let result = params[0].name + '<br/>';
          // params.forEach(function (item) {
          result += params[0].seriesName + ': ' + params[0].value + '<br/>';
          // });
          return result;
        }
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: windOutputY1,
          type: 'line',
          color: '#00DFFF',
          name: '风机出力（kW）',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: windOutputY2,
          type: 'line',
          color: '#00DFFF',
          name: '风机出力预测（kW）',
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            type: 'dotted'
          }
        },
      ]
    }
    // 地源热泵出力-----------------------------------------
    let myChart7 = echarts.init(document.querySelector('.box7'))
    let option7 = {
      title: [{
        text: 'kW(电度)',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '5%',
        top: '0%'
      }, {
        text: 'kW(冷度)',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        right: '0%',
        top: '0%'
      }],
      legend: {
        data: ['用电功率', '供冷出力'],
        itemGap: 5,
        itemWidth: 10,
        itemHeight: 0,
        top: 5,
        left: 'center',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(12),
        }
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: geothermalOutputX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '12%',
        top: '17%',
        bottom: '12%',
        right: '12%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: geothermalOutputY1,
          type: 'line',
          color: '#FF8B31',
          name: '用电功率',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: geothermalOutputY1_1,
          type: 'line',
          color: '#00DFFF',
          name: '供冷出力',
          smooth: true,
          yAxisIndex: 1,
          // lineStyle: {
          //   type: 'dotted'
          // }
        },
      ]
    }
    // 蓄生物质供热-----------------------------------------
    let myChart8 = echarts.init(document.querySelector('.box8'))
    let option8 = {
      title: {
        text: '吨/h',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '3%',
        top: '0%'
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: biomassOutputX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '10%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: biomassOutputY1,
          type: 'line',
          color: '#00A1FF',
          name: '生物质出力（吨/h）',
          smooth: true,
          yAxisIndex: 0,
        },
        // {
        //   symbol: 'none',
        //   data: biomassOutputY2,
        //   type: 'line',
        //   color: '#00A1FF',
        //   name: '生物质供热预测',
        //   smooth: true,
        //   yAxisIndex: 0,
        //   lineStyle: {
        //     type: 'dotted'
        //   }
        // },
      ]
    }
    // 电化学储能出力-----------------------------------------
    let myChart9 = echarts.init(document.querySelector('.box9'))
    let option9 = {
      title: {
        text: 'kW',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '10%',
        top: '0%'
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: electrochemicalOutputX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '15%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: electrochemicalOutputY1,
          type: 'line',
          color: '#F2D93A',
          name: '电化学储能出力（kW）',
          smooth: true,
          yAxisIndex: 0,
        },
        // {
        //   symbol: 'none',
        //   data: electrochemicalOutputY2,
        //   type: 'line',
        //   color: '#F2D93A',
        //   name: '电化学储能出力预测',
        //   smooth: true,
        //   yAxisIndex: 0,
        //   lineStyle: {
        //     type: 'dotted'
        //   }
        // },
      ]
    }

    // 蓄冷出力-----------------------------------------
    let myChart10 = echarts.init(document.querySelector('.box10'))
    let option10 = {
      title: {
        text: 'kW',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '10%',
        top: '0%'
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: chillerOutputX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '13%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: chillerOutputY1,
          type: 'line',
          color: '#00A1FF',
          name: '供冷出力（kW）',
          smooth: true,
          yAxisIndex: 0,
        },
        // {
        //   symbol: 'none',
        //   data: chillerOutputY2,
        //   type: 'line',
        //   color: '#00A1FF',
        //   name: '蓄冷出力预测',
        //   smooth: true,
        //   yAxisIndex: 0,
        //   lineStyle: {
        //     type: 'dotted'
        //   }
        // },
      ]
    }

    // 蓄热出力-----------------------------------------
    let myChart11 = echarts.init(document.querySelector('.box11'))
    let option11 = {
      title: [{
        text: '吨/h',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '5%',
        top: '0%'
      }, {
        text: 'kW',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        right: '10%',
        top: '0%'
      }],
      textStyle: {
        fontSize: transformFontSize(14),
      },
      legend: {
        // data: ['用电功率（kW）', '供冷出力（kW）'],
        itemGap: 5,
        itemWidth: 10,
        itemHeight: 0,
        top: 5,
        left: 'center',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(12),
        }
      },
      xAxis: {
        type: 'category',
        data: boilerOutputX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '10%',
        top: '17%',
        bottom: '12%',
        right: '12%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: boilerOutputY1,
          type: 'line',
          color: '#F15556',
          name: '蓄热蒸汽出力',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: biomassOutputY1_1,
          type: 'line',
          color: '#00A1FF',
          name: '蓄热用电功率',
          smooth: true,
          yAxisIndex: 1,
          // lineStyle: {
          //   type: 'dotted'
          // }
        },
      ]
    }

    // LNG供热出力-----------------------------------------
    let myChart12 = echarts.init(document.querySelector('.box12'))
    let option12 = {
      title: {
        text: '吨/h',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(14)
        },
        left: '5%',
        top: '0%'
      },
      legend: {
        // data:['用电功率（kW）','供冷出力（kW）'],
        itemGap: 5,
        itemWidth: 10,
        itemHeight: 0,
        top: 5,
        left: 'center',
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(12),
        }
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      xAxis: {
        type: 'category',
        data: lngOutputX,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      grid: {
        left: '10%',
        top: '17%',
        bottom: '12%',
        right: '3%'
      },
      // legend: {
      //   textStyle: {
      //     color: '#ccc',
      //   }
      // },
      tooltip: {
        trigger: 'axis',
        appendToBody: true
      },
      yAxis: [
        {
          type: 'value',
          // name: 'MW',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(14)
          },
        },
      ],
      series: [
        {
          symbol: 'none',
          data: lngOutputY1,
          type: 'line',
          color: '#7B4CFF',
          name: '蒸汽出力',
          smooth: true,
          yAxisIndex: 0,
        },
        {
          symbol: 'none',
          data: lngOutputY1_1,
          type: 'line',
          color: '#F2D93A',
          name: 'LNG消耗',
          smooth: true,
          yAxisIndex: 0,
          // lineStyle: {
          //   type: 'dotted'
          // }
        },
      ]
    }


    // 设置echarts---------------------------------
    function renderCharts() {
      option1.series[0].data = electricLoadY2.slice(0, count + 1)
      option2.series[0].data = coldLoadY2.slice(0, count + 1)
      option3.series[0].data = hotLoadY2.slice(0, count + 1)
      // option4.series[0].data = biomassPriceY2.slice(0, count + 1)
      // option4.series[2].data = casuarinaPriceY2.slice(0, count + 1)
      option5.series[0].data = pvOutputY2.slice(0, count + 1)
      option6.series[0].data = windOutputY2.slice(0, count + 1)
      option7.series[0].data = geothermalOutputY2.slice(0, count + 1)
      option7.series[1].data = geothermalOutputY1_2.slice(0, count + 1)
      option8.series[0].data = biomassOutputY2.slice(0, count + 1)
      option9.series[0].data = electrochemicalOutputY2.slice(0, count + 1)
      option10.series[0].data = chillerOutputY2.slice(0, count + 1)
      option11.series[0].data = boilerOutputY2.slice(0, count + 1)
      option11.series[1].data = biomassOutputY1_2.slice(0, count + 1)
      option12.series[0].data = lngOutputY2.slice(0, count + 1)
      option12.series[1].data = lngOutputY1_2.slice(0, count + 1)
      myChart1.setOption(option1)
      myChart2.setOption(option2)
      myChart3.setOption(option3)
      myChart4.setOption(option4)
      myChart5.setOption(option5)
      myChart6.setOption(option6)
      myChart7.setOption(option7)
      myChart8.setOption(option8)
      myChart9.setOption(option9)
      myChart10.setOption(option10)
      myChart11.setOption(option11)
      myChart12.setOption(option12)
    }

    // 首屏渲染
    renderCharts()

    // echarts跟随屏幕变化而适配-----------------------
    window.addEventListener("resize", function () {
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
      myChart4.resize()
      myChart5.resize()
      myChart6.resize()
      myChart7.resize()
      myChart8.resize()
      myChart9.resize()
      myChart10.resize()
      myChart11.resize()
      myChart12.resize()
    })

    let time = ''


    // 每隔1min执行一次(更新数据)
    setInterval(function () {
      getTime()
      // 重新渲染数据
      renderCharts()
    }, 10000)


    // 根据当前时间获取第几个15min
    function getTime() {
      // 获取当前时间属于第几个15min
      let now = new Date()
      // 一个小时有4个15分钟
      let hours = now.getHours()
      let minutes = now.getMinutes()
      let seconds = now.getSeconds()
      // 几个15分钟
      count = hours * 4 + parseInt(minutes / 15)
      // 测试代码
      // count = seconds

      console.log(count)

      let timeHours = parseInt(count / 4)
      timeHours = timeHours < 10 ? '0' + timeHours : timeHours
      let timeMinutes = (count % 4 * 15)
      timeMinutes = timeMinutes < 10 ? '0' + timeMinutes : timeMinutes

      timeHTML.innerHTML = `调优周期：15min 最新调优时间： ${now.toLocaleDateString()} ${timeHours}:${timeMinutes}`
    }


    // 设置看板数据
    let num = 1
    let nameArr = [lookArr1, lookArr2, lookArr3, lookArr4]
    let info = document.querySelector('.info')
    function renderBoard(arr) {
      // console.log(arr)
      info.innerHTML = `
        <div class="item">
      <div class="title">现货价格</div>
      <ul>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>电力现货：</span>
          <i>${arr[0]}元/kWh</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>生物质颗粒：</span>
          <i>${arr[1]}元/吨</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>碳CCER：</span>
          <i>${arr[2]}元/吨CO2</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>桉树皮：</span>
          <i>${arr[3]}元/吨</i>
        </li>
      </ul>
    </div>
    <div class="item">
      <div class="title">供电监测</div>
      <ul>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>光伏出口电压：</span>
          <i>${arr[4]}V</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>充电桩瞬时功率：</span>
          <i>${arr[6]}kW</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>风机出口电压：</span>
          <i>${arr[5]}V</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>充电桩今日累计充电量：</span>
          <i>${arr[7]}kWh</i>
        </li>
      </ul>
    </div>
    <div class="item">
      <div class="title">供冷监视</div>
      <ul>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>瞬时SCOP：</span>
          <i>${arr[8]}</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>逐月SCOP：</span>
          <i>${arr[9]}</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>负载率：</span>
          <i>${arr[10]}</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>厂房5温度：</span>
          <i>${arr[11]}℃</i>
        </li>
      </ul>
    </div>
    <div class="item">
      <div class="title">供热监视</div>
      <ul>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>供热气压：</span>
          <i>${arr[12]}MPa</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>蒸汽温度：</span>
          <i>${arr[13]}℃</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>负载率：</span>
          <i>${arr[14]}</i>
        </li>
        <li>
          <img src="./images/编组 2@2x.png" alt="">
          <span>生物质仓储：</span>
          <i>${arr[15]}天</i>
        </li>
      </ul>
    </div>
      `
    }
    getMqtt()

    renderBoard(nameArr[0])

    // 定时器
    setInterval(() => {
      getMqtt()
      renderBoard(nameArr[num])
      num++
      if (num > 3) {
        num = 0
      }
    }, 5000)

    // 实时获取mqtt协议数据
    function getMqtt() {
      const client = mqtt.connect(`ws://${ip}:${port}`, {
        reconnectPeriod: 1000,
        connectTimeout: 30 * 1000,
      })

      // 当连接成功时触发
      client.on('connect', function () {
        console.log('连接成功')
      })

      // 订阅主题
      client.subscribe(url, function (err) {
        if (!err) {
          // 发布消息
          client.publish('test', 'Hello mqtt')
        }
      })

      // 当断开连接后，经过重连间隔时间重新自动连接到 Broker 时触发
      client.on('reconnect', function () {
        console.log('自动重连中...')
        // 1、GridVab
        lookArr1[4] = '--- '
        lookArr2[4] = '--- '
        lookArr3[4] = '--- '
        lookArr4[4] = '--- '
        // 2、lineVab
        lookArr1[5] = '--- '
        lookArr2[5] = '--- '
        lookArr3[5] = '--- '
        lookArr4[5] = '--- '
        // 3、RatedPower
        lookArr1[6] = '--- '
        lookArr2[6] = '--- '
        lookArr3[6] = '--- '
        lookArr4[6] = '--- '
        // 4、AccumulatedElectricity
        lookArr1[7] = '--- '
        lookArr2[7] = '--- '
        lookArr3[7] = '--- '
        lookArr4[7] = '--- '
      })

      // 在断开连接以后触发
      client.on('close', function () {
        console.log('连接断开了')
      })

      // 当客户端无法成功连接时或发生解析错误时触发，参数 error 为错误信息
      client.on('error', function (error) {
        console.log('连接出错了', error)

      })

      // 接收消息
      client.on('message', function (topic, message) {
        // message is Buffer
        let data = JSON.parse(message.toString())
        // 1、GridVab
        console.log(data.inverter.GridVab)
        lookArr1[4] = data.inverter.GridVab
        lookArr2[4] = data.inverter.GridVab
        lookArr3[4] = data.inverter.GridVab
        lookArr4[4] = data.inverter.GridVab
        // 2、lineVab
        console.log(data.elec_meter.lineVab)
        lookArr1[5] = data.elec_meter.lineVab
        lookArr2[5] = data.elec_meter.lineVab
        lookArr3[5] = data.elec_meter.lineVab
        lookArr4[5] = data.elec_meter.lineVab
        // 3、RatedPower
        console.log(data.charging.RatedPower)
        lookArr1[6] = data.charging.RatedPower
        lookArr2[6] = data.charging.RatedPower
        lookArr3[6] = data.charging.RatedPower
        lookArr4[6] = data.charging.RatedPower
        // 4、AccumulatedElectricity
        console.log(data.charging.AccumulatedElectricity)
        lookArr1[7] = data.charging.AccumulatedElectricity
        lookArr2[7] = data.charging.AccumulatedElectricity
        lookArr3[7] = data.charging.AccumulatedElectricity
        lookArr4[7] = data.charging.AccumulatedElectricity
        client.end()
      })
    }

  </script>
</body>

</html>