projects/mesxc-zjl #177
@ -1,19 +1,25 @@
|
||||
<template>
|
||||
<div class="defect-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="defectChart" style="width:600px;height:238px;" v-show="!notMsg"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
export default {
|
||||
name: 'DefectChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
props: {
|
||||
chartTime: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
tempData: []
|
||||
tempData: [],
|
||||
notMsg:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -65,6 +71,26 @@ export default {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
chartTime: {// 监听类型变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
switch(this.chartTime){
|
||||
case '日':
|
||||
this.tempData = this.israDayStatistic
|
||||
break;
|
||||
case '周':
|
||||
this.tempData = this.israWeekStatistic
|
||||
break;
|
||||
case '月':
|
||||
this.tempData = this.israMonthStatistic
|
||||
break;
|
||||
case '年':
|
||||
this.tempData = this.israYearStatistic
|
||||
break;
|
||||
default:
|
||||
}
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -75,6 +101,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (!this.tempData || this.tempData.length == 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
@ -82,7 +114,7 @@ export default {
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('defectChart'));
|
||||
let xData = []
|
||||
let seriesData = []
|
||||
for (let i = 0;i < this.israCheckType.length; i++) {
|
||||
@ -95,12 +127,23 @@ export default {
|
||||
obj.name = this.israCheckType[i]
|
||||
obj.barWidth = 12
|
||||
obj.data = []
|
||||
obj.labe = {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
distance: 10,
|
||||
color: "red"
|
||||
}
|
||||
for (let j = 0;j < this.tempData.length; j++) {
|
||||
let num = 0
|
||||
for (let k = 0; k < this.tempData[j].data.length; k++) {
|
||||
if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
|
||||
obj.data.push(this.tempData[j].data[k].checkNum)
|
||||
num++
|
||||
}
|
||||
}
|
||||
if (num === 0) {
|
||||
obj.data.push(0)
|
||||
}
|
||||
}
|
||||
seriesData.push(obj)
|
||||
}
|
||||
@ -110,10 +153,10 @@ export default {
|
||||
})
|
||||
var option = {
|
||||
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
|
||||
grid: { top: 80, right: 12, bottom: 20, left: 48 },
|
||||
grid: { top: 90, right: 12, bottom: 20, left: 70 },
|
||||
legend: {
|
||||
top: 10,
|
||||
left: 80,
|
||||
top: 0,
|
||||
left: 100,
|
||||
padding: 5,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
@ -179,12 +222,6 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.defect-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.defect-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
<template>
|
||||
<div class="defect-class-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="defectClassChart" class="defect-class-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
export default {
|
||||
name: 'DefectClassChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
props: {
|
||||
chartType: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -43,6 +49,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (!this.israDayStatistic || this.israDayStatistic.length == 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
@ -50,7 +62,7 @@ export default {
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('defectClassChart'));
|
||||
let tempData = []
|
||||
let xData = []
|
||||
let yData = []
|
||||
@ -66,28 +78,14 @@ export default {
|
||||
})
|
||||
var option = {
|
||||
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
|
||||
grid: { top: 40, right: 12, bottom: 80, left: 60 },
|
||||
// legend: {
|
||||
// top: 10,
|
||||
// left: 80,
|
||||
// padding: 5,
|
||||
// itemWidth: 12,
|
||||
// itemHeight: 12,
|
||||
// itemGap: 12,
|
||||
// height: 12,
|
||||
// textStyle: {
|
||||
// color: "#DFF1FE",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// data:['a','b','c','d','e'],
|
||||
// },
|
||||
grid: { top: 40, right: 12, bottom: 65, left: 70 },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#fffc",
|
||||
fontSize: 12,
|
||||
rotate: 45
|
||||
rotate: 25
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
@ -136,7 +134,9 @@ export default {
|
||||
barWidth: 12,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
position: 'top',
|
||||
distance: 10,
|
||||
color: "#fffc"
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
||||
@ -1,15 +1,21 @@
|
||||
<template>
|
||||
<div class="energe-monitoring-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:900px;height:370px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
export default {
|
||||
name: 'EnergeMonitoringChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -42,16 +48,22 @@ export default {
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('energeMonitoringChart'));
|
||||
let xData = []
|
||||
let yData = []
|
||||
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
|
||||
xData.push(item.lineName)
|
||||
yData.push(item.useQuantity)
|
||||
})
|
||||
var option = option = {
|
||||
if (yData.length === 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
var option = {
|
||||
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@ -91,11 +103,13 @@ export default {
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '单位kwh',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
type: 'value',
|
||||
name: '单位',
|
||||
// min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
<template>
|
||||
<div class="gas-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id='flueGasChart' class="flue-gas-chart" style="width:600px;height:250px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
|
||||
export default {
|
||||
name: 'GasChart',
|
||||
name: 'FlueGasChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
components:{ NotMsg },
|
||||
props: {
|
||||
chartType: '',
|
||||
chartTime: ''
|
||||
@ -26,7 +30,8 @@ export default {
|
||||
'#2aa1ff',
|
||||
];
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -136,7 +141,13 @@ export default {
|
||||
}
|
||||
default:
|
||||
}
|
||||
temp2.length > 0 && temp2.map(i => {
|
||||
if (temp2.length === 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
temp2.map(i => {
|
||||
xData.push(i.time)
|
||||
yData.push(i.value)
|
||||
})
|
||||
@ -172,7 +183,7 @@ export default {
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('flueGasChart'));
|
||||
var option = {
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
@ -192,7 +203,7 @@ export default {
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
name: this.chartType === '氧气含量' ? '单位%':'单位mg/m³',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
@ -218,6 +229,7 @@ export default {
|
||||
series: seriesData,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
className: "gas-chart-tooltip"
|
||||
},
|
||||
}
|
||||
option && this.chart.setOption(option)
|
||||
@ -227,8 +239,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gas-chart {
|
||||
.flue-gas-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.gas-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.gas-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,19 @@
|
||||
<!--
|
||||
filename: GasChart.vue
|
||||
author: liubin
|
||||
date: 2023-12-12 10:53:49
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="gas-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id='gasChart' class="gas-chart" style="width:600px;height:200px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
|
||||
export default {
|
||||
name: 'GasChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
components:{ NotMsg },
|
||||
props: {
|
||||
chartType: '', // 能源类型
|
||||
chartTime: ''
|
||||
@ -33,7 +30,8 @@ export default {
|
||||
'#2aa1ff',
|
||||
];
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -142,6 +140,12 @@ export default {
|
||||
yData = this.gasChartMsg.sumGas2ForYear || []
|
||||
}
|
||||
xData = this.getXdata()
|
||||
}
|
||||
if (yData.length === 0) {
|
||||
this.notMsg = true
|
||||
return
|
||||
} else {
|
||||
this.notMsg = false
|
||||
}
|
||||
if (yData.length == 0) {
|
||||
seriesData = []
|
||||
@ -175,7 +179,7 @@ export default {
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart = echarts.init(document.getElementById('gasChart'));
|
||||
var option = {
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 60 },
|
||||
@ -195,7 +199,7 @@ export default {
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位m³/h',
|
||||
name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
|
||||
@ -1,56 +1,28 @@
|
||||
<template>
|
||||
<div class="isra-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="israChart" class="isra-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
|
||||
export default {
|
||||
name: 'ISRAChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
components:{ NotMsg },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
notMsg:true,
|
||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||
chartData: [],
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
bottom: '3%',
|
||||
left: 'center',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 0,
|
||||
subtext: '总数',
|
||||
top: '43%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
lineHeight: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
series: []
|
||||
},
|
||||
chartData: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
computed: {
|
||||
@ -61,23 +33,33 @@ export default {
|
||||
watch: {
|
||||
israChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
this.chartData = newVal
|
||||
this.chartData = newVal || []
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
updateChart() {
|
||||
console.log('update')
|
||||
let num = 0
|
||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
||||
num+=i.num
|
||||
})
|
||||
this.chart.setOption({
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
if (this.chartData && this.chartData.length > 0) {
|
||||
this.notMsg = false
|
||||
} else {
|
||||
this.notMsg = true
|
||||
return
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById('israChart'));
|
||||
var option = {
|
||||
title:{
|
||||
text: num,
|
||||
subtext: '总数',
|
||||
@ -94,6 +76,14 @@ export default {
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
bottom: '3%',
|
||||
left: 'center',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series:[{
|
||||
name: 'ISRA缺陷检测',
|
||||
type: 'pie',
|
||||
@ -126,8 +116,13 @@ export default {
|
||||
]
|
||||
}
|
||||
}
|
||||
}))}]
|
||||
})
|
||||
}))}],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
className: "isra-chart-tooltip"
|
||||
},
|
||||
}
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
},
|
||||
};
|
||||
@ -139,3 +134,13 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.isra-chart-tooltip {
|
||||
background: #0a2b4f77 !important;
|
||||
border: none !important;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.isra-chart-tooltip * {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
27
src/views/databoard/components/NotMsg.vue
Normal file
27
src/views/databoard/components/NotMsg.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="notmsg">暂无数据</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotMsg',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.notmsg {
|
||||
padding-top: 72px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,21 @@
|
||||
<template>
|
||||
<div class="num-rate-chart"></div>
|
||||
<div>
|
||||
<NotMsg v-show="notMsg"/>
|
||||
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:370px;" v-show='!notMsg'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
import NotMsg from './../components/NotMsg'
|
||||
export default {
|
||||
name: 'NumRateChart',
|
||||
mixins: [resize],
|
||||
components:{ NotMsg },
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
notMsg:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -35,14 +41,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
if (this.productline && this.productline.length > 0) {
|
||||
this.notMsg = false
|
||||
} else {
|
||||
this.notMsg = true
|
||||
return
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
let xData = []
|
||||
let outputNum = []
|
||||
let passRate = []
|
||||
@ -51,6 +55,14 @@ export default {
|
||||
outputNum.push(item.outputNum)
|
||||
passRate.push(item.passRate*100)
|
||||
})
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById('numRateChart'));
|
||||
var option = {
|
||||
grid: { top: 32, right: 60, bottom: 20, left: 60 },
|
||||
tooltip: {
|
||||
@ -61,7 +73,7 @@ export default {
|
||||
className: "num-rate-chart-tooltip"
|
||||
},
|
||||
legend: {
|
||||
data: ['产线产量', '合格率'],
|
||||
data: ['产线产量', '良品率'],
|
||||
textStyle: {
|
||||
color: "#DFF1FE",
|
||||
fontSize: 12,
|
||||
@ -91,6 +103,11 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量/片',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'right',
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
@ -111,6 +128,11 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
name: '良品率',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 10,
|
||||
align: 'LEFT',
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
@ -148,7 +170,7 @@ export default {
|
||||
data: outputNum
|
||||
},
|
||||
{
|
||||
name: '合格率',
|
||||
name: '良品率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
|
||||
@ -49,10 +49,10 @@ export default {
|
||||
.switcher {
|
||||
:deep(.el-switch__core) {
|
||||
border: none;
|
||||
background-color:rgba(3, 35, 60, 1);
|
||||
background-color:#02457e;
|
||||
|
||||
&::after {
|
||||
background-color: #02457e;
|
||||
background-color: #03233c;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="各工序缺陷汇总" size="small" style="">
|
||||
<Container name="各工序缺陷汇总" size="middle" style="">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
|
||||
</div>
|
||||
@ -21,13 +21,12 @@ export default {
|
||||
return {
|
||||
config: {
|
||||
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
|
||||
// headerHeight: '17',
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60],
|
||||
align: ['center'],
|
||||
data: [],
|
||||
data: [[1, 'Y61', '磨边','100','气泡']],
|
||||
rowNum: 10
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="能源监控" size="small" style="">
|
||||
<Container name="能源监控" size="large" style="">
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<EnergeMonitoringChart/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="设备报警" size="small" style="">
|
||||
<Container name="设备报警" size="middle" style="">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
|
||||
</div>
|
||||
@ -19,10 +19,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// config:{}
|
||||
config: {
|
||||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
|
||||
// headerHeight: '17',
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
@ -46,20 +44,20 @@ export default {
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
watch:{
|
||||
sjgEquipment: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.sjgEquipment.map((item, index) => [
|
||||
index+1,
|
||||
item.name,
|
||||
item.code,
|
||||
item.status,
|
||||
item.error? '是': '否'
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['eqScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
// watch:{
|
||||
// sjgEquipment: {
|
||||
// handler(newVal, oldVal) {
|
||||
// let outArr = this.sjgEquipment.map((item, index) => [
|
||||
// index+1,
|
||||
// item.name,
|
||||
// item.code,
|
||||
// item.status,
|
||||
// item.error? '是': '否'
|
||||
// ]);
|
||||
// this.config.data = outArr
|
||||
// this.$refs['eqScrollBoard'].updateRows(outArr)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="产线产量及良品率" size="small" style="">
|
||||
<Container name="产线产量及良品率" size="large" style="">
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<NumRateChart />
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container';
|
||||
|
||||
@ -1,11 +1,24 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="工单监控" size="small" style="">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/>
|
||||
<Container name="工单监控" size="middle" style="">
|
||||
<div style="padding: 5px 10px;" class="WOMonitoring">
|
||||
<!-- <dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/> -->
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 575px"
|
||||
max-height="380"
|
||||
:header-cell-style="{ background:'rgba(32, 55, 96, 0.8)', color: '#fff', height: '35px', padding: 0 }"
|
||||
:row-style="rowStyle">
|
||||
<el-table-column fixed type="index" :index="indexMethod" label="序号" width="55"></el-table-column>
|
||||
<el-table-column fixed prop="name" show-overflow-tooltip label="工单名称" width="150"></el-table-column>
|
||||
<el-table-column prop="specifications" show-overflow-tooltip label="规格" width="150"></el-table-column>
|
||||
<el-table-column prop="lines" show-overflow-tooltip label="产线" width="70"></el-table-column>
|
||||
<el-table-column prop="status" show-overflow-tooltip label="工单状态" width="100"></el-table-column>
|
||||
<el-table-column prop="planFinishTime" show-overflow-tooltip label="计划完成时间" width="140"></el-table-column>
|
||||
<el-table-column prop="planQuantity" show-overflow-tooltip label="计划产量" width="110"></el-table-column>
|
||||
<el-table-column prop="planAssignQuantity" show-overflow-tooltip label="实际产量" width="110"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
@ -19,47 +32,99 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'],
|
||||
// headerHeight: '17',
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60, 120, 80, 60, 80, 120, 120, 120],
|
||||
align: ['center'],
|
||||
data: [
|
||||
[1, '工单1', '行1列3', '', '','','',''],
|
||||
[2, '工单2', '行2列3', '', '','','',''],
|
||||
[3, '工单3', '行3列3', '', '','','',''],
|
||||
[4, '工单4', '行4列3', '', '','','',''],
|
||||
[5, '工单5', '行5列3', '', '','','',''],
|
||||
[6, '工单6', '行6列3', '', '','','',''],
|
||||
[7, '工单7', '行7列3', '', '','','',''],
|
||||
[8, '工单8', '行8列3', '', '','','',''],
|
||||
[9, '工单9', '行9列3', '', '','','',''],
|
||||
[10, '工单10', '行10列3', '', '','','','']
|
||||
],
|
||||
rowNum: 10
|
||||
tableData: [
|
||||
{name: '1111111111111111', specifications: '22222', lines: 'Y65', status: '已完成',planFinishTime:"2023-12-23 12:12:12"},
|
||||
{name: '11111', specifications: '22222'},
|
||||
{name: '11111', specifications: '22222'},
|
||||
{name: '11111', specifications: '22222'},
|
||||
{name: '11111', specifications: '22222'},
|
||||
{name: '11111'},
|
||||
{name: '11111'},
|
||||
{name: '11111'},
|
||||
{name: '11111'},
|
||||
{name: '11111'},
|
||||
{name: '11111'},
|
||||
{name: '11111'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
rowStyle(v){
|
||||
if (v.rowIndex % 2 === 0) {
|
||||
return {
|
||||
background: 'rgba(14, 32, 62, 0.8)',
|
||||
color: '#fff',
|
||||
height: '35px',
|
||||
lineHeight:'35px',
|
||||
padding: 0,
|
||||
fontSize:'12px'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
background: 'rgba(32, 55, 96, 0.8)',
|
||||
color: '#fff',
|
||||
height: '35px',
|
||||
lineHeight:'35px',
|
||||
padding: 0,
|
||||
fontSize:'12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
order: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.order.map((item, index) => [
|
||||
index+1,
|
||||
item.name,
|
||||
item.specifications,
|
||||
item.lines,
|
||||
item.status,
|
||||
item.planFinishTime,
|
||||
item.planQuantity,
|
||||
item.planAssignQuantity
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['worderScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
indexMethod(index) {
|
||||
return index+1;
|
||||
}
|
||||
},
|
||||
// watch:{
|
||||
// order: {
|
||||
// handler(newVal, oldVal) {
|
||||
// console.log(newVal)
|
||||
// this.tableData = this.order
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.WOMonitoring {
|
||||
.el-table {
|
||||
background-color: transparent;
|
||||
tr {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.el-table tbody tr {
|
||||
pointer-events:none;
|
||||
}
|
||||
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: none;
|
||||
border-right: 1px solid #0d1728;
|
||||
}
|
||||
.el-table td.el-table__cell:last-child, .el-table th.el-table__cell.is-leaf:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.el-table--medium .el-table__cell {
|
||||
padding: 0;
|
||||
}
|
||||
// 滚动条
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color:#14305F;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color:#14305F;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #14305F;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #118CA2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #06214B;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,7 +11,7 @@
|
||||
style="
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: 2fr 3fr 3fr;
|
||||
grid-template-rows: auto;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
@ -34,6 +34,7 @@
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
color: #3ce8ff
|
||||
">
|
||||
{{energyInfo.elecQty1}}kwh
|
||||
</span>
|
||||
@ -51,7 +52,7 @@
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">水耗量</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}m³</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{energyInfo.waterQty}}m³</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -66,7 +67,7 @@
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">天然气I</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas1Now}}</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{sumGasInfo.sumGas1Now}}</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -81,7 +82,7 @@
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">电耗量</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.elecQty2}}kwh</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{energyInfo.elecQty2}}kwh</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
@ -96,7 +97,7 @@
|
||||
">
|
||||
<p style="margin: 0; line-height: inherit">天然气II</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas2Now}}</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1.3;color: #3ce8ff">{{sumGasInfo.sumGas2Now}}</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
|
||||
</div>
|
||||
<div class="chart" style="height: 250px;margin-top: 10px;">
|
||||
<FlueGas :chartType='chartType' :chartTime='chartTime'/>
|
||||
<FlueGasChart :chartType='chartType' :chartTime='chartTime'/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@ -112,7 +112,7 @@ import ShadowRect from '../components/ShadowRect.vue';
|
||||
import KilnLine from '../components/line';
|
||||
// import Switcher from '../components/Switcher';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup';
|
||||
import FlueGas from '../components/FlueGas';
|
||||
import FlueGasChart from '../components/FlueGasChart';
|
||||
|
||||
export default {
|
||||
name: 'GasHandle',
|
||||
@ -121,7 +121,7 @@ export default {
|
||||
ShadowRect,
|
||||
KilnLine,
|
||||
SelectorBtnGroup,
|
||||
FlueGas,
|
||||
FlueGasChart,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="产线当日缺陷分类" size="small">
|
||||
<Container name="产线当日缺陷分类" size="middle">
|
||||
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
|
||||
<div class="chart" style="height: 370px; margin-top: 8px;">
|
||||
<div class="chart" style="height: 375px; margin-top: 8px;">
|
||||
<DefectClassChart :chartType='chartType'/>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<div style="flex: 1;" class="orderContainer">
|
||||
<Container name="订单完成情况" size="small" style="">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
|
||||
@ -9,6 +9,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container'
|
||||
import { formatDate } from '@/utils'
|
||||
export default {
|
||||
name: 'OrderStatus',
|
||||
components: { Container },
|
||||
@ -25,32 +26,28 @@ export default {
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
// columnWidth: [60],
|
||||
columnWidth: [155, 180, 150],
|
||||
align: ['center'],
|
||||
data: [
|
||||
['2023-12-01', '客户1', '行1列3', ''],
|
||||
['2023-12-01', '客户2', '行2列3', ''],
|
||||
['2023-12-01', '客户3', '行3列3', ''],
|
||||
['2023-12-01', '客户4', '行4列3', ''],
|
||||
['2023-12-01', '客户5', '行5列3', ''],
|
||||
['2023-12-01', '客户6', '行6列3', ''],
|
||||
['2023-12-01', '客户7', '行7列3', ''],
|
||||
['2023-12-01', '客户8', '行8列3', ''],
|
||||
['2023-12-01', '客户9', '行9列3', ''],
|
||||
['2023-12-01', '客户10', '行10列3', '']
|
||||
],
|
||||
data: [],
|
||||
rowNum: 6
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
watch:{
|
||||
order: {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.order.map((item) => [
|
||||
item.startProduceTime,
|
||||
item.name,
|
||||
item.specifications,
|
||||
item.completeRate
|
||||
formatDate(item.planStartTime) || '',
|
||||
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
|
||||
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
|
||||
`<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
|
||||
<div class="box" style="display:inline-block;">
|
||||
<div class="bg"></div>
|
||||
<div class="rount" style="-webkit-transform:rotate(${(item.completeRate?(item.completeRate*100).toFixed(2):0)<=50?3.6*item.completeRate*100:180}deg)"></div>
|
||||
<div class="bg2"></div>
|
||||
<div style="${item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'}" class="rount2"></div>
|
||||
</div>`
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['orderScrollBoard'].updateRows(outArr)
|
||||
@ -59,3 +56,13 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.orderContainer {
|
||||
.box{width:16px;height:12px;margin:1px auto;position:relative;}
|
||||
.box div{position:absolute;top:0;left:0;border-radius:50%;height:16px;width:16px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
|
||||
.box .bg{border:silver 4px solid}
|
||||
.box .bg2{border:silver 4px solid;clip:rect(0,8px,20px,0);}
|
||||
.box .rount{border:#47FF27 4px solid;clip:rect(0,8px,24px,0);-webkit-transform:rotate(0deg);}
|
||||
.box .rount2{border:#47FF27 4px solid;clip:rect(0,40px,40px,8px);-webkit-transform:rotate(0deg);display:none}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div style="flex: 2;">
|
||||
<Container name="本日生产良品率" size="small">
|
||||
<Container name="本日生产良品率" size="large">
|
||||
<div style="padding: 5px 10px;">
|
||||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
|
||||
</div>
|
||||
@ -27,7 +26,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container'
|
||||
@ -54,13 +52,7 @@ export default {
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [60],
|
||||
align: ['center'],
|
||||
data: [
|
||||
[1, '产线1', '49%', '', ''],
|
||||
[2, '产线2', '49%', '', ''],
|
||||
[3, '产线3', '49%', '', ''],
|
||||
[4, '产线4', '49%', '', ''],
|
||||
[5, '产线5', '49%', '', '']
|
||||
],
|
||||
data: [],
|
||||
rowNum: 5
|
||||
},
|
||||
chartType:false,
|
||||
@ -72,10 +64,10 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
let outArr = this.yieldRateTable.map((item) => [
|
||||
item.lineName,
|
||||
item.first,
|
||||
item.second,
|
||||
item.product,
|
||||
item.waste
|
||||
item.first?(item.first*100).toFixed(2)+'%':'0.00%',
|
||||
item.second?(item.second*100).toFixed(2)+'%':'0.00%',
|
||||
item.product?(item.product*100).toFixed(2)+'%':'0.00%',
|
||||
item.waste?(item.waste*100).toFixed(2)+'%':'0.00%'
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['yieldRateScrollBoard'].updateRows(outArr)
|
||||
|
||||
@ -94,7 +94,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
|
||||
};
|
||||
const onWsMessage = (event) => {
|
||||
const jsonStr = event.data;
|
||||
writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
||||
// writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
|
||||
this.messageCallback(jsonStr);
|
||||
};
|
||||
const onWsClose = (event) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user