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

322
src/App.vue
View File

@@ -1,7 +1,13 @@
<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
:class="['style-btn', { active: currentStyle === 'circle' }]"
@click="switchStyle('circle')"
@@ -14,10 +20,21 @@
>
原型-2
</button>
<button
:class="['style-btn', { active: currentStyle === 'top3' }]"
@click="switchStyle('top3')"
>
原型-3
</button>
</div>
<template v-if="currentStyle === 'top2'">
<div class="top2-stage" ref="top2Stage" :style="{ '--top2-scale': top2Scale }">
<template v-if="currentStyle === 'top2' || currentStyle === 'top3'">
<div
class="top2-stage"
:class="topLayoutClass"
ref="top2Stage"
:style="{ '--top2-scale': top2Scale }"
>
<div class="top2-scale">
<div class="top2-layout">
<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-label label-metric-11" data-node-id="153:2098">视联拉流质量统计</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>
<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>
@@ -82,7 +105,11 @@
</div>
<div class="top2-subheader" data-node-id="271:25">业务系统分层整体架构展示</div>
<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 class="top2-bottom-row">
<div class="panel-outline panel-center-bottom-left" data-node-id="153:2091">
@@ -117,9 +144,9 @@
</template>
<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 svgContent = ref('')
@@ -127,8 +154,10 @@ const currentStyle = ref<StyleType>('circle')
const top2Stage = ref<HTMLElement | null>(null)
const top2Scale = ref(1)
const TOP2_WIDTH = 1438
const TOP2_HEIGHT = 832
const TOP_LAYOUTS = {
top2: { width: 1296, height: 692 },
top3: { width: 1438, height: 832 },
}
let top2ResizeObserver: ResizeObserver | null = null
const top2CardIcons = {
@@ -141,10 +170,13 @@ const top2CardIcons = {
const updateTop2Scale = () => {
const stage = top2Stage.value
if (!stage) return
if (currentStyle.value === 'circle') return
const layout = TOP_LAYOUTS[currentStyle.value]
if (!layout) return
const { width, height } = stage.getBoundingClientRect()
if (!width || !height) return
const scaleX = width / TOP2_WIDTH
const scaleY = height / TOP2_HEIGHT
const scaleX = width / layout.width
const scaleY = height / layout.height
top2Scale.value = Math.min(scaleX, scaleY)
}
@@ -201,7 +233,7 @@ onBeforeUnmount(() => {
})
watch(currentStyle, async (style) => {
if (style === 'top2') {
if (style === 'top2' || style === 'top3') {
await nextTick()
attachTop2Observer()
updateTop2Scale()
@@ -210,6 +242,10 @@ watch(currentStyle, async (style) => {
}
})
const topLayoutClass = computed(() => (
currentStyle.value === 'top3' ? 'layout-top3' : 'layout-top2'
))
const addFlowingAnimation = () => {
if (!svgWrapper.value) return
@@ -218,6 +254,8 @@ const addFlowingAnimation = () => {
console.log('SVG not found')
return
}
svg.querySelectorAll('.flowing-line').forEach((node) => node.remove())
// 查找所有可能的连线元素
const allPaths = svg.querySelectorAll('path, line, polyline')
@@ -332,6 +370,8 @@ const addTop2Animation = () => {
console.log('SVG not found')
return
}
svg.querySelectorAll('.flowing-line-top2').forEach((node) => node.remove())
// 查找所有可能的连线元素
const allPaths = svg.querySelectorAll('path, line, polyline')
@@ -490,7 +530,8 @@ const addTop2Animation = () => {
margin-top: 10px;
}
.style-switcher.is-top2 {
.style-switcher.is-top2,
.style-switcher.is-top3 {
margin-top: 0;
position: absolute;
top: 24px;
@@ -579,7 +620,8 @@ const addTop2Animation = () => {
-webkit-overflow-scrolling: touch;
}
.monitor-container.is-top2 {
.monitor-container.is-top2,
.monitor-container.is-top3 {
padding: 0;
gap: 0;
align-items: stretch;
@@ -599,8 +641,6 @@ const addTop2Animation = () => {
.top2-scale {
position: relative;
width: calc(1438px * var(--top2-scale));
height: calc(832px * var(--top2-scale));
flex-shrink: 0;
}
@@ -608,13 +648,31 @@ const addTop2Animation = () => {
position: absolute;
left: 0;
top: 0;
width: 1438px;
height: 832px;
background: #2543a5;
border-radius: 0;
overflow: hidden;
transform: scale(var(--top2-scale));
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;
flex-direction: column;
gap: 16px;
@@ -623,10 +681,24 @@ const addTop2Animation = () => {
}
.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;
border-radius: 16px;
background: rgba(229, 229, 229, 0);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
@@ -634,20 +706,48 @@ const addTop2Animation = () => {
.top2-title {
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 32px;
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;
letter-spacing: 0.5px;
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;
display: flex;
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;
height: 734px;
display: flex;
@@ -655,7 +755,15 @@ const addTop2Animation = () => {
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;
height: 734px;
display: flex;
@@ -663,7 +771,15 @@ const addTop2Animation = () => {
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;
height: 734px;
display: flex;
@@ -672,55 +788,120 @@ const addTop2Animation = () => {
}
.panel-outline {
position: relative;
border: 0.297px solid #f0e2e2;
border-radius: 10.684px;
background: rgba(217, 217, 217, 0);
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;
height: 234px;
}
.panel-left-middle {
.layout-top3 .panel-left-middle {
width: 314.937px;
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;
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;
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;
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;
height: 187.992px;
}
.panel-center-bottom-right {
.layout-top3 .panel-center-bottom-right {
width: 364.063px;
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;
height: 333.004px;
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;
height: 187.992px;
display: flex;
@@ -791,6 +972,11 @@ const addTop2Animation = () => {
color: rgba(191, 191, 191, 0.61);
}
.layout-top2 .top2-cards,
.layout-top2 .top2-subheader {
display: none;
}
.top2-subheader {
height: 51px;
display: flex;
@@ -802,7 +988,8 @@ const addTop2Animation = () => {
color: #ffffff;
}
.svg-wrapper.is-top2 {
.svg-wrapper.is-top2,
.svg-wrapper.is-top3 {
flex: none;
width: 100%;
height: 100%;
@@ -814,7 +1001,16 @@ const addTop2Animation = () => {
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;
left: 50%;
top: 20px;
@@ -828,7 +1024,39 @@ const addTop2Animation = () => {
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;
}
@@ -840,13 +1068,15 @@ const addTop2Animation = () => {
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%;
max-height: none;
filter: none;
}
.svg-wrapper.is-top2 :deep(#shape1) {
.svg-wrapper.is-top2 :deep(#shape1),
.svg-wrapper.is-top3 :deep(#shape1) {
fill: transparent;
stroke: none;
}
@@ -868,14 +1098,14 @@ const addTop2Animation = () => {
letter-spacing: 1px;
}
.monitor-container:not(.is-top2) .svg-wrapper {
.monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
padding: 20px;
}
}
/* 手机适配 */
@media (max-width: 768px) {
.monitor-container:not(.is-top2) {
.monitor-container:not(.is-top2):not(.is-top3) {
gap: 15px;
padding: 10px;
}
@@ -887,7 +1117,7 @@ const addTop2Animation = () => {
border-radius: 15px;
}
.monitor-container:not(.is-top2) .svg-wrapper {
.monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
padding: 15px;
border-radius: 15px;
}
@@ -895,7 +1125,7 @@ const addTop2Animation = () => {
/* 小屏手机适配 */
@media (max-width: 480px) {
.monitor-container:not(.is-top2) {
.monitor-container:not(.is-top2):not(.is-top3) {
gap: 10px;
padding: 8px;
}
@@ -907,7 +1137,7 @@ const addTop2Animation = () => {
border-radius: 12px;
}
.monitor-container:not(.is-top2) .svg-wrapper {
.monitor-container:not(.is-top2):not(.is-top3) .svg-wrapper {
padding: 10px;
border-radius: 12px;
}