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> |
<template> |
||||||
<div class="app-container"> |
<div class="body"> |
||||||
<el-row :gutter="5"> |
<div class="dashboard"> |
||||||
<el-col :span="24"> |
<!-- 上层：左侧图片，右侧参数 --> |
||||||
<el-card> |
<div class="top-section0"> |
||||||
<el-row> |
<div class="card"> |
||||||
<el-col :span="4"> |
<div class="card-header"> |
||||||
<h3>交换机</h3> |
<h2 class="card-title"> |
||||||
</el-col> |
<i class="fas fa-network-wired"></i> |
||||||
<el-col :span="4"> |
设备概览 |
||||||
<h3>持续在线XXXXX小时</h3> |
</h2> |
||||||
</el-col> |
<span class="status-badge status-online"> |
||||||
</el-row> |
<i class="fas fa-circle"></i> 在线 |
||||||
<el-divider></el-divider> |
</span> |
||||||
|
</div> |
||||||
|
<div class="top-section-con"> |
||||||
<el-row> |
<div class="device-image"> |
||||||
<el-col :span="8"> |
<i class="fas fa-server"></i> |
||||||
<h3>交换机</h3> |
</div> |
||||||
</el-col> |
<!-- 设备基本信息 --> |
||||||
<el-col :span="4"> |
<div class="device-info"> |
||||||
<h3>设备基本信息</h3> |
<div class="info-title">设备基本信息</div> |
||||||
<p> |
<div class="info-item"> |
||||||
<span>设备型号:</span> |
<span class="info-label"> |
||||||
<span>待开发</span> |
<i class="fas fa-layer-group"></i> 设备级别 |
||||||
</p> |
</span> |
||||||
<p> |
<span class="info-value">A级</span> |
||||||
<span>设备级别:</span> |
</div> |
||||||
<span>待开发</span> |
<div class="info-item"> |
||||||
</p> |
<span class="info-label"> |
||||||
<p> |
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||||
<span>设备版本:</span> |
</span> |
||||||
<span>待开发</span> |
<span class="info-value">数据中心-主柜</span> |
||||||
</p> |
</div> |
||||||
<p> |
<div class="info-item"> |
||||||
<span>设备类型:</span> |
<span class="info-label"> |
||||||
<span>待开发</span> |
<i class="fas fa-tag"></i> 品牌型号 |
||||||
</p> |
</span> |
||||||
</el-col> |
<span class="info-value">Cisco</span> |
||||||
<el-col :span="4"> |
</div> |
||||||
<h3>设备出厂信息</h3> |
<div class="info-item"> |
||||||
<p> |
<span class="info-label"> |
||||||
<span>生产商名称:</span> |
<i class="fas fa-heartbeat"></i> 运行状态 |
||||||
<span>待开发</span> |
</span> |
||||||
</p> |
<span class="info-value">运行正常</span> |
||||||
<p> |
</div> |
||||||
<span>供货商名称:</span> |
</div> |
||||||
<span>待开发</span> |
|
||||||
</p> |
|
||||||
<p> |
<!-- 设备基本信息 --> |
||||||
<span>出厂日期:</span> |
<div class="device-info"> |
||||||
<span>待开发</span> |
<div class="info-title">设备基本信息</div> |
||||||
</p> |
<div class="info-item"> |
||||||
<p> |
<span class="info-label"> |
||||||
<span>质保时间:</span> |
<i class="fas fa-layer-group"></i> 设备级别 |
||||||
<span>待开发</span> |
</span> |
||||||
</p> |
<span class="info-value">A级</span> |
||||||
<p> |
</div> |
||||||
<span>联系人:</span> |
<div class="info-item"> |
||||||
<span>待开发</span> |
<span class="info-label"> |
||||||
</p> |
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||||
<p> |
</span> |
||||||
<span>联系电话:</span> |
<span class="info-value">数据中心-主柜</span> |
||||||
<span>待开发</span> |
</div> |
||||||
</p> |
<div class="info-item"> |
||||||
</el-col> |
<span class="info-label"> |
||||||
<el-col :span="4"> |
<i class="fas fa-tag"></i> 品牌型号 |
||||||
<h3>设备管理信息</h3> |
</span> |
||||||
<p> |
<span class="info-value">Cisco</span> |
||||||
<span>带外IP管理:</span> |
</div> |
||||||
<span>待开发</span> |
<div class="info-item"> |
||||||
</p> |
<span class="info-label"> |
||||||
<p> |
<i class="fas fa-heartbeat"></i> 运行状态 |
||||||
<span>安装位置:</span> |
</span> |
||||||
<span>待开发</span> |
<span class="info-value">运行正常</span> |
||||||
</p> |
</div> |
||||||
<p> |
</div> |
||||||
<span>安装日期:</span> |
|
||||||
<span>待开发</span> |
|
||||||
</p> |
<!-- 设备基本信息 --> |
||||||
<p> |
<div class="device-info"> |
||||||
<span>服役年限:</span> |
<div class="info-title">设备基本信息</div> |
||||||
<span>待开发</span> |
<div class="info-item"> |
||||||
</p> |
<span class="info-label"> |
||||||
<p> |
<i class="fas fa-layer-group"></i> 设备级别 |
||||||
<span>管理员:</span> |
</span> |
||||||
<span>待开发</span> |
<span class="info-value">A级</span> |
||||||
</p> |
</div> |
||||||
</el-col> |
<div class="info-item"> |
||||||
<el-col :span="4"> |
<span class="info-label"> |
||||||
<h3>设备状态信息</h3> |
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||||
<p> |
</span> |
||||||
<span>累计预警次数:</span> |
<span class="info-value">数据中心-主柜</span> |
||||||
<span>待开发</span> |
</div> |
||||||
</p> |
<div class="info-item"> |
||||||
<p> |
<span class="info-label"> |
||||||
<span>累计维修次数:</span> |
<i class="fas fa-tag"></i> 品牌型号 |
||||||
<span>待开发</span> |
</span> |
||||||
</p> |
<span class="info-value">Cisco</span> |
||||||
</el-col> |
</div> |
||||||
</el-row> |
<div class="info-item"> |
||||||
</el-card> |
<span class="info-label"> |
||||||
</el-col> |
<i class="fas fa-heartbeat"></i> 运行状态 |
||||||
</el-row> |
</span> |
||||||
<el-row class="mt10" :gutter="10"> |
<span class="info-value">运行正常</span> |
||||||
<el-col :span="12"> |
</div> |
||||||
<el-card :style="{height: '500px'}"> |
</div> |
||||||
<el-row> |
<!-- 设备基本信息 --> |
||||||
<el-col :span="24" class="flex alignItems gap10"> |
<div class="device-info"> |
||||||
<h3>设备运行数据</h3> |
<div class="info-title">设备基本信息</div> |
||||||
<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> |
<div class="info-item"> |
||||||
</el-col> |
<span class="info-label"> |
||||||
<el-col :span="14"> |
<i class="fas fa-layer-group"></i> 设备级别 |
||||||
<el-row> |
</span> |
||||||
<el-col :span="12"> |
<span class="info-value">A级</span> |
||||||
<LineChart></LineChart> |
</div> |
||||||
</el-col> |
<div class="info-item"> |
||||||
<el-col :span="12"> |
<span class="info-label"> |
||||||
<LineChart></LineChart> |
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||||
</el-col> |
</span> |
||||||
</el-row> |
<span class="info-value">数据中心-主柜</span> |
||||||
<el-row> |
</div> |
||||||
<el-col :span="12"> |
<div class="info-item"> |
||||||
<LineChart></LineChart> |
<span class="info-label"> |
||||||
</el-col> |
<i class="fas fa-tag"></i> 品牌型号 |
||||||
<el-col :span="12"> |
</span> |
||||||
<LineChart></LineChart> |
<span class="info-value">Cisco</span> |
||||||
</el-col> |
</div> |
||||||
</el-row> |
<div class="info-item"> |
||||||
</el-col> |
<span class="info-label"> |
||||||
<el-col :span="10"> |
<i class="fas fa-heartbeat"></i> 运行状态 |
||||||
<el-row> |
</span> |
||||||
<el-col :span="12"> |
<span class="info-value">运行正常</span> |
||||||
<BarChart height="200px" :dateRange="dateRange"></BarChart> |
</div> |
||||||
</el-col> |
</div> |
||||||
<el-col :span="12"> |
</div> |
||||||
<BarChart height="200px" :dateRange="dateRange"></BarChart> |
</div> |
||||||
</el-col> |
</div> |
||||||
</el-row> |
|
||||||
<el-row> |
<!-- 下层：图表加参数 --> |
||||||
<el-col :span="8"> |
<div class="bottom-section"> |
||||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
<!-- 左侧图表 --> |
||||||
</el-col> |
<div class="card"> |
||||||
<el-col :span="8"> |
<div class="card-header"> |
||||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
<h2 class="card-title"> |
||||||
</el-col> |
<i class="fas fa-chart-bar"></i> |
||||||
<el-col :span="8"> |
设备运行数据 |
||||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
</h2> |
||||||
</el-col> |
<el-date-picker |
||||||
</el-row> |
v-model="daterange" |
||||||
</el-col> |
type="daterange" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始日期" |
||||||
</el-row> |
end-placeholder="结束日期"> |
||||||
</el-card> |
</el-date-picker> |
||||||
</el-col> |
</div> |
||||||
<el-col :span="12"> |
|
||||||
<el-card :style="{height: '500px'}"> |
<div class="chart-container" id="performanceChart"></div> |
||||||
<el-tabs v-model="selectedTab"> |
<div class="chart-container" id="trafficChart"></div> |
||||||
<el-tab-pane label="历史预警" :name="1"> |
</div> |
||||||
历史预警 |
|
||||||
</el-tab-pane> |
<!-- 右侧参数 --> |
||||||
<el-tab-pane label="接口信息" :name="2"> |
<div class="card"> |
||||||
接口信息 |
<div class="card-header"> |
||||||
</el-tab-pane> |
<div class="tab-top"> |
||||||
<el-tab-pane label="其他指标" :name="3"> |
<div class="top-item" v-for="(i,k) in tabs" :key="k" :class="k == tabIndex ?'ac':''" @click="tabIndex = k"> |
||||||
其他指标 |
<span>{{ i.name }}</span> |
||||||
</el-tab-pane> |
</div> |
||||||
</el-tabs> |
</div> |
||||||
</el-card> |
</div> |
||||||
</el-col> |
|
||||||
</el-row> |
<div class="metrics-grid"> |
||||||
|
<div class="bottom-item" v-if="tabIndex == 0"> |
||||||
|
<History/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
|
||||||
import BarChart from './BarChart1.vue' |
import * as echarts from 'echarts' |
||||||
import LineChart from './LineChart.vue' |
require('echarts/theme/macarons') // echarts theme |
||||||
import BarChart2 from './BarChart2.vue' |
import History from './history.vue' |
||||||
export default { |
export default { |
||||||
name: "cardItem", |
name: "cardItem", |
||||||
components: { BarChart, BarChart2, LineChart }, |
components: { History }, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
dateRange: [], |
dateRange: [], |
||||||
selectedTab: 1 |
selectedTab: 1, |
||||||
|
tabs: [ |
||||||
|
{ name: '历史预警' }, |
||||||
|
{ name: '接口信息' }, |
||||||
|
{ name: 'VLAN信息' }, |
||||||
|
{ name: '路由表信息' }, |
||||||
|
], |
||||||
|
tabIndex: 0, |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
} |
||||||
}, |
}, |
||||||
created() { |
mounted() { |
||||||
|
this.initCharts(); |
||||||
}, |
}, |
||||||
methods: { |
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> |
</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; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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> |
</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