|
|
@@ -6,6 +6,7 @@
|
|
|
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
|
|
|
<script src="static/echarts.min.js"></script>
|
|
|
<script src="static/plug-in.min.js"></script>
|
|
|
+ <script src="static/jquery.liMarquee.js"></script>
|
|
|
<link rel="stylesheet" href="static/index.css" media="all"/>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -19,12 +20,13 @@
|
|
|
<span id="waitNum">暂无</span>
|
|
|
<span id="rate">暂无</span>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div style="height: 80%;">
|
|
|
<div id="weekJob" class="item title">
|
|
|
<span>设备编号</span>
|
|
|
<span>保养任务</span>
|
|
|
<span>保养计划时间</span>
|
|
|
</div>
|
|
|
+ <div class="scrollDiv str_wrap str_vertical"></div>
|
|
|
<!-- <div class="item">
|
|
|
<span>设备名称</span>
|
|
|
<span>正常</span>
|
|
|
@@ -34,6 +36,40 @@
|
|
|
</div>
|
|
|
</body>
|
|
|
<style>
|
|
|
+ /*Plugin CSS*/
|
|
|
+ .str_wrap {
|
|
|
+ overflow:hidden;
|
|
|
+ height:56%;
|
|
|
+ width:100%;
|
|
|
+ position:relative;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -khtml-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .str_move {
|
|
|
+ white-space:nowrap;
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ cursor:move;
|
|
|
+ }
|
|
|
+ .str_move_clone {
|
|
|
+ display:inline-block;
|
|
|
+ vertical-align:top;
|
|
|
+ position:absolute;
|
|
|
+ left:100%;
|
|
|
+ top:0;
|
|
|
+ }
|
|
|
+ .str_vertical .str_move_clone {
|
|
|
+ left:0;
|
|
|
+ top:100%;
|
|
|
+ }
|
|
|
+ .str_down .str_move_clone {
|
|
|
+ left:0;
|
|
|
+ bottom:100%;
|
|
|
+ }
|
|
|
.title-name{
|
|
|
position: absolute;
|
|
|
top: 97px;
|
|
|
@@ -106,7 +142,7 @@ var option = {
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
- name: '正常',
|
|
|
+ name: '正常点',
|
|
|
type: 'effectScatter',
|
|
|
coordinateSystem: 'geo',
|
|
|
data: [
|
|
|
@@ -132,7 +168,31 @@ var option = {
|
|
|
},
|
|
|
zlevel: 1
|
|
|
}, {
|
|
|
- name: '异常点',
|
|
|
+ name: '正常点编号',
|
|
|
+ type: 'scatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ symbol: 'pin', // 气泡
|
|
|
+ symbolSize: 50,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{@value}',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 11
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#174FBF'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ zlevel: 6,
|
|
|
+ data: [
|
|
|
+ ]
|
|
|
+ },{
|
|
|
+ name: '异常点编号',
|
|
|
type: 'scatter',
|
|
|
coordinateSystem: 'geo',
|
|
|
symbol: 'pin', // 气泡
|
|
|
@@ -156,7 +216,7 @@ var option = {
|
|
|
data: [
|
|
|
]
|
|
|
}, {
|
|
|
- name: '异常图片和名称',
|
|
|
+ name: '异常点',
|
|
|
type: 'effectScatter',
|
|
|
coordinateSystem: 'geo',
|
|
|
data: [
|
|
|
@@ -184,7 +244,8 @@ var option = {
|
|
|
}]
|
|
|
}
|
|
|
|
|
|
-getData();
|
|
|
+ //初始化加载数据，定时器只能在定时到了才发生
|
|
|
+ getData();
|
|
|
getScreenJobData();
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表
|
|
|
@@ -222,13 +283,18 @@ function getSbDetail(sbNo){
|
|
|
for(var i=0;i<response.data.weekList.length;i++){
|
|
|
weekJob = weekJob + ' <div class=\'item\'>\n' +
|
|
|
' <span>'+ response.data.weekList[i].sbNo + '</span>\n' +
|
|
|
- ' <span>'+ response.data.weekList[i].requirement.substring(0, 8) + '</span>\n' +
|
|
|
+ ' <span>'+ response.data.weekList[i].requirement.substring(0, 12) + '</span>\n' +
|
|
|
' <span>'+ response.data.weekList[i].startTime + '</span>\n' +
|
|
|
' </div>'
|
|
|
}
|
|
|
- // console.log('weekJob: ' + weekJob);
|
|
|
- $('#weekJob').siblings().remove();
|
|
|
- $('#weekJob').after(weekJob);
|
|
|
+
|
|
|
+ $('.scrollDiv').empty().append(weekJob);
|
|
|
+
|
|
|
+ $('.scrollDiv').liMarquee({
|
|
|
+ direction: 'up',//身上滚动
|
|
|
+ runshort: false,//内容不足时不滚动
|
|
|
+ scrollamount: 20//速度
|
|
|
+ });
|
|
|
},
|
|
|
error: function (xhr,textStatus,errorThrown) {
|
|
|
error(xhr,textStatus,errorThrown);
|
|
|
@@ -237,11 +303,11 @@ function getSbDetail(sbNo){
|
|
|
}
|
|
|
|
|
|
// setInterval(mockData(), 10000);
|
|
|
-setInterval(function(){ getData() }, 60000);
|
|
|
- setInterval(function(){ getScreenJobData() }, 60000);
|
|
|
+ setInterval(function(){ getData() }, 60000);
|
|
|
+ // setInterval(function(){ getScreenJobData() }, 60000);
|
|
|
|
|
|
function mockData() {
|
|
|
- console.log('--ajax获取后台数据--')
|
|
|
+
|
|
|
var data = [
|
|
|
[Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
|
|
|
[Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
|
|
|
@@ -286,9 +352,10 @@ function getData(){
|
|
|
repairSbInfoList.push([data.repairSbInfoList[i].zjm, data.repairSbInfoList[i].jbdh, data.repairSbInfoList[i].no])
|
|
|
}
|
|
|
}
|
|
|
- option.series[0].data=normalSbInfoList;// 正常数据
|
|
|
- option.series[1].data=repairSbInfoList;// 异常的红色内容名称
|
|
|
- option.series[2].data=repairSbInfoList;// 异常黄点
|
|
|
+ option.series[0].data=normalSbInfoList;// 正常数据：
|
|
|
+ option.series[1].data=normalSbInfoList;// 正常数据的编号
|
|
|
+ option.series[2].data=repairSbInfoList;// 异常数据的编号
|
|
|
+ option.series[3].data=repairSbInfoList;// 异常数据：黄点
|
|
|
myChart.setOption(option, true)
|
|
|
},
|
|
|
error: function (xhr,textStatus,errorThrown) {
|
|
|
@@ -310,6 +377,16 @@ function getToken(){
|
|
|
const storeTokenJson = JSON.parse(localStorage.getItem(VUE_STORE_BASE+ACCESS_TOKEN))
|
|
|
return 'Bearer ' + storeTokenJson.value
|
|
|
}
|
|
|
+
|
|
|
+ /*$(function(){
|
|
|
+ console.log("滚动")
|
|
|
+ $('.scrollDiv').liMarquee({
|
|
|
+ direction: 'up',//身上滚动
|
|
|
+ runshort: false,//内容不足时不滚动
|
|
|
+ scrollamount: 20//速度
|
|
|
+ });
|
|
|
+ });*/
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
</html>
|
xiongchao