{{ item.value }}{{ item.unit }}
@@ -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', '
')
}
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;