liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

首页页面布局编写

Browse Source
This commit is contained in:
fengerli
2025-09-08 18:47:39 +08:00
parent 92e22812d7
commit b03d287dac
13 changed files with 577 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

693
src/views/index.vue
View File

@ -1,158 +1,271 @@
<template>
<div class="app-container home">
<!-- 面包屑导航 -->
<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>
<h1>数据总览</h1>
<div class="data-item">
<div class="data_bck">
<div class="number"><span>100</span> 个</div>
<div class="title_number">设备数量</div>
</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-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 class="data_green">
<div class="number"><span>100</span> 个</div>
<div class="title_number">在线设备</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 class="data_orgine">
<div class="number"><span>100</span> 个</div>
<div class="title_number">新增绑定</div>
</div>
<div class="chart-nav">
<el-button type="text" size="small">
<el-icon><ArrowRight /></el-icon>
</el-button>
<div class="data_red">
<div class="number"><span>100</span> 个</div>
<div class="title_number">异常设备</div>
</div>
</div>
</el-card>
<div>
<el-row :gutter="20">
<el-col :span="12">
<div class="content-row">
<h2>设备分类</h2>
<div class="card-header">
<!-- 循环渲染每个设备的进度条 -->
<div v-for="(item, index) in deviceList" :key="index" class="progress-item">
<el-progress :stroke-width="7" type="circle" :percentage="(item.current / item.total) * 100">
<!-- 自定义进度条内部内容：显示“分子/分母” -->
<template #default>
<div class="progress-text">
<span class="current">{{ item.current }}</span>
<span class="divider">/</span>
<span class="total">{{ item.total }}</span>
</div>
</template>
</el-progress>
<!-- 设备名称 -->
<div class="progress-name">{{ item.name }}</div>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="content-row">
<h2>快捷操作</h2>
<div class="card-header">
<div class="quick-item" @click="handledeviceTypeAdd">
<img src="../assets/index/device_type.png" class="quick-img" />
<div class="card_title">设备类型</div>
</div>
<div class="quick-item" @click="handledeviceAdd">
<img src="../assets/index/device_add.png" class="quick-img" />
<div class="card_title">设备添加</div>
</div>
<div class="quick-item" @click="handleGroup">
<img src="../assets/index/device_group.png" class="quick-img" />
<div class="card_title">分组管理</div>
</div>
<div class="quick-item" @click="handleControlPanel">
<img src="../assets/index/conton.png" class="quick-img" />
<div class="card_title">控制面板</div>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<!-- 左侧：设备使用频次 -->
<el-col :span="12">
<div class="region-chart-card">
<div class="card-header">
<h2>设备使用频次</h2>
<div class="chart-controls">
<el-select v-model="timeRange" placeholder="选择时间范围">
<el-option label="近半年" value="halfYear"></el-option>
<el-option label="近一年" value="oneYear"></el-option>
</el-select>
</div>
</div>
<div class="card-body">
<!-- 引入封装好的图表组件 -->
<DeviceFrequencyChart />
</div>
</div>
</el-col>
<!-- 右侧：报警信息 -->
<el-col :span="12">
<div class="region-chart-card">
<div class="card-header">
<h2>报警信息</h2>
</div>
<div class="card-body">
<el-row :gutter="16">
<!-- 报警总览 -->
<el-col :span="8">
<div class="alarm-overview">
<AlarmOverviewChart />
<div class="alarm-stats">
<div class="stat-item">
<span class="stat red">365</span>
<span class="label">报警总数</span>
</div>
<div class="stat-item">
<span class="stat green">300</span>
<span class="label">总处理报警</span>
</div>
</div>
</div>
</el-col>
<!-- 报警事项 -->
<el-col :span="16">
<div class="alarm-items">
<h3>报警事项</h3>
<AlarmItemsChart />
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- <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-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'
import router from '@/router';
import DeviceFrequencyChart from './workflow/components/DeviceFrequencyChart.vue';
import AlarmOverviewChart from './workflow/components/AlarmOverviewChart.vue';
import AlarmItemsChart from './workflow/components/AlarmItemsChart.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 deviceList = ref([
{ name: "4G设备", current: 25, total: 100 },
{ name: "蓝牙设备", current: 50, total: 200 },
{ name: "4G&蓝牙设备", current: 10, total: 40 },
]);
const timeRange = ref('halfYear');
// 设备类型
const handledeviceTypeAdd = () => {
router.push('/equipmentManagement/deviceType');
}
// 设备列表
const handledeviceAdd = () => {
router.push('/equipmentManagement/devices');
}
// 分组
const handleGroup = () => {
router.push('/equipmentManagement/group');
}
// 控制面板
const handleControlPanel = () => {
router.push('controlCenter/controlPanel');
}
// 蓝牙设备统计
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([
@ -161,6 +274,7 @@ const regionData = ref([
{ name: '杭州', value: 98, color: '#e6a23c' }
])
// 计算最大值用于图表比例
const maxValue = computed(() => {
return Math.max(...regionData.value.map(item => item.value))
@ -177,195 +291,180 @@ const selectedYear = ref('2025')
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;
}
}
}
.data-item {
display: flex;
align-items: center;
transition: all 0.3s ease;
justify-content: space-between;
width: 100%;
color: rgba(255, 255, 255, 1);
.data-overview-card {
margin-bottom: 20px;
.card-header {
display: flex;
justify-content: space-between;
.data_bck {
width: 280px;
height: 110px;
border-radius: 10px;
background: url('../assets/index/devices_online.png') no-repeat;
position: relative;
text-align: center;
background-size: 100%;
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;
.data_green {
width: 280px;
height: 110px;
border-radius: 10px;
background: url('../assets/index/online.png') no-repeat;
position: relative;
background-size: 100%;
text-align: center;
&: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_orgine {
width: 280px;
height: 110px;
border-radius: 10px;
background: url('../assets/index/add.png') no-repeat;
position: relative;
background-size: 100%;
text-align: center;
}
.data-content {
flex: 1;
.data_red {
width: 280px;
height: 110px;
border-radius: 10px;
background: url('../assets/index/device_yc.png') no-repeat;
position: relative;
background-size: 100%;
text-align: center;
}
.data-value {
font-size: 24px;
font-weight: 700;
color: #303133;
line-height: 1.2;
}
.number {
padding-top: 20px;
.data-label {
font-size: 14px;
color: #909399;
margin-top: 4px;
}
span {
font-size: 36px;
font-weight: 700;
}
}
}
.device-stats {
margin-bottom: 20px;
.content-row {
background-color: #fff;
height: 240px;
border-radius: 10px;
padding: 5px 25px 15px 25px;
margin-top: 20px;
}
.device-card {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.device-item {
text-align: center;
padding: 20px 0;
.card-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.device-value {
font-size: 28px;
font-weight: 700;
color: #409eff;
line-height: 1.2;
}
.progress-name {
text-align: center;
padding-top: 10px;
}
.device-label {
font-size: 14px;
color: #909399;
margin-top: 8px;
}
}
.card_title {
padding-top: 20px;
text-align: center;
}
.quick-item {
margin-top: 15px;
cursor: pointer;
}
.quick-img {
height: 90px;
width: 90px;
}
}
.region-chart-card {
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: 16px;
height: 100%;
}
.chart-controls {
display: flex;
gap: 12px;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.chart-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 20px 0;
min-height: 250px;
.card-header h2 {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0;
}
.chart-bars {
display: flex;
align-items: flex-end;
gap: 40px;
flex: 1;
.chart-controls {
display: flex;
gap: 8px;
}
.chart-bar-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
.card-body {
height: calc(100% - 50px);
}
.bar-label {
font-size: 14px;
color: #606266;
font-weight: 500;
}
.alarm-overview {
display: flex;
flex-direction: column;
align-items: center;
}
.bar-container {
width: 60px;
height: 200px;
display: flex;
align-items: flex-end;
position: relative;
.alarm-stats {
display: flex;
justify-content: space-around;
width: 100%;
margin-top: 8px;
}
.bar {
width: 100%;
border-radius: 4px 4px 0 0;
transition: all 0.3s ease;
position: relative;
.stat-item {
text-align: center;
}
&:hover {
transform: scaleY(1.05);
}
}
}
.stat {
font-size: 16px;
font-weight: bold;
display: block;
margin-bottom: 4px;
}
.bar-value {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
}
.stat.red {
color: #ff4d4f;
}
.chart-nav {
display: flex;
align-items: center;
padding-left: 20px;
}
}
.stat.green {
color: #36cbcb;
}
.label {
font-size: 12px;
color: #666;
}
.alarm-items h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
}