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
Split 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` })
}
// 获取年度指标
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()
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'),

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

@ -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="two-row mt-14px">
<div class="data1">
<div class="title">注塑平均故障间隔时间MTBF（H）</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData7" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">装配平均故障间隔时间MTBF（H）</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
<Echart :options="lineOptionsData8" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装平均故障间隔时间MTBF（H）</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', [
{
name: '注塑设备停机率',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
}
])
lineIndex.value++
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: '目标',
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(){
IndexApi.getData().then((res)=>{
data.value = res
console.log(res)
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">
@ -298,19 +605,19 @@ onMounted(async () => {
padding: 10px 0px;
background: white;
.small-title {
padding-bottom: 10px;
position: relative;
padding-left: 25px;
padding-bottom: 10px;
position: relative;
padding-left: 25px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 15px;
top: 3px;
border-radius: 8px;
}
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 15px;
top: 3px;
border-radius: 8px;
}
}
.small-data {
display: flex;
@ -380,10 +687,10 @@ onMounted(async () => {
.data1 {
background: white;
padding: 14px;
width: calc(100% /3);
width: calc(100% / 3);
}
}
.table-box{
.table-box {
border: 1px solid #dedede;
width: 100%;
}
@ -426,7 +733,7 @@ onMounted(async () => {
font-size: 18px;
font-weight: bold;
}
.red{
.red {
color: #ff0000;
font-size: 18px;
font-weight: bold;

Write Preview
Loading…
Cancel
Save