forked from dyf/dyf-vue-ui
增加首页样式
This commit is contained in:
微微一笑
@ -1,36 +1,404 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :lg="12">
|
||||
<div class="kfzIMG">
|
||||
<img src="@/assets/images/kfz.png" alt="" class="kfIMG">
|
||||
<p>功能开发中....敬请期待</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 面包屑导航 -->
|
||||
<el-breadcrumb separator="/" class="breadcrumb">
|
||||
<el-breadcrumb-item>
|
||||
<span class="breadcrumb-dot active"></span>
|
||||
首页
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>
|
||||
<span class="breadcrumb-dot"></span>
|
||||
设备管理
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<!-- 数据总览卡片 -->
|
||||
<el-card class="data-overview-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">数据总览</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
|
||||
<div class="data-item">
|
||||
<div class="data-icon" :style="{ backgroundColor: item.color }">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="data-value">{{ item.value }}</div>
|
||||
<div class="data-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 设备统计卡片 -->
|
||||
<el-row :gutter="20" class="device-stats">
|
||||
<el-col :span="12">
|
||||
<el-card class="device-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">蓝牙设备</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8" v-for="(item, index) in bluetoothStats" :key="index">
|
||||
<div class="device-item">
|
||||
<div class="device-value">{{ item.value }}</div>
|
||||
<div class="device-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="device-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">4G设备</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8" v-for="(item, index) in g4Stats" :key="index">
|
||||
<div class="device-item">
|
||||
<div class="device-value">{{ item.value }}</div>
|
||||
<div class="device-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
|
||||
<!-- 地区分布图表 -->
|
||||
<el-card class="region-chart-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">设备使用频次地区分布</span>
|
||||
<div class="chart-controls">
|
||||
<el-select v-model="selectedMonth" placeholder="选择月份" size="small">
|
||||
<el-option label="7月" value="7"></el-option>
|
||||
<el-option label="8月" value="8"></el-option>
|
||||
<el-option label="9月" value="9"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="selectedYear" placeholder="选择年份" size="small">
|
||||
<el-option label="2025年" value="2025"></el-option>
|
||||
<el-option label="2024年" value="2024"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-bars">
|
||||
<div
|
||||
v-for="(region, index) in regionData"
|
||||
:key="index"
|
||||
class="chart-bar-item"
|
||||
>
|
||||
<div class="bar-label">{{ region.name }}</div>
|
||||
<div class="bar-container">
|
||||
<div
|
||||
class="bar"
|
||||
:style="{
|
||||
height: (region.value / maxValue) * 200 + 'px',
|
||||
backgroundColor: region.color
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="bar-value">{{ region.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-nav">
|
||||
<el-button type="text" size="small">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Index" lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import {
|
||||
Monitor,
|
||||
Connection,
|
||||
Warning,
|
||||
Plus,
|
||||
Bell,
|
||||
ArrowRight
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
// 数据总览
|
||||
const dataOverview = ref([
|
||||
{ label: '设备总量', value: '1,234', icon: 'Monitor', color: '#409eff' },
|
||||
{ label: '在线设备', value: '987', icon: 'Connection', color: '#67c23a' },
|
||||
{ label: '异常设备', value: '45', icon: 'Warning', color: '#e6a23c' },
|
||||
{ label: '新增绑定', value: '23', icon: 'Plus', color: '#f56c6c' },
|
||||
{ label: '设备报警', value: '12', icon: 'Bell', color: '#909399' }
|
||||
])
|
||||
|
||||
// 蓝牙设备统计
|
||||
const bluetoothStats = ref([
|
||||
{ label: '总量', value: '856' },
|
||||
{ label: '在线', value: '723' },
|
||||
{ label: '新增绑定', value: '15' }
|
||||
])
|
||||
|
||||
// 4G设备统计
|
||||
const g4Stats = ref([
|
||||
{ label: '总量', value: '378' },
|
||||
{ label: '在线', value: '264' },
|
||||
{ label: '新增绑定', value: '8' }
|
||||
])
|
||||
|
||||
// 地区分布数据
|
||||
const regionData = ref([
|
||||
{ name: '北京', value: 156, color: '#409eff' },
|
||||
{ name: '上海', value: 134, color: '#67c23a' },
|
||||
{ name: '杭州', value: 98, color: '#e6a23c' }
|
||||
])
|
||||
|
||||
// 计算最大值用于图表比例
|
||||
const maxValue = computed(() => {
|
||||
return Math.max(...regionData.value.map(item => item.value))
|
||||
})
|
||||
|
||||
// 选择器数据
|
||||
const selectedMonth = ref('7')
|
||||
const selectedYear = ref('2025')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
.kfzIMG {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 100%);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 0;
|
||||
|
||||
.breadcrumb-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
background-color: #c0c4cc;
|
||||
|
||||
&.active {
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kfIMG {
|
||||
width: 60%;
|
||||
.data-overview-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.data-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
flex: 1;
|
||||
|
||||
.data-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-stats {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.device-card {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.device-item {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
|
||||
.device-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #409eff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.device-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.region-chart-card {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
min-height: 250px;
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 40px;
|
||||
flex: 1;
|
||||
|
||||
.chart-bar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.bar-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
width: 60px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
width: 100%;
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: scaleY(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-divider--horizontal{
|
||||
border: none;
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.home {
|
||||
padding: 10px;
|
||||
|
||||
.data-overview-card {
|
||||
.data-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-stats {
|
||||
.el-col {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.region-chart-card {
|
||||
.chart-container {
|
||||
.chart-bars {
|
||||
gap: 20px;
|
||||
|
||||
.chart-bar-item {
|
||||
.bar-container {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user