diff --git a/src/pages/DeviceScreen.vue b/src/pages/DeviceScreen.vue index f85a9c4..72b4db9 100644 --- a/src/pages/DeviceScreen.vue +++ b/src/pages/DeviceScreen.vue @@ -156,14 +156,14 @@
  • 关机时间
  • 生产日期
    • -
    +
    • {{e.device_code}}
      {{e.device_name}}
      {{e.workprocedure_name}}
      -
      {{e.device_status}}
      +
      {{e.device_status}}
      {{e.product_qty}}
      {{e.start_time}}
      {{e.end_time}}
      @@ -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.length >= 7 ? names.slice(0, 7) : names + data: 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.length >= 7 ? total.slice(0, 7) : total, + data: 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) { - let t = 1 - let stotal = total.slice(0, 7) - let snames = names.slice(0, 7) - this.timer2 = 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) - } + this.autoMove(option, 2) + window.addEventListener('resize', () => { + this.myCharts02.resize() + }) + // 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) + // } }, + // 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.length >= 7 ? names.slice(0, 7) : names + data: 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.length >= 7 ? total.slice(0, 7) : total + data: 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) { - let t = 1 - let stotal = total.slice(0, 7) - let snames = names.slice(0, 7) - this.timer2 = setInterval(() => { - stotal.shift() - stotal.push(total[t + 6]) - snames.shift() - snames.push(names[t + 6]) - this.myCharts10.setOption({ - xAxis: { - data: snames - }, - series: [ - {data: stotal} - ] - }) - if (t + 7 < names.length) { - t++ - } else { - t = -6 - } - }, 2000) - } + this.autoMove(option, 3) + window.addEventListener('resize', () => { + this.myCharts10.resize() + }) + // 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.myCharts10.setOption({ + // xAxis: { + // data: snames + // }, + // series: [ + // {data: stotal} + // ] + // }) + // if (t + 7 < names.length) { + // 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