eam
/
eam-ui
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页

master
zhang_li 8 months ago
parent
7fbb5a1167
commit
35e6e8ab44
3 changed files with 845 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/api/home/index.ts
  2. 459
      src/views/home/echarts-data.ts
  3. 453
      src/views/home/index.vue

8
src/api/home/index.ts
View File

@ -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
View File

@ -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'),

453
src/views/home/index.vue
View File

@ -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">注塑平均故障间隔时间MTBF（H）</div> <div class="title">注塑平均故障间隔时间MTBF（H）</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">装配平均故障间隔时间MTBF（H）</div> <div class="title">装配平均故障间隔时间MTBF（H）</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">涂装平均故障间隔时间MTBF（H）</div> <div class="title">涂装平均故障间隔时间MTBF（H）</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,
name: '注塑设备停机率', type: 'line',
smooth: true, itemStyle: {},
type: 'line', animationDuration: 2800,
itemStyle: {}, animationEasing: 'quadraticOut',
animationDuration: 2800, data: data.TJACT
animationEasing: 'quadraticOut', }, {
data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count) name: '目标',
} smooth: true,
]) type: 'line',
lineIndex.value++ 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: '目标',
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: data.HFACT
}, {
name: '目标',
smooth: true,
type: 'line',
data: ZPHFGOAL,
animationDuration: 2800,
animationEasing: 'quadraticOut',
itemStyle:{
opacity:0
},
lineStyle:{
type:'dotted'
}
}
])
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
console.log(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 () => { onMounted(async () => {
// getInvoiceCharts() // getInvoiceCharts()
getData() getData()
getYearTarget()
getChartsData('ZS')
getChartsData('ZP')
getChartsData('TZ')
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -298,19 +605,19 @@ onMounted(async () => {
padding: 10px 0px; padding: 10px 0px;
background: white; background: white;
.small-title { .small-title {
padding-bottom: 10px; padding-bottom: 10px;
position: relative; position: relative;
padding-left: 25px; padding-left: 25px;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #3c7adf; background: #3c7adf;
left: 15px; left: 15px;
top: 3px; top: 3px;
border-radius: 8px; border-radius: 8px;
} }
} }
.small-data { .small-data {
display: flex; display: flex;
@ -380,10 +687,10 @@ onMounted(async () => {
.data1 { .data1 {
background: white; background: white;
padding: 14px; padding: 14px;
width: calc(100% /3); width: calc(100% / 3);
} }
} }
.table-box{ .table-box {
border: 1px solid #dedede; border: 1px solid #dedede;
width: 100%; width: 100%;
} }
@ -426,7 +733,7 @@ onMounted(async () => {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.red{ .red {
color: #ff0000; color: #ff0000;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;

Write Preview
Loading…
Cancel
Save