Compare commits
7 Commits
0b9dfa27ab
...
fbe6cf41e4
Author | SHA1 | Date | |
---|---|---|---|
fbe6cf41e4 | |||
ff0bda0dba | |||
582ac98a52 | |||
7f79481a35 | |||
7c2aadc19a | |||
f96854fa29 | |||
6aa7afb555 |
@ -31,17 +31,38 @@ class ChartOption {
|
|||||||
this.tooltip = {
|
this.tooltip = {
|
||||||
show: true,
|
show: true,
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
// position: [200,10],
|
||||||
|
// position: ['25%', '25%'],
|
||||||
|
position: pointer => {
|
||||||
|
return [pointer[1], 0]
|
||||||
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
axis: 'x',
|
axis: 'x',
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#41888F90',
|
color: '#7BFFFB',
|
||||||
shadowColor: '#41888F',
|
type: 'dotted'
|
||||||
shadowBlur: 10,
|
|
||||||
width: 2
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
|
extraCssText: 'width: auto !important; height: auto !important;',
|
||||||
|
formatter: params => {
|
||||||
|
return `
|
||||||
|
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||||
|
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[0]
|
||||||
|
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[1]
|
||||||
|
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[2]
|
||||||
|
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.xAxis = {
|
this.xAxis = {
|
||||||
@ -156,7 +177,9 @@ class ChartOption {
|
|||||||
data: Array(12)
|
data: Array(12)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none'
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'ABC三相电流/a',
|
name: 'ABC三相电流/a',
|
||||||
@ -169,7 +192,9 @@ class ChartOption {
|
|||||||
data: Array(12)
|
data: Array(12)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none'
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '电缆温度',
|
name: '电缆温度',
|
||||||
@ -182,7 +207,9 @@ class ChartOption {
|
|||||||
data: Array(12)
|
data: Array(12)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none'
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -124,6 +124,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
|
selectedMode: false,
|
||||||
top: 0,
|
top: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
@ -208,6 +209,7 @@ export default {
|
|||||||
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
silent: true,
|
||||||
name: 'PieForm',
|
name: 'PieForm',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
center: ['68%', '61%'],
|
center: ['68%', '61%'],
|
||||||
|
@ -47,9 +47,31 @@ class ChartOption {
|
|||||||
fontSize: 12
|
fontSize: 12
|
||||||
},
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line'
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7BFFFB',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
|
// formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
|
||||||
|
extraCssText: 'width: calc(100px*var(--beilv)) !important;',
|
||||||
|
formatter: params => {
|
||||||
|
return `
|
||||||
|
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||||
|
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
|
||||||
|
params[0].axisValue
|
||||||
|
}</h2>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[0]
|
||||||
|
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[1]
|
||||||
|
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let d = new Date()
|
let d = new Date()
|
||||||
@ -79,7 +101,7 @@ class ChartOption {
|
|||||||
type: 'value',
|
type: 'value',
|
||||||
name: '成品率 ',
|
name: '成品率 ',
|
||||||
// min: 'dataMin',
|
// min: 'dataMin',
|
||||||
min: 50,
|
min: 80,
|
||||||
splitNumber: 3,
|
splitNumber: 3,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fff9',
|
color: '#fff9',
|
||||||
@ -105,7 +127,9 @@ class ChartOption {
|
|||||||
{
|
{
|
||||||
name: 'A',
|
name: 'A',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -133,7 +157,9 @@ class ChartOption {
|
|||||||
{
|
{
|
||||||
name: 'B',
|
name: 'B',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -179,7 +205,7 @@ class ChartOption {
|
|||||||
if (key === 'colorStops') newOption[key] = option[key]
|
if (key === 'colorStops') newOption[key] = option[key]
|
||||||
else if (
|
else if (
|
||||||
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||||||
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
['splitNumber', 'x', 'x2', 'y', 'y2', 'min', 'max', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
||||||
) {
|
) {
|
||||||
newOption[key] = calcSize(option[key])
|
newOption[key] = calcSize(option[key])
|
||||||
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||||||
|
@ -19,7 +19,7 @@ import { Random } from 'mockjs'
|
|||||||
|
|
||||||
class ChartOption {
|
class ChartOption {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.color = ['#1A99FF', '#F0D63C', '#E02094', '#559833']
|
this.color = ['#1A99FF', '#F0D63C', '#E02094', '#52FFF1']
|
||||||
|
|
||||||
this.legend = {
|
this.legend = {
|
||||||
top: 28,
|
top: 28,
|
||||||
@ -47,9 +47,34 @@ class ChartOption {
|
|||||||
},
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
axis: 'x'
|
axis: 'x',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7BFFFB',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
extraCssText: 'width: calc(100px*var(--beilv)) !important;'
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
|
extraCssText: 'width: calc(100px*var(--beilv)) !important;',
|
||||||
|
formatter: params => {
|
||||||
|
return `
|
||||||
|
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||||
|
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[0]
|
||||||
|
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[1]
|
||||||
|
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[2]
|
||||||
|
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[3]
|
||||||
|
}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let d = new Date()
|
let d = new Date()
|
||||||
@ -136,6 +161,10 @@ class ChartOption {
|
|||||||
name: 'A能耗',
|
name: 'A能耗',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
// smooth: true,
|
// smooth: true,
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
@ -143,7 +172,6 @@ class ChartOption {
|
|||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none',
|
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -176,7 +204,10 @@ class ChartOption {
|
|||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -209,7 +240,10 @@ class ChartOption {
|
|||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -242,7 +276,10 @@ class ChartOption {
|
|||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -253,7 +290,7 @@ class ChartOption {
|
|||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: '#55983366' // 0% 处的颜色
|
color: '#52FFF166' // 0% 处的颜色
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
|
@ -137,7 +137,7 @@
|
|||||||
:class="{ 'pl-select__active': plMode === 'a' }"
|
:class="{ 'pl-select__active': plMode === 'a' }"
|
||||||
@click="
|
@click="
|
||||||
plMode = 'a'
|
plMode = 'a'
|
||||||
chosenDatalist = quexianDatalist[0]
|
chosenDatalist = getFaultDataList()
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
A
|
A
|
||||||
@ -146,7 +146,7 @@
|
|||||||
:class="{ 'pl-select__active': plMode === 'b' }"
|
:class="{ 'pl-select__active': plMode === 'b' }"
|
||||||
@click="
|
@click="
|
||||||
plMode = 'b'
|
plMode = 'b'
|
||||||
chosenDatalist = quexianDatalist[1]
|
chosenDatalist = getFaultDataList()
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
B
|
B
|
||||||
@ -157,7 +157,7 @@
|
|||||||
:class="{ 'date-select__active': dateMode === 'day' }"
|
:class="{ 'date-select__active': dateMode === 'day' }"
|
||||||
@click="
|
@click="
|
||||||
dateMode = 'day'
|
dateMode = 'day'
|
||||||
chosenDatalist = quexianDatalist[2]
|
chosenDatalist = getFaultDataList()
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
日
|
日
|
||||||
@ -166,7 +166,7 @@
|
|||||||
:class="{ 'date-select__active': dateMode === 'month' }"
|
:class="{ 'date-select__active': dateMode === 'month' }"
|
||||||
@click="
|
@click="
|
||||||
dateMode = 'month'
|
dateMode = 'month'
|
||||||
chosenDatalist = quexianDatalist[3]
|
chosenDatalist = getFaultDataList()
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
月
|
月
|
||||||
@ -176,17 +176,63 @@
|
|||||||
</techy-analysis-header>
|
</techy-analysis-header>
|
||||||
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
|
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
|
||||||
<span
|
<span
|
||||||
style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(16px * var(--beilv));"
|
style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(28px * var(--beilv));"
|
||||||
>
|
>
|
||||||
单位: 千片
|
<!--单位千片和单位片 -->
|
||||||
|
{{ unit }}
|
||||||
</span>
|
</span>
|
||||||
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
|
<!-- data-period 是指数据是月数据还是日数据 -->
|
||||||
|
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" :data-period="dateMode" />
|
||||||
</div>
|
</div>
|
||||||
</techy-box>
|
</techy-box>
|
||||||
</div>
|
</div>
|
||||||
<div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
|
<div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
|
||||||
<techy-box class="" style="padding: 0 calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<productionRateHeader @update-data="obj => { dataUpdateToken = obj.str; dateMode2 = obj.mode }">产品成品率</productionRateHeader>
|
<!-- <productionRateHeader
|
||||||
|
@update-data="
|
||||||
|
obj => {
|
||||||
|
dataUpdateToken = obj.str
|
||||||
|
dateMode2 = obj.mode
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
产品成品率
|
||||||
|
</productionRateHeader> -->
|
||||||
|
|
||||||
|
<techy-analysis-header :show-top-icon="false">
|
||||||
|
产线成品率
|
||||||
|
<template v-slot:dateSelect>
|
||||||
|
<div class="pl-select">
|
||||||
|
<span
|
||||||
|
:class="{ 'pl-select__active': dateMode2 === 'day' }"
|
||||||
|
@click="
|
||||||
|
dateMode2 = 'day'
|
||||||
|
dataUpdateToken = Math.random()+''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
日
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
:class="{ 'pl-select__active': dateMode2 === 'month' }"
|
||||||
|
@click="
|
||||||
|
dateMode2 = 'month'
|
||||||
|
dataUpdateToken = Math.random()+''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
月
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="date-select fake-legend">
|
||||||
|
<span>
|
||||||
|
<!-- 产线A -->
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<!-- 产线B -->
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</techy-analysis-header>
|
||||||
|
|
||||||
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
||||||
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
|
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
|
||||||
</div>
|
</div>
|
||||||
@ -290,36 +336,40 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
const quexianDatalist = [
|
const quexianDatalist = [
|
||||||
[
|
[
|
||||||
|
// 月a
|
||||||
|
{ value: 5.21, name: '破片' },
|
||||||
|
{ value: 3.2, name: '崩边' },
|
||||||
|
{ value: 4.12, name: '脏污' },
|
||||||
|
{ value: 2.61, name: '划擦伤' },
|
||||||
|
{ value: 0.96, name: '崩孔' },
|
||||||
|
{ value: 2.2, name: '其他' }
|
||||||
|
],
|
||||||
|
[
|
||||||
|
// 月b
|
||||||
{ value: 4.34, name: '破片' },
|
{ value: 4.34, name: '破片' },
|
||||||
{ value: 3.4, name: '崩边' },
|
{ value: 3.4, name: '崩边' },
|
||||||
{ value: 4.1, name: '脏污' },
|
{ value: 4.1, name: '脏污' },
|
||||||
{ value: 2.4, name: '划擦伤' },
|
{ value: 2.4, name: '划擦伤' },
|
||||||
{ value: 0.23, name: '崩孔' },
|
{ value: 0.32, name: '崩孔' },
|
||||||
{ value: 2.14, name: '其他' }
|
{ value: 2.14, name: '其他' }
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
{ value: 4.17, name: '破片' },
|
// 日a
|
||||||
{ value: 3.6, name: '崩边' },
|
{ value: 184, name: '破片' },
|
||||||
{ value: 4, name: '脏污' },
|
{ value: 110, name: '崩边' },
|
||||||
{ value: 2.2, name: '划擦伤' },
|
{ value: 163, name: '脏污' },
|
||||||
{ value: 0.2, name: '崩孔' },
|
{ value: 96, name: '划擦伤' },
|
||||||
{ value: 1.9, name: '其他' }
|
{ value: 22, name: '崩孔' },
|
||||||
|
{ value: 74, name: '其他' }
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
{ value: 3.33, name: '破片' },
|
// 日b
|
||||||
{ value: 3, name: '崩边' },
|
{ value: 172, name: '破片' },
|
||||||
{ value: 4.3, name: '脏污' },
|
{ value: 122, name: '崩边' },
|
||||||
{ value: 2.1, name: '划擦伤' },
|
{ value: 162, name: '脏污' },
|
||||||
{ value: 1, name: '崩孔' },
|
{ value: 82, name: '划擦伤' },
|
||||||
{ value: 1.8, name: '其他' }
|
{ value: 15, name: '崩孔' },
|
||||||
],
|
{ value: 74, name: '其他' }
|
||||||
[
|
|
||||||
{ value: 2.7, name: '破片' },
|
|
||||||
{ value: 1.56, name: '崩边' },
|
|
||||||
{ value: 2.3, name: '脏污' },
|
|
||||||
{ value: 1.2, name: '划擦伤' },
|
|
||||||
{ value: 0.23, name: '崩孔' },
|
|
||||||
{ value: 2, name: '其他' }
|
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -327,7 +377,7 @@ export default {
|
|||||||
dataUpdateToken: 'xx-token',
|
dataUpdateToken: 'xx-token',
|
||||||
plMode: 'a',
|
plMode: 'a',
|
||||||
dateMode: 'month',
|
dateMode: 'month',
|
||||||
dateMode2: 'month',
|
dateMode2: 'day',
|
||||||
qualityTableProps,
|
qualityTableProps,
|
||||||
qualityDatalist,
|
qualityDatalist,
|
||||||
qualityExceptionDatalist,
|
qualityExceptionDatalist,
|
||||||
@ -385,7 +435,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['sidebar'])
|
...mapGetters(['sidebar']),
|
||||||
|
unit() {
|
||||||
|
return this.dateMode === 'month' ? '单位: 千片' : '单位: 片'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeFullScreen() {
|
changeFullScreen() {
|
||||||
@ -397,6 +450,13 @@ export default {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
screenfull.toggle(this.$refs['cockpit-container-quality'])
|
screenfull.toggle(this.$refs['cockpit-container-quality'])
|
||||||
|
},
|
||||||
|
getFaultDataList() {
|
||||||
|
const { dateMode, plMode, quexianDatalist } = this
|
||||||
|
if (dateMode === 'month' && plMode === 'a') return quexianDatalist[0]
|
||||||
|
else if (dateMode === 'month' && plMode === 'b') return quexianDatalist[1]
|
||||||
|
else if (dateMode === 'day' && plMode === 'a') return quexianDatalist[2]
|
||||||
|
else if (dateMode === 'day' && plMode === 'b') return quexianDatalist[3]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -608,6 +668,15 @@ export default {
|
|||||||
width: calc(375px * var(--beilv));
|
width: calc(375px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fake-legend{
|
||||||
|
cursor: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fake-legend span {
|
||||||
|
background: none;
|
||||||
|
cursor: none;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
/* @media all and (max-width: 1680px) {
|
/* @media all and (max-width: 1680px) {
|
||||||
.production-rate {
|
.production-rate {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -17,6 +17,10 @@ export default {
|
|||||||
dataList: {
|
dataList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true
|
required: true
|
||||||
|
},
|
||||||
|
dataPeriod: {
|
||||||
|
type: String,
|
||||||
|
default: 'month'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -109,7 +113,7 @@ export default {
|
|||||||
title: {
|
title: {
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
textVerticalAlign: 'middle',
|
textVerticalAlign: 'middle',
|
||||||
left: '69%',
|
left: '65%',
|
||||||
top: '46%',
|
top: '46%',
|
||||||
text: '',
|
text: '',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -125,6 +129,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
|
selectedMode: false,
|
||||||
top: '12%',
|
top: '12%',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
@ -209,7 +214,8 @@ export default {
|
|||||||
{
|
{
|
||||||
name: 'PieForm',
|
name: 'PieForm',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
center: ['70%', '56%'],
|
silent: true,
|
||||||
|
center: ['66%', '56%'],
|
||||||
radius: ['45%', '65%'],
|
radius: ['45%', '65%'],
|
||||||
avoidLabelOverlap: true,
|
avoidLabelOverlap: true,
|
||||||
label: {
|
label: {
|
||||||
@ -305,17 +311,22 @@ export default {
|
|||||||
const fs13 = this.calcFontsize(13 /** px*/)
|
const fs13 = this.calcFontsize(13 /** px*/)
|
||||||
const fs18 = this.calcFontsize(18 /** px*/)
|
const fs18 = this.calcFontsize(18 /** px*/)
|
||||||
const fs20 = this.calcFontsize(20 /** px*/)
|
const fs20 = this.calcFontsize(20 /** px*/)
|
||||||
const legendTextFixWidth = this.calcFontsize(56 /** px*/)
|
const legendTextFixWidth = this.calcFontsize(48 /** px*/)
|
||||||
const legnedTop = this.calcFontsize(64 /** px*/)
|
const legnedTop = this.calcFontsize(72 /** px*/)
|
||||||
const legendTopRate = this.calcFontsize(30 /** % */)
|
const legendTopRate = this.calcFontsize(30 /** % */)
|
||||||
|
|
||||||
this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
|
this.configs.title.text =
|
||||||
|
this.dataPeriod === 'month'
|
||||||
|
? // 如果是月数据,单位为 千片
|
||||||
|
this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
|
||||||
|
: // 如果是日数据,单位为 片
|
||||||
|
this.dataList.reduce((prev, curr) => prev + curr.value, 0)
|
||||||
this.configs.title.textStyle.fontSize = fs20
|
this.configs.title.textStyle.fontSize = fs20
|
||||||
this.configs.title.subtextStyle.fontSize = fs13
|
this.configs.title.subtextStyle.fontSize = fs13
|
||||||
|
|
||||||
// this.configs.legend.top = legendTopRate + '%'
|
// this.configs.legend.top = legendTopRate + '%'
|
||||||
this.configs.legend.top = legnedTop
|
this.configs.legend.top = legnedTop
|
||||||
this.configs.legend.left = 0 + '%'
|
this.configs.legend.left = 3 + '%'
|
||||||
this.configs.legend.itemGap = fs8
|
this.configs.legend.itemGap = fs8
|
||||||
this.configs.legend.itemWidth = fs8
|
this.configs.legend.itemWidth = fs8
|
||||||
|
|
||||||
|
@ -162,6 +162,39 @@ export default {
|
|||||||
top: 72,
|
top: 72,
|
||||||
bottom: 28
|
bottom: 28
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.1)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
|
extraCssText: 'width: 128px !important; height: auto !important;',
|
||||||
|
formatter: params => {
|
||||||
|
const [, a, , , b] = params
|
||||||
|
return `<div style="display: flex; flex-direction: column; gap: 2px; align-items: flex-start; ">
|
||||||
|
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
|
||||||
|
a.name
|
||||||
|
}</h2>
|
||||||
|
<div style="display: flex; align-items: center; gap: 8px;">
|
||||||
|
<span style="width: 12px; height: 12px; background: linear-gradient(to top, ${
|
||||||
|
a.color.colorStops[0].color
|
||||||
|
}, transparent);"></span>
|
||||||
|
<span style="font-size: calc(10px * var(--beilv));">${a.seriesName}: ${a.data}</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center; gap: 8px;">
|
||||||
|
<span style="width: 12px; height: 12px; background: linear-gradient(to top, ${
|
||||||
|
b.color.colorStops[0].color
|
||||||
|
}, transparent);"></span>
|
||||||
|
<span style="font-size: calc(10px * var(--beilv));">${b.seriesName}: ${b.data}</span>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
axisTick: {
|
axisTick: {
|
||||||
@ -176,20 +209,20 @@ export default {
|
|||||||
color: '#fff8',
|
color: '#fff8',
|
||||||
fontSize: 12
|
fontSize: 12
|
||||||
},
|
},
|
||||||
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'],
|
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
|
||||||
axisPointer: {
|
// axisPointer: {
|
||||||
show: true,
|
// show: true,
|
||||||
type: 'shadow',
|
// type: 'shadow',
|
||||||
label: {
|
// label: {
|
||||||
show: true,
|
// show: true,
|
||||||
formatter: params => {
|
// formatter: params => {
|
||||||
let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
|
// let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
|
||||||
let v = [`<${info_arr[0].name}>详细数据: \n`]
|
// let v = [`<${info_arr[0].name}>详细数据: \n`]
|
||||||
info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
|
// info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
|
||||||
return v.join('\n')
|
// return v.join('\n')
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
@ -5,24 +5,25 @@
|
|||||||
<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() {
|
||||||
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
|
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
|
||||||
|
|
||||||
// this.legend = {
|
this.legend = {
|
||||||
// top: 11,
|
top: 14,
|
||||||
// right: 32,
|
right: 22,
|
||||||
// itemWidth: 8,
|
itemWidth: 6,
|
||||||
// itemHeight: 8,
|
itemHeight: 8,
|
||||||
// textStyle: {
|
textStyle: {
|
||||||
// color: '#fff9',
|
color: '#DFF1FECC',
|
||||||
// fontSize: 10
|
fontSize: 12
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
this.grid = {
|
this.grid = {
|
||||||
top: 64,
|
top: 72,
|
||||||
left: 12,
|
left: 12,
|
||||||
right: 28,
|
right: 28,
|
||||||
bottom: 20,
|
bottom: 20,
|
||||||
@ -31,15 +32,32 @@ class ChartOption {
|
|||||||
|
|
||||||
this.tooltip = {
|
this.tooltip = {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
extraCssText: 'width: 180px !important; ',
|
extraCssText: 'width: 180px !important; ',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross',
|
type: 'line',
|
||||||
label: {
|
lineStyle: {
|
||||||
backgroundColor: '#6a7985'
|
type: 'dotted',
|
||||||
|
color: '#7BFFFB'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
return `
|
||||||
|
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||||
|
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[0]
|
||||||
|
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.color[1]
|
||||||
|
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let today = new Date()
|
||||||
this.xAxis = {
|
this.xAxis = {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
@ -58,7 +76,9 @@ class ChartOption {
|
|||||||
},
|
},
|
||||||
data:
|
data:
|
||||||
this.mode === 'month'
|
this.mode === 'month'
|
||||||
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
|
||||||
|
.fill(1)
|
||||||
|
.map((_, idx) => idx + 1)
|
||||||
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -66,7 +86,7 @@ class ChartOption {
|
|||||||
{
|
{
|
||||||
name: '成品率 ',
|
name: '成品率 ',
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: 'dataMin',
|
min: '80',
|
||||||
splitNumber: 4,
|
splitNumber: 4,
|
||||||
nameGap: 16,
|
nameGap: 16,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
@ -105,7 +125,11 @@ class ChartOption {
|
|||||||
{
|
{
|
||||||
name: 'A1下片机',
|
name: 'A1下片机',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
// smooth: true,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
// color: 'rgba(50,145,152,0.5)'
|
// color: 'rgba(50,145,152,0.5)'
|
||||||
color: {
|
color: {
|
||||||
@ -128,32 +152,26 @@ class ChartOption {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series',
|
||||||
|
scale: 1.2
|
||||||
},
|
},
|
||||||
data:
|
data:
|
||||||
this.mode === 'month'
|
this.mode === 'month'
|
||||||
? Array(30)
|
? Array(30)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => {
|
.map(_ => Random.integer(94, 99))
|
||||||
let v = Math.floor(Math.random() * 100)
|
: Array(7)
|
||||||
while (v < 80) {
|
.fill(1)
|
||||||
v = Math.floor(Math.random() * 100)
|
.map(_ => Random.integer(94, 99))
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 80) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '磨边机',
|
name: '磨边机',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
// smooth: true,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
// color: 'rgba(50,145,152,0.5)'
|
// color: 'rgba(50,145,152,0.5)'
|
||||||
color: {
|
color: {
|
||||||
@ -182,20 +200,10 @@ class ChartOption {
|
|||||||
this.mode === 'month'
|
this.mode === 'month'
|
||||||
? Array(30)
|
? Array(30)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => {
|
.map(_ => Random.integer(94, 99))
|
||||||
let v = Math.floor(Math.random() * 100)
|
: Array(7)
|
||||||
while (v < 80) {
|
.fill(1)
|
||||||
v = Math.floor(Math.random() * 100)
|
.map(_ => Random.integer(94, 99))
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 80) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -267,31 +275,87 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
refreshData() {
|
refreshData() {
|
||||||
// update xaxis
|
// update xaxis
|
||||||
|
let today = new Date()
|
||||||
this.configs.xAxis.data =
|
this.configs.xAxis.data =
|
||||||
this.mode === 'month'
|
this.mode === 'month'
|
||||||
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
|
||||||
|
.fill(1)
|
||||||
|
.map((_, idx) => idx + 1)
|
||||||
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
|
||||||
|
// update tooltip
|
||||||
|
if (this.mode === 'month') {
|
||||||
|
this.configs.tooltip = {
|
||||||
|
trigger: 'axis',
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
|
extraCssText: 'width: 180px !important; ',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dotted',
|
||||||
|
color: '#7BFFFB'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
const currentMonth = new Date().getMonth() + 1
|
||||||
|
return `
|
||||||
|
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||||
|
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${currentMonth}-${
|
||||||
|
params[0].axisValue
|
||||||
|
}</h2>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.configs.color[0]
|
||||||
|
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.configs.color[1]
|
||||||
|
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (this.mode === 'day') {
|
||||||
|
this.configs.tooltip = null
|
||||||
|
this.configs.tooltip = {
|
||||||
|
trigger: 'axis',
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
|
extraCssText: 'width: 180px !important; ',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dotted',
|
||||||
|
color: '#7BFFFB'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
return `
|
||||||
|
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||||
|
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
|
||||||
|
params[0].axisValue
|
||||||
|
}</h2>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.configs.color[0]
|
||||||
|
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||||
|
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||||
|
this.configs.color[1]
|
||||||
|
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// update series
|
// update series
|
||||||
this.configs.series.forEach(item => {
|
this.configs.series.forEach(item => {
|
||||||
item.data =
|
item.data =
|
||||||
this.mode === 'month'
|
this.mode === 'month'
|
||||||
? Array(30)
|
? Array(30)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => {
|
.map(_ => Random.integer(94, 99))
|
||||||
let v = Math.floor(Math.random() * 100)
|
: Array(7)
|
||||||
while (v < 80) {
|
.fill(1)
|
||||||
v = Math.floor(Math.random() * 100)
|
.map(_ => Random.integer(94, 99))
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 80) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
if (this.chart) this.chart.setOption(this.configs)
|
if (this.chart) this.chart.setOption(this.configs)
|
||||||
|
@ -27,7 +27,7 @@ const PriorityComponent = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log(this.injectData.priority)
|
// console.log(this.injectData.priority)
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {},
|
||||||
render: function (h) {
|
render: function (h) {
|
||||||
@ -35,38 +35,38 @@ const PriorityComponent = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('is component?', PriorityComponent)
|
// console.log('is component?', PriorityComponent)
|
||||||
|
|
||||||
export const qualityTableProps = [
|
export const qualityTableProps = [
|
||||||
{ label: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
|
{ label: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
|
||||||
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
|
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 50 },
|
||||||
{ label: '异常内容', align: 'center', prop: 'content', 'min-width': 50 },
|
{ label: '异常内容', align: 'center', prop: 'content', 'min-width': 50 },
|
||||||
{ label: '班组', prop: 'team', align: 'center', 'min-width': 45 },
|
{ label: '班组', prop: 'team', align: 'center', 'min-width': 45 },
|
||||||
{ label: '时间', prop: 'time', align: 'center' },
|
{ label: '时间', prop: 'time', align: 'center' },
|
||||||
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
|
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 50 }
|
||||||
]
|
]
|
||||||
|
|
||||||
export const qualityDatalist = [
|
export const qualityDatalist = [
|
||||||
{ 'wsName': '原片', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 },
|
{ 'wsName': '原片', 'pl': 'B', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 },
|
||||||
{ 'wsName': '下片铺纸', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 2 },
|
{ 'wsName': '下片铺纸', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 2 },
|
||||||
{ 'wsName': '镀膜', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 },
|
{ 'wsName': '镀膜', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 },
|
||||||
{ 'wsName': '丝印', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 2 },
|
{ 'wsName': '丝印', 'pl': 'A', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 2 },
|
||||||
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 3 },
|
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '透光率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 3 },
|
||||||
{ 'wsName': '丝印', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 1 },
|
{ 'wsName': '丝印', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 1 },
|
||||||
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 },
|
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 },
|
||||||
{ 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 },
|
{ 'wsName': '包装', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 },
|
||||||
{ 'wsName': '包装', 'pl': 'B', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 },
|
{ 'wsName': '包装', 'pl': 'B', 'content': '透光率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 },
|
||||||
{ 'wsName': '上片磨边', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:31:10', 'priority': 1 },
|
{ 'wsName': '上片磨边', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 06:31:10', 'priority': 1 },
|
||||||
{ 'wsName': '下片铺纸', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:22:55', 'priority': 3 },
|
{ 'wsName': '下片铺纸', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 10:22:55', 'priority': 3 },
|
||||||
{ 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:29:08', 'priority': 2 },
|
{ 'wsName': '原片', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 03:29:08', 'priority': 2 },
|
||||||
{ 'wsName': '丝印', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 09:47:06', 'priority': 1 },
|
{ 'wsName': '丝印', 'pl': 'B', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 09:47:06', 'priority': 1 },
|
||||||
{ 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:17:27', 'priority': 1 },
|
{ 'wsName': '包装', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 06:17:27', 'priority': 1 },
|
||||||
{ 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 00:29:26', 'priority': 2 },
|
{ 'wsName': '原片', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 00:29:26', 'priority': 2 },
|
||||||
{ 'wsName': '清洗', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:14:27', 'priority': 2 },
|
{ 'wsName': '清洗', 'pl': 'B', 'content': '抗压抗冲击测试', 'team': '白班', 'time': '2022-11-18 10:14:27', 'priority': 2 },
|
||||||
{ 'wsName': '包装', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:50:39', 'priority': 3 },
|
{ 'wsName': '包装', 'pl': 'A', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 13:50:39', 'priority': 3 },
|
||||||
{ 'wsName': ' 物流仓储', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:37:44', 'priority': 2 },
|
{ 'wsName': ' 物流仓储', 'pl': 'A', 'content': '抗压抗冲击测试', 'team': '夜班', 'time': '2022-11-18 09:37:44', 'priority': 2 },
|
||||||
{ 'wsName': '清洗', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 03:53:47', 'priority': 2 },
|
{ 'wsName': '清洗', 'pl': 'A', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 03:53:47', 'priority': 2 },
|
||||||
{ 'wsName': '原片', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 08:01:02', 'priority': 3 }]
|
{ 'wsName': '原片', 'pl': 'A', 'content': '透光率', 'team': '白班', 'time': '2022-11-18 08:01:02', 'priority': 3 }]
|
||||||
|
|
||||||
/** 质量异常报警 */
|
/** 质量异常报警 */
|
||||||
|
|
||||||
@ -115,22 +115,22 @@ export const qualityExceptionTableProps = [
|
|||||||
|
|
||||||
export const qualityExceptionDatalist = [
|
export const qualityExceptionDatalist = [
|
||||||
{ 'pl': 'A', 'eq': '打孔', 'wsName': '打孔', 'content': '完整性', 'time': '2022-11-18 11:30:01', 'priority': 3 },
|
{ 'pl': 'A', 'eq': '打孔', 'wsName': '打孔', 'content': '完整性', 'time': '2022-11-18 11:30:01', 'priority': 3 },
|
||||||
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透过率', 'time': '2022-11-18 07:20:35', 'priority': 1 },
|
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透光率', 'time': '2022-11-18 07:20:35', 'priority': 1 },
|
||||||
{ 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透过率', 'time': '2022-11-18 09:16:21', 'priority': 2 },
|
{ 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透光率', 'time': '2022-11-18 09:16:21', 'priority': 2 },
|
||||||
{ 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 04:57:10', 'priority': 3 },
|
{ 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透光率', 'time': '2022-11-18 04:57:10', 'priority': 3 },
|
||||||
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 08:26:43', 'priority': 2 },
|
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 08:26:43', 'priority': 2 },
|
||||||
{ 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 04:09:39', 'priority': 2 },
|
{ 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 04:09:39', 'priority': 2 },
|
||||||
{ 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透过率', 'time': '2022-11-18 01:06:05', 'priority': 2 },
|
{ 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透光率', 'time': '2022-11-18 01:06:05', 'priority': 2 },
|
||||||
{ 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 05:06:36', 'priority': 1 },
|
{ 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透光率', 'time': '2022-11-18 05:06:36', 'priority': 1 },
|
||||||
{ 'pl': 'B', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 07:11:45', 'priority': 3 },
|
{ 'pl': 'B', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 07:11:45', 'priority': 3 },
|
||||||
{ 'pl': 'A', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 11:40:37', 'priority': 3 },
|
{ 'pl': 'A', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 11:40:37', 'priority': 3 },
|
||||||
{ 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 10:41:54', 'priority': 1 },
|
{ 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 10:41:54', 'priority': 1 },
|
||||||
{ 'pl': 'B', 'eq': '预热', 'wsName': '预热', 'content': '透过率', 'time': '2022-11-18 04:10:00', 'priority': 1 },
|
{ 'pl': 'B', 'eq': '预热', 'wsName': '预热', 'content': '透光率', 'time': '2022-11-18 04:10:00', 'priority': 1 },
|
||||||
{ 'pl': 'B', 'eq': '钢化', 'wsName': '钢化', 'content': '完整性', 'time': '2022-11-18 09:23:40', 'priority': 1 },
|
{ 'pl': 'B', 'eq': '钢化', 'wsName': '钢化', 'content': '完整性', 'time': '2022-11-18 09:23:40', 'priority': 1 },
|
||||||
{ 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透过率', 'time': '2022-11-18 05:28:05', 'priority': 2 },
|
{ 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透光率', 'time': '2022-11-18 05:28:05', 'priority': 2 },
|
||||||
{ 'pl': 'B', 'eq': '上片', 'wsName': '上片', 'content': '完整性', 'time': '2022-11-18 06:24:57', 'priority': 3 },
|
{ 'pl': 'B', 'eq': '上片', 'wsName': '上片', 'content': '完整性', 'time': '2022-11-18 06:24:57', 'priority': 3 },
|
||||||
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 02:48:28', 'priority': 3 },
|
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 02:48:28', 'priority': 3 },
|
||||||
{ 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 13:06:35', 'priority': 1 },
|
{ 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 13:06:35', 'priority': 1 },
|
||||||
{ 'pl': 'B', 'eq': '打孔', 'wsName': '打孔', 'content': '透过率', 'time': '2022-11-18 11:49:59', 'priority': 1 },
|
{ 'pl': 'B', 'eq': '打孔', 'wsName': '打孔', 'content': '透光率', 'time': '2022-11-18 11:49:59', 'priority': 1 },
|
||||||
{ 'pl': 'B', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 12:32:20', 'priority': 2 },
|
{ 'pl': 'B', 'eq': '一镀', 'wsName': '一镀', 'content': '透光率', 'time': '2022-11-18 12:32:20', 'priority': 2 },
|
||||||
{ 'pl': 'B', 'eq': '丝印', 'wsName': '丝印', 'content': '完整性', 'time': '2022-11-18 12:45:49', 'priority': 3 }]
|
{ 'pl': 'B', 'eq': '丝印', 'wsName': '丝印', 'content': '完整性', 'time': '2022-11-18 12:45:49', 'priority': 3 }]
|
||||||
|
Loading…
Reference in New Issue
Block a user