forked from dyf/dyf-vue-ui
设备类型,新增4G&蓝牙通讯方式
This commit is contained in:
@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
|
|||||||
VITE_APP_ENV = 'development'
|
VITE_APP_ENV = 'development'
|
||||||
|
|
||||||
# 开发环境
|
# 开发环境
|
||||||
VITE_APP_BASE_API = 'http://47.120.79.150/backend'
|
# 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://192.168.2.23:8000'
|
||||||
# VITE_APP_BASE_API = 'http://localhost: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
|
active: false
|
||||||
});
|
});
|
||||||
|
|
||||||
const deviceDetail = ref<DeviceDetail>({
|
const deviceDetail = ref<DeviceDetail & { typeName: string }>({
|
||||||
// 重点:personnelInfo 初始化为空对象,避免 undefined
|
// 重点:personnelInfo 初始化为空对象,避免 undefined
|
||||||
personnelInfo: {
|
personnelInfo: {
|
||||||
unitName: '',
|
unitName: '',
|
||||||
@ -246,7 +246,9 @@ const deviceDetail = ref<DeviceDetail>({
|
|||||||
longitude: '',
|
longitude: '',
|
||||||
latitude: '',
|
latitude: '',
|
||||||
address: '',
|
address: '',
|
||||||
sendMsg: ''
|
sendMsg: '',
|
||||||
|
chargeState: '0',
|
||||||
|
typeName: ''
|
||||||
});
|
});
|
||||||
// 保留原有的操作中标志位
|
// 保留原有的操作中标志位
|
||||||
const isUpdatingStatus = ref(false);
|
const isUpdatingStatus = ref(false);
|
||||||
@ -429,7 +431,7 @@ const saveBtn = () => {
|
|||||||
// 强制报警
|
// 强制报警
|
||||||
const forceAlarm = async () => {
|
const forceAlarm = async () => {
|
||||||
try {
|
try {
|
||||||
await proxy?.$modal.confirm('确定要对该设备开启强制报警?', '');
|
await proxy?.$modal.confirm('确定要对该设备开启强制报警?', '提示');
|
||||||
forceAlarmLoading.value = true
|
forceAlarmLoading.value = true
|
||||||
// 2. 准备请求数据
|
// 2. 准备请求数据
|
||||||
const batchId = generateShortId();
|
const batchId = generateShortId();
|
||||||
@ -586,7 +588,7 @@ const handleDeviceMessage = (msg: any) => {
|
|||||||
deviceDetail.value.batteryPercentage = deviceState[3]; //电量
|
deviceDetail.value.batteryPercentage = deviceState[3]; //电量
|
||||||
deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
|
deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
|
||||||
// getList(); // 重新获取设备详情
|
// getList(); // 重新获取设备详情
|
||||||
if (deviceDetail.value.batteryPercentage < 20 && deviceDetail.value.chargeState == 0) {
|
if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
|
||||||
centerDialogVisible.value=true
|
centerDialogVisible.value=true
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
@ -64,6 +64,7 @@
|
|||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div v-if="scope.row.communicationMode == 0">4G</div>
|
<div v-if="scope.row.communicationMode == 0">4G</div>
|
||||||
<div v-if="scope.row.communicationMode == 1">蓝牙</div>
|
<div v-if="scope.row.communicationMode == 1">蓝牙</div>
|
||||||
|
<div v-if="scope.row.communicationMode == 2">4G&蓝牙</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="createTime" label="创建日期" />
|
<el-table-column prop="createTime" label="创建日期" />
|
||||||
@ -105,7 +106,7 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="pc路由跳转" prop="pcModelDictionary" style="display: none;">
|
<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"
|
<el-option v-for="item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
|
||||||
:value="item.dictValue" />
|
:value="item.dictValue" />
|
||||||
</el-select>
|
</el-select>
|
||||||
@ -141,6 +142,7 @@
|
|||||||
<el-select v-model="form.communicationMode" placeholder="请选择">
|
<el-select v-model="form.communicationMode" placeholder="请选择">
|
||||||
<el-option label="4G" :value="0" />
|
<el-option label="4G" :value="0" />
|
||||||
<el-option label="蓝牙" :value="1" />
|
<el-option label="蓝牙" :value="1" />
|
||||||
|
<el-option label="4G&蓝牙" :value="2" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
@ -44,19 +44,23 @@
|
|||||||
<template #header>
|
<template #header>
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col :span="1.5">
|
<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>
|
||||||
<el-col :span="1.5">
|
<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-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="1.5">
|
<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>
|
||||||
<el-col :span="1.5">
|
<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-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -66,7 +70,8 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<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-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -113,22 +118,27 @@
|
|||||||
|
|
||||||
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
|
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button link type="primary" @click="handleDatails(scope.row)">详情</el-button>
|
<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-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>
|
||||||
<el-tooltip v-if="!scope.row.customerName" content="删除" placement="top">
|
<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>
|
||||||
<el-tooltip v-if="scope.row.deviceStatus == 1 && !scope.row.customerName" content="分配" placement="top">
|
<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>
|
||||||
<el-tooltip v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top">
|
<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>
|
||||||
<el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑"
|
<el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑"
|
||||||
placement="top">
|
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>
|
||||||
<el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
|
<el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
|
||||||
<el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
|
<el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
|
||||||
@ -506,8 +516,8 @@ const handleAdd = async () => {
|
|||||||
};
|
};
|
||||||
// 详情
|
// 详情
|
||||||
const handleDatails = (row: any) => {
|
const handleDatails = (row: any) => {
|
||||||
console.log(row,'row');
|
console.log(row, 'row');
|
||||||
const deviceId = row.deviceId;
|
const deviceId = row.deviceId;
|
||||||
router.push('/equipmentManagement/deviceDetails/' + deviceId);
|
router.push('/equipmentManagement/deviceDetails/' + deviceId);
|
||||||
}
|
}
|
||||||
/** 修改按钮操作 */
|
/** 修改按钮操作 */
|
||||||
@ -545,6 +555,7 @@ const handleUpdate = async (row?: deviceForm) => {
|
|||||||
// 设备类型触发事件
|
// 设备类型触发事件
|
||||||
let isProcessing = false; // 添加处理锁
|
let isProcessing = false; // 添加处理锁
|
||||||
const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
||||||
|
console.log(deviceTypeId, 'deviceTypeIddeviceTypeId');
|
||||||
// 重置规则和显示状态
|
// 重置规则和显示状态
|
||||||
rules.value.deviceMac = [];
|
rules.value.deviceMac = [];
|
||||||
rules.value.deviceImei = [];
|
rules.value.deviceImei = [];
|
||||||
@ -553,12 +564,31 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
|||||||
communicationModeInfo.value = null;
|
communicationModeInfo.value = null;
|
||||||
// 编辑时如果有值,根据已有值确定显示哪个字段
|
// 编辑时如果有值,根据已有值确定显示哪个字段
|
||||||
if (form.value.id) {
|
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;
|
showMacField.value = true;
|
||||||
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
|
|
||||||
} else if (form.value.deviceImei) {
|
|
||||||
showImeiField.value = true;
|
showImeiField.value = true;
|
||||||
|
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
|
||||||
rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', 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;
|
return;
|
||||||
}
|
}
|
||||||
@ -583,6 +613,9 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
|||||||
showImeiField.value = true;
|
showImeiField.value = true;
|
||||||
form.value.deviceMac = ''; // 清空MAC
|
form.value.deviceMac = ''; // 清空MAC
|
||||||
form.value.bluetoothName = '' // 清空蓝牙名称
|
form.value.bluetoothName = '' // 清空蓝牙名称
|
||||||
|
} else if (res.data.communicationMode == '2') { //既是4G设备又是蓝牙设备
|
||||||
|
showImeiField.value = true;
|
||||||
|
showMacField.value = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -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