root/screen-hl-one
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改循环轮动

Browse Source
This commit is contained in:
xiangxy
2022-07-29 18:27:33 +08:00
parent dc09a9af44
commit 5c4ae75808
1 changed files with 281 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
src/pages/DeviceScreen.vue
View File

@@ -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.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
</style>