From 17b92e9b60dda6dcc20c748046a5ff3c3958d52e Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期五, 28 八月 2026 16:19:11 +0800
Subject: [PATCH] 增加首页大屏显示
---
src/modules/report/views/screen/overview.vue | 104 +++++++++++++++++++++++++++++-----------------------
1 files changed, 58 insertions(+), 46 deletions(-)
diff --git a/src/modules/report/views/screen/overview.vue b/src/modules/report/views/screen/overview.vue
index 3b731fe..bab6c1d 100644
--- a/src/modules/report/views/screen/overview.vue
+++ b/src/modules/report/views/screen/overview.vue
@@ -1,38 +1,46 @@
<template>
<div class="screen-page">
- <el-row :gutter="10" class="kpi-row">
- <el-col v-for="item in kpis" :key="item.label" :xl="3" :lg="6" :sm="12" :xs="24">
- <kpi-card v-bind="item" />
- </el-col>
- </el-row>
+ <el-row :gutter="10" class="kpi-row">
+ <el-col v-for="item in kpis" :key="item.label" :xl="3" :lg="6" :sm="12" :xs="24">
+ <kpi-card v-bind="item" :demo="isDemoField(item.field)" />
+ </el-col>
+ </el-row>
- <el-row :gutter="10" class="mid-row">
- <el-col :lg="10" :xs="24">
- <panel-card title="鍨冨溇鍒嗙被缁撴瀯" sub="瀛︽牎绠＄悊灞傜湅缁撴瀯锛屼笉鐪嬪崟娆＄О閲�">
- <template #extra>
- <cl-select-button v-model="mixMetric" :options="mixOptions" small />
- </template>
- <v-chart :option="mixOption" autoresize class="chart" />
- </panel-card>
- </el-col>
- <el-col :lg="14" :xs="24">
- <panel-card title="鍥炴敹瓒嬪娍" :sub="trendHint">
- <template #extra>
- <cl-select-button v-model="trendMetric" :options="trendOptions" small />
- </template>
- <v-chart :option="trendOption" autoresize class="chart" />
- </panel-card>
- </el-col>
- </el-row>
+ <el-row :gutter="10" class="charts-row">
+ <el-col :lg="7" :xs="24">
+ <panel-card title="鍨冨溇鍒嗙被缁撴瀯" sub="瀛︽牎绠＄悊灞傜湅缁撴瀯锛屼笉鐪嬪崟娆＄О閲�" :demo="isDemoSection('wasteMix')">
+ <template #extra>
+ <cl-select-button v-model="mixMetric" :options="mixOptions" small />
+ </template>
+ <v-chart :option="mixOption" autoresize class="chart" />
+ </panel-card>
+ </el-col>
+ <el-col :lg="10" :xs="24">
+ <panel-card title="鍥炴敹瓒嬪娍" :sub="trendHint" :demo="isDemoSection('trend')">
+ <template #extra>
+ <cl-select-button v-model="trendMetric" :options="trendOptions" small />
+ </template>
+ <v-chart :option="trendOption" autoresize class="chart" />
+ </panel-card>
+ </el-col>
+ <el-col :lg="7" :xs="24">
+ <panel-card title="鍚勯櫌绯诲弬涓庝汉鏁�" sub="鎸夌敤鎴峰闄㈠悕绉� collegeName 姹囨��" :demo="isDemoSection('deptRank')">
+ <v-chart :option="rankOption" autoresize class="chart chart--bar" />
+ </panel-card>
+ </el-col>
+ </el-row>
- <el-row :gutter="10">
- <el-col :span="24">
- <panel-card title="鍚勯櫌绯诲弬涓庝汉鏁�" sub="鎸夌敤鎴峰闄㈠悕绉� collegeName 姹囨�伙紝浜哄潎鎸夊弬涓庝汉鏁�">
- <v-chart :option="rankOption" autoresize class="chart chart--bar" />
- </panel-card>
- </el-col>
- </el-row>
- </div>
+ <el-row :gutter="10" class="camera-row">
+ <el-col :span="24">
+ <panel-card title="鐜板満鐩戞帶" sub="閲嶇偣绔欑偣瀹炴椂鐢婚潰锛岄甯у悗鏆傚仠鎷夋祦浠ヨ妭鐪佸甫瀹�">
+ <template #extra>
+ <router-link class="camera-more" to="/monitor/device">鏇村</router-link>
+ </template>
+ <CameraMonitor :limit="6" />
+ </panel-card>
+ </el-col>
+ </el-row>
+ </div>
</template>
<script lang="ts" setup>
@@ -41,11 +49,14 @@
});
import { computed, ref } from 'vue';
+import CameraMonitor from '../../../monitor/views/cameras.vue';
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
-import { useChartTheme, useScreenData } from '../../hooks/use-screen';
+import ScreenCameraPreview from '../../components/screen-camera-preview.vue';
+import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';
const { data, timeRange } = useScreenData();
+const { isDemoField, isDemoSection } = useScreenFieldSource();
const { textColor, mutedColor, splitColor, primary, baseGrid, axisStyle, tooltip } = useChartTheme();
const mixMetric = ref<'weight' | 'value' | 'count'>('weight');
@@ -64,14 +75,14 @@
];
const kpis = computed(() => [
- { label: '浠婃棩鍥炴敹閲�', value: data.value.kpis.todayWeightKg, suffix: 'kg', fixed: 1, hint: '瀹炴椂绉伴噸姹囨��' },
- { label: '鏈尯闂村洖鏀堕噺', value: data.value.kpis.periodWeightTon, suffix: '鍚�', fixed: 2, hint: '褰撳墠鏃堕棿鑼冨洿' },
- { label: '璧勬簮鍖栫巼', value: data.value.kpis.resourceRate, suffix: '%', fixed: 1, hint: '鍙洖鏀剁墿閲嶉噺 / 鎬婚噸閲忥紝涓嶅惈澶т欢鍜岀數瀛�' },
- { label: '鍥炴敹浠峰��', value: data.value.kpis.periodValue, suffix: '鍏�', fixed: 0, hint: '鏃ヨ〃浼扮畻閿�鍞' },
- { label: '纰冲噺鎺�', value: data.value.kpis.periodCarbonTon, suffix: '鍚–O鈧俥', fixed: 2, hint: '鍒嗙被閲嶉噺 脳 纰冲噺鍥犳暟' },
- { label: '绱鍥炴敹閲�', value: data.value.kpis.totalWeightTon, suffix: '鍚�', fixed: 1, hint: '涓婄嚎浠ユ潵绱' },
- { label: '绱鍙備笌浜烘暟', value: data.value.kpis.totalParticipants, suffix: '浜�', fixed: 0, hint: '鍘婚噸鏍″洯鐢ㄦ埛' },
- { label: '绱纰崇Н鍒�', value: data.value.kpis.totalPoints, suffix: '鍒�', fixed: 0, hint: '璐︽埛浣欓鍚堣' }
+ { field: 'kpis.todayWeightKg', label: '浠婃棩鍥炴敹閲�', value: data.value.kpis.todayWeightKg, suffix: 'kg', fixed: 1, hint: '瀹炴椂绉伴噸姹囨��' },
+ { field: 'kpis.periodWeightTon', label: '鏈尯闂村洖鏀堕噺', value: data.value.kpis.periodWeightTon, suffix: '鍚�', fixed: 2, hint: '褰撳墠鏃堕棿鑼冨洿' },
+ { field: 'kpis.resourceRate', label: '璧勬簮鍖栫巼', value: data.value.kpis.resourceRate, suffix: '%', fixed: 1, hint: '鍙洖鏀剁墿閲嶉噺/鎬婚噸閲忥紝涓嶅惈澶т欢' },
+ { field: 'kpis.periodValue', label: '鍥炴敹浠峰��', value: data.value.kpis.periodValue, suffix: '鍏�', fixed: 0, hint: '鏃ヨ〃浼扮畻閿�鍞' },
+ { field: 'kpis.periodCarbonTon', label: '纰冲噺鎺�', value: data.value.kpis.periodCarbonTon, suffix: '鍚–O鈧俥', fixed: 2, hint: '鍒嗙被閲嶉噺 脳 纰冲噺鍥犳暟' },
+ { field: 'kpis.totalWeightTon', label: '绱鍥炴敹閲�', value: data.value.kpis.totalWeightTon, suffix: '鍚�', fixed: 1, hint: '涓婄嚎浠ユ潵绱' },
+ { field: 'kpis.totalParticipants', label: '绱鍙備笌浜烘暟', value: data.value.kpis.totalParticipants, suffix: '浜�', fixed: 0, hint: '鍘婚噸鏍″洯鐢ㄦ埛' },
+ { field: 'kpis.totalPoints', label: '绱纰崇Н鍒�', value: data.value.kpis.totalPoints, suffix: '鍒�', fixed: 0, hint: '璐︽埛浣欓鍚堣' }
]);
const mixOption = computed(() => ({
@@ -162,7 +173,8 @@
<style lang="scss" scoped>
.screen-page {
.kpi-row,
- .mid-row {
+ .charts-row,
+ .camera-row {
margin-bottom: 10px;
}
@@ -172,19 +184,19 @@
}
}
- .mid-row {
+ .charts-row {
:deep(.panel-card) {
- min-height: 360px;
+ min-height: 380px;
}
}
.chart {
- height: 300px;
+ height: 340px;
width: 100%;
&--bar {
- height: 320px;
+ height: 370px;
}
}
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.1