逆變器監控(完成)

This commit is contained in:
b110212000 2021-08-17 17:09:30 +08:00
parent 54250e64bb
commit 288556160e
8 changed files with 911 additions and 218 deletions

View File

@ -2811,7 +2811,10 @@ namespace SolarPower.Controllers
TODAYKWH = inverter.TODAYKWH,
Name = inverter.INVERTERName,
ID = inverter.ID,
Type = 1
Type = 1,
TIMESTAMP = inverter.TIMESTAMP,
UseDB = post.SiteDB,
UseTable = site
};
list.Add(info);
@ -2846,5 +2849,27 @@ namespace SolarPower.Controllers
}
return apiResult;
}
public async Task<ApiResult<InverterDetailModal>> GetInverterInfoModal (TimeAndID post)
{
InverterDetailModal detailModal = new InverterDetailModal();
ApiResult<InverterDetailModal> apiResult = new ApiResult<InverterDetailModal>();
try
{
detailModal = await powerStationRepository.GetInverterInfoModal(post.Id, post.Time, post.UseDB, post.UseTable);
apiResult.Data = detailModal;
apiResult.Code = "0000";
}
catch (Exception exception)
{
apiResult.Code = "9999";
apiResult.Msg = errorCode.GetString(apiResult.Code);
string json = System.Text.Json.JsonSerializer.Serialize(post);
Logger.LogError("【" + controllerName + "/" + actionName + "】" + json);
Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
}
return apiResult;
}
}
}

View File

@ -940,6 +940,9 @@ namespace SolarPower.Models.PowerStation
public string Name { get; set; }
public int ID { get; set; }
public int Type { get; set; }
public string TIMESTAMP { get; set; }
public string UseDB { get; set; }
public string UseTable { get; set; }
}
public class IdAndDB
@ -948,6 +951,19 @@ namespace SolarPower.Models.PowerStation
public string SiteDB { get; set; }
}
public class TimeAndID
{
public int Id { get; set; }
public string Time { get; set; }
public string UseDB { get; set; }
public string UseTable { get; set; }
}
public class InverterDetailModal:InverterHistory
{
public string Model { get; set; }
public string Brand { get; set; }
public string BrandNum { get; set; }
}
}

View File

@ -5064,5 +5064,29 @@ namespace SolarPower.Repository.Implement
return result;
}
}
public async Task<InverterDetailModal> GetInverterInfoModal (int Id, string Time,string DB ,string Table)
{
InverterDetailModal result;
using (IDbConnection conn = this._databaseHelper.GetConnection())
{
try
{
var sql = @$"SELECT * FROM {DB}.inverter i
LEFT JOIN
(SELECT * from {DB}.{Table} aa ORDER BY aa.ID desc LIMIT 1000) inv
ON i.InverterId = inv.INVERTERID WHERE inv.TIMESTAMP = '{Time}' and i.ID = {Id}
";
result = await conn.QueryFirstOrDefaultAsync<InverterDetailModal>(sql);
}
catch (Exception exception)
{
throw exception;
}
return result;
}
}
}
}

View File

@ -589,5 +589,6 @@ namespace SolarPower.Repository.Interface
Task<List<InverterHistory>> GetAllInverterRowData(string date, string table_name);
Task<List<InverterHistory>> GetAllInverterInfo(List<string> post, string site_table, string site_db);
Task<InverterDetailModal> GetInverterInfoModal(int Id, string Time, string DB, string Table);
}
}

View File

@ -43,11 +43,6 @@
<i class="fal fa-list-alt text-success"></i> <span class="hidden-sm-down ml-1">裝置列表</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-inverter" role="tab">
<i class="fal fa-sensor-alert text-success"></i> <span class="hidden-sm-down ml-1">逆變器監控</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-operation-firm" role="tab">
<i class="fal fa-hands-helping text-success"></i> <span class="hidden-sm-down ml-1">維運廠商</span>
@ -74,10 +69,6 @@
@Html.Partial("_DeviceSetting")
</div>
<div class="tab-pane fade" id="tab-inverter" role="tabpanel" aria-labelledby="tab-inverter">
@Html.Partial("_Inverter")
</div>
<div class="tab-pane fade" id="tab-operation-firm" role="tabpanel" aria-labelledby="tab-operation-firm">
@Html.Partial("_Operation")
</div>
@ -899,16 +890,6 @@
});
//#endregion
GetInverterCard(stationId);
if (typeof (Worker) !== "undefined") {
var worker = new Worker('../js/workers/workers.js');
worker.onmessage = function (event) {
if (event.data == "ok") {
GetInverterCard(stationId);
}
}
}
});
//#region 代管切換
@ -2875,200 +2856,5 @@
}
});
function GetInverterCard(stationId)
{
var url = "/PowerStation/GetOnePowerStation/";
var send_data = {
id: stationId
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
$("#Invertercard-Name").html(rel.data.name);
$("#Invertercard-kwh").html(rel.data.kwh);
$("#Invertercard-money").html(rel.data.today_Money);
$("#Invertercard-pr").html(rel.data.today_PR);
var str = "<div class='progress progress-sm ' id='prbar'>" +
"<div class='progress-bar bg-info' role = 'progressbar' style = 'width: " + rel.data.today_PR + "%;' aria - valuenow='" + rel.data.today_PR +"' aria - valuemin='0' aria - valuemax='100' ></div > </div >"
$('#prbar').remove();
$("#Invertercard").append(str);
var TypeName = "";
switch (rel.data.solarType) {
case 0:
TypeName = "自建躉售";
break;
case 1:
TypeName = "租建躉售";
break;
case 2:
TypeName = "自建自用";
break;
}
$("#Invertercard-type").html(TypeName);
var time = new Date(rel.data.createdAt);
$("#Invertercard-date").html(time.getMonth() + "/" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes())
$("#Invertercard").find('.card-img-top').attr('src', "../upload/power_station/" + rel.data.id + "/" + rel.data.mainDisplay);
$('#Invertercard-Temp').html(rel.data.todayWeatherTemp + '°C');
$('#Invertercard-weathericon').attr("class", 'fal fa-' + rel.data.todayWeather + ' fa-2x');
stationDB = rel.data.siteDB;
InverterInfoList();
}, 'json');
};
function InverterInfoList()
{
var url = "/PowerStation/GetInverterInfoList/";
var send_data = {
id: stationId,
siteDB: stationDB
}
$.post(url, send_data, function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
if (rel.code == "0001") {
toast_warning(rel.msg);
return;
}
$("#ullist").empty();
var long = rel.data.length <= 4 ? rel.data.length : 4;
for (var a = 0; a < long; a++)
{
var str = "<li class='col-xl-3' id='li_" + a + "'>";
str += '<div class="card border m-auto m-lg-0">';
str += '<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">';
str += '<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> ' + rel.data[a].name + '</p>';
str += '</div>';
str += '<div class="list-group list-group-flush">';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">設備狀態</p>';
if (rel.data[a].type == 1) {
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>';
}
else {
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold">異常</span></p>';
}
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" OnClick="InverterInfoDetail(' + rel.data[a].id + ')">詳細資料</a></span></p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2 bg-info-20">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">輸出功率</p>';
str += '<p class="mb-0">' + rel.data[a].output.toFixed(2) + '</p>';
str += '<p class="mb-0">kw</p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">輸入功率</p>';
str += '<p class="mb-0">' + rel.data[a].input.toFixed(2) + '</p>';
str += '<p class="mb-0">kw</p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2 bg-info-20">';
str += '<div class="d-flex">';
str += 'PR <span class="d-inline-block ml-auto">' + rel.data[a].pr.toFixed(2) + '%</span>';
str += '</div>';
str += '<div class="progress progress-sm mb-3">';
str += '<div class="progress-bar bg-info-400" role="progressbar" style="width: ' + rel.data[a].pr.toFixed(2) + '%;" aria-valuenow="' + rel.data[a].pr.toFixed(2) + '" aria-valuemin="0" aria-valuemax="100"></div>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">日發電量</p>';
str += '<p class="mb-0">' + rel.data[a].todaykwh.toFixed(2) + '</p>';
str += '<p class="mb-0">kWh</p>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</li>';
$("#ullist").append(str);
}
if (rel.data.length >= 4)
{
for (var a = 4; a < rel.data.length; a++)
{
var str = '<ul>';
str += '<div class="card border m-auto m-lg-0">';
str += '<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">';
str += '<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> ' + rel.data[a].name + '</p>';
str += '</div>';
str += '<div class="list-group list-group-flush">';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">設備狀態</p>';
if (rel.data[a].type == 1) {
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>';
}
else {
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold">異常</span></p>';
}
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" OnClick="InverterInfoDetail(' + rel.data[a].id + ')">詳細資料</a></span></p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2 bg-info-20">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">輸出功率</p>';
str += '<p class="mb-0">' + rel.data[a].output.toFixed(2) + '</p>';
str += '<p class="mb-0">kw</p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">輸入功率</p>';
str += '<p class="mb-0">' + rel.data[a].input.toFixed(2) + '</p>';
str += '<p class="mb-0">kw</p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2 bg-info-20">';
str += '<div class="d-flex">';
str += 'PR <span class="d-inline-block ml-auto">' + rel.data[a].pr.toFixed(2) + '%</span>';
str += '</div>';
str += '<div class="progress progress-sm mb-3">';
str += '<div class="progress-bar bg-info-400" role="progressbar" style="width: ' + rel.data[a].pr.toFixed(2) + '%;" aria-valuenow="' + rel.data[a].pr.toFixed(2) + '" aria-valuemin="0" aria-valuemax="100"></div>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">日發電量</p>';
str += '<p class="mb-0">' + rel.data[a].todaykwh.toFixed(2) + '</p>';
str += '<p class="mb-0">kWh</p>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</ul>';
$("#li_" + a % 4).append(str);
}
};
});
}
function InverterInfoDetail(id) {
$("#inverterdetailmodal").modal();
}
</script>
}

View File

@ -49,6 +49,13 @@
</li>
}
<li class="nav-item">
<a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-overview-operationRecord" role="tab">
<i class="fal fa-digital-tachograph text-success"></i> <span class="hidden-sm-down ml-1">逆變器監控</span>
</a>
</li>
@if (ViewBag.myUser.Role.Layer == (int)RoleLayerEnum.PlatformAdmin || ViewBag.auths.Contains("StationOverview_History"))
{
<li class="nav-item">
@ -84,6 +91,8 @@
</a>
</li>
}
</ul>
<div class="tab-content p-3">
@if (ViewBag.myUser.Role.Layer == (int)RoleLayerEnum.PlatformAdmin || ViewBag.auths.Contains("StationOverview_UpToDate"))
@ -107,6 +116,11 @@
</div>
}
<div class="tab-pane fade" id="tab-overview-operationRecord" role="tabpanel" aria-labelledby="tab-overview-operationRecord">
@Html.Partial("_InverterInfo")
</div>
@if (ViewBag.myUser.Role.Layer == (int)RoleLayerEnum.PlatformAdmin || ViewBag.auths.Contains("StationOverview_Inverter"))
{
<div class="tab-pane fade" id="tab-overview-inverter" role="tabpanel" aria-labelledby="tab-overview-inverter">
@ -1071,6 +1085,20 @@
//歷史第一個table
getTable();
$('#to30day').trigger('click');
GetInverterCard(stationId);
if (typeof (Worker) !== "undefined") {
var worker = new Worker('../js/workers/workers.js');
worker.onmessage = function (event) {
if (event.data == "ok") {
GetInverterCard(stationId);
}
else {
$('.hold-time-change').html(event.data);
}
}
}
});
//#region 變更左邊電站Collapse選單箭頭
@ -2546,5 +2574,261 @@
//#endregion
function GetInverterCard(stationId) {
var url = "/PowerStation/GetOnePowerStation/";
var send_data = {
id: stationId
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
$("#Invertercard-Name").html(rel.data.name);
$("#Invertercard-kwh").html(rel.data.kwh);
$("#Invertercard-money").html(rel.data.today_Money);
$("#Invertercard-pr").html(rel.data.today_PR);
var str = "<div class='progress progress-sm ' id='prbar'>" +
"<div class='progress-bar bg-info' role = 'progressbar' style = 'width: " + rel.data.today_PR + "%;' aria - valuenow='" + rel.data.today_PR + "' aria - valuemin='0' aria - valuemax='100' ></div > </div >"
$('#prbar').remove();
$("#Invertercard").append(str);
var TypeName = "";
switch (rel.data.solarType) {
case 0:
TypeName = "自建躉售";
break;
case 1:
TypeName = "租建躉售";
break;
case 2:
TypeName = "自建自用";
break;
}
$("#Invertercard-type").html(TypeName);
var time = new Date(rel.data.createdAt);
$("#Invertercard-date").html(time.getMonth() + "/" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes())
$("#Invertercard").find('.card-img-top').attr('src', "../upload/power_station/" + rel.data.id + "/" + rel.data.mainDisplay);
$('#Invertercard-Temp').html(rel.data.todayWeatherTemp + '°C');
$('#Invertercard-weathericon').attr("class", 'fal fa-' + rel.data.todayWeather + ' fa-2x');
stationDB = rel.data.siteDB;
InverterInfoList();
}, 'json');
};
function InverterInfoList() {
var url = "/PowerStation/GetInverterInfoList/";
var send_data = {
id: stationId,
siteDB: stationDB
}
$.post(url, send_data, function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
if (rel.code == "0001") {
toast_warning(rel.msg);
return;
}
$("#ullist").empty();
var long = rel.data.length <= 4 ? rel.data.length : 4;
for (var a = 0; a < long; a++) {
var str = "<li class='col-xl-3' id='li_" + a + "'>";
str += '<div class="card border m-auto m-lg-0">';
str += '<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">';
str += '<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> ' + rel.data[a].name + '</p>';
str += '<p class="card-text hold-time-change">0分鐘前</p>';
str += '</div>';
str += '<div class="list-group list-group-flush">';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">設備狀態</p>';
if (rel.data[a].type == 1) {
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>';
}
else {
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold">異常</span></p>';
}
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" OnClick="InverterInfoDetail(' + rel.data[a].id + ',' + rel.data[a].timestamp + ',\'' + rel.data[a].useDB + '\',\'' + rel.data[a].useTable +'\')">詳細資料</a></span></p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2 bg-info-20">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">輸出功率</p>';
str += '<p class="mb-0">' + rel.data[a].output.toFixed(2) + '</p>';
str += '<p class="mb-0">kw</p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">輸入功率</p>';
str += '<p class="mb-0">' + rel.data[a].input.toFixed(2) + '</p>';
str += '<p class="mb-0">kw</p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2 bg-info-20">';
str += '<div class="d-flex">';
str += 'PR <span class="d-inline-block ml-auto">' + rel.data[a].pr.toFixed(2) + '%</span>';
str += '</div>';
str += '<div class="progress progress-sm mb-3">';
str += '<div class="progress-bar bg-info-400" role="progressbar" style="width: ' + rel.data[a].pr.toFixed(2) + '%;" aria-valuenow="' + rel.data[a].pr.toFixed(2) + '" aria-valuemin="0" aria-valuemax="100"></div>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">日發電量</p>';
str += '<p class="mb-0">' + rel.data[a].todaykwh.toFixed(2) + '</p>';
str += '<p class="mb-0">kWh</p>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</li>';
$("#ullist").append(str);
}
if (rel.data.length >= 4) {
for (var a = 4; a < rel.data.length; a++) {
var str = '<ul>';
str += '<div class="card border m-auto m-lg-0">';
str += '<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">';
str += '<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> ' + rel.data[a].name + '</p>';
str += '<p class="card-text hold-time-change">0分鐘前</p>';
str += '</div>';
str += '<div class="list-group list-group-flush">';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">設備狀態</p>';
if (rel.data[a].type == 1) {
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>';
}
else {
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold">異常</span></p>';
}
str += '<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" OnClick="InverterInfoDetail(' + rel.data[a].id + ',' + rel.data[a].timestamp + ',\'' + rel.data[a].useDB + '\',\'' + rel.data[a].useTable +'\')">詳細資料</a></span></p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2 bg-info-20">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">輸出功率</p>';
str += '<p class="mb-0">' + rel.data[a].output.toFixed(2) + '</p>';
str += '<p class="mb-0">kw</p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">輸入功率</p>';
str += '<p class="mb-0">' + rel.data[a].input.toFixed(2) + '</p>';
str += '<p class="mb-0">kw</p>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2 bg-info-20">';
str += '<div class="d-flex">';
str += 'PR <span class="d-inline-block ml-auto">' + rel.data[a].pr.toFixed(2) + '%</span>';
str += '</div>';
str += '<div class="progress progress-sm mb-3">';
str += '<div class="progress-bar bg-info-400" role="progressbar" style="width: ' + rel.data[a].pr.toFixed(2) + '%;" aria-valuenow="' + rel.data[a].pr.toFixed(2) + '" aria-valuemin="0" aria-valuemax="100"></div>';
str += '</div>';
str += '</div>';
str += '<div class="list-group-item px-2">';
str += '<div class=" d-flex justify-content-between">';
str += '<p class="mb-0">日發電量</p>';
str += '<p class="mb-0">' + rel.data[a].todaykwh.toFixed(2) + '</p>';
str += '<p class="mb-0">kWh</p>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</ul>';
$("#li_" + a % 4).append(str);
}
};
});
}
function InverterInfoDetail(id,time,db,table) {
var url = "/PowerStation/GetInverterInfoModal/";
var send_data = {
Id: id,
Time: time,
UseDB: db,
UseTable: table
}
$.post(url, send_data, function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
var info = "<tr>";
info += "<td>" + rel.data.model + "</td>";
info += "<td>" + rel.data.brand + "</td>";
info += "<td>" + rel.data.brandNum + "</td>";
info += "</tr>";
$('#inverterInfo-Detail').empty();
$('#inverterInfo-Detail').append(info);
var ACDetail = "";
for (var a = 1; a < 4; a++)
{
ACDetail += "<tr>";
ACDetail += "<td>" + a + "</td>";
ACDetail += "<td>" + rel.data['aC' + a + 'V'].toFixed(2) + "</td>";
ACDetail += "<td>" + rel.data['aC' + a + 'A'].toFixed(2) + "</td>";
ACDetail += "</tr>";
}
ACDetail += "<tr>";
ACDetail += "<td colspan='3'>輸出功率 <span class='color-info-700 font-weight-bold'>" + ((rel.data.aC1W + rel.data.aC2W + rel.data.aC3W) / 1000).toFixed(2) + "</span> KW</td>";
ACDetail += "</tr>";
ACDetail += "<tr>";
ACDetail += "<td colspan='3'>PR <span class='color-info-700 font-weight-bold'>" + rel.data.pr.toFixed(2) + "</span> %</td>";
ACDetail += "</tr>";
$('#inverterInfo-AC').empty();
$('#inverterInfo-AC').append(ACDetail);
var DCDetail = "";
var DCTOTAL = 0;
for (var a = 1; a < 6; a++) {
DCDetail += "<tr>";
DCDetail += "<td>" + a + "</td>";
DCDetail += "<td>" + rel.data['dC' + a + 'V'].toFixed(2) + "</td>";
DCDetail += "<td>" + rel.data['dC' + a + 'A'].toFixed(2) + "</td>";
DCDetail += "<td>" + rel.data['dC' + a + 'KW'].toFixed(2) + "</td>";
DCDetail += "<td>" + rel.data['rA' + a ].toFixed(2) + "</td>";
DCDetail += "</tr>";
DCTOTAL += rel.data['dC' + a + 'W'];
}
DCDetail += "<tr>";
DCDetail += "<td colspan='5'>直流功率 <span class='color-info-700 font-weight-bold'>" + (DCTOTAL / 1000).toFixed(2) + "</span> KW</td>";
DCDetail += "</tr>";
$('#inverterInfo-DC').empty();
$('#inverterInfo-DC').append(DCDetail);
$('#inverterInfo-name').html(rel.data.inverterName);
$("#inverterdetailmodal").modal();
})
}
</script>
}

View File

@ -0,0 +1,546 @@
<div class="row my-5">
<div class="tree w-100">
<ul>
<li class=" w-100">
<div class="mx-auto" style="width: 20%;">
<div class="card border m-auto m-lg-0" id="Invertercard">
<a href="0station.html"> <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="..."> </a>
<div class="card-body d-flex justify-content-between pb-0 px-2">
<h4 class="font-weight-bold" style="line-height: 27px;" id="Invertercard-Name"> <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed"> <i class="fal fa-check"></i> </a> 新竹巨城站</h4>
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x" id="Invertercard-weathericon"></i></p>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p>發電量</p>
<p><span class="color-info-700 font-weight-bold" id="Invertercard-kwh">185</span> kWh</p>
<p id="Invertercard-Temp">27°C</p>
</div>
<div class=" d-flex justify-content-between">
<p>發電金額</p>
<p><span class="color-info-700 font-weight-bold" id="Invertercard-money">2,5840</span> NT</p>
<p class="color-info-700 font-weight-bold" id="Invertercard-type">自建躉售</p>
</div>
<div class=" d-flex justify-content-between">
<p>Pr值</p>
<p><span class="color-info-700 font-weight-bold" id="Invertercard-pr">90</span> %</p>
<p class="small" id="Invertercard-date">17:50:36</p>
</div>
</div>
</div>
</div>
</div>
<ul id="ullist">
<li class="col-xl-3">
<div class="card border m-auto m-lg-0">
<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">
<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> 逆變器 022020001010001 (96.6kWp)</p>
<p class="card-text">4分鐘前</p>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">設備狀態</p>
<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>
<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" data-toggle="modal" data-target="#default-example-modal-center">詳細資料</a></span></p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸出功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸入功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class="d-flex">
PR
<span class="d-inline-block ml-auto">36.3%</span>
</div>
<div class="progress progress-sm mb-3">
<div class="progress-bar bg-info-400" role="progressbar" style="width: 36.3%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">日發電量</p>
<p class="mb-0">83.1</p>
<p class="mb-0">kWh</p>
</div>
</div>
</div>
</div>
<ul>
<li class="w-100 px-0">
<div class="card border m-auto m-lg-0">
<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">
<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> 逆變器 022020001010001 (96.6kWp)</p>
<p class="card-text">4分鐘前</p>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">設備狀態</p>
<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>
<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" OnClick='InverterInfoDetail()'>詳細資料</a></span></p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸出功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸入功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class="d-flex">
PR
<span class="d-inline-block ml-auto">36.3%</span>
</div>
<div class="progress progress-sm mb-3">
<div class="progress-bar bg-info-400" role="progressbar" style="width: 36.3%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">日發電量</p>
<p class="mb-0">83.1</p>
<p class="mb-0">kWh</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="col-xl-3">
<div class="card border m-auto m-lg-0">
<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">
<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> 逆變器 022020001010001 (96.6kWp)</p>
<p class="card-text">4分鐘前</p>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">設備狀態</p>
<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>
<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" data-toggle="modal" data-target="#default-example-modal-center">詳細資料</a></span></p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸出功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸入功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class="d-flex">
PR
<span class="d-inline-block ml-auto">36.3%</span>
</div>
<div class="progress progress-sm mb-3">
<div class="progress-bar bg-info-400" role="progressbar" style="width: 36.3%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">日發電量</p>
<p class="mb-0">83.1</p>
<p class="mb-0">kWh</p>
</div>
</div>
</div>
</div>
<ul>
<li class="w-100 px-0">
<div class="card border m-auto m-lg-0">
<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">
<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> 逆變器 022020001010001 (96.6kWp)</p>
<p class="card-text">4分鐘前</p>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">設備狀態</p>
<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>
<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" data-toggle="modal" data-target="#default-example-modal-center">詳細資料</a></span></p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸出功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸入功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class="d-flex">
PR
<span class="d-inline-block ml-auto">36.3%</span>
</div>
<div class="progress progress-sm mb-3">
<div class="progress-bar bg-info-400" role="progressbar" style="width: 36.3%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">日發電量</p>
<p class="mb-0">83.1</p>
<p class="mb-0">kWh</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="col-xl-3">
<div class="card border m-auto m-lg-0">
<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">
<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> 逆變器 022020001010001 (96.6kWp)</p>
<p class="card-text">4分鐘前</p>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">設備狀態</p>
<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>
<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" data-toggle="modal" data-target="#default-example-modal-center">詳細資料</a></span></p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸出功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸入功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class="d-flex">
PR
<span class="d-inline-block ml-auto">36.3%</span>
</div>
<div class="progress progress-sm mb-3">
<div class="progress-bar bg-info-400" role="progressbar" style="width: 36.3%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">日發電量</p>
<p class="mb-0">83.1</p>
<p class="mb-0">kWh</p>
</div>
</div>
</div>
</div>
</li>
<li class="col-xl-3">
<div class="card border m-auto m-lg-0">
<div class="card-body d-flex justify-content-between pb-0 px-2 bg-fusion-25">
<p class="font-weight-bold"> <i class="fal fa-ballot-check"></i> 逆變器 022020001010001 (96.6kWp)</p>
<p class="card-text">4分鐘前</p>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">設備狀態</p>
<p class="mb-0"><span class="color-info-700 font-weight-bold">正常</span></p>
<p class="mb-0"><span class="color-info-700 font-weight-bold"><a href="javascript:;" data-toggle="modal" data-target="#default-example-modal-center">詳細資料</a></span></p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸出功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">輸入功率</p>
<p class="mb-0">1.7</p>
<p class="mb-0">kw</p>
</div>
</div>
<div class="list-group-item px-2 bg-info-20">
<div class="d-flex">
PR
<span class="d-inline-block ml-auto">36.3%</span>
</div>
<div class="progress progress-sm mb-3">
<div class="progress-bar bg-info-400" role="progressbar" style="width: 36.3%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="list-group-item px-2">
<div class=" d-flex justify-content-between">
<p class="mb-0">日發電量</p>
<p class="mb-0">83.1</p>
<p class="mb-0">kWh</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="modal fade" id="inverterdetailmodal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="inverterInfo-name">逆變器022020001010001</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<table class="table table-bordered mb-3 text-center">
<thead class="thead-themed">
<tr>
<th>供應商</th>
<th>型號</th>
<th>廠商序號</th>
</tr>
</thead>
<tbody id="inverterInfo-Detail">
<tr>
<td>SOLAREDGE</td>
<td>SE82.8K</td>
<td>20210831002</td>
</tr>
</tbody>
</table>
<table class="table table-bordered mb-3 text-center">
<thead class="thead-themed">
<tr>
<th colspan="3">交流</th>
</tr>
<tr>
<th>組別</th>
<th>電壓(V)</th>
<th>電流(A)</th>
</tr>
</thead>
<tbody id="inverterInfo-AC">
<tr>
<td>A</td>
<td>230.6</td>
<td>3.66</td>
</tr>
<tr>
<td>B</td>
<td>230.6</td>
<td>3.66</td>
</tr>
<tr>
<td>C</td>
<td>230.6</td>
<td>3.66</td>
</tr>
<tr>
<td colspan="3">輸出功率 <span class="color-info-700 font-weight-bold">4800</span> KW</td>
</tr>
<tr>
<td colspan="3">PR <span class="color-info-700 font-weight-bold">96.23</span> %</td>
</tr>
</tbody>
</table>
<table class="table table-bordered mb-3 text-center">
<thead class="thead-themed">
<tr>
<th colspan="5">直流</th>
</tr>
<tr>
<th>組別</th>
<th>電壓(V)</th>
<th>電流(A)</th>
<th>功率 KW</th>
<th>RA %</th>
</tr>
</thead>
<tbody id="inverterInfo-DC">
<tr>
<td>1</td>
<td>230.6</td>
<td>3.66</td>
<td>3.66</td>
<td>89.12</td>
</tr>
<tr>
<td>2</td>
<td>230.6</td>
<td>3.66</td>
<td>3.66</td>
<td>89.12</td>
</tr>
<tr>
<td>3</td>
<td>230.6</td>
<td>3.66</td>
<td>3.66</td>
<td>89.12</td>
</tr>
<tr>
<td>4</td>
<td>230.6</td>
<td>3.66</td>
<td>3.66</td>
<td>89.12</td>
</tr>
<tr>
<td>5</td>
<td>230.6</td>
<td>3.66</td>
<td>3.66</td>
<td>89.12</td>
</tr>
<tr>
<td colspan="5">直流功率 <span class="color-info-700 font-weight-bold">5200</span> KW</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
<style>
/*Now the CSS Created by R.S*/
* {
margin: 0;
padding: 0;
}
.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 0.75rem 0 0.75rem;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after {
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
width: 0;
height: 20px;
}
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
border-color: #94a0b4;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/
</style>

View File

@ -1,10 +1,21 @@
var time = true;
var tt = 0;
function timer() {
console.log("haha");
//console.log("haha");
if (tt < 5) {
postMessage(tt + "分鐘前");
tt++;
} else {
tt = 0
postMessage("ok");
};
console.log(tt);
}
if (time) {
var myVar = setInterval(function () { timer() }, 300000);
var myVar = setInterval(function () { timer() }, 60000);
time = false;
}