实现系统总览、统计分析的图标数据接口

bin/Release/assets/html/pages/统计分析.js

@@ -2,80 +2,48 @@
 var pageDef = {
   solar: {
     charts: [
-      { id: 'solarEchart1', echart: null, type: 'bar', series: ['发电电量', '入网电量'] },
-      { id: 'solarEchart2', echart: null, type: 'bar', series: ['发电时长', '故障次数'] },
-      { id: 'solarEchart3', echart: null, type: 'line', series: ['日电压', '日电流'] },
-      { id: 'solarEchart4', echart: null, type: 'line', series: ['日功率'] }
+      { id: 'solarEchart1', echart: null, type: 'bar', series: ['发电电量', '入网电量'], yAxisLeft: "电量kWh", yAxisRight: "" },
+      { id: 'solarEchart2', echart: null, type: 'bar', series: ['发电时长', '故障次数'], yAxisLeft: "时长s", yAxisRight: "次数" },
+      { id: 'solarEchart3', echart: null, type: 'line', series: ['日电压', '日电流'], yAxisLeft: "电压V", yAxisRight: "电流A" },
+      { id: 'solarEchart4', echart: null, type: 'line', series: ['日功率'], yAxisLeft: "功率kw" },
     ],
   },
 
   storage: {
     charts: [
-      { id: 'storageEchart1', echart: null, type: 'bar', series: ['储能电量', '放电电量'] },
-      { id: 'storageEchart2', echart: null, type: 'bar', series: ['储能时长', '放电时长', '故障次数'] },
-      { id: 'storageEchart3', echart: null, type: 'line', series: ['日电压', '日电流'] },
-      { id: 'storageEchart4', echart: null, type: 'line', series: ['日功率'] }
+      { id: 'storageEchart1', echart: null, type: 'bar', series: ['储能电量', '放电电量'], yAxisLeft: "电量kWh" },
+      { id: 'storageEchart2', echart: null, type: 'bar', series: ['储能时长', '放电时长', '故障次数'], yAxisLeft: "时长s" },
+      { id: 'storageEchart3', echart: null, type: 'line', series: ['日电压', '日电流'], yAxisLeft: "电压V" },
+      { id: 'storageEchart4', echart: null, type: 'line', series: ['日功率'], yAxisLeft: "功率kw" }
     ],
   },
 
   charge: {
     charts: [
-      { id: 'chargeEchart1', echart: null, type: 'bar', series: ['充电电量', '充电收益'] },
-      { id: 'chargeEchart2', echart: null, type: 'bar', series: ['充电次数', '充电时长', '故障次数'] },
-      { id: 'chargeEchart3', echart: null, type: 'line', series: ['日电压', '日电流'] },
-      { id: 'chargeEchart4', echart: null, type: 'line', series: ['日功率'] }
+      { id: 'chargeEchart1', echart: null, type: 'bar', series: ['充电电量', '充电收益'], yAxisLeft: "电量kWh" },
+      { id: 'chargeEchart2', echart: null, type: 'bar', series: ['充电次数', '充电时长', '故障次数'], yAxisLeft: '次数' },
+      { id: 'chargeEchart3', echart: null, type: 'line', series: ['日电压', '日电流'], yAxisLeft: "电压V" },
+      { id: 'chargeEchart4', echart: null, type: 'line', series: ['日功率'], yAxisLeft: "功率kw" }
     ],
   }
 }
-var xdataBar = ['2025/3/1', '2025/3/2', '2025/3/3', '2025/3/4', '2025/3/5', '2025/3/6', '2025/3/7']
-var ydataBar = [
-  [30, 28, 35, 18, 36, 27, 19],
-  [10, 32, 20, 33, 39, 13, 22],
-]
-var curActiveId = 'solar'
 
-function getRandomCurveData(m, n) {
-  var data = []
-  var t0 = Date.parse('2025-03-01 00:00:00')
-  var step = 600
-  var N = 86400 / step
-  var y = 500;
-  for (var i = 0; i < N; ++i) {
-    // data[i] = { x: t0 + i * step * 1000, y: Math.sin(i * 0.1) * (n - m) }
-    y = Math.floor((y + RAND(0, 50) - 25) * 100) / 100
-    data[i] = { x: t0 + i * step * 1000, y: y }
-  }
-  return data
-}
-
-function getCurveData(a, b, n) {
-  var d = [[], []]
-  for (var i = 0; i < n; ++i) {
-    var v = RAND(a, b)
-    d[0].push(v)
-    d[1].push(v - RAND(50, 200))
-  }
-  return d
-}
-
-function RAND(a, b) {
-  return a + Math.random() * (b - a)
-}
+var activeModuleId = ''
 
 // 点击子页面菜单按钮，切换子页面
 function initSubPage(id) {
-  //if (curActiveId == id) return
+  //if (activeModuleId == id) return
   // 切换子菜单按钮样式，旧选择按钮恢复样式
-  if (curActiveId && curActiveId != '') {
-    document.getElementById(curActiveId + 'Btn').className = 'btn btn-primary'
+  if (activeModuleId && activeModuleId != '') {
+    document.getElementById(activeModuleId + 'Btn').className = 'btn btn-primary'
     // 隐藏旧菜单对应的表格子页面
-    $('#' + curActiveId).hide()
+    $('#' + activeModuleId).hide()
   }
-  curActiveId = id
+  activeModuleId = id
   // 切换子菜单按钮样式，新选择按钮设置样式
-  document.getElementById(curActiveId + 'Btn').className = 'btn btn-success btn-lg'
+  document.getElementById(activeModuleId + 'Btn').className = 'btn btn-success btn-lg'
   // 显示新菜单对应的表格子页面
-  $('#' + curActiveId).show()
+  $('#' + activeModuleId).show()
 
   var page = pageDef[id]
   if (!page) {
@@ -83,46 +51,131 @@ function initSubPage(id) {
     return
   }
 
+  // 更新曲线数据
+  G.cppNative.getCurveDataDay(200, 300).then(res => {
+    updateEchartCurve(pageDef[activeModuleId].charts[2].echart, 0, res)
+  })
+  G.cppNative.getCurveDataDay(100, 300).then(res => {
+    updateEchartCurve(pageDef[activeModuleId].charts[2].echart, 1, res)
+  })
+  G.cppNative.getCurveDataDay(300, 400).then(res => {
+    updateEchartCurve(pageDef[activeModuleId].charts[3].echart, 0, res)
+  })
+
+  // 柱状图的 x 轴， 7天的时间的日期
+  var dateStr = $('#statisticDate').val()
+  var xdata = []
+  for (let i = 6; i >= 0; i--) {
+    const date = new Date(dateStr);
+    date.setDate(date.getDate() - i);
+    xdata.push(G.formatDateMD(date));
+  }
+
   page.charts.forEach(item => {
     if (item.type == 'bar') {
-      item.echart = initEchartBar(item.id, item.series)
+      item.echart = initEchartBar(item.id, item.series, xdata, item.yAxisLeft, item.yAxisRight)
       for (var i = 0; i < item.series.length; ++i) {
         //updateEchartBar(item.echart, i, xdataBar, ydataBar[i])
       }
     } else if (item.type == 'line') {
-      item.echart = initEchartCurve(item.id, item.series)
+      item.echart = initEchartCurve(item.id, item.series, item.yAxisLeft, item.yAxisRight)
       for (var i = 0; i < item.series.length; ++i) {
         updateEchartCurve(item.echart, i, G.getRandDataDay(100 * (i + 1), 200 * (i + 1)))
       }
     }
-
-    if (id == 'solar') {
-      if (item.id == 'solarEchart1') {
-        var d = getCurveData(400, 500, 7)
-        updateEchartBar(item.echart, 0, xdataBar, d[0])
-        updateEchartBar(item.echart, 1, xdataBar, d[1])
-      } else if (item.id == 'solarEchart2') {
-        var d = getCurveData(480, 780, 7)
-        updateEchartBar(item.echart, 0, xdataBar, d[0])
-        updateEchartBar(item.echart, 1, xdataBar, [0, 2, 0, 0, 3, 0, 1])
-      }
-
-    } else if (id == 'storage') {
-
-    } else if (id == 'charge') {
-    }
-
   });
 }
 
-window.onresize = () => {
-  var page = pageDef[curActiveId]
-  charts.charts.forEach(item => {
-    if (item.echart) { item.echart.resize() }
-  })
+// 更新页面数据
+function updatePageData() {
+  // 柱状图的 x 轴， 7天的时间的日期
+  var dateStr = $('#statisticDate').val()
+  var xdata = []
+  for (let i = 6; i >= 0; i--) {
+    const date = new Date(dateStr);
+    date.setDate(date.getDate() - i);
+    xdata.push(G.formatDateMD(date));
+  }
+
+  // 光伏统计
+  if (activeModuleId == "solar") {
+    G.cppNative.getStatisticDay(7).then(res => {
+      var d1 = [], d2 = [], d3 = [], d4 = [], d5 = []
+      res.forEach(item => {
+        d1.push(item['elect_gen'])
+        d2.push(item['elect_in'])
+        d3.push(item['elect_gen_t'])
+        d4.push(item['num_fault_solar'])
+      })
+      // 发电电量、入网电量
+      updateEchartBar(pageDef.solar.charts[0].echart, xdata, [{ data: d1 }, { data: d2 }]);
+      // 发电时长、故障次数
+      updateEchartBar(pageDef.solar.charts[1].echart, xdata, [{ data: d3 }, { data: d4 }]);
+    })
+
+  }
+  // 储能统计
+  else if (activeModuleId == "storage") {
+    G.cppNative.getStatisticDay(7).then(res => {
+      var d1 = [], d2 = [], d3 = [], d4 = [], d5 = []
+      res.forEach(item => {
+        d1.push(item['elect_store'])
+        d2.push(item['elect_discharge'])
+        d3.push(item['elect_store_t'])
+        d4.push(item['elect_discharge_t'])
+        d5.push(item['num_fault_store'])
+      })
+      // 储能电量、放电电量
+      updateEchartBar(pageDef.storage.charts[0].echart, xdata, [{ data: d1 }, { data: d2 }]);
+      // 储能时长、放电时长、故障次数
+      updateEchartBar(pageDef.storage.charts[1].echart, xdata, [{ data: d3 }, { data: d4 }, { data: d5 }]);
+    })
+  }
+
+  // 充电统计
+  else if (activeModuleId == "charge") {
+    G.cppNative.getStatisticDay(7).then(res => {
+      var d1 = [], d2 = [], d3 = [], d4 = [], d5 = []
+      res.forEach(item => {
+        d1.push(item['elect_charge'])
+        d2.push(item['income_charge'])
+        d3.push(item['num_charge'])
+        d4.push(item['elect_charge_t'])
+        d5.push(item['num_fault_charge'])
+      })
+      // 充电电量、充电收益
+      updateEchartBar(pageDef.charge.charts[0].echart, xdata, [{ data: d1 }, { data: d2 }]);
+      // 充电次数、充电时长、故障次数
+      updateEchartBar(pageDef.charge.charts[1].echart, xdata, [{ data: d3 }, { data: d4 }, { data: d5 }]);
+    })
+  }
 }
 
+window.onresize = () => {
+  var page = pageDef[activeModuleId]
+  page.charts.forEach(item => { if (item.echart) { item.echart.resize() } })
+}
+
+/// 清理资源
+var timerId = null
+document.currentScript.addEventListener('DOMNodeRemoved', () => {
+  G.cppNative.log('DOMNodeRemoved: 统计分析')
+  clearInterval(timerId);
+});
+
 $(document).ready(function () {
+
+  var dateStr = new Date().toLocaleString('zh', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')
+  $('#statisticDate').val(dateStr)
+
+  document.getElementById('statisticDate').addEventListener('input', function (e) {
+    // updatePageData()
+  });
+
   initSubPage("solar")
+  updatePageData()
+
+  // 定时器更新页面数据
+  timerId = setInterval(updatePageData, 1000)
 })