1

src/api/databoard/index.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+/**
+ * 获取模块1数据
+ * @param {查询条件} data
+ */
+export function getMoudel01() {
+    return request({
+        url: 'mes/Console/get_moudel01',
+        method: 'get'
+    })
+}

src/views/databoard/index.vue

@@ -35,63 +35,63 @@
         <!-- 顶部数据 -->
         <el-row :gutter="20">
             <el-col :span="4">
-                <div class="card blue">
+                <div class="card blue" @click="getCardNumber">
                     <div class="card-title">今日工单总数</div>
-                    <div class="number">{{ cardInfo.todayOrderNum }}</div>
+                    <div class="number">{{ cardInfo.workorders }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
                 <div class="card green">
                     <div class="card-title">已生产工单数</div>
-                    <div class="number">{{ cardInfo.todayFinishOrderNum }}</div>
+                    <div class="number">{{ cardInfo.finishWorkorders }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
                 <div class="card red">
                     <div class="card-title">异常工单总数</div>
-                    <div class="number">{{ cardInfo.todayErrorOrderNum }}</div>
+                    <div class="number">{{ cardInfo.exceptionWorkorders }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
                 <div class="card gary">
                     <div class="card-title">今日备料任务</div>
-                    <div class="number">{{ cardInfo.todayMaterialPreparationNum }}</div>
+                    <div class="number">{{ cardInfo.preparationTasks }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
                 <div class="card orange">
                     <div class="card-title">索赔数量</div>
-                    <div class="number">{{ cardInfo.claimNum }}</div>
+                    <div class="number">{{ cardInfo.claimsQuantity }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
-                <div class="card purple">
+                <div class="card pink">
                     <div class="card-title">报损数量</div>
-                    <div class="number">{{ cardInfo.reportLossNum }}</div>
+                    <div class="number">{{ cardInfo.reportedLossQuantity }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
                 <div class="card purple">
                     <div class="card-title">成品缺陷</div>
-                    <div class="number">{{ cardInfo.finishedProductDefects }}</div>
+                    <div class="number">{{ cardInfo.productDefectQuantity }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
                 <div class="card cyan">
                     <div class="card-title">点检任务数</div>
-                    <div class="number">{{ cardInfo.inspectionTaskNum }}</div>
+                    <div class="number">{{ cardInfo.inspectionTaskQuantity }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
                 <div class="card magenta">
                     <div class="card-title">安灯报警数</div>
-                    <div class="number">{{ cardInfo.andonNum }}</div>
+                    <div class="number">{{ cardInfo.andonQuantity }}</div>
                 </div>
             </el-col>
             <el-col :span="4">
                 <div class="card brown">
                     <div class="card-title">设备报修数</div>
-                    <div class="number">{{ cardInfo.deviceRepairNum }}</div>
+                    <div class="number">{{ cardInfo.equipmentRepairQuantity }}</div>
                 </div>
             </el-col>
         </el-row>
@@ -173,7 +173,7 @@ const option = reactive({
         }
     },
     legend: {
-        data: ['一组', '二组', '三组']
+        data: ['总物料需求数', '配料需求数']
     },
     grid: {
         left: '3%',
@@ -183,19 +183,19 @@ const option = reactive({
     },
     xAxis: {
         type: 'category',
-        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        data: ['一线', '二线', '三线', '四线', '五线', '六线', '七线']
     },
     yAxis: {
         type: 'value'
     },
     series: [
         {
-            name: '一组',
+            name: '总物料需求数',
             type: 'bar',
             data: [120, 200, 150, 80, 70, 110, 130]
         },
         {
-            name: '二组',
+            name: '配料需求数',
             type: 'bar',
             data: [120, 200, 150, 80, 70, 110, 130]
         }
@@ -213,29 +213,46 @@ onBeforeUnmount(() => {
     myChart.value = null
 })
 /// ================ 数据获取 =============
+import { getMoudel01 } from '@/api/databoard/index'
 const cardInfo = reactive({
     // 今日订单数量
-    todayOrderNum: 0,
+    workorders: 0,
     // 今日完成订单数量
-    todayFinishOrderNum: 0,
+    finishWorkorders: 0,
     // 今日错误订单数量
-    todayErrorOrderNum: 0,
-    // 今日物料准备数量
-    todayMaterialPreparationNum: 0,
+    exceptionWorkorders: 0,
+    // 今日物料任务数
+    preparationTasks: 0,
     // 索赔数量
-    claimNum: 0,
+    claimsQuantity: 0,
     // 报损数量
-    reportLossNum: 0,
-    // 索赔数量
-    finishedProductDefects: 0,
+    reportedLossQuantity: 0,
+    // 成品缺陷
+    productDefectQuantity: 0,
     // 点检任务数
-    inspectionTaskNum: 0,
+    inspectionTaskQuantity: 0,
     // 安灯数量
-    andonNum: 0,
+    andonQuantity: 0,
     // 设备报修数量
-    deviceRepairNum: 0
+    equipmentRepairQuantity: 0
 })
-function getCardNumber() {}
+async function getCardNumber() {
+    getMoudel01().then((res) => {
+        if (res.code === 200) {
+            cardInfo.workorders = res.data.workorders
+            cardInfo.finishWorkorders = res.data.finishWorkorders
+            cardInfo.exceptionWorkorders = res.data.exceptionWorkorders
+            cardInfo.preparationTasks = res.data.preparationTasks
+            cardInfo.claimsQuantity = res.data.claimsQuantity
+            cardInfo.reportedLossQuantity = res.data.reportedLossQuantity
+            cardInfo.productDefectQuantity = res.data.productDefectQuantity
+            cardInfo.inspectionTaskQuantity = res.data.inspectionTaskQuantity
+            cardInfo.andonQuantity = res.data.andonQuantity
+            cardInfo.equipmentRepairQuantity = res.data.equipmentRepairQuantity
+        }
+    })
+}
+getCardNumber()
 /// ======================================
 </script>
 
@@ -293,10 +310,13 @@ function getCardNumber() {}
     background-color: #13ce66;
 }
 .magenta {
-    background-color: #f56c6c;
+    background-color: #f91194;
 }
 .brown {
-    background-color: #e6a23c;
+    background-color: #673f02;
+}
+.pink {
+    background-color: #ff69b4;
 }
 </style>
 <style lang="scss" scoped>