提交系统管理web端代码

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

@@ -1,64 +1,244 @@
+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 addCard(deviceId, type, name, code) {
-  var a = '<div class="myrow">' +
-    '< div style = "width: 100px;height: 70px; background-color: #2991b6;border-radius: 10px;" > </div>' +
-    '< div class="mycolumn" style = "margin-left: 10px;" > ' +
-    '<div>3201001234567890</div>' +
-    '<div>逆变器1 </div>' +
-    '<div style="color: #08afff; font-size:14px; font-weight: bold;">逆变器 </div>' +
-    '</div >' +
-    '</div >'
-
-  var elementDeviceList = document.getElementById('deviceList')
-  // <div class="mycard" ></div>
+function addDeviceCardPanel(root, deviceid, name, type, subList) {
   var card = document.createElement('div')
   card.className = 'mycard'
-  card.innerHTML = '<div class="myrow" style="margin-bottom: 20px">' +
-    '<div style="width: 100px;height: 70px; background-color: #2991b6;border-radius: 10px;"></div>' +
-    '<div class="mycolumn" style="margin-left: 10px;">' +
-    '<div>' + code + '</div><div>' + name + '</div>' +
-    '<div style="color: #08afff; font-size:14px; font-weight: bold;">' + type + '</div>' +
-    '</div></div>'
+  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>`
 
-  var params = {
-    工作状态: '运行',
-    在线状态: '运行',
-    故障状态: '运行',
-    额定功率: '20 kW',
-    电压: '220 V',
-    电流: '30 A',
-    功率: '11 kW',
+  // 充电桩区分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>`
   }
-
-  Object.keys(params).forEach((k) => {
-    var id = deviceId + '_' + k
-    card.innerHTML += ('<div class="mycard-param">' +
-      '<div class="mycard-param-title">' + k + '</div>' + '<div id="' + id + '" class="mycard-param-text">' + params[k] + '</div>' +
-      '</div>')
-  });
-
-  elementDeviceList.appendChild(card)
+  root.appendChild(card)
+  return card
 }
 
-function updateParam(deviceId, k, v) {
-  var id = deviceId + '_' + k
-  document.getElementById(id).innerHTML = v
+/// =========================================================== 
+// 创建设备卡片的参数信息
+// @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 clickCardBtn(btn, id) {
+
+function onClickCardBtn(btn, id) {
   if (activeCardBtn) activeCardBtn.className = 'mycardbtn'
   activeCardBtn = btn
   activeCardBtn.className = 'mycardbtn-active'
+
+  var deviceType = id
+  initDeviceList(deviceType)
 }
 
-function initDeviceList() {
+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
@@ -69,27 +249,43 @@ document.currentScript.addEventListener('DOMNodeRemoved', () => {
   clearInterval(timerId);
 });
 
+
 $(document).ready(function () {
-  addCard('1', '逆变器', '逆变器1', '1111')
-  addCard('2', '汇流箱', '汇流箱', '2222')
-  addCard('3', '光伏板', '光伏板1', '3333')
-  addCard('4', '光伏板', '光伏板2', '4444')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
-  addCard('5', '光伏板', '光伏板3', '5555')
+  onClickCardBtn(document.getElementById('solarCardBtn'), 'solar')
+  // timerId = setInterval(() => {
+  //   updateParam('1', '电压', Math.floor(Math.random() * 220) + ' V')
+  // }, 2000);
 
-  clickCardBtn(document.getElementById('solarCardBtn'), 'solar')
+  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 + ' 个')
+
+  })
 
-  timerId = setInterval(() => {
-    updateParam('1', '电压', Math.floor(Math.random() * 220) + ' V')
-  }, 2000);
 })