Home Explore Help
Register Sign In
3254194295
/
hitch-sb-antd
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

优化

xiongchao 3 years ago
parent
5c4914fd0f
commit
b8b20f0ebc
2 changed files with 95 additions and 18 deletions
Unified View Show Diff Stats
  1. 92 15
      public/hitch-screen/index.html
  2. 3 3
      public/hitch-screen/static/index.css

+ 92 - 15
public/hitch-screen/index.html
View File 

@@ -6,6 +6,7 @@
 
   <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
 
   <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
 
   <script src="static/echarts.min.js"></script>
 
   <script src="static/echarts.min.js"></script>
 
   <script src="static/plug-in.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"/>
 
   <link rel="stylesheet" href="static/index.css" media="all"/>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
@@ -19,12 +20,13 @@
 
       <span id="waitNum">暂无</span>
 
       <span id="waitNum">暂无</span>
 
       <span id="rate">暂无</span>
 
       <span id="rate">暂无</span>
 
     </div>
 
     </div>
 
-    <div>
 
+    <div style="height: 80%;">
 
       <div id="weekJob" class="item title">
 
       <div id="weekJob" class="item title">
 
         <span>设备编号</span>
 
         <span>设备编号</span>
 
         <span>保养任务</span>
 
         <span>保养任务</span>
 
         <span>保养计划时间</span>
 
         <span>保养计划时间</span>
 
       </div>
 
       </div>
 
+      <div class="scrollDiv str_wrap str_vertical"></div>
 
 <!--      <div class="item">
 
 <!--      <div class="item">
 
         <span>设备名称</span>
 
         <span>设备名称</span>
 
         <span>正常</span>
 
         <span>正常</span>
 
@@ -34,6 +36,40 @@
 
   </div>
 
   </div>
 
 </body>
 
 </body>
 
 <style>
 
 <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{
 
   .title-name{
 
     position: absolute;
 
     position: absolute;
 
     top: 97px;
 
     top: 97px;
 
@@ -106,7 +142,7 @@ var option = {
 
     }
 
     }
 
   },
 
   },
 
   series: [{
 
   series: [{
 
-    name: '正常',
 
+    name: '正常点',
 
     type: 'effectScatter',
 
     type: 'effectScatter',
 
     coordinateSystem: 'geo',
 
     coordinateSystem: 'geo',
 
     data: [
 
     data: [
 
@@ -132,7 +168,31 @@ var option = {
 
     },
 
     },
 
     zlevel: 1
 
     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',
 
     type: 'scatter',
 
     coordinateSystem: 'geo',
 
     coordinateSystem: 'geo',
 
     symbol: 'pin', // 气泡
 
     symbol: 'pin', // 气泡
 
@@ -156,7 +216,7 @@ var option = {
 
     data: [
 
     data: [
 
     ]
 
     ]
 
   }, {
 
   }, {
 
-    name: '异常图片和名称',
 
+    name: '异常点',
 
     type: 'effectScatter',
 
     type: 'effectScatter',
 
     coordinateSystem: 'geo',
 
     coordinateSystem: 'geo',
 
     data: [
 
     data: [
 
@@ -184,7 +244,8 @@ var option = {
 
   }]
 
   }]
 
 }
 
 }
 
 
 
-getData();
 
+  //初始化加载数据，定时器只能在定时到了才发生
 
+  getData();
 
   getScreenJobData();
 
   getScreenJobData();
 
 
 
 // 使用刚指定的配置项和数据显示图表
 
 // 使用刚指定的配置项和数据显示图表
 
@@ -222,13 +283,18 @@ function getSbDetail(sbNo){
 
         for(var i=0;i<response.data.weekList.length;i++){
 
         for(var i=0;i<response.data.weekList.length;i++){
 
            weekJob = weekJob + '  <div class=\'item\'>\n' +
 
            weekJob = weekJob + '  <div class=\'item\'>\n' +
 
                   '          <span>'+ response.data.weekList[i].sbNo + '</span>\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' +
 
                   '          <span>'+ response.data.weekList[i].startTime + '</span>\n' +
 
                   '        </div>'
 
                   '        </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: function (xhr,textStatus,errorThrown) {
 
         error(xhr,textStatus,errorThrown);
 
         error(xhr,textStatus,errorThrown);
 
@@ -237,11 +303,11 @@ function getSbDetail(sbNo){
 
   }
 
   }
 
 
 
 // setInterval(mockData(), 10000);
 
 // setInterval(mockData(), 10000);
 
-setInterval(function(){ getData() }, 60000);
 
-  setInterval(function(){ getScreenJobData() }, 60000);
 
+  setInterval(function(){ getData() }, 60000);
 
+  // setInterval(function(){ getScreenJobData() }, 60000);
 
 
 
 function mockData() {
 
 function mockData() {
 
-  console.log('--ajax获取后台数据--')
 
+
 
   var data = [
 
   var data = [
 
     [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
 
     [Math.floor(Math.random()*1000), Math.floor(Math.random()*1000), '正常'],
 
     [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])
 
           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)
 
       myChart.setOption(option, true)
 
     },
 
     },
 
     error: function (xhr,textStatus,errorThrown) {
 
     error: function (xhr,textStatus,errorThrown) {
 
@@ -310,6 +377,16 @@ function getToken(){
 
   const storeTokenJson = JSON.parse(localStorage.getItem(VUE_STORE_BASE+ACCESS_TOKEN))
 
   const storeTokenJson = JSON.parse(localStorage.getItem(VUE_STORE_BASE+ACCESS_TOKEN))
 
   return 'Bearer ' + storeTokenJson.value
 
   return 'Bearer ' + storeTokenJson.value
 
 }
 
 }
 
+
 
+  /*$(function(){
 
+    console.log("滚动")
 
+    $('.scrollDiv').liMarquee({
 
+      direction: 'up',//身上滚动
 
+      runshort: false,//内容不足时不滚动
 
+      scrollamount: 20//速度
 
+    });
 
+  });*/
 
+
 
 </script>
 
 </script>
 
 
 
 </html>
 
 </html>

+ 3 - 3
public/hitch-screen/static/index.css
View File 

@@ -6,9 +6,9 @@ body{padding:0px;margin:0px;width:1920px;height:1080px;}
 
 .data>div:nth-child(2)>span:nth-child(1){padding-left:22px;background:url("red.png") no-repeat 5px 5px;}
 
 .data>div:nth-child(2)>span:nth-child(1){padding-left:22px;background:url("red.png") no-repeat 5px 5px;}
 
 .data>div:nth-child(2)>span:nth-child(2){padding-left:22px;background:url("green.png") no-repeat 5px 5px;}
 
 .data>div:nth-child(2)>span:nth-child(2){padding-left:22px;background:url("green.png") no-repeat 5px 5px;}
 
 .data>div:nth-child(3){margin-top:70px;color:#ffffff;}
 
 .data>div:nth-child(3){margin-top:70px;color:#ffffff;}
 
-.data .item{float:left;clear:both;padding-left:50px;}
 
+.data .item{float:left;clear:both;padding-left:50px;margin-bottom: 10px;}
 
 .data .item>span{float:left;line-height:30px;text-align:center;}
 
 .data .item>span{float:left;line-height:30px;text-align:center;}
 
-.data .item>span:nth-child(1){width:190px;}
 
-.data .item>span:nth-child(2){width:150px;}
 
+.data .item>span:nth-child(1){width:100px;}
 
+.data .item>span:nth-child(2){width:200px;}
 
 .data .item>span:nth-child(3){width:150px;}
 
 .data .item>span:nth-child(3){width:150px;}
 
 .data .title{color:#2495bf;}
 
 .data .title{color:#2495bf;}