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

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

Browse Source
This commit is contained in:
douboer@gmail.com
2026-01-14 18:28:05 +08:00
parent b72ea95dce
commit 25f2d74c01
3 changed files with 115 additions and 29 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-D4_xJwA9.js"></script> <script type="module" crossorigin src="/assets/index-BxgaTP91.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Cu9QlGHE.css"> <link rel="stylesheet" crossorigin href="/assets/index-DSvn6aKJ.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

135
src/App.vue
View File

@@ -61,7 +61,7 @@
</div> </div>
<div class="top2-center-col"> <div class="top2-center-col">
<div class="top2-cards" data-node-id="270:19"> <div v-if="currentStyle === 'top3'" class="top2-cards" data-node-id="270:19">
<div class="top2-card" data-node-id="277:79"> <div class="top2-card" data-node-id="277:79">
<div class="top2-card-icon"> <div class="top2-card-icon">
<img :src="top2CardIcons.device" alt="" /> <img :src="top2CardIcons.device" alt="" />
@@ -103,13 +103,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="top2-subheader" data-node-id="271:25">业务系统分层整体架构展示</div> <div v-if="currentStyle === 'top3'" class="top3-center-block" data-node-id="303:722">
<div class="top2-center" data-node-id="162:5"> <div class="top3-subheader" data-node-id="303:1411">
<div <span class="top3-subheader-line is-left"></span>
:class="['svg-wrapper', currentStyle === 'top3' ? 'is-top3' : 'is-top2']" <span class="top3-subheader-text">业务系统分层整体架构展示</span>
ref="svgWrapper" <span class="top3-subheader-line is-right"></span>
v-html="svgContent" </div>
></div> <div class="top2-center" data-node-id="303:723">
<div class="svg-wrapper is-top3" ref="svgWrapper" v-html="svgContent"></div>
</div>
</div>
<div v-else class="top2-center" data-node-id="162:5">
<div class="svg-wrapper 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">
@@ -145,6 +150,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue' import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'
import videoIcon from './assets/video.svg'
import playIcon from './assets/play.svg'
import aiIcon from './assets/ai.svg'
import picIcon from './assets/pic.svg'
type StyleType = 'circle' | 'top2' | 'top3' type StyleType = 'circle' | 'top2' | 'top3'
@@ -161,10 +170,10 @@ const TOP_LAYOUTS = {
let top2ResizeObserver: ResizeObserver | null = null let top2ResizeObserver: ResizeObserver | null = null
const top2CardIcons = { const top2CardIcons = {
device: 'https://www.figma.com/api/mcp/asset/d0315e83-c91a-4df2-aa1c-c68bc334548a', device: videoIcon,
stream: 'https://www.figma.com/api/mcp/asset/05d50c71-8671-4e90-beb7-46c7186a2c1f', stream: playIcon,
ai: 'https://www.figma.com/api/mcp/asset/8e943e5a-ebbb-44d4-9caa-9d32a8329ab7', ai: aiIcon,
cut: 'https://www.figma.com/api/mcp/asset/c1ba83a9-ec62-49b0-9b07-925faae32277', cut: picIcon,
} }
const updateTop2Scale = () => { const updateTop2Scale = () => {
@@ -748,7 +757,7 @@ const addTop2Animation = () => {
} }
.layout-top3 .top2-left-col { .layout-top3 .top2-left-col {
width: 314.937px; width: 315px;
height: 734px; height: 734px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -764,7 +773,7 @@ const addTop2Animation = () => {
} }
.layout-top3 .top2-center-col { .layout-top3 .top2-center-col {
width: 744.126px; width: 744px;
height: 734px; height: 734px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -780,7 +789,7 @@ const addTop2Animation = () => {
} }
.layout-top3 .top2-right-col { .layout-top3 .top2-right-col {
width: 314.937px; width: 315px;
height: 734px; height: 734px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -810,12 +819,12 @@ const addTop2Animation = () => {
} }
.layout-top3 .panel-left-top { .layout-top3 .panel-left-top {
width: 314.937px; width: 315px;
height: 234px; height: 234px;
} }
.layout-top3 .panel-left-middle { .layout-top3 .panel-left-middle {
width: 314.937px; width: 315px;
height: 234px; height: 234px;
} }
@@ -827,7 +836,7 @@ const addTop2Animation = () => {
} }
.layout-top3 .panel-left-bottom { .layout-top3 .panel-left-bottom {
width: 314.937px; width: 315px;
height: 234px; height: 234px;
} }
@@ -839,7 +848,7 @@ const addTop2Animation = () => {
} }
.layout-top3 .panel-right-top { .layout-top3 .panel-right-top {
width: 314.937px; width: 315px;
height: 359px; height: 359px;
} }
@@ -851,7 +860,7 @@ const addTop2Animation = () => {
} }
.layout-top3 .panel-right-bottom { .layout-top3 .panel-right-bottom {
width: 314.937px; width: 315px;
height: 359px; height: 359px;
} }
@@ -870,13 +879,13 @@ const addTop2Animation = () => {
} }
.layout-top3 .panel-center-bottom-left { .layout-top3 .panel-center-bottom-left {
width: 364.063px; width: 364px;
height: 187.992px; height: 151.814px;
} }
.layout-top3 .panel-center-bottom-right { .layout-top3 .panel-center-bottom-right {
width: 364.063px; width: 364px;
height: 187.992px; height: 151.814px;
} }
.layout-top2 .top2-center { .layout-top2 .top2-center {
@@ -888,9 +897,10 @@ const addTop2Animation = () => {
} }
.layout-top3 .top2-center { .layout-top3 .top2-center {
width: 743.928px; width: 696.481px;
height: 333.004px; height: 333.004px;
position: relative; position: relative;
align-self: center;
} }
.layout-top2 .top2-bottom-row { .layout-top2 .top2-bottom-row {
@@ -902,8 +912,8 @@ const addTop2Animation = () => {
} }
.layout-top3 .top2-bottom-row { .layout-top3 .top2-bottom-row {
width: 744.126px; width: 744px;
height: 187.992px; height: 151.818px;
display: flex; display: flex;
gap: 16px; gap: 16px;
} }
@@ -977,6 +987,10 @@ const addTop2Animation = () => {
display: none; display: none;
} }
.layout-top3 .top2-cards {
width: 744px;
}
.top2-subheader { .top2-subheader {
height: 51px; height: 51px;
display: flex; display: flex;
@@ -988,6 +1002,73 @@ const addTop2Animation = () => {
color: #ffffff; color: #ffffff;
} }
.layout-top3 .top2-subheader {
display: none;
}
.top3-center-block {
width: 744px;
height: 436.182px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.top3-subheader {
width: 100%;
height: 87.178px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.top3-subheader-text {
font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 60px;
color: #ffffff;
letter-spacing: 0.2px;
text-align: center;
}
.top3-subheader-line {
position: absolute;
top: 50%;
width: 214.131px;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 55%, rgba(255, 255, 255, 0));
transform: translateY(-50%);
}
.top3-subheader-line::before {
content: '';
position: absolute;
top: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: #ffffff;
}
.top3-subheader-line.is-left {
left: 0;
}
.top3-subheader-line.is-left::before {
left: 0;
}
.top3-subheader-line.is-right {
right: 0;
}
.top3-subheader-line.is-right::before {
right: 0;
}
.svg-wrapper.is-top2, .svg-wrapper.is-top2,
.svg-wrapper.is-top3 { .svg-wrapper.is-top3 {
flex: none; flex: none;

5
src/vite-env.d.ts vendored
View File

@@ -4,3 +4,8 @@ declare module '*.vue' {
const component: DefineComponent<{}, {}, any> const component: DefineComponent<{}, {}, any>
export default component export default component
} }
declare module '*.svg' {
const src: string
export default src
}