update 实时产量

This commit is contained in:
lb 2022-11-23 16:21:09 +08:00
parent 779a771bb5
commit 59b40fefe9
3 changed files with 241 additions and 223 deletions

View File

@ -15,6 +15,224 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs'
import { debounce } from '@/utils'
class ChartOption {
constructor() {
const wenduData = Array(12)
.fill(1)
.map(_ => Random.integer(30, 100))
const dianyaData = Array(12)
.fill(1)
.map(_ => Random.integer(30, 100))
const dianliuData = Array(12)
.fill(1)
.map(_ => Random.integer(30, 100))
this.color = ['#1A99FF', '#F0D63C', '#E02094']
this.legend = {
top: 28,
right: 40,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff9',
fontSize: 10
}
}
this.grid = {
top: 80,
left: 88,
right: 24,
bottom: 32
}
this.tooltip = {
show: true,
trigger: 'axis',
textStyle: {
fontSize: 12
},
axisPointer: {
type: 'line',
axis: 'x'
},
extraCssText: 'width: calc(100px*var(--beilv)) !important;'
}
this.xAxis = {
type: 'category',
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
axisTick: { show: false },
axisLabel: {
color: '#fff9',
fontSize: 12
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
}
this.yAxis = [
{
name: '能耗 ',
nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
type: 'value',
splitNumber: 4,
onZero: true,
position: 'left',
offset: 40,
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
},
splitLine: {
show: true,
lineStyle: {
color: '#fff1',
type: 'dotted'
}
}
},
{
name: '产量 ',
nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
type: 'value',
splitNumber: 4,
axisTick: { show: false },
onZero: true,
position: 'left',
offset: 0,
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
},
splitLine: {
show: true,
lineStyle: {
color: '#fff1',
type: 'dotted'
}
}
}
]
this.series = [
{
name: '产线1',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianliuData,
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1A99FF66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
}
},
{
name: '产线2',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianyaData,
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#F0D63C66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
}
}
]
}
get option() {
return this
}
optionFilter(option, calcSize = () => {} /** callback */) {
let newOption
if (Array.isArray(option)) {
newOption = []
option.forEach(item => {
newOption.push(this.optionFilter(item, calcSize))
})
return newOption
} else if (typeof option === 'object') {
newOption = {}
for (const key in option) {
if (key === 'colorStops') newOption[key] = option[key]
else if (
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
) {
newOption[key] = calcSize(option[key])
} else newOption[key] = this.optionFilter(option[key], calcSize)
}
return newOption
} else {
newOption = calcSize(option)
return option
}
}
}
export default { export default {
name: 'RealtimeLineChart', name: 'RealtimeLineChart',
@ -22,226 +240,11 @@ export default {
/** Fn.1: 保证全屏切换时也刷新图表 应该在每个父组件为flex:1的echarts组件里都加上以确保能正确地伸缩 */ /** Fn.1: 保证全屏切换时也刷新图表 应该在每个父组件为flex:1的echarts组件里都加上以确保能正确地伸缩 */
inject: ['resizeStatus'], inject: ['resizeStatus'],
/** End Fn.1 */ /** End Fn.1 */
props: { props: {},
id: {
type: String,
default: 'default-dian-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() { data() {
const colors = ['#1A99FF', '#F0D63C', '#E02094']
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
let data = [
//
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
}),
//
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
}),
//
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
})
]
let wendu = data[0]
let dianliu = data[1]
let dianya = data[2]
return { return {
chart: null, chart: null,
option: { option: null
color: colors,
legend: {
top: 28,
right: 40,
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: '#fff9',
fontSize: 10
}
// data: ['ABC/v', 'ABC/a', '']
},
grid: {
top: 80,
left: 88,
right: 24,
bottom: 32
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
axis: 'x'
},
extraCssText: 'width: 100px !important;'
},
xAxis: [
{
type: 'category',
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
axisTick: { show: false },
axisLabel: {
color: '#fff9'
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
}
],
yAxis: [
{
name: '能耗 ',
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
type: 'value',
splitNumber: 4,
onZero: true,
position: 'left',
offset: 40,
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
},
splitLine: {
show: true,
lineStyle: {
color: '#fff1',
type: 'dotted'
}
}
},
{
name: '产量 ',
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
type: 'value',
splitNumber: 4,
axisTick: { show: false },
onZero: true,
position: 'left',
offset: 0,
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
},
splitLine: {
show: true,
lineStyle: {
color: '#fff1',
type: 'dotted'
}
}
}
],
series: [
{
name: '产线1',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianliu,
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1A99FF66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
}
},
{
name: '产线2',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianya,
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#F0D63C66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
}
}
]
}
} }
}, },
computed: { computed: {
@ -251,7 +254,7 @@ export default {
}, },
watch: { watch: {
shouldResize(val, oldVal) { shouldResize(val, oldVal) {
console.log('should resize') console.log('fullscreen resize')
setTimeout(() => { setTimeout(() => {
this.chart.resize() this.chart.resize()
}, 250) }, 250)
@ -260,14 +263,23 @@ export default {
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart']) if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
this.chart.setOption(this.option) this.setChartOption()
}) })
}, },
beforeDestroy() { beforeDestroy() {
if (this.chart) this.chart.dispose() if (this.chart) this.chart.dispose()
this.chart = null this.chart = null
}, },
methods: {} methods: {
calcSize(num) {
const beilv = document.documentElement.style.getPropertyValue('--beilv')
return num * beilv
},
setChartOption() {
let chartOption = new ChartOption()
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
}
}
} }
</script> </script>

View File

@ -258,7 +258,7 @@ export default {
/* 实时产量和能耗 */ /* 实时产量和能耗 */
.realtime { .realtime {
height: calc(256px * var(--beilv)); height: calc(240px * var(--beilv));
} }
/* 工序质量分析 */ /* 工序质量分析 */
.ws-quality { .ws-quality {
@ -268,7 +268,7 @@ export default {
} }
/* 产线成品率 */ /* 产线成品率 */
.production { .production {
height: calc(256px * var(--beilv)); height: calc(220px * var(--beilv));
position: relative; position: relative;
} }

View File

@ -10,7 +10,13 @@ export default {
mounted() { mounted() {
this.$_resizeHandler = debounce(() => { this.$_resizeHandler = debounce(() => {
if (this.chart) { if (this.chart) {
this.chart.resize() if (this.setChartOption) {
this.setChartOption()
this.$nextTick(() => {
this.chart.resize()
})
} else
this.chart.resize()
} }
}, 100) }, 100)
this.$_initResizeEvent() this.$_initResizeEvent()