ljlong_2630 8 months ago
parent
commit
4d7e0b30e7
  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` }) 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() 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 = { export const lineOptions: EChartsOption = {
xAxis: { xAxis: {
@ -50,11 +500,16 @@ export const lineOptions: EChartsOption = {
itemStyle: {}, itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123], data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800, animationDuration: 2800,
animationEasing: 'quadraticOut' animationEasing: 'quadraticOut',
markLine: {
data: [{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
}]
}
} }
] ]
} }
export const pieOptions: EChartsOption = { export const pieOptions: EChartsOption = {
// title: { // title: {
// text: t('analysis.userAccessSource'), // text: t('analysis.userAccessSource'),

397
src/views/home/index.vue

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

Loading…
Cancel
Save