feat:汽车覆盖件工业视觉检测平台项目 汽车覆盖件工业视觉检测平台 汽车覆盖件质量一张图展示

god-ui/src/views/qcfgjIndustrialVision/qcfgquality/index.vue

@@ -1,46 +1,358 @@
 <template>
-    <div class="box">
-        <!-- 顶部 -->
-        <div class="top">
-
+  <div class="box">
+    <!-- 顶部 -->
+    <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 class="problemType"></div>
-        <!-- 质量检测合格率统计 -->
-        <div class="testIng"></div>
-
+      </div>
     </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 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>
 </template>
 <script>
+import {
+  generateBaseOptions,
+  generatePieOptions,
+  initChartStatic,
+} from "@/utils/bigscreenTool/index.js";
 export default {
-    data() {
-        return {
-            
+  data() {
+    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() {
+    this.initChart1();
+    this.initChart2();
+  },
+  methods: {
+    initChart1() {
+      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%",
+          },
+        })
+      );
     },
-    mounted() {
-        this.initChart1()
-        this.initChart2()
-    },
-    methods: {
-        initChart1(){},
-        initChart2(){},
-    },
-}
+  },
+};
 </script>
 <style lang="scss" scoped>
 @font-face {
-    font-family: 'TITLEFONT';
-    src: url(../../../assets/biaoti.ttf);
+  font-family: "TITLEFONT";
+  src: url(../../../assets/biaoti.ttf);
 }
-.box{
+.box {
+  width: 100%;
+  background: #f1f1f1;
+  padding: 10px 15px;
+}
+.box-title {
+  font-family: "TITLEFONT";
+  font-size: 20px;
+  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(100vh - 84px);
-    background: #f1f1f1;
+    height: calc(350px - 2rem);
+  }
+  #chart1 {
+    width: 100%;
+    height: 100%;
+  }
 }
-.box-title{
-    font-family: 'TITLEFONT';
-    font-size: 20px;
-    margin-bottom: 10px;
+
+// 质量检测合格率统计
+.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>