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/components/screen-shell.vue | 156 ++++++++++++++++++++++++++++++++++------------------
1 files changed, 102 insertions(+), 54 deletions(-)
diff --git a/src/modules/report/components/screen-shell.vue b/src/modules/report/components/screen-shell.vue
index e990e92..23d0b88 100644
--- a/src/modules/report/components/screen-shell.vue
+++ b/src/modules/report/components/screen-shell.vue
@@ -4,7 +4,7 @@
<div class="brand">
<div class="brand__mark" />
<div>
- <div class="brand__title">鏍″洯缁胯壊杩愯惀椹鹃┒鑸�</div>
+ <div class="brand__title">缁胯壊鏍″洯杩愯惀椹鹃┒鑸�</div>
<div class="brand__sub">{{ current?.audience }}瑙嗚 路 {{ current?.label }}</div>
</div>
</div>
@@ -16,7 +16,7 @@
class="nav__item"
:class="{ 'is-active': item.key === currentKey }"
type="button"
- @click="go(item.path)"
+ @click="go(item.key)"
>
<span class="nav__index">{{ item.index }}</span>
<span>{{ item.label }}</span>
@@ -24,17 +24,6 @@
</nav>
<div class="tools">
- <el-tag v-if="loadError" type="danger" effect="plain" size="small">{{ loadError }}</el-tag>
- <el-tag v-if="dataMode === 'demo'" type="info" effect="plain" size="small">
- 婕旂ず鏁版嵁 路 寰呬笟鍔℃暟鎹帴鍏�
- </el-tag>
- <el-tag v-else-if="dataMode === 'mixed'" type="warning" effect="plain" size="small">
- 閮ㄥ垎婕旂ず 路 閮ㄥ垎鎸囨爣寰呰ˉ鏁�
- </el-tag>
- <el-tag v-else-if="unavailable.length" type="warning" effect="plain" size="small">
- 閮ㄥ垎鎸囨爣寰呰ˉ鏁�
- </el-tag>
- <el-tag v-else type="success" effect="plain" size="small">瀹炴椂鏁版嵁</el-tag>
<cl-select-button v-model="timeRange" :options="TIME_RANGE_OPTIONS" small />
<el-button :icon="Refresh" circle :loading="loading" @click="reload" />
<el-button :icon="isFullscreen ? Close : FullScreen" circle @click="toggleFullscreen" />
@@ -43,20 +32,6 @@
<section v-loading="loading" class="green-screen__body">
<slot />
- <el-collapse v-if="dataMode === 'mixed' && demoSections.length" class="missing">
- <el-collapse-item title="褰撳墠涓烘紨绀烘暟鎹殑鍖哄潡" name="demo">
- <ul>
- <li v-for="item in demoSections" :key="item.section">{{ item.label }}</li>
- </ul>
- </el-collapse-item>
- </el-collapse>
- <el-collapse v-if="unavailable.length" class="missing">
- <el-collapse-item title="褰撳墠鎷夸笉鍒版垨鍙ｅ緞寰呯‘璁ょ殑鎸囨爣" name="1">
- <ul>
- <li v-for="item in unavailable" :key="item">{{ item }}</li>
- </ul>
- </el-collapse-item>
- </el-collapse>
</section>
</div>
</template>
@@ -65,32 +40,46 @@
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Close, FullScreen, Refresh } from '@element-plus/icons-vue';
-import { SCREEN_NAV, TIME_RANGE_OPTIONS, type ScreenKey } from '../data/screen';
-import { provideScreenTime, useScreenData, useScreenFieldSource } from '../hooks/use-screen';
+import {
+ SCREEN_HOME_PATH,
+ SCREEN_NAV,
+ TIME_RANGE_OPTIONS,
+ resolveScreenKey,
+ type ScreenKey
+} from '../data/screen';
+import { provideScreenTime, useScreenData, useScreenFullscreen } from '../hooks/use-screen';
const route = useRoute();
const router = useRouter();
const timeRange = provideScreenTime();
-const { data, dataMode, loading, loadError, reload } = useScreenData();
-const { demoSections } = useScreenFieldSource();
+const { loading, reload } = useScreenData();
+const { isFullscreen, setFullscreen } = useScreenFullscreen();
const rootRef = ref<HTMLElement>();
-const isFullscreen = ref(false);
-const unavailable = computed(() => data.value.unavailable || []);
-
-const currentKey = computed<ScreenKey>(() => {
- const page = String(route.params.page || 'overview') as ScreenKey;
- return SCREEN_NAV.some(e => e.key === page) ? page : 'overview';
-});
+const currentKey = computed<ScreenKey>(() =>
+ resolveScreenKey(route.params.page as string, route.query.page as string)
+);
const current = computed(() => SCREEN_NAV.find(e => e.key === currentKey.value));
-function go(path: string) {
- if (path !== route.path) router.push(path);
+/** 濮嬬粓鐣欏湪棣栭〉璺緞锛岀敤 ?page= 鍒囨崲 pageMap锛岄伩鍏嶈烦鍒� /overview 涓㈡帀瀵艰埅澹� */
+function go(key: ScreenKey) {
+ if (key === currentKey.value) return;
+ const query = { ...route.query } as Record<string, any>;
+ if (key === 'overview') {
+ delete query.page;
+ } else {
+ query.page = key;
+ }
+ router.replace({ path: SCREEN_HOME_PATH, query });
}
function syncFullscreen() {
- isFullscreen.value = document.fullscreenElement === rootRef.value;
+ setFullscreen(document.fullscreenElement === rootRef.value);
+ // 鍏ㄥ睆鍚庤Е鍙戝竷灞�閲嶇畻锛岃 echarts / 瀛愰〉 flex 楂樺害閾烘弧
+ window.setTimeout(() => {
+ window.dispatchEvent(new Event('resize'));
+ }, 320);
}
async function toggleFullscreen() {
@@ -127,6 +116,7 @@
&.is-fullscreen {
padding: 12px;
+ height: 100vh;
min-height: 100vh;
background: #07111f;
@@ -137,6 +127,77 @@
.brand__sub {
color: #94a3b8;
+ }
+
+ .green-screen__body {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ :deep(> *) {
+ flex: 1;
+ min-height: 0;
+ height: 100%;
+ }
+
+ /* 02/03/04 绛夊瓙椤靛湪鍏ㄥ睆涓嬬旱鍚戦摵婊� */
+ :deep(.screen-page) {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ .kpi-row,
+ .kpi-grid {
+ flex-shrink: 0;
+ margin-bottom: 0 !important;
+ }
+
+ .mid-row,
+ .el-row:not(.kpi-row) {
+ flex: 1;
+ min-height: 0;
+ margin-bottom: 0 !important;
+ display: flex !important;
+
+ > .el-col {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ .panel-card {
+ flex: 1;
+ min-height: 0 !important;
+ height: 100%;
+ }
+
+ .panel-card__body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ }
+
+ .chart,
+ .chart--bar,
+ .chart--value,
+ .chart--rank,
+ .flow,
+ .note {
+ flex: 1;
+ min-height: 0;
+ height: 100% !important;
+ }
+
+ /* 鍏ㄥ睆鏃跺己鍒跺埛鏂� echarts 瀹瑰櫒楂樺害 */
+ .echarts,
+ [_echarts_instance_] {
+ height: 100% !important;
+ width: 100% !important;
+ }
+ }
}
}
@@ -223,18 +284,5 @@
align-items: center;
gap: 10px;
flex-shrink: 0;
-}
-
-.missing {
- margin: 8px 0 0;
- border: none;
-
- ul {
- margin: 0;
- padding-left: 18px;
- line-height: 1.8;
- color: var(--el-text-color-regular);
- font-size: 13px;
- }
}
</style>
--
Gitblit v1.9.1