Skip to content

J
JINRUN-DP
Commit ddb4adf9 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add:隐藏元素

parent 266217b9
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 162 deletions
src/views/index.vue
View file @ ddb4adf9
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div id="cesiumContainer" class="cesium-background"></div> <div id="cesiumContainer" class="cesium-background"></div>
<!-- 顶部标题栏 --> <!-- 顶部标题栏 -->
<header class="top-title-bar" style="display: none1"> <header class="top-title-bar" style="display: none">
<h1 class="system-title">数据监测分析系统</h1> <h1 class="system-title">数据监测分析系统</h1>
<div class="header-info"> <div class="header-info">
<div class="current-time">{{ currentTime }}</div> <div class="current-time">{{ currentTime }}</div>
...@@ -42,194 +42,194 @@ ...@@ -42,194 +42,194 @@
</nav> --> </nav> -->
<!-- 主内容区 --> <!-- 主内容区 -->
<!-- <main class="main-content" style="display: none1"> --> <main class="main-content" style="display: none">
<!-- 左侧数据模块 --> <!-- 左侧数据模块 -->
<div class="left-modules"> <div class="left-modules">
<!-- 模块1：数据总览 --> <!-- 模块1：数据总览 -->
<div class="data-module"> <div class="data-module">
<div class="module-header"> <div class="module-header">
<h3>数据总览</h3> <h3>数据总览</h3>
<span class="refresh-icon"></span> <span class="refresh-icon"></span>
</div>
<div class="module-body">
<div class="data-stats">
<div class="stat-item">
<span class="stat-label">监测点位</span>
<span class="stat-value">256</span>
</div>
<div class="stat-item">
<span class="stat-label">在线设备</span>
<span class="stat-value online">245</span>
</div>
<div class="stat-item">
<span class="stat-label">数据采集量</span>
<span class="stat-value">1.2万</span>
</div>
</div> </div>
<div class="progress-bars"> <div class="module-body">
<div class="progress-item"> <div class="data-stats">
<span class="progress-label">设备在线率</span> <div class="stat-item">
<div class="progress-container"> <span class="stat-label">监测点位</span>
<div class="progress-bar" style="width: 95%"></div> <span class="stat-value">256</span>
</div>
<div class="stat-item">
<span class="stat-label">在线设备</span>
<span class="stat-value online">245</span>
</div>
<div class="stat-item">
<span class="stat-label">数据采集量</span>
<span class="stat-value">1.2万</span>
</div>
</div>
<div class="progress-bars">
<div class="progress-item">
<span class="progress-label">设备在线率</span>
<div class="progress-container">
<div class="progress-bar" style="width: 95%"></div>
</div>
<span class="progress-value">95.7%</span>
</div> </div>
<span class="progress-value">95.7%</span>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 模块2：实时报警 --> <!-- 模块2：实时报警 -->
<div class="data-module"> <div class="data-module">
<div class="module-header"> <div class="module-header">
<h3>实时报警</h3> <h3>实时报警</h3>
<span class="alarm-count">5</span> <span class="alarm-count">5</span>
</div> </div>
<div class="module-body"> <div class="module-body">
<div class="alarm-list"> <div class="alarm-list">
<div class="alarm-item level-1"> <div class="alarm-item level-1">
<span class="alarm-level">紧急</span> <span class="alarm-level">紧急</span>
<span class="alarm-content">温度异常</span> <span class="alarm-content">温度异常</span>
<span class="alarm-point">A-12区</span> <span class="alarm-point">A-12区</span>
<span class="alarm-time">10:23</span> <span class="alarm-time">10:23</span>
</div> </div>
<div class="alarm-item level-2"> <div class="alarm-item level-2">
<span class="alarm-level">重要</span> <span class="alarm-level">重要</span>
<span class="alarm-content">设备离线</span> <span class="alarm-content">设备离线</span>
<span class="alarm-point">B-05区</span> <span class="alarm-point">B-05区</span>
<span class="alarm-time">09:45</span> <span class="alarm-time">09:45</span>
</div> </div>
<div class="alarm-item level-3"> <div class="alarm-item level-3">
<span class="alarm-level">一般</span> <span class="alarm-level">一般</span>
<span class="alarm-content">数据异常</span> <span class="alarm-content">数据异常</span>
<span class="alarm-point">C-08区</span> <span class="alarm-point">C-08区</span>
<span class="alarm-time">08:30</span> <span class="alarm-time">08:30</span>
</div> </div>
<div class="alarm-item level-3"> <div class="alarm-item level-3">
<span class="alarm-level">一般</span> <span class="alarm-level">一般</span>
<span class="alarm-content">压力偏低</span> <span class="alarm-content">压力偏低</span>
<span class="alarm-point">D-01区</span> <span class="alarm-point">D-01区</span>
<span class="alarm-time">07:55</span> <span class="alarm-time">07:55</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 模块3：环境监测 --> <!-- 模块3：环境监测 -->
<div class="data-module"> <div class="data-module">
<div class="module-header"> <div class="module-header">
<h3>环境监测</h3> <h3>环境监测</h3>
<span class="time-range">今日</span> <span class="time-range">今日</span>
</div> </div>
<div class="module-body"> <div class="module-body">
<div class="env-data-grid"> <div class="env-data-grid">
<div class="env-item"> <div class="env-item">
<span class="env-icon temp"></span> <span class="env-icon temp"></span>
<span class="env-label">平均温度</span> <span class="env-label">平均温度</span>
<span class="env-value">26.3°C</span> <span class="env-value">26.3°C</span>
</div> </div>
<div class="env-item"> <div class="env-item">
<span class="env-icon humidity"></span> <span class="env-icon humidity"></span>
<span class="env-label">平均湿度</span> <span class="env-label">平均湿度</span>
<span class="env-value">65.8%</span> <span class="env-value">65.8%</span>
</div> </div>
<div class="env-item"> <div class="env-item">
<span class="env-icon pressure"></span> <span class="env-icon pressure"></span>
<span class="env-label">平均气压</span> <span class="env-label">平均气压</span>
<span class="env-value">101.5kPa</span> <span class="env-value">101.5kPa</span>
</div> </div>
<div class="env-item"> <div class="env-item">
<span class="env-icon wind"></span> <span class="env-icon wind"></span>
<span class="env-label">平均风速</span> <span class="env-label">平均风速</span>
<span class="env-value">3.2m/s</span> <span class="env-value">3.2m/s</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 右侧数据模块 -->
<div class="right-modules">
<!-- 模块4：趋势分析 -->
<div class="data-module">
<div class="module-header">
<h3>数据趋势分析</h3>
<span class="chart-type">24小时</span>
</div>
<div class="module-body">
<div class="chart-container" id="trendChart"></div>
</div>
</div>
<!-- 模块5：设备状态 --> <!-- 右侧数据模块 -->
<div class="data-module"> <div class="right-modules">
<div class="module-header"> <!-- 模块4：趋势分析 -->
<h3>设备运行状态</h3> <div class="data-module">
<span class="view-more">查看全部</span> <div class="module-header">
<h3>数据趋势分析</h3>
<span class="chart-type">24小时</span>
</div>
<div class="module-body">
<div class="chart-container" id="trendChart"></div>
</div>
</div> </div>
<div class="module-body">
<div class="device-status-list"> <!-- 模块5：设备状态 -->
<div class="device-item"> <div class="data-module">
<span class="device-name">传感器A-1</span> <div class="module-header">
<span class="device-status normal">正常</span> <h3>设备运行状态</h3>
<span class="device-value">125.6</span> <span class="view-more">查看全部</span>
<span class="device-time">3分钟前</span> </div>
</div> <div class="module-body">
<div class="device-item"> <div class="device-status-list">
<span class="device-name">传感器B-3</span> <div class="device-item">
<span class="device-status normal">正常</span> <span class="device-name">传感器A-1</span>
<span class="device-value">89.2</span> <span class="device-status normal">正常</span>
<span class="device-time">5分钟前</span> <span class="device-value">125.6</span>
</div> <span class="device-time">3分钟前</span>
<div class="device-item"> </div>
<span class="device-name">传感器C-2</span> <div class="device-item">
<span class="device-status warning">警告</span> <span class="device-name">传感器B-3</span>
<span class="device-value">185.3</span> <span class="device-status normal">正常</span>
<span class="device-time">1分钟前</span> <span class="device-value">89.2</span>
</div> <span class="device-time">5分钟前</span>
<div class="device-item"> </div>
<span class="device-name">传感器D-5</span> <div class="device-item">
<span class="device-status offline">离线</span> <span class="device-name">传感器C-2</span>
<span class="device-value">--</span> <span class="device-status warning">警告</span>
<span class="device-time">2小时前</span> <span class="device-value">185.3</span>
<span class="device-time">1分钟前</span>
</div>
<div class="device-item">
<span class="device-name">传感器D-5</span>
<span class="device-status offline">离线</span>
<span class="device-value">--</span>
<span class="device-time">2小时前</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 模块6：系统负载 --> <!-- 模块6：系统负载 -->
<div class="data-module"> <div class="data-module">
<div class="module-header"> <div class="module-header">
<h3>系统资源监控</h3> <h3>系统资源监控</h3>
<span class="system-time">{{ currentTimeShort }}</span> <span class="system-time">{{ currentTimeShort }}</span>
</div> </div>
<div class="module-body"> <div class="module-body">
<div class="system-resources"> <div class="system-resources">
<div class="resource-item"> <div class="resource-item">
<span class="resource-label">CPU使用率</span> <span class="resource-label">CPU使用率</span>
<div class="resource-bar-container"> <div class="resource-bar-container">
<div class="resource-bar cpu-bar" style="width: 42%"></div> <div class="resource-bar cpu-bar" style="width: 42%"></div>
</div>
<span class="resource-value">42%</span>
</div> </div>
<span class="resource-value">42%</span> <div class="resource-item">
</div> <span class="resource-label">内存使用率</span>
<div class="resource-item"> <div class="resource-bar-container">
<span class="resource-label">内存使用率</span> <div class="resource-bar mem-bar" style="width: 68%"></div>
<div class="resource-bar-container"> </div>
<div class="resource-bar mem-bar" style="width: 68%"></div> <span class="resource-value">68%</span>
</div> </div>
<span class="resource-value">68%</span> <div class="resource-item">
</div> <span class="resource-label">磁盘使用率</span>
<div class="resource-item"> <div class="resource-bar-container">
<span class="resource-label">磁盘使用率</span> <div class="resource-bar disk-bar" style="width: 35%"></div>
<div class="resource-bar-container"> </div>
<div class="resource-bar disk-bar" style="width: 35%"></div> <span class="resource-value">35%</span>
</div> </div>
<span class="resource-value">35%</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </main>
<!-- </main> -->
</div> </div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment