设备类型，新增4G&蓝牙通讯方式
This commit is contained in:
fengerli
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -44,19 +44,23 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['equipment:devices:add']" 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 v-hasPermi="['equipment:devices:edit']" 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 v-hasPermi="['equipment:devices:export']" 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 v-hasPermi="['equipment:devices:remove']" 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>
|
||||
@ -66,7 +70,8 @@
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['equipment:devices:allocate']" 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>
|
||||
@ -115,20 +120,25 @@
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleDatails(scope.row)">详情</el-button>
|
||||
<el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top">
|
||||
<el-button v-hasPermi="['equipment:devices:edit']" 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 v-hasPermi="['equipment:devices:remove']" 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 v-hasPermi="['equipment:devices:allocate']" 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 v-hasPermi="['equipment:devices:revoke']" 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 v-hasPermi="['equipment:devices:unbind']" 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>
|
||||
@ -506,7 +516,7 @@ const handleAdd = async () => {
|
||||
};
|
||||
// 详情
|
||||
const handleDatails = (row: any) => {
|
||||
console.log(row,'row');
|
||||
console.log(row, 'row');
|
||||
const deviceId = row.deviceId;
|
||||
router.push('/equipmentManagement/deviceDetails/' + deviceId);
|
||||
}
|
||||
@ -545,6 +555,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 = [];
|
||||
@ -553,12 +564,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;
|
||||
}
|
||||
@ -583,6 +613,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) {
|
||||
|
||||
@ -2,36 +2,36 @@
|
||||
<div class="app-container home">
|
||||
<!-- 数据总览卡片 -->
|
||||
<div>
|
||||
<h1>数据总览</h1>
|
||||
<h2>数据总览</h2>
|
||||
<div class="data-item">
|
||||
<div class="data_bck">
|
||||
<div class="number"><span>100</span> 个</div>
|
||||
<div class="number"><span>{{ DataOverview.devicesNumber }}</span> 个</div>
|
||||
<div class="title_number">设备数量</div>
|
||||
</div>
|
||||
<div class="data_green">
|
||||
<div class="number"><span>100</span> 个</div>
|
||||
<div class="number"><span>{{ DataOverview.equipmentOnline }}</span> 个</div>
|
||||
<div class="title_number">在线设备</div>
|
||||
</div>
|
||||
<div class="data_orgine">
|
||||
<div class="number"><span>100</span> 个</div>
|
||||
<div class="number"><span>{{ DataOverview.bindingNew }}</span> 个</div>
|
||||
<div class="title_number">新增绑定</div>
|
||||
</div>
|
||||
<div class="data_red">
|
||||
<div class="number"><span>100</span> 个</div>
|
||||
<div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
|
||||
<div class="title_number">异常设备</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<!-- 自定义进度条内部内容：显示“分子/分母” -->
|
||||
<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>
|
||||
@ -40,7 +40,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-progress>
|
||||
<!-- 设备名称 -->
|
||||
<div class="progress-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -70,27 +69,30 @@
|
||||
</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-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>
|
||||
<div class="card-body">
|
||||
<!-- 引入封装好的图表组件 -->
|
||||
<!-- <DeviceFrequencyChart /> -->
|
||||
<!-- 图表容器：设备使用频次 -->
|
||||
<div ref="frequencyChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧：报警信息 -->
|
||||
<el-col :span="12">
|
||||
<div class="region-chart-card">
|
||||
<div class="card-header">
|
||||
@ -98,28 +100,29 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-row :gutter="16">
|
||||
<!-- 报警总览 -->
|
||||
<el-col :span="8">
|
||||
<div class="alarm-overview">
|
||||
<!-- <AlarmOverviewChart /> -->
|
||||
<!-- 环形图容器：今日报警处理占比 -->
|
||||
<div ref="alarmRingChartRef" class="chart-container"></div>
|
||||
<div class="alarm-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat red">365</span>
|
||||
<span class="label">报警总数</span>
|
||||
<div class="stat red">365</div>
|
||||
<div class="label">报警总数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat green">300</span>
|
||||
<span class="label">总处理报警</span>
|
||||
<div class="stat green">300</div>
|
||||
<div class="label">总处理报警</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 报警事项 -->
|
||||
<!-- 报警事项 + 柱状图 -->
|
||||
<el-col :span="16">
|
||||
<div class="alarm-items">
|
||||
<h3>报警事项</h3>
|
||||
<!-- <AlarmItemsChart /> -->
|
||||
<!-- 柱状图容器：各类型报警次数 -->
|
||||
<div ref="alarmBarChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -129,160 +132,331 @@
|
||||
</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 api from '@/api/home/index'
|
||||
import { DataOverviewType } from '@/api/home/types'
|
||||
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';
|
||||
|
||||
// 数据总览
|
||||
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: 25, total: 100 },
|
||||
{ name: "蓝牙设备", current: 50, total: 200 },
|
||||
{ name: "4G&蓝牙设备", current: 10, total: 40 },
|
||||
{ name: "4G设备", current: 0, total: 0 },
|
||||
{ name: "蓝牙设备", current: 0, total: 0 },
|
||||
{ name: "4G&蓝牙设备", current: 0, total: 0 },
|
||||
]);
|
||||
// 时间范围（控制设备使用频次图表）
|
||||
const timeRange = ref('halfYear');
|
||||
// 设备类型
|
||||
|
||||
// ---------------------- 图表Ref（用于挂载图表实例） ----------------------
|
||||
const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
|
||||
const alarmRingChartRef = ref<HTMLDivElement | null>(null); // 报警环形图
|
||||
const alarmBarChartRef = ref<HTMLDivElement | null>(null); // 报警柱状图
|
||||
|
||||
// ---------------------- 图表实例存储（用于销毁/更新） ----------------------
|
||||
let frequencyChartInstance: echarts.ECharts | null = null;
|
||||
let alarmRingChartInstance: echarts.ECharts | null = null;
|
||||
let alarmBarChartInstance: echarts.ECharts | null = null;
|
||||
|
||||
// ---------------------- 快捷操作方法 ----------------------
|
||||
const handledeviceTypeAdd = () => {
|
||||
router.push('/equipmentManagement/deviceType');
|
||||
}
|
||||
// 设备列表
|
||||
};
|
||||
const handledeviceAdd = () => {
|
||||
router.push('/equipmentManagement/devices');
|
||||
}
|
||||
// 分组
|
||||
};
|
||||
const handleGroup = () => {
|
||||
router.push('/equipmentManagement/group');
|
||||
}
|
||||
// 控制面板
|
||||
};
|
||||
const handleControlPanel = () => {
|
||||
router.push('controlCenter/controlPanel');
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------- 图表初始化方法 ----------------------
|
||||
/**
|
||||
* 1. 设备使用频次折线图
|
||||
*/
|
||||
const initFrequencyChart = () => {
|
||||
if (!frequencyChartRef.value) return;
|
||||
|
||||
// 初始化图表实例
|
||||
frequencyChartInstance = echarts.init(frequencyChartRef.value);
|
||||
|
||||
// 假数据：按时间范围区分
|
||||
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 => {
|
||||
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 地区分布数据
|
||||
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')
|
||||
// ---------------------- 生命周期钩子（初始化/销毁图表） ----------------------
|
||||
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>
|
||||
@ -291,113 +465,112 @@ const selectedYear = ref('2025')
|
||||
background-color: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
|
||||
// 数据总览卡片样式
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin-bottom: 20px;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
}
|
||||
|
||||
.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_bck,
|
||||
.data_green,
|
||||
.data_orgine,
|
||||
.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;
|
||||
background-size: 100% 100%; // 确保背景图充满容器
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.title_number {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 设备分类/快捷操作卡片样式
|
||||
.content-row {
|
||||
background-color: #fff;
|
||||
height: 240px;
|
||||
border-radius: 10px;
|
||||
padding: 5px 25px 15px 25px;
|
||||
margin-top: 20px;
|
||||
padding: 15px 25px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.progress-item {
|
||||
text-align: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
.progress-text {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
|
||||
.current {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-name {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.card_title {
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quick-item {
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
|
||||
.quick-img {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
|
||||
.region-chart-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
.card_title {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -405,46 +578,53 @@ const selectedYear = ref('2025')
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// 图表卡片样式
|
||||
.region-chart-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
height: 360px; // 固定图表卡片高度，避免布局错乱
|
||||
|
||||
|
||||
.card-body {
|
||||
height: calc(100% - 50px);
|
||||
height: calc(100% - 40px); // 卡片内容区高度（减去header高度）
|
||||
}
|
||||
|
||||
// 图表容器通用样式（必须设置宽高，否则图表无法渲染）
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
// 报警信息区域样式
|
||||
.alarm-overview {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alarm-stats {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
// flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat.red {
|
||||
@ -452,52 +632,50 @@ const selectedYear = ref('2025')
|
||||
}
|
||||
|
||||
.stat.green {
|
||||
color: #36cbcb;
|
||||
color: #07BE75;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alarm-items h3 {
|
||||
.alarm-items {
|
||||
height: 100%;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
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>
|
||||
@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
const initChart = () => {
|
||||
if (chartRef.value) {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
const option = {
|
||||
xAxis: { type: 'category', data: ['强制报警', '撞击闯入', '手动报警', '电子围栏'] },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
data: [50, 30, 65, 45],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
// 柱状图渐变色
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[{ offset: 0, color: '#ff6b6b' }, { offset: 1, color: '#ffcccc' }]
|
||||
),
|
||||
},
|
||||
}],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
myChart && myChart.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
myChart && myChart.dispose();
|
||||
myChart = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const chartRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
const initChart = () => {
|
||||
if (chartRef.value) {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
const option = {
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'], // 环形内外半径
|
||||
data: [{ value: 6, name: '今日报警' }, { value: 6, name: '今日处理' }],
|
||||
color: ['#ff4d4f', '#36cbcb'], // 红、绿配色
|
||||
label: {
|
||||
position: 'center',
|
||||
formatter: '6/6\n今日报警/处理', // 中心文字
|
||||
textStyle: { align: 'center' },
|
||||
},
|
||||
}],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
myChart && myChart.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
myChart && myChart.dispose();
|
||||
myChart = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<!-- 用ref绑定DOM，代替原id选择器 -->
|
||||
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 200px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'; // 引入ECharts
|
||||
|
||||
const chartRef = ref(null); // 绑定图表容器DOM
|
||||
let myChart = null; // 存储ECharts实例
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value) {
|
||||
myChart = echarts.init(chartRef.value);
|
||||
const option = {
|
||||
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
data: [30, 20, 40, 32, 45, 48],
|
||||
type: 'line',
|
||||
areaStyle: {}, // 开启面积填充
|
||||
itemStyle: { color: '#409eff' },
|
||||
}],
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
// 窗口resize时，图表自适应
|
||||
const handleResize = () => {
|
||||
myChart && myChart.resize();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 组件销毁时，移除事件 + 销毁图表（防止内存泄漏）
|
||||
window.removeEventListener('resize', handleResize);
|
||||
myChart && myChart.dispose();
|
||||
myChart = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user