3.0 修改
This commit is contained in:
parent
c8b3b3ec4d
commit
361eb15f51
|
|
@ -7,7 +7,7 @@
|
|||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
本月工单概况
|
||||
本月产品合格率比对
|
||||
</div>
|
||||
<div id="left-rankchart">
|
||||
<div class="rank-item" v-for="(item, index) in rankData" :key="index">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
|
||||
<div class="ccmc-middle">
|
||||
<div class="middle-top" style="height:calc(100% - 500px)">
|
||||
<div class="middle-top" style="height:calc(100% - 450px)">
|
||||
<div class="middle-top-container">
|
||||
<!-- 当日检验量 -->
|
||||
<div class="inspection-box">
|
||||
|
|
@ -37,18 +37,21 @@
|
|||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-1'"></div>
|
||||
<div class="pass-rate-title">机芯直通率</div>
|
||||
<div class="pass-rate-value">机芯检验量：<span style="color:#08e5ff;">250</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 盖板直通率 -->
|
||||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-2'"></div>
|
||||
<div class="pass-rate-title">盖板直通率</div>
|
||||
<div class="pass-rate-value">盖板检验量：<span style="color:#08e5ff;">580</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 整机直通率 -->
|
||||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-3'"></div>
|
||||
<div class="pass-rate-title">整机直通率</div>
|
||||
<div class="pass-rate-value">整机检测量：<span style="color:#08e5ff;">420</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,7 +62,7 @@
|
|||
<dv-border-box-1>
|
||||
<div class="ccmc-title">
|
||||
<span class="title-decoration"></span>
|
||||
当月工序不良比
|
||||
本月来料合格率
|
||||
</div>
|
||||
<div id="right-echarts-new"></div>
|
||||
</dv-border-box-1>
|
||||
|
|
@ -188,25 +191,24 @@ export default {
|
|||
data: ['机芯产量', '盖板产量']
|
||||
},
|
||||
rankData: [
|
||||
{ name: '产品A', value: 98 },
|
||||
{ name: '产品B', value: 95 },
|
||||
{ name: '产品C', value: 93 },
|
||||
{ name: '产品D', value: 90 },
|
||||
{ name: '产品E', value: 88 },
|
||||
{ name: '产品F', value: 85 },
|
||||
{ name: '产品G', value: 82 },
|
||||
{ name: '产品H', value: 80 },
|
||||
{ name: '产品I', value: 78 },
|
||||
{ name: '产品J', value: 75 }
|
||||
{ name: 'U1A', value: 99 },
|
||||
{ name: 'U2A', value: 96 },
|
||||
{ name: 'U2B', value: 90 },
|
||||
{ name: 'U2C', value: 85 },
|
||||
{ name: 'U1B', value: 95 },
|
||||
{ name: 'U1C', value: 93 },
|
||||
{ name: 'W1A', value: 82 },
|
||||
{ name: 'W2A', value: 80 },
|
||||
{ name: 'W3A', value: 98 },
|
||||
],
|
||||
rightChartData: [
|
||||
{ name: '工序1', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序2', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序3', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序4', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序5', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序6', value: Math.floor(Math.random() * 1000) },
|
||||
{ name: '工序7', value: Math.floor(Math.random() * 1000) }
|
||||
{ name: '注塑件', value: Math.floor(Math.random() * 100) },
|
||||
{ name: '五金件', value: Math.floor(Math.random() * 100) },
|
||||
{ name: '橡硅胶件', value: Math.floor(Math.random() * 100) },
|
||||
{ name: '包材件', value: Math.floor(Math.random() * 100) },
|
||||
{ name: '电子件', value: Math.floor(Math.random() * 100) },
|
||||
{ name: '组件', value: Math.floor(Math.random() * 100) },
|
||||
{ name: '陶瓷', value: Math.floor(Math.random() * 100) }
|
||||
],
|
||||
|
||||
leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
|
||||
|
|
@ -290,6 +292,7 @@ export default {
|
|||
}
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
// 修改柱状图y轴配置
|
||||
initRightChart() {
|
||||
const chart = echarts.init(document.getElementById('right-echarts-new'));
|
||||
const option = {
|
||||
|
|
@ -316,10 +319,12 @@ export default {
|
|||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 1000,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
fontSize: 23,
|
||||
fontWight:'bold',
|
||||
formatter: '{value}%' // 添加百分比显示
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
|
|
@ -347,7 +352,7 @@ export default {
|
|||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
fontSize: 18
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
|
@ -484,7 +489,7 @@ export default {
|
|||
.middle-top {
|
||||
padding-left: 20px;
|
||||
margin-top: -50px;
|
||||
margin-bottom: 50px;
|
||||
// margin-bottom: 30px;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(135, 178, 252, 0.04), /* 蓝色透明度15% */
|
||||
|
|
@ -538,6 +543,12 @@ export default {
|
|||
color: #fff;
|
||||
margin-top: -70px;
|
||||
}
|
||||
.pass-rate-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
// margin-top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.center-cmp {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div id="rose-chart" style="width: 100%;height:100%">
|
||||
<div class="chart-title">
|
||||
本月不良率推移图
|
||||
</div>
|
||||
<div :id="pieId" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -45,7 +48,7 @@ export default {
|
|||
console.log(myChart)
|
||||
this.option = {
|
||||
title: {
|
||||
text: '本月不良率推移图',
|
||||
// text: '本月不良率推移图',
|
||||
textStyle: {
|
||||
fontSize: 25,
|
||||
fontWight:'bold',
|
||||
|
|
@ -310,9 +313,25 @@ export default {
|
|||
#rose-chart {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
.chart-title {
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-bottom: 15px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #08e5ff; // 浅蓝色
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.pie-chart-container {
|
||||
height: 100%
|
||||
height:calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,12 +22,30 @@ export default {
|
|||
dataType: {
|
||||
}
|
||||
},
|
||||
// 在data()中添加月份数据
|
||||
data() {
|
||||
return {
|
||||
option: {}
|
||||
option: {},
|
||||
monthLabels: this.getRecentMonthLabels()
|
||||
}
|
||||
},
|
||||
|
||||
// 在methods中添加获取最近月份标签的方法
|
||||
methods: {
|
||||
getRecentMonthLabels() {
|
||||
const labels = [];
|
||||
const date = new Date();
|
||||
|
||||
for (let i = 5; i >= 0; i--) {
|
||||
const d = new Date(date);
|
||||
d.setMonth(date.getMonth() - i);
|
||||
// 格式化为"年份后两位+月份" (如2504表示2025年4月)
|
||||
const year = d.getFullYear().toString().slice(-2);
|
||||
const month = (d.getMonth() + 1).toString().padStart(2, '0');
|
||||
labels.push(`${year}${month}`);
|
||||
}
|
||||
return labels;
|
||||
},
|
||||
createData() {
|
||||
// 模拟数据（每个柱子的总高度，单位：%）
|
||||
const rawData = [85, 92, 78, 95, 88, 90]; // P1-P6的合格率数据
|
||||
|
|
@ -81,7 +99,7 @@ export default {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'],
|
||||
data: this.monthLabels, // 使用动态生成的月份标签
|
||||
axisLabel: {
|
||||
fontSize: 23,
|
||||
color: '#fff',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<dv-full-screen-container>
|
||||
|
||||
|
||||
<top-header :Name="'恒通达智慧数据看板'" style="height:5%;" />
|
||||
<top-header :Name="'褓座数字化智能工厂质量看板'" style="height:5%;" />
|
||||
<div class="main-container" style="height: 55%;">
|
||||
<div class="rmc-top-container" v-if="switchType == 2">
|
||||
<div class="rmctc-middle-container">
|
||||
|
|
|
|||
|
|
@ -124,7 +124,9 @@
|
|||
formatter: function(params) {
|
||||
return params.value;
|
||||
},
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 20
|
||||
}
|
||||
}]
|
||||
}]
|
||||
|
|
|
|||
Loading…
Reference in New Issue