Wangxin
9 months ago
parent
0cf75ce555
commit
a548944f67
@ -0,0 +1,92 @@ |
||||
import request from '@/utils/request' |
||||
import { parseStrEmpty } from "@/utils/ruoyi"; |
||||
const api = '/device/files/' |
||||
|
||||
// 查询详细
|
||||
export function getDict() { |
||||
return request({ |
||||
url: '/sys_dict', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 预警信息统
|
||||
export function statistic(query) { |
||||
return request({ |
||||
url: 'inMonitoring/statistic', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 统计预警信息次数
|
||||
export function alertMessageTimes(query) { |
||||
return request({ |
||||
url: 'inMonitoring/alertMessage/times', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 按设备类型分类统计设备信息
|
||||
export function byEquType() { |
||||
return request({ |
||||
url: 'device/files/byEquType', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 设备运行状态
|
||||
export function listMonitor(query) { |
||||
return request({ |
||||
url: 'device/files/monitorById', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 查询详细
|
||||
export function getInfo(id) { |
||||
return request({ |
||||
url: api + '/queryById/' + parseStrEmpty(id), |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 新增
|
||||
export function add(data) { |
||||
return request({ |
||||
url: api + 'add', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 修改
|
||||
export function update(data) { |
||||
return request({ |
||||
url: api + 'modify', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除
|
||||
export function del(id) { |
||||
return request({ |
||||
url: api + id, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -1,198 +1,679 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-row :gutter="5"> |
||||
<el-col :span="24"> |
||||
<el-card> |
||||
<el-row> |
||||
<el-col :span="4"> |
||||
<h3>交换机</h3> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>持续在线XXXXX小时</h3> |
||||
</el-col> |
||||
</el-row> |
||||
<el-divider></el-divider> |
||||
<div class="body"> |
||||
<div class="dashboard"> |
||||
<!-- 上层：左侧图片，右侧参数 --> |
||||
<div class="top-section0"> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title"> |
||||
<i class="fas fa-network-wired"></i> |
||||
设备概览 |
||||
</h2> |
||||
<span class="status-badge status-online"> |
||||
<i class="fas fa-circle"></i> 在线 |
||||
</span> |
||||
</div> |
||||
<div class="top-section-con"> |
||||
<div class="device-image"> |
||||
<i class="fas fa-server"></i> |
||||
</div> |
||||
<!-- 设备基本信息 --> |
||||
<div class="device-info"> |
||||
<div class="info-title">设备基本信息</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-layer-group"></i> 设备级别 |
||||
</span> |
||||
<span class="info-value">A级</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||
</span> |
||||
<span class="info-value">数据中心-主柜</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-tag"></i> 品牌型号 |
||||
</span> |
||||
<span class="info-value">Cisco</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-heartbeat"></i> 运行状态 |
||||
</span> |
||||
<span class="info-value">运行正常</span> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<el-row> |
||||
<el-col :span="8"> |
||||
<h3>交换机</h3> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备基本信息</h3> |
||||
<p> |
||||
<span>设备型号:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备级别:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备版本:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备类型:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备出厂信息</h3> |
||||
<p> |
||||
<span>生产商名称:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>供货商名称:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>出厂日期:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>质保时间:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>联系人:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>联系电话:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备管理信息</h3> |
||||
<p> |
||||
<span>带外IP管理:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>安装位置:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>安装日期:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>服役年限:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>管理员:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备状态信息</h3> |
||||
<p> |
||||
<span>累计预警次数:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>累计维修次数:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
</el-row> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row class="mt10" :gutter="10"> |
||||
<el-col :span="12"> |
||||
<el-card :style="{height: '500px'}"> |
||||
<el-row> |
||||
<el-col :span="24" class="flex alignItems gap10"> |
||||
<h3>设备运行数据</h3> |
||||
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||
</el-col> |
||||
<el-col :span="14"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
<el-col :span="10"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<BarChart height="200px" :dateRange="dateRange"></BarChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<BarChart height="200px" :dateRange="dateRange"></BarChart> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
|
||||
<!-- 设备基本信息 --> |
||||
<div class="device-info"> |
||||
<div class="info-title">设备基本信息</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-layer-group"></i> 设备级别 |
||||
</span> |
||||
<span class="info-value">A级</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||
</span> |
||||
<span class="info-value">数据中心-主柜</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-tag"></i> 品牌型号 |
||||
</span> |
||||
<span class="info-value">Cisco</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-heartbeat"></i> 运行状态 |
||||
</span> |
||||
<span class="info-value">运行正常</span> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</el-row> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-card :style="{height: '500px'}"> |
||||
<el-tabs v-model="selectedTab"> |
||||
<el-tab-pane label="历史预警" :name="1"> |
||||
历史预警 |
||||
</el-tab-pane> |
||||
<el-tab-pane label="接口信息" :name="2"> |
||||
接口信息 |
||||
</el-tab-pane> |
||||
<el-tab-pane label="其他指标" :name="3"> |
||||
其他指标 |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
|
||||
<!-- 设备基本信息 --> |
||||
<div class="device-info"> |
||||
<div class="info-title">设备基本信息</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-layer-group"></i> 设备级别 |
||||
</span> |
||||
<span class="info-value">A级</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||
</span> |
||||
<span class="info-value">数据中心-主柜</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-tag"></i> 品牌型号 |
||||
</span> |
||||
<span class="info-value">Cisco</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-heartbeat"></i> 运行状态 |
||||
</span> |
||||
<span class="info-value">运行正常</span> |
||||
</div> |
||||
</div> |
||||
<!-- 设备基本信息 --> |
||||
<div class="device-info"> |
||||
<div class="info-title">设备基本信息</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-layer-group"></i> 设备级别 |
||||
</span> |
||||
<span class="info-value">A级</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||
</span> |
||||
<span class="info-value">数据中心-主柜</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-tag"></i> 品牌型号 |
||||
</span> |
||||
<span class="info-value">Cisco</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-heartbeat"></i> 运行状态 |
||||
</span> |
||||
<span class="info-value">运行正常</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 下层：图表加参数 --> |
||||
<div class="bottom-section"> |
||||
<!-- 左侧图表 --> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title"> |
||||
<i class="fas fa-chart-bar"></i> |
||||
设备运行数据 |
||||
</h2> |
||||
<el-date-picker |
||||
v-model="daterange" |
||||
type="daterange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期"> |
||||
</el-date-picker> |
||||
</div> |
||||
|
||||
<div class="chart-container" id="performanceChart"></div> |
||||
<div class="chart-container" id="trafficChart"></div> |
||||
</div> |
||||
|
||||
<!-- 右侧参数 --> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<div class="tab-top"> |
||||
<div class="top-item" v-for="(i,k) in tabs" :key="k" :class="k == tabIndex ?'ac':''" @click="tabIndex = k"> |
||||
<span>{{ i.name }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="metrics-grid"> |
||||
<div class="bottom-item" v-if="tabIndex == 0"> |
||||
<History/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import BarChart from './BarChart1.vue' |
||||
import LineChart from './LineChart.vue' |
||||
import BarChart2 from './BarChart2.vue' |
||||
import * as echarts from 'echarts' |
||||
require('echarts/theme/macarons') // echarts theme |
||||
import History from './history.vue' |
||||
export default { |
||||
name: "cardItem", |
||||
components: { BarChart, BarChart2, LineChart }, |
||||
components: { History }, |
||||
data() { |
||||
return { |
||||
dateRange: [], |
||||
selectedTab: 1 |
||||
selectedTab: 1, |
||||
tabs: [ |
||||
{ name: '历史预警' }, |
||||
{ name: '接口信息' }, |
||||
{ name: 'VLAN信息' }, |
||||
{ name: '路由表信息' }, |
||||
], |
||||
tabIndex: 0, |
||||
|
||||
|
||||
|
||||
} |
||||
}, |
||||
created() { |
||||
}, |
||||
mounted() { |
||||
this.initCharts(); |
||||
}, |
||||
methods: { |
||||
initCharts() { |
||||
// 性能图表 |
||||
const performanceChart = echarts.init(document.getElementById('performanceChart')); |
||||
performanceChart.setOption({ |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
legend: { |
||||
data: ['CPU使用率', '内存使用率'], |
||||
textStyle: { |
||||
color: '#718096' |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'], |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#cbd5e0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#718096' |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#cbd5e0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#718096', |
||||
formatter: '{value}%' |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: 'rgba(203, 213, 224, 0.6)' |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: 'CPU使用率', |
||||
type: 'line', |
||||
smooth: true, |
||||
data: [45, 52, 38, 66, 58, 62, 48], |
||||
lineStyle: { |
||||
color: '#ed8936' |
||||
}, |
||||
itemStyle: { |
||||
color: '#ed8936' |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [{ |
||||
offset: 0, color: 'rgba(237, 137, 54, 0.3)' |
||||
}, { |
||||
offset: 1, color: 'rgba(237, 137, 54, 0.1)' |
||||
}] |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
name: '内存使用率', |
||||
type: 'line', |
||||
smooth: true, |
||||
data: [30, 45, 35, 50, 42, 38, 32], |
||||
lineStyle: { |
||||
color: '#4299e1' |
||||
}, |
||||
itemStyle: { |
||||
color: '#4299e1' |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [{ |
||||
offset: 0, color: 'rgba(66, 153, 225, 0.3)' |
||||
}, { |
||||
offset: 1, color: 'rgba(66, 153, 225, 0.1)' |
||||
}] |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
|
||||
|
||||
// 流量图表 |
||||
const trafficChart = echarts.init(document.getElementById('trafficChart')); |
||||
trafficChart.setOption({ |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'shadow' |
||||
} |
||||
}, |
||||
legend: { |
||||
data: ['入站流量', '出站流量'], |
||||
textStyle: { |
||||
color: '#718096' |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#cbd5e0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#718096' |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
name: 'MB/s', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#cbd5e0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#718096' |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: 'rgba(203, 213, 224, 0.6)' |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '入站流量', |
||||
type: 'bar', |
||||
data: [320, 332, 301, 334, 390, 330, 320], |
||||
itemStyle: { |
||||
color: '#4299e1' |
||||
} |
||||
}, |
||||
{ |
||||
name: '出站流量', |
||||
type: 'bar', |
||||
data: [220, 182, 191, 234, 290, 330, 310], |
||||
itemStyle: { |
||||
color: '#ed8936' |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
|
||||
// 响应窗口大小变化 |
||||
window.addEventListener('resize', function() { |
||||
performanceChart.resize(); |
||||
trafficChart.resize(); |
||||
}); |
||||
} |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
<style scoped> |
||||
|
||||
.body { |
||||
background: linear-gradient(135deg, #f8fafc, #e2e8f0); |
||||
color: #2d3748; |
||||
line-height: 1.6; |
||||
padding: 20px; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
.dashboard { |
||||
max-width: 1400px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.header { |
||||
text-align: center; |
||||
margin-bottom: 40px; |
||||
padding: 25px; |
||||
background: rgba(255, 255, 255, 0.8); |
||||
border-radius: 20px; |
||||
backdrop-filter: blur(10px); |
||||
border: 1px solid rgba(255, 255, 255, 0.9); |
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); |
||||
} |
||||
|
||||
.header h1 { |
||||
color: #2d3748; |
||||
margin-bottom: 10px; |
||||
font-size: 36px; |
||||
font-weight: 700; |
||||
background: linear-gradient(90deg, #4299e1, #38b2ac); |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
} |
||||
|
||||
.header p { |
||||
color: #718096; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.top-section0 { |
||||
margin-bottom: 20px; |
||||
|
||||
} |
||||
.top-section-con { |
||||
display: grid; |
||||
grid-template-columns: 3fr 1fr 1fr 1fr 1fr; |
||||
gap: 30px; |
||||
} |
||||
|
||||
.top-section { |
||||
display: grid; |
||||
grid-template-columns: 1fr 2fr; |
||||
gap: 30px; |
||||
margin-bottom: 30px; |
||||
} |
||||
|
||||
.bottom-section { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.card { |
||||
background: rgba(255, 255, 255, 0.9); |
||||
border-radius: 20px; |
||||
padding: 30px; |
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); |
||||
backdrop-filter: blur(10px); |
||||
border: 1px solid rgba(255, 255, 255, 0.9); |
||||
transition: all 0.4s ease; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.card::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
height: 4px; |
||||
background: linear-gradient(90deg, #4299e1, #38b2ac); |
||||
} |
||||
|
||||
.card-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 25px; |
||||
padding-bottom: 15px; |
||||
border-bottom: 1px solid rgba(226, 232, 240, 0.8); |
||||
} |
||||
|
||||
.card-title { |
||||
font-size: 18px; |
||||
font-weight: 700; |
||||
color: #2d3748; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 12px; |
||||
} |
||||
|
||||
.card-title i { |
||||
color: #4299e1; |
||||
font-size: 24px; |
||||
} |
||||
|
||||
.status-badge { |
||||
padding: 6px 15px; |
||||
border-radius: 20px; |
||||
font-size: 13px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.status-online { |
||||
background: rgba(72, 187, 120, 0.15); |
||||
color: #38a169; |
||||
border: 1px solid rgba(72, 187, 120, 0.3); |
||||
} |
||||
|
||||
.status-danger { |
||||
background: rgba(245, 101, 101, 0.15); |
||||
color: #e53e3e; |
||||
border: 1px solid rgba(245, 101, 101, 0.3); |
||||
} |
||||
|
||||
.device-image { |
||||
width: 100%; |
||||
height: 400px; |
||||
background: linear-gradient(135deg, #edf2f7, #e2e8f0); |
||||
border-radius: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
/* margin-bottom: 20px; */ |
||||
overflow: hidden; |
||||
border: 1px solid rgba(226, 232, 240, 0.8); |
||||
} |
||||
|
||||
.device-image i { |
||||
font-size: 80px; |
||||
color: #4299e1; |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
.device-info { |
||||
display: grid; |
||||
grid-template-columns: 1fr; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.info-title { |
||||
color: #2d3748; |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
text-align: center; |
||||
} |
||||
|
||||
.info-item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 12px; |
||||
background: rgba(255, 255, 255, 0.7); |
||||
border-radius: 12px; |
||||
border: 1px solid rgba(226, 232, 240, 0.8); |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.info-item:hover { |
||||
background: rgba(255, 255, 255, 0.9); |
||||
border-color: rgba(66, 153, 225, 0.3); |
||||
transform: translateY(-2px); |
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
||||
} |
||||
|
||||
.info-label { |
||||
font-size: 13px; |
||||
color: #718096; |
||||
margin-bottom: 6px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 6px; |
||||
} |
||||
|
||||
.info-label i { |
||||
font-size: 12px; |
||||
color: #4299e1; |
||||
} |
||||
|
||||
.info-value { |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
color: #2d3748; |
||||
} |
||||
|
||||
.chart-container { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.metrics-grid { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.metric-card { |
||||
padding: 20px; |
||||
background: rgba(255, 255, 255, 0.7); |
||||
border-radius: 12px; |
||||
border: 1px solid rgba(226, 232, 240, 0.8); |
||||
text-align: center; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.metric-card:hover { |
||||
background: rgba(255, 255, 255, 0.9); |
||||
border-color: rgba(66, 153, 225, 0.3); |
||||
transform: translateY(-3px); |
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
||||
} |
||||
|
||||
.metric-value { |
||||
font-size: 32px; |
||||
font-weight: 700; |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
.metric-label { |
||||
font-size: 14px; |
||||
color: #718096; |
||||
} |
||||
|
||||
.cpu-usage { |
||||
color: #ed8936; |
||||
} |
||||
|
||||
.alert-pending { |
||||
color: #e53e3e; |
||||
} |
||||
|
||||
.alert-total { |
||||
color: #4299e1; |
||||
} |
||||
|
||||
.progress-bar { |
||||
height: 8px; |
||||
background: rgba(226, 232, 240, 0.8); |
||||
border-radius: 4px; |
||||
overflow: hidden; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.progress-fill { |
||||
height: 100%; |
||||
border-radius: 4px; |
||||
transition: width 0.8s ease; |
||||
background: linear-gradient(90deg, #ed8936, #dd6b20); |
||||
box-shadow: 0 0 10px rgba(237, 137, 54, 0.3); |
||||
} |
||||
|
||||
@media (max-width: 1024px) { |
||||
.top-section, .bottom-section { |
||||
grid-template-columns: 1fr; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
.tab-top{ |
||||
display: flex; |
||||
gap: 20px; |
||||
} |
||||
.top-item{ |
||||
color: #2d3748; |
||||
font-weight: 400; |
||||
font-size:18px ; |
||||
cursor: pointer; |
||||
} |
||||
.top-item.ac{ |
||||
font-weight: 600; |
||||
border-bottom: 2px solid #2d3748; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,69 @@ |
||||
<template> |
||||
<div class=""> |
||||
<el-row :gutter="20"> |
||||
|
||||
<el-col> |
||||
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> |
||||
<el-table-column |
||||
label="序号" |
||||
width="60" |
||||
type="index" |
||||
></el-table-column> |
||||
<el-table-column label="预警时间" align="center" key="id" prop="id"/> |
||||
<el-table-column label="预警等级" align="center" key="name" prop="name" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警信息" align="center" key="description" prop="description" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警状态" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="处理人" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" /> |
||||
</el-table> |
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { list, del, add, update } from "@/api/device/deviceType" |
||||
import { getToken } from "@/utils/auth" |
||||
import Treeselect from "@riophae/vue-treeselect" |
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css" |
||||
import { Splitpanes, Pane } from "splitpanes" |
||||
import "splitpanes/dist/splitpanes.css" |
||||
|
||||
export default { |
||||
name: "User", |
||||
dicts: ['sys_normal_disable', 'sys_user_sex'], |
||||
components: { Treeselect, Splitpanes, Pane }, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 类型表格数据 |
||||
userList: null, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
name: undefined |
||||
}, |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
}, |
||||
methods: { |
||||
/** 查询类型列表 */ |
||||
getList() { |
||||
this.loading = true |
||||
list(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
||||
this.userList = response.rows |
||||
this.total = response.total |
||||
this.loading = false |
||||
} |
||||
) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue