1172 lines
28 KiB
HTML
1172 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>接口状态</title>
|
||
<link rel="stylesheet" type="text/css" href="../../js/core/layui2.7.6/css/layui.css"/>
|
||
<link rel="stylesheet" type="text/css" href="../../css/electricity/lineStatuFrom.css" />
|
||
<style>
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 98%;
|
||
margin: 0;
|
||
padding: 0;
|
||
float: left;
|
||
}
|
||
html{
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
body{
|
||
width: 97%;
|
||
}
|
||
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
|
||
padding: 5px 0;
|
||
border-top: none;
|
||
border-right: none;
|
||
}
|
||
.layui-table-header
|
||
{
|
||
margin-bottom: 0.4%;
|
||
}
|
||
.layui-table-header tr{
|
||
background-image: url(../../img/index/child/titleLong.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.layui-table-header tr th{
|
||
color: #ffffff;
|
||
}
|
||
.layui-table-main tr{
|
||
background-image: url(../../img/index/child/standardColumnLong.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
display: inline-block;
|
||
margin-bottom: 5px;
|
||
}
|
||
.layui-table-main tr td{
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
.layui-table-main tr:hover{
|
||
background-image: url(../../img/index/child/standardColumnHoverLong.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.layui-table td, .layui-table th, .layui-table-fixed-r, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
||
border-width: 0px;
|
||
}
|
||
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table[lay-even] tr:nth-child(even) {
|
||
background-color: rgba(0,0,0,0);
|
||
}
|
||
.layui-table {
|
||
background-color: rgba(0,0,0,0);
|
||
}
|
||
.layui-laypage-count{
|
||
color: #FFFFFF!important;
|
||
}
|
||
.layui-box a{
|
||
color: #FFFFFF!important;
|
||
}
|
||
.layui-form-label {
|
||
position: relative;
|
||
float: left;
|
||
display: block;
|
||
padding: 12px 6px;
|
||
width: 80px;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
text-align: right;
|
||
}
|
||
.layui-table-tool-self{
|
||
display:none;
|
||
}
|
||
.layui-table-box {
|
||
margin-left: 1%;
|
||
}
|
||
|
||
.layui-table-tool-self {
|
||
display: none;
|
||
}
|
||
|
||
.layui-table-page .layui-laypage input {
|
||
width: 40px;
|
||
background: transparent;
|
||
color: white;
|
||
}
|
||
|
||
.layui-table-page .layui-laypage button {
|
||
background: transparent;
|
||
color: white;
|
||
}
|
||
|
||
.layui-box, .layui-box * {
|
||
box-sizing: content-box;
|
||
color: #00e0ff;
|
||
}
|
||
|
||
.layui-table-view select[lay-ignore] {
|
||
display: inline-block;
|
||
color: white;
|
||
background: transparent;
|
||
}
|
||
.layui-form-select .layui-input {
|
||
padding-right: 4px;
|
||
cursor: pointer;
|
||
background: transparent;
|
||
color: #ffffff;
|
||
}
|
||
.layui-layer-title{
|
||
color: #f1f1f1;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="top">
|
||
<div class="top-left" style="border: 1px solid #b3a4a4;border-radius: 30px;">
|
||
<div class="top-left-up">
|
||
<div class="layui-form">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label" style="font-size: 16px;color: white;">线路选择：</label>
|
||
<div class="layui-input-inline">
|
||
<select id="dropdown" name="dropdown" lay-filter="dropdown" style="width: 176px;background: transparent;color: white;">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label" style="font-size: 16px;color: white;">日期选择：</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="phyTimeStart" placeholder="yyyy-MM-dd" style="width: 176px;background: transparent;color: white;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="top-left-down">
|
||
<div class="data">
|
||
<div class="data-title">A相电流：<div class="data-value" id="currentA">xxx </div><span>A</span></div>
|
||
<div class="data-title">B相电流：<div class="data-value" id="currentB">xxx </div><span>A</span></div>
|
||
<div class="data-title">C相电流：<div class="data-value" id="currentC">xxx </div><span>A</span></div>
|
||
</div>
|
||
<div class="data">
|
||
<div class="data-title">A相电压：<div class="data-value" id="voltageA">xxx </div><span>V</span></div>
|
||
<div class="data-title">B相电压：<div class="data-value" id="voltageB">xxx </div><span>V</span></div>
|
||
<div class="data-title">C相电压：<div class="data-value" id="voltageC">xxx </div><span>V</span></div>
|
||
</div>
|
||
<div class="data">
|
||
<div class="data-title">A相温度：<div class="data-value" id="tempA">xxx </div><span>℃</span></div>
|
||
<div class="data-title">B相温度：<div class="data-value" id="tempB">xxx </div><span>℃</span></div>
|
||
<div class="data-title">C相温度：<div class="data-value" id="tempC">xxx </div><span>℃</span></div>
|
||
</div>
|
||
<div class="data">
|
||
<div class="data-title">零线温度：<div class="data-value" id="zeroTemp">xxx </div><span>℃</span></div>
|
||
<div class="data-title">零线电流：<div class="data-value" id="zeroCurrent">xxx </div><span>A</span></div>
|
||
</div>
|
||
<div class="data">
|
||
<div class="data-title">总功率：<div class="data-value" id="totalPower">xxx </div><span>W</span></div>
|
||
<div class="data-title">剩余电流：<div class="data-value" id="residualCurrent">xxx </div><span>mA</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="top-right">
|
||
<div class="echarts1" id="after-current"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom">
|
||
<div class="bottom-left">
|
||
<div class="echarts1" id="temp"></div>
|
||
</div>
|
||
<div class="bottom-middle">
|
||
<div class="echarts1" id="voltage"></div>
|
||
</div>
|
||
<div class="bottom-right">
|
||
<div class="echarts1" id="current"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|
||
<script type="text/javascript" src="../../js/core/jquery-3.6.0.js"></script>
|
||
<script src="../../js/core/public.js" type="text/javascript"></script>
|
||
<script src="../../js/core/echarts-v5.4.2/echarts.js"></script>
|
||
<script src="../../js/core/layui2.7.6/layui.js"></script>
|
||
<!--<script type="text/javascript" src="../../js/electricity/electricityFrom.js"></script>-->
|
||
<script type="text/javascript">
|
||
var params = new URLSearchParams(location.search);
|
||
var mac = params.get('value');
|
||
|
||
layui.use(['form', 'laydate'], function(){
|
||
var form = layui.form;
|
||
var laydate = layui.laydate;
|
||
// 时间选择器配置
|
||
|
||
getLineName('', '', mac);
|
||
// 下拉框选择事件
|
||
form.on('select(dropdown)', function(data){
|
||
var selectedValue = data.value;
|
||
generalInterface(mac, selectedValue, dateValue);
|
||
});
|
||
|
||
|
||
var lineValue = $("#dropdown").val();
|
||
var dateValue = getNowTime();
|
||
generalInterface(mac,lineValue,dateValue);
|
||
|
||
laydate.render({
|
||
elem: '#phyTimeStart',
|
||
value: getNowTime(),
|
||
isInitValue: true,
|
||
done: function(value){
|
||
dateValue = $("#phyTimeStart").val();
|
||
lineValue = $("#dropdown").val();
|
||
generalInterface(mac, lineValue, value);
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
function generalInterface(mac,lineValue,dateValue) {
|
||
console.log(mac,lineValue,dateValue)
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/getGeneralInterface',
|
||
data: {
|
||
"mac": mac,
|
||
"lineValue": lineValue,
|
||
"dateValue": dateValue
|
||
},
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
data = res.obj;
|
||
document.getElementById('currentA').innerText =data.dataList[0].aa;
|
||
document.getElementById('currentB').innerText =data.dataList[0].ba;
|
||
document.getElementById('currentC').innerText =data.dataList[0].ca;
|
||
document.getElementById('voltageA').innerText =data.dataList[0].av;
|
||
document.getElementById('voltageB').innerText =data.dataList[0].bv;
|
||
document.getElementById('voltageC').innerText =data.dataList[0].cv;
|
||
document.getElementById('tempA').innerText =data.dataList[0].at;
|
||
document.getElementById('tempB').innerText =data.dataList[0].bt;
|
||
document.getElementById('tempC').innerText =data.dataList[0].ct;
|
||
document.getElementById('zeroTemp').innerText =data.dataList[0].nt;
|
||
document.getElementById('zeroCurrent').innerText =data.dataList[0].na;
|
||
document.getElementById('totalPower').innerText =data.dataList[0].gw;
|
||
document.getElementById('residualCurrent').innerText =data.dataList[0].ga;
|
||
Residual(data);
|
||
temp(data);
|
||
voltage(data);
|
||
current(data);
|
||
}
|
||
});
|
||
}
|
||
|
||
function getLineName(from, id, mac) {
|
||
$("#dropdown").empty();
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/getLineName',
|
||
data: {
|
||
"mac": mac,
|
||
},
|
||
async: false,
|
||
success: function (data) {
|
||
var res = data;
|
||
var html = '';
|
||
// html += '<option value="">请选择线路</option>';
|
||
for (var i = 0; i < res.length; i++) {
|
||
if (id == res[i].id) {
|
||
html += '<option selected value=\'' + res[i].id + '\'>' + res[i].name + '</option>';
|
||
} else {
|
||
html += '<option value=\'' + res[i].id + '\'>' + res[i].name + '</option>';
|
||
}
|
||
}
|
||
$("#dropdown").html(html);
|
||
|
||
// 设置第一个选项为初始值
|
||
var firstOptionValue = $("#dropdown option:first").val();
|
||
$("#dropdown").val(firstOptionValue);
|
||
|
||
layui.form.render("select");
|
||
},
|
||
error: function (err) {
|
||
console.log("获取线路数据失败：", err);
|
||
}
|
||
});
|
||
}
|
||
|
||
//剩余电流
|
||
function Residual(data) {
|
||
data.residual
|
||
let monthlyChart = echarts.init(document.getElementById('after-current'));
|
||
var xData = data.residual.map(function(item) {
|
||
var time_parts = item.updateTime.split(" ")[1].split(":");
|
||
var hour = time_parts[0];
|
||
var minute = time_parts[1];
|
||
return hour + ":" + minute;
|
||
});
|
||
|
||
var lines = data.residual.map(function(item) {
|
||
return item.ga;
|
||
});
|
||
var attrs = [{
|
||
name: "剩余电流",
|
||
unit: ""
|
||
}];
|
||
option = {
|
||
title: {
|
||
text: '剩余电流(mA)',
|
||
left: '1%',
|
||
top: '5%',
|
||
textStyle: {
|
||
color: '#C9C8CD',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'none',
|
||
padding: 5,
|
||
formatter: function(param) {
|
||
var resultTooltip = "";
|
||
resultTooltip =
|
||
"<div style='background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.2);padding:5px;border-radius:3px;'>" +
|
||
"<div style='text-align:center;'>" + param[0].name + "</div>" +
|
||
"<div style='padding-top:5px;'>" + "<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[0].color + ";'></span>" +
|
||
"<span style=''> " + param[0].seriesName + ": </span>" +
|
||
"<span style='color:" + param[0].color + "'>" + param[0].value + "</span></span><span>" + attrs[0].unit + "</span>";
|
||
for (var i = 1; i < param.length; i++) {
|
||
resultTooltip +=
|
||
"<div style='padding-top:2px;'>" +
|
||
"<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[i].color + ";'></span>" +
|
||
"<span style=''> " + param[i].seriesName + ": </span>" +
|
||
"<span style='color:" + param[i].color + "'>" + param[i].value + "</span><span>" + attrs[i].unit + "</span>"
|
||
|
||
}
|
||
|
||
resultTooltip +=
|
||
"</div>" +
|
||
"</div>";
|
||
return resultTooltip
|
||
}
|
||
|
||
},
|
||
grid: {
|
||
left: '10%',
|
||
top: '20%',
|
||
right: '5%',
|
||
bottom: '8%',
|
||
},
|
||
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: xData,
|
||
axisLabel: {
|
||
interval: 6,
|
||
show: true,
|
||
fontSize: 9,
|
||
textStyle: {
|
||
color: "#C9C8CD" //X轴文字颜色
|
||
},
|
||
|
||
formatter: function(value) {
|
||
var str = "";
|
||
str += value.substring(0, 4) + "\n";
|
||
str += value.substring(5, 10);
|
||
return str;
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true //不显示x轴
|
||
},
|
||
axisTick: {
|
||
show: true //不显示刻度
|
||
},
|
||
boundaryGap: false,
|
||
splitLine: {
|
||
show: true,
|
||
width: 0.08,
|
||
lineStyle: {
|
||
type: "solid",
|
||
color: "#03202E"
|
||
}
|
||
},
|
||
axisPointer: { //轴指示器
|
||
type: 'shadow',
|
||
z: 1,
|
||
shadowStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(18,155,249,0)' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(18,155,249,1)' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
},
|
||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||
shadowBlur: 5
|
||
}
|
||
},
|
||
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
scale: true, //坐标轴起点不限制0
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 9,
|
||
color: "#C9C8CD" //X轴文字颜色
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
|
||
},
|
||
axisTick: {
|
||
show: false, //不显示刻度
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
nameTextStyle: {
|
||
color: "#FFFFFF"
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: [{
|
||
name: attrs[0].name,
|
||
type: 'line',
|
||
data: lines,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#0099ff',
|
||
shadowColor: '#0099ff',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0099ff',
|
||
}
|
||
},
|
||
smooth: true
|
||
}]
|
||
};
|
||
monthlyChart.setOption(option);
|
||
}
|
||
//温度
|
||
function temp(data) {
|
||
let monthlyChart = echarts.init(document.getElementById('temp'));
|
||
var xData = data.temp.map(function(item) {
|
||
var time_parts = item.updateTime.split(" ")[1].split(":");
|
||
var hour = time_parts[0];
|
||
var minute = time_parts[1];
|
||
return hour + ":" + minute;
|
||
});
|
||
|
||
var aTemp = data.temp.map(function(item) {
|
||
return item.at;
|
||
});
|
||
var bTemp = data.temp.map(function(item) {
|
||
return item.bt;
|
||
});
|
||
var cTemp = data.temp.map(function(item) {
|
||
return item.ct;
|
||
});
|
||
var attrs = [{
|
||
name: "A相温度",
|
||
unit: ""
|
||
}, {
|
||
name: "B相温度",
|
||
unit: ""
|
||
}, {
|
||
name: "C相温度",
|
||
unit: ""
|
||
}];
|
||
option = {
|
||
title: {
|
||
text: '温度(℃)',
|
||
left: 'left',
|
||
top: '5%',
|
||
textStyle: {
|
||
color: '#C9C8CD',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'none',
|
||
padding: 5,
|
||
formatter: function(param) {
|
||
var resultTooltip = "";
|
||
resultTooltip =
|
||
"<div style='background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.2);padding:5px;border-radius:3px;'>" +
|
||
"<div style='text-align:center;'>" + param[0].name + "</div>" +
|
||
"<div style='padding-top:5px;'>" + "<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[0].color + ";'></span>" +
|
||
"<span style=''> " + param[0].seriesName + ": </span>" +
|
||
"<span style='color:" + param[0].color + "'>" + param[0].value + "</span></span><span>" + attrs[0].unit + "</span>";
|
||
for (var i = 1; i < param.length; i++) {
|
||
resultTooltip +=
|
||
"<div style='padding-top:2px;'>" +
|
||
"<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[i].color + ";'></span>" +
|
||
"<span style=''> " + param[i].seriesName + ": </span>" +
|
||
"<span style='color:" + param[i].color + "'>" + param[i].value + "</span><span>" + attrs[i].unit + "</span>"
|
||
|
||
}
|
||
|
||
resultTooltip +=
|
||
"</div>" +
|
||
"</div>";
|
||
return resultTooltip
|
||
}
|
||
|
||
},
|
||
grid: {
|
||
left: '10%',
|
||
top: '20%',
|
||
right: '5%',
|
||
bottom: '8%',
|
||
},
|
||
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: xData,
|
||
axisLabel: {
|
||
interval: 6,
|
||
show: true,
|
||
fontSize: 9,
|
||
textStyle: {
|
||
color: "#C9C8CD" //X轴文字颜色
|
||
},
|
||
|
||
formatter: function(value) {
|
||
var str = "";
|
||
str += value.substring(0, 4) + "\n";
|
||
str += value.substring(5, 10);
|
||
return str;
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true //不显示x轴
|
||
},
|
||
axisTick: {
|
||
show: true //不显示刻度
|
||
},
|
||
boundaryGap: false,
|
||
splitLine: {
|
||
show: true,
|
||
width: 0.08,
|
||
lineStyle: {
|
||
type: "solid",
|
||
color: "#03202E"
|
||
}
|
||
},
|
||
axisPointer: { //轴指示器
|
||
type: 'shadow',
|
||
z: 1,
|
||
shadowStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(18,155,249,0)' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(18,155,249,1)' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
},
|
||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||
shadowBlur: 5
|
||
}
|
||
},
|
||
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
scale: true, //坐标轴起点不限制0
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 9,
|
||
color: "#C9C8CD" //X轴文字颜色
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
|
||
},
|
||
axisTick: {
|
||
show: false, //不显示刻度
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
nameTextStyle: {
|
||
color: "#FFFFFF"
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: [{
|
||
name: attrs[0].name,
|
||
type: 'line',
|
||
data: aTemp,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#0099ff',
|
||
shadowColor: '#0099ff',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0099ff',
|
||
}
|
||
},
|
||
smooth: true
|
||
},
|
||
{
|
||
name: attrs[1].name,
|
||
type: 'line',
|
||
data: bTemp,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#66ff66',
|
||
shadowColor: '#66ff66',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#66ff66',
|
||
}
|
||
},
|
||
smooth: true
|
||
},
|
||
{
|
||
name: attrs[2].name,
|
||
type: 'line',
|
||
data: cTemp,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#fa676c',
|
||
shadowColor: '#fa676c',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#fa676c',
|
||
}
|
||
},
|
||
smooth: true
|
||
}
|
||
]
|
||
};
|
||
monthlyChart.setOption(option);
|
||
}
|
||
//电压
|
||
function voltage(data) {
|
||
let monthlyChart = echarts.init(document.getElementById('voltage'));
|
||
var xData = data.voltage.map(function(item) {
|
||
var time_parts = item.updateTime.split(" ")[1].split(":");
|
||
var hour = time_parts[0];
|
||
var minute = time_parts[1];
|
||
return hour + ":" + minute;
|
||
});
|
||
|
||
var aVoltage = data.voltage.map(function(item) {
|
||
return item.av;
|
||
});
|
||
var bVoltage = data.voltage.map(function(item) {
|
||
return item.bv;
|
||
});
|
||
var cVoltage = data.voltage.map(function(item) {
|
||
return item.cv;
|
||
});
|
||
var attrs = [{
|
||
name: "A相电压",
|
||
unit: ""
|
||
}, {
|
||
name: "B相电压",
|
||
unit: ""
|
||
}, {
|
||
name: "C相电压",
|
||
unit: ""
|
||
}];
|
||
option = {
|
||
title: {
|
||
text: '电压(V)',
|
||
left: 'left',
|
||
top: '5%',
|
||
textStyle: {
|
||
color: '#C9C8CD',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'none',
|
||
padding: 5,
|
||
formatter: function(param) {
|
||
var resultTooltip = "";
|
||
resultTooltip =
|
||
"<div style='background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.2);padding:5px;border-radius:3px;'>" +
|
||
"<div style='text-align:center;'>" + param[0].name + "</div>" +
|
||
"<div style='padding-top:5px;'>" + "<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[0].color + ";'></span>" +
|
||
"<span style=''> " + param[0].seriesName + ": </span>" +
|
||
"<span style='color:" + param[0].color + "'>" + param[0].value + "</span></span><span>" + attrs[0].unit + "</span>";
|
||
for (var i = 1; i < param.length; i++) {
|
||
resultTooltip +=
|
||
"<div style='padding-top:2px;'>" +
|
||
"<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[i].color + ";'></span>" +
|
||
"<span style=''> " + param[i].seriesName + ": </span>" +
|
||
"<span style='color:" + param[i].color + "'>" + param[i].value + "</span><span>" + attrs[i].unit + "</span>"
|
||
|
||
}
|
||
|
||
resultTooltip +=
|
||
"</div>" +
|
||
"</div>";
|
||
return resultTooltip
|
||
}
|
||
|
||
},
|
||
grid: {
|
||
left: '10%',
|
||
top: '20%',
|
||
right: '5%',
|
||
bottom: '8%',
|
||
},
|
||
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: xData,
|
||
axisLabel: {
|
||
interval: 6,
|
||
show: true,
|
||
fontSize: 9,
|
||
textStyle: {
|
||
color: "#C9C8CD" //X轴文字颜色
|
||
},
|
||
|
||
formatter: function(value) {
|
||
var str = "";
|
||
str += value.substring(0, 4) + "\n";
|
||
str += value.substring(5, 10);
|
||
return str;
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true //不显示x轴
|
||
},
|
||
axisTick: {
|
||
show: true //不显示刻度
|
||
},
|
||
boundaryGap: false,
|
||
splitLine: {
|
||
show: true,
|
||
width: 0.08,
|
||
lineStyle: {
|
||
type: "solid",
|
||
color: "#03202E"
|
||
}
|
||
},
|
||
axisPointer: { //轴指示器
|
||
type: 'shadow',
|
||
z: 1,
|
||
shadowStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(18,155,249,0)' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(18,155,249,1)' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
},
|
||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||
shadowBlur: 5
|
||
}
|
||
},
|
||
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
scale: true, //坐标轴起点不限制0
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 9,
|
||
color: "#C9C8CD" //X轴文字颜色
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
|
||
},
|
||
axisTick: {
|
||
show: false, //不显示刻度
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
nameTextStyle: {
|
||
color: "#FFFFFF"
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: [{
|
||
name: attrs[0].name,
|
||
type: 'line',
|
||
data: aVoltage,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#0099ff',
|
||
shadowColor: '#0099ff',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0099ff',
|
||
}
|
||
},
|
||
smooth: true
|
||
},
|
||
{
|
||
name: attrs[1].name,
|
||
type: 'line',
|
||
data: bVoltage,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#66ff66',
|
||
shadowColor: '#66ff66',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#66ff66',
|
||
}
|
||
},
|
||
smooth: true
|
||
},
|
||
{
|
||
name: attrs[2].name,
|
||
type: 'line',
|
||
data: cVoltage,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#fa676c',
|
||
shadowColor: '#fa676c',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#fa676c',
|
||
}
|
||
},
|
||
smooth: true
|
||
}
|
||
]
|
||
};
|
||
monthlyChart.setOption(option);
|
||
}
|
||
//电流
|
||
function current(data) {
|
||
let monthlyChart = echarts.init(document.getElementById('current'));
|
||
var xData = data.current.map(function(item) {
|
||
var time_parts = item.updateTime.split(" ")[1].split(":");
|
||
var hour = time_parts[0];
|
||
var minute = time_parts[1];
|
||
return hour + ":" + minute;
|
||
});
|
||
|
||
var aCurrent = data.current.map(function(item) {
|
||
return item.aa;
|
||
});
|
||
var bCurrent = data.current.map(function(item) {
|
||
return item.ba;
|
||
});
|
||
var cCurrent = data.current.map(function(item) {
|
||
return item.ca;
|
||
});
|
||
var attrs = [{
|
||
name: "A相电流",
|
||
unit: ""
|
||
}, {
|
||
name: "B相电流",
|
||
unit: ""
|
||
}, {
|
||
name: "C相电流",
|
||
unit: ""
|
||
}];
|
||
option = {
|
||
title: {
|
||
text: '电流(A)',
|
||
left: 'left',
|
||
top: '5%',
|
||
textStyle: {
|
||
color: '#C9C8CD',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'none',
|
||
padding: 5,
|
||
formatter: function(param) {
|
||
var resultTooltip = "";
|
||
resultTooltip =
|
||
"<div style='background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.2);padding:5px;border-radius:3px;'>" +
|
||
"<div style='text-align:center;'>" + param[0].name + "</div>" +
|
||
"<div style='padding-top:5px;'>" + "<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[0].color + ";'></span>" +
|
||
"<span style=''> " + param[0].seriesName + ": </span>" +
|
||
"<span style='color:" + param[0].color + "'>" + param[0].value + "</span></span><span>" + attrs[0].unit + "</span>";
|
||
for (var i = 1; i < param.length; i++) {
|
||
resultTooltip +=
|
||
"<div style='padding-top:2px;'>" +
|
||
"<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[i].color + ";'></span>" +
|
||
"<span style=''> " + param[i].seriesName + ": </span>" +
|
||
"<span style='color:" + param[i].color + "'>" + param[i].value + "</span><span>" + attrs[i].unit + "</span>"
|
||
|
||
}
|
||
|
||
resultTooltip +=
|
||
"</div>" +
|
||
"</div>";
|
||
return resultTooltip
|
||
}
|
||
|
||
},
|
||
grid: {
|
||
left: '10%',
|
||
top: '20%',
|
||
right: '5%',
|
||
bottom: '8%',
|
||
},
|
||
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: xData,
|
||
axisLabel: {
|
||
interval: 6,
|
||
show: true,
|
||
fontSize: 9,
|
||
textStyle: {
|
||
color: "#C9C8CD" //X轴文字颜色
|
||
},
|
||
|
||
formatter: function(value) {
|
||
var str = "";
|
||
str += value.substring(0, 4) + "\n";
|
||
str += value.substring(5, 10);
|
||
return str;
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true //不显示x轴
|
||
},
|
||
axisTick: {
|
||
show: true //不显示刻度
|
||
},
|
||
boundaryGap: false,
|
||
splitLine: {
|
||
show: true,
|
||
width: 0.08,
|
||
lineStyle: {
|
||
type: "solid",
|
||
color: "#03202E"
|
||
}
|
||
},
|
||
axisPointer: { //轴指示器
|
||
type: 'shadow',
|
||
z: 1,
|
||
shadowStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(18,155,249,0)' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(18,155,249,1)' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
},
|
||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||
shadowBlur: 5
|
||
}
|
||
},
|
||
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
scale: true, //坐标轴起点不限制0
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 9,
|
||
color: "#C9C8CD" //X轴文字颜色
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
|
||
},
|
||
axisTick: {
|
||
show: false, //不显示刻度
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
nameTextStyle: {
|
||
color: "#FFFFFF"
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: [{
|
||
name: attrs[0].name,
|
||
type: 'line',
|
||
data: aCurrent,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#0099ff',
|
||
shadowColor: '#0099ff',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0099ff',
|
||
}
|
||
},
|
||
smooth: true
|
||
},
|
||
{
|
||
name: attrs[1].name,
|
||
type: 'line',
|
||
data: bCurrent,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#66ff66',
|
||
shadowColor: '#66ff66',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#66ff66',
|
||
}
|
||
},
|
||
smooth: true
|
||
},
|
||
{
|
||
name: attrs[2].name,
|
||
type: 'line',
|
||
data: cCurrent,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: '#fa676c',
|
||
shadowColor: '#fa676c',
|
||
shadowBlur: 4,
|
||
shadowOffsetY: 3
|
||
}
|
||
},
|
||
symbol: 'emptyCircle',
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#fa676c',
|
||
}
|
||
},
|
||
smooth: true
|
||
}
|
||
]
|
||
};
|
||
monthlyChart.setOption(option);
|
||
}
|
||
|
||
// function getUrlParam(name) {
|
||
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||
// var r = window.location.search.substr(1).match(reg);
|
||
// if (r != null) {
|
||
// return decodeURI(r[2]);
|
||
// }
|
||
// return null;
|
||
// }
|
||
</script> |