Browse Source

首页

master
zhang_li 8 months ago
parent
commit
35e6e8ab44
  1. 8
      src/api/home/index.ts
  2. 459
      src/views/home/echarts-data.ts
  3. 397
      src/views/home/index.vue

8
src/api/home/index.ts

@ -5,4 +5,12 @@ export const getData = async () => {
return await request.get({ url: `/eam/home-page/select` })
}
// 获取年度指标
export const getYearTarget = async () => {
return await request.get({ url: `/eam/home-page/selectYearIndex` })
}
// 获取年度指标
export const getChartsData = async (factory) => {
return await request.get({ url: `/eam/home-page/selectMonthGraphByFactory?factory=`+factory })
}

459
src/views/home/echarts-data.ts

@ -2,6 +2,456 @@ import { EChartsOption } from 'echarts'
const { t } = useI18n()
export const lineOptions1: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions2: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions3: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions4: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions5: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions6: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions7: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions8: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions9: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['目标','实际'],
top: 20
},
series: [
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut',
},{
name: '目标',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
}
]
}
export const lineOptions: EChartsOption = {
xAxis: {
@ -50,11 +500,16 @@ export const lineOptions: EChartsOption = {
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut'
animationEasing: 'quadraticOut',
markLine: {
data: [{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
}]
}
}
]
}
export const pieOptions: EChartsOption = {
// title: {
// text: t('analysis.userAccessSource'),

397
src/views/home/index.vue

@ -114,18 +114,42 @@
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">0.05%</li>
<li class="three red">0.06%</li>
<li class="two orange">{{ yearTarget.zsTJGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zsTJActual) > parseFloat(yearTarget.zsTJGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zsTJActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障恢复时间</li>
<li class="two orange">20</li>
<li class="three green">10</li>
<li class="one">平均故障恢复时间(MTTR/min)</li>
<li class="two orange">{{ yearTarget.zsHFGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zsHFActual) > parseFloat(yearTarget.zsHFGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zsHFActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间</li>
<li class="two orange">120</li>
<li class="three green">16</li>
<li class="one">平均故障间隔时间(H)</li>
<li class="two orange">{{ yearTarget.zsJGGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zsJGActual) > parseFloat(yearTarget.zsJGGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zsJGActual || '0%' }}</li
>
</ul>
</div>
</div>
@ -141,18 +165,42 @@
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">89%</li>
<li class="three green">76%</li>
<li class="two orange">{{ yearTarget.zpTJGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zpTJActual) > parseFloat(yearTarget.zpTJGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zpTJActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障恢复时间</li>
<li class="two orange">88</li>
<li class="three green">12</li>
<li class="one">平均故障恢复时间(MTTR/min)</li>
<li class="two orange">{{ yearTarget.zpHFGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zpHFActual) > parseFloat(yearTarget.zpHFGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zpHFActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间</li>
<li class="two orange">62</li>
<li class="three red">90</li>
<li class="one">平均故障间隔时间(H)</li>
<li class="two orange">{{ yearTarget.zpJGGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.zpJGActual) > parseFloat(yearTarget.zpJGGoal)
? 'red'
: 'green'
"
>{{ yearTarget.zpJGActual || '0%' }}</li
>
</ul>
</div>
</div>
@ -168,18 +216,42 @@
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">19%</li>
<li class="three green">16%</li>
<li class="two orange">{{ yearTarget.tzTJGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.tzTJActual) > parseFloat(yearTarget.tzTJGoal)
? 'red'
: 'green'
"
>{{ yearTarget.tzTJActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障回复时间</li>
<li class="two orange">200</li>
<li class="three red">160</li>
<li class="one">平均故障恢复时间(MTTR/min)</li>
<li class="two orange">{{ yearTarget.tzHFGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.tzHFActual) > parseFloat(yearTarget.tzHFGoal)
? 'red'
: 'green'
"
>{{ yearTarget.tzHFActual || '0%' }}</li
>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间</li>
<li class="two orange">140</li>
<li class="three red">155</li>
<li class="one">平均故障间隔时间(H)</li>
<li class="two orange">{{ yearTarget.tzJGGoal || '0%' }}</li>
<li
class="three"
:class="
parseFloat(yearTarget.tzJGActual) > parseFloat(yearTarget.tzJGGoal)
? 'red'
: 'green'
"
>{{ yearTarget.tzJGActual || '0%' }}</li
>
</ul>
</div>
</div>
@ -188,43 +260,43 @@
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData1" :height="280" />
</div>
<div class="data1 ml-14px">
<div class="title">装配设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData2" :height="280" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData3" :height="280" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑平均故障恢复时间MTTR/min</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData4" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">装配平均故障恢复时间MTTR/min</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData5" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装平均故障恢复时间MTTR/min</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData6" :height="280" :key="lineIndex" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑平均故障间隔时间MTBFH</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData7" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">装配平均故障间隔时间MTBFH</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData8" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装平均故障间隔时间MTBFH</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData9" :height="280" :key="lineIndex" />
</div>
</div>
</div>
@ -232,44 +304,279 @@
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { lineOptions, pieOptions } from './echarts-data'
import { lineOptions1,lineOptions2,lineOptions3,lineOptions4,lineOptions5,lineOptions6,lineOptions7,lineOptions8,lineOptions9,lineOptions } from './echarts-data'
import * as IndexApi from '@/api/home'
const { t } = useI18n()
const data = ref()
const lineIndex = ref(0)
const yearTarget = ref({})
//
const lineOptionsData1 = reactive<EChartsOption>(lineOptions1) as EChartsOption
const lineOptionsData2 = reactive<EChartsOption>(lineOptions2) as EChartsOption
const lineOptionsData3 = reactive<EChartsOption>(lineOptions3) as EChartsOption
const lineOptionsData4 = reactive<EChartsOption>(lineOptions4) as EChartsOption
const lineOptionsData5 = reactive<EChartsOption>(lineOptions5) as EChartsOption
const lineOptionsData6 = reactive<EChartsOption>(lineOptions6) as EChartsOption
const lineOptionsData7 = reactive<EChartsOption>(lineOptions7) as EChartsOption
const lineOptionsData8 = reactive<EChartsOption>(lineOptions8) as EChartsOption
const lineOptionsData9 = reactive<EChartsOption>(lineOptions9) as EChartsOption
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getInvoiceCharts = async () => {
// set(
// lineOptionsData,
// 'xAxis.data',
// supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
// )
set(lineOptionsData, 'legend.data',['目标','实际'])
set(lineOptionsData, 'series', [
const getInvoiceCharts = async (factory, data) => {
console.log( data)
if (factory == 'ZS') {
let ZSTJAGOAL = data.TJACT.map((item) => data.TJAGOAL)
let ZSHFGOAL = data.HFACT.map((item) => data.HFGOAL)
let ZSJGGOAL = data.JGACT.map((item) => data.JGGOAL)
set(lineOptionsData1, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.TJACT
}, {
name: '目标',
smooth: true,
type: 'line',
data: ZSTJAGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
set(lineOptionsData4, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.HFACT
}, {
name: '目标',
smooth: true,
type: 'line',
data: ZSHFGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
set(lineOptionsData7, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.JGACT
}, {
name: '目标',
smooth: true,
type: 'line',
data: ZSJGGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
}else if(factory == 'ZP'){
let ZPTJAGOAL = data.TJACT.map((item) => data.TJAGOAL)
let ZPHFGOAL = data.HFACT.map((item) => data.HFGOAL)
let ZPJGGOAL = data.JGACT.map((item) => data.JGGOAL)
set(lineOptionsData2, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.TJACT
},
{
name: '注塑设备停机率',
name: '目标',
smooth: true,
type: 'line',
data: ZPTJAGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
set(lineOptionsData5, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
data: data.HFACT
}, {
name: '目标',
smooth: true,
type: 'line',
data: ZPHFGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
lineIndex.value++
set(lineOptionsData8, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.JGACT
}, {
name: '目标',
smooth: true,
type: 'line',
data: ZPJGGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
}else if(factory == 'TZ'){
let TZTJAGOAL = data.TJACT.map((item) => data.TJAGOAL)
let TZHFGOAL = data.HFACT.map((item) => data.HFGOAL)
let TZJGGOAL = data.JGACT.map((item) => data.JGGOAL)
set(lineOptionsData3, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.JGACT
},
{
name: '目标',
smooth: true,
type: 'line',
data: TZTJAGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
set(lineOptionsData6, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.HFACT
}, {
name: '目标',
smooth: true,
type: 'line',
data: TZHFGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
set(lineOptionsData9, 'series', [{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.HFACT
}, {
name: '目标',
smooth: true,
type: 'line',
data: TZJGGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
}
}
// ///
function getData() {
IndexApi.getData().then((res) => {
data.value = res
})
}
//
function getYearTarget() {
IndexApi.getYearTarget().then((res) => {
yearTarget.value = res
})
}
// 线
function getChartsData(factory) {
IndexApi.getChartsData(factory).then((res) => {
console.log(res)
getInvoiceCharts(factory, res)
})
}
onMounted(async () => {
// getInvoiceCharts()
getData()
getYearTarget()
getChartsData('ZS')
getChartsData('ZP')
getChartsData('TZ')
})
</script>
<style scoped lang="scss">

Loading…
Cancel
Save