大屏左侧滚动

src/views/page/largeScreen.vue

@@ -52,19 +52,28 @@
 
           <div class="environmentData">
             <div class="e_title">温室环境数据</div>
-            <div class="detail scroll">
+            <div class="detail">
-              <div class="title_child">一号温室</div>
+              <!-- <div class="title_child">一号温室</div> -->
-              <div class="e_content">
+              <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.name }}</span>
-                    <span>{{ el.environmentData }}</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">
@@ -96,11 +105,11 @@
           <div class="liveVideo"></div>
 
           <div class="liveVideo_content">
-            <div class="swiper-container mySwiper_video" >
+            <div class="swiper-container mySwiper_video">
               <div class="swiper-wrapper">
                 <div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
-                  <div class="monitor"  :id="'monitor'+item.number">
+                  <div class="monitor" :id="'monitor' + item.number">
-                    <div ref="videoPlayer" class="video-js" :id="'video-js'+item.number"></div>
+                    <div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div>
                   </div>
                   <div class="c_bottom">{{ item.deviceTypeName }}</div>
                 </div>
@@ -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: [],
@@ -238,7 +262,7 @@ export default {
       // 获取摄像头得地址 Copy
       getVideoDataList: [],
 
-      url:''
+      url: ''
     }
   },
   mounted() {
@@ -329,18 +353,51 @@ 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`)
+
+                })
+              }
+            })
+          })
         }
       })
     },
 
     // 获取摄像头得地址 Copy
-    getVideoData(cameraid, channelid,index) {
+    getVideoData(cameraid, channelid, index) {
       this.api.camera_gethls(cameraid, channelid).then(res => {
         // console.log('获取摄像头得地址 Copy',res);
         if (res.data.code == 200) {
           // this.url = res.data.data.ezopen 
-          this.createVideoNew(res.data.data.accesstoken,res.data.data.ezopen,index )
+          this.createVideoNew(res.data.data.accesstoken, res.data.data.ezopen, index)
           // this.createVideo()
         }
       })
@@ -351,11 +408,11 @@ export default {
 
       this.api.sel_eqbyid(userId).then(res => {
         // console.log('根据用户id查询对应的设备数据 Copy',res);
-        res.data.data.forEach((item,index) => {
+        res.data.data.forEach((item, index) => {
-          if ( item.cameraSerialNumber != null) {
+          if (item.cameraSerialNumber != null) {
-            this.get_sel_eqbyid_list.push({...item,number:index})
+            this.get_sel_eqbyid_list.push({ ...item, number: index })
 
-            this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber,index)
+            this.getVideoData(item.cameraSerialNumber, item.cameraChannelNumber, index)
             // this.getVideoData("L18357958", "5")
           }
         })
@@ -394,13 +451,13 @@ export default {
       this.get_sel_eqbyid(userInfo.userid)
     },
 
-    createVideoNew(accessToken,url,index) {
+    createVideoNew(accessToken, url, index) {
-      console.log(accessToken,url,index,111);
+      console.log(accessToken, url, index, 111);
       // divW和divH是获取了父级宽高 使播放容器能铺满div
-      let divW = document.getElementById('monitor'+index).clientWidth
+      let divW = document.getElementById('monitor' + index).clientWidth
-      let divH = document.getElementById('monitor'+index).clientHeight
+      let divH = document.getElementById('monitor' + index).clientHeight
       this.player = new EZUIKit.EZUIKitPlayer({
-        id: 'video-js'+index, // 视频容器ID
+        id: 'video-js' + index, // 视频容器ID
         accessToken: accessToken,
         url: url,
         // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
@@ -439,7 +496,7 @@ export default {
 
     },
 
-    toBackPage(){
+    toBackPage() {
       this.$router.push({ path: '/realTime' });
     },
 
@@ -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;
@@ -981,7 +1055,7 @@ export default {
               width: 3.5rem;
               height: 2.4rem;
 
-              .video-js{
+              .video-js {
                 width: 100%;
                 height: 100%;
               }