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

驾驶舱修改 #317

Merged
juzi merged 1 commits from projects/mesxc-zjl into projects/mesxc-test 2024-04-08 16:39:31 +08:00
Conversation 0 Commits 1 Files Changed 2 +308 -267
2 changed files with 308 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,234 +1,258 @@
<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
</div> id="numRateChart"
class="num-rate-chart"
style="width: 900px; height: 420px"
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' 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.updateChart();
this.$emit('emitFun') 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,
if ( 1
this.chart !== null && ) >
this.chart !== '' && this.productline[j + 1].lineName.substr(
this.chart !== undefined this.productline[j + 1].lineName.length - 1,
) { 1
this.chart.dispose() )
} ) {
this.chart = echarts.init(document.getElementById('numRateChart')); // 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
var option = { let temp = this.productline[j];
grid: { top: 82, right: 60, bottom: 20, left: 90 }, this.productline[j] = this.productline[j + 1];
tooltip: { this.productline[j + 1] = temp;
trigger: "axis", }
axisPointer: { }
type: "shadow", }
}, this.productline &&
className: "num-rate-chart-tooltip" this.productline.length > 0 &&
}, this.productline.map((item) => {
legend: { if (item.lineName.includes('D')) {
itemWidth:10, xData.push(item.lineName);
itemHeight:10, outputNum.push(item.outputNum);
top: '2.5%', passRate.push(item.passRate);
}
});
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById('numRateChart'));
var option = {
grid: { top: 82, right: 60, bottom: 20, left: 90 },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
className: 'num-rate-chart-tooltip',
},
legend: {
itemWidth: 10,
itemHeight: 10,
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: [
{ {
type: 'value', type: 'value',
name: '产量/片', name: '产量/片',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,
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', name: '良品率',
name: '良品率', nameTextStyle: {
nameTextStyle: { color: '#fff',
color: '#fff', fontSize: 10,
fontSize: 10, align: 'LEFT',
align: 'LEFT', },
}, axisLabel: {
axisLabel: { color: '#fff',
color: "#fff", fontSize: 12,
fontSize: 12, formatter: '{value}%',
formatter: () =>{ },
return value ? '{value} %': '-' axisLine: {
} show: true,
}, lineStyle: {
axisLine: { color: '#213259',
show: true, },
lineStyle: { },
color: "#213259", splitLine: {
}, lineStyle: {
}, color: '#213259a0',
splitLine: { },
lineStyle: { },
color: "#213259a0", },
}, ],
} series: [
} {
], name: '产线产量',
series: [ type: 'bar',
{ tooltip: {
name: '产线产量', valueFormatter: function (value) {
type: 'bar', return value;
tooltip: { },
valueFormatter: function (value) { },
return value; barWidth: 20,
} itemStyle: {
},
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' },
{ offset: 1, color: '#364BFE' }
])
},
data: outputNum
},
{
name: '良品率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value?value + '%':'-';
}
},
itemStyle: {
color: '#FFD160'
},
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: '#5CB7FF' },
{ offset: 0.5, color: '#FFCB59' + "20" }, { offset: 1, color: '#364BFE' },
{ offset: 1, color: '#FFCB59' + "00" }, ]),
]), },
}, data: outputNum,
lineStyle: { },
width: 1 {
}, name: '良品率',
symbol: 'circle', type: 'line',
symbolSize: 5, yAxisIndex: 1,
data: passRate tooltip: {
} valueFormatter: function (value) {
] return value ? value + '%' : '-';
}; },
option && this.chart.setOption(option) },
} itemStyle: {
} color: '#FFD160',
} },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCB59' + '40' },
{ offset: 0.5, color: '#FFCB59' + '20' },
{ offset: 1, color: '#FFCB59' + '00' },
]),
},
lineStyle: {
width: 1,
},
symbol: 'circle',
symbolSize: 5,
data: passRate,
},
],
};
option && this.chart.setOption(option);
},
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.num-rate-chart { .num-rate-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
top: -50px; top: -50px;
} }
</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>

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

@ -1,66 +1,83 @@
<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="">
</div> <TimePrompt
</Container> class="timeShow"
</div> :timestr="timestr" />
<div style="padding: 5px 10px">
<dv-scroll-board
:config="config"
style="width: 575px; height: 380px"
ref="defectScrollBoard" />
</div>
</Container>
</div>
</template> </template>
<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片', '结石'],
mounted() { [5, 'D64', '打孔', '2片', '结石'],
this.timestr = switchShowTime('日') [6, 'D63', '成型', '7片', '开口泡'],
}, [7, 'D61', '上片', '8片', '结石'],
watch:{ ],
defectSum: { // data: [],
rowNum: 10,
},
};
},
mounted() {
this.timestr = switchShowTime('日');
},
watch: {
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 {
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 240px; left: 240px;
} }
</style> </style>