energy_storage/bin/Release/assets/html/pages/运行监控.html

<div class="mypanelstat" style="width:100%; height: calc(100% - 20px); margin: 10px">
  <div class="myrow" style="height: 100%">
    <div class="mycol" style="width: 300px; height: 100%; padding-top: 10px; ">
      <div id="solarCardBtn" class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'solar')">
        <div class="mypanel-title">光伏系统</div>
        <div class="mycol" style="margin-top: 20px; height:60%">
          <div id="solarDeviceNum">光伏板数量: 100 个</div>
          <div class="myrow" style="font-size: 14px; margin-top: 10px;">
            <div id="solarIdleNum">空闲: 0 个</div>
            <div id="solarOfflineNum" style="margin-left: 30px;">离线: 0 个</div>
            <div id="solarFaultNum" style="margin-left: 30px;">故障: 0 个</div>
          </div>
        </div>
      </div>
      <div class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'storage')">
        <div class="mypanel-title">储能系统</div>
        <div class="mycol" style="margin-top: 20px; height:60%">
          <div id="storageDeviceNum">储能电池数量: 0 个</div>
          <div class="myrow" style="font-size: 14px; margin-top: 10px;">
            <div id="storageIdleNum">空闲: 0 个</div>
            <div id="storageOfflineNum" style="margin-left: 30px;">离线: 0 个</div>
            <div id="storageFaultNum" style="margin-left: 30px;">故障: 0 个</div>
          </div>
        </div>
      </div>
      <div class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'charge')">
        <div class="mypanel-title">充电系统</div>
        <div class="mycol" style="margin-top: 20px; height:60%">
          <div id="chargeDeviceNum">充电桩数量: 0 个</div>
          <div class="myrow" style="font-size: 14px; margin-top: 10px;">
            <div id="chargeIdleNum">空闲: 0 个</div>
            <div id="chargeOfflineNum" style="margin-left: 30px;">离线: 0 个</div>
            <div id="chargeFaultNum" style="margin-left: 30px;">故障: 0 个</div>
          </div>
        </div>
      </div>
      <div class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'load')">
        <div class="mypanel-title">负荷系统</div>
        <div class="mycol" style="margin-top: 20px; height:60%">
          <div id="loadDeviceNum">照明设备数量: 0 个</div>
          <div class="myrow" style="font-size: 14px; margin-top: 10px;">
            <div id="loadIdleNum">空闲: 0 个</div>
            <div id="loadOfflineNum" style="margin-left: 30px;">离线: 0 个</div>
            <div id="loadFaultNum" style="margin-left: 30px;">故障: 0 个</div>
          </div>
        </div>
      </div>
      <div class="mycardbtn" style="height: 15%;" onclick="onClickCardBtn(this, 'security')">
        <div class="mypanel-title">安防系统</div>
        <div class="mycol" style="margin-top: 20px; height:60%">
          <div id="securityDeviceNum">摄像头数量: 0 个</div>
          <div class="myrow" style="font-size: 14px; margin-top: 10px;">
            <div>空闲: 0 个</div>
            <div style="margin-left: 30px;">离线: 0 个</div>
            <div style="margin-left: 30px;">故障: 0 个</div>
          </div>
        </div>
      </div>
    </div>

    <div class="myrow" style="width: calc(100% - 300px); height: 100%; ">

      <div id="deviceList" class="myrow" style="width: 100%; height: 100%; flex-wrap: wrap; overflow-y: auto;">
        <!-- <div class="mycard">
          <div class='btn-group' style="width: 80px; position: absolute; left: 100px; top: 30px;">
            <input id="_off" type="checkbox" class="btn-check" //
              onclick="G.switchSetStatus('_on', '_off', !this.checked)" checked />
            <label class="btn btn-outline-danger" for="_off" style="padding: 0;">关</label>
            <input id="_on" type="checkbox" class="btn-check" //
              onclick="G.switchSetStatus('_on', '_off', this.checked)" />
            <label class="btn btn-outline-success" for="_on" style="padding: 0;">开</label>
          </div>
        </div> -->
      </div>
      <div id="envpanel" style="width: 300px; height: 100%; display: block">
        <div class="mycol" style="width: 250px; height: 100%; padding: 12px;">
          <div style="font-size: 16px; font-weight: 600;">环境温湿度信息</div>
          <div class="mypanel-line"></div>
          <div style="margin-top: 12px;">
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between;  border: solid #00fffb; border-radius: 8px 8px 0 0; border-width: 1px 1px 0 1px; background-color: #115d73; height: 40px;line-height: 40px;">
              <div style="width: 33%; text-align: center;">点位</div>
              <div style="width: 33%; text-align: center;">温度</div>
              <div style="width: 33%; text-align: center;">湿度</div>
            </div>
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between;  border: solid #00fffb; border-radius: 0 0 8px 8px; border-width: 0 1px 1px 1px; height: 40px; line-height: 40px;">
              <div style="width: 33%; text-align: center;">#1</div>
              <div style="width: 33%; text-align: center;">20℃</div>
              <div style="width: 33%; text-align: center;">20%</div>
            </div>
          </div>

          <div style="font-size: 16px; font-weight: 600; margin-top: 30px;">消防信息</div>
          <div class="mypanel-line"></div>
          <div style="margin-top: 12px;  border: 1px solid #00fffb; border-radius: 8px; ">
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between;  border-radius: 8px 8px 0 0; background-color: #115d73; height: 40px;line-height: 40px;">
              <div style="width: 50%; text-align: center;">点位</div>
              <div style="width: 50%; text-align: center;">烟感状态</div>
            </div>
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
              <div style="width: 50%; text-align: center;">#1</div>
              <div style="width: 50%; text-align: center;">正常</div>
            </div>
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
              <div style="width: 50%; text-align: center;">#1</div>
              <div style="width: 50%; text-align: center;">正常</div>
            </div>
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
              <div style="width: 50%; text-align: center;">#1</div>
              <div style="width: 50%; text-align: center;">正常</div>
            </div>
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
              <div style="width: 50%; text-align: center;">#1</div>
              <div style="width: 50%; text-align: center;">正常</div>
            </div>
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
              <div style="width: 50%; text-align: center;">#1</div>
              <div style="width: 50%; text-align: center;">正常</div>
            </div>
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
              <div style="width: 50%; text-align: center;">#1</div>
              <div style="width: 50%; text-align: center;">正常</div>
            </div>
            <div class="myrow"
              style="font-size: 14px; font-weight: 600; justify-content: space-between; height: 40px; line-height: 40px;">
              <div style="width: 50%; text-align: center;">#1</div>
              <div style="width: 50%; text-align: center;">正常</div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div id="deviceSettingPop" class="mask" style="display: none;">
      <div
        style="margin: 200px auto;width:800px; padding: 20px; height: 500px; background-color: #012036f0; border:4px solid #14dcfb; ">
        <div class="myline-b" style="color:white;">控制功能</div>
        <div style="display: flex; justify-content: center; width: 100%; margin-top: 100px;">
          <button class="btn btn-success" style="width:80px; color: white;"
            onclick="G.showElement('deviceSettingPop', false)">确定</button>
          <button class="btn btn-default" style="width:80px; color: white; margin-left: 50px;"
            onclick="G.showElement('deviceSettingPop', false)">取消</button>
        </div>
      </div>
    </div>

  </div>
</div>