fix

ruoyi-ui/src/views/components/table/homeTable.vue

@@ -131,8 +131,8 @@ export default {
       shipShow: true,
       activeName: 'first',
       normalPer: 0.1,
-      so2Count: 1,
-      blackCount: 1,
+      so2Count: 0,
+      blackCount: 0,
       dialogVisible: false,
       dialogVisibleAzwz: false,
       dialogVisibleType: false,

ruoyi-ui/src/views/components/table/scroll.vue

@@ -1,107 +1,104 @@
 <template>
-<div id="box">
-<div id="con1" ref="con1" :class="{anim:animate==true}" style="color:white" @mouseenter="mEnter" @mouseleave="mLeave">
-<div v-for='item in items' style="font-size:3rem">
-      <span>{{item.name}}</span>
-       <span style="margin-left:3rem;color:#A8A8A8">统计时间:{{item.time}}</span>
-</div>
-</div>
-</div>
+  <div id="box">
+    <div id="con1" ref="con1" :class="{anim:animate==true}" style="color:white" @mouseenter="mEnter" @mouseleave="mLeave">
+      <div v-for='item in items' style="font-size:3rem">
+        <span>{{ item.name }}</span>
+        <span style="margin-left:3rem;color:#A8A8A8">统计时间:{{ item.time }}</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import {queryIllegalInfoList} from "@/api/data/staticalData";
 
 export default {
-        data () {
-            return {
-                animate:false,
-                items:[ //消息列表对应的数组
-                    {name:"1.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
-                    {name:"2.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
-                    {name:"3.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
-                    {name:"4.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
-                    {name:"5.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
-                    {name:"6.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
-                    {name:"7.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
-                ],
-            }
-        },
-        props:['illegalStatus'],
-        mounted () {
-               this.queryIllegalInfoList();
-                this.timer1= setInterval(this.scroll,3000)
+  data() {
+    return {
+      animate: false,
+      items: [ //消息列表对应的数组
+        // {name: "1.xx船在xx监测点检测燃油含硫量为xx", time: '2021年7月1日'},
+      ],
+    }
+  },
+  props: ['illegalStatus'],
+  mounted() {
+    this.queryIllegalInfoList();
+    this.timer1 = setInterval(this.scroll, 3000)
 
-        },
+  },
 
-        methods: {
-              queryIllegalInfoList(){
-                    queryIllegalInfoList({'illegalStatus':this.illegalStatus}).then(data =>{
-                        this.items = data.data
-                        for(var index in this.items){
-                            if(this.items[index].illegalType == null){
-                                  var obj =this.items[index]
-                                  obj.name = (parseInt(index)+1)+'.'+obj.aisShipName+"在"+obj.snapPos+"监测点检测黑度为"+obj.rcgSoot
-                                  obj.time=this.timeFormate(obj.snapTimeFmt)
-                            }
-                             if(this.items[index].illegalType != null){
-                                  var obj =this.items[index]
-                                  obj.name = (parseInt(index)+1)+'.'+obj.shipName+"在"+obj.monitorPointName+"监测点检测黑度为"+obj.spercent
-                                  obj.time=this.timeFormate(obj.createTime)
-                            }
-                        }
-                    })
-                },
-            timeFormate(date){
-                // var date = "2018-10-08 15:22:45";
-                var newDate = new Date(date).toLocaleDateString()
-                return newDate.split('/')[0]+"年"+newDate.split('/')[1]+'月'+newDate.split('/')[2]+'日';
-            },
-            scroll(){
-                    let con1 = this.$refs.con1;
-                //     console.log(con1);
-                    // con1.style.marginTop='-29rem';
-                    this.animate=!this.animate;
-                    var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
-                    setTimeout(function(){
-                    that.items.push(that.items[0]);
-                    that.items.shift();
-                    // con1.style.marginTop='0px';
-                    that.animate=!that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
-                    },500)
-            },
-            mEnter () {
-                    clearInterval(this.timer1)
-            },
-            mLeave () {
-                    this.timer1= setInterval(this.scroll,3000)
-            },
+  methods: {
+    queryIllegalInfoList() {
+      queryIllegalInfoList({'illegalStatus': this.illegalStatus}).then(data => {
+        this.items = data.data
+        for (var index in this.items) {
+          if (this.items[index].illegalType === 'heiyan') {
+            var obj = this.items[index]
+            obj.name = (parseInt(index) + 1) + '.' + obj.aisShipName + "在" + obj.snapPos + "监测点检测黑度为" + obj.rcgSoot
+            obj.time = this.timeFormate(obj.snapTimeFmt)
+          }
+          if (this.items[index].illegalType !== 'heiyan') {
+            var obj = this.items[index]
+            obj.name = (parseInt(index) + 1) + '.' + obj.shipName + "在" + obj.monitorPointName + "监测点检测硫含量为" + obj.so2Percent
+            obj.time = this.timeFormate(obj.createTime)
+          }
+        }
+      })
+    },
+    timeFormate(date) {
+      // var date = "2018-10-08 15:22:45";
+      var newDate = new Date(date).toLocaleDateString()
+      return newDate.split('/')[0] + "年" + newDate.split('/')[1] + '月' + newDate.split('/')[2] + '日';
+    },
+    scroll() {
+      let con1 = this.$refs.con1;
+      //     console.log(con1);
+      // con1.style.marginTop='-29rem';
+      this.animate = !this.animate;
+      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
+      setTimeout(function () {
+        that.items.push(that.items[0]);
+        that.items.shift();
+        // con1.style.marginTop='0px';
+        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
+      }, 500)
+    },
+    mEnter() {
+      clearInterval(this.timer1)
+    },
+    mLeave() {
+      this.timer1 = setInterval(this.scroll, 3000)
+    },
 
-        },
- }
+  },
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-*{
-margin: 0 ;
-padding: 0;
+* {
+  margin: 0;
+  padding: 0;
 }
-#box{
-width: 100rem;
-height: 50rem;
-line-height: 14rem;
-overflow: hidden;
-padding-left: 15rem;
-font-size: 5rem;
-transition: all 0.5s;
+
+#box {
+  width: 100rem;
+  height: 50rem;
+  line-height: 14rem;
+  overflow: hidden;
+  padding-left: 15rem;
+  font-size: 5rem;
+  transition: all 0.5s;
 }
-.anim{
-transition: all 0.5s;
+
+.anim {
+  transition: all 0.5s;
 }
-#con1 li{
-list-style: none;
-line-height: 10rem;
-height: 10rem;
+
+#con1 li {
+  list-style: none;
+  line-height: 10rem;
+  height: 10rem;
 }
 </style>