mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

驾驶舱提测ui

Browse Source
This commit is contained in:
朱菊兰 2024-01-11 13:44:38 +08:00
parent b1458827f1
commit 6c02990cb5
20 changed files with 441 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/databoard/components/DefectChart.vue
View File

@ -1,19 +1,25 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'DefectChart', name: 'DefectChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg },
props: { props: {
chartTime: '' chartTime: ''
}, },
data() { data() {
return { return {
chart: null, chart: null,
tempData: [] tempData: [],
notMsg:false
} }
}, },
computed: { computed: {
@ -65,6 +71,26 @@ export default {
this.updateChart() 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() { mounted() {
@ -75,6 +101,12 @@ export default {
}, },
methods: { methods: {
updateChart() { updateChart() {
if (!this.tempData || this.tempData.length == 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if ( if (
this.chart !== null && this.chart !== null &&
this.chart !== '' && this.chart !== '' &&
@ -82,7 +114,7 @@ export default {
) { ) {
this.chart.dispose() this.chart.dispose()
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('defectChart'));
let xData = [] let xData = []
let seriesData = [] let seriesData = []
for (let i = 0;i < this.israCheckType.length; i++) { for (let i = 0;i < this.israCheckType.length; i++) {
@ -95,12 +127,23 @@ export default {
obj.name = this.israCheckType[i] obj.name = this.israCheckType[i]
obj.barWidth = 12 obj.barWidth = 12
obj.data = [] obj.data = []
obj.labe = {
show: true,
position: 'inside',
distance: 10,
color: "red"
}
for (let j = 0;j < this.tempData.length; j++) { for (let j = 0;j < this.tempData.length; j++) {
let num = 0
for (let k = 0; k < this.tempData[j].data.length; k++) { for (let k = 0; k < this.tempData[j].data.length; k++) {
if (this.israCheckType[i] === this.tempData[j].data[k].checkType) { if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
obj.data.push(this.tempData[j].data[k].checkNum) obj.data.push(this.tempData[j].data[k].checkNum)
num++
} }
} }
if (num === 0) {
obj.data.push(0)
}
} }
seriesData.push(obj) seriesData.push(obj)
} }
@ -110,10 +153,10 @@ export default {
}) })
var option = { var option = {
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"], 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: { legend: {
top: 10, top: 0,
left: 80, left: 100,
padding: 5, padding: 5,
itemWidth: 12, itemWidth: 12,
itemHeight: 12, itemHeight: 12,
@ -179,12 +222,6 @@ export default {
} }
} }
</script> </script>
<style scoped lang="scss">
.defect-chart {
width: 100%;
height: 100%;
}
</style>
<style> <style>
.defect-chart-tooltip { .defect-chart-tooltip {
background: #0a2b4f77 !important; background: #0a2b4f77 !important;

40
src/views/databoard/components/DefectClassChart.vue
View File

@ -1,18 +1,24 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'DefectClassChart', name: 'DefectClassChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg },
props: { props: {
chartType: '' chartType: ''
}, },
data() { data() {
return { return {
chart: null chart: null,
notMsg:false
} }
}, },
computed: { computed: {
@ -43,6 +49,12 @@ export default {
}, },
methods: { methods: {
updateChart() { updateChart() {
if (!this.israDayStatistic || this.israDayStatistic.length == 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if ( if (
this.chart !== null && this.chart !== null &&
this.chart !== '' && this.chart !== '' &&
@ -50,7 +62,7 @@ export default {
) { ) {
this.chart.dispose() this.chart.dispose()
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('defectClassChart'));
let tempData = [] let tempData = []
let xData = [] let xData = []
let yData = [] let yData = []
@ -66,28 +78,14 @@ export default {
}) })
var option = { var option = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'], color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
grid: { top: 40, right: 12, bottom: 80, left: 60 }, grid: { top: 40, right: 12, bottom: 65, left: 70 },
// 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'],
// },
xAxis: { xAxis: {
type: "category", type: "category",
data: xData, data: xData,
axisLabel: { axisLabel: {
color: "#fffc", color: "#fffc",
fontSize: 12, fontSize: 12,
rotate: 45 rotate: 25
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
@ -136,7 +134,9 @@ export default {
barWidth: 12, barWidth: 12,
label: { label: {
show: true, show: true,
position: 'top' position: 'top',
distance: 10,
color: "#fffc"
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

32
src/views/databoard/components/EnergeMonitoringChart.vue
View File

@ -1,15 +1,21 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'EnergeMonitoringChart', name: 'EnergeMonitoringChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg },
data() { data() {
return { return {
chart: null chart: null,
notMsg:true
} }
}, },
computed: { computed: {
@ -42,16 +48,22 @@ export default {
) { ) {
this.chart.dispose() this.chart.dispose()
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('energeMonitoringChart'));
let xData = [] let xData = []
let yData = [] let yData = []
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => { this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
xData.push(item.lineName) xData.push(item.lineName)
yData.push(item.useQuantity) 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'], // 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -91,11 +103,13 @@ export default {
], ],
yAxis: [ yAxis: [
{ {
name: '单位kwh',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value', type: 'value',
name: '单位',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,

38
src/views/databoard/components/FlueGas.vue → src/views/databoard/components/FlueGasChart.vue
View File

@ -1,15 +1,19 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'GasChart', name: 'FlueGasChart',
mixins: [resize], mixins: [resize],
components: {}, components:{ NotMsg },
props: { props: {
chartType: '', chartType: '',
chartTime: '' chartTime: ''
@ -26,7 +30,8 @@ export default {
'#2aa1ff', '#2aa1ff',
]; ];
return { return {
chart: null chart: null,
notMsg:false
}; };
}, },
computed: { computed: {
@ -136,7 +141,13 @@ export default {
} }
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) xData.push(i.time)
yData.push(i.value) yData.push(i.value)
}) })
@ -172,7 +183,7 @@ export default {
) { ) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例 this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('flueGasChart'));
var option = { var option = {
color: colors, color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 }, grid: { top: 32, right: 12, bottom: 20, left: 48 },
@ -192,7 +203,7 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: '单位m³/h', name: this.chartType === '氧气含量' ? '单位%':'单位mg/m³',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,
@ -218,6 +229,7 @@ export default {
series: seriesData, series: seriesData,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
className: "gas-chart-tooltip"
}, },
} }
option && this.chart.setOption(option) option && this.chart.setOption(option)
@ -227,8 +239,18 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.gas-chart { .flue-gas-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<style>
.gas-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.gas-chart-tooltip * {
color: #fff !important;
}
</style>

28
src/views/databoard/components/GasChart.vue
View File

@ -1,22 +1,19 @@
<!--
filename: GasChart.vue
author: liubin
date: 2023-12-12 10:53:49
description:
-->
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'GasChart', name: 'GasChart',
mixins: [resize], mixins: [resize],
components: {}, components:{ NotMsg },
props: { props: {
chartType: '', // 能源类型 chartType: '', // 能源类型
chartTime: '' chartTime: ''
@ -33,7 +30,8 @@ export default {
'#2aa1ff', '#2aa1ff',
]; ];
return { return {
chart: null chart: null,
notMsg:false
}; };
}, },
computed: { computed: {
@ -143,6 +141,12 @@ export default {
} }
xData = this.getXdata() xData = this.getXdata()
} }
if (yData.length === 0) {
this.notMsg = true
return
} else {
this.notMsg = false
}
if (yData.length == 0) { if (yData.length == 0) {
seriesData = [] seriesData = []
}else { }else {
@ -175,7 +179,7 @@ export default {
) { ) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例 this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
} }
this.chart = echarts.init(this.$el); this.chart = echarts.init(document.getElementById('gasChart'));
var option = { var option = {
color: colors, color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 60 }, grid: { top: 32, right: 12, bottom: 20, left: 60 },
@ -195,7 +199,7 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: '单位m³/h', name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,

93
src/views/databoard/components/ISRAChart.vue
View File

@ -1,56 +1,28 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'ISRAChart', name: 'ISRAChart',
mixins: [resize], mixins: [resize],
components: {}, components:{ NotMsg },
props: {}, props: {},
data() { data() {
return { return {
chart: null, chart: null,
notMsg:true,
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'], colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
chartData: [], 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: []
},
}; };
}, },
mounted() {
this.initChart();
},
activated() { activated() {
}, },
computed: { computed: {
@ -61,23 +33,33 @@ export default {
watch: { watch: {
israChartMsg: { israChartMsg: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
this.chartData = newVal this.chartData = newVal || []
this.updateChart() this.updateChart()
} }
} }
}, },
methods: { methods: {
initChart() {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
updateChart() { updateChart() {
console.log('update') console.log('update')
let num = 0 let num = 0
this.chartData && this.chartData.length > 0 && this.chartData.map(i => { this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
num+=i.num 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:{ title:{
text: num, text: num,
subtext: '总数', subtext: '总数',
@ -94,6 +76,14 @@ export default {
color: '#fff00', color: '#fff00',
}, },
}, },
legend: {
bottom: '3%',
left: 'center',
icon: 'circle',
textStyle: {
color: '#fff'
}
},
series:[{ series:[{
name: 'ISRA缺陷检测', name: 'ISRA缺陷检测',
type: 'pie', 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%; height: 100%;
} }
</style> </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
View 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>

46
src/views/databoard/components/NumRateChart.vue
View File

@ -1,15 +1,21 @@
<template> <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> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import resize from './../mixins/resize' import resize from './../mixins/resize'
import NotMsg from './../components/NotMsg'
export default { export default {
name: 'NumRateChart', name: 'NumRateChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg },
data() { data() {
return { return {
chart: null chart: null,
notMsg:true
} }
}, },
computed: { computed: {
@ -31,18 +37,16 @@ export default {
this.$el.addEventListener('resize', () => { this.$el.addEventListener('resize', () => {
console.log('resziing.....'); console.log('resziing.....');
}); });
this.updateChart() this.updateChart()
}, },
methods: { methods: {
updateChart() { updateChart() {
if ( if (this.productline && this.productline.length > 0) {
this.chart !== null && this.notMsg = false
this.chart !== '' && } else {
this.chart !== undefined this.notMsg = true
) { return
this.chart.dispose()
} }
this.chart = echarts.init(this.$el);
let xData = [] let xData = []
let outputNum = [] let outputNum = []
let passRate = [] let passRate = []
@ -51,6 +55,14 @@ export default {
outputNum.push(item.outputNum) outputNum.push(item.outputNum)
passRate.push(item.passRate*100) 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 = { var option = {
grid: { top: 32, right: 60, bottom: 20, left: 60 }, grid: { top: 32, right: 60, bottom: 20, left: 60 },
tooltip: { tooltip: {
@ -61,7 +73,7 @@ export default {
className: "num-rate-chart-tooltip" className: "num-rate-chart-tooltip"
}, },
legend: { legend: {
data: ['产线产量', '合格率'], data: ['产线产量', '良品率'],
textStyle: { textStyle: {
color: "#DFF1FE", color: "#DFF1FE",
fontSize: 12, fontSize: 12,
@ -91,6 +103,11 @@ export default {
{ {
type: 'value', type: 'value',
name: '产量/片', name: '产量/片',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
@ -111,6 +128,11 @@ export default {
{ {
type: 'value', type: 'value',
name: '良品率', name: '良品率',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'LEFT',
},
axisLabel: { axisLabel: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
@ -148,7 +170,7 @@ export default {
data: outputNum data: outputNum
}, },
{ {
name: '合格率', name: '良品率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
tooltip: { tooltip: {

4
src/views/databoard/components/Switcher.vue
View File

@ -49,10 +49,10 @@ export default {
.switcher { .switcher {
:deep(.el-switch__core) { :deep(.el-switch__core) {
border: none; border: none;
background-color:rgba(3, 35, 60, 1); background-color:#02457e;
&::after { &::after {
background-color: #02457e; background-color: #03233c;
} }
} }

5
src/views/databoard/deepProcessing/DefectSum.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div style="flex: 1;"> <div style="flex: 1;">
<Container name="各工序缺陷汇总" size="small" style=""> <Container name="各工序缺陷汇总" size="middle" style="">
<div style="padding: 5px 10px;"> <div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/> <dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
</div> </div>
@ -21,13 +21,12 @@ export default {
return { return {
config: { config: {
header: ['序号', '产线', '工序','损耗片数','缺陷类型'], header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60], columnWidth: [60],
align: ['center'], align: ['center'],
data: [], data: [[1, 'Y61', '磨边','100','气泡']],
rowNum: 10 rowNum: 10
} }
} }

12
src/views/databoard/deepProcessing/EnergyMonitoring.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<div style="flex: 1;"> <Container name="能源监控" size="large" style="">
<Container name="能源监控" size="small" style=""> <div class="chart" style="height: 370px; margin-top: 8px;">
<div class="chart" style="height: 370px; margin-top: 8px;"> <EnergeMonitoringChart/>
<EnergeMonitoringChart/> </div>
</div> </Container>
</Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container.vue'; import Container from '../components/Container.vue';

34
src/views/databoard/deepProcessing/EqAlarm.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div style="flex: 1;"> <div style="flex: 1;">
<Container name="设备报警" size="small" style=""> <Container name="设备报警" size="middle" style="">
<div style="padding: 5px 10px;"> <div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/> <dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
</div> </div>
@ -19,10 +19,8 @@ export default {
}, },
data() { data() {
return { return {
// config:{}
config: { config: {
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'], header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
@ -46,20 +44,20 @@ export default {
}, },
mounted(){ mounted(){
}, },
watch:{ // watch:{
sjgEquipment: { // sjgEquipment: {
handler(newVal, oldVal) { // handler(newVal, oldVal) {
let outArr = this.sjgEquipment.map((item, index) => [ // let outArr = this.sjgEquipment.map((item, index) => [
index+1, // index+1,
item.name, // item.name,
item.code, // item.code,
item.status, // item.status,
item.error? '是': '否' // item.error? '是': '否'
]); // ]);
this.config.data = outArr // this.config.data = outArr
this.$refs['eqScrollBoard'].updateRows(outArr) // this.$refs['eqScrollBoard'].updateRows(outArr)
} // }
} // }
} // }
} }
</script> </script>

12
src/views/databoard/deepProcessing/NumRate.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<div style="flex: 1;"> <Container name="产线产量及良品率" size="large" style="">
<Container name="产线产量及良品率" size="small" style=""> <div class="chart" style="height: 370px; margin-top: 8px;">
<div class="chart" style="height: 370px; margin-top: 8px;"> <NumRateChart />
<NumRateChart /> </div>
</div> </Container>
</Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container'; import Container from '../components/Container';

159
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
View File

@ -1,11 +1,24 @@
<template> <template>
<div style="flex: 1;"> <Container name="工单监控" size="middle" style="">
<Container name="工单监控" size="small" style=""> <div style="padding: 5px 10px;" class="WOMonitoring">
<div style="padding: 5px 10px;"> <!-- <dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/> -->
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/> <el-table
</div> :data="tableData"
</Container> style="width: 575px"
</div> 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>
</template> </template>
<script> <script>
import Container from '../components/Container.vue'; import Container from '../components/Container.vue';
@ -19,47 +32,99 @@ export default {
}, },
data() { data() {
return { return {
config: { tableData: [
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'], {name: '1111111111111111', specifications: '22222', lines: 'Y65', status: '已完成',planFinishTime:"2023-12-23 12:12:12"},
// headerHeight: '17', {name: '11111', specifications: '22222'},
headerBGC: 'rgba(32, 55, 96, 0.8)', {name: '11111', specifications: '22222'},
oddRowBGC: 'rgba(32, 55, 96, 0.8)', {name: '11111', specifications: '22222'},
evenRowBGC: 'rgba(14, 32, 62, 0.8)', {name: '11111', specifications: '22222'},
columnWidth: [60, 120, 80, 60, 80, 120, 120, 120], {name: '11111'},
align: ['center'], {name: '11111'},
data: [ {name: '11111'},
[1, '工单1', '行1列3', '', '','','',''], {name: '11111'},
[2, '工单2', '行2列3', '', '','','',''], {name: '11111'},
[3, '工单3', '行3列3', '', '','','',''], {name: '11111'},
[4, '工单4', '行4列3', '', '','','',''], {name: '11111'}
[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
}
} }
}, },
watch:{ methods:{
order: { rowStyle(v){
handler(newVal, oldVal) { if (v.rowIndex % 2 === 0) {
let outArr = this.order.map((item, index) => [ return {
index+1, background: 'rgba(14, 32, 62, 0.8)',
item.name, color: '#fff',
item.specifications, height: '35px',
item.lines, lineHeight:'35px',
item.status, padding: 0,
item.planFinishTime, fontSize:'12px'
item.planQuantity, }
item.planAssignQuantity } else {
]); return {
this.config.data = outArr background: 'rgba(32, 55, 96, 0.8)',
this.$refs['worderScrollBoard'].updateRows(outArr) color: '#fff',
} height: '35px',
} lineHeight:'35px',
padding: 0,
fontSize:'12px'
}
}
},
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;
} }
} }
</script> </style>

13
src/views/databoard/kiln/EnergeTop.vue
View File

@ -11,14 +11,14 @@
style=" style="
flex: 1; flex: 1;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 2fr 3fr 3fr;
grid-template-rows: auto; grid-template-rows: auto;
gap: 8px; gap: 8px;
padding: 4px; padding: 4px;
margin-bottom: 6px; margin-bottom: 6px;
"> ">
<ShadowRect <ShadowRect
style="grid-row: 1 / 3; flex-direction: column; justify-content: center"> style="grid-row: 1/3 ; flex-direction: column; justify-content: center">
<span <span
style=" style="
font-size: 16px; font-size: 16px;
@ -34,6 +34,7 @@
line-height: 1.55; line-height: 1.55;
text-align: center; text-align: center;
letter-spacing: 1px; letter-spacing: 1px;
color: #3ce8ff
"> ">
{{energyInfo.elecQty1}}kwh {{energyInfo.elecQty1}}kwh
</span> </span>
@ -51,7 +52,7 @@
"> ">
<p style="margin: 0; line-height: inherit">水耗量</p> <p style="margin: 0; line-height: inherit">水耗量</p>
</div> </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>
<ShadowRect> <ShadowRect>
@ -66,7 +67,7 @@
"> ">
<p style="margin: 0; line-height: inherit">天然气I</p> <p style="margin: 0; line-height: inherit">天然气I</p>
</div> </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>
<ShadowRect> <ShadowRect>
@ -81,7 +82,7 @@
"> ">
<p style="margin: 0; line-height: inherit">电耗量</p> <p style="margin: 0; line-height: inherit">电耗量</p>
</div> </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>
<ShadowRect> <ShadowRect>
@ -96,7 +97,7 @@
"> ">
<p style="margin: 0; line-height: inherit">天然气II</p> <p style="margin: 0; line-height: inherit">天然气II</p>
</div> </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> </ShadowRect>
</div> </div>
</template> </template>

6
src/views/databoard/kiln/GasHandle.vue
View File

@ -99,7 +99,7 @@
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' /> <SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
</div> </div>
<div class="chart" style="height: 250px;margin-top: 10px;"> <div class="chart" style="height: 250px;margin-top: 10px;">
<FlueGas :chartType='chartType' :chartTime='chartTime'/> <FlueGasChart :chartType='chartType' :chartTime='chartTime'/>
</div> </div>
</div> </div>
</Container> </Container>
@ -112,7 +112,7 @@ import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line'; import KilnLine from '../components/line';
// import Switcher from '../components/Switcher'; // import Switcher from '../components/Switcher';
import SelectorBtnGroup from '../components/SelectorBtnGroup'; import SelectorBtnGroup from '../components/SelectorBtnGroup';
import FlueGas from '../components/FlueGas'; import FlueGasChart from '../components/FlueGasChart';
export default { export default {
name: 'GasHandle', name: 'GasHandle',
@ -121,7 +121,7 @@ export default {
ShadowRect, ShadowRect,
KilnLine, KilnLine,
SelectorBtnGroup, SelectorBtnGroup,
FlueGas, FlueGasChart,
}, },
props: {}, props: {},
data() { data() {

14
src/views/databoard/wholePlant/DefectClass.vue
View File

@ -1,12 +1,10 @@
<template> <template>
<div style="flex: 1;"> <Container name="产线当日缺陷分类" size="middle">
<Container name="产线当日缺陷分类" size="small"> <SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' /> <div class="chart" style="height: 375px; margin-top: 8px;">
<div class="chart" style="height: 370px; margin-top: 8px;"> <DefectClassChart :chartType='chartType'/>
<DefectClassChart :chartType='chartType'/> </div>
</div> </Container>
</Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container'; import Container from '../components/Container';

49
src/views/databoard/wholePlant/OrderStatus.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="flex: 1;"> <div style="flex: 1;" class="orderContainer">
<Container name="订单完成情况" size="small" style=""> <Container name="订单完成情况" size="small" style="">
<div style="padding: 5px 10px;"> <div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/> <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
@ -9,6 +9,7 @@
</template> </template>
<script> <script>
import Container from '../components/Container' import Container from '../components/Container'
import { formatDate } from '@/utils'
export default { export default {
name: 'OrderStatus', name: 'OrderStatus',
components: { Container }, components: { Container },
@ -25,37 +26,43 @@ export default {
headerBGC: 'rgba(32, 55, 96, 0.8)', headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)', oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
// columnWidth: [60], columnWidth: [155, 180, 150],
align: ['center'], align: ['center'],
data: [ 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', '']
],
rowNum: 6 rowNum: 6
} }
} }
}, },
mounted() {},
watch:{ watch:{
order: { order: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
let outArr = this.order.map((item) => [ let outArr = this.order.map((item) => [
item.startProduceTime, formatDate(item.planStartTime) || '',
item.name, `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
item.specifications, `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
item.completeRate `<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.config.data = outArr
this.$refs['orderScrollBoard'].updateRows(outArr) this.$refs['orderScrollBoard'].updateRows(outArr)
} }
} }
} }
} }
</script> </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>

20
src/views/databoard/wholePlant/YieldRate.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div style="flex: 2;"> <Container name="本日生产良品率" size="large">
<Container name="本日生产良品率" size="small">
<div style="padding: 5px 10px;"> <div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/> <dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
</div> </div>
@ -27,7 +26,6 @@
</div> </div>
</div> </div>
</Container> </Container>
</div>
</template> </template>
<script> <script>
import Container from '../components/Container' import Container from '../components/Container'
@ -54,13 +52,7 @@ export default {
evenRowBGC: 'rgba(14, 32, 62, 0.8)', evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60], columnWidth: [60],
align: ['center'], align: ['center'],
data: [ data: [],
[1, '产线1', '49%', '', ''],
[2, '产线2', '49%', '', ''],
[3, '产线3', '49%', '', ''],
[4, '产线4', '49%', '', ''],
[5, '产线5', '49%', '', '']
],
rowNum: 5 rowNum: 5
}, },
chartType:false, chartType:false,
@ -72,10 +64,10 @@ export default {
handler(newVal, oldVal) { handler(newVal, oldVal) {
let outArr = this.yieldRateTable.map((item) => [ let outArr = this.yieldRateTable.map((item) => [
item.lineName, item.lineName,
item.first, item.first?(item.first*100).toFixed(2)+'%':'0.00%',
item.second, item.second?(item.second*100).toFixed(2)+'%':'0.00%',
item.product, item.product?(item.product*100).toFixed(2)+'%':'0.00%',
item.waste item.waste?(item.waste*100).toFixed(2)+'%':'0.00%'
]); ]);
this.config.data = outArr this.config.data = outArr
this.$refs['yieldRateScrollBoard'].updateRows(outArr) this.$refs['yieldRateScrollBoard'].updateRows(outArr)

2
src/websocket/websocket.js
View File

@ -94,7 +94,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
}; };
const onWsMessage = (event) => { const onWsMessage = (event) => {
const jsonStr = event.data; const jsonStr = event.data;
writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr); // writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
this.messageCallback(jsonStr); this.messageCallback(jsonStr);
}; };
const onWsClose = (event) => { const onWsClose = (event) => {