Skip to content

B
bigScreen
Commit 03906b49 by guoxuejian
Options

去除其他设备，修正数据

parent ce6ae9a6
Showing with 1991 additions and 281 deletions
index-04-26.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MR智能运维平台</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="./font/Alimama_DongFangDaKai_Regular.ttf">
<script src="./js/echarts.min.js"></script>
<script src="./js/code.jquery.com_jquery-3.7.0.min.js"></script>
<script src="./js/ol.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
/* 地图 */
.map {
/* position: fixed; */
/* margin: auto; */
width: 100%;
height: 100%;
}
.map img {
width: 100%;
position: fixed;
bottom: 0;
z-index: -2;
}
.shade{
}
.shadeTop{
position: fixed;
width: 100%;
height: 30%;
background-image: url(./images/ztop1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
}
.shadeButtom{
position: fixed;
width: 100%;
height: 15%;
bottom: 0;
background-image: url(./images/bbottom1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
}
.shadeLeft{
position: fixed;
width: 28%;
height: 100%;
left: 0;
background-image: url(./images/zleft1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
}
.shadeRight{
position: fixed;
width: 28%;
height: 100%;
right: 0;
background-image: url(./images/zright1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
}
body {
margin: auto;
background-image: url(./images/b1.png);
background-repeat: no-repeat;
background-size: 100%;
}
.header {
width: 100%;
height: 105px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.header img {
position: absolute;
width: 100%;
}
.header i {
position: absolute;
color: #00e4ff;
line-height: 75px;
display: block;
margin-left: 20px;
font-style: normal;
}
.header span {
position: relative;
font-size: 34px;
/* color: #00e4ff; */
line-height: 105px;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #8aedff, #00c6ff);
color: transparent;
-webkit-background-clip: text;
}
.statistics {
margin: 3% auto;
text-align: center;
font-size: 26px;
position: fixed;
top: 6%;
left: 27%;
z-index: 2;
}
.statistics thead tr th {
width: 120px;
color: #00d2ff;
}
.statistics tbody tr td {
border: none;
}
.statistics tbody {
color: #ffcc00;
}
/* 饼图 */
.panel1 {
position: fixed;
top: 26%;
left: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
}
.panel1,
.sudden,
.warning,
.capacity h4 {
text-align: center;
line-height: 78px;
font-size: 22px;
color: #00e4ff;
}
.panel-left {
float: left;
width: 172px;
height: 245px;
margin-left: 35px;
}
.panel-left-title {
width: 90px;
height: 20px;
border-left: 4px solid #00c6ff;
font-size: 14px;
text-align: center;
line-height: 20px;
color: #fff;
}
.panel-left-list ul li {
margin-top: 5px;
background-image: url(./images/list.png);
background-size: 100%;
background-repeat: no-repeat;
width: 160px;
height: 31px;
list-style: none;
color: #00c6ff;
line-height: 31px;
font-size: 12px;
text-align: left;
}
/* 突发事件 */
.sudden {
position: fixed;
top: 26%;
right: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
}
/* 告警数据 */
.warning {
position: fixed;
bottom: calc(100% - 24% - 720px);
right: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
}
/* 电站效率 */
.capacity {
position: fixed;
bottom: calc(100% - 24% - 720px);
left: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
}
.perform {
margin-top: -12px;
margin-left: 20px;
height: 160px;
}
.finishing {
float: left;
width: 130px;
height: 160px;
/* border: 1px solid red; */
margin-left: 5px;
}
.finishing-text {
margin: auto;
text-align: center;
margin-top: -5px
}
.accumulated {
width: 390px;
height: 60px;
background-image: url(./images/bg2.png);
background-size: 100%;
background-repeat: no-repeat;
margin: 20px auto;
text-align: center;
line-height: 60px;
color: #00e4ff;
font-size: 20px;
}
/* 告警数据 */
.warningDevice {
margin: auto;
width: 400px;
text-align: left;
font-size: 14px;
border-spacing: 0;
}
.warningDevice tr th,
td {
width: 130px;
height: 30px;
border-bottom: 1px solid rgba(142, 227, 255, 0.3);
line-height: 40px;
padding-left: 10px;
/* border-collapse: collapse; */
}
.warningDevice tr th {
background-color: #6ab0fd;
color: black;
position: sticky;
top: 0;
z-index: 10;
}
.warningDevice tr td {
color: #6ab0fd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.footer img {
position: fixed;
width: 60%;
bottom: 0;
margin-left: 20%;
z-index: 2;
}
.skip{
position: fixed;
width: 100px;
height: 40px;
right: 4%;
font-size: 22px;
top: 2%;
}
.admin{
float: left;
margin-right: 10px;
background-image: url(./images/admin.png);
background-size: 100%;
background-repeat: no-repeat;
width: 23px;
height: 24px;
}
.arrows{
float: right;
background-image: url(./images/arrows.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 15px;
margin-top: 9px;
}
.skip a{
color: #23cefd;
text-decoration: none;
}
</style>
<!-- <body onload="getCurrentTime()"> -->
<body>
<!-- 地图 -->
<div class="map">
<!-- 遮罩 -->
<div class="shade">
<div class="shadeTop"></div>
<div class="shadeButtom"></div>
<div class="shadeLeft"></div>
<div class="shadeRight"></div>
</div>
<!-- <img src="./images/map.png" alt=""> -->
<!-- 地图容器 -->
<div id="map-container" style="width: 100%;height: 100vh; z-index: 0; position: relative;"></div>
<script>
// 创建地图容器
var map = new ol.Map({
target: 'map-container',
layers: [
// new ol.layer.Tile({
// id: "tileSatellite",
// type: "raster",
// // source: new XYZ({
// source: new ol.source.XYZ({
// // url: "/map/{z}/{x}/{y}.png",
// url: "http://t3.tianditu.com/DataServer?T=img_w&tk=eff9a8168f2e8158b71581813ff99d80&x={x}&y={y}&l={z}",
// }),
// }),
new ol.layer.Tile({
id: "bla",
type: "raster",
// source: new XYZ({
source: new ol.source.XYZ({
// url: "/map/{z}/{x}/{y}.png",
// url: "https://192.168.156.123:8180/map/{z}/{x}/{y}.png",
url: "/map/{z}/{x}/{y}.png",
}),
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([
109.98916384242504, 35.13134060266306
]),
projection: "EPSG:3857",
zoom: 19,
maxZoom: 20,
})
});
// {
// "type": "Feature",
// "properties": {
// "id": 1,
// "Name": "国家电投澄城璞地光伏发电站",
// "Desc": null,
// "Address": null
// },
// "geometry": {
// "type": "Point",
// "coordinates": [
// 109.989707717209782,
// 35.130936020636923
// ]
// }
// }
let stationMarker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([109.989707717209782, 35.130936020636923])),
name: "项目地点",
// population: 4000,
// rainfall: 500,
});
let offsetMarker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([109.989707717209782, 35.130936020636923])),
name: "项目地点",
});
// 该坐标点的样式
let stationStyle = new ol.style.Style({
image: new ol.style.Icon({
src: "./images/point2.png",
scale: 1,
}),
});
// 该点向下偏移20像素放置一张图片
let offsetStyle = new ol.style.Style({
image: new ol.style.Icon({
src: "./images/stationImg.png",
scale: 1,
offset: [0, -100],
// 设置宽高
size: [330, 150],
}),
});
stationMarker.setStyle(stationStyle);
offsetMarker.setStyle(offsetStyle);
// 添加至地图
let stationSource = new ol.source.Vector({
features: [stationMarker, offsetMarker],
});
let stationLayer = new ol.layer.Vector({
source: stationSource,
});
map.addLayer(stationLayer);
map.on("click", async (e) => {
let coord = map.getCoordinateFromPixel(e.pixel);
// let lonlat = olProj.toLonLat(coord, this.proj);
let lonlat = ol.proj.transform(coord, "EPSG:3857", "EPSG:4326");
// this.handleMapClick(lonlat);
console.log(lonlat);
});
// 如果ip不是 192.168.156.123:8180 则使用下面的代码
// map.addLayer()
// }
</script>
</div>
<!-- 标题导航部分 -->
<div class="header">
<img src="./images/top.png" alt="">
<i id="nowSpan"></i>
<span>MR智能运维平台</span>
<div class="skip">
<div class="admin"></div>
<a href="/#/wel/index">后台</a>
<div class="arrows"></div>
</div>
</div>
<!-- 数据汇总 -->
<table class="statistics">
<thead>
<tr>
<th>告警</th>
<th>逆变器</th>
<th>箱变</th>
<!-- <th>风机</th> -->
<th>其他设备</th>
<th>巡检工单</th>
<th>维修工单</th>
</tr>
</thead>
<tbody>
<tr id="deviceAccount">
<td id="centerWarningNum">0</td>
<td id="centerDevice1Num">0</td>
<td id="centerDevice2Num">0</td>
<!-- <td id="centerDevice3Num">0</td> -->
<td id="centerDevice4Num">0</td>
<td id="inspectionOrderNum">0</td>
<td id="repairOrderNum">0</td>
</tr>
</tbody>
</table>
<!-- 左侧面板1 -->
<div class="panel1">
<h4>检修统计</h4>
<!-- <img src="./images/lift1.png" alt=""> -->
<div class="panel-left">
<div class="panel-left-title">检修工作台</div>
<div class="panel-left-list">
<ul>
<li>&nbsp;&nbsp;本月工单：
<span id="monthOrder">0</span>
</li>
<li>&nbsp;&nbsp;今日新增：
<span id="todayOrder">0</span>
</li>
<li>&nbsp;&nbsp;本周新增：
<span id="weekOrder">0</span>
</li>
<li>&nbsp;&nbsp;今日完结：
<span id="todayFinish">0</span>
</li>
<li>&nbsp;&nbsp;本周完结：
<span id="weekFinish">0</span>
</li>
<li>&nbsp;&nbsp;当前待办：
<span id="currentOrder">0</span>
</li>
</ul>
</div>
</div>
<div id="order-container" style="width: 240px;height: 345px;margin-left: 190px;margin-top: -85px;"></div>
</div>
<!-- 右侧面板 -->
<div class="sudden">
<h4>月突发事件</h4>
<!-- <img src="./images/lift1.png" alt=""> -->
<div id="emergency" style="width: 440px;height: 350px;margin-top: -45px;"></div>
</div>
<!-- 告警数据轮播 -->
<div class="warning">
<h4>告警数据</h4>
<div id="review_box" style="height: 230px;overflow: hidden;">
<table class="warningDevice" id="warning-table">
<tr>
<th>设备名称</th>
<th>告警数据</th>
<th>告警等级</th>
</tr>
<!-- script写到这里 -->
<script>
// $.ajax({
// type: "GET",
// url: "http://120.26.43.60/neops/monitor/alarm/list?stationCode=CQLPHJDZ&beginTime=2023-03-01",
// beforeSend: function (request) {
// request.setRequestHeader("X-Access-Token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTE5MDE4MzEsInVzZXJuYW1lIjoiYWRtaW4ifQ.4IEqUCtmikO7NLCexQcfLv5AXWuagBWBb6jowfondZg");
// },
// success: function (result) {
// console.log(result);
// var records = result.result.records2
// // console.log(records);
// // console.log(result.result.records2);
// for (let i = 0; i < records.length; i++) {
// const warn = records[i];
// console.log(warn);
// }
// },
// });
// 1. 数据准备
// let deviceWarning = [
// { device: '30-NB12', warning: '组串13组件异常', level: '一般' },
// { device: '27-NB12', warning: '组串1组件异常', level: '一般' },
// { device: '20-NB12', warning: '组串3组件异常', level: '一般' },
// { device: '30-NB12', warning: '组串13组件异常', level: '一般' },
// { device: '27-NB12', warning: '组串1组件异常', level: '一般' },
// { device: '20-NB12', warning: '组串3组件异常', level: '一般' },
// { device: '30-NB12', warning: '组串13组件异常', level: '一般' },
// { device: '27-NB12', warning: '组串1组件异常', level: '一般' },
// { device: '20-NB12', warning: '组串3组件异常', level: '一般' },
// ]
// // 2. 渲染页面
// for (let i = 0; i < deviceWarning.length; i++) {
// document.write(`
// <tr id="comment1">
// <td>${deviceWarning[i].device}</td>
// <td>${deviceWarning[i].warning}</td>
// <td>${deviceWarning[i].level}</td>
// </tr>
// `)
// }
</script>
</table>
<table class="warningDevice" id="comment2"></table>
</div>
</div>
<!-- 发电量功率展示 -->
<div class="capacity">
<h4>电站效率</h4>
<div class="perform">
<div class="finishing">
<div id="predict" style="width: 130px;height: 130px;"></div>
<div class="finishing-text">
<h6 style="color: #fff;font-weight: normal;">日发电量</h6>
<i id="daily" style="color: #00e4ff;font-style: normal;">0kWh</i>
</div>
</div>
<div class="finishing">
<div id="plan" style="width: 130px;height: 130px;"></div>
<div class="finishing-text">
<h6 style="color: #fff;font-weight: normal;">月发电量</h6>
<i id="monthly" style="color: #00e4ff;font-style: normal;">0kWh</i>
</div>
</div>
<div class="finishing">
<div id="yearlyPlan" style="width: 130px;height: 130px;"></div>
<div class="finishing-text">
<h6 style="color: #fff;font-weight: normal;">年发电量</h6>
<i id="yearly" style="color: #00e4ff;font-style: normal;">0万kWh</i>
</div>
</div>
</div>
<div class="accumulated" id="aggregate-value">累计发电量：0万kWh</div>
</div>
<!-- 底部效果 -->
<!-- <div class="footer">
<img src="./images/bottom.png" alt="">
</div> -->
<script type="text/javascript">
// 获取当前时间
function getCurrentTime() {
var today = new Date();//定义日期对象
var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
var MM = today.getMonth() + 1;//通过日期对象的getMonth()方法返回月
var dd = today.getDate();//通过日期对象的getDate()方法返回天
var hh = today.getHours();//通过日期对象的getHours方法返回小时
var mm = today.getMinutes();//通过日期对象的getMinutes方法返回分钟
var ss = today.getSeconds();//通过日期对象的getSeconds方法返回秒
MM = checkTime(MM);
dd = checkTime(dd);
mm = checkTime(mm);
ss = checkTime(ss);
var day; //用于保存星期（getDay()方法得到星期编号）
if (today.getDay() == 0) day = "星期日 "
if (today.getDay() == 1) day = "星期一 "
if (today.getDay() == 2) day = "星期二 "
if (today.getDay() == 3) day = "星期三 "
if (today.getDay() == 4) day = "星期四 "
if (today.getDay() == 5) day = "星期五 "
if (today.getDay() == 6) day = "星期六 "
document.getElementById('nowSpan').innerHTML = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + " " + day;
setTimeout('getCurrentTime()', 1000);//每一秒中重新加载getCurrentTime()方法
}
//当分钟，月份，天数 小于10时是 9->09 补0函数
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
getCurrentTime()
// 巡检维修饼图
var orderContainerDom = document.getElementById('order-container');
var orderPie = echarts.init(orderContainerDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
let orderData = [
{ value: 0, name: '维修工单' },
{ value: 0, name: '巡检工单' },
{ value: 0, name: '完结工单' },
{ value: 0, name: '待办工单' },
{ value: 0, name: '新增工单' },
]
let orderContainerOption = {
tooltip: {
trigger: 'item'
},
legend: {
itemWidth: 25,
itemHeight: 13,
itemGap: 10,
bottom: '2%',
left: 'center',
padding: [40, 11, 20, 37],
textStyle: {
color: '#ffffff'//字体颜色
},
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['35%', '55%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
color: '#fff'
},
emphasis: {
label: {
show: true,
fontSize: 18,
fontWeight: 'bold',
}
},
labelLine: {
show: false,
},
// data: [
// { value: 348, name: '维修工单' },
// { value: 735, name: '巡检工单' },
// { value: 580, name: '完结工单' },
// { value: 484, name: '待办工单' },
// { value: 300, name: '新增工单' },
// ]
data: orderData
}
]
};
if (orderContainerOption && typeof orderContainerOption === 'object') {
orderPie.setOption(orderContainerOption);
}
</script>
<!-- 突发事件 -->
<script type="text/javascript">
var emergencyDom = document.getElementById('emergency');
var emergencyChart = echarts.init(emergencyDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
// 根据当前月份获取当前月份天数以及剩余天数
function getDays() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var d = new Date(year, month, 0);
var days = d.getDate();
var nowDay = date.getDate();
var surplusDay = days - nowDay;
return [days, surplusDay];
}
// 获取当前月份天数
var days = getDays()[0] - getDays()[1];
console.log(days);
let daysList = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
// let showDataList = [10, 52, 20, 34, 30, 33, 22, 10, 52, 20, 34, 39, 30, 20, 2, 10, 52, 20, 33, 30, 30, 20, 10, 2, 40, 34, 9, 37, 70, 10, 23]
let showDataList = Array(days).fill(0)
let emergencyOption = {
color: '#0079fe',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '6%',
right: '4%',
// bottom: '1%',
containLabel: true
},
xAxis: [
{
type: 'category',
// data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
data: daysList.slice(0, days),
axisTick: {
alignWithLabel: true
},
axisLine: {
show: true,//是否展示
lineStyle: {
type: 'solid',
// color: '#8ee3ff', //左边线的颜色
color: 'rgba(142,227,255,0.3)',
width: '1',//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff', //坐标值得具体的颜色
}
}
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLine: {
lineStyle: {
// color: '#8ee3ff', //左边线的颜色
// color: 'rgba(142,227,255,0.3)',
width: '1',//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff', //坐标值得具体的颜色
}
},
splitLine: {//分割线配置
show: true,
lineStyle: {
color: 'rgba(142,227,255,0.4)',
}
}
}
],
series: [
{
name: '今日突发事件',
type: 'bar',
barWidth: '60%',
// data: [10, 52, 20, 34, 30, 33, 22, 10, 52, 20, 34, 39, 30, 20, 2, 10, 52, 20, 33, 30, 30, 20, 10, 2, 40, 34, 9, 37, 70, 10, 23],
data: showDataList.slice(0, days),
},
]
};
if (emergencyOption && typeof emergencyOption === 'object') {
emergencyChart.setOption(emergencyOption);
}
</script>
<!-- 电站效率 预计完成率 -->
<script type="text/javascript">
var predictDom = document.getElementById('predict');
var predictCompletePie = echarts.init(predictDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
const predictCompleteData = [
{
value: 0,
name: '预计完成率',
title: {
offsetCenter: ['0%', '-10%'],
fontSize: '10',
color: '#fff'
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '20%'],
width: '30',
height: '20',
fontSize: '12',
color: '#fff',
}
},
];
let predictCompleteOption = {
series: [
{
type: 'gauge',
startAngle: 130,
endAngle: -230,
color: '#0e70ff',
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 1,
borderColor: '#080833'
}
},
axisLine: {
lineStyle: {
width: 10
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: predictCompleteData,
title: {
fontSize: 14
},
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'inherit',
borderColor: 'inherit',
borderRadius: 20,
// borderWidth: 1,
formatter: '{value}%'
}
}
]
};
if (predictCompleteOption && typeof predictCompleteOption === 'object') {
predictCompletePie.setOption(predictCompleteOption);
}
</script>
<!-- 月计划完成率 -->
<script type="text/javascript">
var monthPlanCompleteDom = document.getElementById('plan');
var monthPlanCompletePie = echarts.init(monthPlanCompleteDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
const monthPlanCompleteData = [
{
value: 0,
name: '计划完成率',
title: {
offsetCenter: ['0%', '-10%'],
fontSize: '10',
color: '#fff'
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '20%'],
width: '30',
height: '20',
fontSize: '12',
color: '#fff',
}
},
];
let monthPlanCompleteOption = {
series: [
{
type: 'gauge',
startAngle: 100,
endAngle: -260,
color: '#1ca715',
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 1,
borderColor: '#080833'
}
},
axisLine: {
lineStyle: {
width: 10
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: monthPlanCompleteData,
title: {
fontSize: 14
},
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'inherit',
borderColor: 'inherit',
borderRadius: 20,
// borderWidth: 1,
formatter: '{value}%'
}
}
]
};
if (monthPlanCompleteOption && typeof monthPlanCompleteOption === 'object') {
monthPlanCompletePie.setOption(monthPlanCompleteOption);
}
</script>
<!-- 年计划完成率 -->
<script type="text/javascript">
var yearPlanCompleteDom = document.getElementById('yearlyPlan');
var yearPlanCompletePie = echarts.init(yearPlanCompleteDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
const yearPlanCompleteData = [
{
value: 0,
name: '计划完成率',
title: {
offsetCenter: ['0%', '-10%'],
fontSize: '10',
color: '#fff'
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '20%'],
width: '30',
height: '20',
fontSize: '12',
color: '#fff',
}
},
];
let yearPlanCompleteOption = {
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: -270,
color: '#49deff',
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 1,
borderColor: '#080833'
}
},
axisLine: {
lineStyle: {
width: 10
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: yearPlanCompleteData,
title: {
fontSize: 14
},
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'inherit',
borderColor: 'inherit',
borderRadius: 20,
// borderWidth: 1,
formatter: '{value}%'
}
}
]
};
if (yearPlanCompleteOption && typeof yearPlanCompleteOption === 'object') {
yearPlanCompletePie.setOption(yearPlanCompleteOption);
}
window.addEventListener('resize', () => {
yearPlanCompletePie.resize();
emergencyChart.resize();
orderPie.resize();
predictCompletePie.resize();
monthPlanCompletePie.resize();
});
</script>
<!-- 告警数据滚动 -->
<script>
// window.onload = roll(50);
let globalTimer = null;
function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 开始无滚动时设为0
globalTimer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
// 鼠标移入div时暂停滚动
ulbox.onmouseover = function () {
clearInterval(globalTimer);
}
// 鼠标移出div后继续滚动
ulbox.onmouseout = function () {
globalTimer = setInterval(rollStart, t);
}
}
// 开始滚动函数
function rollStart() {
// 上面声明的DOM对象为局部对象需要再次声明
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollTop >= ulbox.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop++;
}
}
</script>
<script>
// let deviceWarning = []
const monthOrderNum = {
inspection: 0,
inspectionFinish: 0,
repair: 0,
repairFinish: 0,
}
const weekOrderNum = {
inspection: 0,
inspectionFinish: 0,
repair: 0,
repairFinish: 0,
}
const dayOrderNum = {
inspection: 0,
inspectionFinish: 0,
repair: 0,
repairFinish: 0,
}
function uploadCompleteStatus() {
loadDataStatus.uploadCompleteStatus = true
$.ajax({
type: "GET",
// url: "http://120.26.43.60/neops/dashboard/energy-statistics?areaType=Station&stationCode=CQLPHJDZ",
url: "/alarmDevice/dashboard/energy-statistics?areaType=Station&stationCode=CQLPHJDZ",
beforeSend: function (request) {
request.setRequestHeader("X-Access-Token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTE5MDE4MzEsInVzZXJuYW1lIjoiYWRtaW4ifQ.4IEqUCtmikO7NLCexQcfLv5AXWuagBWBb6jowfondZg");
},
success: function (result) {
// alert(result);
console.log(result);
let totalEle = +(result.result.et / 10000).toFixed(2)
let yearTotalEle = +(result.result.ey / 10000).toFixed(2)
$('#daily').html(result.result.ed + 'kWh')
$('#monthly').html(result.result.em + 'kWh')
// $('#yearly').html(result.result.ey + 'kWh')
$('#yearly').html(yearTotalEle + '万kWh')
$('#aggregate-value').html("累计发电量：" + totalEle + '万kWh')
predictCompleteData[0].value = result.result.percentEd
monthPlanCompleteData[0].value = result.result.percentEm
yearPlanCompleteData[0].value = result.result.percentEy
predictCompletePie.setOption({
series: [
{
data: predictCompleteData,
pointer: {
show: false
}
}
]
});
monthPlanCompletePie.setOption({
series: [
{
data: monthPlanCompleteData,
pointer: {
show: false
}
}
]
});
yearPlanCompletePie.setOption({
series: [
{
data: yearPlanCompleteData,
pointer: {
show: false
}
}
]
});
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
// console.log(xhr);
// console.log(status);
// console.log(error);
loadDataStatus.uploadCompleteStatus = false
}
});
}
function updateWarningData() {
loadDataStatus.updateWarningData = true
$.ajax({
type: "post",
// url: "http://120.26.43.60/neops/monitor/alarm/list?stationCode=CQLPHJDZ&beginTime=2023-03-01",
url: "/alarmDevice/operation/alarm/list",
data: JSON.stringify({
"alarmEndTime": "",
"alarmStartTime": "",
"alertStatus": [0],
"alertTimeOrder": "",
"clearEndTime": "",
"clearStartTime": "",
"clearTimeOrder": "",
"devCode": "",
"deviceName": "",
"deviceType": [],
"level": [],
"matrixCode": "",
"name": "",
"pageNum": 1,
"pageSize": 100,
"position": "",
"source": []
}),
beforeSend: function (request) {
request.setRequestHeader("X-Access-Token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTE5MDE4MzEsInVzZXJuYW1lIjoiYWRtaW4ifQ.4IEqUCtmikO7NLCexQcfLv5AXWuagBWBb6jowfondZg");
},
contentType: "application/json;charset=UTF-8",
success: function (result) {
console.log('updateWarningData', result);
var records = result.result.records
let centerWarningNumDom = document.getElementById('centerWarningNum')
centerWarningNumDom.innerHTML = `${result.result.total}`
let warningtableDom = document.getElementById('warning-table');
// 先清空 warningtableDom 中的子节点
warningtableDom.innerHTML = `
<tr>
<th>设备名称</th>
<th>告警数据</th>
<th>告警等级</th>
</tr>`
records.forEach(warn => {
// 向该 dom 节点中添加子节点
warningtableDom.innerHTML += `
<tr id="comment1">
<td>${warn.deviceName}</td>
<td>${warn.alarmDes}</td>
<td>${
warn.level == 7 ? '一般' :
warn.level == 8 ? '重要' :
warn.level == 9 ? '危机' :
'未知'
}</td>
</tr>
`
});
clearInterval(globalTimer)
roll(50)
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
// console.log(xhr);
// console.log(status);
// console.log(error);
loadDataStatus.updateWarningData = false
}
});
}
function uploadDeviceAccountData() {
loadDataStatus.uploadDeviceAccountData = true
$.ajax({
type: "GET",
// url: "https://192.168.156.123:8180/api/blade-deviceAccount/deviceAccount/getDeviceAccountCountByType",
url: "/api/blade-deviceAccount/deviceAccount/getDeviceAccountCountByType",
// beforeSend: function (request) {
// request.setRequestHeader("X-Access-Token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTE5MDE4MzEsInVzZXJuYW1lIjoiYWRtaW4ifQ.4IEqUCtmikO7NLCexQcfLv5AXWuagBWBb6jowfondZg");
// },
success: function (result) {
let deviceAccountDom = document.getElementById('deviceAccount');
// deviceAccountDom
console.log('uploadDeviceAccountData', result);
let records = result.data
records.forEach(record => {
console.log(record);
console.log(record.deviceType);
switch (record.deviceType) {
case '1':
let centerWarning1Num = document.getElementById('centerDevice1Num')
centerWarning1Num.innerHTML = `${record.count ? record.count : 0}`
// childContent += `<td id="centerDevice1Num">${record.deviceCount}</td>`
break;
case '2':
// childContent += `<td id="centerDevice2Num">${record.deviceCount}</td>`
let centerWarning2Num = document.getElementById('centerDevice2Num')
centerWarning2Num.innerHTML = `${record.count ? record.count : 0}`
break;
case '3':
// childContent += `<td id="centerDevice3Num">${record.deviceCount}</td>`
// let centerWarning3Num = document.getElementById('centerDevice3Num')
// centerWarning3Num.innerHTML = `${record.count ? record.count : 0}`
break;
case '4':
// childContent += `<td id="centerDevice4Num">${record.deviceCount}</td>`
let centerWarning4Num = document.getElementById('centerDevice4Num')
centerWarning4Num.innerHTML = `${record.count ? record.count : 0}`
break;
default:
break;
}
});
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
loadDataStatus.uploadDeviceAccountData = false
}
});
}
function updateInspectionMonthOrderData() {
loadDataStatus.updateInspectionMonthOrderData = true
$.ajax({
type: "GET",
url: "/api/blade-inspectionWorkOrder/inspectionWorkOrder/indexCountMonth",
success: function (result) {
console.log('updateInspectionMonthOrderData', result);
let records = result.data
let inspectionOrderNumDom = document.getElementById('inspectionOrderNum')
// inspectionOrderNUm.innerHTML = `${result.data ? result.data : 0}`
// if (records && records.length > 0 && records[0].count) {
// inspectionOrderNumDom.innerHTML = `${records[0].count}`
// } else {
// inspectionOrderNumDom.innerHTML = `0`
// }
monthOrderNum.inspection = 0
monthOrderNum.inspectionFinish = 0
records.forEach(item => {
if (item.taskStatus == 1) {
monthOrderNum.inspectionFinish += item.count
}
monthOrderNum.inspection += item.count
});
inspectionOrderNumDom.innerHTML = `${monthOrderNum.inspection}`
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
loadDataStatus.updateInspectionMonthOrderData = false
}
});
}
function updateInspectionWeekOrderData() {
loadDataStatus.updateInspectionWeekOrderData = true
$.ajax({
type: "GET",
url: "/api/blade-inspectionWorkOrder/inspectionWorkOrder/indexCountWeek",
success: function (result) {
console.log('updateInspectionWeekOrderData', result);
let records = result.data
weekOrderNum.inspection = 0
weekOrderNum.inspectionFinish = 0
records.forEach(item => {
if (item.taskStatus == 1) {
weekOrderNum.inspectionFinish += item.count
}
weekOrderNum.inspection += item.count
});
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
loadDataStatus.updateInspectionWeekOrderData = false
}
});
}
function updateInspectionDayOrderData() {
loadDataStatus.updateInspectionDayOrderData = true
$.ajax({
type: "GET",
url: "/api/blade-inspectionWorkOrder/inspectionWorkOrder/indexCountDay",
success: function (result) {
console.log('updateInspectionDayOrderData', result);
let records = result.data
// if (records && records.length > 0 && records[0].count) {
// dayOrderNum.inspection = records[0].count
// } else {
// dayOrderNum.inspection = 0
// }
dayOrderNum.inspection = 0
dayOrderNum.inspectionFinish = 0
records.forEach(item => {
if (item.taskStatus == 1) {
dayOrderNum.inspectionFinish += item.count
}
dayOrderNum.inspection += item.count
});
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
loadDataStatus.updateInspectionDayOrderData = false
}
});
}
function updateRepairMonthOrderData() {
loadDataStatus.updateRepairMonthOrderData = true
$.ajax({
type: "GET",
url: "/api/blade-repairRecord/repairRecord/indexCountMonth",
success: function (result) {
console.log('updateRepairOrderData', result);
let records = result.data
let repairOrderNumDom = document.getElementById('repairOrderNum')
// if (records && records.length > 0 && records[0].count) {
// repairOrderNumDom.innerHTML = `${records[0].count}`
// } else {
// repairOrderNumDom.innerHTML = `0`
// }
monthOrderNum.repair = 0
monthOrderNum.repairFinish = 0
records.forEach(item => {
if (item.taskStatus == 1) {
monthOrderNum.repairFinish += item.count
}
monthOrderNum.repair += item.count
});
repairOrderNumDom.innerHTML = `${monthOrderNum.repair}`
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
loadDataStatus.updateRepairMonthOrderData = false
}
});
}
function updateRepairDayOrderData() {
loadDataStatus.updateRepairDayOrderData = true
$.ajax({
type: "GET",
url: "/api/blade-repairRecord/repairRecord/indexCountDay",
success: function (result) {
console.log('updateRepairDayOrderData', result);
let records = result.data
// if (records && records.length > 0 && records[0].count) {
// dayOrderNum.repair = records[0].count
// } else {
// dayOrderNum.repair = 0
// }
dayOrderNum.repair = 0
dayOrderNum.repairFinish = 0
records.forEach(item => {
if (item.taskStatus == 1) {
dayOrderNum.repairFinish += item.count
}
dayOrderNum.repair += item.count
});
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
loadDataStatus.updateRepairDayOrderData = false
}
});
}
function updateRepairWeekOrderData() {
loadDataStatus.updateRepairWeekOrderData = true
$.ajax({
type: "GET",
url: "/api/blade-repairRecord/repairRecord/indexCountWeek",
success: function (result) {
console.log('updateRepairWeekOrderData', result);
let records = result.data
weekOrderNum.repair = 0
weekOrderNum.repairFinish = 0
records.forEach(item => {
if (item.taskStatus == 1) {
weekOrderNum.repairFinish += item.count
}
weekOrderNum.repair += item.count
});
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
loadDataStatus.updateRepairWeekOrderData = false
}
});
}
// 更新突发事件数据
function updateEmergencyData() {
loadDataStatus.updateEmergencyData = true
$.ajax({
type: "GET",
url: "/api/blade-inspectionWorkOrder/inspectionWorkOrder/list?type=4&current=1&size=100",
success: function (result) {
console.log('updateEmergencyData', result);
let records = result.data.records
// res 为当前天数列表，全部为0
let currDays = getDays()[0] - getDays()[1]
let res = new Array(currDays).fill(0)
let currMonth = new Date().getMonth() + 1
records.forEach(item => {
// 获取 item.createTime 的月份并检查是否为当前月份
let createTime = new Date(item.createTime)
let createMonth = createTime.getMonth() + 1
if (createMonth == currMonth) {
res[createTime.getDate() - 1] += 1
}
});
console.log('res', res);
emergencyOption.xAxis[0].data = daysList.slice(0, currDays)
emergencyOption.series[0].data = res.slice(0, currDays)
emergencyChart.setOption(emergencyOption);
},
// 失败或者超时的回调函数
error: function (xhr, status, error) {
loadDataStatus.updateEmergencyData = false
}
});
}
const loadDataStatus = {
uploadCompleteStatus: false,
updateWarningData: false,
uploadDeviceAccountData: false,
updateInspectionMonthOrderData: false,
updateRepairMonthOrderData: false,
updateInspectionDayOrderData: false,
updateRepairDayOrderData: false,
updateInspectionWeekOrderData: false,
updateRepairWeekOrderData: false,
updateEmergencyData: false,
}
uploadDeviceAccountData()
uploadCompleteStatus()
updateWarningData()
uploadDeviceAccountData();
updateInspectionMonthOrderData();
updateRepairMonthOrderData();
updateInspectionDayOrderData();
updateRepairDayOrderData();
updateInspectionWeekOrderData();
updateRepairWeekOrderData();
updateEmergencyData();
setInterval(function () {
// 电站效率定时刷新
if (!loadDataStatus.uploadCompleteStatus) {
uploadCompleteStatus()
}
// uploadCompleteStatus()
// 告警滚动数据刷新
if (!loadDataStatus.updateWarningData) {
updateWarningData()
}
// updateWarningData()
// 主要数据更新
if (!loadDataStatus.uploadDeviceAccountData) {
uploadDeviceAccountData()
}
// uploadDeviceAccountData()
}, 15000);
// 工单更新
setInterval(function () {
if (!loadDataStatus.updateInspectionMonthOrderData) {
updateInspectionMonthOrderData()
}
// updateInspectionMonthOrderData();
if (!loadDataStatus.updateRepairMonthOrderData) {
updateRepairMonthOrderData()
}
// updateRepairMonthOrderData();
if (!loadDataStatus.updateInspectionDayOrderData) {
updateInspectionDayOrderData()
}
// updateInspectionDayOrderData();
if (!loadDataStatus.updateRepairDayOrderData) {
updateRepairDayOrderData()
}
// updateRepairDayOrderData();
if (!loadDataStatus.updateInspectionWeekOrderData) {
updateInspectionWeekOrderData()
}
// updateRepairWeekOrderData();
if (!loadDataStatus.updateRepairWeekOrderData) {
updateRepairWeekOrderData()
}
// updateEmergencyData();
if (!loadDataStatus.updateEmergencyData) {
updateEmergencyData()
}
}, 600000);
// 更新 monthOrderNum
setInterval(function () {
let monthOrderDom = document.getElementById('monthOrder');
monthOrderDom.innerHTML = `${monthOrderNum.inspection + monthOrderNum.repair}`
let todayOrderDom = document.getElementById('todayOrder');
todayOrderDom.innerHTML = `${dayOrderNum.inspection + dayOrderNum.repair}`
let weekOrderDom = document.getElementById('weekOrder');
weekOrderDom.innerHTML = `${weekOrderNum.inspection + weekOrderNum.repair}`
let todayFinishOrderDom = document.getElementById('todayFinish');
todayFinishOrderDom.innerHTML = `${dayOrderNum.inspectionFinish + dayOrderNum.repairFinish}`
let weekFinishOrderDom = document.getElementById('weekFinish');
weekFinishOrderDom.innerHTML = `${weekOrderNum.inspectionFinish + weekOrderNum.repairFinish}`
console.log('monthOrderNum', monthOrderNum);
console.log(monthOrderNum.inspection + monthOrderNum.repair - monthOrderNum.inspectionFinish - monthOrderNum.repairFinish)
let monthUnFinishOrderDom = document.getElementById('currentOrder');
monthUnFinishOrderDom.innerHTML = `${monthOrderNum.inspection + monthOrderNum.repair - monthOrderNum.inspectionFinish - monthOrderNum.repairFinish}`
// 巡检维修饼图更新
orderData[0].value = monthOrderNum.repair
orderData[1].value = monthOrderNum.inspection
orderData[2].value = monthOrderNum.inspectionFinish + monthOrderNum.repairFinish
orderData[3].value = monthOrderNum.inspection + monthOrderNum.repair - monthOrderNum.inspectionFinish - monthOrderNum.repairFinish
orderData[4].value = monthOrderNum.inspection + monthOrderNum.repair
orderPie.setOption({
series: [
{
data: orderData,
pointer: {
show: false
}
}
]
});
}, 5000);
</script>
</body>
</html>
\ No newline at end of file
index.html
......@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MR智能运维平台</title>
<title>璞地光伏电站MR智能运维平台</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="./font/Alimama_DongFangDaKai_Regular.ttf">
<script src="./js/echarts.min.js"></script>
......@@ -13,332 +13,344 @@
</head>
<style>
* {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
/* 地图 */
.map {
/* position: fixed; */
/* margin: auto; */
width: 100%;
height: 100%;
/* position: fixed; */
/* margin: auto; */
width: 100%;
height: 100%;
}
.map img {
width: 100%;
position: fixed;
bottom: 0;
z-index: -2;
width: 100%;
position: fixed;
bottom: 0;
z-index: -2;
}
.shade{
.shade {}
.shadeTop {
position: fixed;
width: 100%;
height: 30%;
background-image: url(./images/ztop1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
/* 元素永远不会成为鼠标事件的target */
}
.shadeTop{
position: fixed;
width: 100%;
height: 30%;
background-image: url(./images/ztop1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
.shadeButtom {
position: fixed;
width: 100%;
height: 15%;
bottom: 0;
background-image: url(./images/bbottom1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
/* 元素永远不会成为鼠标事件的target */
}
.shadeButtom{
position: fixed;
width: 100%;
height: 15%;
bottom: 0;
background-image: url(./images/bbottom1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
}
.shadeLeft{
position: fixed;
width: 28%;
height: 100%;
left: 0;
background-image: url(./images/zleft1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
.shadeLeft {
position: fixed;
width: 28%;
height: 100%;
left: 0;
background-image: url(./images/zleft1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
/* 元素永远不会成为鼠标事件的target */
}
.shadeRight{
position: fixed;
width: 28%;
height: 100%;
right: 0;
background-image: url(./images/zright1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none; /* 元素永远不会成为鼠标事件的target */
.shadeRight {
position: fixed;
width: 28%;
height: 100%;
right: 0;
background-image: url(./images/zright1.png);
background-size: 100%;
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
/* 元素永远不会成为鼠标事件的target */
}
body {
margin: auto;
background-image: url(./images/b1.png);
background-repeat: no-repeat;
background-size: 100%;
margin: auto;
background-image: url(./images/b1.png);
background-repeat: no-repeat;
background-size: 100%;
}
.header {
width: 100%;
height: 105px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 105px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.header img {
position: absolute;
width: 100%;
position: absolute;
width: 100%;
}
.header i {
position: absolute;
color: #00e4ff;
line-height: 75px;
display: block;
margin-left: 20px;
font-style: normal;
position: absolute;
color: #00e4ff;
line-height: 75px;
display: block;
margin-left: 20px;
font-style: normal;
}
.header span {
position: relative;
font-size: 34px;
/* color: #00e4ff; */
line-height: 105px;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #8aedff, #00c6ff);
color: transparent;
-webkit-background-clip: text;
position: relative;
font-size: 34px;
/* color: #00e4ff; */
line-height: 105px;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #8aedff, #00c6ff);
color: transparent;
-webkit-background-clip: text;
}
.statistics {
margin: 3% auto;
text-align: center;
font-size: 26px;
position: fixed;
top: 6%;
left: 27%;
z-index: 2;
margin: 3% auto;
text-align: center;
font-size: 26px;
position: fixed;
top: 6%;
left: 30%;
z-index: 2;
width: 40%;
}
.statistics thead tr th {
width: 120px;
color: #00d2ff;
width: 120px;
color: #00d2ff;
}
.statistics tbody tr td {
border: none;
border: none;
}
.statistics tbody {
color: #ffcc00;
color: #ffcc00;
}
/* 饼图 */
.panel1 {
position: fixed;
top: 26%;
left: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
position: fixed;
top: 26%;
left: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
}
.panel1,
.sudden,
.warning,
.capacity h4 {
text-align: center;
line-height: 78px;
font-size: 22px;
color: #00e4ff;
text-align: center;
line-height: 78px;
font-size: 22px;
color: #00e4ff;
}
.panel-left {
float: left;
width: 172px;
height: 245px;
margin-left: 35px;
float: left;
width: 172px;
height: 245px;
margin-left: 35px;
}
.panel-left-title {
width: 90px;
height: 20px;
border-left: 4px solid #00c6ff;
font-size: 14px;
text-align: center;
line-height: 20px;
color: #fff;
width: 90px;
height: 20px;
border-left: 4px solid #00c6ff;
font-size: 14px;
text-align: center;
line-height: 20px;
color: #fff;
}
.panel-left-list ul li {
margin-top: 5px;
background-image: url(./images/list.png);
background-size: 100%;
background-repeat: no-repeat;
width: 160px;
height: 31px;
list-style: none;
color: #00c6ff;
line-height: 31px;
font-size: 12px;
text-align: left;
margin-top: 5px;
background-image: url(./images/list.png);
background-size: 100%;
background-repeat: no-repeat;
width: 160px;
height: 31px;
list-style: none;
color: #00c6ff;
line-height: 31px;
font-size: 12px;
text-align: left;
}
/* 突发事件 */
.sudden {
position: fixed;
top: 26%;
right: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
position: fixed;
top: 26%;
right: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
}
/* 告警数据 */
.warning {
position: fixed;
bottom: calc(100% - 24% - 720px);
right: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
position: fixed;
bottom: calc(100% - 24% - 720px);
right: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
}
/* 电站效率 */
.capacity {
position: fixed;
bottom: calc(100% - 24% - 720px);
left: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
position: fixed;
bottom: calc(100% - 24% - 720px);
left: 3%;
width: 450px;
height: 330px;
background-image: url(./images/lift1.png);
background-size: 100%;
z-index: 2;
}
.perform {
margin-top: -12px;
margin-left: 20px;
height: 160px;
margin-top: -12px;
margin-left: 20px;
height: 160px;
}
.finishing {
float: left;
width: 130px;
height: 160px;
/* border: 1px solid red; */
margin-left: 5px;
float: left;
width: 130px;
height: 160px;
/* border: 1px solid red; */
margin-left: 5px;
}
.finishing-text {
margin: auto;
text-align: center;
margin-top: -5px
margin: auto;
text-align: center;
margin-top: -5px
}
.accumulated {
width: 390px;
height: 60px;
background-image: url(./images/bg2.png);
background-size: 100%;
background-repeat: no-repeat;
margin: 20px auto;
text-align: center;
line-height: 60px;
color: #00e4ff;
font-size: 20px;
width: 390px;
height: 60px;
background-image: url(./images/bg2.png);
background-size: 100%;
background-repeat: no-repeat;
margin: 20px auto;
text-align: center;
line-height: 60px;
color: #00e4ff;
font-size: 20px;
}
/* 告警数据 */
.warningDevice {
margin: auto;
width: 400px;
text-align: left;
font-size: 14px;
border-spacing: 0;
margin: auto;
width: 400px;
text-align: left;
font-size: 14px;
border-spacing: 0;
}
.warningDevice tr th,
td {
width: 130px;
height: 30px;
border-bottom: 1px solid rgba(142, 227, 255, 0.3);
line-height: 40px;
padding-left: 10px;
/* border-collapse: collapse; */
width: 130px;
height: 30px;
border-bottom: 1px solid rgba(142, 227, 255, 0.3);
line-height: 40px;
padding-left: 10px;
/* border-collapse: collapse; */
}
.warningDevice tr th {
background-color: #6ab0fd;
color: black;
position: sticky;
top: 0;
z-index: 10;
background-color: #6ab0fd;
color: black;
position: sticky;
top: 0;
z-index: 10;
}
.warningDevice tr td {
color: #6ab0fd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
color: #6ab0fd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.footer img {
position: fixed;
width: 60%;
bottom: 0;
margin-left: 20%;
z-index: 2;
position: fixed;
width: 60%;
bottom: 0;
margin-left: 20%;
z-index: 2;
}
.skip {
position: fixed;
width: 100px;
height: 40px;
right: 4%;
font-size: 22px;
top: 2%;
}
.admin {
float: left;
margin-right: 10px;
background-image: url(./images/admin.png);
background-size: 100%;
background-repeat: no-repeat;
width: 23px;
height: 24px;
}
.arrows {
float: right;
background-image: url(./images/arrows.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 15px;
margin-top: 9px;
}
.skip a {
color: #23cefd;
text-decoration: none;
}
.skip{
position: fixed;
width: 100px;
height: 40px;
right: 4%;
font-size: 22px;
top: 2%;
}
.admin{
float: left;
margin-right: 10px;
background-image: url(./images/admin.png);
background-size: 100%;
background-repeat: no-repeat;
width: 23px;
height: 24px;
}
.arrows{
float: right;
background-image: url(./images/arrows.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 15px;
margin-top: 9px;
}
.skip a{
color: #23cefd;
text-decoration: none;
}
</style>
<!-- <body onload="getCurrentTime()"> -->
......@@ -407,13 +419,13 @@
// }
let stationMarker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([109.989707717209782, 35.130936020636923])),
name: "项目地点",
name: "国家电投澄城璞地光伏发电站",
// population: 4000,
// rainfall: 500,
});
let offsetMarker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([109.989707717209782, 35.130936020636923])),
name: "项目地点",
name: "国家电投澄城璞地光伏发电站",
});
// 该坐标点的样式
let stationStyle = new ol.style.Style({
......@@ -450,9 +462,9 @@
// this.handleMapClick(lonlat);
console.log(lonlat);
});
// 如果ip不是 192.168.156.123:8180 则使用下面的代码
// map.addLayer()
// }
// 如果ip不是 192.168.156.123:8180 则使用下面的代码
// map.addLayer()
// }
</script>
</div>
......@@ -460,38 +472,40 @@
<div class="header">
<img src="./images/top.png" alt="">
<i id="nowSpan"></i>
<span>MR智能运维平台</span>
<div class="skip">
<span>璞地光伏电站MR智能运维平台</span>
<div class="skip">
<div class="admin"></div>
<a href="/#/wel/index">后台</a>
<div class="arrows"></div>
</div>
</div>
<!-- 数据汇总 -->
<table class="statistics">
<thead>
<tr>
<th>告警</th>
<th>逆变器</th>
<th>箱变</th>
<!-- <th>风机</th> -->
<th>其他设备</th>
<th>巡检工单</th>
<th>维修工单</th>
</tr>
</thead>
<tbody>
<tr id="deviceAccount">
<td id="centerWarningNum">0</td>
<td id="centerDevice1Num">0</td>
<td id="centerDevice2Num">0</td>
<!-- <td id="centerDevice3Num">0</td> -->
<td id="centerDevice4Num">0</td>
<td id="inspectionOrderNum">0</td>
<td id="repairOrderNum">0</td>
</tr>
</tbody>
</table>
<div class="data-container">
<!-- 数据汇总 -->
<table class="statistics">
<thead>
<tr>
<th>告警</th>
<th>逆变器</th>
<th>汇流箱</th>
<th>箱变</th>
<!-- <th>其他设备</th> -->
<th>巡检工单</th>
<th>维修工单</th>
</tr>
</thead>
<tbody>
<tr id="deviceAccount">
<td id="centerWarningNum">0</td>
<td id="centerDevice1Num">0</td>
<td id="centerDevice2Num">0</td>
<td id="centerDevice3Num">0</td>
<!-- <td id="centerDevice4Num">0</td> -->
<td id="inspectionOrderNum">0</td>
<td id="repairOrderNum">0</td>
</tr>
</tbody>
</table>
</div>
<!-- 左侧面板1 -->
......@@ -655,7 +669,7 @@
setTimeout('getCurrentTime()', 1000);//每一秒中重新加载getCurrentTime()方法
}
//当分钟，月份，天数 小于10时是 9->09 补0函数
function checkTime(i) {
if (i < 10) {
......@@ -663,7 +677,7 @@
}
return i;
}
getCurrentTime()
// 巡检维修饼图
......@@ -926,7 +940,7 @@
}
]
};
if (predictCompleteOption && typeof predictCompleteOption === 'object') {
predictCompletePie.setOption(predictCompleteOption);
}
......@@ -1122,7 +1136,7 @@
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 开始无滚动时设为0
globalTimer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
......@@ -1151,8 +1165,8 @@
</script>
<script>
// let deviceWarning = []
const monthOrderNum = {
inspection: 0,
......@@ -1286,12 +1300,11 @@
<tr id="comment1">
<td>${warn.deviceName}</td>
<td>${warn.alarmDes}</td>
<td>${
warn.level == 7 ? '一般' :
warn.level == 8 ? '重要' :
warn.level == 9 ? '危机' :
'未知'
}</td>
<td>${warn.level == 7 ? '一般' :
warn.level == 8 ? '重要' :
warn.level == 9 ? '危机' :
'未知'
}</td>
</tr>
`
});
......@@ -1307,7 +1320,7 @@
}
});
}
function uploadDeviceAccountData() {
loadDataStatus.uploadDeviceAccountData = true
$.ajax({
......@@ -1333,18 +1346,23 @@
break;
case '2':
// childContent += `<td id="centerDevice2Num">${record.deviceCount}</td>`
// let centerWarning2Num = document.getElementById('centerDevice2Num')
// centerWarning2Num.innerHTML = `${record.count ? record.count : 0}`
break;
case '0':
// childContent += `<td id="centerDevice2Num">${record.deviceCount}</td>`
let centerWarning2Num = document.getElementById('centerDevice2Num')
centerWarning2Num.innerHTML = `${record.count ? record.count : 0}`
break;
case '3':
// childContent += `<td id="centerDevice3Num">${record.deviceCount}</td>`
// let centerWarning3Num = document.getElementById('centerDevice3Num')
// centerWarning3Num.innerHTML = `${record.count ? record.count : 0}`
let centerWarning3Num = document.getElementById('centerDevice3Num')
centerWarning3Num.innerHTML = `${record.count ? record.count : 0}`
break;
case '4':
// childContent += `<td id="centerDevice4Num">${record.deviceCount}</td>`
let centerWarning4Num = document.getElementById('centerDevice4Num')
centerWarning4Num.innerHTML = `${record.count ? record.count : 0}`
// let centerWarning4Num = document.getElementById('centerDevice4Num')
// centerWarning4Num.innerHTML = `${record.count ? record.count : 0}`
break;
default:
break;
......@@ -1504,7 +1522,7 @@
});
}
function updateRepairWeekOrderData() {
loadDataStatus.updateRepairWeekOrderData = true
......@@ -1576,7 +1594,7 @@
updateEmergencyData: false,
}
uploadDeviceAccountData()
uploadCompleteStatus()
updateWarningData()
......@@ -1656,7 +1674,7 @@
let weekOrderDom = document.getElementById('weekOrder');
weekOrderDom.innerHTML = `${weekOrderNum.inspection + weekOrderNum.repair}`
let todayFinishOrderDom = document.getElementById('todayFinish');
todayFinishOrderDom.innerHTML = `${dayOrderNum.inspectionFinish + dayOrderNum.repairFinish}`
......@@ -1685,10 +1703,6 @@
]
});
}, 5000);
</script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment