xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备监控使用统一的时间选择组件、文案更新

Browse Source
This commit is contained in:
白菜
2025-09-22 17:57:30 +08:00
parent cbc7a341c9
commit 0e7b54291f
8 changed files with 106 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/ems/dzjk/sbjk/db/index.vue
View File

@ -135,7 +135,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.common-card-container { .sbjk-card-container {
::v-deep { ::v-deep {
.el-table__row td{ .el-table__row td{
&:not(:first-child){ &:not(:first-child){

66
src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
View File

@ -7,31 +7,18 @@
lock-scroll lock-scroll
append-to-body append-to-body
width="700px" width="700px"
class="ems-dialog" class="ems-dialog chart-detail-dialog"
:before-close="handleColsed" :before-close="handleColsed"
> >
<div> <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<el-form size="medium" label-width="100px" inline> <div slot="header" class="time-range-header">
<el-form-item label="时间选择"> <span class="card-title"></span>
<el-date-picker <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
v-model="dateRange" </div>
type="daterange" <div class="card-main" v-loading="loading">
range-separator="至" <div id="lineChart" style="height: 310px;"></div>
start-placeholder="开始时间" </div>
value-format="yyyy-MM-dd" </el-card>
:picker-options="pickerOptions"
end-placeholder="结束时间"
:clearable="false"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getData">搜索</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<div id="lineChart" style="height: 360px; width: 100%"></div>
</div>
</el-dialog> </el-dialog>
</template> </template>
@ -39,8 +26,9 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
import resize from "@/mixins/ems/resize"; import resize from "@/mixins/ems/resize";
import { getSingleBatteryData } from "@/api/ems/dzjk"; import { getSingleBatteryData } from "@/api/ems/dzjk";
import { formatDate } from "@/filters/ems"; import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default { export default {
components: {DateRangeSelect},
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
@ -56,18 +44,13 @@ export default {
}, },
dialogTableVisible: false, dialogTableVisible: false,
dateRange: [], dateRange: [],
defaultDateRange: [],
}; };
}, },
methods: { methods: {
resetDefaultDateRange() { // 更新时间范围 重置图表
const now = new Date(), updateDate(data){
formatNow = formatDate(now); this.dateRange=data || []
const weekAgo = formatDate( this.getData()
new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
);
this.dateRange = [weekAgo, formatNow];
this.defaultDateRange = [weekAgo, formatNow];
}, },
handleColsed(done) { handleColsed(done) {
if (!this.chart) { if (!this.chart) {
@ -102,22 +85,16 @@ export default {
this.chart.hideLoading(); this.chart.hideLoading();
}); });
}, },
// 重置
onReset() {
this.dateRange = this.defaultDateRange;
this.getData();
},
initChart({ siteId, clusterDeviceId, deviceId }, dataType) { initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
this.siteId = siteId; this.siteId = siteId;
this.clusterDeviceId = clusterDeviceId; this.clusterDeviceId = clusterDeviceId;
this.deviceId = deviceId; this.deviceId = deviceId;
this.dataType = dataType; this.dataType = dataType;
this.resetDefaultDateRange();
this.dialogTableVisible = true; this.dialogTableVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
!this.chart && !this.chart &&
(this.chart = echarts.init(document.querySelector("#lineChart"))); (this.chart = echarts.init(document.querySelector("#lineChart")));
this.getData(); this.$refs.dateRangeSelect.init()
}); });
}, },
setOption(data) { setOption(data) {
@ -208,3 +185,12 @@ export default {
mounted() {}, mounted() {},
}; };
</script> </script>
<style lang="scss" scoped>
.chart-detail-dialog{
::v-deep{
.el-dialog__body{
padding-top:0;
}
}
}
</style>

5
src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
View File

@ -83,17 +83,16 @@ export default {
end: 100 end: 100
} }
], ],
// POC昨日有功功率、POC昨日无功功率
series: [ series: [
{ {
name:'POC实时有功功率', name:'PCS实时有功功率',
type: 'line', type: 'line',
areaStyle: { areaStyle: {
color:'#FFBD00' color:'#FFBD00'
}, },
data: data1, data: data1,
},{ },{
name:'POC实时无功功率', name:'PCS实时无功功率',
type: 'line', type: 'line',
areaStyle: { areaStyle: {
color: '#3C81FF' color: '#3C81FF'

4
src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
View File

@ -2,7 +2,7 @@
<template> <template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding"> <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header"> <div slot="header">
<span class="card-title">Poc平均温度</span> <span class="card-title">PCS平均温度</span>
</div> </div>
<div style="height: 360px" id="pocpjwdChart"/> <div style="height: 360px" id="pocpjwdChart"/>
</el-card> </el-card>
@ -80,7 +80,7 @@ export default {
], ],
series: [ series: [
{ {
name:'Poc平均温度', name:'PCS平均温度',
data: data, data: data,
type: 'line', type: 'line',
areaStyle: { areaStyle: {

88
src/views/ems/dzjk/tjbb/dcdqx/index.vue
View File

@ -1,56 +1,29 @@
<template> <template>
<div v-loading="loading"> <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<div class="select-container"> <div slot="header" class="time-range-header">
<el-form :inline="true"> <span class="card-title">
<!-- <el-form-item label="电池堆">--> <el-button-group class="ems-btns-group">
<!-- <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">--> <el-button v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
<!-- <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
</div>
<div style="margin:30px 0;">
<!-- 二个选择按钮-->
<el-row style="">
<el-col :xs="24" :sm="24" :lg="24">
<el-button-group class="ems-btns-group">
<el-button v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group> </el-button-group>
</el-col> </span>
</el-row> <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
<!--echart-->
<div id="dcdEchart" style="height:360px;"></div>
</div> </div>
</div> <div class="card-main" v-loading="loading">
<div id="dcdEchart" style="height: 310px;"></div>
</div>
</el-card>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import resize from "@/mixins/ems/resize"; import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getStackData, getStackNameList} from '@/api/ems/dzjk' import { getStackData, getStackNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems"; import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default { export default {
name:'DzjkTjbbDcdqx', name:'DzjkTjbbDcdqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId], mixins: [resize,getQuerySiteId],
data() { data() {
return { return {
@ -59,11 +32,8 @@ export default {
return time.getTime() > Date.now(); return time.getTime() > Date.now();
}, },
}, },
defaultDateRange:[],//默认展示的时间
dateRange:[], dateRange:[],
loading:false, loading:false,
// pcs:'',
// pcsOptions: [],
activeBtn:'1', activeBtn:'1',
btnList:[ btnList:[
{name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']}, {name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
@ -80,23 +50,11 @@ export default {
this.getData() this.getData()
} }
}, },
// 搜索 // 更新时间范围 重置图表
onSearch(){ updateDate(data){
this.dateRange=data || []
this.getData() this.getData()
}, },
// 重置
onReset(){
// this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
this.dateRange=''
this.getData()
},
// getPcsList(){
// return getStackNameList(this.siteId).then(response => {
// const data = JSON.parse(JSON.stringify(response?.data || []))
// this.pcsOptions = data
// this.pcs = data.length>0?data[0].id:'';
// })
// },
getData(){ getData(){
const {siteId,activeBtn}=this; const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || []) const [start='',end='']=(this.dateRange || [])
@ -189,18 +147,12 @@ export default {
this.chart = echarts.init(document.querySelector('#dcdEchart')); this.chart = echarts.init(document.querySelector('#dcdEchart'));
}, },
init(){ init(){
this.loading = true this.$nextTick(()=>{
// this.pcs='' this.initChart()
// this.pcsOptions=[] this.$refs.dateRangeSelect.init()
this.initChart() })
this.onReset()
} }
}, },
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
},
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return

56
src/views/ems/dzjk/tjbb/glqx/index.vue
View File

@ -1,31 +1,14 @@
<template> <template>
<div v-loading="loading"> <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<div class="select-container"> <div slot="header" class="time-range-header">
<el-form :inline="true"> <span class="card-title">功率曲线</span>
<el-form-item label="时间选择"> <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
</div> </div>
<div style="margin:30px 0;"> <div class="card-main" v-loading="loading">
<div id="glqxEchart" style="height:360px;"></div> <div id="glqxEchart" style="height: 310px;"></div>
</div> </div>
</div> </el-card>
</template> </template>
@ -35,8 +18,10 @@ import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getPcsNameList, getPowerData} from "@/api/ems/dzjk"; import {getPcsNameList, getPowerData} from "@/api/ems/dzjk";
import {formatDate} from "@/filters/ems"; import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default { export default {
name:'DzjkTjbbGlqx', name:'DzjkTjbbGlqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId], mixins: [resize,getQuerySiteId],
data() { data() {
return { return {
@ -45,19 +30,14 @@ export default {
return time.getTime() > Date.now(); return time.getTime() > Date.now();
}, },
}, },
defaultDateRange:[],//默认展示的时间
dateRange:[], dateRange:[],
loading:false, loading:false,
} }
}, },
methods: { methods: {
// 搜索 // 更新时间范围 重置图表
onSearch(){ updateDate(data){
this.getData() this.dateRange=data || []
},
// 重置
onReset(){
this.dateRange=[]
this.getData() this.getData()
}, },
getData(){ getData(){
@ -118,16 +98,12 @@ export default {
this.chart = echarts.init(document.querySelector('#glqxEchart')); this.chart = echarts.init(document.querySelector('#glqxEchart'));
}, },
init(){ init(){
this.loading = true this.$nextTick(()=>{
this.initChart() this.initChart()
this.getData() this.$refs.dateRangeSelect.init()
})
} }
}, },
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
},
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return

55
src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
View File

@ -1,31 +1,10 @@
<template> <template>
<el-card shadow="always" class="common-card-container" style="margin-top:20px"> <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<div slot="header"> <div slot="header" class="time-range-header">
<span class="card-title">电量指标</span> <span class="card-title">电量指标</span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div> </div>
<div class="card-main" v-loading="loading"> <div class="card-main" v-loading="loading">
<!-- 搜索栏-->
<div class="select-container">
<el-form :inline="true">
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getData" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="total-data"> <div class="total-data">
<div>总充电量:<span class="point">{{totalChargedCap | formatNumber}}kWh</span></div> <div>总充电量:<span class="point">{{totalChargedCap | formatNumber}}kWh</span></div>
<div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div> <div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
@ -42,7 +21,9 @@ import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getElectricData} from '@/api/ems/dzjk' import {getElectricData} from '@/api/ems/dzjk'
import {formatDate} from '@/filters/ems' import {formatDate} from '@/filters/ems'
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
export default { export default {
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId], mixins: [resize,getQuerySiteId],
data() { data() {
return { return {
@ -51,7 +32,6 @@ export default {
return time.getTime() > Date.now(); return time.getTime() > Date.now();
}, },
}, },
defaultDateRange:[],//默认展示的时间
dateRange:[], dateRange:[],
loading:false, loading:false,
chart: null, chart: null,
@ -61,9 +41,9 @@ export default {
} }
}, },
methods: { methods: {
// 重置 // 更新时间范围 重置图表
onReset(){ updateDate(data){
this.dateRange=[] this.dateRange=data || []
this.getData() this.getData()
}, },
setOption(data,unit){ setOption(data,unit){
@ -80,7 +60,12 @@ export default {
top:40, top:40,
containLabel: true containLabel: true
}, },
tooltip: {}, tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
name:`单位：${unit}`, name:`单位：${unit}`,
@ -145,15 +130,13 @@ export default {
}) })
}, },
init(){ init(){
this.chart = echarts.init(document.querySelector('#dlzbChart')); this.$nextTick(()=>{
this.onReset() this.chart = echarts.init(document.querySelector('#dlzbChart'));
this.$refs.dateRangeSelect.init()
})
} }
}, },
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
},
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return

99
src/views/ems/dzjk/tjbb/pcsqx/index.vue
View File

@ -1,56 +1,30 @@
<template> <template>
<div v-loading="loading"> <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<div class="select-container"> <div slot="header" class="time-range-header">
<el-form :inline="true"> <span class="card-title">
<!-- <el-form-item label="PCS">--> <el-button-group class="ems-btns-group">
<!-- <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">--> <el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
<!-- <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
</div>
<div style="margin:30px 0;">
<!-- 二个选择按钮-->
<el-row style="">
<el-col :xs="24" :sm="24" :lg="24">
<el-button-group class="ems-btns-group">
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group> </el-button-group>
</el-col> </span>
</el-row> <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
<!--echart-->
<div id="pcsEchart" style="height:360px;"></div>
</div> </div>
</div> <div class="card-main" v-loading="loading">
<div id="pcsEchart" style="height: 310px;"></div>
</div>
</el-card>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import resize from "@/mixins/ems/resize"; import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getPCSData, getPcsNameList} from '@/api/ems/dzjk' import { getPCSData, getPcsNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems"; import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default { export default {
name:'DzjkTjbbPcsqx', name:'DzjkTjbbPcsqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId], mixins: [resize,getQuerySiteId],
data() { data() {
return { return {
@ -59,17 +33,12 @@ export default {
return time.getTime() > Date.now(); return time.getTime() > Date.now();
}, },
}, },
defaultDateRange:[],//默认展示的时间
dateRange:[], dateRange:[],
loading:false, loading:false,
// pcs:'',
// pcsOptions: [],
activeBtn:'1', activeBtn:'1',
btnList:[ btnList:[
{name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']}, {name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
{name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']}, {name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
// {name:'温度',id:'wd'},
// {name:'三相电压',id:'sxdy'},
{name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'}, {name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
], ],
@ -83,23 +52,11 @@ export default {
this.getData() this.getData()
} }
}, },
// 搜索 // 更新时间范围 重置图表
onSearch(){ updateDate(data){
this.dateRange=data || []
this.getData() this.getData()
}, },
// 重置
onReset(){
// this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
this.dateRange=[]
this.getData()
},
// getPcsList(){
// return getPcsNameList(this.siteId).then(response => {
// const data = response?.data || [];
// this.pcsOptions = data
// this.pcs = data.length>0?data[0].id:'';
// })
// },
getData(){ getData(){
const {siteId,activeBtn}=this; const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || []) const [start='',end='']=(this.dateRange || [])
@ -108,7 +65,6 @@ export default {
getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => { getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
this.setOption(response?.data || []) this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;}) }).finally(()=>{this.loading=false;})
}, },
compareDate(date1,date2){ compareDate(date1,date2){
console.log('比较时间',date1,date2) console.log('比较时间',date1,date2)
@ -194,27 +150,12 @@ export default {
this.chart = echarts.init(document.querySelector('#pcsEchart')); this.chart = echarts.init(document.querySelector('#pcsEchart'));
}, },
init(){ init(){
this.loading = true this.$nextTick(()=>{
// this.pcs='' this.initChart()
// this.pcsOptions=[] this.$refs.dateRangeSelect.init()
this.initChart() })
this.onReset()
// this.getPcsList().then(()=>{
// if(this.pcs){
// this.onReset()
// }else{
// this.loading=false;
// }
//
// })
} }
}, },
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
},
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
return return