energy_storage/bin/Release/assets/html/pages/系统总览.html

<div class="myrow" style="height:100%; padding: 10px;">
  <div style="width: 25%; height: 100%; overflow: hidden">
    <div class="mypanel " style="height: calc((100% - 12px) * 0.30)">
      <div class="mypanel-title myline-lb">运行状况</div>
      <div class="myrow" style="width: 100%; height: calc(100% - 40px); margin-top: 10px">
        <div class="label-bkg" style="width: 30%">
          <div class="label-val-lg">35</div>
          <div class="label-tail" style="align-items: flex-end;">天</div>
          <div class="label-key" style="font-size: 30px; align-items: flex-start">安全运行</div>
        </div>
        <div class="mycol" style="width: 70%; margin-left: 5px">
          <div class="myrow" style="width: 100%; height: 33%">
            <div class="label-bkg" style="width: 50%; height: 100%">
              <div class="label-key">风机设备</div>
              <div id="windTurbineNum" class="label-val">0</div>
              <div class="label-tail">台</div>
            </div>
            <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
              <div class="label-key">光伏设备</div>
              <div id="solarNum" class="label-val">0</div>
              <div class="label-tail">台</div>
            </div>
          </div>
          <div class="myrow" style="width: 100%; height: 33%; margin-top: 5px">
            <div class="label-bkg" style="width: 50%; height: 100%">
              <div class="label-key">累计发电电量</div>
              <div id="electricTotal" class="label-val">0</div>
              <div class="label-tail">kWh</div>
            </div>
            <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
              <div class="label-key">累计入网电量</div>
              <div id="electricInTotal" class="label-val">0</div>
              <div class="label-tail">kWh</div>
            </div>
          </div>
          <div class="myrow" style="width: 100%; height: 33%; margin-top: 5px">
            <div class="label-bkg" style="width: 50%; height: 100%">
              <div class="label-key">累计收益</div>
              <div id="incomeTotal" class="label-val">0</div>
              <div class="label-tail">元</div>
            </div>
            <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
              <div class="label-key">碳减排量</div>
              <div id="carbonReduction" class="label-val">0</div>
              <div class="label-tail">吨</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mypanel" style="height: calc((100% - 12px) * 0.34)">
      <div class="mypanel-title myline-lb">光伏设备</div>
      <div class="myrow" style="margin-top: 10px">
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
          <div class="label-key">日发电电量</div>
          <div class="label-val">0</div>
          <div class="label-tail">kWh</div>
        </div>
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
          <div class="label-key">日入网电量</div>
          <div class="label-val">0</div>
          <div class="label-tail">kWh</div>
        </div>
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
          <div class="label-key">日收益金额</div>
          <div class="label-val">0</div>
          <div class="label-tail">元</div>
        </div>
      </div>
      <div id="mychartSolar" style="width: 100%; height: calc(100% - 90px)"></div>
    </div>

    <div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
      <div class="mypanel-title myline-lb">储能设备</div>
      <div class="myrow" style="margin-top: 10px">
        <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 0px">
          <div class="label-key">日充电电量</div>
          <div class="label-val">0</div>
          <div class="label-tail">kWh</div>
        </div>
        <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
          <div class="label-key">日放电电量</div>
          <div class="label-val">0</div>
          <div class="label-tail">kWh</div>
        </div>
      </div>
      <div id="mychartStorage" style="width: 100%; height: calc(100% - 90px)"></div>
    </div>
  </div>

  <div style="margin-left: 10px; width: 50%; height: 100%; overflow: hidden; font-size: 14px;">
    <div class="mypanel" style="height: calc((100% - 12px) * 0.64 + 10px); background-color: #012036;">
      <div class="myrow" style="justify-content: center ; ">
        <div style="display: flex; width: 20%;">
          <div style="width:5px; height: 50px; background-color: #f69b52;"></div>
          <img src="./res/icon-brightness.png"
            style="width:50px; height: 50px;  object-fit: fill; background-color: #f69b5250;">
          <!-- <div style="width:50px; height: 50px; background-color: #f69b5250;"></div> -->
          <div class="mycol" style="margin-left: 10px; margin-top: 5px;">
            <div>光照</div>
            <div id="envIllumination">--</div>
          </div>
        </div>
        <div style="display: flex;width: 20%;">
          <div style="float: left;width:5px; height: 50px; background-color: #9bd801;"></div>
          <img src="./res/icon-windspeed.png"
            style="width:50px; height: 50px;  object-fit: fill; background-color: #9bd80150;">
          <!-- <div style="width:50px; height: 50px; background-color: #9bd80150;"></div> -->
          <div class="mycol" style="margin-left: 10px; margin-top: 5px;">
            <div>风速</div>
            <div id="envWindspeed">--</div>
          </div>
        </div>
        <div style="display: flex;width: 20%;">
          <div style="float: left;width:5px; height: 50px; background-color: #3dfefa;"></div>
          <img src="./res/icon-temperature.png"
            style="width:50px; height: 50px;  object-fit: fill; background-color: #3dfefa50;">
          <!-- <div style="width:50px; height: 50px; background-color: #3dfefa50;"></div> -->
          <div class="mycol" style="margin-left: 10px; margin-top: 5px;">
            <div>环境温度</div>
            <div id="envTemperture">--</div>
          </div>
        </div>
        <div style="display: flex;width: 20%;">
          <div style="float: left;width:5px; height: 50px; background-color: #d83d6c;"></div>
          <img src="./res/icon-humidity.png"
            style="width:50px; height: 50px;  object-fit: fill; background-color: #d83d6c50;">
          <!-- <div style="width:50px; height: 50px; background-color: #d83d6c50;"></div> -->
          <div class="mycol" style="margin-left: 10px; margin-top: 5px;">
            <div>环境湿度</div>
            <div id="envHumidity">--</div>
          </div>
        </div>
      </div>
      <img src="./res/overview.png" style="width: 100%; height: calc(100% - 60px); object-fit: fill; margin-top: 20px;">
      </img>
    </div>
    <div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
      <div class="mypanel-title myline-lb">发电功率和辐照度</div>
      <div id="mychartRunning" style="width: 100%; height: 90%"></div>
    </div>
  </div>

  <div style="margin-left: 10px; width: 25%; height: 100%; overflow: hidden">
    <div class="mypanel" style="height: calc((100% - 12px) * 0.30)">
      <div class="mypanel-title myline-lb">负荷设备</div>
      <div class="myrow" style="margin-top: 10px">
        <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 0px">
          <div class="label-key">日用电电量</div>
          <div class="label-val">0</div>
          <div class="label-tail">kWh</div>
        </div>
        <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 5px">
          <div class="label-key">日最大功率</div>
          <div class="label-val">0</div>
          <div class="label-tail">kW</div>
        </div>
      </div>
      <div id="mychartLoad" style="width: 100%; height: calc(100% - 90px)"></div>
    </div>

    <div class="mypanel" style="height: calc((100% - 12px) * 0.34)">

      <div class="mypanel-title myline-lb">充电设备</div>

      <div class="myrow" style="margin-top: 10px">
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
          <div class="label-key">日充电电量</div>
          <div class="label-val">0</div>
          <div class="label-tail">kWh</div>
        </div>
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
          <div class="label-key">日充电次数</div>
          <div class="label-val">10</div>
          <div class="label-tail">次</div>
        </div>
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
          <div class="label-key">日充电收益</div>
          <div class="label-val">0</div>
          <div class="label-tail">元</div>
        </div>
      </div>
      <div id="mychartCharge" style="width: 100%; height: calc(100% - 90px)"></div>
    </div>

    <div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
      <div class="mypanel-title myline-lb">告警信息</div>
      <div class="myrow" style="margin-top: 10px">
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
          <div class="label-key">日光伏设备告警</div>
          <div class="label-val">1</div>
          <div class="label-tail">次</div>
        </div>
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
          <div class="label-key">日储能设备告警</div>
          <div class="label-val">2</div>
          <div class="label-tail">次</div>
        </div>
        <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 5px">
          <div class="label-key">日负荷设备告警</div>
          <div class="label-val">3</div>
          <div class="label-tail">次</div>
        </div>
      </div>
      <div id="mychartAlert" style="width: 100%; height: calc(100% - 90px)"></div>
    </div>
  </div>

</div>