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 = {
show: true,
trigger: 'axis',
// position: [200,10],
// position: ['25%', '25%'],
position: pointer => {
return [pointer[1], 0]
},
axisPointer: {
type: 'line',
axis: 'x',
lineStyle: {
color: '#41888F90',
shadowColor: '#41888F',
shadowBlur: 10,
width: 2
color: '#7BFFFB',
type: 'dotted'
}
},
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 = {
@ -156,7 +177,9 @@ class ChartOption {
data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none'
symbol: 'circle',
symbolSize: 0.2,
showSymbol: false
},
{
name: 'ABC三相电流/a',
@ -169,7 +192,9 @@ class ChartOption {
data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none'
symbol: 'circle',
symbolSize: 0.2,
showSymbol: false
},
{
name: '电缆温度',
@ -182,7 +207,9 @@ class ChartOption {
data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none'
symbol: 'circle',
symbolSize: 0.2,
showSymbol: false
}
]
}

View File

@ -124,6 +124,7 @@ export default {
},
legend: {
selectedMode: false,
top: 0,
bottom: 0,
left: 0,
@ -208,6 +209,7 @@ export default {
series: [
{
silent: true,
name: 'PieForm',
type: 'pie',
center: ['68%', '61%'],

View File

@ -47,9 +47,31 @@ class ChartOption {
fontSize: 12
},
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()
@ -79,7 +101,7 @@ class ChartOption {
type: 'value',
name: '成品率 ',
// min: 'dataMin',
min: 50,
min: 80,
splitNumber: 3,
nameTextStyle: {
color: '#fff9',
@ -105,7 +127,9 @@ class ChartOption {
{
name: 'A',
type: 'line',
symbol: 'none',
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
areaStyle: {
color: {
type: 'linear',
@ -133,7 +157,9 @@ class ChartOption {
{
name: 'B',
type: 'line',
symbol: 'none',
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
areaStyle: {
color: {
type: 'linear',
@ -179,7 +205,7 @@ class ChartOption {
if (key === 'colorStops') newOption[key] = option[key]
else if (
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])
} else newOption[key] = this.optionFilter(option[key], calcSize)

View File

@ -19,7 +19,7 @@ import { Random } from 'mockjs'
class ChartOption {
constructor() {
this.color = ['#1A99FF', '#F0D63C', '#E02094', '#559833']
this.color = ['#1A99FF', '#F0D63C', '#E02094', '#52FFF1']
this.legend = {
top: 28,
@ -47,9 +47,34 @@ class ChartOption {
},
axisPointer: {
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()
@ -136,6 +161,10 @@ class ChartOption {
name: 'A能耗',
type: 'line',
yAxisIndex: 0,
// symbol: 'none',
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
// smooth: true,
emphasis: {
focus: 'series'
@ -143,7 +172,6 @@ class ChartOption {
data: Array(7)
.fill(0)
.map(_ => Random.integer(30, 100)),
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
@ -176,7 +204,10 @@ class ChartOption {
data: Array(7)
.fill(0)
.map(_ => Random.integer(30, 100)),
symbol: 'none',
// symbol: 'none',
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
areaStyle: {
color: {
type: 'linear',
@ -209,7 +240,10 @@ class ChartOption {
data: Array(7)
.fill(0)
.map(_ => Random.integer(30, 100)),
symbol: 'none',
// symbol: 'none',
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
areaStyle: {
color: {
type: 'linear',
@ -242,7 +276,10 @@ class ChartOption {
data: Array(7)
.fill(0)
.map(_ => Random.integer(30, 100)),
symbol: 'none',
// symbol: 'none',
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
areaStyle: {
color: {
type: 'linear',
@ -253,7 +290,7 @@ class ChartOption {
colorStops: [
{
offset: 0,
color: '#55983366' // 0%
color: '#52FFF166' // 0%
},
{
offset: 1,

View File

@ -137,7 +137,7 @@
:class="{ 'pl-select__active': plMode === 'a' }"
@click="
plMode = 'a'
chosenDatalist = quexianDatalist[0]
chosenDatalist = getFaultDataList()
"
>
A
@ -146,7 +146,7 @@
:class="{ 'pl-select__active': plMode === 'b' }"
@click="
plMode = 'b'
chosenDatalist = quexianDatalist[1]
chosenDatalist = getFaultDataList()
"
>
B
@ -157,7 +157,7 @@
:class="{ 'date-select__active': dateMode === 'day' }"
@click="
dateMode = 'day'
chosenDatalist = quexianDatalist[2]
chosenDatalist = getFaultDataList()
"
>
@ -166,7 +166,7 @@
:class="{ 'date-select__active': dateMode === 'month' }"
@click="
dateMode = 'month'
chosenDatalist = quexianDatalist[3]
chosenDatalist = getFaultDataList()
"
>
@ -176,17 +176,63 @@
</techy-analysis-header>
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
<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>
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
<!-- data-period 是指数据是月数据还是日数据 -->
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" :data-period="dateMode" />
</div>
</techy-box>
</div>
<div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
<techy-box class="" style="padding: 0 calc(16px * var(--beilv));">
<productionRateHeader @update-data="obj => { dataUpdateToken = obj.str; dateMode2 = obj.mode }">产品成品率</productionRateHeader>
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<!-- <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%;">
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
</div>
@ -290,36 +336,40 @@ export default {
data() {
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: 3.4, name: '崩边' },
{ value: 4.1, name: '脏污' },
{ value: 2.4, name: '划擦伤' },
{ value: 0.23, name: '崩孔' },
{ value: 0.32, name: '崩孔' },
{ value: 2.14, name: '其他' }
],
[
{ value: 4.17, name: '破片' },
{ value: 3.6, name: '崩边' },
{ value: 4, name: '脏污' },
{ value: 2.2, name: '划擦伤' },
{ value: 0.2, name: '崩孔' },
{ value: 1.9, name: '其他' }
// a
{ value: 184, name: '破片' },
{ value: 110, name: '崩边' },
{ value: 163, name: '脏污' },
{ value: 96, name: '划擦伤' },
{ value: 22, name: '崩孔' },
{ value: 74, name: '其他' }
],
[
{ value: 3.33, name: '破片' },
{ value: 3, name: '崩边' },
{ value: 4.3, name: '脏污' },
{ value: 2.1, name: '划擦伤' },
{ value: 1, name: '崩孔' },
{ value: 1.8, name: '其他' }
],
[
{ value: 2.7, name: '破片' },
{ value: 1.56, name: '崩边' },
{ value: 2.3, name: '脏污' },
{ value: 1.2, name: '划擦伤' },
{ value: 0.23, name: '崩孔' },
{ value: 2, name: '其他' }
// b
{ value: 172, name: '破片' },
{ value: 122, name: '崩边' },
{ value: 162, name: '脏污' },
{ value: 82, name: '划擦伤' },
{ value: 15, name: '崩孔' },
{ value: 74, name: '其他' }
]
]
@ -327,7 +377,7 @@ export default {
dataUpdateToken: 'xx-token',
plMode: 'a',
dateMode: 'month',
dateMode2: 'month',
dateMode2: 'day',
qualityTableProps,
qualityDatalist,
qualityExceptionDatalist,
@ -385,7 +435,10 @@ export default {
}
},
computed: {
...mapGetters(['sidebar'])
...mapGetters(['sidebar']),
unit() {
return this.dateMode === 'month' ? '单位: 千片' : '单位: 片'
}
},
methods: {
changeFullScreen() {
@ -397,6 +450,13 @@ export default {
return false
}
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));
}
.fake-legend{
cursor: unset;
}
.fake-legend span {
background: none;
cursor: none;
color: #DFF1FE;
}
/* @media all and (max-width: 1680px) {
.production-rate {
text-align: center;

View File

@ -17,6 +17,10 @@ export default {
dataList: {
type: Array,
required: true
},
dataPeriod: {
type: String,
default: 'month'
}
},
data() {
@ -109,7 +113,7 @@ export default {
title: {
textAlign: 'center',
textVerticalAlign: 'middle',
left: '69%',
left: '65%',
top: '46%',
text: '',
textStyle: {
@ -125,6 +129,7 @@ export default {
}
},
legend: {
selectedMode: false,
top: '12%',
bottom: 0,
left: 0,
@ -209,7 +214,8 @@ export default {
{
name: 'PieForm',
type: 'pie',
center: ['70%', '56%'],
silent: true,
center: ['66%', '56%'],
radius: ['45%', '65%'],
avoidLabelOverlap: true,
label: {
@ -305,17 +311,22 @@ export default {
const fs13 = this.calcFontsize(13 /** px*/)
const fs18 = this.calcFontsize(18 /** px*/)
const fs20 = this.calcFontsize(20 /** px*/)
const legendTextFixWidth = this.calcFontsize(56 /** px*/)
const legnedTop = this.calcFontsize(64 /** px*/)
const legendTextFixWidth = this.calcFontsize(48 /** px*/)
const legnedTop = this.calcFontsize(72 /** px*/)
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.subtextStyle.fontSize = fs13
// this.configs.legend.top = legendTopRate + '%'
this.configs.legend.top = legnedTop
this.configs.legend.left = 0 + '%'
this.configs.legend.left = 3 + '%'
this.configs.legend.itemGap = fs8
this.configs.legend.itemWidth = fs8

View File

@ -162,6 +162,39 @@ export default {
top: 72,
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: {
type: 'category',
axisTick: {
@ -176,20 +209,20 @@ export default {
color: '#fff8',
fontSize: 12
},
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'],
axisPointer: {
show: true,
type: 'shadow',
label: {
show: true,
formatter: params => {
let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
let v = [`<${info_arr[0].name}>详细数据: \n`]
info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
return v.join('\n')
}
}
}
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
// axisPointer: {
// show: true,
// type: 'shadow',
// label: {
// show: true,
// formatter: params => {
// let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
// let v = [`<${info_arr[0].name}>: \n`]
// info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
// return v.join('\n')
// }
// }
// }
},
yAxis: {
type: 'value',

View File

@ -5,24 +5,25 @@
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs'
class ChartOption {
constructor() {
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
// this.legend = {
// top: 11,
// right: 32,
// itemWidth: 8,
// itemHeight: 8,
// textStyle: {
// color: '#fff9',
// fontSize: 10
// }
// }
this.legend = {
top: 14,
right: 22,
itemWidth: 6,
itemHeight: 8,
textStyle: {
color: '#DFF1FECC',
fontSize: 12
}
}
this.grid = {
top: 64,
top: 72,
left: 12,
right: 28,
bottom: 20,
@ -31,15 +32,32 @@ class ChartOption {
this.tooltip = {
trigger: 'axis',
padding: 10,
backgroundColor: 'rgba(13, 29, 53, 0.8)',
extraCssText: 'width: 180px !important; ',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
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.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 = {
type: 'category',
boundaryGap: false,
@ -58,7 +76,9 @@ class ChartOption {
},
data:
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: '成品率 ',
type: 'value',
min: 'dataMin',
min: '80',
splitNumber: 4,
nameGap: 16,
nameTextStyle: {
@ -105,7 +125,11 @@ class ChartOption {
{
name: 'A1下片机',
type: 'line',
symbol: 'none',
// symbol: 'none',
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
// smooth: true,
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
@ -128,32 +152,26 @@ class ChartOption {
}
},
emphasis: {
focus: 'series'
focus: 'series',
scale: 1.2
},
data:
this.mode === 'month'
? Array(30)
.fill(1)
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
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
})
.map(_ => Random.integer(94, 99))
: Array(7)
.fill(1)
.map(_ => Random.integer(94, 99))
},
{
name: '磨边机',
type: 'line',
symbol: 'none',
// symbol: 'none',
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
// smooth: true,
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
@ -182,20 +200,10 @@ class ChartOption {
this.mode === 'month'
? Array(30)
.fill(1)
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
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
})
.map(_ => Random.integer(94, 99))
: Array(7)
.fill(1)
.map(_ => Random.integer(94, 99))
}
]
}
@ -267,31 +275,87 @@ export default {
methods: {
refreshData() {
// update xaxis
let today = new Date()
this.configs.xAxis.data =
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
this.configs.series.forEach(item => {
item.data =
this.mode === 'month'
? Array(30)
.fill(1)
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
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
})
.map(_ => Random.integer(94, 99))
: Array(7)
.fill(1)
.map(_ => Random.integer(94, 99))
})
if (this.chart) this.chart.setOption(this.configs)

View File

@ -27,7 +27,7 @@ const PriorityComponent = {
}
},
mounted() {
console.log(this.injectData.priority)
// console.log(this.injectData.priority)
},
methods: {},
render: function (h) {
@ -35,38 +35,38 @@ const PriorityComponent = {
}
}
console.log('is component?', PriorityComponent)
// console.log('is component?', PriorityComponent)
export const qualityTableProps = [
{ 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: '班组', prop: 'team', align: 'center', 'min-width': 45 },
{ 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 = [
{ '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': '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 00:03:54', 'priority': 3 },
{ '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': '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 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 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 06:17:27', 'priority': 1 },
{ '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': '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 03:53:47', 'priority': 2 },
{ 'wsName': '原片', 'pl': 'A', 'content': '透率', 'team': '白班', 'time': '2022-11-18 08:01:02', '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': '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 00:03:54', 'priority': 3 },
{ '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': '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 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 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 06:17:27', 'priority': 1 },
{ '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': '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 03:53:47', 'priority': 2 },
{ 'wsName': '原片', 'pl': 'A', 'content': '透率', 'team': '白班', 'time': '2022-11-18 08:01:02', 'priority': 3 }]
/** 质量异常报警 */
@ -115,22 +115,22 @@ export const qualityExceptionTableProps = [
export const qualityExceptionDatalist = [
{ '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 09:16:21', 'priority': 2 },
{ 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透率', 'time': '2022-11-18 04:57:10', '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 09:16:21', 'priority': 2 },
{ '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 04:09:39', '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': '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': '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 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': '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 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 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 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:45:49', 'priority': 3 }]