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