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

驾驶舱修改

Browse Source
This commit is contained in:
朱菊兰 2024-04-08 16:38:12 +08:00
parent cbc7cbc574
commit bdd14eec70
2 changed files with 308 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,114 +1,141 @@
<template> <template>
<div style="height: 370px;"> <div style="height: 370px">
<NotMsg v-show="notMsg"/> <NotMsg v-show="notMsg" />
<div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div> <div
id="numRateChart"
class="num-rate-chart"
style="width: 900px; height: 420px"
v-show="!notMsg"></div>
</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' import NotMsg from './../components/NotMsg';
export default { export default {
name: 'NumRateChart', name: 'NumRateChart',
mixins: [resize], mixins: [resize],
components:{ NotMsg }, components: { NotMsg },
data() { data() {
return { return {
chart: null, chart: null,
notMsg:true notMsg: true,
} };
}, },
computed: { computed: {
productline() { productline() {
return this.$store.state.websocket.productline return this.$store.state.websocket.productline;
}
}, },
watch:{ },
watch: {
productline: { productline: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (newVal === oldVal) { if (newVal === oldVal) {
return false return false;
}
this.updateChart()
this.$emit('emitFun')
}
} }
this.updateChart();
this.$emit('emitFun');
},
},
}, },
mounted() { mounted() {
this.$el.addEventListener('resize', () => { this.$el.addEventListener('resize', () => {
console.log('resziing.....'); console.log('resziing.....');
}); });
this.updateChart() this.updateChart();
}, },
methods: { methods: {
updateChart() { updateChart() {
if (this.productline && this.productline.length > 0) { if (this.productline && this.productline.length > 0) {
this.notMsg = false this.notMsg = false;
} else { } else {
this.notMsg = true this.notMsg = true;
return return;
} }
let xData = [] let xData = [];
let outputNum = [] let outputNum = [];
let passRate = [] let passRate = [];
this.productline && this.productline.length > 0 && this.productline.map(item => { for (let i = 0; i < this.productline.length - 1; i++) {
if ((item.lineName).includes('D')) { // 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
xData.push(item.lineName) for (let j = 0; j < this.productline.length - i - 1; j++) {
outputNum.push(item.outputNum) // 当前一个值大于后一个值
passRate.push(item.passRate?item.passRate*100:null) if (
this.productline[j].lineName.substr(
this.productline[j].lineName.length - 1,
1
) >
this.productline[j + 1].lineName.substr(
this.productline[j + 1].lineName.length - 1,
1
)
) {
// 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
let temp = this.productline[j];
this.productline[j] = this.productline[j + 1];
this.productline[j + 1] = temp;
} }
}) }
}
this.productline &&
this.productline.length > 0 &&
this.productline.map((item) => {
if (item.lineName.includes('D')) {
xData.push(item.lineName);
outputNum.push(item.outputNum);
passRate.push(item.passRate);
}
});
if ( if (
this.chart !== null && this.chart !== null &&
this.chart !== '' && this.chart !== '' &&
this.chart !== undefined this.chart !== undefined
) { ) {
this.chart.dispose() this.chart.dispose();
} }
this.chart = echarts.init(document.getElementById('numRateChart')); this.chart = echarts.init(document.getElementById('numRateChart'));
var option = { var option = {
grid: { top: 82, right: 60, bottom: 20, left: 90 }, grid: { top: 82, right: 60, bottom: 20, left: 90 },
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "shadow", type: 'shadow',
}, },
className: "num-rate-chart-tooltip" className: 'num-rate-chart-tooltip',
}, },
legend: { legend: {
itemWidth:10, itemWidth: 10,
itemHeight:10, itemHeight: 10,
top: '2.5%', top: '2.5%',
right: '20px', right: '20px',
icon: 'rect', icon: 'rect',
data: [ data: [
{name:'产线产量',itemStyle:{color:'#364BFE'}}, { name: '产线产量', itemStyle: { color: '#364BFE' } },
{name:'良品率',itemStyle:{color:'#FFCB59'}} { name: '良品率', itemStyle: { color: '#FFCB59' } },
], ],
textStyle: { textStyle: {
color: "#DFF1FE", color: '#DFF1FE',
fontSize: 12, fontSize: 12,
} },
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: xData, data: xData,
axisLabel: { axisLabel: {
color: "#fff", color: '#fff',
fontSize: 12, fontSize: 12,
}, },
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow',
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 1, width: 1,
color: "#213259", color: '#213259',
},
}, },
}, },
}
], ],
yAxis: [ yAxis: [
{ {
@ -120,21 +147,20 @@ export default {
align: 'right', align: 'right',
}, },
axisLabel: { axisLabel: {
color: "#fff", color: '#fff',
fontSize: 12, fontSize: 12,
formatter: '{value}'
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#213259", color: '#213259',
}, },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#213259a0", color: '#213259a0',
},
}, },
}
}, },
{ {
type: 'value', type: 'value',
@ -145,24 +171,22 @@ export default {
align: 'LEFT', align: 'LEFT',
}, },
axisLabel: { axisLabel: {
color: "#fff", color: '#fff',
fontSize: 12, fontSize: 12,
formatter: () =>{ formatter: '{value}%',
return value ? '{value} %': '-'
}
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#213259", color: '#213259',
}, },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#213259a0", color: '#213259a0',
},
},
}, },
}
}
], ],
series: [ series: [
{ {
@ -171,16 +195,16 @@ export default {
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return value; return value;
} },
}, },
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' }, { offset: 0, color: '#5CB7FF' },
{ offset: 1, color: '#364BFE' } { offset: 1, color: '#364BFE' },
]) ]),
}, },
data: outputNum data: outputNum,
}, },
{ {
name: '良品率', name: '良品率',
@ -188,32 +212,32 @@ export default {
yAxisIndex: 1, yAxisIndex: 1,
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return value?value + '%':'-'; return value ? value + '%' : '-';
} },
}, },
itemStyle: { itemStyle: {
color: '#FFD160' color: '#FFD160',
}, },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCB59' + "40" }, { offset: 0, color: '#FFCB59' + '40' },
{ offset: 0.5, color: '#FFCB59' + "20" }, { offset: 0.5, color: '#FFCB59' + '20' },
{ offset: 1, color: '#FFCB59' + "00" }, { offset: 1, color: '#FFCB59' + '00' },
]), ]),
}, },
lineStyle: { lineStyle: {
width: 1 width: 1,
}, },
symbol: 'circle', symbol: 'circle',
symbolSize: 5, symbolSize: 5,
data: passRate data: passRate,
} },
] ],
}; };
option && this.chart.setOption(option) option && this.chart.setOption(option);
} },
} },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.num-rate-chart { .num-rate-chart {
@ -223,12 +247,12 @@ export default {
} }
</style> </style>
<style> <style>
.num-rate-chart-tooltip { .num-rate-chart-tooltip {
background: #0a2b4f77 !important; background: #0a2b4f77 !important;
border: none !important; border: none !important;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
} }
.num-rate-chart-tooltip * { .num-rate-chart-tooltip * {
color: #fff !important; color: #fff !important;
} }
</style> </style>

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

@ -1,9 +1,17 @@
<template> <template>
<div style="flex: 1;"> <div style="flex: 1">
<Container name="各工序缺陷汇总" size="middle" style=""> <Container
<TimePrompt class="timeShow" :timestr="timestr" /> name="各工序缺陷汇总"
<div style="padding: 5px 10px;"> size="middle"
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/> style="">
<TimePrompt
class="timeShow"
:timestr="timestr" />
<div style="padding: 5px 10px">
<dv-scroll-board
:config="config"
style="width: 575px; height: 380px"
ref="defectScrollBoard" />
</div> </div>
</Container> </Container>
</div> </div>
@ -11,51 +19,60 @@
<script> <script>
import Container from '../components/Container.vue'; import Container from '../components/Container.vue';
import TimePrompt from '../components/TimePrompt'; import TimePrompt from '../components/TimePrompt';
import { switchShowTime } from '../utils' import { switchShowTime } from '../utils';
export default { export default {
name: 'DefectSum', name: 'DefectSum',
components: { Container, TimePrompt }, components: { Container, TimePrompt },
computed: { computed: {
defectSum() { defectSum() {
return this.$store.state.websocket.defectSum return this.$store.state.websocket.defectSum;
} },
}, },
data() { data() {
return { return {
timestr: '', timestr: '',
config: { config: {
header: ['序号', '产线', '工序','损耗片数','缺陷类型'], header: ['序号', '产线', '工序', '损耗片数', '缺陷类型'],
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: [
// data: [[1, 'Y61', '破损','10','气泡']], //假数据
rowNum: 10 [1, 'D61', '成型', '3片', '细长泡'],
} [2, 'D62', '组合落板', '4片', '细长泡'],
} [3, 'D61', '磨边', '6片', '开口泡'],
[4, 'D63', '清洗', '5片', '结石'],
[5, 'D64', '打孔', '2片', '结石'],
[6, 'D63', '成型', '7片', '开口泡'],
[7, 'D61', '上片', '8片', '结石'],
],
// data: [],
rowNum: 10,
},
};
}, },
mounted() { mounted() {
this.timestr = switchShowTime('日') this.timestr = switchShowTime('日');
}, },
watch:{ watch: {
defectSum: { defectSum: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
let outArr = this.defectSum.map((item, index) => [ let outArr = this.defectSum.map((item, index) => [
index+1, index + 1,
item.productionLineName, item.productionLineName,
item.sectionName, item.sectionName,
item.count, item.count,
item.inspectionTypeName item.inspectionTypeName,
]); ]);
this.config.data = outArr this.config.data = outArr;
this.$refs['defectScrollBoard'].updateRows(outArr) this.$refs['defectScrollBoard'].updateRows(outArr);
this.timestr = switchShowTime('日') this.timestr = switchShowTime('日');
} },
} },
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.timeShow { .timeShow {