Merge branch 'main' of http://47.107.152.87:3000/liubiao/dyf-vue-ui
This commit is contained in:
liub
@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API = 'http://47.120.79.150/backend'
|
||||
#VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
||||
# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
|
||||
VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
||||
# VITE_APP_BASE_API = 'http://localhost:8000'
|
||||
|
||||
|
||||
|
||||
24
src/api/home/index.ts
Normal file
24
src/api/home/index.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
// 获取 数据总览 DataOverview
|
||||
export const getDataOverview = (params) => {
|
||||
return request({
|
||||
url: '/api/device/homepage/getDataOverview',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
};
|
||||
// 设备分类
|
||||
export const getEquipmentClassification = (params) => {
|
||||
return request({
|
||||
url: '/api/device/homepage/getEquipmentClassification',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export default {
|
||||
getDataOverview,
|
||||
getEquipmentClassification
|
||||
}
|
||||
6
src/api/home/types.ts
Normal file
6
src/api/home/types.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface DataOverviewType {
|
||||
devicesNumber: number | string;
|
||||
equipmentOnline: number | string;
|
||||
bindingNew: number | string;
|
||||
equipmentAbnormal: number | string;
|
||||
}
|
||||
BIN
src/assets/index/add.png
Normal file
BIN
src/assets/index/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/index/conton.png
Normal file
BIN
src/assets/index/conton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/assets/index/device_add.png
Normal file
BIN
src/assets/index/device_add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
src/assets/index/device_group.png
Normal file
BIN
src/assets/index/device_group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
src/assets/index/device_type.png
Normal file
BIN
src/assets/index/device_type.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/index/device_yc.png
Normal file
BIN
src/assets/index/device_yc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/index/devices_online.png
Normal file
BIN
src/assets/index/devices_online.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/index/online.png
Normal file
BIN
src/assets/index/online.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@ -229,7 +229,7 @@ const laserMode = ref<LightMode>({
|
||||
active: false
|
||||
});
|
||||
|
||||
const deviceDetail = ref<DeviceDetail>({
|
||||
const deviceDetail = ref<DeviceDetail & { typeName: string }>({
|
||||
// 重点：personnelInfo 初始化为空对象，避免 undefined
|
||||
personnelInfo: {
|
||||
unitName: '',
|
||||
@ -246,7 +246,9 @@ const deviceDetail = ref<DeviceDetail>({
|
||||
longitude: '',
|
||||
latitude: '',
|
||||
address: '',
|
||||
sendMsg: ''
|
||||
sendMsg: '',
|
||||
chargeState: '0',
|
||||
typeName: ''
|
||||
});
|
||||
// 保留原有的操作中标志位
|
||||
const isUpdatingStatus = ref(false);
|
||||
@ -429,7 +431,7 @@ const saveBtn = () => {
|
||||
// 强制报警
|
||||
const forceAlarm = async () => {
|
||||
try {
|
||||
await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '');
|
||||
await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
|
||||
forceAlarmLoading.value = true
|
||||
// 2. 准备请求数据
|
||||
const batchId = generateShortId();
|
||||
@ -586,7 +588,7 @@ const handleDeviceMessage = (msg: any) => {
|
||||
deviceDetail.value.batteryPercentage = deviceState[3]; //电量
|
||||
deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
|
||||
// getList(); // 重新获取设备详情
|
||||
if (deviceDetail.value.batteryPercentage < 20 && deviceDetail.value.chargeState == 0) {
|
||||
if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
|
||||
centerDialogVisible.value=true
|
||||
}
|
||||
break;
|
||||
|
||||
@ -64,6 +64,7 @@
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.communicationMode == 0">4G</div>
|
||||
<div v-if="scope.row.communicationMode == 1">蓝牙</div>
|
||||
<div v-if="scope.row.communicationMode == 2">4G&蓝牙</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
@ -105,7 +106,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="pc路由跳转" prop="pcModelDictionary" style="display: none;">
|
||||
<el-select v-model="form.pcModelDictionary" placeholder="请选择" >
|
||||
<el-select v-model="form.pcModelDictionary" placeholder="请选择">
|
||||
<el-option v-for="item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
|
||||
:value="item.dictValue" />
|
||||
</el-select>
|
||||
@ -141,6 +142,7 @@
|
||||
<el-select v-model="form.communicationMode" placeholder="请选择">
|
||||
<el-option label="4G" :value="0" />
|
||||
<el-option label="蓝牙" :value="1" />
|
||||
<el-option label="4G&蓝牙" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
@ -47,29 +47,34 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:add']" type="primary" plain icon="Plus"
|
||||
@click="handleAdd()">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
|
||||
<el-button v-hasPermi="['equipment:devices:edit']" type="success" plain :disabled="single" icon="Edit"
|
||||
@click="handleUpdate()">
|
||||
修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" :disabled="multiple" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain
|
||||
icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain :disabled="multiple" @click="handleDelete()">
|
||||
<el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple"
|
||||
@click="handleDelete()">
|
||||
批量删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain @click="handleBatchImport">
|
||||
<el-button v-hasPermi="['equipment:devices:import']" type="warning" plain @click="handleBatchImport">
|
||||
批量导入
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain :disabled="multiple" @click="handleBatchAssign">
|
||||
<el-button v-hasPermi="['equipment:devices:allocate']" type="warning" plain :disabled="multiple"
|
||||
@click="handleBatchAssign">
|
||||
批量分配客户
|
||||
</el-button>
|
||||
</el-col>
|
||||
@ -117,23 +122,26 @@
|
||||
|
||||
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
|
||||
|
||||
<el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:edit']" link type="primary" icon="Edit"
|
||||
@click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="!scope.row.customerName" content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:remove']" link type="primary" icon="Delete"
|
||||
@click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="scope.row.deviceStatus == 1 && !scope.row.customerName" content="分配" placement="top">
|
||||
<el-button link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:allocate']" link type="primary" icon="User"
|
||||
@click="handleAssign(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top">
|
||||
<el-button link type="primary" icon="UploadFilled" @click="handleWithdraw(scope.row)"></el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:revoke']" link type="primary" icon="UploadFilled"
|
||||
@click="handleWithdraw(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑"
|
||||
placement="top">
|
||||
<el-button link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh"
|
||||
@click="handleUnbind(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
|
||||
<el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
|
||||
@ -147,61 +155,7 @@
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
:total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div :class="Status.Mode == PageMode.detail ? '' : 'displayNone'" class="detailMain">
|
||||
<div class="tabContent">
|
||||
<div class="tabHeader">
|
||||
<div class="indexContent">
|
||||
|
||||
|
||||
<div class="tabIndex" :class="Status.tabActive == 1 ? 'active' : ''" @click="tabIndexChange(1)">
|
||||
设备信息
|
||||
</div>
|
||||
<div class="tabIndex" :class="Status.tabActive == 2 ? 'active' : ''" @click="tabIndexChange(2)">
|
||||
用户信息
|
||||
</div>
|
||||
<div class="tabIndex" :class="Status.tabActive == 3 ? 'active' : ''" @click="tabIndexChange(3)">
|
||||
操作记录
|
||||
</div>
|
||||
<div class="tabIndex" :class="Status.tabActive == 4 ? 'active' : ''" @click="tabIndexChange(4)">
|
||||
报警记录
|
||||
</div>
|
||||
<div class="tabIndex" :class="Status.tabActive == 5 ? 'active' : ''" @click="tabIndexChange(5)">
|
||||
分享管理
|
||||
</div>
|
||||
<div class="tabIndex" :class="Status.tabActive == 6 ? 'active' : ''" @click="tabIndexChange(6)">
|
||||
充放电
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabClose">
|
||||
<el-icon @click="closeDetail()" :size="20" :color="'#7787a4'">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tabItem" v-show="Status.tabActive == 1">
|
||||
<eqDetail :data="detailData" :acIndex="Status.tabActive" data-name="eqDetail"></eqDetail>
|
||||
</div>
|
||||
<div class="tabItem" v-show="Status.tabActive == 2">
|
||||
<Usr :data="detailData" :acIndex="Status.tabActive" data-name="Usr"></Usr>
|
||||
</div>
|
||||
<div class="tabItem" v-show="Status.tabActive == 3">
|
||||
<OpraRecored :data="detailData" :acIndex="Status.tabActive" data-name="OpraRecored"></OpraRecored>
|
||||
</div>
|
||||
<div class="tabItem" v-show="Status.tabActive == 4">
|
||||
<WarnRecord :data="detailData" :acIndex="Status.tabActive" data-name="WarnRecord"></WarnRecord>
|
||||
</div>
|
||||
<div class="tabItem" v-show="Status.tabActive == 5">
|
||||
<shareManage :data="detailData" :acIndex="Status.tabActive" data-name="shareManage"></shareManage>
|
||||
</div>
|
||||
<div class="tabItem" v-show="Status.tabActive == 6">
|
||||
<Charge :data="detailData" :acIndex="Status.tabActive" data-name="Charge"></Charge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加或修改用户配置对话框 -->
|
||||
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body
|
||||
@ -370,6 +324,7 @@ import WarnRecord from './WarnRecord.vue';
|
||||
import shareManage from './shareManage.vue';
|
||||
import Charge from './Charge.vue';
|
||||
|
||||
import router from '@/router';
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
||||
@ -609,7 +564,6 @@ const handleAdd = async () => {
|
||||
// 每次打开弹框时获取最新的设备类型数据
|
||||
getDeviceType();
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: deviceForm) => {
|
||||
reset();
|
||||
@ -645,6 +599,7 @@ const handleUpdate = async (row?: deviceForm) => {
|
||||
// 设备类型触发事件
|
||||
let isProcessing = false; // 添加处理锁
|
||||
const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
||||
console.log(deviceTypeId, 'deviceTypeIddeviceTypeId');
|
||||
// 重置规则和显示状态
|
||||
rules.value.deviceMac = [];
|
||||
rules.value.deviceImei = [];
|
||||
@ -653,12 +608,31 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
||||
communicationModeInfo.value = null;
|
||||
// 编辑时如果有值，根据已有值确定显示哪个字段
|
||||
if (form.value.id) {
|
||||
if (form.value.deviceMac) {
|
||||
console.log('zheshi me1 ');
|
||||
// 1. 先判断：Mac 和 Imei 都有值（新增的关键分支）
|
||||
const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
|
||||
const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
|
||||
if (hasMac && hasImei) {
|
||||
//两个都有值：显示两个字段 + 都加校验
|
||||
showMacField.value = true;
|
||||
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
|
||||
} else if (form.value.deviceImei) {
|
||||
showImeiField.value = true;
|
||||
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
|
||||
rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', trigger: 'blur' }];
|
||||
console.log('两个字段都有值');
|
||||
}
|
||||
else if (hasMac) {
|
||||
showMacField.value = true;
|
||||
showImeiField.value = false;
|
||||
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
|
||||
rules.value.deviceImei = [];
|
||||
console.log('只有 Mac 有值');
|
||||
}
|
||||
else if (hasImei) {
|
||||
showImeiField.value = true;
|
||||
showMacField.value = false;
|
||||
rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', trigger: 'blur' }];
|
||||
rules.value.deviceMac = [];
|
||||
console.log('只有 Imei 有值');
|
||||
}
|
||||
return;
|
||||
}
|
||||
@ -683,6 +657,9 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
||||
showImeiField.value = true;
|
||||
form.value.deviceMac = ''; // 清空MAC
|
||||
form.value.bluetoothName = '' // 清空蓝牙名称
|
||||
} else if (res.data.communicationMode == '2') { //既是4G设备又是蓝牙设备
|
||||
showImeiField.value = true;
|
||||
showMacField.value = true;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@ -1,174 +1,462 @@
|
||||
<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>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
|
||||
<div>
|
||||
<h2>数据总览</h2>
|
||||
<div class="data-item">
|
||||
<div class="data-icon" :style="{ backgroundColor: item.color }">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
<div class="data_bck">
|
||||
<div class="number"><span>{{ DataOverview.devicesNumber }}</span> 个</div>
|
||||
<div class="title_number">设备数量</div>
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="data-value">{{ item.value }}</div>
|
||||
<div class="data-label">{{ item.label }}</div>
|
||||
<div class="data_green">
|
||||
<div class="number"><span>{{ DataOverview.equipmentOnline }}</span> 个</div>
|
||||
<div class="title_number">在线设备</div>
|
||||
</div>
|
||||
<div class="data_orgine">
|
||||
<div class="number"><span>{{ DataOverview.bindingNew }}</span> 个</div>
|
||||
<div class="title_number">新增绑定</div>
|
||||
</div>
|
||||
<div class="data_red">
|
||||
<div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
|
||||
<div class="title_number">异常设备</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 设备统计卡片 -->
|
||||
<el-row :gutter="20" class="device-stats">
|
||||
<!-- 设备分类 + 快捷操作 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card class="device-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-row">
|
||||
<h2>设备分类</h2>
|
||||
<div class="card-header">
|
||||
<span class="card-title">蓝牙设备</span>
|
||||
<div v-for="(item, index) in deviceList" :key="index" class="progress-item"
|
||||
style="display: inline-block; margin-right: 40px;">
|
||||
<el-progress :stroke-width="7" type="circle"
|
||||
:percentage="item.total === 0 ? 0 : (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-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>
|
||||
</el-progress>
|
||||
<div class="progress-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</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="content-row">
|
||||
<h2>快捷操作</h2>
|
||||
<div class="card-header">
|
||||
<span class="card-title">4G设备</span>
|
||||
<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>
|
||||
</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>
|
||||
<!-- 图表区域：设备使用频次 + 报警信息 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="region-chart-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">设备使用频次地区分布</span>
|
||||
<h2>设备使用频次</h2>
|
||||
<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 v-model="timeRange" placeholder="选择时间范围" @change="updateFrequencyChart">
|
||||
<el-option label="近半年" value="halfYear"></el-option>
|
||||
<el-option label="近一年" value="oneYear"></el-option>
|
||||
</el-select> -->
|
||||
<el-select v-model="deviceType" placeholder="设备类型" style="width: 150px;">
|
||||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
|
||||
:value="item.deviceTypeId" />
|
||||
</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 class="card-body">
|
||||
<!-- 图表容器：设备使用频次 -->
|
||||
<div ref="frequencyChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-nav">
|
||||
<el-button type="text" size="small">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
</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">
|
||||
<!-- 环形图容器：今日报警处理占比 -->
|
||||
<div ref="alarmRingChartRef" class="chart-container"></div>
|
||||
<div class="alarm-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat red">365</div>
|
||||
<div class="label">报警总数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat green">300</div>
|
||||
<div class="label">总处理报警</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 报警事项 + 柱状图 -->
|
||||
<el-col :span="16">
|
||||
<div class="alarm-items">
|
||||
<h3>报警事项</h3>
|
||||
<!-- 柱状图容器：各类型报警次数 -->
|
||||
<div ref="alarmBarChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</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 api from '@/api/home/index'
|
||||
import { DataOverviewType } from '@/api/home/types'
|
||||
import router from '@/router';
|
||||
import * as echarts from 'echarts'; // 引入ECharts核心库
|
||||
import apiTypeAll from '@/api/equipmentManagement/device/index';
|
||||
const DataOverview = ref<DataOverviewType>({
|
||||
devicesNumber: 0,
|
||||
equipmentOnline: 0,
|
||||
bindingNew: 0,
|
||||
equipmentAbnormal: 0
|
||||
});
|
||||
const deviceTypeOptions = ref([]); //设备类型
|
||||
const deviceType = ref()
|
||||
// ---------------------- 基础数据 ----------------------
|
||||
// 设备分类数据
|
||||
const deviceList = ref([
|
||||
{ name: "4G设备", current: 0, total: 0 },
|
||||
{ name: "蓝牙设备", current: 0, total: 0 },
|
||||
{ name: "4G&蓝牙设备", current: 0, total: 0 },
|
||||
]);
|
||||
// 时间范围（控制设备使用频次图表）
|
||||
const timeRange = ref('halfYear');
|
||||
|
||||
// 数据总览
|
||||
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' }
|
||||
])
|
||||
// ---------------------- 图表Ref（用于挂载图表实例） ----------------------
|
||||
const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
|
||||
const alarmRingChartRef = ref<HTMLDivElement | null>(null); // 报警环形图
|
||||
const alarmBarChartRef = ref<HTMLDivElement | null>(null); // 报警柱状图
|
||||
|
||||
// 蓝牙设备统计
|
||||
const bluetoothStats = ref([
|
||||
{ label: '总量', value: '856' },
|
||||
{ label: '在线', value: '723' },
|
||||
{ label: '新增绑定', value: '15' }
|
||||
])
|
||||
// ---------------------- 图表实例存储（用于销毁/更新） ----------------------
|
||||
let frequencyChartInstance: echarts.ECharts | null = null;
|
||||
let alarmRingChartInstance: echarts.ECharts | null = null;
|
||||
let alarmBarChartInstance: echarts.ECharts | null = null;
|
||||
|
||||
// 4G设备统计
|
||||
const g4Stats = ref([
|
||||
{ label: '总量', value: '378' },
|
||||
{ label: '在线', value: '264' },
|
||||
{ label: '新增绑定', value: '8' }
|
||||
])
|
||||
// ---------------------- 快捷操作方法 ----------------------
|
||||
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 regionData = ref([
|
||||
{ name: '北京', value: 156, color: '#409eff' },
|
||||
{ name: '上海', value: 134, color: '#67c23a' },
|
||||
{ name: '杭州', value: 98, color: '#e6a23c' }
|
||||
])
|
||||
// ---------------------- 图表初始化方法 ----------------------
|
||||
/**
|
||||
* 1. 设备使用频次折线图
|
||||
*/
|
||||
const initFrequencyChart = () => {
|
||||
if (!frequencyChartRef.value) return;
|
||||
|
||||
// 计算最大值用于图表比例
|
||||
const maxValue = computed(() => {
|
||||
return Math.max(...regionData.value.map(item => item.value))
|
||||
})
|
||||
// 初始化图表实例
|
||||
frequencyChartInstance = echarts.init(frequencyChartRef.value);
|
||||
|
||||
// 选择器数据
|
||||
const selectedMonth = ref('7')
|
||||
const selectedYear = ref('2025')
|
||||
// 假数据：按时间范围区分
|
||||
const chartData = timeRange.value === 'halfYear'
|
||||
? {
|
||||
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
yAxis: [320, 280, 450, 380, 520, 480], // 近半年使用次数
|
||||
peak: { name: '峰值', value: 520, month: '5月' }
|
||||
}
|
||||
: {
|
||||
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
yAxis: [320, 280, 450, 380, 520, 480, 550, 620, 580, 490, 530, 650], // 近一年使用次数
|
||||
peak: { name: '峰值', value: 650, month: '12月' }
|
||||
};
|
||||
|
||||
// ECharts配置项
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b}: {c} 次'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: chartData.xAxis,
|
||||
axisLabel: {
|
||||
interval: 0 // 强制显示所有x轴标签
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '使用次数',
|
||||
min: 0,
|
||||
max: Math.max(...chartData.yAxis) + 100 // y轴最大值留有余量
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '使用频次',
|
||||
type: 'line',
|
||||
data: chartData.yAxis,
|
||||
smooth: false, // 平滑折线
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#409eff'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409eff',
|
||||
radius: 5
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(64, 158, 255, 0.3)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(64, 158, 255, 0)'
|
||||
}]
|
||||
}
|
||||
},
|
||||
// 标记峰值
|
||||
markPoint: {
|
||||
data: [{
|
||||
name: chartData.peak.name,
|
||||
value: chartData.peak.value,
|
||||
xAxis: chartData.xAxis.indexOf(chartData.peak.month),
|
||||
yAxis: chartData.peak.value,
|
||||
itemStyle: {
|
||||
color: '#ff4d4f'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 渲染图表
|
||||
frequencyChartInstance.setOption(option);
|
||||
};
|
||||
|
||||
/**
|
||||
* 2. 报警环形图（今日报警处理占比）
|
||||
*/
|
||||
const initAlarmRingChart = () => {
|
||||
if (!alarmRingChartRef.value) return;
|
||||
|
||||
alarmRingChartInstance = echarts.init(alarmRingChartRef.value);
|
||||
|
||||
// 假数据：今日报警6次，已处理6次
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} 次 ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '60%'], // 环形半径
|
||||
center: ['50%', '50%'], // 居中显示
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: '6/6\n今日报警/处理', // 中心显示“今日 已处理/总数”
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 6, name: '已处理报警', itemStyle: { color: '#07BE75' } },
|
||||
{ value: 0, name: '未处理报警', itemStyle: { color: '#F65757' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
alarmRingChartInstance.setOption(option);
|
||||
};
|
||||
|
||||
/**
|
||||
* 3. 报警柱状图（各类型报警次数）
|
||||
*/
|
||||
const initAlarmBarChart = () => {
|
||||
if (!alarmBarChartRef.value) return;
|
||||
|
||||
alarmBarChartInstance = echarts.init(alarmBarChartRef.value);
|
||||
|
||||
// 假数据：各类型报警次数
|
||||
const alarmTypes = ['强制报警', '撞击闯入', '手动报警', '电子围栏'];
|
||||
const alarmCounts = [50, 35, 65, 50]; // 对应各类型次数
|
||||
|
||||
// ECharts配置项
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b}: {c} 次'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: alarmTypes,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
//rotate: 15 // 标签旋转，避免重叠
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '报警次数',
|
||||
min: 0
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '报警次数',
|
||||
type: 'bar',
|
||||
data: alarmCounts,
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
color: (params: any) => {
|
||||
// 不同类型报警用不同颜色
|
||||
const colors = ['#ff4d4f', '#e6a23c', '#409eff', '#67c23a'];
|
||||
return colors[params.dataIndex];
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
alarmBarChartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// ---------------------- 图表更新方法（时间范围切换时） ----------------------
|
||||
const updateFrequencyChart = () => {
|
||||
// 先销毁旧实例，再重新初始化
|
||||
if (frequencyChartInstance) {
|
||||
frequencyChartInstance.dispose();
|
||||
}
|
||||
initFrequencyChart();
|
||||
};
|
||||
// 首页统计接口
|
||||
const getData = async () => {
|
||||
// 设备总览
|
||||
api.getDataOverview({}).then(res => {
|
||||
DataOverview.value = res.data
|
||||
})
|
||||
// 设备分类
|
||||
try {
|
||||
const res = await api.getEquipmentClassification({});
|
||||
console.log(res, 'resss');
|
||||
const { equipment4G, deviceBluetooth, devices4GAndBluetooth, total } = res.data;
|
||||
// 映射数据：current 为各类型设备数量，total 为总设备数（6）
|
||||
deviceList.value = [
|
||||
{
|
||||
name: "4G设备",
|
||||
current: equipment4G,
|
||||
total: total
|
||||
},
|
||||
{
|
||||
name: "蓝牙设备",
|
||||
current: deviceBluetooth,
|
||||
total: total
|
||||
},
|
||||
{
|
||||
name: "4G&蓝牙设备",
|
||||
current: devices4GAndBluetooth,
|
||||
total: total
|
||||
},
|
||||
];
|
||||
} catch (error) {
|
||||
console.log('获取设备分类数据失败：', error);
|
||||
}
|
||||
// 设备类型
|
||||
apiTypeAll.deviceTypeAll().then(res => {
|
||||
if (res.code == 200) {
|
||||
deviceTypeOptions.value = res.data
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ---------------------- 生命周期钩子（初始化/销毁图表） ----------------------
|
||||
onMounted(() => {
|
||||
// 页面加载时初始化所有图表
|
||||
initFrequencyChart();
|
||||
initAlarmRingChart();
|
||||
initAlarmBarChart();
|
||||
getData()
|
||||
|
||||
// 监听窗口 resize，自动调整图表大小
|
||||
window.addEventListener('resize', () => {
|
||||
frequencyChartInstance?.resize();
|
||||
alarmRingChartInstance?.resize();
|
||||
alarmBarChartInstance?.resize();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 页面销毁时销毁图表实例，避免内存泄漏
|
||||
frequencyChartInstance?.dispose();
|
||||
alarmRingChartInstance?.dispose();
|
||||
alarmBarChartInstance?.dispose();
|
||||
window.removeEventListener('resize', () => { });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -177,228 +465,217 @@ 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-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 {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
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 {
|
||||
.data_bck,
|
||||
.data_green,
|
||||
.data_orgine,
|
||||
.data_red {
|
||||
width: 280px;
|
||||
height: 110px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
background-size: 100% 100%; // 确保背景图充满容器
|
||||
}
|
||||
|
||||
.device-value {
|
||||
font-size: 28px;
|
||||
.data_bck {
|
||||
background: url('../assets/index/devices_online.png') no-repeat;
|
||||
}
|
||||
|
||||
.data_green {
|
||||
background: url('../assets/index/online.png') no-repeat;
|
||||
}
|
||||
|
||||
.data_orgine {
|
||||
background: url('../assets/index/add.png') no-repeat;
|
||||
}
|
||||
|
||||
.data_red {
|
||||
background: url('../assets/index/device_yc.png') no-repeat;
|
||||
}
|
||||
|
||||
.number {
|
||||
padding-top: 20px;
|
||||
font-size: 18px;
|
||||
|
||||
span {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #409eff;
|
||||
line-height: 1.2;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-label {
|
||||
.title_number {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 设备分类/快捷操作卡片样式
|
||||
.content-row {
|
||||
background-color: #fff;
|
||||
height: 240px;
|
||||
border-radius: 10px;
|
||||
padding: 15px 25px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
text-align: center;
|
||||
|
||||
.progress-text {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
|
||||
.current {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-name {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
|
||||
.quick-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.card_title {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.region-chart-card {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 图表卡片样式
|
||||
.region-chart-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
height: 360px; // 固定图表卡片高度，避免布局错乱
|
||||
|
||||
|
||||
.card-body {
|
||||
height: calc(100% - 40px); // 卡片内容区高度（减去header高度）
|
||||
}
|
||||
|
||||
// 图表容器通用样式（必须设置宽高，否则图表无法渲染）
|
||||
.chart-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
min-height: 250px;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 40px;
|
||||
flex: 1;
|
||||
|
||||
.chart-bar-item {
|
||||
// 报警信息区域样式
|
||||
.alarm-overview {
|
||||
height: 100%;
|
||||
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;
|
||||
.alarm-stats {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
// flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
.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: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stat.red {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.stat.green {
|
||||
color: #07BE75;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar-value {
|
||||
.alarm-items {
|
||||
height: 100%;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
color: #333;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
// 响应式适配（小屏幕下调整布局）
|
||||
@media (max-width: 1200px) {
|
||||
.home {
|
||||
padding: 10px;
|
||||
|
||||
.data-overview-card {
|
||||
.data-item {
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
|
||||
.data_bck,
|
||||
.data_green,
|
||||
.data_orgine,
|
||||
.data_red {
|
||||
width: calc(50% - 7.5px); // 小屏幕下2列布局
|
||||
}
|
||||
}
|
||||
|
||||
.device-stats {
|
||||
.el-col {
|
||||
&:span-12 {
|
||||
width: 100%;
|
||||
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