Merge branch 'dev' of https://gitea.wangzhiwen.top/0214/ALOps_sys1 into dev
# Conflicts: # ALOps_sys_backend/alops-admin/src/main/resources/application-druid.yml # ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquBase.java # ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquBaseMapper.xmldev
commit
de8ba8304b
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 38 KiB |
@ -0,0 +1,185 @@ |
||||
<template> |
||||
<div class="dashboard"> |
||||
<h1>唐山烟草智能网络设备运维与问答系统</h1> |
||||
|
||||
<el-row :gutter="20"> |
||||
<!-- 设备状态监控 --> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>设备状态监控</h2> |
||||
<!-- 这里可以添加设备状态监控的具体内容，例如表格或图表 --> |
||||
<el-table :data="deviceStatusData" style="width: 100%"> |
||||
<el-table-column prop="name" label="设备名称"></el-table-column> |
||||
<el-table-column prop="location" label="设备位置"></el-table-column> |
||||
<el-table-column prop="cpuUsage" label="CPU使用率"></el-table-column> |
||||
<el-table-column prop="memoryUsage" label="内存使用率"></el-table-column> |
||||
<el-table-column prop="status" label="状态"> |
||||
<template slot-scope="scope"> |
||||
<el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'"> |
||||
{{ scope.row.status }} |
||||
</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<!-- 设备状态统计图表 --> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>检测设备信息 (按状态统计，饼状图)</h2> |
||||
<!-- 这里可以使用echarts或其他图表库来展示饼状图 --> |
||||
<div id="statusChart" style="width: 100%; height: 300px;"></div> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>检测设备信息 (按设备类型，饼状图)</h2> |
||||
<div id="typeChart" style="width: 100%; height: 300px;"></div> |
||||
</el-card> |
||||
</el-col> |
||||
<!-- 设备预警信息 --> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>设备预警信息</h2> |
||||
<el-table :data="alertData" style="width: 100%"> |
||||
<el-table-column prop="time" label="预警时间"></el-table-column> |
||||
<el-table-column prop="device" label="设备名称"></el-table-column> |
||||
<el-table-column prop="location" label="设备位置"></el-table-column> |
||||
<el-table-column prop="level" label="预警等级"> |
||||
<template slot-scope="scope"> |
||||
<el-tag :type="getTagType(scope.row.level)"> |
||||
{{ scope.row.level }} |
||||
</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<!-- 预警信息统计 --> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>预警信息统计</h2> |
||||
<div id="alertStatsChart" style="width: 100%; height: 300px;"></div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from 'echarts' |
||||
require('echarts/theme/macarons') // echarts theme |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
deviceStatusData: [ |
||||
// 示例数据 |
||||
{ name: '设备1', location: '位置1', cpuUsage: '30%', memoryUsage: '40%', status: '正常' }, |
||||
{ name: '设备2', location: '位置2', cpuUsage: '70%', memoryUsage: '80%', status: '异常' }, |
||||
], |
||||
alertData: [ |
||||
// 示例数据 |
||||
{ time: '2023-10-01 10:00:00', device: '设备2', location: '位置2', level: '高' }, |
||||
{ time: '2023-10-01 11:00:00', device: '设备3', location: '位置3', level: '中' }, |
||||
], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initCharts(); |
||||
}, |
||||
methods: { |
||||
getTagType(level) { |
||||
const types = { '高': 'danger', '中': 'warning', '低': 'success' }; |
||||
return types[level] || 'info'; |
||||
}, |
||||
initCharts() { |
||||
// 初始化状态统计图表 |
||||
const statusChart = echarts.init(document.getElementById('statusChart')); |
||||
statusChart.setOption({ |
||||
title: { text: '设备状态统计', subtext: '按状态', left: 'center' }, |
||||
tooltip: { trigger: 'item' }, |
||||
series: [ |
||||
{ |
||||
name: '设备状态', |
||||
type: 'pie', |
||||
radius: '50%', |
||||
data: [ |
||||
{ value: 44, name: '自主房屋' }, |
||||
{ value: 33, name: '出租房屋' }, |
||||
{ value: 11, name: '空置房屋' }, |
||||
{ value: 11, name: '其他' }, |
||||
], |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
// 初始化设备类型统计图表 |
||||
const typeChart = echarts.init(document.getElementById('typeChart')); |
||||
typeChart.setOption({ |
||||
title: { text: '设备类型统计', subtext: '按设备类型', left: 'center' }, |
||||
tooltip: { trigger: 'item' }, |
||||
series: [ |
||||
{ |
||||
name: '设备类型', |
||||
type: 'pie', |
||||
radius: '50%', |
||||
data: [ |
||||
{ value: 44, name: '自主房屋' }, |
||||
{ value: 33, name: '出租房屋' }, |
||||
{ value: 11, name: '空置房屋' }, |
||||
{ value: 11, name: '其他' }, |
||||
], |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
// 初始化预警信息统计图表 |
||||
const alertStatsChart = echarts.init(document.getElementById('alertStatsChart')); |
||||
alertStatsChart.setOption({ |
||||
title: { text: '预警信息统计', left: 'center' }, |
||||
tooltip: {}, |
||||
radar: { |
||||
indicator: [ |
||||
{ name: '火警类', max: 500 }, |
||||
{ name: '冲禁类', max: 500 }, |
||||
{ name: '灾害', max: 500 }, |
||||
{ name: '群体性', max: 500 }, |
||||
{ name: '行政类', max: 500 }, |
||||
{ name: '交通类', max: 500 }, |
||||
{ name: '重大', max: 500 }, |
||||
], |
||||
}, |
||||
series: [{ |
||||
name: '预警统计', |
||||
type: 'radar', |
||||
data: [ |
||||
{ |
||||
value: [75, 452, 64, 94, 44, 0, 29], |
||||
name: '预警次数', |
||||
}, |
||||
], |
||||
}], |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
.dashboard { |
||||
padding: 20px; |
||||
background-color: #f0f2f5; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
h1, h2 { |
||||
text-align: center; |
||||
} |
||||
|
||||
.el-card { |
||||
margin-bottom: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,657 @@ |
||||
<template> |
||||
<div class="dashboard-container"> |
||||
<div class="dashboard-body"> |
||||
<!-- 左侧面板 --> |
||||
<div class="left-panel"> |
||||
<!-- 数据概览 --> |
||||
<div class="dashboard-card"> |
||||
<div class="card-title"><i class="el-icon-data-line"></i>预警信息统计</div> |
||||
<div class="data-overview"> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 柱状图 --> |
||||
<div class="dashboard-card"> |
||||
<div class="card-title"><i class="el-icon-s-data"></i> 设备状态监控</div> |
||||
<div class="chart-container"> |
||||
<dv-scroll-board :config="scrollConfig" style="width:500px;height:280px" /> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<!-- 中间地图面板 --> |
||||
<div class="map-panel"> |
||||
<div class="dashboard-card" style="flex: 1;"> |
||||
<div class="card-title"><i class="el-icon-map-location"></i> 智慧城市地理分布</div> |
||||
<div class="map-container" ref="mapChart"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 右侧面板 --> |
||||
<div class="right-panel"> |
||||
<!-- 实时数据 --> |
||||
<div class="dashboard-card"> |
||||
<div class="card-title"><i class="el-icon-monitor"></i> 实时监测</div> |
||||
<div class="data-overview"> |
||||
<div class="data-item"> |
||||
<div class="data-label">交通流量</div> |
||||
<div class="data-value">86,542</div> |
||||
<div class="data-trend">↑ 12.5%</div> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">能耗指数</div> |
||||
<div class="data-value">2,356</div> |
||||
<div class="data-trend down">↓ 3.2%</div> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">空气质量</div> |
||||
<div class="data-value">优良</div> |
||||
<div class="data-trend">→ 稳定</div> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">治安指数</div> |
||||
<div class="data-value">98.7%</div> |
||||
<div class="data-trend">↑ 0.5%</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 饼图 --> |
||||
<div class="dashboard-card"> |
||||
<div class="card-title"><i class="el-icon-pie-chart"></i> 人口结构</div> |
||||
<div class="chart-container" ref="populationChart"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import digital from './dashboard/digital' |
||||
export default { |
||||
components: { |
||||
digital |
||||
}, |
||||
data() { |
||||
return { |
||||
scrollConfig:{ |
||||
header: ['设备名称', '设备位置', 'CPU使用率','内存使用率'], |
||||
data: [ |
||||
['行1列1', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6','行1列7', '行1列8'], |
||||
['行2列1', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6','行2列7', '行2列8'], |
||||
['行3列1', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6','行3列7', '行3列8'], |
||||
['行4列1', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6','行4列7', '行4列8'], |
||||
['行5列1', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6','行5列7', '行5列8'], |
||||
['行6列1', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6','行6列7', '行6列8'], |
||||
['行7列1', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6','行7列7', '行7列8'], |
||||
['行8列1', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6','行8列7', '行8列8'], |
||||
['行9列1', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6','行9列7', '行9列8'], |
||||
['行10列1', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6','行10列7', '行10列8'] |
||||
|
||||
] |
||||
}, |
||||
|
||||
|
||||
|
||||
currentTime: '', |
||||
currentDate: '', |
||||
districtRanking: [ |
||||
{ name: '高新区', value: 856 }, |
||||
{ name: '经济开发区', value: 732 }, |
||||
{ name: '西湖区', value: 698 }, |
||||
{ name: '东海区', value: 645 }, |
||||
{ name: '滨江区', value: 587 } |
||||
], |
||||
industryChart: null, |
||||
populationChart: null, |
||||
economyChart: null, |
||||
mapChart: null |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.updateTime(); |
||||
setInterval(this.updateTime, 1000); |
||||
|
||||
this.$nextTick(() => { |
||||
this.initCharts(); |
||||
}); |
||||
|
||||
// 窗口调整时重新渲染图表 |
||||
window.addEventListener('resize', this.resizeCharts); |
||||
}, |
||||
beforeDestroy() { |
||||
window.removeEventListener('resize', this.resizeCharts); |
||||
}, |
||||
methods: { |
||||
formatter1 (number) { |
||||
const numbers = number.toString().split('').reverse() |
||||
const segs = [] |
||||
while (numbers.length) segs.push(numbers.splice(0, 3).join('')) |
||||
return segs.join(',').split('').reverse().join('') |
||||
}, |
||||
updateTime() { |
||||
const now = new Date(); |
||||
this.currentTime = now.toLocaleTimeString(); |
||||
this.currentDate = now.toLocaleDateString('zh-CN', { |
||||
year: 'numeric', |
||||
month: 'long', |
||||
day: 'numeric', |
||||
weekday: 'long' |
||||
}); |
||||
}, |
||||
initCharts() { |
||||
// 初始化产业分布柱状图 |
||||
this.industryChart = echarts.init(this.$refs.industryChart); |
||||
this.industryChart.setOption({ |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
||||
borderColor: '#4e9ff7', |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
top: '10%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['高新技术', '制造业', '金融业', '服务业', '农业'], |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#5d92d0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#3d3d3d' |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#5d92d0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#3d3d3d' |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: 'rgba(93, 146, 208, 0.2)' |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '产值(亿元)', |
||||
type: 'bar', |
||||
data: [320, 185, 195, 150, 85], |
||||
itemStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: '#4e9ff7' }, |
||||
{ offset: 1, color: '#8bd6ff' } |
||||
]) |
||||
}, |
||||
label: { |
||||
show: true, |
||||
position: 'top', |
||||
color: '#3d3d3d' |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
|
||||
// 初始化人口结构饼图 |
||||
this.populationChart = echarts.init(this.$refs.populationChart); |
||||
this.populationChart.setOption({ |
||||
tooltip: { |
||||
trigger: 'item', |
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
||||
borderColor: '#4e9ff7', |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
legend: { |
||||
orient: 'vertical', |
||||
right: 10, |
||||
top: 'center', |
||||
textStyle: { |
||||
color: '#3d3d3d' |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '人口结构', |
||||
type: 'pie', |
||||
radius: ['40%', '70%'], |
||||
avoidLabelOverlap: false, |
||||
itemStyle: { |
||||
borderRadius: 10, |
||||
borderColor: '#0a1d35', |
||||
borderWidth: 2 |
||||
}, |
||||
label: { |
||||
show: false, |
||||
position: 'center' |
||||
}, |
||||
emphasis: { |
||||
label: { |
||||
show: true, |
||||
fontSize: '14', |
||||
fontWeight: 'bold', |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
labelLine: { |
||||
show: false |
||||
}, |
||||
data: [ |
||||
{ value: 245, name: '0-18岁' }, |
||||
{ value: 520, name: '19-35岁' }, |
||||
{ value: 395, name: '36-60岁' }, |
||||
{ value: 198, name: '60岁以上' } |
||||
], |
||||
color: ['#4e9ff7', '#5d92d0', '#6b88b2', '#7a7e95'] |
||||
} |
||||
] |
||||
}); |
||||
|
||||
// 初始化经济趋势折线图 |
||||
this.economyChart = echarts.init(this.$refs.economyChart); |
||||
this.economyChart.setOption({ |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
||||
borderColor: '#4e9ff7', |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
top: '10%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#5d92d0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#3d3d3d' |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#5d92d0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#3d3d3d', |
||||
formatter: '{value} 亿' |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: 'rgba(93, 146, 208, 0.2)' |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: 'GDP增长', |
||||
type: 'line', |
||||
smooth: true, |
||||
data: [320, 332, 301, 334, 390, 330, 320, 342, 361, 384, 410, 432], |
||||
itemStyle: { |
||||
color: '#4e9ff7' |
||||
}, |
||||
areaStyle: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
{ offset: 0, color: 'rgba(78, 159, 247, 0.6)' }, |
||||
{ offset: 1, color: 'rgba(78, 159, 247, 0.1)' } |
||||
]) |
||||
}, |
||||
markPoint: { |
||||
data: [ |
||||
{ type: 'max', name: '最高值' }, |
||||
{ type: 'min', name: '最低值' } |
||||
] |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
|
||||
// 初始化地图 |
||||
this.mapChart = echarts.init(this.$refs.mapChart); |
||||
this.mapChart.setOption({ |
||||
tooltip: { |
||||
trigger: 'item', |
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
||||
borderColor: '#4e9ff7', |
||||
textStyle: { |
||||
color: '#fff' |
||||
}, |
||||
formatter: function(params) { |
||||
return `${params.name}<br/>发展指数: ${params.value}`; |
||||
} |
||||
}, |
||||
visualMap: { |
||||
min: 0, |
||||
max: 1000, |
||||
text: ['高', '低'], |
||||
realtime: false, |
||||
calculable: true, |
||||
inRange: { |
||||
color: ['#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#fee090', '#fdae61', '#f46d43', '#d73027'] |
||||
}, |
||||
textStyle: { |
||||
color: '#3d3d3d' |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '发展指数', |
||||
type: 'map', |
||||
map: 'china', |
||||
emphasis: { |
||||
label: { |
||||
show: true, |
||||
color: '#fff' |
||||
}, |
||||
itemStyle: { |
||||
areaColor: '#3498db' |
||||
} |
||||
}, |
||||
data: [ |
||||
{ name: '北京', value: 1000 }, |
||||
{ name: '天津', value: 800 }, |
||||
{ name: '上海', value: 950 }, |
||||
{ name: '重庆', value: 700 }, |
||||
{ name: '河北', value: 600 }, |
||||
{ name: '山西', value: 550 }, |
||||
{ name: '辽宁', value: 650 }, |
||||
{ name: '吉林', value: 580 }, |
||||
{ name: '江苏', value: 850 }, |
||||
{ name: '浙江', value: 820 }, |
||||
{ name: '安徽', value: 630 }, |
||||
{ name: '福建', value: 720 }, |
||||
{ name: '江西', value: 590 }, |
||||
{ name: '山东', value: 780 }, |
||||
{ name: '河南', value: 680 }, |
||||
{ name: '湖北', value: 710 }, |
||||
{ name: '湖南', value: 690 }, |
||||
{ name: '广东', value: 900 }, |
||||
{ name: '海南', value: 620 }, |
||||
{ name: '四川', value: 730 }, |
||||
{ name: '贵州', value: 580 }, |
||||
{ name: '云南', value: 610 }, |
||||
{ name: '陕西', value: 670 }, |
||||
{ name: '甘肃', value: 540 }, |
||||
{ name: '青海', value: 500 }, |
||||
{ name: '台湾', value: 750 }, |
||||
{ name: '内蒙古', value: 560 }, |
||||
{ name: '广西', value: 610 }, |
||||
{ name: '宁夏', value: 530 }, |
||||
{ name: '新疆', value: 550 }, |
||||
{ name: '西藏', value: 480 }, |
||||
{ name: '香港', value: 880 }, |
||||
{ name: '澳门', value: 780 }, |
||||
{ name: '黑龙江', value: 610 } |
||||
], |
||||
itemStyle: { |
||||
areaColor: 'rgba(93, 146, 208, 0.3)', |
||||
borderColor: '#5d92d0', |
||||
borderWidth: 1 |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
}, |
||||
resizeCharts() { |
||||
if (this.industryChart) this.industryChart.resize(); |
||||
if (this.populationChart) this.populationChart.resize(); |
||||
if (this.economyChart) this.economyChart.resize(); |
||||
if (this.mapChart) this.mapChart.resize(); |
||||
}, |
||||
refreshData() { |
||||
this.$message({ |
||||
message: '数据刷新中...', |
||||
type: 'info', |
||||
customClass: 'message-box' |
||||
}); |
||||
|
||||
// 模拟数据刷新 |
||||
setTimeout(() => { |
||||
this.$message({ |
||||
message: '数据已更新到最新状态', |
||||
type: 'success', |
||||
customClass: 'message-box' |
||||
}); |
||||
|
||||
// 这里可以添加实际的数据更新逻辑 |
||||
this.initCharts(); |
||||
}, 1000); |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.dashboard-container { |
||||
width: 100%; |
||||
// height: 100vh; |
||||
padding: 20px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
|
||||
.dashboard-body { |
||||
flex: 1; |
||||
display: flex; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.left-panel, .right-panel { |
||||
width: 35%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.map-panel { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.dashboard-card { |
||||
border-radius: 10px; |
||||
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4); |
||||
padding: 15px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
overflow: hidden; |
||||
border: 1px solid rgba(100, 180, 246, 0.15); |
||||
backdrop-filter: blur(5px); |
||||
} |
||||
|
||||
// .dashboard-card::before { |
||||
// content: ''; |
||||
// position: absolute; |
||||
// top: 0; |
||||
// left: 0; |
||||
// right: 0; |
||||
// height: 3px; |
||||
// background: linear-gradient(90deg, #4e9ff7, #8bd6ff); |
||||
// } |
||||
|
||||
.card-title { |
||||
font-size: 16px; |
||||
margin-bottom: 15px; |
||||
display: flex; |
||||
align-items: center; |
||||
color: #3d3d3d; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.card-title i { |
||||
margin-right: 8px; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.chart-container { |
||||
flex: 1; |
||||
width: 100%; |
||||
min-height: 200px; |
||||
} |
||||
|
||||
.map-container { |
||||
flex: 1; |
||||
width: 100%; |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.data-overview { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.data-item { |
||||
flex: 1; |
||||
min-width: 45%; |
||||
text-align: center; |
||||
padding: 15px 10px; |
||||
background: rgba(38, 84, 139, 0.3); |
||||
border-radius: 8px; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.data-item:hover { |
||||
background: rgba(38, 84, 139, 0.5); |
||||
transform: translateY(-3px); |
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
.data-value { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
margin: 10px 0; |
||||
color: #3d3d3d; |
||||
} |
||||
|
||||
.data-label { |
||||
font-size: 14px; |
||||
color: #3d3d3d; |
||||
} |
||||
|
||||
.data-trend { |
||||
font-size: 12px; |
||||
color: #3d3d3d; |
||||
} |
||||
|
||||
.data-trend.down { |
||||
color: #3d3d3d; |
||||
} |
||||
|
||||
.footer { |
||||
text-align: center; |
||||
padding: 15px; |
||||
color: #3d3d3d; |
||||
font-size: 14px; |
||||
border-top: 1px solid rgba(255, 255, 255, 0.1); |
||||
height: 50px; |
||||
} |
||||
|
||||
/* 动画效果 */ |
||||
@keyframes fadeIn { |
||||
from { opacity: 0; transform: translateY(20px); } |
||||
to { opacity: 1; transform: translateY(0); } |
||||
} |
||||
|
||||
.dashboard-card { |
||||
animation: fadeIn 0.8s ease-out; |
||||
} |
||||
|
||||
/* 响应式调整 */ |
||||
@media (max-width: 1200px) { |
||||
.left-panel, .right-panel { |
||||
width: 30%; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 992px) { |
||||
.dashboard-body { |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.left-panel, .right-panel { |
||||
width: 100%; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.dashboard-card { |
||||
flex: 1; |
||||
} |
||||
|
||||
.map-panel { |
||||
order: -1; |
||||
height: 400px; |
||||
} |
||||
} |
||||
|
||||
/* 滚动条样式 */ |
||||
::-webkit-scrollbar { |
||||
width: 6px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-track { |
||||
background: rgba(255, 255, 255, 0.05); |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
background: rgba(78, 159, 247, 0.5); |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb:hover { |
||||
background: rgba(78, 159, 247, 0.7); |
||||
} |
||||
</style> |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue