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

var mapDeviceTypeDef = new Map([
  ['1', '变压器'],
  ['2', '配电柜'],
  ['3', '电表'],
  ['4', '门禁'],
  ['5', '空调'],
  ['6', '照明'],
  ['7', '消防'],
  ['8', '光照监测设备'],
  ['9', '风速监测设备'],
  ['10', '温湿度监测设备'],
  ['11', '烟感监测设备'],
  ['12', '水浸传感器'],
  ['13', '视频监控'],
  ['101', '逆变器'],
  ['102', '汇流箱'],
  ['103', '光伏板'],
  ['104', '风力发电机'],
  ['105', '储能变流器'],
  ['106', '储能电池'],
  ['107', 'BMS'],
  ['108', '充电桩'],
  ['109', '充电枪'],
  ['110', '集中器'],
])

function getDeviceTypeId(name) {
  var res = ''
  mapDeviceTypeDef.forEach((v, k) => { if (v == name) { res = k } })
  return res;
}
function getDeviceTypeName(id) {
  var res = ''
  mapDeviceTypeDef.forEach((v, k) => { if (k == id) { res = v } })
  return res;
}

function addDeviceCardPanel(root, deviceid, name, type, subList) {
  var card = document.createElement('div')
  card.className = 'mycard'
  card.setAttribute('id', deviceid) // 设置id
  if (type == "充电桩") { card.style.width = '320px' }
  card.innerHTML =
    `<div class="myrow" style="margin-bottom: 20px">
      <div style="width:64px; height:64px; background-color: #2991b6;border-radius: 10px;"></div>
      <div class="mycol" style="margin-left: 10px; font-size:15px;">
        <div> ${deviceid} </div>
        <div style="font-size:15px;"> ${name} </div>
        <div style="color: #08afff; font-size:14px; font-weight: bold;"> ${type} </div>
      </div>
    </div>`

  // 充电桩区分1号枪和2号枪
  if (subList && subList.length > 1) {
    card.innerHTML +=
      `<div class="myrow">
        <div id="${deviceid}_${subList[0]}" style="width: calc(50% - 10px); border: solid gray; border-width: 0 1px 0 0;">
          <div class="myrow" style="font-size:14px; margin-left: 10px;">
            <div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
            <div style="margin-left: 10px;">#${subList[0]}</div>
          </div>
        </div>
        <div id="${deviceid}_${subList[1]}" style="width: calc(50% - 10px); margin-left: 10px;">
          <div class="myrow" style="font-size:14px; margin-left: 10px;">
            <div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
            <div style="margin-left: 10px;">#${subList[1]}</div>
          </div>
        </div>
      </div>`
  }
  root.appendChild(card)
  return card
}

/// =========================================================== 
// 创建设备卡片的参数信息
// @param deviceid: 设备 ID
// @param subid: 参数子分类 ID，如充电桩的充电枪的编号：1号枪，2号枪
// @param key: 参数名称
// @param key: 参数值
// 说明： 每个参数值的 element 的 id 设置为：{deviceid}_{subid}_{key}
function addDeviceCardParam(deviceid, subid, key, text) {
  var elemtid = deviceid + (subid ? ("_" + subid) : "") + "_" + key
  param = document.createElement('div')
  param.className = 'mycard-param'
  param.innerHTML = `<div class="mycard-param-key">${key}: </div>
    <div id="${elemtid}" class="mycard-param-text">${text}</div>`

  if (subid) {
    $('#' + deviceid + '_' + subid).append(param)
  } else {
    $('#' + deviceid).append(param)
  }
  if (text == '离线' | text == '故障') {
    $("#" + elemtid).css("color", "red")
  }
}

/// =========================================================== 
// 设置设备卡片的参数值
// @param deviceid: 设备ID
// @param subid: 参数子分类ID，如充电桩的充电枪的编号：1号枪，2号枪
// @param key: 参数名称
// @param key: 参数值
// 说明： 每个参数值的 element 的 id 设置为：{deviceid}_{subid}_{key}
function setDeviceCardParam(deviceid, subid, key, text) {
  var elemtid = deviceid + (subid ? ("_" + subid) : "") + "_" + key
  $("#" + elemtid).text(text);
  // 特殊状态设置颜色区分显示
  if (text == '离线' | text == '故障') {
    $("#" + elemtid).css("color", "red")
  }
}

var activeCardBtn = null

function onClickCardBtn(btn, id) {
  if (activeCardBtn) activeCardBtn.className = 'mycardbtn'
  activeCardBtn = btn
  activeCardBtn.className = 'mycardbtn-active'

  var deviceType = id
  initDeviceList(deviceType)
}

function creatElementSwitch(id, x, y) {
  var eswitch = document.createElement('div')
  eswitch.className = 'btn-group'
  eswitch.setAttribute('style', `margin-left: 5px; width: 60px; height: 26px; position:absolute; left: ${x}px; top: ${y}px`);
  eswitch.innerHTML = `
        <input id="${id}_off" type="checkbox" class="btn-check"
          onclick="G.switchSetStatus('${id}_on', '${id}_off', !this.checked)" checked />
        <label class="btn btn-outline-danger" for="${id}_off" style="padding: 0;">关</label>
        <input id="${id}_on" type="checkbox" class="btn-check"
          onclick="G.switchSetStatus('${id}_on', '${id}_off', this.checked)" />
        <label class="btn btn-outline-success" for="${id}_on" style="padding: 0;">开</label>`
  return eswitch;
}

function creatElementCard() {
  var card = document.createElement('div')
  card.className = 'mycard'
  return card;
}

function createCardVideo(name) {
  var elemt = document.createElement('div')
  elemt.className = 'mycard'
  elemt.style.width = '320px'
  elemt.innerHTML = `
    <div>${name}</div>
    <div style='width=90%; height:84%; margin-top:10px; border: 5px solid black;'> 
    <div style='width:100%; height:100%; line-height:200px; text-align: center; background-color: gray'> 无信号</div>
    </div>`
  return elemt;
}


function initDeviceList(deviceType) {
  var elemtDeviceList = document.getElementById('deviceList')
  elemtDeviceList.innerHTML = ''

  var subList = [null]
  if (deviceType === 'security') {
    document.getElementById('envpanel').style.display = 'block'

    elemtDeviceList.appendChild(createCardVideo('监控点1'))
    elemtDeviceList.appendChild(createCardVideo('监控点2'))
    elemtDeviceList.appendChild(createCardVideo('监控点3'))
    elemtDeviceList.appendChild(createCardVideo('监控点4'))
    elemtDeviceList.appendChild(createCardVideo('监控点5'))
    elemtDeviceList.appendChild(createCardVideo('监控点6'))
    elemtDeviceList.appendChild(createCardVideo('监控点7'))
    elemtDeviceList.appendChild(createCardVideo('监控点8'))
    elemtDeviceList.appendChild(createCardVideo('监控点9'))
    elemtDeviceList.appendChild(createCardVideo('监控点1'))
    elemtDeviceList.appendChild(createCardVideo('监控点2'))
    elemtDeviceList.appendChild(createCardVideo('监控点3'))
    elemtDeviceList.appendChild(createCardVideo('监控点4'))
    elemtDeviceList.appendChild(createCardVideo('监控点5'))
    elemtDeviceList.appendChild(createCardVideo('监控点6'))
    elemtDeviceList.appendChild(createCardVideo('监控点7'))
    elemtDeviceList.appendChild(createCardVideo('监控点8'))
    elemtDeviceList.appendChild(createCardVideo('监控点9'))
    return
  }

  var reqDeviceType = ['101', '102', '103']
  if (deviceType === 'storage') {
    reqDeviceType = ['101', '102', '106']
  }
  else if (deviceType === 'charge') {
    subList = ['1', '2']
    reqDeviceType = ['108']
  }
  else {
    document.getElementById('envpanel').style.display = 'none'
  }


  // 查询数据库，获取设备信息
  //G.cppNative.queryDevice({ type: reqDeviceType }).then((res) => {
  G.cppNative.getDeviceInfo(reqDeviceType).then((res) => {
    res.forEach(function (item, index) {
      var deviceType = getDeviceTypeName(item.type)
      addDeviceCardPanel(elemtDeviceList, item.device_id, item.name, deviceType, subList)

      var params = {
        在线状态: (item.online == 0) ? '离线' : '在线',
        工作状态: (item.status == 0) ? '空闲' : '运行',
        故障状态: (item.err == 0) ? '正常' : '故障',
        额定功率: '-- kW',
        电压: '-- V',
        电流: '-- A',
        功率: '-- kW',
      }

      if (subList) {
        subList.forEach((subid) => {
          Object.keys(params).forEach((k) => {
            addDeviceCardParam(item.device_id, subid, k, params[k]);
          });
        })
      }
      var elemtPanel = document.getElementById(item.device_id)
      elemtPanel.innerHTML += `<button 
        class="btn btn-outline-primary btn-sm" 
        style="height:30px; margin: 5px 0 0 10px" 
        onclick="onDeviceSetting(${item.device_id})">
        参数设置
        </button>`

    })
  })
}

function onDeviceSetting(deviceid) {
  G.showElement('deviceSettingPop', true)
}

// ====================================================================================================
// 【注意】 DOM 元素的移除不会自动清理 JavaScript 运行时创建的资源（如定时器、事件监听器等），这些都需要手动管理
// 开启定时器更新页面数据
var timerId = null
// 【注意】 DOM 元素的移除不会自动清理 JavaScript 运行时创建的资源（如定时器、事件监听器等），这些都需要手动管理
// 监听当前script元素的移除事件，清理定时器
document.currentScript.addEventListener('DOMNodeRemoved', () => {
  G.cppNative.log('DOMNodeRemoved: 运行监控')
  clearInterval(timerId);
});


$(document).ready(function () {
  onClickCardBtn(document.getElementById('solarCardBtn'), 'solar')
  // timerId = setInterval(() => {
  //   updateParam('1', '电压', Math.floor(Math.random() * 220) + ' V')
  // }, 2000);

  G.cppNative.getDeviceInfo([0]).then((res) => {
    var nums = {
      '103': { num: 0, numIdle: 0, numOffline: 0, numFault: 0 },
      '106': { num: 0, numIdle: 0, numOffline: 0, numFault: 0 },
      '108': { num: 0, numIdle: 0, numOffline: 0, numFault: 0 },
    }
    res.forEach(function (item, index) {
      var deviceType = item.type + ''
      if (nums[deviceType]) {
        nums[deviceType].num += 1
        if (item.status == 0) nums[deviceType].numIdle += 1
        if (item.online == 0) nums[deviceType].numOffline += 1
        if (item.err != 0) nums[deviceType].numFault += 1
      }
    })
    $('#solarDeviceNum').text('光伏板数量: ' + nums['103'].num + ' 个')
    $('#solarIdleNum').text('空闲: ' + nums['103'].numIdle + ' 个')
    $('#solarOfflineNum').text('离线: ' + nums['103'].numOffline + ' 个')
    $('#solarFaultNum').text('故障: ' + nums['103'].numFault + ' 个')

    $('#storageDeviceNum').text('储能电池数量: ' + nums['106'].num + ' 个')
    $('#storageIdleNum').text('空闲: ' + nums['106'].numIdle + ' 个')
    $('#storageOfflineNum').text('离线: ' + nums['106'].numOffline + ' 个')
    $('#storageFaultNum').text('故障: ' + nums['106'].numFault + ' 个')

    $('#chargeDeviceNum').text('充电桩数量: ' + nums['108'].num + ' 个')
    $('#chargeIdleNum').text('空闲: ' + nums['108'].numIdle + ' 个')
    $('#chargeOfflineNum').text('离线: ' + nums['108'].numOffline + ' 个')
    $('#chargeFaultNum').text('故障: ' + nums['108'].numFault + ' 个')

  })

})