Compare commits

...

7 Commits

Author SHA1 Message Date
lb
fbe6cf41e4 update tooltip for all 2022-11-25 15:43:03 +08:00
lb
ff0bda0dba update 2022-11-25 15:10:35 +08:00
lb
582ac98a52 update 质量tooltip 2022-11-25 14:01:58 +08:00
lb
7f79481a35 update 质量,产线缺陷分析居中一点 2022-11-25 13:13:09 +08:00
lb
7c2aadc19a update 各个tooltip样式 2022-11-25 11:59:54 +08:00
lb
f96854fa29 update 质量tooltip样式 2022-11-25 11:09:24 +08:00
lb
6aa7afb555 update 质量管理数据 2022-11-25 09:25:03 +08:00
9 changed files with 440 additions and 171 deletions

View File

@ -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
} }
] ]
} }

View File

@ -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%'],

View File

@ -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)

View File

@ -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,

View File

@ -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;

View File

@ -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

View File

@ -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',

View File

@ -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)

View File

@ -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 }]