|
|
@@ -1,10 +1,12 @@
|
|
|
-<!-- 工程安全运维页面：温度应力卡片 + 设备监控面板 -->
|
|
|
+<!-- 工程安全运维页面：报警数据 + 设备监控面板（右侧整合） -->
|
|
|
<template>
|
|
|
<div class="safety-container">
|
|
|
<div class="safety-scroll-area">
|
|
|
<div class="tab-content">
|
|
|
+ <!-- ========== 左侧面板 ========== -->
|
|
|
<div class="left-sidebar">
|
|
|
- <div class="data-card tall-card">
|
|
|
+ <!-- 安全状态评估 -->
|
|
|
+ <div class="data-card">
|
|
|
<div class="card-header">
|
|
|
<h3 class="card-title">安全状态评估</h3>
|
|
|
</div>
|
|
|
@@ -55,6 +57,147 @@
|
|
|
<span class="safety-eval-time">最近巡检 2026-05-28</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ===== 数据框2：坝体整体变形安全 ===== -->
|
|
|
+ <div class="data-card mt-10">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">坝体整体变形安全</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body chart-body">
|
|
|
+ <div class="deform-section">
|
|
|
+ <div class="conclusion-row">
|
|
|
+ <span class="conclusion-row-label">整体变形状态判定</span>
|
|
|
+ <span class="conclusion-row-value text-green">稳定</span>
|
|
|
+ </div>
|
|
|
+ <div class="deform-metrics">
|
|
|
+ <div class="metric-item">
|
|
|
+ <span class="metric-item-label">坝顶最大水平位移</span>
|
|
|
+ <span class="metric-item-value">12.6<span class="metric-item-unit">mm</span></span>
|
|
|
+ <span class="metric-item-tag tag-ok">正常</span>
|
|
|
+ </div>
|
|
|
+ <div class="metric-item">
|
|
|
+ <span class="metric-item-label">坝体累计垂直沉降</span>
|
|
|
+ <span class="metric-item-value">8.3<span class="metric-item-unit">mm</span></span>
|
|
|
+ <span class="metric-item-tag tag-ok">正常</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="deform-rate">
|
|
|
+ <span class="rate-label">形变速率判定</span>
|
|
|
+ <span class="rate-tag tag-ok">匀速稳定</span>
|
|
|
+ <span class="rate-hint">速率 0.02mm/d</span>
|
|
|
+ </div>
|
|
|
+ <div class="deform-trend">
|
|
|
+ <span class="trend-label">24h整体形变趋势</span>
|
|
|
+ <div class="trend-chart-box">
|
|
|
+ <canvas id="deformTrendChart" width="290" height="42"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ===== 数据框3：坝体渗流防渗安全 ===== -->
|
|
|
+ <div class="data-card mt-10">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">坝体渗流防渗安全</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body chart-body">
|
|
|
+ <div class="seepage-section">
|
|
|
+ <div class="conclusion-row">
|
|
|
+ <span class="conclusion-row-label">渗流整体安全状态</span>
|
|
|
+ <span class="conclusion-row-value text-green">防渗正常</span>
|
|
|
+ </div>
|
|
|
+ <div class="deform-metrics">
|
|
|
+ <div class="metric-item">
|
|
|
+ <span class="metric-item-label">坝基典型扬压力均值</span>
|
|
|
+ <span class="metric-item-value">36.8<span class="metric-item-unit">kPa</span></span>
|
|
|
+ <span class="metric-item-tag tag-ok">正常</span>
|
|
|
+ </div>
|
|
|
+ <div class="metric-item">
|
|
|
+ <span class="metric-item-label">坝基平均渗流量</span>
|
|
|
+ <span class="metric-item-value">2.4<span class="metric-item-unit">L/s</span></span>
|
|
|
+ <span class="metric-item-tag tag-ok">正常</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="deform-rate">
|
|
|
+ <span class="rate-label">渗流稳定性判定</span>
|
|
|
+ <span class="rate-tag tag-ok">平稳无波动</span>
|
|
|
+ </div>
|
|
|
+ <div class="balance-row">
|
|
|
+ <span class="balance-row-label">绕坝渗流左右岸平衡</span>
|
|
|
+ <div class="balance-bars">
|
|
|
+ <div class="balance-bar-line">
|
|
|
+ <span class="balance-bar-side">左岸</span>
|
|
|
+ <div class="balance-track"><div class="balance-fill" style="width:48%"></div></div>
|
|
|
+ <span class="balance-bar-val">48%</span>
|
|
|
+ </div>
|
|
|
+ <div class="balance-bar-line">
|
|
|
+ <span class="balance-bar-side">右岸</span>
|
|
|
+ <div class="balance-track"><div class="balance-fill fill-right" style="width:52%"></div></div>
|
|
|
+ <span class="balance-bar-val">52%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span class="balance-result tag-ok">均衡</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 巡检记录 -->
|
|
|
+ <div class="data-card mt-10">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">巡检记录</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body card-body-tight">
|
|
|
+ <!-- 今日巡检统计 -->
|
|
|
+ <div class="patrol-stats-row">
|
|
|
+ <div class="patrol-stat-item">
|
|
|
+ <span class="patrol-stat-num">24</span>
|
|
|
+ <span class="patrol-stat-label">今日应巡检</span>
|
|
|
+ </div>
|
|
|
+ <div class="patrol-stat-item">
|
|
|
+ <span class="patrol-stat-num" style="color:#22c55e">18</span>
|
|
|
+ <span class="patrol-stat-label">已完成</span>
|
|
|
+ </div>
|
|
|
+ <div class="patrol-stat-item">
|
|
|
+ <span class="patrol-stat-num" style="color:#f59e0b">6</span>
|
|
|
+ <span class="patrol-stat-label">未完成</span>
|
|
|
+ </div>
|
|
|
+ <div class="patrol-stat-item">
|
|
|
+ <span class="patrol-stat-num" style="color:#ef4444">2</span>
|
|
|
+ <span class="patrol-stat-label">异常发现</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 最近巡检列表 -->
|
|
|
+ <div class="monitor-subtitle" style="margin:4px 0;">最近巡检</div>
|
|
|
+ <div class="patrol-list">
|
|
|
+ <div v-for="item in patrolRecords" :key="item.id" class="patrol-row">
|
|
|
+ <div class="patrol-row-left">
|
|
|
+ <span class="patrol-row-time">{{ item.time }}</span>
|
|
|
+ <span class="patrol-row-point">{{ item.point }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="patrol-row-right">
|
|
|
+ <span class="patrol-row-person">{{ item.person }}</span>
|
|
|
+ <span :class="['patrol-row-status', item.status === '正常' ? 'status-normal' : 'status-abnormal']">{{ item.status }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ========== 右侧面板 ========== -->
|
|
|
+ <div class="right-sidebar">
|
|
|
+ <!-- 设备安全（顶部整合监控摘要 + 仪表盘 + 阈值报警 + 设备清单） -->
|
|
|
+ <div class="data-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">设备安全</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body card-body-tight">
|
|
|
+ <!-- 设备完好率 + 仪表盘 -->
|
|
|
<div class="device-stats-row">
|
|
|
<div class="device-stat-card">
|
|
|
<div class="device-stat-percent">89.55%</div>
|
|
|
@@ -70,9 +213,8 @@
|
|
|
<div class="device-stat-label">运行期 完好率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="monitor-divider"></div>
|
|
|
- <div class="card-body card-body-tight">
|
|
|
+
|
|
|
+ <!-- 监控摘要卡片 -->
|
|
|
<div class="monitor-summary-row">
|
|
|
<div class="monitor-summary-card" :class="{ active: activeSummaryCard === item.name }" v-for="item in monitorSummaryList" :key="item.name" @click="toggleSummaryCard(item.name)">
|
|
|
<svg class="progress-ring" width="48" height="48" viewBox="0 0 48 48">
|
|
|
@@ -89,9 +231,53 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="summary-pie-area" v-if="activeSummaryCard">
|
|
|
- <canvas :id="'summaryPieChart'" width="290" height="200"></canvas>
|
|
|
+ <canvas id="summaryPieChart" width="290" height="160"></canvas>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 阈值报警信息 -->
|
|
|
+ <div class="monitor-divider"></div>
|
|
|
+ <div class="threshold-summary">
|
|
|
+ <div class="threshold-stat">
|
|
|
+ <span class="threshold-stat-value">6</span>
|
|
|
+ <span class="threshold-stat-label">超阈值设备</span>
|
|
|
+ </div>
|
|
|
+ <div class="threshold-stat">
|
|
|
+ <span class="threshold-stat-value" style="color:#fbbf24;">3</span>
|
|
|
+ <span class="threshold-stat-label">临界设备</span>
|
|
|
+ </div>
|
|
|
+ <div class="threshold-stat">
|
|
|
+ <span class="threshold-stat-value" style="color:#22c55e;">128</span>
|
|
|
+ <span class="threshold-stat-label">正常设备</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="monitor-subtitle" style="margin:4px 0;">实时超阈值列表</div>
|
|
|
+ <div class="alarm-scroll-list">
|
|
|
+ <div v-for="item in thresholdAlarms" :key="item.id" class="threshold-item" :class="`threshold-${item.level}`">
|
|
|
+ <div class="threshold-item-header">
|
|
|
+ <span class="threshold-device">{{ item.device }}</span>
|
|
|
+ <span :class="['threshold-tag', item.level === 'critical' ? 'tag-critical' : 'tag-warning']">{{ item.level === 'critical' ? '紧急' : '警告' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="threshold-item-body">
|
|
|
+ <div class="threshold-metric">
|
|
|
+ <span class="tm-label">阈值</span>
|
|
|
+ <span class="tm-value">{{ item.threshold }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="threshold-metric">
|
|
|
+ <span class="tm-label">当前值</span>
|
|
|
+ <span class="tm-value" :style="{ color: item.level === 'critical' ? '#ef4444' : '#fbbf24' }">{{ item.current }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="threshold-metric">
|
|
|
+ <span class="tm-label">超限</span>
|
|
|
+ <span class="tm-value" :style="{ color: item.level === 'critical' ? '#ef4444' : '#fbbf24' }">{{ item.over }}%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="threshold-item-time">{{ item.time }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="monitor-subtitle">设备清单</div>
|
|
|
+
|
|
|
+ <!-- 设备清单树 -->
|
|
|
+ <div class="monitor-divider"></div>
|
|
|
+ <div class="monitor-subtitle" style="margin:4px 0;">设备清单</div>
|
|
|
<div class="tree-search-bar">
|
|
|
<svg class="tree-search-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#7bbef6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="7.5"/><line x1="16" y1="16" x2="22" y2="22"/></svg>
|
|
|
<input class="tree-search-input" v-model="searchKey" placeholder="请输入关键词" />
|
|
|
@@ -165,7 +351,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tree-devices" v-if="pt.children && pt.expanded" v-for="dev in pt.children" :key="dev.name">
|
|
|
- <div class="tree-node-row tree-leaf" @click.stop="openDevicePanel(dev, grand, loc, pt, child)">
|
|
|
+ <div class="tree-node-row tree-leaf">
|
|
|
<span class="tree-dot"></span>
|
|
|
<span class="tree-node-label tree-node-bold" style="color:#62f6fb;">{{ dev.name }}</span>
|
|
|
<div class="tree-node-actions">
|
|
|
@@ -183,20 +369,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="middle-area">
|
|
|
- <TempStressCard
|
|
|
- :device="selectedDevice"
|
|
|
- :breadcrumb="deviceBreadcrumb"
|
|
|
- :visible="!!selectedDevice"
|
|
|
- @close="closeTempCard"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="right-sidebar">
|
|
|
- <DeviceRightPanel
|
|
|
- :device="selectedDevice"
|
|
|
- :breadcrumb="deviceBreadcrumb"
|
|
|
- />
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -204,13 +376,40 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import * as echarts from "echarts";
|
|
|
-import TempStressCard from "../../components/TempStressCard.vue";
|
|
|
-import DeviceRightPanel from "../../components/DeviceRightPanel.vue";
|
|
|
export default {
|
|
|
name: "EngineeringSafetyView",
|
|
|
- components: { TempStressCard, DeviceRightPanel },
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 监控摘要
|
|
|
+ activeSummaryCard: "变形检测",
|
|
|
+ summaryPieChart: null,
|
|
|
+ deviceGaugeChart: null,
|
|
|
+ monitorSummaryList: [
|
|
|
+ { name: "变形检测", count: 42, progress: 82, color: "#62f6fb" },
|
|
|
+ { name: "渗流渗压", count: 28, progress: 65, color: "#a78bfa" },
|
|
|
+ { name: "应力应变", count: 16, progress: 45, color: "#fbbf24" },
|
|
|
+ ],
|
|
|
+ summaryPieMap: {
|
|
|
+ "变形检测": [
|
|
|
+ { name: "精密水准", value: 12, color: "#62f6fb" },
|
|
|
+ { name: "基岩变形计", value: 10, color: "#34d399" },
|
|
|
+ { name: "电磁沉降环", value: 8, color: "#fbbf24" },
|
|
|
+ { name: "测缝计", value: 7, color: "#f97316" },
|
|
|
+ { name: "多点位移计", value: 5, color: "#ef4444" },
|
|
|
+ ],
|
|
|
+ "渗流渗压": [
|
|
|
+ { name: "渗压计", value: 10, color: "#a78bfa" },
|
|
|
+ { name: "量水堰", value: 7, color: "#818cf8" },
|
|
|
+ { name: "测压管", value: 6, color: "#c084fc" },
|
|
|
+ { name: "孔隙水压力计", value: 5, color: "#e879f9" },
|
|
|
+ ],
|
|
|
+ "应力应变": [
|
|
|
+ { name: "钢筋计", value: 6, color: "#fbbf24" },
|
|
|
+ { name: "应变计", value: 5, color: "#f59e0b" },
|
|
|
+ { name: "无应力计", value: 5, color: "#f97316" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 设备清单树
|
|
|
searchKey: "",
|
|
|
treeData: [
|
|
|
{
|
|
|
@@ -219,119 +418,31 @@ export default {
|
|
|
name: "主坝", expanded: true, children: [
|
|
|
{
|
|
|
name: "变形监测", expanded: true, children: [
|
|
|
- {
|
|
|
- name: "坝顶", children: [
|
|
|
- { name: "坝顶水平位移-01", children: [{ name: "R201YL1" }, { name: "R201YL2" }, { name: "R201YL3" }] },
|
|
|
- { name: "坝顶水平位移-02", children: [{ name: "R201YL4" }, { name: "R201YL5" }, { name: "R201YL6" }] },
|
|
|
- { name: "坝顶水平位移-03", children: [{ name: "R201YL7" }, { name: "R201YL8" }, { name: "R201YL9" }] },
|
|
|
- { name: "坝顶水平位移-04", children: [{ name: "R201YL10" }, { name: "R201YL11" }, { name: "R201YL12" }] },
|
|
|
- { name: "坝顶水平位移-05", children: [{ name: "R201YL13" }, { name: "R201YL14" }, { name: "R201YL15" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "坝基", children: [
|
|
|
- { name: "坝基垂直位移-01", children: [{ name: "B301YL1" }, { name: "B301YL2" }, { name: "B301YL3" }] },
|
|
|
- { name: "坝基垂直位移-02", children: [{ name: "B301YL4" }, { name: "B301YL5" }, { name: "B301YL6" }] },
|
|
|
- { name: "坝基垂直位移-03", children: [{ name: "B301YL7" }, { name: "B301YL8" }, { name: "B301YL9" }] },
|
|
|
- { name: "坝基垂直位移-04", children: [{ name: "B301YL10" }, { name: "B301YL11" }, { name: "B301YL12" }] },
|
|
|
- { name: "坝基垂直位移-05", children: [{ name: "B301YL13" }, { name: "B301YL14" }, { name: "B301YL15" }] },
|
|
|
- { name: "坝基垂直位移-06", children: [{ name: "B301YL16" }, { name: "B301YL17" }, { name: "B301YL18" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "左岸", children: [
|
|
|
- { name: "库岸变形-B01", children: [{ name: "K401YL1" }, { name: "K401YL2" }, { name: "K401YL3" }] },
|
|
|
- { name: "库岸变形-B02", children: [{ name: "K401YL4" }, { name: "K401YL5" }, { name: "K401YL6" }] },
|
|
|
- { name: "库岸变形-B03", children: [{ name: "K401YL7" }, { name: "K401YL8" }, { name: "K401YL9" }] },
|
|
|
- { name: "裂缝开合度-C01", children: [{ name: "F501YL1" }, { name: "F501YL2" }, { name: "F501YL3" }] },
|
|
|
- { name: "裂缝开合度-C02", children: [{ name: "F501YL4" }, { name: "F501YL5" }, { name: "F501YL6" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "右岸", children: [
|
|
|
- { name: "库岸变形-B04", children: [{ name: "K401YL10" }, { name: "K401YL11" }, { name: "K401YL12" }] },
|
|
|
- { name: "库岸变形-B05", children: [{ name: "K401YL13" }, { name: "K401YL14" }, { name: "K401YL15" }] },
|
|
|
- { name: "裂缝开合度-C03", children: [{ name: "F501YL7" }, { name: "F501YL8" }, { name: "F501YL9" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "坝肩", children: [
|
|
|
- { name: "坝肩位移-J01", children: [{ name: "J601YL1" }, { name: "J601YL2" }, { name: "J601YL3" }] },
|
|
|
- { name: "坝肩位移-J02", children: [{ name: "J601YL4" }, { name: "J601YL5" }, { name: "J601YL6" }] },
|
|
|
- { name: "精密水准-S01", children: [{ name: "S701YL1" }, { name: "S701YL2" }, { name: "S701YL3" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
+ { name: "坝顶", children: [{ name: "坝顶水平位移-01", children: [{ name: "R201YL1" }, { name: "R201YL2" }, { name: "R201YL3" }] }, { name: "坝顶水平位移-02", children: [{ name: "R201YL4" }, { name: "R201YL5" }, { name: "R201YL6" }] }, { name: "坝顶水平位移-03", children: [{ name: "R201YL7" }, { name: "R201YL8" }, { name: "R201YL9" }] }, { name: "坝顶水平位移-04", children: [{ name: "R201YL10" }, { name: "R201YL11" }, { name: "R201YL12" }] }, { name: "坝顶水平位移-05", children: [{ name: "R201YL13" }, { name: "R201YL14" }, { name: "R201YL15" }] }] },
|
|
|
+ { name: "坝基", children: [{ name: "坝基垂直位移-01", children: [{ name: "B301YL1" }, { name: "B301YL2" }, { name: "B301YL3" }] }, { name: "坝基垂直位移-02", children: [{ name: "B301YL4" }, { name: "B301YL5" }, { name: "B301YL6" }] }, { name: "坝基垂直位移-03", children: [{ name: "B301YL7" }, { name: "B301YL8" }, { name: "B301YL9" }] }, { name: "坝基垂直位移-04", children: [{ name: "B301YL10" }, { name: "B301YL11" }, { name: "B301YL12" }] }, { name: "坝基垂直位移-05", children: [{ name: "B301YL13" }, { name: "B301YL14" }, { name: "B301YL15" }] }, { name: "坝基垂直位移-06", children: [{ name: "B301YL16" }, { name: "B301YL17" }, { name: "B301YL18" }] }] },
|
|
|
+ { name: "左岸", children: [{ name: "库岸变形-B01", children: [{ name: "K401YL1" }, { name: "K401YL2" }, { name: "K401YL3" }] }, { name: "库岸变形-B02", children: [{ name: "K401YL4" }, { name: "K401YL5" }, { name: "K401YL6" }] }, { name: "库岸变形-B03", children: [{ name: "K401YL7" }, { name: "K401YL8" }, { name: "K401YL9" }] }, { name: "裂缝开合度-C01", children: [{ name: "F501YL1" }, { name: "F501YL2" }, { name: "F501YL3" }] }, { name: "裂缝开合度-C02", children: [{ name: "F501YL4" }, { name: "F501YL5" }, { name: "F501YL6" }] }] },
|
|
|
+ { name: "右岸", children: [{ name: "库岸变形-B04", children: [{ name: "K401YL10" }, { name: "K401YL11" }, { name: "K401YL12" }] }, { name: "库岸变形-B05", children: [{ name: "K401YL13" }, { name: "K401YL14" }, { name: "K401YL15" }] }, { name: "裂缝开合度-C03", children: [{ name: "F501YL7" }, { name: "F501YL8" }, { name: "F501YL9" }] }] },
|
|
|
+ { name: "坝肩", children: [{ name: "坝肩位移-J01", children: [{ name: "J601YL1" }, { name: "J601YL2" }, { name: "J601YL3" }] }, { name: "坝肩位移-J02", children: [{ name: "J601YL4" }, { name: "J601YL5" }, { name: "J601YL6" }] }, { name: "精密水准-S01", children: [{ name: "S701YL1" }, { name: "S701YL2" }, { name: "S701YL3" }] }] },
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
name: "渗流监测", expanded: true, children: [
|
|
|
- {
|
|
|
- name: "坝基", children: [
|
|
|
- { name: "渗流压力-P01", children: [{ name: "P801YL1" }, { name: "P801YL2" }, { name: "P801YL3" }] },
|
|
|
- { name: "渗流压力-P02", children: [{ name: "P801YL4" }, { name: "P801YL5" }, { name: "P801YL6" }] },
|
|
|
- { name: "渗流压力-P03", children: [{ name: "P801YL7" }, { name: "P801YL8" }, { name: "P801YL9" }] },
|
|
|
- { name: "渗流压力-P04", children: [{ name: "P801YL10" }, { name: "P801YL11" }, { name: "P801YL12" }] },
|
|
|
- { name: "绕坝渗流-S01", children: [{ name: "R901YL1" }, { name: "R901YL2" }, { name: "R901YL3" }] },
|
|
|
- { name: "绕坝渗流-S02", children: [{ name: "R901YL4" }, { name: "R901YL5" }, { name: "R901YL6" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "坝体", children: [
|
|
|
- { name: "渗流压力-P05", children: [{ name: "P801YL13" }, { name: "P801YL14" }, { name: "P801YL15" }] },
|
|
|
- { name: "渗流压力-P06", children: [{ name: "P801YL16" }, { name: "P801YL17" }, { name: "P801YL18" }] },
|
|
|
- { name: "渗流压力-P07", children: [{ name: "P801YL19" }, { name: "P801YL20" }, { name: "P801YL21" }] },
|
|
|
- { name: "渗流压力-P08", children: [{ name: "P801YL22" }, { name: "P801YL23" }, { name: "P801YL24" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "廊道", children: [
|
|
|
- { name: "廊道渗流-L01", children: [{ name: "L011YL1" }, { name: "L011YL2" }, { name: "L011YL3" }] },
|
|
|
- { name: "廊道渗流-L02", children: [{ name: "L011YL4" }, { name: "L011YL5" }, { name: "L011YL6" }] },
|
|
|
- { name: "廊道渗流-L03", children: [{ name: "L011YL7" }, { name: "L011YL8" }, { name: "L011YL9" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
+ { name: "坝基", children: [{ name: "渗流压力-P01", children: [{ name: "P801YL1" }, { name: "P801YL2" }, { name: "P801YL3" }] }, { name: "渗流压力-P02", children: [{ name: "P801YL4" }, { name: "P801YL5" }, { name: "P801YL6" }] }, { name: "渗流压力-P03", children: [{ name: "P801YL7" }, { name: "P801YL8" }, { name: "P801YL9" }] }, { name: "渗流压力-P04", children: [{ name: "P801YL10" }, { name: "P801YL11" }, { name: "P801YL12" }] }, { name: "绕坝渗流-S01", children: [{ name: "R901YL1" }, { name: "R901YL2" }, { name: "R901YL3" }] }, { name: "绕坝渗流-S02", children: [{ name: "R901YL4" }, { name: "R901YL5" }, { name: "R901YL6" }] }] },
|
|
|
+ { name: "坝体", children: [{ name: "渗流压力-P05", children: [{ name: "P801YL13" }, { name: "P801YL14" }, { name: "P801YL15" }] }, { name: "渗流压力-P06", children: [{ name: "P801YL16" }, { name: "P801YL17" }, { name: "P801YL18" }] }, { name: "渗流压力-P07", children: [{ name: "P801YL19" }, { name: "P801YL20" }, { name: "P801YL21" }] }, { name: "渗流压力-P08", children: [{ name: "P801YL22" }, { name: "P801YL23" }, { name: "P801YL24" }] }] },
|
|
|
+ { name: "廊道", children: [{ name: "廊道渗流-L01", children: [{ name: "L011YL1" }, { name: "L011YL2" }, { name: "L011YL3" }] }, { name: "廊道渗流-L02", children: [{ name: "L011YL4" }, { name: "L011YL5" }, { name: "L011YL6" }] }, { name: "廊道渗流-L03", children: [{ name: "L011YL7" }, { name: "L011YL8" }, { name: "L011YL9" }] }] },
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
name: "应力应变", expanded: true, children: [
|
|
|
- {
|
|
|
- name: "坝体", children: [
|
|
|
- { name: "钢筋应力-R01", children: [{ name: "G111YL1" }, { name: "G111YL2" }, { name: "G111YL3" }] },
|
|
|
- { name: "钢筋应力-R02", children: [{ name: "G111YL4" }, { name: "G111YL5" }, { name: "G111YL6" }] },
|
|
|
- { name: "钢筋应力-R03", children: [{ name: "G111YL7" }, { name: "G111YL8" }, { name: "G111YL9" }] },
|
|
|
- { name: "钢筋应力-R04", children: [{ name: "G111YL10" }, { name: "G111YL11" }, { name: "G111YL12" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "坝基", children: [
|
|
|
- { name: "基岩应力-Y01", children: [{ name: "J121YL1" }, { name: "J121YL2" }, { name: "J121YL3" }] },
|
|
|
- { name: "基岩应力-Y02", children: [{ name: "J121YL4" }, { name: "J121YL5" }, { name: "J121YL6" }] },
|
|
|
- { name: "基岩应力-Y03", children: [{ name: "J121YL7" }, { name: "J121YL8" }, { name: "J121YL9" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
+ { name: "坝体", children: [{ name: "钢筋应力-R01", children: [{ name: "G111YL1" }, { name: "G111YL2" }, { name: "G111YL3" }] }, { name: "钢筋应力-R02", children: [{ name: "G111YL4" }, { name: "G111YL5" }, { name: "G111YL6" }] }, { name: "钢筋应力-R03", children: [{ name: "G111YL7" }, { name: "G111YL8" }, { name: "G111YL9" }] }, { name: "钢筋应力-R04", children: [{ name: "G111YL10" }, { name: "G111YL11" }, { name: "G111YL12" }] }] },
|
|
|
+ { name: "坝基", children: [{ name: "基岩应力-Y01", children: [{ name: "J121YL1" }, { name: "J121YL2" }, { name: "J121YL3" }] }, { name: "基岩应力-Y02", children: [{ name: "J121YL4" }, { name: "J121YL5" }, { name: "J121YL6" }] }, { name: "基岩应力-Y03", children: [{ name: "J121YL7" }, { name: "J121YL8" }, { name: "J121YL9" }] }] },
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
name: "环境量监测", expanded: true, children: [
|
|
|
- {
|
|
|
- name: "库水位", children: [
|
|
|
- { name: "库水位-W01", children: [{ name: "W131YL1" }, { name: "W131YL2" }, { name: "W131YL3" }] },
|
|
|
- { name: "库水位-W02", children: [{ name: "W131YL4" }, { name: "W131YL5" }, { name: "W131YL6" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "降雨量", children: [
|
|
|
- { name: "雨量计-R01", children: [{ name: "Y141YL1" }, { name: "Y141YL2" }, { name: "Y141YL3" }] },
|
|
|
- { name: "雨量计-R02", children: [{ name: "Y141YL4" }, { name: "Y141YL5" }, { name: "Y141YL6" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- name: "温度", children: [
|
|
|
- { name: "温度计-T01", children: [{ name: "T151YL1" }, { name: "T151YL2" }, { name: "T151YL3" }] },
|
|
|
- { name: "温度计-T02", children: [{ name: "T151YL4" }, { name: "T151YL5" }, { name: "T151YL6" }] },
|
|
|
- { name: "温度计-T03", children: [{ name: "T151YL7" }, { name: "T151YL8" }, { name: "T151YL9" }] },
|
|
|
- ],
|
|
|
- },
|
|
|
+ { name: "库水位", children: [{ name: "库水位-W01", children: [{ name: "W131YL1" }, { name: "W131YL2" }, { name: "W131YL3" }] }, { name: "库水位-W02", children: [{ name: "W131YL4" }, { name: "W131YL5" }, { name: "W131YL6" }] }] },
|
|
|
+ { name: "降雨量", children: [{ name: "雨量计-R01", children: [{ name: "Y141YL1" }, { name: "Y141YL2" }, { name: "Y141YL3" }] }, { name: "雨量计-R02", children: [{ name: "Y141YL4" }, { name: "Y141YL5" }, { name: "Y141YL6" }] }] },
|
|
|
+ { name: "温度", children: [{ name: "温度计-T01", children: [{ name: "T151YL1" }, { name: "T151YL2" }, { name: "T151YL3" }] }, { name: "温度计-T02", children: [{ name: "T151YL4" }, { name: "T151YL5" }, { name: "T151YL6" }] }, { name: "温度计-T03", children: [{ name: "T151YL7" }, { name: "T151YL8" }, { name: "T151YL9" }] }] },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
@@ -339,36 +450,23 @@ export default {
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
- monitorSummaryList: [
|
|
|
- { name: "变形检测", count: 42, progress: 82, color: "#62f6fb" },
|
|
|
- { name: "渗流渗压", count: 28, progress: 65, color: "#a78bfa" },
|
|
|
- { name: "应力应变", count: 16, progress: 45, color: "#fbbf24" },
|
|
|
+ // 报警数据
|
|
|
+ // 巡检记录
|
|
|
+ patrolRecords: [
|
|
|
+ { id: "PR01", time: "08:30", point: "坝顶水平位移-01", person: "张建国", status: "正常" },
|
|
|
+ { id: "PR02", time: "08:45", point: "坝基垂直位移-03", person: "张建国", status: "正常" },
|
|
|
+ { id: "PR03", time: "09:10", point: "渗流压力-P05", person: "李卫东", status: "正常" },
|
|
|
+ { id: "PR04", time: "09:30", point: "绕坝渗流-S01", person: "李卫东", status: "正常" },
|
|
|
+ { id: "PR05", time: "09:55", point: "钢筋应力-R01", person: "王振华", status: "异常" },
|
|
|
+ { id: "PR06", time: "10:20", point: "基岩应力-Y02", person: "王振华", status: "正常" },
|
|
|
+ { id: "PR07", time: "10:40", point: "库水位-W01", person: "张建国", status: "正常" },
|
|
|
+ { id: "PR08", time: "11:00", point: "裂缝开合度-C01", person: "张建国", status: "正常" },
|
|
|
],
|
|
|
- summaryPieMap: {
|
|
|
- "变形检测": [
|
|
|
- { name: "精密水准", value: 12, color: "#62f6fb" },
|
|
|
- { name: "基岩变形计", value: 10, color: "#34d399" },
|
|
|
- { name: "电磁沉降环", value: 8, color: "#fbbf24" },
|
|
|
- { name: "测缝计", value: 7, color: "#f97316" },
|
|
|
- { name: "多点位移计", value: 5, color: "#ef4444" },
|
|
|
- ],
|
|
|
- "渗流渗压": [
|
|
|
- { name: "渗压计", value: 10, color: "#a78bfa" },
|
|
|
- { name: "量水堰", value: 7, color: "#818cf8" },
|
|
|
- { name: "测压管", value: 6, color: "#c084fc" },
|
|
|
- { name: "孔隙水压力计", value: 5, color: "#e879f9" },
|
|
|
- ],
|
|
|
- "应力应变": [
|
|
|
- { name: "钢筋计", value: 6, color: "#fbbf24" },
|
|
|
- { name: "应变计", value: 5, color: "#f59e0b" },
|
|
|
- { name: "无应力计", value: 5, color: "#f97316" },
|
|
|
- ],
|
|
|
- },
|
|
|
- activeSummaryCard: "变形检测",
|
|
|
- summaryPieChart: null,
|
|
|
- selectedDevice: null,
|
|
|
- deviceBreadcrumb: "",
|
|
|
- deviceGaugeChart: null,
|
|
|
+ thresholdAlarms: [
|
|
|
+ { id: "T001", device: "钢筋应力-R01-03", threshold: "200 MPa", current: "246 MPa", over: "23%", level: "critical", time: "2026-06-08 11:00" },
|
|
|
+ { id: "T002", device: "基岩应力-Y02-05", threshold: "150 MPa", current: "172 MPa", over: "14.7%", level: "critical", time: "2026-06-08 10:10" },
|
|
|
+ ],
|
|
|
+ deformTrendChart: null,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -385,15 +483,18 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
- this.initCharts();
|
|
|
+ this.initGaugeChart();
|
|
|
this.renderSummaryPieChart();
|
|
|
+ this.renderDeformTrendChart();
|
|
|
});
|
|
|
},
|
|
|
beforeUnmount() {
|
|
|
if (this.summaryPieChart) this.summaryPieChart.dispose();
|
|
|
if (this.deviceGaugeChart) this.deviceGaugeChart.dispose();
|
|
|
+ if (this.deformTrendChart) this.deformTrendChart.dispose();
|
|
|
},
|
|
|
methods: {
|
|
|
+ // --- 设备清单树 ---
|
|
|
filterNode(node, kw) {
|
|
|
if (!node.children) {
|
|
|
return node.name.toLowerCase().includes(kw) ? { ...node } : null;
|
|
|
@@ -409,6 +510,7 @@ export default {
|
|
|
node.expanded = !node.expanded;
|
|
|
}
|
|
|
},
|
|
|
+ // --- 监控摘要 ---
|
|
|
toggleSummaryCard(name) {
|
|
|
if (this.activeSummaryCard === name) {
|
|
|
this.activeSummaryCard = null;
|
|
|
@@ -456,14 +558,8 @@ export default {
|
|
|
}],
|
|
|
});
|
|
|
},
|
|
|
- openDevicePanel(dev, grand, loc, pt, child) {
|
|
|
- this.selectedDevice = dev;
|
|
|
- this.deviceBreadcrumb = `${child.name} > ${grand.name} > ${loc.name} > ${pt.name} > ${dev.name}`;
|
|
|
- },
|
|
|
- closeTempCard() {
|
|
|
- this.selectedDevice = null;
|
|
|
- },
|
|
|
- initCharts() {
|
|
|
+ // --- 仪表盘 ---
|
|
|
+ initGaugeChart() {
|
|
|
if (!echarts) return;
|
|
|
const gc = document.getElementById("deviceGaugeChart");
|
|
|
if (gc) {
|
|
|
@@ -501,6 +597,42 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ // --- 24h整体形变趋势（中心线偏移） ---
|
|
|
+ renderDeformTrendChart() {
|
|
|
+ if (!echarts) return;
|
|
|
+ const el = document.getElementById("deformTrendChart");
|
|
|
+ if (!el) return;
|
|
|
+ if (this.deformTrendChart) this.deformTrendChart.dispose();
|
|
|
+ this.deformTrendChart = echarts.init(el, null, { renderer: "canvas" });
|
|
|
+ const hours = ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"];
|
|
|
+ // 以中心线为基准的偏移值（mm），正=偏右/上，负=偏左/下
|
|
|
+ const values = [0.02, 0.05, 0.07, 0.04, 0.08, 0.06, 0.03, 0.01, 0.05, 0.07, 0.04, -0.02];
|
|
|
+ this.deformTrendChart.setOption({
|
|
|
+ animation: false,
|
|
|
+ grid: { left: 0, right: 0, top: 0, bottom: 0 },
|
|
|
+ xAxis: { type: "category", data: hours, show: false },
|
|
|
+ yAxis: { type: "value", show: false, min: -0.1, max: 0.1 },
|
|
|
+ tooltip: { trigger: "axis", formatter: p => `偏移: ${p[0].value} mm`, textStyle: { fontSize: 11, color: "#e0fcff" }, backgroundColor: "rgba(0,20,40,0.85)", borderColor: "rgba(0,212,255,0.3)", borderWidth: 1, padding: [4, 8] },
|
|
|
+ series: [{
|
|
|
+ type: "bar",
|
|
|
+ barWidth: "50%",
|
|
|
+ data: values.map(v => ({
|
|
|
+ value: v,
|
|
|
+ itemStyle: {
|
|
|
+ color: v >= 0 ? "rgba(98,246,251,0.8)" : "rgba(239,68,68,0.7)",
|
|
|
+ borderRadius: v >= 0 ? [2, 2, 0, 0] : [0, 0, 2, 2],
|
|
|
+ },
|
|
|
+ })),
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
+ symbol: "none",
|
|
|
+ lineStyle: { color: "rgba(98,246,251,0.4)", width: 1, type: "dashed" },
|
|
|
+ label: { show: false },
|
|
|
+ data: [{ yAxis: 0 }],
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -512,18 +644,19 @@ export default {
|
|
|
.safety-scroll-area::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 2px; }
|
|
|
.tab-content { width: 100%; display: flex; justify-content: space-between; padding: 0 20px; box-sizing: border-box; }
|
|
|
.left-sidebar { width: 350px; flex-shrink: 0; pointer-events: auto; }
|
|
|
-.middle-area { flex: 1; margin: 0 10px; min-width: 0; display: flex; flex-direction: column; }
|
|
|
-.middle-area-content { margin-top: auto; }
|
|
|
-.right-sidebar { width: 350px; flex-shrink: 0; pointer-events: auto; }
|
|
|
+.right-sidebar { width: 380px; flex-shrink: 0; pointer-events: auto; }
|
|
|
.mt-10 { margin-top: 10px; }
|
|
|
+
|
|
|
+/* ========== Data Card ========== */
|
|
|
.data-card { width: 100%; background: rgba(0,20,40,0.7); border-radius: 4px; overflow: hidden; box-shadow: 0 0 10px rgba(0,212,255,0.2); }
|
|
|
-.card-header { height: 42px; background-image: url("/src/assets/images/长数据框标题.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 16px 0; }
|
|
|
+.card-header { height: 42px; background-image: url("/src/assets/images/数据小标题.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 16px 0; }
|
|
|
.card-title { font-size: var(--fs-card-title); font-weight: bold; color: #e0fcff; margin: 0; text-shadow: 0 0 5px rgba(0,212,255,0.5); padding-left: 20px; }
|
|
|
.card-body { padding: 8px; min-height: auto; font-size: 13px; line-height: 1.5; margin-top: -6px; }
|
|
|
.card-body.chart-body { padding: 2px 8px 4px; }
|
|
|
-.card-body.card-body-tight { padding: 2px 8px 4px; }
|
|
|
-.device-stats-row { display: flex; gap: 4px; align-items: center; }
|
|
|
-.safety-eval-section { background: rgba(0,20,40,0.5); border-radius: 4px; border: 1px solid rgba(0,212,255,0.12); padding: 8px 10px; margin-bottom: 6px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
|
|
|
+.card-body.card-body-tight { padding: 2px 8px 4px; height: 100%; }
|
|
|
+
|
|
|
+/* ========== Safety Evaluation ========== */
|
|
|
+.safety-eval-section { background: rgba(0,20,40,0.5); border-radius: 4px; border: 1px solid rgba(0,212,255,0.12); padding: 8px 10px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
|
|
|
.safety-eval-top { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 10px; border-radius: 3px; margin-bottom: 6px; background: #22c55e; }
|
|
|
.safety-eval-section-title { color: #ffffff; font-size: 15px; }
|
|
|
.safety-eval-grade { color: #ffffff; font-size: 16px; font-weight: bold; }
|
|
|
@@ -538,17 +671,122 @@ export default {
|
|
|
.eval-item-tag { font-size: 10px; font-weight: bold; padding: 1px 8px; border-radius: 2px; }
|
|
|
.eval-item-tag.tag-ok { color: #22c55e; background: rgba(34,197,94,0.15); }
|
|
|
.eval-item-tag.tag-warn { color: #ffd93d; background: rgba(255,217,61,0.15); }
|
|
|
-.safety-eval-bot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
|
+.safety-eval-bot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
|
|
|
.safety-eval-stat { display: flex; align-items: center; gap: 4px; color: #e0fcff; font-size: 10px; }
|
|
|
.eval-stat-dot { width: 6px; height: 6px; border-radius: 50%; }
|
|
|
.dot-ok { background: #22c55e; } .dot-warn { background: #ffd93d; } .dot-err { background: #ef4444; }
|
|
|
.safety-eval-time { margin-left: auto; color: #7bbef6; font-size: 10px; white-space: nowrap; }
|
|
|
+
|
|
|
+/* ========== Device Stats + Gauge ========== */
|
|
|
+.device-stats-row { display: flex; gap: 4px; align-items: center; }
|
|
|
.device-stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 4px; padding: 8px 4px; }
|
|
|
.device-stat-percent { color: #e0fcff; font-size: 20px; font-weight: bold; }
|
|
|
.device-stat-icon { display: flex; align-items: center; justify-content: center; height: 36px; }
|
|
|
.stat-icon-img { height: auto; width: auto; max-height: none; }
|
|
|
.device-stat-label { color: #ffffff; font-size: 13px; white-space: nowrap; }
|
|
|
.device-gauge-section { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; margin: 0 2px; }
|
|
|
+
|
|
|
+/* ========== Monitor Summary ========== */
|
|
|
+.monitor-divider { height: 1px; background: rgba(0,212,255,0.15); margin: 4px 0; }
|
|
|
+.monitor-summary-row { display: flex; gap: 6px; margin-bottom: 4px; }
|
|
|
+.monitor-summary-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(0,20,40,0.5); border-radius: 4px; border: 1px solid rgba(0,212,255,0.12); padding: 8px 4px; cursor: pointer; transition: all 0.2s; }
|
|
|
+.monitor-summary-card:hover { border-color: rgba(0,212,255,0.35); background: rgba(0,30,60,0.6); }
|
|
|
+.monitor-summary-card.active { border-color: rgba(0,212,255,0.6); background: rgba(0,40,80,0.7); box-shadow: 0 0 8px rgba(0,212,255,0.2); }
|
|
|
+.summary-pie-area { background: rgba(0,20,40,0.4); border-radius: 4px; border: 1px solid rgba(0,212,255,0.1); padding: 2px; margin-bottom: 4px; text-align: center; }
|
|
|
+.progress-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 3; }
|
|
|
+.progress-ring-fill { fill: none; stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 24px 24px; }
|
|
|
+.monitor-summary-name { color: #7bbef6; font-size: 10px; }
|
|
|
+.monitor-summary-count { font-size: 18px; font-weight: bold; }
|
|
|
+
|
|
|
+/* ========== Patrol Record Card ========== */
|
|
|
+.patrol-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; margin-bottom: 6px; }
|
|
|
+.patrol-stat-item { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; background: rgba(0,20,40,0.4); border-radius: 3px; border: 1px solid rgba(0,212,255,0.08); }
|
|
|
+.patrol-stat-num { font-size: 20px; font-weight: bold; color: #e0fcff; line-height: 1.2; }
|
|
|
+.patrol-stat-label { color: #7bbef6; font-size: 9px; margin-top: 2px; white-space: nowrap; }
|
|
|
+.patrol-list { max-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
|
|
|
+.patrol-list::-webkit-scrollbar { width: 3px; }
|
|
|
+.patrol-list::-webkit-scrollbar-track { background: rgba(0,20,40,0.5); }
|
|
|
+.patrol-list::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 2px; }
|
|
|
+.patrol-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; background: rgba(0,20,40,0.3); border-radius: 3px; border: 1px solid rgba(0,212,255,0.06); }
|
|
|
+.patrol-row-left { display: flex; align-items: center; gap: 8px; }
|
|
|
+.patrol-row-right { display: flex; align-items: center; gap: 6px; }
|
|
|
+.patrol-row-time { color: #7bbef6; font-size: 11px; flex-shrink: 0; }
|
|
|
+.patrol-row-point { color: #e0fcff; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
|
|
|
+.patrol-row-person { color: #7bbef6; font-size: 11px; }
|
|
|
+.patrol-row-status { font-size: 10px; font-weight: bold; padding: 0 6px; border-radius: 2px; line-height: 18px; }
|
|
|
+.patrol-row-status.status-normal { color: #22c55e; background: rgba(34,197,94,0.15); }
|
|
|
+.patrol-row-status.status-abnormal { color: #ef4444; background: rgba(239,68,68,0.15); }
|
|
|
+
|
|
|
+/* ========== Threshold Alarm ========== */
|
|
|
+.threshold-summary { display: flex; gap: 6px; margin-bottom: 4px; }
|
|
|
+.threshold-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; background: rgba(0,20,40,0.4); border-radius: 4px; border: 1px solid rgba(0,212,255,0.1); }
|
|
|
+.threshold-stat-value { font-size: 22px; font-weight: bold; color: #ef4444; line-height: 1.2; }
|
|
|
+.threshold-stat-label { font-size: 10px; color: #7bbef6; margin-top: 2px; }
|
|
|
+.threshold-item { padding: 5px 6px; border-radius: 3px; border: 1px solid transparent; margin-bottom: 3px; }
|
|
|
+.threshold-item.threshold-critical { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
|
|
|
+.threshold-item.threshold-warning { background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.15); }
|
|
|
+.threshold-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
|
|
|
+.threshold-device { color: #e0fcff; font-size: 11px; font-weight: bold; }
|
|
|
+.threshold-tag { font-size: 9px; padding: 0 5px; border-radius: 2px; line-height: 16px; }
|
|
|
+.tag-critical { background: rgba(239,68,68,0.2); color: #ef4444; }
|
|
|
+.tag-warning { background: rgba(251,191,36,0.2); color: #fbbf24; }
|
|
|
+.threshold-item-body { display: flex; gap: 4px; margin-bottom: 2px; }
|
|
|
+.threshold-metric { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 2px 4px; background: rgba(0,20,40,0.3); border-radius: 2px; }
|
|
|
+.tm-label { color: #7bbef6; font-size: 9px; }
|
|
|
+.tm-value { color: #e0fcff; font-size: 11px; font-weight: bold; }
|
|
|
+.threshold-item-time { color: #7bbef6; font-size: 9px; text-align: right; }
|
|
|
+
|
|
|
+/* ========== Deformation & Seepage Section ========== */
|
|
|
+.deform-section,
|
|
|
+.seepage-section { background: rgba(0,20,40,0.5); border-radius: 4px; border: 1px solid rgba(0,212,255,0.12); padding: 8px 10px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
|
|
|
+
|
|
|
+/* Conclusion row (no background bar, text-only green) */
|
|
|
+.conclusion-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: rgba(0,20,40,0.3); border-radius: 3px; }
|
|
|
+.conclusion-row-label { color: #7bbef6; font-size: 13px; }
|
|
|
+.conclusion-row-value { font-size: 14px; font-weight: bold; }
|
|
|
+.conclusion-row-value.text-green { color: #22c55e; }
|
|
|
+
|
|
|
+/* Metrics (2-column grid) */
|
|
|
+.deform-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
|
|
|
+.metric-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: rgba(0,20,40,0.4); border-radius: 3px; }
|
|
|
+.metric-item-label { color: #7bbef6; font-size: 11px; text-align: center; }
|
|
|
+.metric-item-value { color: #e0fcff; font-size: 20px; font-weight: bold; line-height: 1.2; }
|
|
|
+.metric-item-unit { color: #7bbef6; font-size: 12px; font-weight: normal; margin-left: 2px; }
|
|
|
+.metric-item-tag { font-size: 9px; padding: 0 6px; border-radius: 2px; line-height: 16px; }
|
|
|
+.metric-item-tag.tag-ok { color: #22c55e; background: rgba(34,197,94,0.15); }
|
|
|
+
|
|
|
+/* Rate row */
|
|
|
+.deform-rate { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: rgba(0,20,40,0.4); border-radius: 3px; }
|
|
|
+.rate-label { color: #7bbef6; font-size: 12px; }
|
|
|
+.rate-tag { font-size: 11px; font-weight: bold; padding: 1px 8px; border-radius: 2px; }
|
|
|
+.rate-tag.tag-ok { color: #22c55e; background: rgba(34,197,94,0.15); }
|
|
|
+.rate-hint { margin-left: auto; color: #7bbef6; font-size: 11px; }
|
|
|
+
|
|
|
+/* Trend chart */
|
|
|
+.deform-trend { display: flex; flex-direction: column; gap: 2px; }
|
|
|
+.trend-label { color: #7bbef6; font-size: 12px; padding-left: 2px; }
|
|
|
+.trend-chart-box { background: rgba(0,20,40,0.4); border-radius: 3px; border: 1px solid rgba(0,212,255,0.08); padding: 2px; }
|
|
|
+
|
|
|
+/* Balance row (seepage) */
|
|
|
+.balance-row { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px; background: rgba(0,20,40,0.4); border-radius: 3px; }
|
|
|
+.balance-row-label { color: #7bbef6; font-size: 12px; }
|
|
|
+.balance-bars { display: flex; flex-direction: column; gap: 3px; }
|
|
|
+.balance-bar-line { display: flex; align-items: center; gap: 6px; }
|
|
|
+.balance-bar-side { color: #e0fcff; font-size: 11px; width: 28px; text-align: right; flex-shrink: 0; }
|
|
|
+.balance-track { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
|
|
|
+.balance-fill { height: 100%; background: #62f6fb; border-radius: 4px; }
|
|
|
+.balance-fill.fill-right { background: #62f6fb; }
|
|
|
+.balance-bar-val { color: #e0fcff; font-size: 11px; width: 30px; text-align: left; flex-shrink: 0; }
|
|
|
+.balance-result { font-size: 11px; font-weight: bold; padding: 1px 8px; border-radius: 2px; align-self: flex-end; }
|
|
|
+.balance-result.tag-ok { color: #22c55e; background: rgba(34,197,94,0.15); }
|
|
|
+
|
|
|
+/* ========== Small Title ========== */
|
|
|
+.monitor-subtitle { color: #e0fcff; font-size: var(--fs-label); font-weight: bold; padding: 3px 16px 2px 22px; background-image: url("/src/assets/images/小标题.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; height: 24px; display: inline-flex; align-items: center; }
|
|
|
+
|
|
|
+canvas { display: block; margin: 0 auto; }
|
|
|
+canvas#summaryPieChart { display: flex !important; padding-left: 35px !important; padding-right: 35px !important; }
|
|
|
+
|
|
|
+/* ========== Tree ========== */
|
|
|
.tree-search-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(0,20,40,0.5); border: 1px solid rgba(0,212,255,0.15); border-radius: 4px; margin-bottom: 4px; }
|
|
|
.tree-search-icon { flex-shrink: 0; }
|
|
|
.tree-search-input { flex: 1; background: none; border: none; outline: none; color: #e0fcff; font-size: 12px; line-height: 26px; }
|
|
|
@@ -574,17 +812,4 @@ export default {
|
|
|
.tree-locations { padding-left: 36px; }
|
|
|
.tree-points { padding-left: 48px; }
|
|
|
.tree-devices { padding-left: 60px; }
|
|
|
-.tall-card { height: calc(100% + 10px); min-height: 440px; }
|
|
|
-.monitor-divider { height: 1px; background: rgba(0,212,255,0.15); margin: 0 8px; }
|
|
|
-.monitor-subtitle { color: #e0fcff; font-size: var(--fs-label); font-weight: bold; padding: 3px 16px 2px 22px; background-image: url("/src/assets/images/小标题.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; height: 24px; display: inline-flex; align-items: center; margin-bottom: 2px; }
|
|
|
-.monitor-summary-row { display: flex; gap: 6px; margin-bottom: 4px; }
|
|
|
-.monitor-summary-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(0,20,40,0.5); border-radius: 4px; border: 1px solid rgba(0,212,255,0.12); padding: 8px 4px; cursor: pointer; transition: all 0.2s; }
|
|
|
-.monitor-summary-card:hover { border-color: rgba(0,212,255,0.35); background: rgba(0,30,60,0.6); }
|
|
|
-.monitor-summary-card.active { border-color: rgba(0,212,255,0.6); background: rgba(0,40,80,0.7); box-shadow: 0 0 8px rgba(0,212,255,0.2); }
|
|
|
-.summary-pie-area { background: rgba(0,20,40,0.4); border-radius: 4px; border: 1px solid rgba(0,212,255,0.1); padding: 2px; margin-bottom: 2px; }
|
|
|
-.progress-ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 3; }
|
|
|
-.progress-ring-fill { fill: none; stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 24px 24px; }
|
|
|
-.monitor-summary-name { color: #7bbef6; font-size: 10px; }
|
|
|
-.monitor-summary-count { font-size: 18px; font-weight: bold; }
|
|
|
-canvas { display: block; margin: 0 auto; }
|
|
|
-</style>
|
|
|
+</style>
|
BAI