实现系统总览页面数据接口

bin/Release/assets/html/css/mystyle.css

@@ -383,10 +383,10 @@ tr.shown td.details-control {
     /* border: solid 1px white; */
     width: 100%;
     height: 50%;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 1000;
     color: white;
-    text-align: center;
+    /* text-align: center; */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -406,15 +406,16 @@ tr.shown td.details-control {
 }
 
 .label-val {
-    /* border: solid 1px white; */
+    /* border: solid 1px green; */
     width: 65%;
-    height: 50%;
-    font-size: 20px;
+    height: 45%;
+    font-size: 16px;
+    font-weight: 1000;
     color: #4dd7f0;
     float: left;
     display: flex;
     justify-content: flex-end;
-    align-items: flex-end;
+    /* align-items: flex-end; */
 }
 
 .label-tail {
@@ -422,12 +423,12 @@ tr.shown td.details-control {
     padding-left: 10px;
     width: 35%;
     height: 45%;
-    font-size: 16px;
+    /* font-size: 10px; */
     font-weight: 1000;
     color: white;
     display: flex;
     justify-content: left;
-    align-items: flex-end;
+    /* align-items: flex-end; */
 }
 
 #maskTest {

bin/Release/assets/html/js/myecharts.js

@@ -52,7 +52,7 @@ var optionBar = {
       axisLine: { show: true },
       axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
       //网格线
-      splitLine: { show: true, lineStyle: { type: 'dashed' } },
+      splitLine: { show: true, interval: 2, lineStyle: { type: 'dashed', color: 'gray' } },
     },
   ],
   series: [
@@ -156,7 +156,7 @@ var optionCurve = {
     axisTick: { show: true },
     axisLine: { show: true, lineStyle: { color: 'white' } },
     axisLabel: { color: 'white' },
-    splitLine: { show: true, lineStyle: { type: 'dashed' } },
+    splitLine: { show: true, lineStyle: { type: 'dashed', color: 'gray' } },
     nameTextStyle: { color: 'white', fontSize: 15 },
     boundaryGap: [0, '100%'],
   },

bin/Release/assets/html/pages/系统总览.html

@@ -1,13 +1,12 @@
-<div class="myrow" style="height:100%; padding: 10px; ">
+<div class="myrow" style="height:100%; padding: 10px;">
   <div style="width: 25%; height: 100%; overflow: hidden">
-    <div class="mypanel " style="height: calc(30% - 10px)">
-
+    <div class="mypanel " style="height: calc((100% - 12px) * 0.30)">
       <div class="mypanel-title myline-lb">运行状况</div>
       <div class="myrow" style="width: 100%; height: calc(100% - 40px); margin-top: 10px">
         <div class="label-bkg" style="width: 30%">
           <div class="label-val-lg">0</div>
-          <div class="label-tail">天</div>
-          <div class="label-key">安全运行</div>
+          <div class="label-tail" style="align-items: flex-end;">天</div>
+          <div class="label-key" style="font-size: 30px; align-items: flex-start">安全运行</div>
         </div>
         <div class="mycol" style="width: 70%; margin-left: 5px">
           <div class="myrow" style="width: 100%; height: 33%">
@@ -50,7 +49,7 @@
       </div>
     </div>
 
-    <div class="mypanel" style="height: calc(35% - 10px)">
+    <div class="mypanel" style="height: calc((100% - 12px) * 0.34)">
       <div class="mypanel-title myline-lb">光伏设备</div>
       <div class="myrow" style="margin-top: 10px">
         <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
@@ -72,7 +71,7 @@
       <div id="mychartSolar" style="width: 100%; height: calc(100% - 90px)"></div>
     </div>
 
-    <div class="mypanel" style="height: calc(35% - 10px)">
+    <div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
       <div class="mypanel-title myline-lb">储能设备</div>
       <div class="myrow" style="margin-top: 10px">
         <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 0px">
@@ -91,7 +90,7 @@
   </div>
 
   <div style="margin-left: 10px; width: 50%; height: 100%; overflow: hidden; font-size: 14px;">
-    <div class="mypanel" style="height: calc(70% - 10px); background-color: #012036;">
+    <div class="mypanel" style="height: calc((100% - 12px) * 0.64 + 10px); background-color: #012036;">
       <div class="myrow" style="justify-content: center ; ">
         <div style="display: flex; width: 20%;">
           <div style="width:5px; height: 50px; background-color: #f69b52;"></div>
@@ -137,14 +136,14 @@
       <img src="./res/overview.png" style="width: 100%; height: calc(100% - 60px); object-fit: fill; margin-top: 20px;">
       </img>
     </div>
-    <div class="mypanel" style="height: calc(30% - 10px)">
+    <div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
       <div class="mypanel-title myline-lb">发电功率和辐照度</div>
       <div id="mychartRunning" style="width: 100%; height: 90%"></div>
     </div>
   </div>
 
   <div style="margin-left: 10px; width: 25%; height: 100%; overflow: hidden">
-    <div class="mypanel" style="height: calc(30% - 10px)">
+    <div class="mypanel" style="height: calc((100% - 12px) * 0.30)">
       <div class="mypanel-title myline-lb">负荷设备</div>
       <div class="myrow" style="margin-top: 10px">
         <div class="label-bkg" style="width: 50%; height: 100%; margin-left: 0px">
@@ -161,7 +160,7 @@
       <div id="mychartLoad" style="width: 100%; height: calc(100% - 90px)"></div>
     </div>
 
-    <div class="mypanel" style="height: calc(35% - 10px)">
+    <div class="mypanel" style="height: calc((100% - 12px) * 0.34)">
 
       <div class="mypanel-title myline-lb">充电设备</div>
 
@@ -185,7 +184,7 @@
       <div id="mychartCharge" style="width: 100%; height: calc(100% - 90px)"></div>
     </div>
 
-    <div class="mypanel" style="height: calc(35% - 10px)">
+    <div class="mypanel" style="height: calc((100% - 12px) * 0.35)">
       <div class="mypanel-title myline-lb">告警信息</div>
       <div class="myrow" style="margin-top: 10px">
         <div class="label-bkg" style="width: 33%; height: 100%; margin-left: 0px">
@@ -207,4 +206,5 @@
       <div id="mychartAlert" style="width: 100%; height: calc(100% - 90px)"></div>
     </div>
   </div>
+
 </div>

bin/Release/assets/html/pages/系统总览.js

@@ -76,20 +76,62 @@ window.onresize = () => {
 }
 
 function updatePageData() {
-  // 查询数据获取环境信息
-  $('#envIllumination').text('27.2 Lux')
-  $('#envWindspeed').text('1.5 m/s')
-  $('#envTemperture').text('27.8 ℃')
-  $('#envHumidity').text('37.6 %')
-
-  // 查询获取统计信息
+  // 获取统计数据(累计统计)
+  G.cppNative.getStatisticTotal().then((res => {
+    // {"ccers":100,"elect_charge":0,"elect_gen":153.8,"elect_in":130.2,"income_charge":100,"income_elect":100}
     $('#windTurbineNum').text('8')
     $('#solarNum').text('207')
-  $('#electricTotal').text('153.21')
-  $('#electricInTotal').text('120.35')
-  $('#carbonReduction').text('36.17')
+    $('#electricTotal').text(res['elect_gen'])
+    $('#electricInTotal').text(res['elect_in'])
+    $('#carbonReduction').text(res['ccers'])
+  }))
+
+  // 获取统计数据(日统计，7天的数据)
+  G.cppNative.getStatisticDay(7).then((res => {
+    var xAxisData = []
+    var solar = { d1: [], d2: [], d3: [] }
+    var storage = { d1: [], d2: [], d3: [] }
+    var load = { d1: [], d2: [], d3: [] }
+    var charge = { d1: [], d2: [], d3: [] }
+
+    res.forEach(item => {
+      solar.d1.push(item['elect_gen_solar'])
+      solar.d2.push(item['elect_in_solar'])
+
+      storage.d1.push(item['elect_store'])
+      storage.d2.push(item['elect_discharge'])
+
+      load.d1.push(item['elect_load'])
+      load.d2.push(item['elect_load'])
+
+      charge.d1.push(item['elect_charge'])
+      charge.d2.push(item['num_charge'])
+    })
+
+    // 服务端获取光伏设备7天统计数据，更新图表
+    // var data1 = [1, 2, 3, 4, 3, 2, 1]
+    // var data2 = [1, 2, 3, 4, 3, 2, 1]
+    // var data3 = [1, 2, 3, 4, 3, 2, 1]
+
+    mychartSolar.setOption({ series: [{ data: solar.d1 }, { data: solar.d2 }, { data: solar.d3 }] });
+    mychartStorage.setOption({ series: [{ data: storage.d1 }, { data: storage.d2 }, { data: storage.d3 }] });
+    mychartLoad.setOption({ series: [{ data: load.d1 }, { data: load.d2 }, { data: load.d3 }] });
+    mychartCharge.setOption({ series: [{ data: charge.d1 }, { data: charge.d2 }, { data: charge.d3 }] });
+    mychartAlert.setOption({ series: [{ data: solar.d1 }, { data: solar.d2 }, { data: solar.d3 }] });
+
+  }))
+
+  // 查询数据获取环境信息：光照、风速、环境温度、湿度
+  G.cppNative.getEnvironmentInfo().then(res => {
+    $('#envIllumination').text(res['illumination'] + ' Lux')
+    $('#envWindspeed').text(res['windspeed'] + ' m/s')
+    $('#envTemperture').text(res['temperature'] + ' ℃')
+    $('#envHumidity').text(res['humidity'] + ' %')
+
+  })
 }
 
+/// 清理资源
 var timerId = null
 document.currentScript.addEventListener('DOMNodeRemoved', () => {
   G.cppNative.log('DOMNodeRemoved: 运行监控')

src/widgets/WebHandler.cpp

@@ -723,3 +723,76 @@ QVariantList MyWebHandler::getDeviceInfo(const QVariantList& types)
     }
     return result;
 }
+
+QVariantMap MyWebHandler::getEnvironmentInfo()
+{
+    QVariantMap result;
+    result["illumination"] = 30.2;
+    result["windspeed"] = 2.6;
+    result["temperature"] = 27.8;
+    result["humidity"] = 36.9;
+    return result;
+}
+
+QVariantMap MyWebHandler::getFireInfo()
+{
+    QVariantMap result;
+
+    // 多个消防点位的信息
+    //感烟探测器	Smoke detector
+    //感温探测器	Heat detector
+    //火焰探测器	Flame detector
+
+    QVariantList list;
+    for (int i = 0; i<7; i++)
+    {
+        QVariantMap item;
+        item["pos"] = 1;
+        item["status"] = 0;
+        list << item;
+    }
+    result["data"] = list;
+
+    return result;
+}
+
+// 获取累计统计数据
+QVariantMap MyWebHandler::getStatisticTotal()
+{
+    QVariantMap result;
+
+    // 查询数据库获取累计统计数据
+    
+    result["elect_gen"] = 153.8;    // 累计发电量
+    result["elect_in"] = 130.2;     // 累计入网电量
+    result["elect_charge"] = 0.0;   // 累计充电电量
+    result["income_elect"] = 100.0;   // 累计发电收益
+    result["income_charge"] = 100.0;  // 累计充电收益
+    result["ccers"] = 100.0;          // 累计碳减排量
+
+    return result;
+}
+
+// 获取按天统计数据
+QVariantList MyWebHandler::getStatisticDay(const QString& startDate, int nday)
+{
+    QVariantList result;
+
+    // 查询数据库获取累计统计数据
+    for (int i=1; i<=7; i++)
+    {
+        QVariantMap row;
+        row["dt"] = "";
+        row["elect_gen_solar"] = float(i);
+        row["elect_in_solar"] = float(i);
+        row["income_solar"] = float(i);
+        row["elect_store"] = float(i);
+        row["elect_discharge"] = float(i);
+        row["elect_load"] = float(i);
+        row["elect_charge"] = float(i);
+        row["num_charge"] = float(i);
+        row["income_charge"] = float(i);
+        result << row;
+    }
+    return result;
+}

src/widgets/WebHandler.h

@@ -38,21 +38,21 @@ public slots:
     QString readFile(const QString& filename);
 
 
-    // ================================================================================================================
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     // 登录，返回用户信息
     void login(const QString& username, const QString& password);
     // 登出
     void loginOut(const QString& username);
 
-    // ================================================================================================================
-    // 用户管理接口
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 用户管理接口
     QVariantMap queryUserList(int page, int pageSize);
     int insertUser(QVariantMap params);
     int deleteUser(const QString& userId);
     int updateUser(const QString& userId, QVariantMap params);
 
-    // ================================================================================================================
-    // 角色管理接口
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 角色管理接口 ===
     /**
     * 查询角色列表, pageSize !=0 时分页查询
     * @param [int page]: 当前的页码
@@ -66,15 +66,15 @@ public slots:
     QVariantList queryRolePermissionList(int roleId);
     int updateRolePermission(int roleId, QVariantList params);
 
-    // ================================================================================================================
-    // 权限管理接口
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 权限管理接口
     QVariantMap queryPermissionList(int page, int pageSize);
     int insertPermission(QVariantMap params);
     int deletePermission(const QString& permissionId);
     int updatePermission(const QString& permissionId, QVariantMap params);
 
-    // ================================================================================================================
-    // 设备管理接口
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 设备管理接口
     QVariantMap queryDeviceList(int page, int pageSize);
 
     QVariantList queryDevice(QVariantMap params);
@@ -83,41 +83,56 @@ public slots:
     int updateDevice(const QString& deviceId, QVariantMap params);
     QVariantList queryDeviceTypeList();
 
-    // ================================================================================================================
-    // 计费管理接口
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 计费管理接口
     QVariantMap queryPriceList(int page, int pageSize);
     int insertPrice(QVariantMap params);
     int deletePrice(const QString& priceId);
     int updatePrice(const QString& priceId, QVariantMap params);
     QVariantList queryPriceTypeList();
 
-    // ================================================================================================================
-    // 策略管理接口
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 策略管理接口
     QVariantMap queryPolicyList(int page, int pageSize);
     int insertPolicy(QVariantMap params);
     int deletePolicy(const QString& policyId);
     int updatePolicy(const QString& policyId, QVariantMap params);
     QVariantList queryPolicyTypeList();
 
-    // ================================================================================================================
-    // 系统日志接口
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 系统日志接口
     QVariantMap querySyslogList(int page, int pageSize);
 
-    // ================================================================================================================
-    // 安全策略
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 安全策略 ===
     QVariantMap querySecPolicyList(int page, int pageSize);
     int insertSecPolicy(QVariantMap params);
     int updateSecPolicy(const QString& policyId, QVariantMap params);
 
-    // ================================================================================================================
-    // 安全日志记录
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 安全日志记录 ===
     QVariantMap querySecRecordList(int page, int pageSize);
     int insertSecRecord(QVariantMap params);
     int updateSecRecord(const QString& policyId, QVariantMap params);
 
-    // ================================================================================================================
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     QVariantList getDeviceInfo(const QVariantList& types);
 
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 环境信息 ===
+    QVariantMap getEnvironmentInfo();
+    QVariantMap getFireInfo();
+
+    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    /// === 统计信息 ===
+    // 获取累计统计数据
+    QVariantMap getStatisticTotal();
+    // 获取按天统计数据
+    QVariantList getStatisticDay(const QString& startDate, int nday=7);
+    // 获取一天的
+
+
+
 public:
     QString nativeText_;
 };

src/widgets/uihelper.h

@@ -154,7 +154,6 @@ public:
     QLabel labV_;
 };
 
-
 class TableBase : public QObject
 {
     Q_OBJECT