From 83f1a68164f81a5bde29b60801150c8e8e67eb1f Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Wed, 12 Dec 2018 18:48:32 +0800
Subject: [PATCH] fixed bug

---
 src/views/electronicFile/index.vue | 387 +++++++++++++++++------------
 src/views/manageDesk/index.vue     | 216 ++++++++++------
 2 files changed, 360 insertions(+), 243 deletions(-)

diff --git a/src/views/electronicFile/index.vue b/src/views/electronicFile/index.vue
index 4ac9c01..fb1f930 100644
--- a/src/views/electronicFile/index.vue
+++ b/src/views/electronicFile/index.vue
@@ -2,7 +2,7 @@
   <div id="electronic-file">
     <div class="header">
       <div class="left">{{ technicalSupport }}</div>
-      <div class="middle">{{ topMiddleTitle }}</div>
+      <div class="middle">{{ chart10Name }}</div>
       <border-box-2 class="right">
         综合管理台
       </border-box-2>
@@ -10,20 +10,20 @@
 
     <border-box-1 class="content">
       <border-box-3 class="left">
-        <div class="left-title">{{ leftchart1StationName }}</div>
+        <div class="left-title">{{ chart1Name }}</div>
 
-        <div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart1Data ? multipleSum(...leftchart1Data.data.map(({ value }) => value)) : 0 }}</div></div>
-        <capsule-chart class="left-chart" :data="leftchart1Data" />
+        <div class="left-device-num"><div>设备运行总数</div><div>{{ chart1Data ? multipleSum(...chart1Data.data.map(({ value }) => value)) : 0 }}</div></div>
+        <capsule-chart class="left-chart" :data="chart1Data" />
 
         <decoration-2 class="left-d2" />
 
-        <div class="station-name">{{ leftchart2StationName }}</div>
-        <div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart2Data ? multipleSum(...leftchart2Data.data.map(({ value }) => value)) : 0 }}</div></div>
-        <ring-chart class="left-chart" :data="leftchart2Data" />
+        <div class="station-name">{{ chart2Name }}</div>
+        <div class="left-device-num"><div>设备运行总数</div><div>{{ chart2Data ? multipleSum(...chart2Data.data.map(({ value }) => value)) : 0 }}</div></div>
+        <ring-chart class="left-chart" :data="chart2Data" />
 
-        <div class="station-name">{{ leftchart3StationName }}</div>
-        <div class="left-device-num"><div>设备运行总数</div><div>{{ leftchart3Data ? multipleSum(...leftchart3Data.data.map(({ value }) => value)) : 0}}</div></div>
-        <capsule-chart class="left-chart" :data="leftchart3Data" />
+        <div class="station-name">{{ chart3Name }}</div>
+        <div class="left-device-num"><div>设备运行总数</div><div>{{ chart3Data ? multipleSum(...chart3Data.data.map(({ value }) => value)) : 0}}</div></div>
+        <capsule-chart class="left-chart" :data="chart3Data" />
       </border-box-3>
 
       <div class="right">
@@ -37,32 +37,32 @@
 
             <div class="rtl-device-num">
               <div class="device-num-container">
-                设备总数<number-show :number="rightTopChartData ? multipleSum(...rightTopChartData.data.map(({ value }) => value)) : 0" />
+                设备总数<number-show :number="chart10Data ? multipleSum(...chart10Data.data.map(({ value }) => value)) : 0" />
               </div>
             </div>
 
             <div class="rtl-chart-container">
               <div class="device-num-container">
                 <div class="num-item">
-                  <div>{{ rightTopChartData.data[0].value }}</div>
-                  <div>{{ rightTopChartData.data[0].title }}</div>
+                  <div>{{ chart10Data.data[0].value }}</div>
+                  <div>{{ chart10Data.data[0].title }}</div>
                 </div>
                 <div class="num-item">
-                  <div>{{ rightTopChartData.data[1].value }}</div>
-                  <div>{{ rightTopChartData.data[1].title }}</div>
+                  <div>{{ chart10Data.data[1].value }}</div>
+                  <div>{{ chart10Data.data[1].title }}</div>
                 </div>
               </div>
 
-              <ring-chart :data="rightTopChartData" />
+              <ring-chart :data="chart10Data" />
 
               <div class="device-num-container">
                 <div class="num-item">
-                  <div>{{ rightTopChartData.data[2].value }}</div>
-                  <div>{{ rightTopChartData.data[2].title }}</div>
+                  <div>{{ chart10Data.data[2].value }}</div>
+                  <div>{{ chart10Data.data[2].title }}</div>
                 </div>
                 <div class="num-item">
-                  <div>{{ rightTopChartData.data[3].value }}</div>
-                  <div>{{ rightTopChartData.data[3].title }}</div>
+                  <div>{{ chart10Data.data[3].value }}</div>
+                  <div>{{ chart10Data.data[3].title }}</div>
                 </div>
               </div>
             </div>
@@ -71,28 +71,28 @@
 
           <div class="right-top-right">
             <border-box-3 class="right-top-right-one">
-              <div class="rtr-title">{{ rightchart1StationName }}</div>
+              <div class="rtr-title">{{ chart9Name }}</div>
 
               <div class="rtr-chart-container">
                 <div class="device-num">
-                  <div>{{ rightchart1Data ? multipleSum(...rightchart1Data.data.map(({ value }) => value)) : 0 }}</div>
+                  <div>{{ chart9Data ? multipleSum(...chart9Data.data.map(({ value }) => value)) : 0 }}</div>
                   <div>设备运行总数</div>
                 </div>
 
-                <capsule-chart class="rtr-chart" :data="rightchart1Data" />
+                <capsule-chart class="rtr-chart" :data="chart9Data" />
               </div>
             </border-box-3>
 
             <border-box-4 class="right-top-right-two" :reverse="true">
-              <div class="rtr-title">{{ rightchart2StationName }}</div>
+              <div class="rtr-title">{{ chart8Name }}</div>
 
               <div class="rtr-chart-container">
                 <div class="device-num">
-                  <div>{{ rightchart2Data ? multipleSum(...rightchart2Data.data.map(({ value }) => value)) : 0}}</div>
+                  <div>{{ chart8Data ? multipleSum(...chart8Data.data.map(({ value }) => value)) : 0}}</div>
                   <div>设备运行总数</div>
                 </div>
 
-                <ring-chart class="rtr-chart" :data="rightchart2Data" />
+                <ring-chart class="rtr-chart" :data="chart8Data" />
               </div>
             </border-box-4>
           </div>
@@ -100,29 +100,29 @@
 
         <border-box-4 class="right-bottom">
           <div class="rb-item">
-            <div class="station-name">{{ bottomChart1StationName }}</div>
-            <ring-chart :data="bottomChart1Data" />
+            <div class="station-name">{{ chart4Name }}</div>
+            <ring-chart :data="chart4Data" />
           </div>
 
           <decoration-2 class="rb-d2" :reverse="true"/>
 
           <div class="rb-item">
-            <div class="station-name">{{ bottomChart2StationName }}</div>
-            <ring-chart :data="bottomChart2Data" />
+            <div class="station-name">{{ chart5Name }}</div>
+            <ring-chart :data="chart5Data" />
           </div>
 
           <decoration-2 class="rb-d2" :reverse="true"/>
 
           <div class="rb-item">
-            <div class="station-name">{{ bottomChart3StationName }}</div>
-            <ring-chart :data="bottomChart3Data" />
+            <div class="station-name">{{ chart6Name }}</div>
+            <ring-chart :data="chart6Data" />
           </div>
 
           <decoration-2 class="rb-d2" :reverse="true"/>
 
           <div class="rb-item">
-            <div class="station-name">{{ bottomChart4StationName }}</div>
-            <ring-chart :data="bottomChart4Data" />
+            <div class="station-name">{{ chart7Name }}</div>
+            <ring-chart :data="chart7Data" />
           </div>
         </border-box-4>
 
@@ -138,11 +138,11 @@ export default {
   data () {
     return {
       technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
-      topMiddleTitle: '漯周界-机电设备电子档案',
+      chart10Name: '机电设备电子档案',
 
       // 左边第一个图表数据
-      leftchart1StationName: '豫宛省界站',
-      leftchart1Data: {
+      chart1Name: '收费站',
+      chart1Data: {
         data: [
           {
             value: 85,
@@ -175,8 +175,8 @@ export default {
       },
 
       // 左边第二个图表数据
-      leftchart2StationName: '纸店收费站',
-      leftchart2Data: {
+      chart2Name: '收费站',
+      chart2Data: {
         data: [
           {
             value: 37,
@@ -210,8 +210,8 @@ export default {
       },
 
       // 左边第三个图表数据
-      leftchart3StationName: '沈丘收费站',
-      leftchart3Data: {
+      chart3Name: '收费站',
+      chart3Data: {
         data: [
           {
             value: 119,
@@ -243,24 +243,25 @@ export default {
         ]
       },
 
-      // 右边顶部图表数据
-      rightTopChartData: {
+      // 底部第一个图表数据
+      chart4Name: '收费站',
+      chart4Data: {
         data: [
           {
-            value: 1315,
-            title: '收费站'
+            value: 45,
+            title: '收费系统'
           },
           {
-            value: 415,
-            title: '监控中心'
+            value: 75,
+            title: '通信系统'
           },
           {
-            value: 90,
-            title: '道路外场'
+            value: 96,
+            title: '监控系统'
           },
           {
-            value: 317,
-            title: '其他'
+            value: 16,
+            title: '供配电系统'
           }
         ],
         color: [
@@ -273,29 +274,25 @@ export default {
         active: true
       },
 
-      // 右边第一个图表数据
-      rightchart1StationName: '漯周界高速监控中心',
-      rightchart1Data: {
+      // 底部第一个图表数据
+      chart5Name: '收费站',
+      chart5Data: {
         data: [
           {
-            value: 80,
+            value: 129,
             title: '收费系统'
           },
           {
-            value: 12,
+            value: 15,
             title: '通信系统'
           },
           {
-            value: 126,
+            value: 22,
             title: '监控系统'
           },
           {
-            value: 36,
+            value: 64,
             title: '供配电系统'
-          },
-          {
-            value: 8,
-            title: '其他'
           }
         ],
         color: [
@@ -304,12 +301,75 @@ export default {
           '#ffffff',
           '#ffc53d',
           '#469f4b'
-        ]
+        ],
+        active: true
+      },
+
+      // 底部第一个图表数据
+      chart6Name: '收费站',
+      chart6Data: {
+        data: [
+          {
+            value: 88,
+            title: '收费系统'
+          },
+          {
+            value: 57,
+            title: '通信系统'
+          },
+          {
+            value: 23,
+            title: '监控系统'
+          },
+          {
+            value: 110,
+            title: '供配电系统'
+          }
+        ],
+        color: [
+          '#00baff',
+          '#3de7c9',
+          '#ffffff',
+          '#ffc53d',
+          '#469f4b'
+        ],
+        active: true
+      },
+
+      // 底部第一个图表数据
+      chart7Name: '收费站',
+      chart7Data: {
+        data: [
+          {
+            value: 15,
+            title: '收费系统'
+          },
+          {
+            value: 110,
+            title: '通信系统'
+          },
+          {
+            value: 23,
+            title: '监控系统'
+          },
+          {
+            value: 66,
+            title: '供配电系统'
+          }
+        ],
+        color: [
+          '#00baff',
+          '#3de7c9',
+          '#ffffff',
+          '#ffc53d',
+          '#469f4b'
+        ],
+        active: true
       },
 
       // 右边第二个图表数据
-      rightchart2StationName: '漯周界高速服务区',
-      rightchart2Data: {
+      chart8Name: '收费站',
+      chart8Data: {
         data: [
           {
             value: 100,
@@ -342,25 +402,58 @@ export default {
         active: false
       },
 
-      // 底部第一个图表数据
-      bottomChart1StationName: '项城收费站',
-      bottomChart1Data: {
+      // 右边第一个图表数据
+      chart9Name: '收费站',
+      chart9Data: {
         data: [
           {
-            value: 45,
+            value: 80,
             title: '收费系统'
           },
           {
-            value: 75,
+            value: 12,
             title: '通信系统'
           },
           {
-            value: 96,
+            value: 126,
             title: '监控系统'
           },
           {
-            value: 16,
+            value: 36,
             title: '供配电系统'
+          },
+          {
+            value: 8,
+            title: '其他'
+          }
+        ],
+        color: [
+          '#00baff',
+          '#3de7c9',
+          '#ffffff',
+          '#ffc53d',
+          '#469f4b'
+        ]
+      },
+
+      // 右边顶部图表数据
+      chart10Data: {
+        data: [
+          {
+            value: 1315,
+            title: '收费站'
+          },
+          {
+            value: 415,
+            title: '监控中心'
+          },
+          {
+            value: 90,
+            title: '道路外场'
+          },
+          {
+            value: 317,
+            title: '其他'
           }
         ],
         color: [
@@ -373,102 +466,66 @@ export default {
         active: true
       },
 
-      // 底部第一个图表数据
-      bottomChart2StationName: '周口收费站',
-      bottomChart2Data: {
-        data: [
-          {
-            value: 129,
-            title: '收费系统'
-          },
-          {
-            value: 15,
-            title: '通信系统'
-          },
-          {
-            value: 22,
-            title: '监控系统'
-          },
-          {
-            value: 64,
-            title: '供配电系统'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      },
+      color: [
+        '#00baff',
+        '#3de7c9',
+        '#ffffff',
+        '#ffc53d',
+        '#469f4b'
+      ],
 
-      // 底部第一个图表数据
-      bottomChart3StationName: '谭庄收费站南',
-      bottomChart3Data: {
-        data: [
-          {
-            value: 88,
-            title: '收费系统'
-          },
-          {
-            value: 57,
-            title: '通信系统'
-          },
-          {
-            value: 23,
-            title: '监控系统'
-          },
-          {
-            value: 110,
-            title: '供配电系统'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      },
-
-      // 底部第一个图表数据
-      bottomChart4StationName: '谭庄收费站北',
-      bottomChart4Data: {
-        data: [
-          {
-            value: 15,
-            title: '收费系统'
-          },
-          {
-            value: 110,
-            title: '通信系统'
-          },
-          {
-            value: 23,
-            title: '监控系统'
-          },
-          {
-            value: 66,
-            title: '供配电系统'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      }
+      path: '/rest/datav/device/interface/list',
+      paths: []
     }
   },
-  methods: {},
-  created () {}
+  methods: {
+    async init () {
+      const { getAllPaths, getChartsData } = this
+
+      await getAllPaths()
+
+      await getChartsData()
+    },
+    getAllPaths () {
+      const { path, $http: { get } } = this
+
+      return get(path).then(({ code, data }) => {
+        if (code === 'success') {
+          this.paths = data.interfaces
+        } else {
+          console.error('数据返回异常!')
+        }
+      }).catch(e => {
+        console.error('DataV接口数据异常!')
+      })
+    },
+    getChartsData () {
+      const { paths, getChartData, getChartsData } = this
+
+      return Promise.all(paths.map(path => getChartData(path))).then(e => setTimeout(getChartsData, 30000))
+    },
+    async getChartData ({ number, url }) {
+      const { $http: { get }, color } = this
+
+      return get(url).then(({ code, data }) => {
+        if (code === 'success') {
+          this[`chart${number}Name`] = data.name
+          this[`chart${number}Data`] = {
+            data: data.data,
+            color,
+            active: !(number === 2 || number === 8)
+          }
+        } else {
+          console.error(`${number}接口异常`)
+        }
+      }).catch(e => console.error(`${number}接口异常`))
+    }
+  },
+  created () {
+    const { init } = this
+
+    init()
+  }
 }
 </script>
 
diff --git a/src/views/manageDesk/index.vue b/src/views/manageDesk/index.vue
index 9b65f35..434a867 100644
--- a/src/views/manageDesk/index.vue
+++ b/src/views/manageDesk/index.vue
@@ -23,30 +23,30 @@
 
           <border-box-5 class="top-left-box-1">
             <div class="tlb-text">
-              <div>{{ topLeftCard1Data[0] }}</div>
-              <div class="small-text">{{ topLeftCard1Data[1] }}</div>
-              <div class="small-text">{{ topLeftCard1Data[2] }}</div>
+              <div>{{ chart1Data.monthSum }}</div>
+              <div class="small-text">{{ chart1Data.lastMonthSum }}</div>
+              <div class="small-text">{{ chart1Data.lastYearMonthSum }}</div>
             </div>
           </border-box-5>
 
           <border-box-5 class="top-left-box-2" :reverse="true">
             <div class="tlb-text">
-              <div>{{ topLeftCard2Data[0] }}</div>
-              <div class="small-text">{{ topLeftCard2Data[1] }}</div>
-              <div class="small-text">{{ topLeftCard2Data[2] }}</div>
+              <div>{{ chart1Data.personDayAvg }}</div>
+              <div class="small-text">{{ chart1Data.personLastMonthDayAvg }}</div>
+              <div class="small-text">{{ chart1Data.personLastYearMonthDayAvg }}</div>
             </div>
           </border-box-5>
         </div>
 
         <div class="top-right">
-          <polyline-chart :data="topRightChart1Data">
+          <polyline-chart :data="chart2Data">
             <div class="title-item">
               设备完好率月趋势
               <decoration-3 />
             </div>
           </polyline-chart>
 
-          <polyline-chart :data="topRightChart2Data">
+          <polyline-chart :data="chart3Data">
             <div class="title-item">
               设备故障月趋势
               <decoration-3 />
@@ -62,13 +62,13 @@
 
           <div class="bottom-left-item">
             <div class="bli-title">机电设备完好率</div>
-            <div class="bli-value left-value">99.06</div>
-            <arc-ring-chart class="bli-chart" :data="bottomLeftChart1Data" />
+            <div class="bli-value left-value">{{ chart4Data.deviceNormalPercent }}</div>
+            <arc-ring-chart class="bli-chart" :data="chart4Data.data" />
           </div>
           <div class="bottom-left-item">
             <div class="bli-title">任务维修平均用时</div>
-            <div class="bli-value right-value">55.0</div>
-            <concentric-arc-chart class="bli-chart" :data="bottomLeftChart2Data" />
+            <div class="bli-value right-value">{{ chart5Data.avgTime}}</div>
+            <concentric-arc-chart class="bli-chart" :data="chart5Data.data" />
           </div>
         </border-box-6>
 
@@ -78,7 +78,7 @@
               <img src="./img/1.png" />人员贡献排行榜
             </div>
 
-            <scroll-board :data="bottomRightScrollBorad1Data" />
+            <scroll-board :data="chart6Data" />
           </border-box-6>
 
           <border-box-6 class="bottom-right-item">
@@ -86,7 +86,7 @@
               <img src="./img/2.png" />故障设备排行榜
             </div>
 
-            <scroll-board :data="bottomRightScrollBorad2Data" />
+            <scroll-board :data="chart7Data" />
           </border-box-6>
 
           <border-box-6 class="bottom-right-item">
@@ -102,7 +102,7 @@
               <img src="./img/4.png" />故障位置排行榜
             </div>
 
-            <scroll-board :data="bottomRightScrollBorad4Data" />
+            <scroll-board :data="chart9Data" />
           </border-box-6>
         </div>
       </div>
@@ -116,15 +116,20 @@ export default {
   data () {
     return {
       technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
-      topMiddleTitle: '漯周界-机电运维管理台',
+      topMiddleTitle: '机电运维管理台',
 
-      // 上部左边第一个卡片数据
-      topLeftCard1Data: ['22.0', '66', '0'],
-      // 上部左边第二个卡片数据
-      topLeftCard2Data: ['0.1', '66', '0'],
+      // 上部左边卡片数据
+      chart1Data: {
+        monthSum: 0,
+        lastMonthSum: 81,
+        lastYearMonthSum: 0,
+        personDayAvg: 0.1,
+        personLastMonthDayAvg: 0.3,
+        personLastYearMonthDayAvg: 0
+      },
 
       // 上部右边第一个图表数据
-      topRightChart1Data: {
+      chart2Data: {
         data: [
           {
             data: [
@@ -154,11 +159,12 @@ export default {
           fixed: 2,
           num: 10,
           unit: '%'
-        }
+        },
+        labelLine: ['设备完好率']
       },
 
       // 上部右边第二个图表数据
-      topRightChart2Data: {
+      chart3Data: {
         data: [
           {
             data: [
@@ -221,64 +227,70 @@ export default {
       },
 
       // 底部左边第一个图表数据
-      bottomLeftChart1Data: {
-        data: [
-          {
-            value: 19,
-            title: '监控系统'
-          },
-          {
-            value: 16,
-            title: '收费系统'
-          },
-          {
-            value: 24,
-            title: '通信系统'
-          },
-          {
-            value: 14,
-            title: '供配电系统'
-          },
-          {
-            value: 27,
-            title: '其他'
-          }
-        ],
-        color: ['#00c0ff', '#3de7c9', '#fff']
+      chart4Data: {
+        data: {
+          data: [
+            {
+              value: 19,
+              title: '监控系统'
+            },
+            {
+              value: 16,
+              title: '收费系统'
+            },
+            {
+              value: 24,
+              title: '通信系统'
+            },
+            {
+              value: 14,
+              title: '供配电系统'
+            },
+            {
+              value: 27,
+              title: '其他'
+            }
+          ],
+          color: ['#00c0ff', '#3de7c9', '#fff']
+        },
+        deviceNormalPercent: 99.01
       },
 
       // 底部左边第二个图表数据
-      bottomLeftChart2Data: {
-        data: [
-          {
-            value: 0.38,
-            title: '8小时以内'
-          },
-          {
-            value: 0.57,
-            title: '24小时以内'
-          },
-          {
-            value: 0.7,
-            title: '48小时以内'
-          },
-          {
-            value: 0.78,
-            title: '72小时以内'
-          },
-          {
-            value: 0.22,
-            title: '大于72小时'
-          }
-        ],
-        color: ['#00c0ff', '#3de7c9'],
-        arcArea: [0.3, 0.7],
-        arcGap: 5,
-        fontSize: 12
+      chart5Data: {
+        data: {
+          data: [
+            {
+              value: 0.38,
+              title: '8小时以内'
+            },
+            {
+              value: 0.57,
+              title: '24小时以内'
+            },
+            {
+              value: 0.7,
+              title: '48小时以内'
+            },
+            {
+              value: 0.78,
+              title: '72小时以内'
+            },
+            {
+              value: 0.22,
+              title: '大于72小时'
+            }
+          ],
+          color: ['#00c0ff', '#3de7c9'],
+          arcArea: [0.3, 0.7],
+          arcGap: 5,
+          fontSize: 12
+        },
+        avgTime: 55.1
       },
 
       // 底部右边第一个滚动榜单数据
-      bottomRightScrollBorad1Data: {
+      chart6Data: {
         data: [
           {
             title: '赵亚伟',
@@ -317,7 +329,7 @@ export default {
       },
 
       // 底部右边第二个滚动榜单数据
-      bottomRightScrollBorad2Data: {
+      chart7Data: {
         data: [
           {
             title: '液晶显示器',
@@ -379,7 +391,7 @@ export default {
       },
 
       // 底部右边第四个滚动榜单数据
-      bottomRightScrollBorad4Data: {
+      chart9Data: {
         data: [
           {
             title: '收费广场',
@@ -403,10 +415,58 @@ export default {
           }
         ],
         showItemNum: 4
-      }
+      },
+
+      path: '/rest/datav/manage/interface/list',
+      paths: []
+    }
+  },
+  methods: {
+    async init () {
+      const { getAllPaths, getChartsData } = this
+
+      await getAllPaths()
+
+      await getChartsData()
+    },
+    getAllPaths () {
+      const { path, $http: { get } } = this
+
+      return get(path).then(({ code, data }) => {
+        if (code === 'success') {
+          this.paths = data.interfaces
+
+          this.topMiddleTitle = data.title
+        } else {
+          console.error('数据返回异常!')
+        }
+      }).catch(e => {
+        console.error('DataV接口数据异常!')
+      })
+    },
+    getChartsData () {
+      const { paths, getChartData, getChartsData } = this
+
+      return Promise.all(paths.map(path => getChartData(path))).then(e => setTimeout(getChartsData, 30000))
+    },
+    async getChartData ({ number, url }) {
+      const { $http: { get } } = this
+
+      if (!url) return
+
+      return get(url).then(({ code, data }) => {
+        if (code === 'success') {
+          this[`chart${number}Data`] = data
+        } else {
+          console.error(`${number}接口异常`)
+        }
+      }).catch(e => console.error(`${number}接口异常`))
     }
   },
   created () {
+    const { init } = this
+
+    init()
   }
 }
 </script>