From 8954db4cf4969166961c72569dfa24645276b947 Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期日, 30 八月 2026 11:48:15 +0800
Subject: [PATCH] 修复首页问题
---
src/modules/report/views/screen/operation.vue | 154 +++++++++++++++++++++++++++-----------------------
1 files changed, 83 insertions(+), 71 deletions(-)
diff --git a/src/modules/report/views/screen/operation.vue b/src/modules/report/views/screen/operation.vue
index 42c3164..8356869 100644
--- a/src/modules/report/views/screen/operation.vue
+++ b/src/modules/report/views/screen/operation.vue
@@ -1,39 +1,35 @@
<template>
<div class="screen-page">
- <el-row :gutter="10" class="kpi-row">
- <el-col :lg="3" :sm="8" :xs="12">
- <kpi-card label="鍦ㄧ嚎鍒嗘嫞鍛�" :value="data.kpis.sorterOnline"
- :hint="`${data.kpis.sorterOnline} / ${data.kpis.sorterTotal}`"
- :demo="isDemoField('kpis.sorterOnline')" />
- </el-col>
- <el-col :lg="3" :sm="8" :xs="12">
- <kpi-card label="鍦ㄧ嚎杞﹁締" :value="data.kpis.vehicleOnline"
- :hint="`${data.kpis.vehicleOnline} / ${data.kpis.vehicleTotal}`"
- :demo="isDemoField('kpis.vehicleOnline')" />
- </el-col>
- <el-col :lg="3" :sm="8" :xs="12">
- <kpi-card label="鍦ㄧ嚎鍒嗘嫞鐐�" :value="data.kpis.siteOnline"
- :hint="`${data.kpis.siteOnline} / ${data.kpis.siteTotal}锛屾寜绔欑偣鍚敤`"
- :demo="isDemoField('kpis.siteOnline')" />
- </el-col>
- <el-col :lg="3" :sm="8" :xs="12">
- <kpi-card label="浠婃棩鍥炴敹璁㈠崟" :value="data.kpis.todayOrders" :demo="isDemoField('kpis.todayOrders')" />
- </el-col>
- <el-col :lg="4" :sm="8" :xs="12">
- <kpi-card label="浠婃棩棰勭害 / 寰呭鐞�" :value="data.kpis.todayAppointments"
- :hint="`寰呭鐞� ${data.kpis.pendingAppointments}`"
- :demo="isDemoField('kpis.todayAppointments')" />
- </el-col>
- <el-col :lg="4" :sm="8" :xs="12">
- <kpi-card label="寮傚父鍛婅" :value="data.kpis.alerts" alert
- :hint="`鍋ュ悍寮傚父 ${data.kpis.healthAlerts}锛屼笉灞曠ず闅愮浣撳緛`"
- :demo="isDemoField('kpis.alerts')" />
- </el-col>
- <el-col :lg="4" :sm="8" :xs="12">
- <kpi-card label="杞﹁締瀹夊叏浜嬩欢" :value="safetyCount" hint="瓒呴�� / 鎬ュ埞绛夛紝鏉ヨ嚜杞﹁締鏃ユ眹鎬�"
- :demo="isDemoSection('vehicles')" />
- </el-col>
- </el-row>
+ <div class="kpi-grid" style="--kpi-cols: 7">
+ <kpi-card
+ label="鍦ㄧ嚎鍒嗘嫞鍛�"
+ :value="data.kpis.sorterOnline"
+ :hint="`${data.kpis.sorterOnline} / ${data.kpis.sorterTotal}`"
+ />
+ <kpi-card
+ label="鍦ㄧ嚎杞﹁締"
+ :value="data.kpis.vehicleOnline"
+ :hint="`${data.kpis.vehicleOnline} / ${data.kpis.vehicleTotal}`"
+ />
+ <kpi-card
+ label="鍦ㄧ嚎鍒嗘嫞鐐�"
+ :value="data.kpis.siteOnline"
+ :hint="`${data.kpis.siteOnline} / ${data.kpis.siteTotal}锛屾寜绔欑偣鍚敤`"
+ />
+ <kpi-card label="浠婃棩鍥炴敹璁㈠崟" :value="data.kpis.todayOrders" />
+ <kpi-card
+ label="浠婃棩棰勭害 / 寰呭鐞�"
+ :value="data.kpis.todayAppointments"
+ :hint="`寰呭鐞� ${data.kpis.pendingAppointments}`"
+ />
+ <kpi-card
+ label="寮傚父鍛婅"
+ :value="data.kpis.alerts"
+ alert
+ :hint="`鍋ュ悍寮傚父 ${data.kpis.healthAlerts}锛屼笉灞曠ず闅愮浣撳緛`"
+ />
+ <kpi-card label="杞﹁締瀹夊叏浜嬩欢" :value="safetyCount" hint="瓒呴�� / 鎬ュ埞绛夛紝鏉ヨ嚜杞﹁締鏃ユ眹鎬�" />
+ </div>
<el-row :gutter="10" class="mid-row">
<el-col :lg="14" :xs="24">
@@ -58,7 +54,7 @@
</el-col>
</el-row>
- <el-row :gutter="10">
+ <el-row :gutter="10" class="bottom-row">
<el-col :lg="8" :xs="24">
<panel-card title="鍒嗘嫞鍛樼姸鎬�" sub="鏉ヨ嚜鍒嗘嫞鍛樻棩琛紝鍙眹鎬荤姸鎬侊紝涓嶅睍绀轰綋寰佹槑缁�" :demo="isDemoSection('sorterStatus')">
<div class="status-list">
@@ -72,14 +68,16 @@
</el-col>
<el-col :lg="8" :xs="24">
<panel-card title="杞﹁締杩愯" sub="鍏徃棰嗗鐪嬭繍鍔涗笌瀹夊叏锛屼笉杩涙牎棰嗗棣栭〉" :demo="isDemoSection('vehicles')">
- <div class="table table--vehicle">
- <div class="table__head">
- <span>杞︾墝</span>
- <span>閲岀▼km</span>
- <span>鎬犻�熷垎</span>
- <span>瓒呴��</span>
- <span>鐘舵��</span>
- </div>
+ <screen-auto-scroll class="table table--vehicle" :watch-key="vehicleWatchKey">
+ <template #head>
+ <div class="table__head">
+ <span>杞︾墝</span>
+ <span>閲岀▼km</span>
+ <span>鎬犻�熷垎</span>
+ <span>瓒呴��</span>
+ <span>鐘舵��</span>
+ </div>
+ </template>
<div v-for="item in data.vehicles" :key="item.no" class="table__row">
<span>{{ item.no }}</span>
<span>{{ item.km }}</span>
@@ -87,23 +85,25 @@
<span>{{ item.overspeed }}</span>
<span :class="item.status === '鍦ㄧ嚎' ? 'is-on' : 'is-off'">{{ item.status }}</span>
</div>
- </div>
+ </screen-auto-scroll>
</panel-card>
</el-col>
<el-col :lg="8" :xs="24">
<panel-card title="鍒嗘嫞鐐瑰悶鍚�" sub="杩愯惀缁村害鎵嶄笅閽诲埌鐐逛綅" :demo="isDemoSection('sites')">
- <div class="table table--site">
- <div class="table__head">
- <span>鏀堕泦鐐�</span>
- <span>浠婃棩kg</span>
- <span>鍦ㄧ嚎</span>
- </div>
+ <screen-auto-scroll class="table table--site" :watch-key="siteWatchKey">
+ <template #head>
+ <div class="table__head">
+ <span>鏀堕泦鐐�</span>
+ <span>浠婃棩kg</span>
+ <span>鍦ㄧ嚎</span>
+ </div>
+ </template>
<div v-for="item in data.sites" :key="item.name" class="table__row">
<span>{{ item.name }}</span>
<span>{{ item.weight }}</span>
<span :class="item.online ? 'is-on' : 'is-off'">{{ item.online ? '鍦ㄧ嚎' : '绂荤嚎' }}</span>
</div>
- </div>
+ </screen-auto-scroll>
</panel-card>
</el-col>
</el-row>
@@ -118,13 +118,16 @@
import { computed } from 'vue';
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
+import ScreenAutoScroll from '../../components/screen-auto-scroll.vue';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data } = useScreenData();
-const { isDemoField, isDemoSection } = useScreenFieldSource();
+const { isDemoSection } = useScreenFieldSource();
const { mutedColor, splitColor, tooltip } = useChartTheme();
const safetyCount = computed(() => data.value.vehicles.reduce((s, e) => s + e.overspeed, 0));
+const vehicleWatchKey = computed(() => data.value.vehicles.map(e => e.no).join('|'));
+const siteWatchKey = computed(() => data.value.sites.map(e => e.name).join('|'));
function funnelWidth(value: number) {
const max = data.value.appointmentFlow[0]?.value || 1;
@@ -165,17 +168,11 @@
</script>
<style lang="scss" scoped>
-.screen-page {
+@import '../../styles/screen-kpi.scss';
- .kpi-row,
+.screen-page {
.mid-row {
margin-bottom: 10px;
- }
-
- .kpi-row {
- :deep(.el-col) {
- margin-bottom: 10px;
- }
}
.mid-row,
@@ -272,32 +269,47 @@
}
}
- .table {
- padding: 8px 12px 16px;
- font-size: 13px;
+ .bottom-row {
+ :deep(.panel-card) {
+ min-height: 280px;
+ }
- &--vehicle &__head,
- &--vehicle &__row {
+ :deep(.panel-card__body) {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ overflow: hidden;
+ }
+ }
+
+ .table {
+ padding: 8px 12px 12px;
+ font-size: 13px;
+ height: 100%;
+ min-height: 0;
+
+ &--vehicle :deep(.table__head),
+ &--vehicle .table__row {
grid-template-columns: 1.4fr repeat(4, 0.8fr);
}
- &--site &__head,
- &--site &__row {
+ &--site :deep(.table__head),
+ &--site .table__row {
grid-template-columns: 1.6fr 0.8fr 0.6fr;
}
- &__head,
- &__row {
+ :deep(.table__head),
+ .table__row {
display: grid;
gap: 8px;
padding: 10px 4px;
}
- &__head {
+ :deep(.table__head) {
color: var(--el-text-color-secondary);
}
- &__row {
+ .table__row {
border-top: 1px solid var(--el-border-color-extra-light);
}
--
Gitblit v1.9.1