var pageDef = { solar: { charts: [ { 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: ['储能电量', '放电电量'], 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: ['充电电量', '充电收益'], 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 activeModuleId = '' // 点击子页面菜单按钮,切换子页面 function initSubPage(id) { //if (activeModuleId == id) return // 切换子菜单按钮样式,旧选择按钮恢复样式 if (activeModuleId && activeModuleId != '') { document.getElementById(activeModuleId + 'Btn').className = 'btn btn-primary' // 隐藏旧菜单对应的表格子页面 $('#' + activeModuleId).hide() } activeModuleId = id // 切换子菜单按钮样式,新选择按钮设置样式 document.getElementById(activeModuleId + 'Btn').className = 'btn btn-success btn-lg' // 显示新菜单对应的表格子页面 $('#' + activeModuleId).show() var page = pageDef[id] if (!page) { alert("subpage [" + id + "] is undefined") 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, 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.yAxisLeft, item.yAxisRight) for (var i = 0; i < item.series.length; ++i) { updateEchartCurve(item.echart, i, G.getRandDataDay(100 * (i + 1), 200 * (i + 1))) } } }); } // 更新页面数据 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) })