q=6 恒通达数字化智能工厂质量看板

This commit is contained in:
ljx 2025-05-28 10:53:04 +08:00
parent 8b697b64db
commit 60ee938092
6 changed files with 76 additions and 29 deletions

View File

@ -36,6 +36,8 @@ export default {
this.currentComponent = 'datav2'; this.currentComponent = 'datav2';
} else if (this.dataType == '5') { } else if (this.dataType == '5') {
this.currentComponent = 'datav3'; this.currentComponent = 'datav3';
} else if (this.dataType == '6'){
this.currentComponent = 'datav2';
} else { } else {
this.currentComponent = 'datav'; this.currentComponent = 'datav';
} }

View File

@ -30,28 +30,28 @@
<!-- 当日检验量 --> <!-- 当日检验量 -->
<div class="inspection-box"> <div class="inspection-box">
<div class="inspection-title">当日检验量</div> <div class="inspection-title">当日检验量</div>
<div class="inspection-value">{{ middleTopData.inspection }}</div> <div class="inspection-value">{{ dataType == '6'?middleTopData2.inspection:middleTopData.inspection }}</div>
</div> </div>
<!-- 机芯直通率 --> <!-- 机芯直通率 -->
<div class="pass-rate-box"> <div class="pass-rate-box">
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-1'"></div> <div class="gauge-chart" style="height:200px" :id="'gauge-chart-1'"></div>
<div class="pass-rate-title">机芯直通率</div> <div class="pass-rate-title">{{dataType=='6'?'进水直通率': '机芯直通率'}}</div>
<div class="pass-rate-value">机芯检验量<span style="color:#08e5ff;">250</span></div> <div class="pass-rate-value">{{dataType=='6'?'进水检验量': '机芯检验量'}}<span style="color:#08e5ff;">250</span></div>
</div> </div>
<!-- 盖板直通率 --> <!-- 盖板直通率 -->
<div class="pass-rate-box"> <div class="pass-rate-box">
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-2'"></div> <div class="gauge-chart" style="height:200px" :id="'gauge-chart-2'"></div>
<div class="pass-rate-title">盖板直通率</div> <div class="pass-rate-title">{{dataType=='6'?'排水直通率': '盖板直通率'}}</div>
<div class="pass-rate-value">盖板检验量<span style="color:#08e5ff;">580</span></div> <div class="pass-rate-value">{{dataType=='6'?'排水检验量': '盖板检验量'}}<span style="color:#08e5ff;">580</span></div>
</div> </div>
<!-- 整机直通率 --> <!-- 整机直通率 -->
<div class="pass-rate-box"> <div class="pass-rate-box">
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-3'"></div> <div class="gauge-chart" style="height:200px" :id="'gauge-chart-3'"></div>
<div class="pass-rate-title">整机直通率</div> <div class="pass-rate-title">{{dataType=='6'?'按钮直通率': '整机直通率'}}</div>
<div class="pass-rate-value">整机检测量<span style="color:#08e5ff;">420</span></div> <div class="pass-rate-value">{{dataType=='6'?'按钮检测量': '整机检测量'}}<span style="color:#08e5ff;">420</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -160,6 +160,12 @@ export default {
coverPassRate: 88, coverPassRate: 88,
wholePassRate: 95 wholePassRate: 95
}, },
middleTopData2: {
inspection: 876,
corePassRate: 97,
coverPassRate: 99,
wholePassRate: 95
},
oiloption:{ oiloption:{
grid:{ grid:{
top:'5%',left:'0%',right:'5%',bottom:'5%' top:'5%',left:'0%',right:'5%',bottom:'5%'
@ -210,6 +216,15 @@ export default {
{ name: '组件', value: 92 }, { name: '组件', value: 92 },
{ name: '陶瓷', value: 94 } { name: '陶瓷', value: 94 }
], ],
rightChartData2: [
{ name: '注塑件', value: 100 },
{ name: '五金件', value: 97 },
{ name: '橡硅胶件', value: 100 },
{ name: '包材件', value: 99 },
{ name: '原料', value: 100 },
{ name: '组件', value: 99 },
{ name: '陶瓷', value: 99 }
],
leftData: this.dataType == '3'?originalLeftData2:originalLeftData, leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
rightData: this.dataType == '3'?originalRightData2:originalRightData rightData: this.dataType == '3'?originalRightData2:originalRightData
@ -225,6 +240,7 @@ export default {
// y // y
initRightChart() { initRightChart() {
const chart = echarts.init(document.getElementById('right-echarts-new')); const chart = echarts.init(document.getElementById('right-echarts-new'));
let chartData = this.dataType == '6'?this.rightChartData2:this.rightChartData;
const option = { const option = {
legend: { legend: {
icon: 'rect', icon: 'rect',
@ -247,7 +263,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.rightChartData.map(item => item.name), data: chartData.map(item => item.name),
axisLabel: { axisLabel: {
color: '#fff', color: '#fff',
fontSize: 20, fontSize: 20,
@ -281,7 +297,7 @@ export default {
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
data: this.rightChartData.map(item => item.value), data: chartData.map(item => item.value),
barWidth: '40%', barWidth: '40%',
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -317,11 +333,11 @@ export default {
}, },
initGaugeCharts() { initGaugeCharts() {
// //
this.initGaugeChart('gauge-chart-1', this.middleTopData.corePassRate); this.initGaugeChart('gauge-chart-1', this.dataType == '6'?this.middleTopData2.corePassRate: this.middleTopData.corePassRate);
// //
this.initGaugeChart('gauge-chart-2', this.middleTopData.coverPassRate); this.initGaugeChart('gauge-chart-2', this.dataType == '6'?this.middleTopData2.coverPassRate: this.middleTopData.coverPassRate);
// //
this.initGaugeChart('gauge-chart-3', this.middleTopData.wholePassRate); this.initGaugeChart('gauge-chart-3', this.dataType == '6'?this.middleTopData2.coverPassRate:this.middleTopData.wholePassRate);
}, },
// //
// initGaugeChart // initGaugeChart

View File

@ -51,7 +51,8 @@ export default {
const generateData = () => { const generateData = () => {
return dates.map((date, index) => { return dates.map((date, index) => {
const day = parseInt(date.split('-')[1]); const day = parseInt(date.split('-')[1]);
return day <= currentDay ? (Math.random() * 10).toFixed(2) : 0; let step = this.dataType == '6'? 6 : 10;
return day <= currentDay ? (Math.random() * step).toFixed(2) : 0;
}); });
}; };

View File

@ -48,7 +48,8 @@ export default {
}, },
createData() { createData() {
// % // %
const rawData = [95, 92, 98, 95, 98, 90]; // P1-P6
const rawData =this.dataType == '6'?[95, 100, 98, 99, 98, 100] : [95, 92, 98, 95, 98, 90]; // P1-P6
// 10% // 10%
const generateStackData = (value) => { const generateStackData = (value) => {

View File

@ -3,7 +3,7 @@
<dv-full-screen-container> <dv-full-screen-container>
<top-header :Name="'褓座数字化智能工厂质量看板'" style="height:5%;" /> <top-header :Name="dataType == '6'?'恒通达数字化智能工厂质量看板':'褓座数字化智能工厂质量看板'" style="height:5%;" />
<div class="main-container" style="height: 55%;"> <div class="main-container" style="height: 55%;">
<div class="rmc-top-container" v-if="switchType == 2"> <div class="rmc-top-container" v-if="switchType == 2">
<div class="rmctc-middle-container"> <div class="rmctc-middle-container">
@ -59,6 +59,8 @@ export default {
this.dataType = '整机'; this.dataType = '整机';
}else if(dataTypeParam === '3'){ }else if(dataTypeParam === '3'){
this.dataType = '3'; this.dataType = '3';
}else if(dataTypeParam === '6'){
this.dataType = '6';
}else{ }else{
this.dataType = ''; // '1' this.dataType = ''; // '1'
} }

View File

@ -15,10 +15,8 @@
chartData: { chartData: {
type: Object, type: Object,
}, },
props: {
dataType: { dataType: {
} }
},
}, },
data() { data() {
return { return {
@ -39,7 +37,7 @@
}, },
methods: { methods: {
createData() { createData() {
let chartData = [ let arr = [
{ {
value: 35, value: 35,
name: "外观不良", name: "外观不良",
@ -65,7 +63,34 @@
name: "其他不良", name: "其他不良",
}, },
]; ];
let arr2 = [
{
value: 35,
name: "外观不良",
},
{
value: 20,
name: "尺寸不良",
},
{
value: 16,
name: "功能不良",
},
{
value: 12,
name: "包装不良",
},
{
value: 12,
name: "标签不良",
},
{
value: 27,
name: "其他不良",
},
];
let chartData = this.dataType == '6'?arr2 : arr;
console.log(this.dataType,chartData)
var myChart = echarts.init(document.getElementById('pieId-new')); var myChart = echarts.init(document.getElementById('pieId-new'));
this.option = { this.option = {