大屏左侧滚动

src/views/page/largeScreen.vue

@@ -52,19 +52,28 @@
 
           <div class="environmentData">
             <div class="e_title">温室环境数据</div>
-            <div class="detail scroll">
-              <div class="title_child">一号温室</div>
-              <div class="e_content">
+            <div class="detail">
+              <!-- <div class="title_child">一号温室</div> -->
+              <vue-seamless class="e_content" :data="list" :class-option="defaultOption">
                 <div class="item" v-for="(el, index) in list" :key="index">
                   <!-- <img :src="el.formula" alt=""> -->
-                  <img :src="require('../../assets/image/real-time-'+el.formula+'.png')" alt="">
+                  <img :src="el.img" alt="">
                   <div class="item_child">
-                    <span>{{ el.environmentDataId }}</span>
-                    <span>{{ el.environmentData }}</span>
+                    <span>{{ el.name }}</span>
+                    <span>{{ el.num }}</span>
                   </div>
                 </div>
+              </vue-seamless>
+              <!-- <div class="e_content">
+                <div class="item" v-for="(el, index) in list" :key="index">
+                  <img :src="el.img" alt="">
+                  <div class="item_child">
+                    <span>{{ el.name }}</span>
+                    <span>{{ el.num }}</span>
                   </div>
                 </div>
+              </div> -->
+            </div>
           </div>
 
           <div class="thisWeekTemperature">
@@ -192,9 +201,24 @@ import { weather_echart, thisWeekTemperature_echart } from '@/assets/js/echarts'
 import EZUIKit from 'ezuikit-js';
 import videojs from 'video.js';
 import video_zhCN from 'video.js/dist/lang/zh-CN.json'
-
+import vueSeamless from 'vue-seamless-scroll'
 export default {
   name: 'largeScreen',
+  components: { vueSeamless },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+  },
   data() {
     return {
       list: [],
@@ -329,7 +353,40 @@ export default {
       this.api.getcontrol_rtdata(equipmentId).then(res => {
         // console.log('主页查看控制器实时数据',res);
         if (res.data.code == 200) {
-          this.list = res.data.data
+          this.list = []
+          var store = this.$store.state
+          var list = store.typeList
+          res.data.data.forEach((el, index) => {
+            list.forEach((el1, index1) => {
+              if (el.formula == el1.value) {
+                var num = 0
+                var name = ''
+                num = el.environmentData + el1.unit
+                if (el.equipmentNumber == 0) {
+                  if (el.targetValue == 1) {
+                    name = '目标' + el.environmentDataId
+                  } else {
+                    name = '1#平均' + el.environmentDataId
+                  }
+                } else if (el.equipmentNumber == 15) {
+                  if (el.targetValue == 1) {
+                    name = '目标' + el.environmentDataId
+                  } else {
+                    name = '2#平均' + el.environmentDataId
+                  }
+                } else {
+                  name = el.equipmentNumber + '#' + el.environmentDataId
+                }
+                this.list.push({
+                  ...el,
+                  name: name,
+                  num: num,
+                  img: require(`../../assets/image/real-time-${el.formula}.png`)
+
+                })
+              }
+            })
+          })
         }
       })
     },
@@ -518,7 +575,22 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.environmentData {
+  .e_content {
+    >div {
+      width: 100% !important;
 
+      >div {
+        width: 100% !important;
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+
+}
+</style>
 <style lang="scss" scoped>
 .home {
   width: 100%;
@@ -751,7 +823,7 @@ export default {
           .detail {
             width: 3.98rem;
             height: 3.08rem;
-            overflow: auto;
+            overflow: hidden;
 
             .title_child {
               width: 100%;
@@ -770,6 +842,8 @@ export default {
               display: flex;
               flex-wrap: wrap;
 
+
+
               .item {
                 width: 50%;
                 display: flex;