Skip to content

B
bigScreen
Commit 70fc978b by 红发
Options

删除告警列表，新增工单完成率图标

parent 03906b49
Showing with 159 additions and 85 deletions
index.html
...@@ -548,61 +548,9 @@ ...@@ -548,61 +548,9 @@
</div> </div>
<!-- 告警数据轮播 --> <!-- 告警数据轮播 -->
<div class="warning"> <div class="warning">
<h4>告警数据</h4> <h4>工单完成率</h4>
<div id="review_box" style="height: 230px;overflow: hidden;"> <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> </div>
<!-- 发电量功率展示 --> <!-- 发电量功率展示 -->
...@@ -1128,41 +1076,167 @@ ...@@ -1128,41 +1076,167 @@
monthPlanCompletePie.resize(); monthPlanCompletePie.resize();
}); });
</script> </script>
<!-- 告警数据滚动 --> <!-- 工单完成数 -->
<script> <script>
// window.onload = roll(50); var ulbox = document.getElementById("review_box");
let globalTimer = null; var myChart = echarts.init(ulbox);
function roll(t) { var weekOrderQuantity = 100 //总数
var ul1 = document.getElementById("comment1"); var weekOrderCompleted = 30 //已完成
var ul2 = document.getElementById("comment2"); var weekOrderUnfinished = 70 //未完成
var ulbox = document.getElementById("review_box");
var option = {
ul2.innerHTML = ul1.innerHTML; color: ['#22c2f0', '#28f19b', '#fcfa3c', '#f44061'],
ulbox.scrollTop = 0; // 开始无滚动时设为0 title: {
globalTimer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快 text: '',
// 鼠标移入div时暂停滚动 // subtext: 7789,
ulbox.onmouseover = function () { textStyle: {
clearInterval(globalTimer); color: '#f2f2f2',
} fontSize: 20,
// 鼠标移出div后继续滚动 // align: 'center'
ulbox.onmouseout = function () { },
globalTimer = setInterval(rollStart, t); subtextStyle: {
} fontSize: 20,
} color: ['#ff9d19']
// 开始滚动函数 },
function rollStart() { x: 'center',
// 上面声明的DOM对象为局部对象需要再次声明 y: 'center',
var ul1 = document.getElementById("comment1"); },
var ul2 = document.getElementById("comment2"); tooltip: {
var ulbox = document.getElementById("review_box"); trigger: 'item',
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0 formatter: "{a}: {c} ({d}%)"
if (ulbox.scrollTop >= ulbox.scrollHeight) { },
ulbox.scrollTop = 0; // legend: {
} else { // orient: 'horizontal',
ulbox.scrollTop++; // icon: 'circle',
// right: 40,
// top: 3,
// textStyle: {
// color: '#fff'
// },
// data: ['工单完成率']
// },
series: [{
name: '工单完成数',
type: 'pie',
clockWise: false,
radius: ["70%", "80%"],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#203665'
}
},
hoverAnimation: false,
center: ['50%', '50%'],
data: [{
value: weekOrderCompleted,
label: {
normal: {
formatter: "{d}%",
position: 'center',
show: true,
textStyle: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#2c6cc4',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}
}, {
value: weekOrderUnfinished,
name: 'invisible',
itemStyle: {
normal: {
color: '#f2c96b'
},
emphasis: {
color: '#24375c'
}
}
}]
},
{
type: "gauge",
radius: "75%",
startAngle: 0,
endAngle: 360,
splitNumber: 30,
axisTick: {
show: false
},
splitLine: {
length: 10,
lineStyle: {
width: 1,
color: "#031845"
}
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
}, {
// name: '访问来源',
type: 'pie',
radius: ['50%', '60%'],
silent: true,
z: 0,
// zlevel: 0,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: true,
length: 0,
length2: 100,
lineStyle: {
type: 'solid',
width: 1
}
}
},
data: [{
value: weekOrderQuantity,
name: ''
}
]
} }
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
} }
</script> </script>
<script> <script>
......
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