feat:汽车覆盖件工业视觉检测平台项目 汽车覆盖件工业视觉检测平台 汽车覆盖件质量一张图展示
This commit is contained in:
parent
027bd39d7a
commit
c052f32a65
Binary file not shown.
|
After Width: | Height: | Size: 851 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -2,45 +2,357 @@
|
|||||||
<div class="box">
|
<div class="box">
|
||||||
<!-- 顶部 -->
|
<!-- 顶部 -->
|
||||||
<div class="top">
|
<div class="top">
|
||||||
|
<div v-for="(item, index) in topList" :key="index" class="top-item">
|
||||||
|
<div :class="['top-icon', 'top-icon-' + (index + 1).toString()]"></div>
|
||||||
|
<div>
|
||||||
|
<div>{{ item.title }}</div>
|
||||||
|
<div style="font-family: 'TITLEFONT'; margin-top: 10px">
|
||||||
|
{{ item.val }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 质量问题类型 -->
|
<!-- 质量问题类型 -->
|
||||||
<div class="problemType"></div>
|
<div class="problemType">
|
||||||
|
<div class="left">
|
||||||
|
<div class="box-title">质量问题类型</div>
|
||||||
|
<div class="left-item">
|
||||||
|
<div id="chart1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="box-title">质量报警问题</div>
|
||||||
|
<div class="right-item">
|
||||||
|
<el-table :data="tableData" border style="width: 100%">
|
||||||
|
<el-table-column prop="type" label="报警类型" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="because" label="报警原因" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="time" label="记录时间" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="status" label="处理状态" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 质量检测合格率统计 -->
|
<!-- 质量检测合格率统计 -->
|
||||||
<div class="testIng"></div>
|
<div class="testIng">
|
||||||
|
<div class="left">
|
||||||
|
<div class="box-title">质量检测合格率统计</div>
|
||||||
|
<div class="left-item">
|
||||||
|
<div id="chart2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="box-title">综合质量统计</div>
|
||||||
|
<div class="left-item">
|
||||||
|
<el-table :data="tableData2" border style="width: 100%;">
|
||||||
|
<el-table-column prop="product" label="产品" align="center" >
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="statistics" label="统计纬度" align="center" >
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="yield" label="合格率" align="center" >
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="dispose" label="处理措施" align="center" >
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import {
|
||||||
|
generateBaseOptions,
|
||||||
|
generatePieOptions,
|
||||||
|
initChartStatic,
|
||||||
|
} from "@/utils/bigscreenTool/index.js";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
topList: [
|
||||||
}
|
{
|
||||||
|
title: "覆盖件大类",
|
||||||
|
val: "3种",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "覆盖件数量",
|
||||||
|
val: "10894个",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "覆盖件报警次数",
|
||||||
|
val: "35种",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "视频监控设备",
|
||||||
|
val: "15台",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "冲压自动化设备数",
|
||||||
|
val: "254台",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
type: "划痕",
|
||||||
|
because: "镜面出现多条划痕",
|
||||||
|
time: "2023-11-13 10:11:37",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "压痕",
|
||||||
|
because: "车门出现明显的凹陷痕迹",
|
||||||
|
time: "2023-10-06 10:10:28",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "少孔",
|
||||||
|
because: "引擎盖缺少一个安装孔位",
|
||||||
|
time: "2023-10-12 10:10:46",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "缺料",
|
||||||
|
because: "车顶缺少一块安装材料",
|
||||||
|
time: "2023-10-02 10:10:55",
|
||||||
|
status: "已处理",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData2: [
|
||||||
|
{
|
||||||
|
product: "后备箱盖",
|
||||||
|
statistics: "季度",
|
||||||
|
yield: "98.12%",
|
||||||
|
dispose: "优化工艺流程",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: "顶盖流水槽",
|
||||||
|
statistics: "季度",
|
||||||
|
yield: "96.12%",
|
||||||
|
dispose: "加强质检力度",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: "引擎盖外板",
|
||||||
|
statistics: "季度",
|
||||||
|
yield: "97.43%",
|
||||||
|
dispose: "提高供应商质量要求",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: "保险杠",
|
||||||
|
statistics: "季度",
|
||||||
|
yield: "98.56%",
|
||||||
|
dispose: "优化工艺流程",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
product: "翼子板",
|
||||||
|
statistics: "季度",
|
||||||
|
yield: "95.12%",
|
||||||
|
dispose: "更换原材料",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initChart1()
|
this.initChart1();
|
||||||
this.initChart2()
|
this.initChart2();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart1(){},
|
initChart1() {
|
||||||
initChart2(){},
|
initChartStatic(
|
||||||
|
"chart1",
|
||||||
|
generatePieOptions({
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
left: "right",
|
||||||
|
textStyle:{
|
||||||
|
color:"#000"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
color: ["#61a4e7", "#7ece51", "#edca5f", "#e2925d", "#e06757"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "质量问题类型",
|
||||||
|
type: "pie",
|
||||||
|
top: -20,
|
||||||
|
radius: '70%',
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "划痕",
|
||||||
|
value: 35,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "压痕",
|
||||||
|
value: 26,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "少孔",
|
||||||
|
value: 14,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "缺料",
|
||||||
|
value: 19,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "尺寸",
|
||||||
|
value: 15,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
formatter: "{b|{b}}",
|
||||||
|
rich: {
|
||||||
|
c: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChart2() {
|
||||||
|
initChartStatic(
|
||||||
|
"chart2",
|
||||||
|
generateBaseOptions({
|
||||||
|
xAxis: {
|
||||||
|
data: [
|
||||||
|
"前车门",
|
||||||
|
"行李箱盖",
|
||||||
|
"顶盖",
|
||||||
|
"后翼子板",
|
||||||
|
],
|
||||||
|
axisLine:{
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisTick:{
|
||||||
|
alignWithLabel:true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend:{show: false,},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLine:{
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
splitLine: { //网格线
|
||||||
|
show: true, //是否显示
|
||||||
|
lineStyle: { //网格线样式
|
||||||
|
color: '#0735a2', //网格线颜色
|
||||||
|
width: 1, //网格线的加粗程度
|
||||||
|
type: 'dashed' //网格线类型
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "质量检测合格率统计",
|
||||||
|
data: [8.4,10,6.3,5],
|
||||||
|
type:'bar',
|
||||||
|
barWidth:'35',
|
||||||
|
itemStyle:{
|
||||||
|
|
||||||
|
color:function(params){
|
||||||
|
var arr= ['#61a4e7','#7ece51','#edca5f','#9470e4' ]
|
||||||
|
return arr[params.dataIndex]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
top:'5%',
|
||||||
|
bottom: "10%",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'TITLEFONT';
|
font-family: "TITLEFONT";
|
||||||
src: url(../../../assets/biaoti.ttf);
|
src: url(../../../assets/biaoti.ttf);
|
||||||
}
|
}
|
||||||
.box{
|
.box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 84px);
|
|
||||||
background: #f1f1f1;
|
background: #f1f1f1;
|
||||||
|
padding: 10px 15px;
|
||||||
}
|
}
|
||||||
.box-title{
|
.box-title {
|
||||||
font-family: 'TITLEFONT';
|
font-family: "TITLEFONT";
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
//顶部
|
||||||
|
.top {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
.top-item {
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
padding: 15px;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.top-icon {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//质量问题类型
|
||||||
|
.problemType {
|
||||||
|
margin-top: 15px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
width: 49.5%;
|
||||||
|
padding: 15px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.left-item,
|
||||||
|
.right-item {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(350px - 2rem);
|
||||||
|
}
|
||||||
|
#chart1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 质量检测合格率统计
|
||||||
|
.testIng {
|
||||||
|
margin-top: 15px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
width: 49.5%;
|
||||||
|
padding: 15px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.left-item,
|
||||||
|
.right-item {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(350px - 2rem);
|
||||||
|
}
|
||||||
|
#chart2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@for $i from 1 through 5 {
|
||||||
|
.top-icon-#{$i} {
|
||||||
|
background-image: url(./assets/top#{$i}.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user