Skip to content

B
bigScreen
Commit 70fc978b by 红发
Options

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

parent 03906b49
Showing with 153 additions and 79 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);
let globalTimer = null;
function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box"); var ulbox = document.getElementById("review_box");
var myChart = echarts.init(ulbox);
var weekOrderQuantity = 100 //总数
var weekOrderCompleted = 30 //已完成
var weekOrderUnfinished = 70 //未完成
ul2.innerHTML = ul1.innerHTML; var option = {
ulbox.scrollTop = 0; // 开始无滚动时设为0 color: ['#22c2f0', '#28f19b', '#fcfa3c', '#f44061'],
globalTimer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快 title: {
// 鼠标移入div时暂停滚动 text: '',
ulbox.onmouseover = function () { // subtext: 7789,
clearInterval(globalTimer); textStyle: {
color: '#f2f2f2',
fontSize: 20,
// align: 'center'
},
subtextStyle: {
fontSize: 20,
color: ['#ff9d19']
},
x: 'center',
y: 'center',
},
tooltip: {
trigger: 'item',
formatter: "{a}: {c} ({d}%)"
},
// legend: {
// orient: 'horizontal',
// 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'
} }
// 鼠标移出div后继续滚动 },
ulbox.onmouseout = function () { hoverAnimation: false,
globalTimer = setInterval(rollStart, t); center: ['50%', '50%'],
data: [{
value: weekOrderCompleted,
label: {
normal: {
formatter: "{d}%",
position: 'center',
show: true,
textStyle: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff'
} }
} }
// 开始滚动函数 },
function rollStart() { itemStyle: {
// 上面声明的DOM对象为局部对象需要再次声明 normal: {
var ul1 = document.getElementById("comment1"); color: '#2c6cc4',
var ul2 = document.getElementById("comment2"); shadowColor: '#2c6cc4',
var ulbox = document.getElementById("review_box"); shadowBlur: 0
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollTop >= ulbox.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop++;
} }
} }
}, {
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