51 lines
1.8 KiB
Vue
51 lines
1.8 KiB
Vue
<template>
|
|
<div class="dash-page">
|
|
<div class="dash-bar">
|
|
<a @click="router.push('/home')">← 返回工作台</a>
|
|
<span class="dash-bar-tt">专业看板 · 工程污染概览</span>
|
|
<span class="dash-bar-note">演示数据(静态),接入后端聚合后实时</span>
|
|
</div>
|
|
<div class="dash-host"><div ref="host" style="width:100%;height:100%"></div></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
const host = ref<HTMLElement>();
|
|
|
|
function loadScript(src: string): Promise<void> {
|
|
return new Promise((resolve, reject) => {
|
|
if (document.querySelector(`script[src="${src}"]`)) return resolve();
|
|
const s = document.createElement('script');
|
|
s.src = src;
|
|
s.onload = () => resolve();
|
|
s.onerror = () => reject(new Error('load fail ' + src));
|
|
document.head.appendChild(s);
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const w = window as any;
|
|
if (!w.renderDashboard) {
|
|
await loadScript('/dashboard/data.js');
|
|
await loadScript('/dashboard/charts.js');
|
|
await loadScript('/dashboard/dashboard.js');
|
|
}
|
|
if (host.value) host.value.innerHTML = w.renderDashboard('warm', { compliance: 'donut', pollutant: 'ring' });
|
|
});
|
|
</script>
|
|
|
|
<style src="../styles/dashboard.css"></style>
|
|
<style scoped>
|
|
.dash-page { height: 100vh; display: flex; flex-direction: column; background: #f4f0e7; }
|
|
.dash-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #fffdf8; border-bottom: 1px solid #e8e0d0; }
|
|
.dash-bar a { color: #1f7a5a; cursor: pointer; font-weight: 600; }
|
|
.dash-bar-tt { font-weight: 700; }
|
|
.dash-bar-note { color: #a89c86; font-size: 12px; margin-left: auto; }
|
|
.dash-host { flex: 1; min-height: 0; overflow: auto; }
|
|
.dash-host :deep(.dash) { min-width: 1280px; }
|
|
</style>
|