From 35e6e8ab445a97b586346a4f4f2f0e1368229817 Mon Sep 17 00:00:00 2001
From: zhang_li <2235006734@qqq.com>
Date: Mon, 1 Apr 2024 09:57:50 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home/index.ts          |   8 +
 src/views/home/echarts-data.ts | 459 ++++++++++++++++++++++++++++++++-
 src/views/home/index.vue       | 453 ++++++++++++++++++++++++++------
 3 files changed, 845 insertions(+), 75 deletions(-)

diff --git a/src/api/home/index.ts b/src/api/home/index.ts
index b02f396..62ed75b 100644
--- a/src/api/home/index.ts
+++ b/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 })
+}
diff --git a/src/views/home/echarts-data.ts b/src/views/home/echarts-data.ts
index 0768782..0239b0c 100644
--- a/src/views/home/echarts-data.ts
+++ b/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'),
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f20cd10..c833f88 100644
--- a/src/views/home/index.vue
+++ b/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="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;