修改循环轮动

src/pages/DeviceScreen.vue

@@ -156,14 +156,14 @@
                 <li>关机时间</li>
                 <li>生产日期</li>
               </ul>
-              <div class="scroll_container_1" v-if="array1.length">
+              <div class="scroll_container_1 scroll_container_3" v-if="array1.length">
                 <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
                   <ul class="scroll-ul_1">
                     <li v-for="(e, i) in array1" :key="i">
                       <div class="scroll-ul_1_div">{{e.device_code}}</div>
                       <div class="scroll-ul_1_div">{{e.device_name}}</div>
                       <div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
-                      <div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"><i></i></span>{{e.device_status}}</div>
+                      <div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"></span><i>{{e.device_status}}</i></div>
                       <div class="scroll-ul_1_div">{{e.product_qty}}</div>
                       <div class="scroll-ul_1_div">{{e.start_time}}</div>
                       <div class="scroll-ul_1_div">{{e.end_time}}</div>
@@ -238,9 +238,10 @@ export default {
     return {
       interTime: this.$store.getters.setTime,
       timer2: null,
-      timer3: null,
+      timer4: null,
       timeOut1: null,
       timeOut2: null,
+      timeOut3: null,
       totalNum: '',
       // arrR01: [
       //   {
@@ -408,6 +409,7 @@ export default {
   beforeDestroy () {
     this.$once('hook:beforeDestroy', () => {
       clearInterval(this.timer2)
+      clearInterval(this.timer4)
     })
   },
   methods: {
@@ -544,6 +546,7 @@ export default {
             stack: 'b',
             yAxisIndex: 0,
             data: dataLine,
+            barGap: '400%', // 柱图间距
             label: {
               normal: {
                 show: false,
@@ -1197,6 +1200,14 @@ export default {
         max = Math.max(max, Number(el.teep))
       })
       let option = {
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 6 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
         grid: {
           top: 30,
           left: 0,
@@ -1233,8 +1244,8 @@ export default {
             color: '#8FABBF ',
             rotate: 50
           },
-          // data: names
+          data: names
-          data: names.length >= 7 ? names.slice(0, 7) : names
+          // data: names.length >= 7 ? names.slice(0, 7) : names
         },
         yAxis: {
           axisTick: {
@@ -1289,8 +1300,8 @@ export default {
               }
             },
             // data: [100, 51, 90, 41, 91, 61, 51]
-            // data: total,
+            data: total,
-            data: total.length >= 7 ? total.slice(0, 7) : total,
+            // data: total.length >= 7 ? total.slice(0, 7) : total,
             label: {
               show: true,
               position: 'top',
@@ -1310,31 +1321,184 @@ export default {
       let echart = document.getElementById('echart_d02')
       this.myCharts02 = this.$echarts.init(echart)
       this.myCharts02.setOption(option)
-      if (names.length > 7) {
+      this.autoMove(option, 2)
-        let t = 1
+      window.addEventListener('resize', () => {
-        let stotal = total.slice(0, 7)
+        this.myCharts02.resize()
-        let snames = names.slice(0, 7)
+      })
-        this.timer2 = setInterval(() => {
+      // if (names.length > 7) {
-          stotal.shift()
+      //   let t = 1
-          stotal.push(total[t + 6])
+      //   let stotal = total.slice(0, 7)
-          snames.shift()
+      //   let snames = names.slice(0, 7)
-          snames.push(names[t + 6])
+      //   this.timer4 = setInterval(() => {
-          this.myCharts02.setOption({
+      //     stotal.shift()
-            xAxis: {
+      //     stotal.push(total[t + 6])
-              data: snames
+      //     snames.shift()
-            },
+      //     snames.push(names[t + 6])
-            series: [
+      //     this.myCharts02.setOption({
-              {data: stotal}
+      //       xAxis: {
-            ]
+      //         data: snames
-          })
+      //       },
-          if (t + 7 < names.length) {
+      //       series: [
-            t++
+      //         {data: stotal}
-          } else {
+      //       ]
-            t = -6
+      //     })
-          }
+      //     if (t + 7 < names.length) {
-        }, 2000)
+      //       t++
-      }
+      //     } else {
+      //       t = -6
+      //     }
+      //   }, 2000)
+      // }
     },
+    // setEchart002 () {
+    //   // 左3
+    //   let total = []
+    //   let names = []
+    //   let max = 0
+    //   this.chartData1.map(el => {
+    //     total.push(el.teep)
+    //     names.push(el.workprocedure_name)
+    //     max = Math.max(max, Number(el.teep))
+    //   })
+    //   let option = {
+    //     grid: {
+    //       top: 30,
+    //       left: 0,
+    //       right: 0,
+    //       bottom: 0,
+    //       borderColor: '#ffffff',
+    //       containLabel: true
+    //     },
+    //     // legend: {
+    //     //   top: 0,
+    //     //   right: 0,
+    //     //   textStyle: {
+    //     //     color: '#ffffff',
+    //     //     fontSize: 12,
+    //     //     lineHeight: 20
+    //     //   },
+    //     //   itemGap: 20,
+    //     //   itemHeight: 8,
+    //     //   data: ['总库存']
+    //     // },
+    //     xAxis: {
+    //       type: 'category',
+    //       axisTick: {
+    //         show: false
+    //       },
+    //       axisLine: {
+    //         lineStyle: {
+    //           color: '#8FABBF ',
+    //           fontSize: 14,
+    //           lineHeight: 14
+    //         }
+    //       },
+    //       axisLabel: {
+    //         color: '#8FABBF ',
+    //         rotate: 50
+    //       },
+    //       // data: names
+    //       data: names.length >= 7 ? names.slice(0, 7) : names
+    //     },
+    //     yAxis: {
+    //       axisTick: {
+    //         show: false
+    //       },
+    //       axisLine: {
+    //         lineStyle: {
+    //           color: '#909399'
+    //         }
+    //       },
+    //       // axisLabel: {
+    //       //   color: '#909399'
+    //       // },
+    //       axisLabel: {
+    //         formatter: '{value} %',
+    //         textStyle: {
+    //           color: '#8FABBF',
+    //           fontSize: 14
+    //         }
+    //       },
+    //       splitLine: {
+    //         show: false,
+    //         lineStyle: {
+    //           type: [8, 4],
+    //           dashOffset: 4,
+    //           color: '#8FABBF',
+    //           opacity: 0.2
+    //         }
+    //       },
+    //       max: max
+    //     },
+    //     series: [
+    //       {
+    //         type: 'bar',
+    //         barWidth: 8,
+    //         itemStyle: {
+    //           normal: {
+    //             show: true,
+    //             color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    //               {
+    //                 offset: 0,
+    //                 color: '#0E90FD',
+    //                 opacity: 1
+    //               },
+    //               {
+    //                 offset: 1,
+    //                 color: 'rgba(96,112,128,0.10)',
+    //                 opacity: 0.1
+    //               }
+    //             ]),
+    //             borderWidth: 0
+    //           }
+    //         },
+    //         // data: [100, 51, 90, 41, 91, 61, 51]
+    //         // data: total,
+    //         data: total.length >= 7 ? total.slice(0, 7) : total,
+    //         label: {
+    //           show: true,
+    //           position: 'top',
+    //           // distance: 5,
+    //           // fontSize: 12,
+    //           textStyle: {
+    //             color: '#8FABBF',
+    //             fontSize: 14
+    //           },
+    //           formatter: function (data) {
+    //             return data.value + '%'
+    //           }
+    //         }
+    //       }
+    //     ]
+    //   }
+    //   let echart = document.getElementById('echart_d02')
+    //   this.myCharts02 = this.$echarts.init(echart)
+    //   this.myCharts02.setOption(option)
+    //   if (names.length > 7) {
+    //     let t = 1
+    //     let stotal = total.slice(0, 7)
+    //     let snames = names.slice(0, 7)
+    //     this.timer4 = setInterval(() => {
+    //       stotal.shift()
+    //       stotal.push(total[t + 6])
+    //       snames.shift()
+    //       snames.push(names[t + 6])
+    //       this.myCharts02.setOption({
+    //         xAxis: {
+    //           data: snames
+    //         },
+    //         series: [
+    //           {data: stotal}
+    //         ]
+    //       })
+    //       if (t + 7 < names.length) {
+    //         t++
+    //       } else {
+    //         t = -6
+    //       }
+    //     }, 2000)
+    //   }
+    // },
     setEchart10 () {
       // 右3
       let total = []
@@ -1346,6 +1510,14 @@ export default {
         max = Math.max(max, Number(el.err_times))
       })
       let option = {
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 6 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
         grid: {
           top: 30,
           left: 0,
@@ -1370,8 +1542,8 @@ export default {
             color: '#8FABBF ',
             rotate: 50
           },
-          // data: names
+          data: names
-          data: names.length >= 7 ? names.slice(0, 7) : names
+          // data: names.length >= 7 ? names.slice(0, 7) : names
         },
         yAxis: {
           axisTick: {
@@ -1420,38 +1592,42 @@ export default {
               }
             },
             // data: [100, 51, 90, 41, 91, 61, 51]
-            // data: total,
+            data: total
-            data: total.length >= 7 ? total.slice(0, 7) : total
+            // data: total.length >= 7 ? total.slice(0, 7) : total
           }
         ]
       }
       let echart = document.getElementById('echart_d10')
       this.myCharts10 = this.$echarts.init(echart)
       this.myCharts10.setOption(option)
-      if (names.length > 7) {
+      this.autoMove(option, 3)
-        let t = 1
+      window.addEventListener('resize', () => {
-        let stotal = total.slice(0, 7)
+        this.myCharts10.resize()
-        let snames = names.slice(0, 7)
+      })
-        this.timer2 = setInterval(() => {
+      // if (names.length > 7) {
-          stotal.shift()
+      //   let t = 1
-          stotal.push(total[t + 6])
+      //   let stotal = total.slice(0, 7)
-          snames.shift()
+      //   let snames = names.slice(0, 7)
-          snames.push(names[t + 6])
+      //   this.timer4 = setInterval(() => {
-          this.myCharts10.setOption({
+      //     stotal.shift()
-            xAxis: {
+      //     stotal.push(total[t + 6])
-              data: snames
+      //     snames.shift()
-            },
+      //     snames.push(names[t + 6])
-            series: [
+      //     this.myCharts10.setOption({
-              {data: stotal}
+      //       xAxis: {
-            ]
+      //         data: snames
-          })
+      //       },
-          if (t + 7 < names.length) {
+      //       series: [
-            t++
+      //         {data: stotal}
-          } else {
+      //       ]
-            t = -6
+      //     })
-          }
+      //     if (t + 7 < names.length) {
-        }, 2000)
+      //       t++
-      }
+      //     } else {
+      //       t = -6
+      //     }
+      //   }, 2000)
+      // }
     },
     autoMove (option, type) {
       if (type === 1) {
@@ -1464,7 +1640,31 @@ export default {
             option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
           }
           this.myCharts04.setOption(option)
-        }, 2000)
+        }, 5000)
+      }
+      if (type === 2) {
+        this.timeOut2 = setInterval(() => {
+          if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
+            option.dataZoom[0].endValue = 6
+            option.dataZoom[0].startValue = 0
+          } else {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+          }
+          this.myCharts02.setOption(option)
+        }, 5000)
+      }
+      if (type === 3) {
+        this.timeOut3 = setInterval(() => {
+          if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
+            option.dataZoom[0].endValue = 6
+            option.dataZoom[0].startValue = 0
+          } else {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+          }
+          this.myCharts10.setOption(option)
+        }, 5000)
       }
     },
     /** 左1 */
@@ -1500,7 +1700,11 @@ export default {
       if (res.code === '1') {
         // console.log(res.result)
         this.chartData1 = res.result
-        this.setEchart02() // 左3
+        if (res.result.length) {
+          window.clearInterval(this.timeOut2)
+          this.setEchart02() // 左3
+        }
+        // this.setEchart02() // 左3
       } else {
         this.Dialog(res.desc)
       }
@@ -1593,6 +1797,8 @@ export default {
     async _deviceErrorNum () {
       let res = await deviceErrorNum()
       if (res.code === '1') {
+        this.data06_d0 = []
+        this.data06_d1 = []
         console.log(res.result)
         res.result.map((e, i) => {
           this.data06_d0.push(e.device_name)
@@ -1619,7 +1825,11 @@ export default {
       if (res.code === '1') {
         console.log(res.result)
         this.chartData2 = res.result
-        this.setEchart10() // 右3
+        if (res.result.length) {
+          window.clearInterval(this.timeOut3)
+          this.setEchart10() // 右3
+        }
+        // this.setEchart10() // 右3
       } else {
         this.Dialog(res.desc)
       }
@@ -1985,4 +2195,13 @@ header
   text-align center
 .cred
   color #CC6060
+.scroll_container_3
+  li
+    .scroll-ul_1_div
+      &:nth-child(4)
+        i
+          display block
+          width .4rem
+          _font(.14rem, .4rem, #fff,,center)
+          font-style normal
 </style>