feat: 更新装配任务和质量报表

装配任务看板/src/views/index.vue

@@ -12,7 +12,14 @@
           <article v-for="item in summaryCards" :key="item.title" class="panel summary-card" :class="item.className">
             <div>
               <div class="summary-title">{{ item.title }}</div>
-              <div class="summary-body">
+              <div v-if="item.metrics" class="summary-metrics">
+                <div v-for="metric in item.metrics" :key="metric.label" class="summary-metric">
+                  <span>{{ metric.label }}</span>
+                  <b>{{ metric.value }}</b>
+                  <small>{{ item.unit }}</small>
+                </div>
+              </div>
+              <div v-else class="summary-body">
                 <img class="summary-icon" :src="item.icon" :alt="item.title" />
                 <div class="summary-value" :class="item.valueClass"><span>{{ item.value }}</span><small
                     v-if="item.unit">{{ item.unit }}</small></div>
@@ -143,7 +150,7 @@ onMounted(() => {
   searchDashboardData()
   startAllScroll()
   setInterval(function(){
-    searchDashboardData
+    searchDashboardData()
   },600000)
   
 })
@@ -221,6 +228,7 @@ const stopAllScroll = () => {
 
 // ============ 数据查询 ============
 const searchDashboardData = () => {
+  searchExecutableData()
   searchUnclosedData()
   searchMaterialshortageData()
   searchUrgentData()
@@ -229,6 +237,9 @@ const searchDashboardData = () => {
   searchPassRateData()
   searchDoneTaskData()
 }
+const searchExecutableData = () => {
+  queryDashboardData('装配中心任务看板_可执行任务数', applyExecutableData)
+}
 const searchUnclosedData = () => {
   queryDashboardData('装配中心任务看板_异常未关闭总数', applyUnclosedData)
 }
@@ -250,8 +261,14 @@ const searchPassRateData = () => {
 const searchDoneTaskData = () => {
   queryDashboardData('装配中心任务看板_已完成任务', applyDoneTaskData)
 }
+const applyExecutableData = rows => {
+  const row = rows[0] || {}
+  summaryCards[0].metrics[0].value = row.阀类可执行任务数 || 0
+  summaryCards[0].metrics[1].value = row.系统类可执行任务数 || 0
+  summaryCards[1].value = row.及时送检数 || 0
+}
 const applyUnclosedData = rows => {
-  summaryCards[3].value = rows[0].装配异常未关闭总数
+  summaryCards[4].value = rows[0].装配异常未关闭总数
 }
 const applyDeliveryData = rows => {
   deliveryRows.value = rows.map(item => {
@@ -286,7 +303,7 @@ const applyDeliveryData = rows => {
   })
 }
 const applyUrgentData = rows => {
-  summaryCards[1].value = rows[0].加急总数
+  summaryCards[3].value = rows[0].加急总数
 }
 const applyPassRateData = rows => {
   summaryCards[2].value = rows[0].总合格率+'%'
@@ -380,11 +397,11 @@ const icons = {
   done: svgIcon('#47eaa0', '#0da76b', '<rect x="19" y="19" width="34" height="34" rx="8"/><path d="M27 37l7 7 15-18"/>')
 }
 const summaryCards = [
-  { title: '及时送检数', value: 18, unit: '条', icon: icons.pending },
-  { title: '加急任务数', value: 125, unit: '条', icon: icons.urgent, valueClass: 'red-text' },
+  { title: '可执行任务数', unit: '条', className: 'executable-card', metrics: [{ label: '阀类', value: 0 }, { label: '系统类', value: 0 }] },
+  { title: '及时送检数', value: 0, unit: '条', icon: icons.pending , valueClass: 'red-text'},
   { title: '装配合格率', value: '100%', icon: icons.finalCheck, valueClass: 'green-text full-value' },
-  { title: '异常未关闭消息数', value: 5, unit: '条', icon: icons.urgent, valueClass: 'red-text' },
-  { title: '缺勤人员', value: 0, unit: '人', icon:icons.returnDown, valueClass: 'orange-text', className: 'absence-card', people: [{ name: '全勤', group: '装配1班' }, { name: '全勤', group: '装配2班' }, { name: '全勤', group: '装配3班' }] },
+  { title: '加急任务数', value: 125, unit: '条', icon: icons.urgent, valueClass: 'red-text' },
+  { title: '异常未关闭消息数', value: 5, unit: '条', icon: icons.urgent, valueClass: 'red-text', className: 'exception-card' },
 ]
 const taskColumns = [
   { label: '生产订单', key: 'productionOrder', width: '72px' },
@@ -504,7 +521,7 @@ const doneColumns = [
 
 .summary-row {
   display: grid;
-  grid-template-columns: 1.05fr 1.05fr 1fr 1.2fr 1.55fr;
+  grid-template-columns: 1.28fr 1fr 1fr 1fr .82fr;
   gap: 17px;
 }
 
@@ -594,6 +611,90 @@ const doneColumns = [
   text-align: left;
 }
 
+.executable-card {
+  padding: 8px 16px;
+}
+
+.executable-card .summary-title {
+  margin-bottom: 8px;
+  font-size: 21px;
+  text-align: left;
+}
+
+.summary-metrics {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  align-items: center;
+  width: 100%;
+}
+
+.summary-metric {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: 22px 48px;
+  align-items: baseline;
+  min-width: 0;
+  padding: 6px 10px 4px;
+  color: #fff;
+  font-weight: 800;
+}
+
+.summary-metric span {
+  grid-column: 1 / -1;
+  color: #89d4ff;
+  font-size: 18px;
+  line-height: 22px;
+  white-space: nowrap;
+}
+
+.summary-metric b {
+  color: #18c65b;
+  font-size: 50px;
+  line-height: 1;
+  text-align: right;
+  text-shadow: 0 0 10px rgba(24, 198, 91, .32);
+}
+
+.summary-metric small {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.exception-card {
+  padding: 8px 12px;
+}
+
+.exception-card .summary-title {
+  font-size: 18px;
+}
+
+.exception-card .summary-body {
+  grid-template-columns: 54px 150px;
+  column-gap: 16px;
+}
+
+.exception-card .summary-icon {
+  width: 54px;
+  height: 54px;
+}
+
+.exception-card .summary-value {
+  grid-template-columns: 105px 28px;
+}
+
+.exception-card .summary-value span {
+  font-size: 48px;
+}
+
+.exception-card .summary-value small {
+  font-size: 20px;
+}
+
 .summary-title {
   margin-bottom: 5px;
   color: #89d4ff;