gavin/monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update at 2026-01-14 18:14:14

Browse Source
This commit is contained in:
douboer@gmail.com
2026-01-14 18:14:14 +08:00
parent 79bde71555
commit ff85b906d2
2 changed files with 278 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/index.html vendored
View File

@@ -7,8 +7,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>火情监控全链路业务监控视图</title> <title>火情监控全链路业务监控视图</title>
<script type="module" crossorigin src="/assets/index-DVL1K2L5.js"></script> <script type="module" crossorigin src="/assets/index-D4_xJwA9.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-nKce6T9N.css"> <link rel="stylesheet" crossorigin href="/assets/index-Cu9QlGHE.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

322
src/App.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<div class="monitor-container" :class="{ 'is-top2': currentStyle === 'top2' }"> <div
class="monitor-container"
:class="{ 'is-top2': currentStyle === 'top2', 'is-top3': currentStyle === 'top3' }"
>
<!-- 样式切换按钮 --> <!-- 样式切换按钮 -->
<div class="style-switcher" :class="{ 'is-top2': currentStyle === 'top2' }"> <div
class="style-switcher"
:class="{ 'is-top2': currentStyle === 'top2', 'is-top3': currentStyle === 'top3' }"
>
<button <button
:class="['style-btn', { active: currentStyle === 'circle' }]" :class="['style-btn', { active: currentStyle === 'circle' }]"
@click="switchStyle('circle')" @click="switchStyle('circle')"
@@ -14,10 +20,21 @@
> >
原型-2 原型-2
</button> </button>
<button
:class="['style-btn', { active: currentStyle === 'top3' }]"
@click="switchStyle('top3')"
>
原型-3
</button>
</div> </div>
<template v-if="currentStyle === 'top2'"> <template v-if="currentStyle === 'top2' || currentStyle === 'top3'">
<div class="top2-stage" ref="top2Stage" :style="{ '--top2-scale': top2Scale }"> <div
class="top2-stage"
:class="topLayoutClass"
ref="top2Stage"
:style="{ '--top2-scale': top2Scale }"
>
<div class="top2-scale"> <div class="top2-scale">
<div class="top2-layout"> <div class="top2-layout">
<div class="top2-header" data-node-id="153:2111"> <div class="top2-header" data-node-id="153:2111">
@@ -29,11 +46,17 @@
<div class="panel-outline panel-left-top" data-node-id="153:2087"> <div class="panel-outline panel-left-top" data-node-id="153:2087">
<div class="panel-label label-metric-11" data-node-id="153:2098">视联拉流质量统计</div> <div class="panel-label label-metric-11" data-node-id="153:2098">视联拉流质量统计</div>
</div> </div>
<div class="panel-outline panel-left-middle" data-node-id="153:2089"> <div v-if="currentStyle === 'top3'" class="panel-outline panel-left-middle" data-node-id="153:2089">
<div class="panel-label label-metric-21" data-node-id="153:2099">AI分析质量监控</div> <div class="panel-label label-metric-21" data-node-id="153:2099">AI分析质量监控</div>
</div> </div>
<div class="panel-outline panel-left-bottom" data-node-id="271:27"> <div class="panel-outline panel-left-bottom" data-node-id="271:27">
<div class="panel-label label-metric-31" data-node-id="271:28">网络质量分析</div> <div
class="panel-label"
:class="currentStyle === 'top3' ? 'label-metric-31' : 'label-metric-21'"
data-node-id="271:28"
>
{{ currentStyle === 'top3' ? '网络质量分析' : 'AI分析质量监控' }}
</div>
</div> </div>
</div> </div>
@@ -82,7 +105,11 @@
</div> </div>
<div class="top2-subheader" data-node-id="271:25">业务系统分层整体架构展示</div> <div class="top2-subheader" data-node-id="271:25">业务系统分层整体架构展示</div>
<div class="top2-center" data-node-id="162:5"> <div class="top2-center" data-node-id="162:5">
<div class="svg-wrapper is-top2" ref="svgWrapper" v-html="svgContent"></div> <div
:class="['svg-wrapper', currentStyle === 'top3' ? 'is-top3' : 'is-top2']"
ref="svgWrapper"
v-html="svgContent"
></div>
</div> </div>
<div class="top2-bottom-row"> <div class="top2-bottom-row">
<div class="panel-outline panel-center-bottom-left" data-node-id="153:2091"> <div class="panel-outline panel-center-bottom-left" data-node-id="153:2091">
@@ -117,9 +144,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue' import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'
type StyleType = 'circle' | 'top2' type StyleType = 'circle' | 'top2' | 'top3'
const svgWrapper = ref<HTMLElement | null>(null) const svgWrapper = ref<HTMLElement | null>(null)
const svgContent = ref('') const svgContent = ref('')
@@ -127,8 +154,10 @@ const currentStyle = ref<StyleType>('circle')
const top2Stage = ref<HTMLElement | null>(null) const top2Stage = ref<HTMLElement | null>(null)
const top2Scale = ref(1) const top2Scale = ref(1)
const TOP2_WIDTH = 1438 const TOP_LAYOUTS = {
const TOP2_HEIGHT = 832 top2: { width: 1296, height: 692 },
top3: { width: 1438, height: 832 },
}
let top2ResizeObserver: ResizeObserver | null = null let top2ResizeObserver: ResizeObserver | null = null
const top2CardIcons = { const top2CardIcons = {
@@ -141,10 +170,13 @@ const top2CardIcons = {
const updateTop2Scale = () => { const updateTop2Scale = () => {
const stage = top2Stage.value const stage = top2Stage.value
if (!stage) return if (!stage) return
if (currentStyle.value === 'circle') return
const layout = TOP_LAYOUTS[currentStyle.value]
if (!layout) return
const { width, height } = stage.getBoundingClientRect() const { width, height } = stage.getBoundingClientRect()
if (!width || !height) return if (!width || !height) return
const scaleX = width / TOP2_WIDTH const scaleX = width / layout.width
const scaleY = height / TOP2_HEIGHT const scaleY = height / layout.height
top2Scale.value = Math.min(scaleX, scaleY) top2Scale.value = Math.min(scaleX, scaleY)
} }
@@ -201,7 +233,7 @@ onBeforeUnmount(() => {
}) })
watch(currentStyle, async (style) => { watch(currentStyle, async (style) => {
if (style === 'top2') { if (style === 'top2' || style === 'top3') {
await nextTick() await nextTick()
attachTop2Observer() attachTop2Observer()
updateTop2Scale() updateTop2Scale()
@@ -210,6 +242,10 @@ watch(currentStyle, async (style) => {
} }
}) })
const topLayoutClass = computed(() => (
currentStyle.value === 'top3' ? 'layout-top3' : 'layout-top2'
))
const addFlowingAnimation = () => { const addFlowingAnimation = () => {
if (!svgWrapper.value) return if (!svgWrapper.value) return
@@ -219,6 +255,8 @@ const addFlowingAnimation = () => {
return return
} }
svg.querySelectorAll('.flowing-line').forEach((node) => node.remove())
// 查找所有可能的连线元素 // 查找所有可能的连线元素
const allPaths = svg.querySelectorAll('path, line, polyline') const allPaths = svg.querySelectorAll('path, line, polyline')
console.log('Found elements:', allPaths.length) console.log('Found elements:', allPaths.length)
@@ -333,6 +371,8 @@ const addTop2Animation = () => {
return return
} }
svg.querySelectorAll('.flowing-line-top2').forEach((node) => node.remove())
// 查找所有可能的连线元素 // 查找所有可能的连线元素
const allPaths = svg.querySelectorAll('path, line, polyline') const allPaths = svg.querySelectorAll('path, line, polyline')
console.log('Found elements for top2:', allPaths.length) console.log('Found elements for top2:', allPaths.length)
@@ -490,7 +530,8 @@ const addTop2Animation = () => {
margin-top: 10px; margin-top: 10px;
} }
.style-switcher.is-top2 { .style-switcher.is-top2,
.style-switcher.is-top3 {
margin-top: 0; margin-top: 0;
position: absolute; position: absolute;
top: 24px; top: 24px;
@@ -579,7 +620,8 @@ const addTop2Animation = () => {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.monitor-container.is-top2 { .monitor-container.is-top2,
.monitor-container.is-top3 {
padding: 0; padding: 0;
gap: 0; gap: 0;
align-items: stretch; align-items: stretch;
@@ -599,8 +641,6 @@ const addTop2Animation = () => {
.top2-scale { .top2-scale {
position: relative; position: relative;
width: calc(1438px * var(--top2-scale));
height: calc(832px * var(--top2-scale));
flex-shrink: 0; flex-shrink: 0;
} }
@@ -608,13 +648,31 @@ const addTop2Animation = () => {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 1438px;
height: 832px;
background: #2543a5; background: #2543a5;
border-radius: 0; border-radius: 0;
overflow: hidden; overflow: hidden;
transform: scale(var(--top2-scale)); transform: scale(var(--top2-scale));
transform-origin: top left; transform-origin: top left;
}
.layout-top2 .top2-scale {
width: calc(1296px * var(--top2-scale));
height: calc(692px * var(--top2-scale));
}
.layout-top3 .top2-scale {
width: calc(1438px * var(--top2-scale));
height: calc(832px * var(--top2-scale));
}
.layout-top2 .top2-layout {
width: 1296px;
height: 692px;
}
.layout-top3 .top2-layout {
width: 1438px;
height: 832px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
@@ -623,10 +681,24 @@ const addTop2Animation = () => {
} }
.top2-header { .top2-header {
box-sizing: border-box;
}
.layout-top2 .top2-header {
position: absolute;
left: 16px;
top: 16px;
width: 1264px;
height: 50px;
border-radius: 16px;
background: #e5e5e5;
border: 0.297px solid #9fbaff;
}
.layout-top3 .top2-header {
height: 50px; height: 50px;
border-radius: 16px; border-radius: 16px;
background: rgba(229, 229, 229, 0); background: rgba(229, 229, 229, 0);
box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -634,20 +706,48 @@ const addTop2Animation = () => {
.top2-title { .top2-title {
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 32px;
font-weight: 700; font-weight: 700;
}
.layout-top2 .top2-title {
position: absolute;
left: 516.1px;
top: 7.78px;
font-size: 28.491px;
color: #2543a5;
letter-spacing: 0.3px;
}
.layout-top3 .top2-title {
font-size: 32px;
color: #f9d1b0; color: #f9d1b0;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-align: center; text-align: center;
} }
.top2-content { .layout-top2 .top2-content {
position: absolute;
left: 16px;
top: 82px;
width: 1264px;
height: 594px;
}
.layout-top3 .top2-content {
flex: 1; flex: 1;
display: flex; display: flex;
gap: 16px; gap: 16px;
} }
.top2-left-col { .layout-top2 .top2-left-col {
position: absolute;
left: 0;
top: 26.055px;
width: 232.377px;
height: 541.889px;
}
.layout-top3 .top2-left-col {
width: 314.937px; width: 314.937px;
height: 734px; height: 734px;
display: flex; display: flex;
@@ -655,7 +755,15 @@ const addTop2Animation = () => {
gap: 16px; gap: 16px;
} }
.top2-center-col { .layout-top2 .top2-center-col {
position: absolute;
left: 248.377px;
top: 25.15px;
width: 744.126px;
height: 543.699px;
}
.layout-top3 .top2-center-col {
width: 744.126px; width: 744.126px;
height: 734px; height: 734px;
display: flex; display: flex;
@@ -663,7 +771,15 @@ const addTop2Animation = () => {
gap: 16px; gap: 16px;
} }
.top2-right-col { .layout-top2 .top2-right-col {
position: absolute;
left: 1008.503px;
top: 25.907px;
width: 232.377px;
height: 542.186px;
}
.layout-top3 .top2-right-col {
width: 314.937px; width: 314.937px;
height: 734px; height: 734px;
display: flex; display: flex;
@@ -672,55 +788,120 @@ const addTop2Animation = () => {
} }
.panel-outline { .panel-outline {
position: relative;
border: 0.297px solid #f0e2e2; border: 0.297px solid #f0e2e2;
border-radius: 10.684px; border-radius: 10.684px;
background: rgba(217, 217, 217, 0); background: rgba(217, 217, 217, 0);
box-sizing: border-box; box-sizing: border-box;
} }
.panel-left-top { .layout-top2 .panel-outline {
position: absolute;
}
.layout-top3 .panel-outline {
position: relative;
}
.layout-top2 .panel-left-top {
left: 0;
top: 0;
width: 232.377px;
height: 259.977px;
}
.layout-top3 .panel-left-top {
width: 314.937px; width: 314.937px;
height: 234px; height: 234px;
} }
.panel-left-middle { .layout-top3 .panel-left-middle {
width: 314.937px; width: 314.937px;
height: 234px; height: 234px;
} }
.panel-left-bottom { .layout-top2 .panel-left-bottom {
left: 0;
top: 275.977px;
width: 232.377px;
height: 265.912px;
}
.layout-top3 .panel-left-bottom {
width: 314.937px; width: 314.937px;
height: 234px; height: 234px;
} }
.panel-right-top { .layout-top2 .panel-right-top {
left: 0;
top: 0;
width: 232.377px;
height: 259.977px;
}
.layout-top3 .panel-right-top {
width: 314.937px; width: 314.937px;
height: 359px; height: 359px;
} }
.panel-right-bottom { .layout-top2 .panel-right-bottom {
left: 0;
top: 275.977px;
width: 232.377px;
height: 266.209px;
}
.layout-top3 .panel-right-bottom {
width: 314.937px; width: 314.937px;
height: 359px; height: 359px;
} }
.panel-center-bottom-left { .layout-top2 .panel-center-bottom-left {
left: 0;
top: 0;
width: 360.668px;
height: 175.692px;
}
.layout-top2 .panel-center-bottom-right {
left: 386.668px;
top: 0;
width: 357.216px;
height: 175.692px;
}
.layout-top3 .panel-center-bottom-left {
width: 364.063px; width: 364.063px;
height: 187.992px; height: 187.992px;
} }
.panel-center-bottom-right { .layout-top3 .panel-center-bottom-right {
width: 364.063px; width: 364.063px;
height: 187.992px; height: 187.992px;
} }
.top2-center { .layout-top2 .top2-center {
position: absolute;
left: 0;
top: 0;
width: 743.928px;
height: 352.007px;
}
.layout-top3 .top2-center {
width: 743.928px; width: 743.928px;
height: 333.004px; height: 333.004px;
position: relative; position: relative;
} }
.top2-bottom-row { .layout-top2 .top2-bottom-row {
position: absolute;
left: 0;
top: 368.007px;
width: 744.126px;
height: 175.692px;
}
.layout-top3 .top2-bottom-row {
width: 744.126px; width: 744.126px;
height: 187.992px; height: 187.992px;
display: flex; display: flex;
@@ -791,6 +972,11 @@ const addTop2Animation = () => {
color: rgba(191, 191, 191, 0.61); color: rgba(191, 191, 191, 0.61);
} }
.layout-top2 .top2-cards,
.layout-top2 .top2-subheader {
display: none;
}
.top2-subheader { .top2-subheader {
height: 51px; height: 51px;
display: flex; display: flex;
@@ -802,7 +988,8 @@ const addTop2Animation = () => {
color: #ffffff; color: #ffffff;
} }
.svg-wrapper.is-top2 { .svg-wrapper.is-top2,
.svg-wrapper.is-top3 {
flex: none; flex: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -814,7 +1001,16 @@ const addTop2Animation = () => {
overflow: hidden; overflow: hidden;
} }
.panel-label { .layout-top2 .panel-label {
position: absolute;
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 18.994px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.2px;
}
.layout-top3 .panel-label {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 20px; top: 20px;
@@ -828,7 +1024,39 @@ const addTop2Animation = () => {
width: 220px; width: 220px;
} }
.label-alarm { .layout-top2 .label-metric-11 {
left: 61.73px;
top: 91.7px;
}
.layout-top2 .label-metric-21 {
left: 61.73px;
top: 121.68px;
}
.layout-top2 .label-metric-22 {
left: 132.11px;
top: 76.27px;
}
.layout-top2 .label-metric-23 {
left: 126.11px;
top: 76.27px;
}
.layout-top2 .label-alarm {
left: 78.35px;
top: 18.7px;
color: #f02525;
}
.layout-top2 .label-fault {
left: 78.35px;
top: 22.85px;
color: #ffffff;
}
.layout-top3 .label-alarm {
color: #f02525; color: #f02525;
} }
@@ -840,13 +1068,15 @@ const addTop2Animation = () => {
touch-action: pan-x pan-y; touch-action: pan-x pan-y;
} }
.svg-wrapper.is-top2 :deep(svg) { .svg-wrapper.is-top2 :deep(svg),
.svg-wrapper.is-top3 :deep(svg) {
height: 100%; height: 100%;
max-height: none; max-height: none;
filter: none; filter: none;
} }
.svg-wrapper.is-top2 :deep(#shape1) { .svg-wrapper.is-top2 :deep(#shape1),
.svg-wrapper.is-top3 :deep(#shape1) {
fill: transparent; fill: transparent;
stroke: none; stroke: none;
} }
@@ -868,14 +1098,14 @@ const addTop2Animation = () => {
letter-spacing: 1px; letter-spacing: 1px;
} }
.monitor-container:not(.is-top2) .svg-wrapper { .monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
padding: 20px; padding: 20px;
} }
} }
/* 手机适配 */ /* 手机适配 */
@media (max-width: 768px) { @media (max-width: 768px) {
.monitor-container:not(.is-top2) { .monitor-container:not(.is-top2):not(.is-top3) {
gap: 15px; gap: 15px;
padding: 10px; padding: 10px;
} }
@@ -887,7 +1117,7 @@ const addTop2Animation = () => {
border-radius: 15px; border-radius: 15px;
} }
.monitor-container:not(.is-top2) .svg-wrapper { .monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
padding: 15px; padding: 15px;
border-radius: 15px; border-radius: 15px;
} }
@@ -895,7 +1125,7 @@ const addTop2Animation = () => {
/* 小屏手机适配 */ /* 小屏手机适配 */
@media (max-width: 480px) { @media (max-width: 480px) {
.monitor-container:not(.is-top2) { .monitor-container:not(.is-top2):not(.is-top3) {
gap: 10px; gap: 10px;
padding: 8px; padding: 8px;
} }
@@ -907,7 +1137,7 @@ const addTop2Animation = () => {
border-radius: 12px; border-radius: 12px;
} }
.monitor-container:not(.is-top2) .svg-wrapper { .monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
padding: 10px; padding: 10px;
border-radius: 12px; border-radius: 12px;
} }