lb #17
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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()
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user