update 3d，实时产量
This commit is contained in:
parent
c943481826
commit
705da46633
@ -53,7 +53,7 @@ const PriorityComponent = {
|
||||
|
||||
const tableProps = [
|
||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
|
||||
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
|
||||
// { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
|
||||
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 90, subcomponent: PriorityComponent },
|
||||
{ prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
|
||||
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
import { Random } from 'mockjs'
|
||||
|
||||
class ChartOption {
|
||||
constructor() {
|
||||
@ -51,13 +52,16 @@ class ChartOption {
|
||||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
|
||||
}
|
||||
|
||||
let d = new Date()
|
||||
this.xAxis = {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: Array(12)
|
||||
data: Array(7)
|
||||
.fill(0)
|
||||
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
|
||||
.map((_, idx) => {
|
||||
return d.getMonth() + 1 + '-' + (d.getDate() + idx)
|
||||
}),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
@ -74,7 +78,8 @@ class ChartOption {
|
||||
this.yAxis = {
|
||||
type: 'value',
|
||||
name: '成品率 ',
|
||||
min: 'dataMin',
|
||||
// min: 'dataMin',
|
||||
min: 50,
|
||||
splitNumber: 3,
|
||||
nameTextStyle: {
|
||||
color: '#fff9',
|
||||
@ -121,15 +126,9 @@ class ChartOption {
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
data: Array(7)
|
||||
.fill(0)
|
||||
.map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 80) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
.map(_ => Random.integer(93, 98))
|
||||
},
|
||||
{
|
||||
name: 'B',
|
||||
@ -155,15 +154,9 @@ class ChartOption {
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
data: Array(7)
|
||||
.fill(0)
|
||||
.map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 80) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
.map(_ => Random.integer(93, 98))
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -19,17 +19,7 @@ import { Random } from 'mockjs'
|
||||
|
||||
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.color = ['#1A99FF', '#F0D63C', '#E02094', '#559833']
|
||||
|
||||
this.legend = {
|
||||
top: 28,
|
||||
@ -62,9 +52,14 @@ class ChartOption {
|
||||
extraCssText: 'width: calc(100px*var(--beilv)) !important;'
|
||||
}
|
||||
|
||||
let d = new Date()
|
||||
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'],
|
||||
data: Array(7)
|
||||
.fill(1)
|
||||
.map((_, idx) => {
|
||||
return d.getMonth() + 1 + '-' + (d.getDate() + idx)
|
||||
}),
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
@ -138,14 +133,16 @@ class ChartOption {
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: '产线1',
|
||||
name: 'A能耗',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianliuData,
|
||||
data: Array(7)
|
||||
.fill(0)
|
||||
.map(_ => Random.integer(30, 100)),
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
@ -169,14 +166,16 @@ class ChartOption {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '产线2',
|
||||
name: 'A产量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianyaData,
|
||||
data: Array(7)
|
||||
.fill(0)
|
||||
.map(_ => Random.integer(30, 100)),
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
@ -198,6 +197,72 @@ class ChartOption {
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'B能耗',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: Array(7)
|
||||
.fill(0)
|
||||
.map(_ => Random.integer(30, 100)),
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#E0209466' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'B产量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: Array(7)
|
||||
.fill(0)
|
||||
.map(_ => Random.integer(30, 100)),
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#55983366' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user