lb #17
@ -5,6 +5,245 @@
|
|||||||
<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 {
|
||||||
|
constructor() {
|
||||||
|
this.color = ['#E02094', '#F0D63C', '#1A99FF']
|
||||||
|
|
||||||
|
this.legend = {
|
||||||
|
top: 11,
|
||||||
|
right: 32,
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.grid = {
|
||||||
|
top: 36,
|
||||||
|
left: 64,
|
||||||
|
bottom: 36
|
||||||
|
}
|
||||||
|
|
||||||
|
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: '#7BFFFB',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 = {
|
||||||
|
type: 'category',
|
||||||
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 12,
|
||||||
|
margin: 10
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.yAxis = [
|
||||||
|
{
|
||||||
|
name: '电流/A ',
|
||||||
|
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 4,
|
||||||
|
onZero: true,
|
||||||
|
position: 'left',
|
||||||
|
offset: 28,
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#5982B2',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff1',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 电压/V ',
|
||||||
|
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 4,
|
||||||
|
axisTick: { show: false },
|
||||||
|
onZero: true,
|
||||||
|
position: 'left',
|
||||||
|
offset: 0,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#5982B2',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff1',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: ' 温度',
|
||||||
|
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 },
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff9',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 4,
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff1',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
this.series = [
|
||||||
|
{
|
||||||
|
name: 'ABC三相电压/v',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 0,
|
||||||
|
// smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: Array(12)
|
||||||
|
.fill(1)
|
||||||
|
.map(_ => Random.integer(30, 100)),
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ABC三相电流/a',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
// smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: Array(12)
|
||||||
|
.fill(1)
|
||||||
|
.map(_ => Random.integer(30, 100)),
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '电缆温度',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 2,
|
||||||
|
// smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: Array(12)
|
||||||
|
.fill(1)
|
||||||
|
.map(_ => Random.integer(30, 100)),
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
get option() {
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
optionFilter(option, calcSize = () => {} /** callback */) {
|
||||||
|
let newOption
|
||||||
|
if (Array.isArray(option)) {
|
||||||
|
newOption = []
|
||||||
|
option.forEach(item => {
|
||||||
|
newOption.push(this.optionFilter(item, calcSize))
|
||||||
|
})
|
||||||
|
return newOption
|
||||||
|
} else if (typeof option === 'object') {
|
||||||
|
newOption = {}
|
||||||
|
for (const key in option) {
|
||||||
|
if (key === 'colorStops') newOption[key] = option[key]
|
||||||
|
else if (
|
||||||
|
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||||||
|
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
||||||
|
) {
|
||||||
|
newOption[key] = calcSize(option[key])
|
||||||
|
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||||||
|
}
|
||||||
|
return newOption
|
||||||
|
} else {
|
||||||
|
newOption = calcSize(option)
|
||||||
|
return option
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DianLineChart',
|
name: 'DianLineChart',
|
||||||
@ -15,218 +254,13 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'default-dian-id'
|
default: 'default-dian-line-chart'
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-title'
|
|
||||||
},
|
|
||||||
xData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
seriesData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const colors = ['#E02094', '#F0D63C', '#1A99FF']
|
|
||||||
|
|
||||||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
|
|
||||||
let data = [
|
|
||||||
// 温度走势
|
|
||||||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 30) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
}),
|
|
||||||
// 电流走势
|
|
||||||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 30) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
}),
|
|
||||||
// 电压走势
|
|
||||||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 30) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
]
|
|
||||||
let wendu = data[0]
|
|
||||||
let dianliu = data[1]
|
|
||||||
let dianya = data[2]
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: null
|
||||||
color: colors,
|
|
||||||
legend: {
|
|
||||||
top: 4,
|
|
||||||
right: 50,
|
|
||||||
itemWidth: 8,
|
|
||||||
itemHeight: 8,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff9',
|
|
||||||
fontSize: 8
|
|
||||||
}
|
|
||||||
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 32,
|
|
||||||
left: 64,
|
|
||||||
bottom: 28
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'line',
|
|
||||||
axis: 'x'
|
|
||||||
},
|
|
||||||
extraCssText: 'width: 152px !important; height: 100px !important;'
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff9'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff3'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
name: '电流/A',
|
|
||||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
|
||||||
type: 'value',
|
|
||||||
splitNumber: 3,
|
|
||||||
onZero: true,
|
|
||||||
position: 'left',
|
|
||||||
offset: 40,
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#5982B2',
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff9',
|
|
||||||
fontSize: 10
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff1',
|
|
||||||
type: 'dotted'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '电压/V',
|
|
||||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
|
||||||
type: 'value',
|
|
||||||
splitNumber: 3,
|
|
||||||
axisTick: { show: false },
|
|
||||||
onZero: true,
|
|
||||||
position: 'left',
|
|
||||||
offset: 0,
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#5982B2',
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff9',
|
|
||||||
fontSize: 10
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff1',
|
|
||||||
type: 'dotted'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '温度',
|
|
||||||
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 9 },
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff9',
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: 'value',
|
|
||||||
splitNumber: 3,
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff1',
|
|
||||||
type: 'dotted'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff9',
|
|
||||||
fontSize: 10
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: 'ABC三相电压/v',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 0,
|
|
||||||
// smooth: true,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: dianliu,
|
|
||||||
symbol: 'none'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'ABC三相电流/a',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 1,
|
|
||||||
// smooth: true,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: dianya,
|
|
||||||
symbol: 'none'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '电缆温度',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 2,
|
|
||||||
// smooth: true,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: wendu,
|
|
||||||
symbol: 'none'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -244,14 +278,23 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||||
this.chart.setOption(this.option)
|
this.setChartOption()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.chart) this.chart.dispose()
|
if (this.chart) this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {}
|
methods: {
|
||||||
|
calcSize(num) {
|
||||||
|
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||||
|
return num * beilv
|
||||||
|
},
|
||||||
|
setChartOption() {
|
||||||
|
let chartOption = new ChartOption()
|
||||||
|
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
<div id="techy-line-chart" ref="techy-line-chart" class="techy-chart" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -13,22 +13,7 @@ export default {
|
|||||||
inject: ['resizeStatus'],
|
inject: ['resizeStatus'],
|
||||||
/** End Fn.1 */
|
/** End Fn.1 */
|
||||||
props: {
|
props: {
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-fadian-id'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-title'
|
|
||||||
},
|
|
||||||
xData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
seriesData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -46,20 +31,20 @@ export default {
|
|||||||
color: ['#E02094', '#F0D63C', '#1A99FF'],
|
color: ['#E02094', '#F0D63C', '#1A99FF'],
|
||||||
grid: {
|
grid: {
|
||||||
top: '30%',
|
top: '30%',
|
||||||
left: 0,
|
left: '120%',
|
||||||
right: '5%',
|
right: '5%',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
show: true,
|
// show: true,
|
||||||
trigger: 'axis',
|
// trigger: 'axis',
|
||||||
axisPointer: {
|
// axisPointer: {
|
||||||
type: 'line',
|
// type: 'line',
|
||||||
axis: 'x'
|
// axis: 'x'
|
||||||
},
|
// },
|
||||||
extraCssText: 'width: 152px !important; height: 100px !important;'
|
// extraCssText: 'position: absolute; width: 152px !important; height: 100px !important;'
|
||||||
},
|
// },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
@ -71,7 +56,7 @@ export default {
|
|||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 8,
|
fontSize: 10,
|
||||||
color: '#fffa'
|
color: '#fffa'
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
@ -92,7 +77,7 @@ export default {
|
|||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 8,
|
fontSize: 10,
|
||||||
color: '#fffa'
|
color: '#fffa'
|
||||||
// formatter: '{value} %'
|
// formatter: '{value} %'
|
||||||
},
|
},
|
||||||
|
|||||||
@ -53,31 +53,31 @@ const PriorityComponent = {
|
|||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 120 },
|
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 120 },
|
||||||
{ prop: 'pl', label: '所属产线', align: 'center', 'min-width': 100 },
|
// { prop: 'pl', label: '所属产线', align: 'center', 'min-width': 100 },
|
||||||
{ prop: 'warningLevel', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
|
{ prop: 'warningLevel', label: '提示等级', align: 'center', 'min-width': 70, subcomponent: PriorityComponent },
|
||||||
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
|
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
|
||||||
]
|
]
|
||||||
const tableData = [
|
const tableData = [
|
||||||
{ eqName: '钢化', pl: 'A', priority: 1, checkContent: '表面检测光源和相机的卫生' },
|
{ eqName: 'A1钢化', pl: 'A', priority: 1, checkContent: '表面检测光源和相机的卫生' },
|
||||||
{ eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
// { eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
||||||
{ eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
|
{ eqName: 'B2钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
|
||||||
{ eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
|
{ eqName: 'B1冷却机', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
|
||||||
{ eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
// { eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
||||||
{ eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
|
{ eqName: 'B1钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
|
||||||
{ eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
|
{ eqName: 'B2磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
|
||||||
{ eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
|
{ eqName: 'B1打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
|
||||||
{ eqName: '磨边后清洗机', pl: 'B', priority: 1, checkContent: '边角检测光源和相机的卫生' },
|
{ eqName: 'B1磨边后清洗机', pl: 'B', priority: 1, checkContent: '边角检测光源和相机的卫生' },
|
||||||
{ eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
// { eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
||||||
{ eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
|
// { eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
|
||||||
{ eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
|
// { eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
|
||||||
{ eqName: '钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' },
|
{ eqName: 'B1钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' },
|
||||||
{ eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
|
// { eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
|
||||||
{ eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
|
{ eqName: 'A1下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
|
||||||
{ eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
|
{ eqName: 'A2钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
|
||||||
{ eqName: '预热', pl: 'B', priority: 3, checkContent: '水冷机内水量充足并且清洁' },
|
// { eqName: '预热', pl: 'B', priority: 3, checkContent: '水冷机内水量充足并且清洁' },
|
||||||
{ eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
|
{ eqName: 'A3磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
|
||||||
{ eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
|
{ eqName: 'B3上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
|
||||||
{ eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
|
// { eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
|
||||||
]
|
]
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -100,7 +100,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.left-content-equipment-check {
|
.left-content-equipment-check {
|
||||||
height: calc(100% - 32px);
|
height: calc(100% - calc(32px * var(--beilv)));
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: calc(100vmin / 1920 * 36);
|
gap: calc(100vmin / 1920 * 36);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@ -27,7 +27,7 @@ export default {
|
|||||||
.left-content-monitoring {
|
.left-content-monitoring {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 32px);
|
height: calc(100% - calc(32px * var(--beilv)));
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: calc(100vw / 1920 * 16);
|
gap: calc(100vw / 1920 * 16);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,24 +15,16 @@ const ProcessCircle = {
|
|||||||
default: () => ({})
|
default: () => ({})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
console.log('finished', this.injectData.finished)
|
|
||||||
},
|
|
||||||
methods: {},
|
methods: {},
|
||||||
render: function(h) {
|
render: function(h) {
|
||||||
return h('el-progress', {
|
return h('el-progress', {
|
||||||
class: {
|
|
||||||
'lb-progress-bar': true
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
type: 'circle',
|
type: 'circle',
|
||||||
percentage: this.injectData.finished,
|
percentage: this.injectData.finished,
|
||||||
width: 14,
|
width: 14,
|
||||||
'stroke-width': 2,
|
'stroke-width': 2,
|
||||||
color: '#47FF27'
|
color: '#47FF27',
|
||||||
},
|
'define-back-color': '#ffffff' // 背景色, 该选项不起作用，可能和 element ui 版本相关
|
||||||
style: {
|
|
||||||
color: 'blue'
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -99,4 +91,8 @@ export default {
|
|||||||
left: calc(-2px * var(--beilv));
|
left: calc(-2px * var(--beilv));
|
||||||
color: #ffffffb3 !important;
|
color: #ffffffb3 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left-content-order >>> .el-progress-circle__track {
|
||||||
|
stroke: #283851;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -73,8 +73,8 @@
|
|||||||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
|
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
|
||||||
<span>电</span>
|
<span>电</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 100%; flex: 1;">
|
<div style="height: 100%; flex: 1; overflow: hidden">
|
||||||
<DianChart />
|
<DianChart id="dian" key="dian" />
|
||||||
</div>
|
</div>
|
||||||
</TechyBox>
|
</TechyBox>
|
||||||
</div>
|
</div>
|
||||||
@ -85,9 +85,9 @@
|
|||||||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
||||||
<span>发电</span>
|
<span>发电</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 100%; flex: 1; ">
|
<div style="height: 100%; flex: 1; overflow: hidden">
|
||||||
<!-- <FadianChart /> -->
|
<!-- <FadianChart /> -->
|
||||||
<DianChart />
|
<DianChart id="fa-dian" key="fa-dian" />
|
||||||
</div>
|
</div>
|
||||||
</TechyBox>
|
</TechyBox>
|
||||||
</div>
|
</div>
|
||||||
@ -116,7 +116,7 @@ export default {
|
|||||||
.public-consume__inner {
|
.public-consume__inner {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: calc(100% - 32px);
|
height: calc(100% - calc(32px * var(--beilv)));
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -161,7 +161,7 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-size: calc(12px * var(--beilv));
|
font-size: calc(12px * var(--beilv));
|
||||||
color: #fff9;
|
color: #fff9;
|
||||||
height: 10px;
|
height: calc(48px * var(--beilv));
|
||||||
flex: 1 1;
|
flex: 1 1;
|
||||||
gap: calc(4px * var(--beilv));
|
gap: calc(4px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|||||||
@ -53,45 +53,38 @@ const PriorityComponent = {
|
|||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
|
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
|
||||||
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
|
// { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
|
||||||
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 90, subcomponent: PriorityComponent },
|
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 70, subcomponent: PriorityComponent },
|
||||||
{ prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
|
{ prop: 'content', label: '报警内容', align: 'center', 'min-width': 120 },
|
||||||
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
|
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
|
||||||
]
|
]
|
||||||
|
|
||||||
const tableData = [
|
const tableData = [
|
||||||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 1, duration: '30 min' },
|
{ eqName: 'B1磨边', plName: 'B', content: '磨轮过载', priority: 1, duration: '30 min' },
|
||||||
{ eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 3, duration: '1 min' },
|
{ eqName: 'A2丝印', plName: 'A', content: '网版推出异常', priority: 2, duration: '57 min' },
|
||||||
{ eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
|
{ eqName: 'B1打孔后清洗', plName: 'B', content: '毛刷过载', priority: 3, duration: '17 min' },
|
||||||
{ eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
|
{ eqName: 'B1固化', plName: 'B', content: '传动变频器故障', priority: 2, duration: '22 min' },
|
||||||
{ eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
|
{ eqName: 'A钢化', plName: 'A', content: '加热炉体超温报警', priority: 2, duration: '23 min' },
|
||||||
{ eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
|
{ eqName: 'B2磨边', plName: 'B', content: '磨轮过载', priority: 3, duration: '6 min' },
|
||||||
{ eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 2, duration: '23 min' },
|
{ eqName: 'B1磨边', plName: 'B', content: '磨轮过载', priority: 2, duration: '23 min' },
|
||||||
{ eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
|
|
||||||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
|
|
||||||
{
|
{
|
||||||
eqName: '磨边后清洗机',
|
eqName: 'A2磨边后清洗',
|
||||||
plName: 'A',
|
plName: 'A',
|
||||||
content: '马华部地般平感为转出形就特务把提存。',
|
content: '进料检测异常',
|
||||||
priority: 2,
|
priority: 2,
|
||||||
duration: '18 min'
|
duration: '18 min'
|
||||||
},
|
},
|
||||||
{ eqName: '预热', plName: 'B', content: '米织类劳约相查个而美五千老。', priority: 3, duration: '24 min' },
|
{ eqName: 'A3打孔后清洗', plName: 'A', content: '进料检测异常', priority: 1, duration: '48 min' },
|
||||||
{ eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' },
|
{ eqName: 'A3磨边', plName: 'A', content: '磨轮过载', priority: 3, duration: '29 min' },
|
||||||
{ eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 3, duration: '29 min' },
|
{ eqName: 'A2钢化后清洗', plName: 'A', content: '进料检测异常', priority: 1, duration: '47 min' },
|
||||||
{ eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 1, duration: '47 min' },
|
{ eqName: 'A2下片', plName: 'A', content: '磨轮过载', priority: 2, duration: '49 min' },
|
||||||
{ eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
|
|
||||||
{ eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
|
|
||||||
{ eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },
|
|
||||||
{
|
{
|
||||||
eqName: '钢后清洗机',
|
eqName: 'A3钢化后清洗',
|
||||||
plName: 'A',
|
plName: 'A',
|
||||||
content: '就门务程过志率难每维原就快没省为满候。',
|
content: '输送变频报警',
|
||||||
priority: 2,
|
priority: 2,
|
||||||
duration: '33 min'
|
duration: '33 min'
|
||||||
},
|
}
|
||||||
{ eqName: '预热', plName: 'A', content: '金单能信较生七族接处人门例图取之。', priority: 2, duration: '34 min' },
|
|
||||||
{ eqName: '预热', plName: 'B', content: '会带给山气己进相构位节采调而音集。', priority: 3, duration: '6 min' }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -114,7 +107,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.right-content-alert {
|
.right-content-alert {
|
||||||
height: calc(100% - 32px);
|
height: calc(100% - calc(32px * var(--beilv)));
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: calc(100vw / 1920 * 16);
|
gap: calc(100vw / 1920 * 16);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@ -106,8 +106,8 @@ export default {
|
|||||||
configs: {
|
configs: {
|
||||||
title: {
|
title: {
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
left: '64%',
|
left: '67%',
|
||||||
top: '48%',
|
top: '50%',
|
||||||
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -124,6 +124,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
|
selectedMode: false,
|
||||||
top: 0,
|
top: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
@ -208,9 +209,10 @@ export default {
|
|||||||
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
silent: true,
|
||||||
name: 'PieForm',
|
name: 'PieForm',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
center: ['65%', '60%'],
|
center: ['68%', '61%'],
|
||||||
radius: ['42%', '60%'],
|
radius: ['42%', '60%'],
|
||||||
avoidLabelOverlap: true,
|
avoidLabelOverlap: true,
|
||||||
label: {
|
label: {
|
||||||
@ -301,7 +303,8 @@ export default {
|
|||||||
this.configs.title.textStyle.fontSize = titleSize
|
this.configs.title.textStyle.fontSize = titleSize
|
||||||
this.configs.title.subtextStyle.fontSize = subtitleSize
|
this.configs.title.subtextStyle.fontSize = subtitleSize
|
||||||
|
|
||||||
this.configs.legend.top = '24%'
|
this.configs.legend.top = '26%'
|
||||||
|
this.configs.legend.left = fs8
|
||||||
this.configs.legend.itemGap = fs8
|
this.configs.legend.itemGap = fs8
|
||||||
this.configs.legend.itemWidth = fs8
|
this.configs.legend.itemWidth = fs8
|
||||||
|
|
||||||
@ -325,11 +328,11 @@ export default {
|
|||||||
this.configs.legend.textStyle.rich.g.height = fs8
|
this.configs.legend.textStyle.rich.g.height = fs8
|
||||||
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
||||||
|
|
||||||
this.configs.series[0].label.rich.first.fontSize = fs12
|
this.configs.series[0].label.rich.first.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.second.fontSize = fs12
|
this.configs.series[0].label.rich.second.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.third.fontSize = fs12
|
this.configs.series[0].label.rich.third.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.fourth.fontSize = fs12
|
this.configs.series[0].label.rich.fourth.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.fifth.fontSize = fs12
|
this.configs.series[0].label.rich.fifth.fontSize = fs10
|
||||||
|
|
||||||
this.chart.setOption(this.configs)
|
this.chart.setOption(this.configs)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,276 +1,253 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
|
<div ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<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 {
|
||||||
|
constructor() {
|
||||||
|
// const wenduData = Array(12)
|
||||||
|
// .fill(1)
|
||||||
|
// .map(_ => Random.integer(30, 100))
|
||||||
|
// const dianyaData = Array(12)
|
||||||
|
// .fill(1)
|
||||||
|
// .map(_ => Random.integer(30, 100))
|
||||||
|
// const dianliuData = Array(12)
|
||||||
|
// .fill(1)
|
||||||
|
// .map(_ => Random.integer(30, 100))
|
||||||
|
|
||||||
|
this.color = ['#1A99FF', '#E02094', '#F0D63C']
|
||||||
|
|
||||||
|
this.legend = {
|
||||||
|
top: 24,
|
||||||
|
right: 40,
|
||||||
|
itemWidth: 18,
|
||||||
|
itemHeight: 12,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fffc'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.grid = {
|
||||||
|
top: 72,
|
||||||
|
left: 26,
|
||||||
|
right: 24,
|
||||||
|
bottom: 16,
|
||||||
|
containLabel: true
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tooltip = {
|
||||||
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7BFFFB',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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()
|
||||||
|
this.xAxis = {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
data: Array(7)
|
||||||
|
.fill(0)
|
||||||
|
.map((_, idx) => {
|
||||||
|
return d.getMonth() + 1 + '-' + (d.getDate() + idx)
|
||||||
|
}),
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fffa'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.yAxis = {
|
||||||
|
type: 'value',
|
||||||
|
name: '成品率 ',
|
||||||
|
// min: 'dataMin',
|
||||||
|
min: 80,
|
||||||
|
splitNumber: 3,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fffa',
|
||||||
|
formatter: '{value} %'
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.series = [
|
||||||
|
{
|
||||||
|
name: 'A',
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#59CBE866' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: Array(7)
|
||||||
|
.fill(0)
|
||||||
|
.map(_ => Random.integer(93, 98))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'B',
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#E93CAC66' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: Array(7)
|
||||||
|
.fill(0)
|
||||||
|
.map(_ => Random.integer(93, 98))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
get option() {
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
optionFilter(option, calcSize = () => {} /** callback */) {
|
||||||
|
let newOption
|
||||||
|
if (Array.isArray(option)) {
|
||||||
|
newOption = []
|
||||||
|
option.forEach(item => {
|
||||||
|
newOption.push(this.optionFilter(item, calcSize))
|
||||||
|
})
|
||||||
|
return newOption
|
||||||
|
} else if (typeof option === 'object') {
|
||||||
|
newOption = {}
|
||||||
|
for (const key in option) {
|
||||||
|
if (key === 'colorStops') newOption[key] = option[key]
|
||||||
|
else if (
|
||||||
|
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||||||
|
['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)
|
||||||
|
}
|
||||||
|
return newOption
|
||||||
|
} else {
|
||||||
|
newOption = calcSize(option)
|
||||||
|
return option
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ProductRateLineChart',
|
name: 'ProductRateLineChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
props: {
|
props: {},
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-id'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-title'
|
|
||||||
},
|
|
||||||
xData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
seriesData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: null
|
||||||
color: ['#59CBE8', '#FF7345', '#E93CAC', '#9452FF', '#6A6E87', '#52FFF1'],
|
|
||||||
grid: {
|
|
||||||
top: '40%',
|
|
||||||
left: '5%',
|
|
||||||
right: '6%',
|
|
||||||
bottom: '10%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross'
|
|
||||||
},
|
|
||||||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
width: '72%',
|
|
||||||
top: '20%',
|
|
||||||
right: '6%',
|
|
||||||
itemWidth: 12,
|
|
||||||
itemHeight: 8,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fffc'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
||||||
data: Array(12)
|
|
||||||
.fill(0)
|
|
||||||
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 10,
|
|
||||||
color: '#fffa'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff3'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '成品率 ',
|
|
||||||
min: 'dataMin',
|
|
||||||
splitNumber: 3,
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#fffc',
|
|
||||||
align: 'right',
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
fontSize: 12
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 11,
|
|
||||||
color: '#fffa',
|
|
||||||
formatter: '{value} %'
|
|
||||||
},
|
|
||||||
axisTick: { show: false },
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff3'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: 'A',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#59CBE866' // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'transparent' // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
global: false // 缺省为 false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: Array(12)
|
|
||||||
.fill(0)
|
|
||||||
.map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 80) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'B',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#E93CAC66' // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'transparent' // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
global: false // 缺省为 false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: Array(12)
|
|
||||||
.fill(0)
|
|
||||||
.map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 80) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// {
|
|
||||||
// name: '产线3',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#FF734566' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// data: Array(12)
|
|
||||||
// .fill(0)
|
|
||||||
// .map(_ => Math.floor(Math.random() * 100))
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '产线4',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#9452FF66' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// data: Array(12)
|
|
||||||
// .fill(0)
|
|
||||||
// .map(_ => Math.floor(Math.random() * 100))
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '产线5',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#6A6E8766' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// data: Array(12)
|
|
||||||
// .fill(0)
|
|
||||||
// .map(_ => Math.floor(Math.random() * 100))
|
|
||||||
// }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||||
this.chart.setOption(this.option)
|
this.setChartOption()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.chart) this.chart.dispose()
|
if (this.chart) this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {}
|
methods: {
|
||||||
|
calcSize(num) {
|
||||||
|
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||||
|
return num * beilv
|
||||||
|
},
|
||||||
|
setChartOption() {
|
||||||
|
let chartOption = new ChartOption()
|
||||||
|
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -26,16 +26,16 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
datalist: [
|
datalist: [
|
||||||
{ name: '热端', value: 2023233, color: '#0b88ff' },
|
{ name: '热端', value: 66, color: '#0b88ff' },
|
||||||
{ name: '丝印', value: 2023233, color: '#0bffa6' },
|
{ name: '丝印', value: 93, color: '#0bffa6' },
|
||||||
{ name: '原片', value: 20, color: '#0bffa6' },
|
{ name: '原片', value: 121, color: '#0bffa6' },
|
||||||
{ name: '钢化', value: 20, color: '#e3ff0b' },
|
{ name: '钢化', value: 2, color: '#e3ff0b' },
|
||||||
{ name: '上片磨边', value: 20, color: '#e3ff0b' },
|
{ name: '上片磨边', value: 211, color: '#e3ff0b' },
|
||||||
{ name: '下片铺纸', value: 202324, color: '#950bff' },
|
{ name: '下片铺纸', value: 27, color: '#950bff' },
|
||||||
{ name: '镀膜', value: 20, color: '#950bff' },
|
{ name: '镀膜', value: 44, color: '#950bff' },
|
||||||
{ name: '物流仓储', value: 202324, color: '#ff7d0b' },
|
{ name: '物流仓储', value: 3, color: '#ff7d0b' },
|
||||||
{ name: '清洗', value: 20, color: '#0bffa6' },
|
{ name: '清洗', value: 2, color: '#0bffa6' },
|
||||||
{ name: '包装', value: 2, color: '#ff0bc2' }
|
{ name: '包装', value: 22, color: '#ff0bc2' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -47,7 +47,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.right-content-quality-analysis {
|
.right-content-quality-analysis {
|
||||||
height: calc(100% - 32px);
|
height: calc(100% - calc(32px * var(--beilv)));
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: auto; /** 右边会有多的padding给滑道 */
|
overflow-y: auto; /** 右边会有多的padding给滑道 */
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
@ -15,6 +15,325 @@
|
|||||||
<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 {
|
||||||
|
constructor() {
|
||||||
|
this.color = ['#1A99FF', '#F0D63C', '#E02094', '#52FFF1']
|
||||||
|
|
||||||
|
this.legend = {
|
||||||
|
top: 28,
|
||||||
|
right: 40,
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.grid = {
|
||||||
|
top: 80,
|
||||||
|
left: 88,
|
||||||
|
right: 24,
|
||||||
|
bottom: 32
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tooltip = {
|
||||||
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line',
|
||||||
|
axis: 'x',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7BFFFB',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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()
|
||||||
|
this.xAxis = {
|
||||||
|
type: 'category',
|
||||||
|
data: Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map((_, idx) => {
|
||||||
|
return d.getMonth() + 1 + '-' + (d.getDate() + idx)
|
||||||
|
}),
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.yAxis = [
|
||||||
|
{
|
||||||
|
name: '能耗 ',
|
||||||
|
nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 4,
|
||||||
|
onZero: true,
|
||||||
|
position: 'left',
|
||||||
|
offset: 40,
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#5982B2',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff1',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产量 ',
|
||||||
|
nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, color: '#fff9' },
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 4,
|
||||||
|
axisTick: { show: false },
|
||||||
|
onZero: true,
|
||||||
|
position: 'left',
|
||||||
|
offset: 0,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#5982B2',
|
||||||
|
width: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff1',
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
this.series = [
|
||||||
|
{
|
||||||
|
name: 'A能耗',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 0,
|
||||||
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
// smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: Array(7)
|
||||||
|
.fill(0)
|
||||||
|
.map(_ => Random.integer(30, 100)),
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#1A99FF66' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'A产量',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
// smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: Array(7)
|
||||||
|
.fill(0)
|
||||||
|
.map(_ => Random.integer(30, 100)),
|
||||||
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#F0D63C66' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'B能耗',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 0,
|
||||||
|
// smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: Array(7)
|
||||||
|
.fill(0)
|
||||||
|
.map(_ => Random.integer(30, 100)),
|
||||||
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#E0209466' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'B产量',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
// smooth: true,
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: Array(7)
|
||||||
|
.fill(0)
|
||||||
|
.map(_ => Random.integer(30, 100)),
|
||||||
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#52FFF166' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
get option() {
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
optionFilter(option, calcSize = () => {} /** callback */) {
|
||||||
|
let newOption
|
||||||
|
if (Array.isArray(option)) {
|
||||||
|
newOption = []
|
||||||
|
option.forEach(item => {
|
||||||
|
newOption.push(this.optionFilter(item, calcSize))
|
||||||
|
})
|
||||||
|
return newOption
|
||||||
|
} else if (typeof option === 'object') {
|
||||||
|
newOption = {}
|
||||||
|
for (const key in option) {
|
||||||
|
if (key === 'colorStops') newOption[key] = option[key]
|
||||||
|
else if (
|
||||||
|
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||||||
|
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
||||||
|
) {
|
||||||
|
newOption[key] = calcSize(option[key])
|
||||||
|
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||||||
|
}
|
||||||
|
return newOption
|
||||||
|
} else {
|
||||||
|
newOption = calcSize(option)
|
||||||
|
return option
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RealtimeLineChart',
|
name: 'RealtimeLineChart',
|
||||||
@ -22,186 +341,11 @@ export default {
|
|||||||
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
||||||
inject: ['resizeStatus'],
|
inject: ['resizeStatus'],
|
||||||
/** End Fn.1 */
|
/** End Fn.1 */
|
||||||
props: {
|
props: {},
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-dian-id'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-title'
|
|
||||||
},
|
|
||||||
xData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
seriesData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
const colors = ['#1A99FF', '#F0D63C', '#E02094']
|
|
||||||
|
|
||||||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
|
|
||||||
let data = [
|
|
||||||
// 温度走势
|
|
||||||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 30) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
}),
|
|
||||||
// 电流走势
|
|
||||||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 30) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
}),
|
|
||||||
// 电压走势
|
|
||||||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 30) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
]
|
|
||||||
let wendu = data[0]
|
|
||||||
let dianliu = data[1]
|
|
||||||
let dianya = data[2]
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: null
|
||||||
color: colors,
|
|
||||||
legend: {
|
|
||||||
top: 28,
|
|
||||||
right: 40,
|
|
||||||
itemWidth: 10,
|
|
||||||
itemHeight: 10,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff9',
|
|
||||||
fontSize: 10
|
|
||||||
}
|
|
||||||
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 80,
|
|
||||||
left: 88,
|
|
||||||
right: 24,
|
|
||||||
bottom: 32
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'line',
|
|
||||||
axis: 'x'
|
|
||||||
},
|
|
||||||
extraCssText: 'width: 100px !important;'
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff9'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff3'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
name: '能耗 ',
|
|
||||||
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
|
|
||||||
type: 'value',
|
|
||||||
splitNumber: 4,
|
|
||||||
onZero: true,
|
|
||||||
position: 'left',
|
|
||||||
offset: 40,
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#5982B2',
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff9',
|
|
||||||
fontSize: 10
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff1',
|
|
||||||
type: 'dotted'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '产量 ',
|
|
||||||
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
|
|
||||||
type: 'value',
|
|
||||||
splitNumber: 4,
|
|
||||||
axisTick: { show: false },
|
|
||||||
onZero: true,
|
|
||||||
position: 'left',
|
|
||||||
offset: 0,
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#5982B2',
|
|
||||||
width: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff9',
|
|
||||||
fontSize: 10
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff1',
|
|
||||||
type: 'dotted'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '产线1',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 0,
|
|
||||||
// smooth: true,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: dianliu,
|
|
||||||
symbol: 'none'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '产线2',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 1,
|
|
||||||
// smooth: true,
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: dianya,
|
|
||||||
symbol: 'none'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -211,6 +355,7 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
shouldResize(val, oldVal) {
|
shouldResize(val, oldVal) {
|
||||||
|
console.log('fullscreen resize')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.chart.resize()
|
this.chart.resize()
|
||||||
}, 250)
|
}, 250)
|
||||||
@ -219,14 +364,23 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
|
if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
|
||||||
this.chart.setOption(this.option)
|
this.setChartOption()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.chart) this.chart.dispose()
|
if (this.chart) this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {}
|
methods: {
|
||||||
|
calcSize(num) {
|
||||||
|
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||||
|
return num * beilv
|
||||||
|
},
|
||||||
|
setChartOption() {
|
||||||
|
let chartOption = new ChartOption()
|
||||||
|
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="v3d-outter" ref="v3d-outter">
|
<div id="v3d-outter" ref="v3d-outter">
|
||||||
<div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
|
<div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel="" />
|
||||||
<V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
|
<V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
|
||||||
<div v-if="showPage" id="v3d-main-content">
|
<div v-if="showPage" id="v3d-main-content">
|
||||||
<!-- <div v-if="true" id="v3d-main-content"> -->
|
<!-- <div v-if="true" id="v3d-main-content"> -->
|
||||||
@ -20,7 +20,7 @@
|
|||||||
</techy-container>
|
</techy-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="techy-body-part__middle" v-if="currentEquipment">
|
<div v-if="currentEquipment" class="techy-body-part__middle">
|
||||||
<TechyBox>
|
<TechyBox>
|
||||||
<div class="techy-body-part__middle__inner">
|
<div class="techy-body-part__middle__inner">
|
||||||
<p>
|
<p>
|
||||||
@ -45,7 +45,7 @@
|
|||||||
'red-dot': currentEquipment.status === '故障',
|
'red-dot': currentEquipment.status === '故障',
|
||||||
'yellow-dot': currentEquipment.status === '调试中'
|
'yellow-dot': currentEquipment.status === '调试中'
|
||||||
}"
|
}"
|
||||||
></span>
|
/>
|
||||||
{{ currentEquipment.status }}
|
{{ currentEquipment.status }}
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
@ -204,6 +204,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#v3d-outter *::-webkit-scrollbar-button {
|
#v3d-outter *::-webkit-scrollbar-button {
|
||||||
|
display: none;
|
||||||
width: calc(8px * var(--beilv));
|
width: calc(8px * var(--beilv));
|
||||||
height: calc(8px * var(--beilv));
|
height: calc(8px * var(--beilv));
|
||||||
background: #5bc4bf9f;
|
background: #5bc4bf9f;
|
||||||
@ -257,7 +258,7 @@ export default {
|
|||||||
|
|
||||||
/* 实时产量和能耗 */
|
/* 实时产量和能耗 */
|
||||||
.realtime {
|
.realtime {
|
||||||
height: calc(256px * var(--beilv));
|
height: calc(240px * var(--beilv));
|
||||||
}
|
}
|
||||||
/* 工序质量分析 */
|
/* 工序质量分析 */
|
||||||
.ws-quality {
|
.ws-quality {
|
||||||
@ -267,7 +268,8 @@ export default {
|
|||||||
}
|
}
|
||||||
/* 产线成品率 */
|
/* 产线成品率 */
|
||||||
.production {
|
.production {
|
||||||
height: calc(256px * var(--beilv));
|
height: calc(200px * var(--beilv));
|
||||||
|
flex: 1 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,73 +1,66 @@
|
|||||||
export default [
|
export default [
|
||||||
{ id: 'C1-0', pl: 'A', name: '上片', amount: 32, status: '生产中' },
|
{ id: 'C1-0', pl: 'A1', name: 'A1上片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-1', pl: 'A', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C1-1', pl: 'A1', name: 'A1磨边', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-2', pl: 'A', name: '磨边', amount: 32, status: '调试中' },
|
{ id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '调试中' },
|
||||||
{ id: 'C1-3', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C1-3', pl: 'A1', name: 'A1打孔', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-4', pl: 'A', name: '打孔', amount: 32, status: '生产中' },
|
{ id: 'C1-4', pl: 'A1', name: 'A1打孔后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-5', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C1-5', pl: 'A1', name: 'A1丝印', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-6', pl: 'A', name: '丝印', amount: 32, status: '生产中' },
|
{ id: 'C1-6', pl: 'A1', name: 'A1固化', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-7', pl: 'A', name: '固化', amount: 32, status: '生产中' },
|
{ id: 'C1-7', pl: 'A1', name: 'A1储片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-8', pl: 'A', name: '储片', amount: 32, status: '生产中' },
|
{ id: 'C1-8', pl: 'A1', name: 'A钢化', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-9', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C1-9', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C1-10', pl: 'A', name: '下片', amount: 32, status: '生产中' },
|
{ id: 'C1-10', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
|
||||||
|
|
||||||
{ id: 'C2-0', pl: 'B', name: '上片', amount: 32, status: '调试中' },
|
{ id: 'C2-0', pl: 'A2', name: 'A2上片', amount: 32, status: '调试中' },
|
||||||
{ id: 'C2-1', pl: 'B', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C2-1', pl: 'A2', name: 'A2磨边', amount: 32, status: '生产中' },
|
||||||
{ id: 'C2-2', pl: 'B', name: '磨边', amount: 32, status: '调试中' },
|
{ id: 'C2-2', pl: 'A2', name: 'A2磨边后清洗', amount: 32, status: '调试中' },
|
||||||
{ id: 'C2-3', pl: 'B', name: '清洗', amount: 32, status: '调试中' },
|
{ id: 'C2-3', pl: 'A2', name: 'A2打孔', amount: 32, status: '调试中' },
|
||||||
{ id: 'C2-4', pl: 'B', name: '打孔', amount: 32, status: '调试中' },
|
{ id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '调试中' },
|
||||||
{ id: 'C2-5', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C2-5', pl: 'A2', name: 'A2丝印', amount: 32, status: '生产中' },
|
||||||
{ id: 'C2-6', pl: 'B', name: '丝印', amount: 32, status: '生产中' },
|
{ id: 'C2-6', pl: 'A2', name: 'A2固化', amount: 32, status: '生产中' },
|
||||||
{ id: 'C2-7', pl: 'B', name: '固化', amount: 32, status: '生产中' },
|
{ id: 'C2-7', pl: 'A2', name: 'A2储片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C2-8', pl: 'B', name: '储片', amount: 32, status: '生产中' },
|
{ id: 'C2-8', pl: 'A2', name: 'A2钢化后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C2-9', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C2-9', pl: 'A2', name: 'A2下片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C2-10', pl: 'B', name: '下片', amount: 32, status: '生产中' },
|
|
||||||
|
|
||||||
{ id: 'C3-0', pl: 'C', name: '上片', amount: 32, status: '生产中' },
|
{ id: 'C3-0', pl: 'A3', name: 'A3上片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-1', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C3-1', pl: 'A3', name: 'A3磨边', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-2', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C3-2', pl: 'A3', name: 'A3磨边后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-3', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C3-3', pl: 'A3', name: 'A3打孔', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-4', pl: 'C', name: '打孔', amount: 32, status: '生产中' },
|
{ id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-5', pl: 'C', name: '清洗', amount: 32, status: '故障' },
|
{ id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '故障' },
|
||||||
{ id: 'C3-6', pl: 'C', name: '丝印', amount: 32, status: '生产中' },
|
{ id: 'C3-6', pl: 'A3', name: 'A3固化', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-7', pl: 'C', name: '固化', amount: 32, status: '生产中' },
|
{ id: 'C3-7', pl: 'A3', name: 'A3储片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-8', pl: 'C', name: '储片', amount: 32, status: '生产中' },
|
{ id: 'C3-8', pl: 'A3', name: 'A3钢化后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-9', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C3-9', pl: 'A3', name: 'A3下片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C3-10', pl: 'C', name: '下片', amount: 32, status: '生产中' },
|
|
||||||
|
|
||||||
{ id: 'C4-0', pl: 'D', name: '上片', amount: 32, status: '故障' },
|
{ id: 'C4-0', pl: 'B1', name: 'B1上片', amount: 32, status: '故障' },
|
||||||
{ id: 'C4-1', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C4-1', pl: 'B1', name: 'B1磨边', amount: 32, status: '生产中' },
|
||||||
{ id: 'C4-2', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C4-3', pl: 'D', name: '清洗', amount: 32, status: '故障' },
|
{ id: 'C4-3', pl: 'B1', name: 'B1打孔', amount: 32, status: '故障' },
|
||||||
{ id: 'C4-4', pl: 'D', name: '打孔', amount: 32, status: '故障' },
|
{ id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '故障' },
|
||||||
{ id: 'C4-5', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C4-5', pl: 'B1', name: 'B1丝印', amount: 32, status: '生产中' },
|
||||||
{ id: 'C4-6', pl: 'D', name: '丝印', amount: 32, status: '生产中' },
|
{ id: 'C4-6', pl: 'B1', name: 'B1固化', amount: 32, status: '生产中' },
|
||||||
{ id: 'C4-7', pl: 'D', name: '固化', amount: 32, status: '生产中' },
|
{ id: 'C4-7', pl: 'B1', name: 'B1储片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C4-8', pl: 'D', name: '储片', amount: 32, status: '生产中' },
|
{ id: 'C4-8', pl: 'B1', name: 'B钢化', amount: 32, status: '生产中' },
|
||||||
{ id: 'C4-9', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C4-9', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C4-10', pl: 'D', name: '下片', amount: 32, status: '生产中' },
|
{ id: 'C4-10', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
|
||||||
|
|
||||||
{ id: 'C5-0', pl: 'E', name: '上片', amount: 32, status: '生产中' },
|
{ id: 'C5-0', pl: 'B2', name: 'B2上片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-1', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C5-1', pl: 'B2', name: 'B2磨边', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-2', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C5-2', pl: 'B2', name: 'B2磨边后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-3', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C5-3', pl: 'B2', name: 'B2打孔', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-4', pl: 'E', name: '打孔', amount: 32, status: '生产中' },
|
{ id: 'C5-4', pl: 'B2', name: 'B2打孔后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-5', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C5-5', pl: 'B2', name: 'B2丝印', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-6', pl: 'E', name: '丝印', amount: 32, status: '生产中' },
|
{ id: 'C5-6', pl: 'B2', name: 'B2固化', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-7', pl: 'E', name: '固化', amount: 32, status: '生产中' },
|
{ id: 'C5-7', pl: 'B2', name: 'B2储片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-8', pl: 'E', name: '储片', amount: 32, status: '生产中' },
|
{ id: 'C5-8', pl: 'B2', name: 'B2钢化后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C5-9', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
|
|
||||||
// { id: 'C5-10', pl: 'E', name: '下片', amount: 32, status: '生产中' },
|
|
||||||
|
|
||||||
{ id: 'C6-0', pl: 'F', name: '上片', amount: 32, status: '生产中' },
|
{ id: 'C6-0', pl: 'B3', name: 'B3上片', amount: 32, status: '生产中' },
|
||||||
{ id: 'C6-1', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C6-1', pl: 'B3', name: 'B3磨边', amount: 32, status: '生产中' },
|
||||||
{ id: 'C6-2', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
|
{ id: 'C6-2', pl: 'B3', name: 'B3磨边后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C6-3', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C6-3', pl: 'B3', name: 'B3打孔', amount: 32, status: '生产中' },
|
||||||
{ id: 'C6-4', pl: 'F', name: '打孔', amount: 32, status: '生产中' },
|
{ id: 'C6-4', pl: 'B3', name: 'B3打孔后清洗', amount: 32, status: '生产中' },
|
||||||
{ id: 'C6-5', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
|
{ id: 'C6-5', pl: 'B3', name: 'B3丝印', amount: 32, status: '生产中' },
|
||||||
{ id: 'C6-6', pl: 'F', name: '丝印', amount: 32, status: '生产中' },
|
{ id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '生产中' },
|
||||||
{ id: 'C6-7', pl: 'F', name: '固化', amount: 32, status: '故障' },
|
{ id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' },
|
||||||
{ id: 'C6-8', pl: 'F', name: '储片', amount: 32, status: '故障' },
|
|
||||||
// { id: 'C6-9', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
|
|
||||||
// { id: 'C6-10', pl: 'F', name: '下片', amount: 32, status: '生产中' },
|
|
||||||
]
|
]
|
||||||
@ -32,7 +32,7 @@ export default {
|
|||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['A', 'B', 'C', 'D', 'E'],
|
data: ['A', 'B' ],
|
||||||
axisTick: {
|
axisTick: {
|
||||||
alignWithLabel: true
|
alignWithLabel: true
|
||||||
},
|
},
|
||||||
@ -116,75 +116,75 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
value: 200,
|
// value: 200,
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
color: {
|
// color: {
|
||||||
type: 'linear',
|
// type: 'linear',
|
||||||
x: 0,
|
// x: 0,
|
||||||
y: 0,
|
// y: 0,
|
||||||
x2: 0,
|
// x2: 0,
|
||||||
y2: 1,
|
// y2: 1,
|
||||||
colorStops: [
|
// colorStops: [
|
||||||
{
|
// {
|
||||||
offset: 0,
|
// offset: 0,
|
||||||
color: '#85F6E9'
|
// color: '#85F6E9'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
offset: 1,
|
// offset: 1,
|
||||||
color: '#2EC6B4'
|
// color: '#2EC6B4'
|
||||||
}
|
// }
|
||||||
],
|
// ],
|
||||||
global: false
|
// global: false
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
value: 320,
|
// value: 320,
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
color: {
|
// color: {
|
||||||
type: 'linear',
|
// type: 'linear',
|
||||||
x: 0,
|
// x: 0,
|
||||||
y: 0,
|
// y: 0,
|
||||||
x2: 0,
|
// x2: 0,
|
||||||
y2: 1,
|
// y2: 1,
|
||||||
colorStops: [
|
// colorStops: [
|
||||||
{
|
// {
|
||||||
offset: 0,
|
// offset: 0,
|
||||||
color: '#C79DFF'
|
// color: '#C79DFF'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
offset: 1,
|
// offset: 1,
|
||||||
color: '#A490FF'
|
// color: '#A490FF'
|
||||||
}
|
// }
|
||||||
],
|
// ],
|
||||||
global: false
|
// global: false
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
value: 95,
|
// value: 95,
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
color: {
|
// color: {
|
||||||
type: 'linear',
|
// type: 'linear',
|
||||||
x: 0,
|
// x: 0,
|
||||||
y: 0,
|
// y: 0,
|
||||||
x2: 0,
|
// x2: 0,
|
||||||
y2: 1,
|
// y2: 1,
|
||||||
colorStops: [
|
// colorStops: [
|
||||||
{
|
// {
|
||||||
offset: 0,
|
// offset: 0,
|
||||||
color: '#FFE873'
|
// color: '#FFE873'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
offset: 1,
|
// offset: 1,
|
||||||
color: '#E7AE2A'
|
// color: '#E7AE2A'
|
||||||
}
|
// }
|
||||||
],
|
// ],
|
||||||
global: false
|
// global: false
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -185,7 +185,10 @@ export default {
|
|||||||
|
|
||||||
list({ ...this.listQuery, pdlId, name }).then(response => {
|
list({ ...this.listQuery, pdlId, name }).then(response => {
|
||||||
if (response.data.records) {
|
if (response.data.records) {
|
||||||
this.dataList = response.data.records
|
// this.dataList = response.data.records
|
||||||
|
// 11-mes 修改模拟数据
|
||||||
|
this.dataList = response.data.records.map(item => ({...item, error: '无故障'}))
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
this.dataList.splice(0)
|
this.dataList.splice(0)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -33,7 +33,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- right -->
|
<!-- right -->
|
||||||
<div class="right-container">
|
<div class="right-container">
|
||||||
<top-title :base-title="this.$t('module.equipmentManager.inspectionManage.inspectionItem')" style="font-size: 14px; padding-bottom: 14px;" />
|
<top-title
|
||||||
|
:base-title="this.$t('module.equipmentManager.inspectionManage.inspectionItem')"
|
||||||
|
style="font-size: 14px; padding-bottom: 14px;"
|
||||||
|
/>
|
||||||
<base-table
|
<base-table
|
||||||
:page="1"
|
:page="1"
|
||||||
:limit="999"
|
:limit="999"
|
||||||
@ -64,13 +67,22 @@ import BaseTable from '@/components/BaseTable'
|
|||||||
import Pagination from '@/components/Pagination'
|
import Pagination from '@/components/Pagination'
|
||||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||||
import { tableHeight } from '@/utils/index'
|
import { tableHeight } from '@/utils/index'
|
||||||
import { equipmentList, inspectionLog, einspectionLogD, einspectionItList, einspectionItemLogU } from '@/api/equipment/inspectionManager'
|
import {
|
||||||
|
equipmentList,
|
||||||
|
inspectionLog,
|
||||||
|
einspectionLogD,
|
||||||
|
einspectionItList,
|
||||||
|
einspectionItemLogU
|
||||||
|
} from '@/api/equipment/inspectionManager'
|
||||||
import einspectionitemAdd from './components/einspectionitemAdd.vue'
|
import einspectionitemAdd from './components/einspectionitemAdd.vue'
|
||||||
import einspectionitemlogAdd from './components/einspectionitemlogAdd.vue'
|
import einspectionitemlogAdd from './components/einspectionitemlogAdd.vue'
|
||||||
import { timeFormatter } from '@/filters'
|
import { timeFormatter } from '@/filters'
|
||||||
import StatusBtn from './components/statusBtn.vue'
|
import StatusBtn from './components/statusBtn.vue'
|
||||||
import statusTag from './components/statusTag.vue'
|
import statusTag from './components/statusTag.vue'
|
||||||
// import newBasicData from '@/filters/newBasicData'
|
// import newBasicData from '@/filters/newBasicData'
|
||||||
|
|
||||||
|
import { Random } from 'mockjs'
|
||||||
|
|
||||||
const topBtnConfig = [
|
const topBtnConfig = [
|
||||||
{
|
{
|
||||||
type: 'add',
|
type: 'add',
|
||||||
@ -246,21 +258,23 @@ export default {
|
|||||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
}
|
}
|
||||||
).then(() => {
|
)
|
||||||
einspectionLogD({
|
.then(() => {
|
||||||
id: raw.data.id
|
einspectionLogD({
|
||||||
}).then(res => {
|
id: raw.data.id
|
||||||
this.$message({
|
}).then(res => {
|
||||||
message: this.$t('module.basicData.visual.success'),
|
this.$message({
|
||||||
type: 'success',
|
message: this.$t('module.basicData.visual.success'),
|
||||||
duration: 1500,
|
type: 'success',
|
||||||
onClose: () => {
|
duration: 1500,
|
||||||
this.listQuery.current = 1
|
onClose: () => {
|
||||||
this.getList()
|
this.listQuery.current = 1
|
||||||
}
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}).catch(() => { })
|
.catch(() => {})
|
||||||
} else if (raw.type === 'detail') {
|
} else if (raw.type === 'detail') {
|
||||||
this.addNew(raw.data.id, 'detail')
|
this.addNew(raw.data.id, 'detail')
|
||||||
} else if (raw.type === 'edit') {
|
} else if (raw.type === 'edit') {
|
||||||
@ -274,8 +288,25 @@ export default {
|
|||||||
this.listQuery.endTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[1] + 'T23:59:59' : ''
|
this.listQuery.endTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[1] + 'T23:59:59' : ''
|
||||||
inspectionLog(this.listQuery).then(res => {
|
inspectionLog(this.listQuery).then(res => {
|
||||||
if (res.data.records) {
|
if (res.data.records) {
|
||||||
this.list = res.data.records
|
// this.list = res.data.records
|
||||||
|
// 11-mes 修改模拟时间
|
||||||
|
this.list = res.data.records.map(item => {
|
||||||
|
let startDate = 2022 + '-' + '11-' + Random.integer(1, 29)
|
||||||
|
let startHour = Random.integer(1, 22)
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
inspectionStartTime:
|
||||||
|
startDate + ' ' + (startHour < 10 ? '0' + startHour : '' + startHour) + Random.datetime(':mm:ss'),
|
||||||
|
inspectionEndTime:
|
||||||
|
startDate +
|
||||||
|
' ' +
|
||||||
|
(startHour + 1 < 10 ? +'0' + (startHour + 1) : 1 + startHour + '') +
|
||||||
|
Random.datetime(':mm:ss')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// console.log('list;', this.list)
|
||||||
this.equipmentInspectionId = this.list[0].id
|
this.equipmentInspectionId = this.list[0].id
|
||||||
|
|
||||||
this.getInspectionItem()
|
this.getInspectionItem()
|
||||||
} else {
|
} else {
|
||||||
this.list = []
|
this.list = []
|
||||||
@ -299,7 +330,8 @@ export default {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
selectRow(val) { // 点击左侧列表
|
selectRow(val) {
|
||||||
|
// 点击左侧列表
|
||||||
this.equipmentInspectionId = val.id
|
this.equipmentInspectionId = val.id
|
||||||
this.getInspectionItem()
|
this.getInspectionItem()
|
||||||
},
|
},
|
||||||
@ -340,7 +372,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleClickR(raw) {
|
handleClickR(raw) {
|
||||||
if ((raw.type === 'detail') || (raw.type === 'edit')) {
|
if (raw.type === 'detail' || raw.type === 'edit') {
|
||||||
this.addOrUpdateVisibleR = true
|
this.addOrUpdateVisibleR = true
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.addOrUpdateR.init(raw.data.id, raw.type)
|
this.$refs.addOrUpdateR.init(raw.data.id, raw.type)
|
||||||
@ -351,23 +383,23 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.app-container {
|
.app-container {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
.left-container {
|
.left-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
// width: 500px;
|
// width: 500px;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
border-right: 8px solid #f2f4f9;
|
border-right: 8px solid #f2f4f9;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
}
|
|
||||||
.right-container {
|
|
||||||
display: inline-block;
|
|
||||||
// width: calc(100% - 510px);
|
|
||||||
width: 49%;
|
|
||||||
vertical-align: top;
|
|
||||||
height: 100%;
|
|
||||||
padding-top: 23px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
.right-container {
|
||||||
|
display: inline-block;
|
||||||
|
// width: calc(100% - 510px);
|
||||||
|
width: 49%;
|
||||||
|
vertical-align: top;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -34,7 +34,7 @@ const PriorityComponent = {
|
|||||||
|
|
||||||
export const equipmentExceptionProps = [
|
export const equipmentExceptionProps = [
|
||||||
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 55 },
|
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 55 },
|
||||||
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
|
// { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
|
||||||
{ label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
|
{ label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
|
||||||
{ label: '报修/发现人', prop: 'creator', align: 'center', 'min-width': 60 },
|
{ label: '报修/发现人', prop: 'creator', align: 'center', 'min-width': 60 },
|
||||||
{ label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
|
{ label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
|
||||||
@ -42,26 +42,26 @@ export const equipmentExceptionProps = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
export const equipmentExceptionDatalist = [
|
export const equipmentExceptionDatalist = [
|
||||||
{ "eqName": "丝印机", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 },
|
{ "eqName": "A1丝印", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 },
|
||||||
{ "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "贺刚", "time": "2022-11-20 06:30:01", "priority": 2 },
|
{ "eqName": "B1磨边后清洗", "pl": "B", "content": "毛刷过载", "creator": "贺刚", "time": "2022-11-20 06:30:01", "priority": 2 },
|
||||||
{ "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 },
|
{ "eqName": "B1磨边", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 },
|
||||||
{ "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 },
|
// { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 },
|
||||||
{ "eqName": "丝印机", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 },
|
{ "eqName": "B2丝印", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 },
|
||||||
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 },
|
{ "eqName": "A3磨边", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 },
|
||||||
{ "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 },
|
{ "eqName": "B2打孔后清洗", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 },
|
||||||
{ "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "姜洋", "time": "2022-11-20 07:56:26", "priority": 3 },
|
// { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "姜洋", "time": "2022-11-20 07:56:26", "priority": 3 },
|
||||||
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "赖艳", "time": "2022-11-20 12:01:14", "priority": 1 },
|
{ "eqName": "A2磨边", "pl": "A", "content": "磨轮过载", "creator": "赖艳", "time": "2022-11-20 12:01:14", "priority": 1 },
|
||||||
{ "eqName": "丝印机", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 },
|
{ "eqName": "A2丝印", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 },
|
||||||
{ "eqName": "清洗机", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 },
|
{ "eqName": "B1打孔后清洗", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 },
|
||||||
{ "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 },
|
{ "eqName": "A钢化", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 },
|
||||||
{ "eqName": "丝印机", "pl": "B", "content": "进气压力过低", "creator": "徐丽", "time": "2022-11-21 21:15:10", "priority": 2 },
|
{ "eqName": "B3丝印", "pl": "B", "content": "进气压力过低", "creator": "徐丽", "time": "2022-11-21 21:15:10", "priority": 2 },
|
||||||
{ "eqName": "镀膜", "pl": "A", "content": "固化变频异常", "creator": "叶娜", "time": "2022-11-21 22:45:13", "priority": 1 },
|
// { "eqName": "镀膜", "pl": "A", "content": "固化变频异常", "creator": "叶娜", "time": "2022-11-21 22:45:13", "priority": 1 },
|
||||||
{ "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "田磊", "time": "2022-11-21 07:24:59", "priority": 2 },
|
{ "eqName": "A钢化", "pl": "A", "content": "传动变频器故障", "creator": "田磊", "time": "2022-11-21 07:24:59", "priority": 2 },
|
||||||
{ "eqName": "钢化炉", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 },
|
{ "eqName": "A钢化", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 },
|
||||||
{ "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "赵艳", "time": "2022-11-21 18:10:32", "priority": 2 },
|
{ "eqName": "B2磨边后清洗", "pl": "B", "content": "磨轮过载", "creator": "赵艳", "time": "2022-11-21 18:10:32", "priority": 2 },
|
||||||
{ "eqName": "钢化炉", "pl": "B", "content": "传动变频器故障", "creator": "江伟", "time": "2022-11-21 17:29:44", "priority": 2 },
|
{ "eqName": "B钢化", "pl": "B", "content": "传动变频器故障", "creator": "江伟", "time": "2022-11-21 17:29:44", "priority": 2 },
|
||||||
{ "eqName": "清洗机", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 },
|
{ "eqName": "B3磨边后清洗", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 },
|
||||||
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "邱超", "time": "2022-11-21 20:41:53", "priority": 1 },
|
{ "eqName": "A1磨边", "pl": "A", "content": "磨轮过载", "creator": "邱超", "time": "2022-11-21 20:41:53", "priority": 1 },
|
||||||
]
|
]
|
||||||
|
|
||||||
/** 设备异常报警 */
|
/** 设备异常报警 */
|
||||||
@ -100,42 +100,42 @@ const LifeRemainComponent = {
|
|||||||
export const equipmentAlarmProps = [
|
export const equipmentAlarmProps = [
|
||||||
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 100 },
|
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 100 },
|
||||||
{ label: '设备编码', prop: 'eqCode', align: 'center', 'min-width': 100 },
|
{ label: '设备编码', prop: 'eqCode', align: 'center', 'min-width': 100 },
|
||||||
{ label: '所属产线', prop: 'pl', align: 'center' },
|
// { label: '所属产线', prop: 'pl', align: 'center' },
|
||||||
{ label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 85 },
|
{ label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 85 },
|
||||||
{ label: '报警内容', prop: 'content', align: 'center' }
|
{ label: '报警内容', prop: 'content', align: 'center' }
|
||||||
]
|
]
|
||||||
|
|
||||||
export const equipmentAlarmDatalist = [
|
export const equipmentAlarmDatalist = [
|
||||||
{
|
{
|
||||||
"pl": "B", "eqName": "丝印机", "eqCode": "B5SP20200109025453", "content": "网版推出异常", "priority": 3
|
"pl": "B", "eqName": "B1丝印", "eqCode": "B5SP20200109025453", "content": "网版推出异常", "priority": 3
|
||||||
},
|
},
|
||||||
{ "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 },
|
{ "pl": "A", "eqName": "A2磨边后清洗", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 },
|
||||||
{ "pl": "B", "eqName": "磨边机", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 },
|
{ "pl": "B", "eqName": "B2磨边", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 },
|
||||||
{ "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "content": "胶辊变频异常", "priority": 2 },
|
// { "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "content": "胶辊变频异常", "priority": 2 },
|
||||||
{ "pl": "B", "eqName": "丝印机", "eqCode": "B7SP20190927110003", "content": "印刷轴异常", "priority": 2 },
|
{ "pl": "B", "eqName": "B2丝印", "eqCode": "B7SP20190927110003", "content": "印刷轴异常", "priority": 2 },
|
||||||
{
|
{
|
||||||
"pl": "A", "eqName": "清洗机", "eqCode": "A3CAP20200727075125", "content": "进料检测异常", "priority": 3
|
"pl": "A", "eqName": "A1磨边后清洗", "eqCode": "A3CAP20200727075125", "content": "进料检测异常", "priority": 3
|
||||||
},
|
},
|
||||||
{ "pl": "A", "eqName": "丝印机", "eqCode": "A7SP20200512213432", "content": "进气压力过低", "priority": 3 },
|
{ "pl": "A", "eqName": "A3丝印", "eqCode": "A7SP20200512213432", "content": "进气压力过低", "priority": 3 },
|
||||||
{
|
{
|
||||||
"pl": "A", "eqName": "磨边机", "eqCode": "A4ED20220608145053", "content": "磨轮过载", "priority": 2
|
"pl": "A", "eqName": "A2磨边", "eqCode": "A4ED20220608145053", "content": "磨轮过载", "priority": 2
|
||||||
},
|
},
|
||||||
{ "pl": "B", "eqName": "钢化炉", "eqCode": "B4CO20200526045602", "content": "传动变频器故障", "priority": 1 },
|
{ "pl": "B", "eqName": "B钢化", "eqCode": "B4CO20200526045602", "content": "传动变频器故障", "priority": 1 },
|
||||||
{
|
{
|
||||||
"pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20220326162041", "content": "毛刷过载", "priority": 2
|
"pl": "B", "eqName": "B1磨边后清洗", "eqCode": "B6CAP20220326162041", "content": "毛刷过载", "priority": 2
|
||||||
},
|
},
|
||||||
{ "pl": "A", "eqName": "磨边机", "eqCode": "A4ED20200325081934", "content": "磨轮过载", "priority": 2 },
|
{ "pl": "A", "eqName": "A1磨边", "eqCode": "A4ED20200325081934", "content": "磨轮过载", "priority": 2 },
|
||||||
{
|
{
|
||||||
"pl": "B", "eqName": "丝印机", "eqCode": "B1SP20201220183649", "content": "印刷轴异常", "priority": 2
|
"pl": "B", "eqName": "B1丝印", "eqCode": "B1SP20201220183649", "content": "印刷轴异常", "priority": 2
|
||||||
},
|
},
|
||||||
{ "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 },
|
// { "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 },
|
||||||
{ "pl": "A", "eqName": "磨边机", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 },
|
{ "pl": "A", "eqName": "A3磨边", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 },
|
||||||
{ "pl": "B", "eqName": "清洗机", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 },
|
{ "pl": "B", "eqName": "B3磨边后清洗", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 },
|
||||||
{ "pl": "A", "eqName": "丝印机", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 },
|
{ "pl": "A", "eqName": "A3丝印", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 },
|
||||||
{ "pl": "A", "eqName": "钢化炉", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 },
|
{ "pl": "A", "eqName": "A钢化", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 },
|
||||||
{ "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 },
|
// { "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 },
|
||||||
{ "pl": "A", "eqName": "钢化炉", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 },
|
{ "pl": "A", "eqName": "A钢化", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 },
|
||||||
{ "pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 },
|
{ "pl": "B", "eqName": "B2磨边后清洗", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 },
|
||||||
]
|
]
|
||||||
|
|
||||||
/** 设备分析 */
|
/** 设备分析 */
|
||||||
@ -258,9 +258,9 @@ export const wwwOrderProps = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
export const rightSideDatalist = [
|
export const rightSideDatalist = [
|
||||||
{ "orderId": "WOD20200807030135", "time": "2021-02-12 14:08:04", "eq": "磨边", "status": 3, "team": "白班", "duration": "26min" },
|
{ "orderId": "WOD20200807030135", "time": "2022-11-12 14:08:04", "eq": "A1磨边", "status": 3, "team": "白班", "duration": "26min" },
|
||||||
{ "orderId": "WOD20200413103728", "time": "2020-11-26 20:11:39", "eq": "固化", "status": 1, "team": "夜班", "duration": "24min" },
|
{ "orderId": "WOD20210217143647", "time": "2022-11-15 18:48:40", "eq": "A1打孔", "status": 2, "team": "白班", "duration": "27min" },
|
||||||
{ "orderId": "WOD20210217143647", "time": "2021-08-15 18:48:40", "eq": "预热", "status": 2, "team": "白班", "duration": "27min" },
|
{ "orderId": "WOD20200413103728", "time": "2022-11-26 20:11:39", "eq": "A1固化", "status": 1, "team": "夜班", "duration": "24min" },
|
||||||
]
|
]
|
||||||
export const rightSideDatalist2 = [
|
export const rightSideDatalist2 = [
|
||||||
{ "orderId": "WOD20220403013343", "pl": "A", "status": 3, "team": "白班", "duration": "24min" },
|
{ "orderId": "WOD20220403013343", "pl": "A", "status": 3, "team": "白班", "duration": "24min" },
|
||||||
@ -268,14 +268,14 @@ export const rightSideDatalist2 = [
|
|||||||
{ "orderId": "WOD20210902180855", "pl": "A", "status": 2, "team": "夜班", "duration": "23min" },
|
{ "orderId": "WOD20210902180855", "pl": "A", "status": 2, "team": "夜班", "duration": "23min" },
|
||||||
]
|
]
|
||||||
export const rightSideDatalist3 = [
|
export const rightSideDatalist3 = [
|
||||||
{ "orderId": "WOD20210829073921", "eq": "钢后清洗机", "status": 2, "team": "白班", "duration": "29min" },
|
{ "orderId": "WOD20210829073921", "eq": "A3钢化后清洗", "status": 2, "team": "白班", "duration": "29min" },
|
||||||
{ "orderId": "WOD20220429180823", "eq": "丝印", "status": 2, "team": "夜班", "duration": "26min" },
|
{ "orderId": "WOD20220429180823", "eq": "A3丝印", "status": 2, "team": "夜班", "duration": "26min" },
|
||||||
{ "orderId": "WOD20220915050149", "eq": "磨边后清洗机", "status": 3, "team": "白班", "duration": "21min" },
|
{ "orderId": "WOD20220915050149", "eq": "A3磨边后清洗", "status": 3, "team": "白班", "duration": "21min" },
|
||||||
]
|
]
|
||||||
export const rightSideDatalist4 = [
|
export const rightSideDatalist4 = [
|
||||||
{ "orderId": "WOD20210522165229", "pl": "A", "status": 2, "team": "夜班", "time": "2021-12-17 13:31:24" },
|
{ "orderId": "WOD20210522165229", "pl": "A", "status": 2, "team": "夜班", "time": "2022-12-17 13:31:24" },
|
||||||
{ "orderId": "WOD20211205183921", "pl": "B", "status": 1, "team": "白班", "time": "2022-06-27 10:52:19" },
|
|
||||||
{ "orderId": "WOD20210114183705", "pl": "A", "status": 1, "team": "夜班", "time": "2022-11-22 02:59:50" },
|
{ "orderId": "WOD20210114183705", "pl": "A", "status": 1, "team": "夜班", "time": "2022-11-22 02:59:50" },
|
||||||
|
{ "orderId": "WOD20211205183921", "pl": "B", "status": 1, "team": "白班", "time": "2022-11-27 10:52:19" },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -147,21 +147,22 @@ export default {
|
|||||||
fetchList('order').then(response => {
|
fetchList('order').then(response => {
|
||||||
if (response.data) {
|
if (response.data) {
|
||||||
this.dataList = response.data
|
this.dataList = response.data
|
||||||
this.dataList.push({
|
// 11-mes:
|
||||||
orderName: '22订单',
|
// this.dataList.push({
|
||||||
productName: 'xxx光伏玻璃2.0B',
|
// orderName: '22订单',
|
||||||
productSize: '2*1128*2272',
|
// productName: 'xxx光伏玻璃2.0B',
|
||||||
productionLine: 'C线 D线 A线',
|
// productSize: '2*1128*2272',
|
||||||
det: Array(3).fill({
|
// productionLine: 'C线 D线 A线',
|
||||||
inputNum: '-259730',
|
// det: Array(3).fill({
|
||||||
outputNum: '-772443',
|
// inputNum: '-259730',
|
||||||
passRate: 100,
|
// outputNum: '-772443',
|
||||||
recordTime: '2022-09-06T14:00:00',
|
// passRate: 100,
|
||||||
scrapNum: '0',
|
// recordTime: '2022-09-06T14:00:00',
|
||||||
sumInputNum: '259730',
|
// scrapNum: '0',
|
||||||
sumOutputNum: '772443'
|
// sumInputNum: '259730',
|
||||||
})
|
// sumOutputNum: '772443'
|
||||||
})
|
// })
|
||||||
|
// })
|
||||||
this.transformData()
|
this.transformData()
|
||||||
} else {
|
} else {
|
||||||
this.dataList.splice(0)
|
this.dataList.splice(0)
|
||||||
|
|||||||
@ -8,10 +8,7 @@
|
|||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<head-form
|
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||||
:form-config="headFormConfig"
|
|
||||||
@headBtnClick="btnClick"
|
|
||||||
/>
|
|
||||||
<base-table
|
<base-table
|
||||||
:top-btn-config="topBtnConfig"
|
:top-btn-config="topBtnConfig"
|
||||||
:page="listQuery.current"
|
:page="listQuery.current"
|
||||||
@ -21,12 +18,7 @@
|
|||||||
:is-loading="listLoading"
|
:is-loading="listLoading"
|
||||||
@clickTopBtn="clickTopBtn"
|
@clickTopBtn="clickTopBtn"
|
||||||
>
|
>
|
||||||
<method-btn
|
<method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||||
slot="handleBtn"
|
|
||||||
:width="trueWidth"
|
|
||||||
:method-list="tableBtn"
|
|
||||||
@clickBtn="handleClick"
|
|
||||||
/>
|
|
||||||
</base-table>
|
</base-table>
|
||||||
<pagination
|
<pagination
|
||||||
v-show="total > 0"
|
v-show="total > 0"
|
||||||
@ -35,11 +27,7 @@
|
|||||||
:limit.sync="listQuery.size"
|
:limit.sync="listQuery.size"
|
||||||
@pagination="getList()"
|
@pagination="getList()"
|
||||||
/>
|
/>
|
||||||
<team-info-detail
|
<team-info-detail v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||||
v-if="addOrUpdateVisible"
|
|
||||||
ref="addOrUpdate"
|
|
||||||
@refreshDataList="getList"
|
|
||||||
/>
|
|
||||||
<team-info-add
|
<team-info-add
|
||||||
v-if="addVisible"
|
v-if="addVisible"
|
||||||
ref="addNew"
|
ref="addNew"
|
||||||
@ -61,6 +49,7 @@ import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
|||||||
import { timeFormatter } from '@/filters'
|
import { timeFormatter } from '@/filters'
|
||||||
import i18n from '@/lang'
|
import i18n from '@/lang'
|
||||||
// import data from '../pdf/content'
|
// import data from '../pdf/content'
|
||||||
|
import { Random } from 'mockjs'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 表格表头配置项 TypeScript接口注释
|
* 表格表头配置项 TypeScript接口注释
|
||||||
@ -218,9 +207,31 @@ export default {
|
|||||||
this.listQuery.planHandoverEndTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] : ''
|
this.listQuery.planHandoverEndTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] : ''
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.listLoading = true
|
this.listLoading = true
|
||||||
list(this.listQuery).then((response) => {
|
list(this.listQuery).then(response => {
|
||||||
if (response.data.records) {
|
if (response.data.records) {
|
||||||
this.list = response.data.records
|
// this.list = response.data.records
|
||||||
|
// 11-mes 数据模拟修改
|
||||||
|
|
||||||
|
this.list = response.data.records.map(item => {
|
||||||
|
let startDate = 2022 + '-' + '11-' + Random.integer(1, 29)
|
||||||
|
let endDate = startDate.split('-')
|
||||||
|
endDate[2] = +endDate[2] + Random.integer(0, 3)
|
||||||
|
|
||||||
|
let startHour = Random.integer(1, 22)
|
||||||
|
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
planHandoverTime:
|
||||||
|
startDate + ' ' + (startHour < 10 ? '0' + startHour : '' + startHour) + Random.datetime(':mm:ss'),
|
||||||
|
planOfflineTime:
|
||||||
|
endDate.join('-') +
|
||||||
|
' ' +
|
||||||
|
(startHour + 1 < 10 ? +'0' + (startHour + 1) : 1 + startHour + '') +
|
||||||
|
Random.datetime(':mm:ss')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log("list;', ", this.list)
|
||||||
} else {
|
} else {
|
||||||
this.list.splice(0, this.list.length)
|
this.list.splice(0, this.list.length)
|
||||||
}
|
}
|
||||||
@ -263,7 +274,7 @@ export default {
|
|||||||
const blob = new Blob([response.data])
|
const blob = new Blob([response.data])
|
||||||
const reader = new FileReader()
|
const reader = new FileReader()
|
||||||
reader.readAsDataURL(blob)
|
reader.readAsDataURL(blob)
|
||||||
reader.onload = (e) => {
|
reader.onload = e => {
|
||||||
const a = document.createElement('a')
|
const a = document.createElement('a')
|
||||||
a.download = fileName
|
a.download = fileName
|
||||||
a.href = e.target.result
|
a.href = e.target.result
|
||||||
@ -285,7 +296,7 @@ export default {
|
|||||||
},
|
},
|
||||||
clickTopBtn(val) {
|
clickTopBtn(val) {
|
||||||
if (val === 'add') {
|
if (val === 'add') {
|
||||||
this.addNewInfo()// 新增
|
this.addNewInfo() // 新增
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,7 +10,13 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.$_resizeHandler = debounce(() => {
|
this.$_resizeHandler = debounce(() => {
|
||||||
if (this.chart) {
|
if (this.chart) {
|
||||||
this.chart.resize()
|
if (this.setChartOption) {
|
||||||
|
this.setChartOption()
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chart.resize()
|
||||||
|
})
|
||||||
|
} else
|
||||||
|
this.chart.resize()
|
||||||
}
|
}
|
||||||
}, 100)
|
}, 100)
|
||||||
this.$_initResizeEvent()
|
this.$_initResizeEvent()
|
||||||
|
|||||||
@ -38,8 +38,8 @@
|
|||||||
<!-- 第一行 -->
|
<!-- 第一行 -->
|
||||||
<div class="quality-analysis__body__row-1">
|
<div class="quality-analysis__body__row-1">
|
||||||
<!-- 第一列 -->
|
<!-- 第一列 -->
|
||||||
<div class="flex gap-16">
|
<div class="flex gap-16" style="flex: 1;">
|
||||||
<div class="grow" style="max-width: 24vw;">
|
<div style="width: calc(400px * var(--beilv)); flex: 1;">
|
||||||
<techy-box class="" style="padding: calc(8px * var(--beilv));">
|
<techy-box class="" style="padding: calc(8px * var(--beilv));">
|
||||||
<techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header>
|
<techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header>
|
||||||
<div
|
<div
|
||||||
@ -80,7 +80,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</techy-box>
|
</techy-box>
|
||||||
</div>
|
</div>
|
||||||
<div class="grow" style="max-width: 24vw;">
|
<div style="width: calc(400px * var(--beilv)); flex: 1;">
|
||||||
<techy-box class="" style="padding: calc(8px * var(--beilv));">
|
<techy-box class="" style="padding: calc(8px * var(--beilv));">
|
||||||
<techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header>
|
<techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header>
|
||||||
<div
|
<div
|
||||||
@ -126,8 +126,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 第二列 -->
|
<!-- 第二列 -->
|
||||||
<div class="grow flex gap-16">
|
<div class="flex gap-16" style="flex: 1; width: 1px;">
|
||||||
<div class="width-222">
|
<div class="" style="width: calc(380px * var(--beilv)); flex: 1;">
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header :show-top-icon="false">
|
<techy-analysis-header :show-top-icon="false">
|
||||||
产线缺陷分析
|
产线缺陷分析
|
||||||
@ -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,41 +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="grow">
|
<div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header class="production-rate">
|
<!-- <productionRateHeader
|
||||||
|
@update-data="
|
||||||
|
obj => {
|
||||||
|
dataUpdateToken = obj.str
|
||||||
|
dateMode2 = obj.mode
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
产品成品率
|
产品成品率
|
||||||
|
</productionRateHeader> -->
|
||||||
|
|
||||||
|
<techy-analysis-header :show-top-icon="false">
|
||||||
|
产线成品率
|
||||||
<template v-slot:dateSelect>
|
<template v-slot:dateSelect>
|
||||||
<div class="date-select">
|
<div class="pl-select">
|
||||||
<span
|
<span
|
||||||
:class="{ 'date-select__active': dateMode2 === 'day' }"
|
:class="{ 'pl-select__active': dateMode2 === 'day' }"
|
||||||
@click="
|
@click="
|
||||||
dateMode2 = 'day'
|
dateMode2 = 'day'
|
||||||
dataUpdateToken = '' + Math.random()
|
dataUpdateToken = Math.random()+''
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
日
|
日
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
:class="{ 'date-select__active': dateMode2 === 'month' }"
|
:class="{ 'pl-select__active': dateMode2 === 'month' }"
|
||||||
@click="
|
@click="
|
||||||
dateMode2 = 'month'
|
dateMode2 = 'month'
|
||||||
dataUpdateToken = '' + Math.random()
|
dataUpdateToken = Math.random()+''
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
月
|
月
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="date-select fake-legend">
|
||||||
|
<span>
|
||||||
|
<!-- 产线A -->
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<!-- 产线B -->
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</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%;">
|
||||||
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
|
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
|
||||||
</div>
|
</div>
|
||||||
@ -285,6 +307,7 @@ import TechyBox from './components/TechyBox.vue'
|
|||||||
import TechyTable from './components/TechyTable.vue'
|
import TechyTable from './components/TechyTable.vue'
|
||||||
import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
|
import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
|
||||||
import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
|
import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
|
||||||
|
import productionRateHeader from './components/productionRateHeader.vue'
|
||||||
// import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
|
// import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
|
||||||
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
@ -307,41 +330,46 @@ export default {
|
|||||||
// FaultCategoryChart,
|
// FaultCategoryChart,
|
||||||
PlFaultAnalysisPieChart,
|
PlFaultAnalysisPieChart,
|
||||||
TechyBar,
|
TechyBar,
|
||||||
NewLineStack
|
NewLineStack,
|
||||||
|
productionRateHeader
|
||||||
},
|
},
|
||||||
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: '其他' }
|
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -349,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,
|
||||||
@ -407,7 +435,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['sidebar'])
|
...mapGetters(['sidebar']),
|
||||||
|
unit() {
|
||||||
|
return this.dateMode === 'month' ? '单位: 千片' : '单位: 片'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeFullScreen() {
|
changeFullScreen() {
|
||||||
@ -419,29 +450,39 @@ 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]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
::-webkit-scrollbar {
|
.visual-container >>> ::-webkit-scrollbar {
|
||||||
width: calc(8px * var(--beilv));
|
width: calc(8px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
.visual-container >>> ::-webkit-scrollbar-track {
|
||||||
background-color: #14243f;
|
background-color: #14243f;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
.visual-container >>> ::-webkit-scrollbar-button {
|
||||||
width: calc(8px * var(--beilv));
|
/* width: calc(8px * var(--beilv));
|
||||||
height: calc(8px * var(--beilv));
|
height: calc(8px * var(--beilv)); */
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
background: #5bc4bf9f;
|
background: #5bc4bf9f;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
.visual-container >>> ::-webkit-scrollbar-thumb {
|
||||||
border-radius: calc(8px * var(--beilv));
|
border-radius: calc(8px * var(--beilv));
|
||||||
background: #5bc4bf9f;
|
background: #5bc4bf9f;
|
||||||
}
|
}
|
||||||
@ -627,13 +668,47 @@ export default {
|
|||||||
width: calc(375px * var(--beilv));
|
width: calc(375px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 2040px) {
|
.fake-legend{
|
||||||
|
cursor: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fake-legend span {
|
||||||
|
background: none;
|
||||||
|
cursor: none;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
/* @media all and (max-width: 1680px) {
|
||||||
.production-rate {
|
.production-rate {
|
||||||
/* text-align: left; */
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.production-rate >>> .top-icon:last-of-type {
|
.production-rate >>> .top-icon,
|
||||||
|
.production-rate >>> .date-select {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 1680px) {
|
||||||
|
.production-rate {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-rate >>> .top-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 2048px) {
|
||||||
|
.production-rate {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-rate >>> .date-select > span {
|
||||||
|
background-color: #568588;
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-rate >>> .date-select > span.date-select__active {
|
||||||
|
background-color: #42bbb7;
|
||||||
|
}
|
||||||
|
} */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,119 +1,125 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="techy-analysis-header">
|
<div class="techy-analysis-header">
|
||||||
<template v-if="type === 'special'">
|
<template v-if="type === 'special'">
|
||||||
<div
|
<div class="special-wrapper">
|
||||||
style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
|
<div class="special-wrapper__left"></div>
|
||||||
>
|
<div class="special-wrapper__middle">
|
||||||
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
|
<div class="special-wrapper__middle--inner">
|
||||||
|
<div style="transform: translateX(12%)">
|
||||||
<div style="flex: 1; white-space: nowrap; overflow: hidden;">
|
<span class="top-icon">
|
||||||
<span class="top-icon" style="transform: skewX(-32deg); ">
|
<svg
|
||||||
<svg
|
width="100%"
|
||||||
width="100%"
|
height="100%"
|
||||||
height="100%"
|
viewBox="0 0 56 13"
|
||||||
viewBox="0 0 56 13"
|
version="1.1"
|
||||||
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
>
|
||||||
>
|
<title>left</title>
|
||||||
<title>left</title>
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
|
||||||
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
|
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
||||||
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
||||||
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
||||||
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
<g
|
||||||
<g
|
id="编组-2备份"
|
||||||
id="编组-2备份"
|
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
|
||||||
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
|
>
|
||||||
>
|
<polygon
|
||||||
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
|
id="路径-11"
|
||||||
<polygon
|
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
|
||||||
id="路径-11备份"
|
></polygon>
|
||||||
opacity="0.8"
|
<polygon
|
||||||
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
id="路径-11备份"
|
||||||
></polygon>
|
opacity="0.8"
|
||||||
<polygon
|
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
||||||
id="路径-11备份-3"
|
></polygon>
|
||||||
opacity="0.4"
|
<polygon
|
||||||
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
id="路径-11备份-3"
|
||||||
></polygon>
|
opacity="0.4"
|
||||||
<polygon
|
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
||||||
id="路径-11备份-2"
|
></polygon>
|
||||||
opacity="0.601434"
|
<polygon
|
||||||
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
id="路径-11备份-2"
|
||||||
></polygon>
|
opacity="0.601434"
|
||||||
<polygon
|
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
||||||
id="路径-11备份-4"
|
></polygon>
|
||||||
opacity="0.201434"
|
<polygon
|
||||||
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
id="路径-11备份-4"
|
||||||
></polygon>
|
opacity="0.201434"
|
||||||
|
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
||||||
|
></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</svg>
|
||||||
</g>
|
</span>
|
||||||
</svg>
|
<span class="techy-analysis-header__title">
|
||||||
</span>
|
<slot />
|
||||||
<span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) skewX(-32deg); ">
|
</span>
|
||||||
<slot />
|
<span class="top-icon">
|
||||||
</span>
|
<svg
|
||||||
<span class="top-icon" style="transform: skewX(-32deg); ">
|
width="100%"
|
||||||
<svg
|
height="100%"
|
||||||
width="100%"
|
viewBox="0 0 56 13"
|
||||||
height="100%"
|
version="1.1"
|
||||||
viewBox="0 0 56 13"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
version="1.1"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
>
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
<title>right</title>
|
||||||
>
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<title>right</title>
|
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
|
||||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
||||||
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
|
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
||||||
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
||||||
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
<g
|
||||||
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
id="编组-2备份-2"
|
||||||
<g
|
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
|
||||||
id="编组-2备份-2"
|
>
|
||||||
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
|
<polygon
|
||||||
>
|
id="路径-11"
|
||||||
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
|
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
|
||||||
<polygon
|
></polygon>
|
||||||
id="路径-11备份"
|
<polygon
|
||||||
opacity="0.8"
|
id="路径-11备份"
|
||||||
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
opacity="0.8"
|
||||||
></polygon>
|
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
||||||
<polygon
|
></polygon>
|
||||||
id="路径-11备份-3"
|
<polygon
|
||||||
opacity="0.4"
|
id="路径-11备份-3"
|
||||||
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
opacity="0.4"
|
||||||
></polygon>
|
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
||||||
<polygon
|
></polygon>
|
||||||
id="路径-11备份-2"
|
<polygon
|
||||||
opacity="0.601434"
|
id="路径-11备份-2"
|
||||||
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
opacity="0.601434"
|
||||||
></polygon>
|
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
||||||
<polygon
|
></polygon>
|
||||||
id="路径-11备份-4"
|
<polygon
|
||||||
opacity="0.201434"
|
id="路径-11备份-4"
|
||||||
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
opacity="0.201434"
|
||||||
></polygon>
|
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
||||||
|
></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</svg>
|
||||||
</g>
|
</span>
|
||||||
</svg>
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="special-wrapper__right">
|
||||||
class="legend legend-right"
|
<div class="special-wrapper__right--inner">
|
||||||
style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"
|
<div class="pla" style="margin-right: calc(2px * var(--beilv));">产线A</div>
|
||||||
>
|
<div class="plb">产线B</div>
|
||||||
<div class="legend-item pla" style=" margin-right: calc(8px * var(--beilv));">产线A</div>
|
</div>
|
||||||
<div class="legend-item plb" style=" ">产线B</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -286,13 +292,67 @@ export default {
|
|||||||
width: calc(8px * var(--beilv));
|
width: calc(8px * var(--beilv));
|
||||||
height: calc(8px * var(--beilv));
|
height: calc(8px * var(--beilv));
|
||||||
background: #fffc;
|
background: #fffc;
|
||||||
margin-right: calc(8px * var(--beilv));
|
margin-right: calc(4px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pla::before {
|
.special-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transform: skewX(35deg);
|
||||||
|
background: #fff0;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(22px * var(--beilv));
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__left {
|
||||||
|
width: 1px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.special-wrapper__middle {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__middle--inner {
|
||||||
|
transform: skewX(-35deg);
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__right {
|
||||||
|
padding-left: calc(8px * var(--beilv));
|
||||||
|
padding-right: calc(8px * var(--beilv));
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__right--inner {
|
||||||
|
transform: skewX(-35deg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: calc(4px * var(--beilv));
|
||||||
|
height: 100%;
|
||||||
|
width: calc(100px * var(--beilv));
|
||||||
|
padding-left: calc(6px * var(--beilv));
|
||||||
|
font-size: calc(12px * var(--beilv));
|
||||||
|
color: #fff9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__right--inner > div::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: calc(2px * var(--beilv));
|
||||||
|
width: calc(8px * var(--beilv));
|
||||||
|
height: calc(8px * var(--beilv));
|
||||||
|
}
|
||||||
|
|
||||||
|
.plb::before {
|
||||||
background: linear-gradient(to top, #49fbd6, transparent);
|
background: linear-gradient(to top, #49fbd6, transparent);
|
||||||
}
|
}
|
||||||
.plb::before {
|
.pla::before {
|
||||||
background: linear-gradient(to top, #49b2ff, transparent);
|
background: linear-gradient(to top, #49b2ff, transparent);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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
|
||||||
|
|
||||||
|
|||||||
@ -159,9 +159,42 @@ export default {
|
|||||||
option: {
|
option: {
|
||||||
grid: {
|
grid: {
|
||||||
left: '10%',
|
left: '10%',
|
||||||
top: 48,
|
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,32 +209,33 @@ 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',
|
||||||
// min: -25,
|
// min: -25,
|
||||||
min: this.extraSpaceBetweenZero * -1,
|
min: this.extraSpaceBetweenZero * -1,
|
||||||
name: this.unitName,
|
name: this.unitName + ' ',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fff8',
|
color: '#fff8',
|
||||||
fontSize: 8,
|
fontSize: 12,
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
align: 'right'
|
align: 'right'
|
||||||
},
|
},
|
||||||
|
nameGap: 20,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@ -210,7 +244,7 @@ export default {
|
|||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff8',
|
color: '#fff8',
|
||||||
fontSize: 10,
|
fontSize: 12,
|
||||||
/** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
|
/** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
|
||||||
formatter: function(value, index) {
|
formatter: function(value, index) {
|
||||||
if (value < 0) {
|
if (value < 0) {
|
||||||
|
|||||||
@ -5,6 +5,239 @@
|
|||||||
<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 {
|
||||||
|
constructor() {
|
||||||
|
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
|
||||||
|
|
||||||
|
this.legend = {
|
||||||
|
top: 14,
|
||||||
|
right: 22,
|
||||||
|
itemWidth: 6,
|
||||||
|
itemHeight: 8,
|
||||||
|
textStyle: {
|
||||||
|
color: '#DFF1FECC',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.grid = {
|
||||||
|
top: 72,
|
||||||
|
left: 12,
|
||||||
|
right: 28,
|
||||||
|
bottom: 20,
|
||||||
|
containLabel: true
|
||||||
|
}
|
||||||
|
|
||||||
|
this.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.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,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff3'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fff8' //
|
||||||
|
},
|
||||||
|
margin: 12
|
||||||
|
},
|
||||||
|
data:
|
||||||
|
this.mode === 'month'
|
||||||
|
? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate())
|
||||||
|
.fill(1)
|
||||||
|
.map((_, idx) => idx + 1)
|
||||||
|
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
}
|
||||||
|
|
||||||
|
this.yAxis = [
|
||||||
|
{
|
||||||
|
name: '成品率 ',
|
||||||
|
type: 'value',
|
||||||
|
min: '80',
|
||||||
|
splitNumber: 4,
|
||||||
|
nameGap: 16,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.7)',
|
||||||
|
fontSize: 12,
|
||||||
|
align: 'left',
|
||||||
|
verticalAlign: 'bottom'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'solid',
|
||||||
|
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||||
|
width: '1' // 坐标线的宽度
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} %',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dotted',
|
||||||
|
color: 'rgba(119, 255, 242, 0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
this.series = [
|
||||||
|
{
|
||||||
|
name: 'A1下片机',
|
||||||
|
type: 'line',
|
||||||
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
// smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
// color: 'rgba(50,145,152,0.5)'
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#DDB11266' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
scale: 1.2
|
||||||
|
},
|
||||||
|
data:
|
||||||
|
this.mode === 'month'
|
||||||
|
? Array(30)
|
||||||
|
.fill(1)
|
||||||
|
.map(_ => Random.integer(94, 99))
|
||||||
|
: Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map(_ => Random.integer(94, 99))
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '磨边机',
|
||||||
|
type: 'line',
|
||||||
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
// smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
// color: 'rgba(50,145,152,0.5)'
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#1A99FFCC' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data:
|
||||||
|
this.mode === 'month'
|
||||||
|
? Array(30)
|
||||||
|
.fill(1)
|
||||||
|
.map(_ => Random.integer(94, 99))
|
||||||
|
: Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map(_ => Random.integer(94, 99))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
get option() {
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
optionFilter(option, calcSize = () => {} /** callback */) {
|
||||||
|
let newOption
|
||||||
|
if (Array.isArray(option)) {
|
||||||
|
newOption = []
|
||||||
|
option.forEach(item => {
|
||||||
|
newOption.push(this.optionFilter(item, calcSize))
|
||||||
|
})
|
||||||
|
return newOption
|
||||||
|
} else if (typeof option === 'object') {
|
||||||
|
newOption = {}
|
||||||
|
for (const key in option) {
|
||||||
|
if (key === 'colorStops') newOption[key] = option[key]
|
||||||
|
else if (
|
||||||
|
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||||||
|
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
||||||
|
) {
|
||||||
|
newOption[key] = calcSize(option[key])
|
||||||
|
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||||||
|
}
|
||||||
|
return newOption
|
||||||
|
} else {
|
||||||
|
newOption = calcSize(option)
|
||||||
|
return option
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PlFaultAnalysisPieChart',
|
name: 'PlFaultAnalysisPieChart',
|
||||||
@ -23,329 +256,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
configs: {
|
configs: null
|
||||||
color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'],
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
extraCssText: 'width: 180px !important; ',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 56,
|
|
||||||
left: '2%',
|
|
||||||
right: '5%',
|
|
||||||
bottom: '5%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#ffffff66'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 10,
|
|
||||||
color: '#fff8' //
|
|
||||||
},
|
|
||||||
margin: 12
|
|
||||||
},
|
|
||||||
data:
|
|
||||||
this.mode === 'month'
|
|
||||||
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
|
||||||
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
||||||
},
|
|
||||||
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
name: '成品率 ',
|
|
||||||
type: 'value',
|
|
||||||
min: 'dataMin',
|
|
||||||
splitNumber: 4,
|
|
||||||
nameTextStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.7)',
|
|
||||||
fontSize: 10,
|
|
||||||
align: 'left',
|
|
||||||
verticalAlign: 'bottom'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
|
||||||
width: '1' // 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value} %',
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dotted',
|
|
||||||
color: 'rgba(119, 255, 242, 0.2)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: 'A1下片机',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
areaStyle: {
|
|
||||||
// color: 'rgba(50,145,152,0.5)'
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#FB418C66' // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'transparent' // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
global: false // 缺省为 false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
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
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '磨边机',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
|
|
||||||
areaStyle: {
|
|
||||||
// color: 'rgba(50,145,152,0.5)'
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#DDB11266' // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'transparent' // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
global: false // 缺省为 false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
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
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// {
|
|
||||||
// name: '镀膜机',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
|
|
||||||
// areaStyle: {
|
|
||||||
// // color: 'rgba(50,145,152,0.5)'
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#1A99FF66' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// emphasis: {
|
|
||||||
// focus: 'series'
|
|
||||||
// },
|
|
||||||
// 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
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '包装纸',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
|
|
||||||
// areaStyle: {
|
|
||||||
// // color: 'rgba(50,145,152,0.5)'
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#A691FF66' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// emphasis: {
|
|
||||||
// focus: 'series'
|
|
||||||
// },
|
|
||||||
// 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
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '丝印',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
|
|
||||||
// label: {
|
|
||||||
// show: true,
|
|
||||||
// position: 'top'
|
|
||||||
// },
|
|
||||||
// areaStyle: {
|
|
||||||
// // color: 'rgba(50,145,152,0.5)'
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#49FBD666' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// emphasis: {
|
|
||||||
// focus: 'series'
|
|
||||||
// },
|
|
||||||
// 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
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -356,51 +267,107 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', function() {
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.resize()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
|
|
||||||
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
|
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
|
||||||
|
this.setChartOption()
|
||||||
this.chart.setOption(this.configs)
|
|
||||||
this.chart.resize()
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
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)
|
||||||
|
},
|
||||||
|
calcSize(num) {
|
||||||
|
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||||
|
return num * beilv
|
||||||
|
},
|
||||||
|
setChartOption() {
|
||||||
|
let chartOption = new ChartOption()
|
||||||
|
this.configs = chartOption.optionFilter(chartOption.option, this.calcSize)
|
||||||
|
this.chart.setOption(this.configs)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
243
src/views/QualityManager/components/productionRateHeader.vue
Normal file
243
src/views/QualityManager/components/productionRateHeader.vue
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div class="techy-analysis-header">
|
||||||
|
<div class="special-wrapper">
|
||||||
|
<div class="special-wrapper__left"></div>
|
||||||
|
<div class="special-wrapper__middle">
|
||||||
|
<div class="special-wrapper__middle--inner">
|
||||||
|
<div style="transform: translateX(4%)">
|
||||||
|
<span class="top-icon">
|
||||||
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
viewBox="0 0 56 13"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<title>left</title>
|
||||||
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
|
||||||
|
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
||||||
|
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
||||||
|
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
||||||
|
<g
|
||||||
|
id="编组-2备份"
|
||||||
|
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
|
||||||
|
>
|
||||||
|
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份"
|
||||||
|
opacity="0.8"
|
||||||
|
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-3"
|
||||||
|
opacity="0.4"
|
||||||
|
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-2"
|
||||||
|
opacity="0.601434"
|
||||||
|
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-4"
|
||||||
|
opacity="0.201434"
|
||||||
|
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
||||||
|
></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="techy-analysis-header__title">
|
||||||
|
<slot />
|
||||||
|
</span>
|
||||||
|
<span class="top-icon">
|
||||||
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
viewBox="0 0 56 13"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<title>right</title>
|
||||||
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
|
||||||
|
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
||||||
|
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
||||||
|
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
||||||
|
<g
|
||||||
|
id="编组-2备份-2"
|
||||||
|
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
|
||||||
|
>
|
||||||
|
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份"
|
||||||
|
opacity="0.8"
|
||||||
|
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-3"
|
||||||
|
opacity="0.4"
|
||||||
|
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-2"
|
||||||
|
opacity="0.601434"
|
||||||
|
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-4"
|
||||||
|
opacity="0.201434"
|
||||||
|
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
||||||
|
></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="special-wrapper__right">
|
||||||
|
<div class="special-wrapper__right--inner">
|
||||||
|
<span
|
||||||
|
:class="{ 'date-select__active': dateMode === 'day' }"
|
||||||
|
@click="
|
||||||
|
dateMode = 'day'
|
||||||
|
$emit('update-data', { str: '' + Math.random(), mode: dateMode })
|
||||||
|
"
|
||||||
|
>
|
||||||
|
日
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
:class="{ 'date-select__active': dateMode === 'month' }"
|
||||||
|
@click="
|
||||||
|
dateMode = 'month'
|
||||||
|
$emit('update-data', { str: '' + Math.random(), mode: dateMode })
|
||||||
|
"
|
||||||
|
>
|
||||||
|
月
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TechyAnalysisHeader',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'dafault-type'
|
||||||
|
},
|
||||||
|
showTopIcon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dateMode: 'day'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.techy-analysis-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: calc(16px * var(--beilv));
|
||||||
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techy-analysis-header__title {
|
||||||
|
color: #01cfcc;
|
||||||
|
font-size: calc(15px * var(--beilv));
|
||||||
|
line-height: calc(18px * var(--beilv));
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(56px * var(--beilv));
|
||||||
|
height: calc(12px * var(--beilv));
|
||||||
|
margin-bottom: calc(2px * var(--beilv));
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(12px * var(--beilv));
|
||||||
|
left: 0;
|
||||||
|
transform: skewX(35deg);
|
||||||
|
background: #fff0;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(22px * var(--beilv));
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__left {
|
||||||
|
flex: 1;
|
||||||
|
min-width: calc(56px * var(--beilv));
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__middle {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__middle--inner {
|
||||||
|
transform: skewX(-35deg);
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__right {
|
||||||
|
width: calc(100px * var(--beilv));
|
||||||
|
padding-left: calc(8px * var(--beilv));
|
||||||
|
padding-right: calc(8px * var(--beilv));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__right--inner {
|
||||||
|
transform: skewX(-35deg);
|
||||||
|
border-radius: calc(2px * var(--beilv));
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__right--inner > span {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(40px * var(--beilv));
|
||||||
|
text-align: center;
|
||||||
|
font-size: calc(12px * var(--beilv));
|
||||||
|
line-height: calc(18px * var(--beilv));
|
||||||
|
color: white;
|
||||||
|
background-color: #31878c94;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-wrapper__right--inner span.pl-select__active,
|
||||||
|
.special-wrapper__right--inner span.date-select__active {
|
||||||
|
background-color: #42bbb7;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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 }]
|
||||||
|
|||||||
@ -227,7 +227,10 @@ export default {
|
|||||||
return { ...item, reportNames: ['班组加工数量统计'] }
|
return { ...item, reportNames: ['班组加工数量统计'] }
|
||||||
} else if (item.name === '产线') {
|
} else if (item.name === '产线') {
|
||||||
return { ...item, reportNames: ['产线日产量统计', '产线历史产量记录'] }
|
return { ...item, reportNames: ['产线日产量统计', '产线历史产量记录'] }
|
||||||
|
} else if (item.name === '质量') {
|
||||||
|
return { ...item, quantity: 1, reportNames: ['质量缺陷分析'] }
|
||||||
} else {
|
} else {
|
||||||
|
// mock
|
||||||
return item
|
return item
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user