diff --git a/src/componets/HomePage/cardComponet.vue b/src/componets/HomePage/cardComponet.vue
index 9b1f1e232413c99ea9cc47e2f8963af18baa4c0d..85932ee405cde2034aeaf19b339f1f70d7d3754c 100644
--- a/src/componets/HomePage/cardComponet.vue
+++ b/src/componets/HomePage/cardComponet.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: Ryker
  * @Date: 2022-08-07 10:50:51
- * @LastEditors: 最后编辑
- * @LastEditTime: 2022-08-08 22:45:31
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-25 05:41:45
 -->
 <template>
 <div class="lastAll">
@@ -33,7 +33,7 @@ export default {
 
 <style scoped>
 .all {
-    padding: 1rem;
+    padding: 1rem 0 1rem 2rem;
     background-color: black;
     display: flex;
     align-items: center;
diff --git a/src/componets/HomePage/eightGraph.vue b/src/componets/HomePage/eightGraph.vue
index 454c021a47ad64ee7874495be4136387b2c8c358..cdeaba4d957a29a62b7eddba1a2e870d47179f73 100644
--- a/src/componets/HomePage/eightGraph.vue
+++ b/src/componets/HomePage/eightGraph.vue
@@ -1,14 +1,14 @@
 <!--
  * @Author: Ryker
  * @Date: 2022-08-06 23:24:20
- * @LastEditors: 最后编辑
- * @LastEditTime: 2022-08-07 10:13:30
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-25 09:45:53
 -->
 <template>
 <div class="mmain">
     <div class="main8">
-    <title-component :na="na"></title-component>
-    <div id="main8" style="height: calc((100vw / 7 * 2 - 99px) * 0.67); width: calc(100vw / 7 * 2 - 99px)"></div>
+        <title-component :na="na"></title-component>
+        <div id="main8" style="height: calc((100vw / 7 * 2 - 99px) * 0.67); width: calc(100vw / 7 * 2 - 99px)"></div>
     </div>
 </div>
 </template>
@@ -17,80 +17,101 @@
 import titleComponent from '@/componets/HomePage/titleComponent.vue'
 // import titleComponent from '@/componets/HomePage/titleComponent.vue';
 export default {
-  components: { titleComponent },
+    components: {
+        titleComponent
+    },
     name: 'eightGraph',
     comments: {
         titleComponent
     },
     data() {
         return {
-            jiekouTime:  ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30']|| [],
+            jiekouTime: ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30'] || [],
             jiekouErrorNumber: [10, 52, 200, 334, 390, 330, 220] || [],
             na: '接口错误趋势',
         }
     },
-    mounted() {
-        var chartDom4 = document.getElementById('main8');
-        var myChart4 = this.$echarts.init(chartDom4, 'dark');
-        var option4;
+    methods: {
+        async getInfo() {
+            const res = await this.$req.get('/httpErrorPerDay')
+            const data = res.data
+            if(data.status === 0) {
+                const ans = data._7dayErrors
+                this.jiekouTime = []
+                this.jiekouErrorNumber = []
+                this.jiekouTime = ans.map((item) => item.day.slice(-4))
+                this.jiekouErrorNumber = ans.map((item) => item.count)
+                this.getPicture()
+            } else {
+                console.log('出现错误')
+            }
+        },
+        getPicture() {
+            var chartDom4 = document.getElementById('main8');
+            var myChart4 = this.$echarts.init(chartDom4, 'dark');
+            var option4;
 
-        option4 = {
-            backgroundColor: '#000000',
-            // title: {
-            //     text: '接口错误趋势'
-            // },
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
-            },
-            grid: {
-                left: '3%',
-                right: '4%',
-                bottom: '3%',
-                containLabel: true
-            },
-            xAxis: [{
-                type: 'category',
-                data: this.jiekouTime,
-                axisTick: {
-                    alignWithLabel: true
-                }
-            }],
-            yAxis: [{
-                type: 'value',
-                splitLine: {
-                    show: false
-                }
-            }],
-            series: [{
-                name: 'Direct',
-                type: 'bar',
-                barWidth: '60%',
-                data: this.jiekouErrorNumber,
-                color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 1,
-                    y2: 1,
-                    colorStops: [{
-                            offset: 0,
-                            color: '#6BE6C1' // 0% 处的颜色
-                        },
-                        {
-                            offset: 1,
-                            color: '#1A70F3' // 100% 处的颜色
-                        }
-                    ],
-                    global: false // 缺省为 false
-                }
-            }]
-        };
+            option4 = {
+                backgroundColor: '#000000',
+                // title: {
+                //     text: '接口错误趋势'
+                // },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: [{
+                    type: 'category',
+                    data: this.jiekouTime,
+                    axisTick: {
+                        alignWithLabel: true
+                    }
+                }],
+                yAxis: [{
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    }
+                }],
+                series: [{
+                    name: 'Direct',
+                    type: 'bar',
+                    barWidth: '60%',
+                    data: this.jiekouErrorNumber,
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 1,
+                        colorStops: [{
+                                offset: 0,
+                                color: '#6BE6C1' // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: '#1A70F3' // 100% 处的颜色
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                }]
+            };
 
-        myChart4.setOption(option4);
+            myChart4.setOption(option4);
 
+        }
+    },
+    mounted() {
+        this.getInfo()
     }
 }
 </script>
diff --git a/src/componets/HomePage/firstGraph.vue b/src/componets/HomePage/firstGraph.vue
index 3aedab40917b257f507b719dfc88b235c798d01e..d7571669010cb57a756599bb1ab197cd29c06f05 100644
--- a/src/componets/HomePage/firstGraph.vue
+++ b/src/componets/HomePage/firstGraph.vue
@@ -27,7 +27,8 @@ export default {
       na: 'JS报错趋势统计',
     }
   },
-  mounted() {
+  methods: {
+    getPicture() {
     const chartDom = document.getElementById('main')
     const myChart = this.$echarts.init(chartDom, 'dark')
     let option = {
@@ -145,6 +146,26 @@ export default {
       ],
     }
     myChart.setOption(option)
+    },
+    async getInfo() {
+      const res = await this.$req.get('/jsErrorBoth')
+      const data = res.data
+      if(data.status === 0) {
+        const async_error = data.result.async_error.map((item) => item.errorCount)
+        const sync_error = data.result.sync_error.map((item) => item.errorCount)
+        const date = data.result.async_error.map((item) => item.day)
+        this.time = date
+        this.jsErrorNumberTong = sync_error
+        this.jsErrorNumberYi = async_error
+        this.getPicture()
+      } else {
+        console.log('出现错误')
+      }
+    }
+  },
+  mounted() {
+    this.getInfo()
+    
   },
 }
 </script>
diff --git a/src/componets/HomePage/homeHeader.vue b/src/componets/HomePage/homeHeader.vue
index d858bc67bfe01eabd647dbf70a8577ef25233d83..ba2f2bc12797011b1fdedf2a4b26fd1c6e30a119 100644
--- a/src/componets/HomePage/homeHeader.vue
+++ b/src/componets/HomePage/homeHeader.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: Ryker
  * @Date: 2022-08-06 09:27:47
- * @LastEditors: 最后编辑
- * @LastEditTime: 2022-08-09 09:29:38
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-25 06:23:50
 -->
 <template>
 <div class="header">
@@ -29,8 +29,34 @@ export default {
         return {
             realTime: '14:54:45',
             day: 'WED',
-            clearDay: '2020.07.30'
+            clearDay: '2020.07.30',
+            months: {'Jan': '01', 'Feb': '02', 'Mar': '03','Apr':'04', 'May':'05', 'Jun': '06', 'Jul': '07', 'Aug': '08', 'Sep': '09', 'Oct': '10', 'Nov': '11', 'Dec':'12' }
         }
+    },
+    mounted() {
+        let time = new Date()
+        let timeStr = time + ''
+        let day = timeStr.slice(0,3)
+        this.day = day
+        var reg = /[0-9]{2}:[0-9]{2}:[0-9]{2}/
+        let val = timeStr.match(reg)
+        this.realTime = val[0]
+        const yearReg = /[0-9]{4}/
+        const year = timeStr.match(yearReg)
+        const dayReg = /[0-9]+/
+        const Day = timeStr.match(dayReg)
+        const monthReg = /\w{3}/g
+        let engMonth = timeStr.match(monthReg)
+        const month = this.months[engMonth[1]]
+        this.clearDay = year + '.' + month + '.' + Day
+        setInterval(() => {
+            let time1 = new Date()
+            let reg1 = /[0-9]{2}:[0-9]{2}:[0-9]{2}/
+            let val1 = (time1 + '').match(reg1)
+            this.realTime = val1[0]
+        }, 1000)
+    },
+    methods: {
     }
 }
 </script>
diff --git a/src/componets/HomePage/nineGraph.vue b/src/componets/HomePage/nineGraph.vue
index f3f9e89483b1bfd870710ad318a5355b2e5db18d..416e7017d0bac632f388f1afa4907cfbc4a7327e 100644
--- a/src/componets/HomePage/nineGraph.vue
+++ b/src/componets/HomePage/nineGraph.vue
@@ -1,18 +1,20 @@
 <!--
  * @Author: Ryker
  * @Date: 2022-08-07 10:44:01
- * @LastEditors: 最后编辑
- * @LastEditTime: 2022-08-08 22:27:49
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-25 09:46:06
 -->
 <template>
 <div class="mainContainer9">
     <!-- <div class="leftPart"></div> -->
     <div class="rightPart">
         <div class="words9">接口错误记录</div>
-        <card-componet class="card-componet" :status="status" :method="method" :link="link" :time="time"></card-componet>
-        <card-componet class="card-componet" :status="status" :method="method" :link="link" :time="time"></card-componet>
-        <card-componet class="card-componet" :status="status" :method="method" :link="link" :time="time"></card-componet>
-        <!-- <card-componet :status="status" :method="method" :link="link" :time="time"></card-componet> -->
+        <card-componet class="card-componet" :status="status[0]" :method="method[0]" :link="link[0]" :time="time[0]"></card-componet>
+        <card-componet class="card-componet" :status="status[1]" :method="method[1]" :link="link[1]" :time="time[1]"></card-componet>
+        <card-componet class="card-componet" :status="status[2]" :method="method[2]" :link="link[2]" :time="time[2]"></card-componet>
+        <!-- <card-componet :status="200" :method="get" :link="213" :time="132"></card-componet>
+        <card-componet :status="200" :method="get" :link="123" :time="312"></card-componet>
+        <card-componet :status="200" :method="get" :link="321" :time="312"></card-componet> -->
     </div>
 </div>
 </template>
@@ -23,14 +25,35 @@ export default {
     name: 'nineGraph',
     data() {
         return {
-            status: 404,
-            method: 'get',
-            link: 'https//www.rykerfeng.cn',
-            time: '11:01:59'
+            status: [],
+            method: [],
+            link: [],
+            time: []
         }
     },
     components: {
         cardComponet
+    },
+    mounted() {
+        this.getThreeError()
+    },
+    methods: {
+        getThreeError() {
+            this.$req.get('/last3error')
+            .then(res => {
+                if(res.status === 0) {
+                    const data = res.last3error
+                    for(let i=0;i<data.length;i++) {
+                        this.status.push(data[i].statusCode)
+                        this.method.push(data[i].method)
+                        this.link.push(data[i].url)
+                        this.link.push(data[i].timeStamp)
+                    }
+                } else {
+                    console.log('出现错误')
+                }
+            })
+        }
     }
 }
 </script>
diff --git a/src/componets/HomePage/secondGraph.vue b/src/componets/HomePage/secondGraph.vue
index 295442462e6ac2333c4794944c4890482935b93f..81ef5a42a38e6913834149fcaa4db146187f1c99 100644
--- a/src/componets/HomePage/secondGraph.vue
+++ b/src/componets/HomePage/secondGraph.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: Ryker
  * @Date: 2022-08-06 16:25:18
- * @LastEditors: 最后编辑
- * @LastEditTime: 2022-08-08 21:20:17
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-25 06:55:38
 -->
 <template>
 <div class="mainContainer1">
@@ -12,21 +12,21 @@
             <div class="top">
                 <div class="firstPart">
                     <p class="titl">FP平均时间（ms）</p>
-                    <p class="center">{{FD}}</p>
+                    <p class="center">{{FP}}</p>
                 </div>
                 <div class="secondPart">
                     <p class="titl">FCP平均时间(ms)</p>
-                    <p class="center">{{FCD}}</p>
+                    <p class="center">{{FCP}}</p>
                 </div>
             </div>
             <div class="line"></div>
             <div class="bottom">
                 <div class="thirdPart">
-                <p class="titl">FPT平均时间(ms)</p>
-                    <p class="center">{{FPT}}</p></div>
+                <p class="titl">FMP平均时间(ms)</p>
+                    <p class="center">{{FMP}}</p></div>
                 <div class="fourPart">
-                    <p class="titl">组件平均加载时间(ms)</p>
-                    <p class="center">{{averageTime}}</p></div>
+                    <p class="titl">LCP平均时间(ms)</p>
+                    <p class="center">{{LCP}}</p></div>
             </div>
         </div>
 </div>
@@ -41,13 +41,36 @@ export default {
     },  
     data() {
         return {
-            FD: 159.91,
-            FCD: 158.91,
-            FPT: 158.91,
-            averageTime: 158.91,
+            FP: 0,
+            FCP: 0,
+            FMP: 0,
+            LCP: 0,
             na: '页面性能'
         }
     },
+    mounted() {
+        this.getInfo()
+    },
+    methods: {
+        async getInfo() {
+            const res = await this.$req.get('https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp/paintTime')
+            const data = res.data.result
+            for(let i=0;i<data.length;i++) {
+                this.FP += parseInt(data[i].firstPaint)
+                this.FCP += data[i].firstContentfulPaint
+                this.FMP += data[i].firstMeaningfulPaint
+                this.LCP += data[i].largestContentfulPaint
+            }
+            this.FP /= 7
+            this.FCP /= 7
+            this.FMP /= 7
+            this.LCP /= 7
+            this.FP = this.FP.toFixed(2)
+            this.FCP = this.FCP.toFixed(2)
+            this.FMP = this.FMP.toFixed(2)
+            this.LCP = this.LCP.toFixed(2)
+        }
+    }
 }
 </script>
 
diff --git a/src/componets/HomePage/sevenGraph.vue b/src/componets/HomePage/sevenGraph.vue
index 956988c30a6e0727a99e7433be753b6d754d91d3..9680a1554a7fdbac61bfa67f3a3a9a134a718b9a 100644
--- a/src/componets/HomePage/sevenGraph.vue
+++ b/src/componets/HomePage/sevenGraph.vue
@@ -28,7 +28,7 @@ export default {
   methods: {
     mapInit() {
       console.log('xxx')
-      const url = 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dbf199cb27ad46839fbab926b8f94e66~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?'
+      const url = 'https://ts1.cn.mm.bing.net/th/id/R-C.c8aa5b13b875046fd170ccd63ac83b03?rik=5WWm2eKgnMHRjQ&riu=http%3a%2f%2fpic.52112.com%2f180802%2fEPS-180802_30%2fPWi96G55rR_small.jpg&ehk=JpJPP1P%2b8SxZAqWYJhNYM9PcqRdx2MCXxloktLeWu%2fc%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
       this.myChart.setOption({
         backgroundColor: '#000', //背景颜色
         globe: {
diff --git a/src/componets/HomePage/thirdGraph.vue b/src/componets/HomePage/thirdGraph.vue
index 093691866bdaf94a9d254cc22fc7611e3586d5f8..28bce1b8a2dbc4dc188696e3156671c343e5cdf9 100644
--- a/src/componets/HomePage/thirdGraph.vue
+++ b/src/componets/HomePage/thirdGraph.vue
@@ -1,217 +1,217 @@
 <!--
  * @Author: Ryker
  * @Date: 2022-08-06 20:24:35
- * @LastEditors: 最后编辑
- * @LastEditTime: 2022-08-08 21:44:32
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-25 09:38:37
 -->
 <template>
-  <div style="display: flex; justify-content: left; flex-direction: column">
+<div style="display: flex; justify-content: left; flex-direction: column">
     <title-component :na="na"></title-component>
-    <div
-      style="display: flex; justify-content: left; flex-direction: row"
-      class="container3"
-    >
-      <div id="main1" style="width: calc((100vw / 7 * 2 - 64px) * 5 / 8)"></div>
-      <four-graph :loadData="loadData" ref="four"></four-graph>
+    <div style="display: flex; justify-content: left; flex-direction: row" class="container3">
+        <div id="main1" style="width: calc((100vw / 7 * 2 - 64px) * 5 / 8)"></div>
+        <four-graph :loadData="loadData" ref="four"></four-graph>
     </div>
-  </div>
+</div>
 </template>
 
 <script>
 import titleComponent from './titleComponent.vue'
 // import titleComponent from '@/componets/HomePage/title.vue';
 import fourGraph from './fourGraph.vue'
-import { getLoadArr } from '@/services/performance'
+import {
+    getLoadArr
+} from '@/services/performance'
 
 export default {
-  name: 'thirdGraph',
-  components: {
-    titleComponent,
-    fourGraph,
-  },
-  data() {
-    return {
-      na: '页面访问速度分布',
-      loadArr: [],
-      best: 0,
-      good: 0,
-      bad: 0,
-      badest: 0,
-      loadData: [],
-    }
-  },
-  methods: {
-    async getLoadArr() {
-      const res = await getLoadArr()
-      this.loadArr = res.data.result
-      this.loadArr.forEach((item) => {
-        if (item.loadTime < 1000) {
-          this.best++
-        } else if (item.loadTime < 3000) {
-          console.log(item.loadTime)
-          this.good++
-        } else if (item.loadTime < 5000) {
-          this.bad++
-        } else {
-          this.badest++
+    name: 'thirdGraph',
+    components: {
+        titleComponent,
+        fourGraph,
+    },
+    data() {
+        return {
+            na: '页面访问速度分布',
+            loadArr: [],
+            best: 0,
+            good: 0,
+            bad: 0,
+            badest: 0,
+            loadData: [],
         }
-      })
-      this.loadData.push(this.best)
-      this.loadData.push(this.good)
-      this.loadData.push(this.bad)
-      this.loadData.push(this.badest)
-      this.$refs.four.getData()
     },
-  },
-  mounted() {
-    this.getLoadArr()
-    const chartDom1 = document.getElementById('main1')
-    const myChart1 = this.$echarts.init(chartDom1, 'dark')
-    var option1
-
-    const seriesLabel = {
-      show: true,
-      position: 'right',
-    }
-    option1 = {
-      grid: {
-        left: '10%',
-        // right: '30%',
-        bottom: '0%',
-        top: '0%',
-        containLabel: true,
-      },
-      backgroundColor: '#000000',
-      // title: {
-      //     text: '页面访问速度分布',
-      //     textStyle: {
-      //         fontFamily: "Alibaba",
-      //         fontSize: 18,
-      //         color: "#fff",
-      //     }
-      // },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
-      // grid: {
-      //     left: 100
-      // },
-      // toolbox: {
-      //   show: true,
-      //   feature: {
-      //     saveAsImage: {}
-      //   }
-      // },
-      xAxis: {
-        type: 'value',
-        show: false,
-        axisLabel: {
-          formatter: '{value}',
-        },
-        splitLine: {
-          show: false,
+    methods: {
+        async getLoadArr() {
+            const res = await getLoadArr()
+            this.loadArr = res.data.result
+            this.loadArr.forEach((item) => {
+                if (item.loadTime < 1000) {
+                    this.best++
+                } else if (item.loadTime < 3000) {
+                    console.log(item.loadTime)
+                    this.good++
+                } else if (item.loadTime < 5000) {
+                    this.bad++
+                } else {
+                    this.badest++
+                }
+            })
+            this.loadData.push(this.best)
+            this.loadData.push(this.good)
+            this.loadData.push(this.bad)
+            this.loadData.push(this.badest)
+            console.log(this.loadData, 'dddddddddd')
+            console.log(this.$refs.four.getData())
+            this.getPicture()
         },
-        color: 'black',
-      },
-      yAxis: {
-        axisLine: {
-          lineStyle: {
-            color: '#000',
-            width: 1, //这里是为了突出显示加上的
-          },
-        },
-        splitLine: {
-          show: false,
-        },
-        boundaryGap: true,
-        type: 'category',
-        inverse: true,
-        data: ['0', '1', '2', '3'],
-        axisLabel: {
-          interval: 0,
-          formatter: function (value) {
-            if (parseInt(value) == 0) {
-              return '{' + value + '| } {value|' + '< 1秒   ' + '}'
-            } else if (parseInt(value) == 1) {
-              return '{' + value + '| } {value|' + '1-3秒   ' + '}'
-            } else if (parseInt(value) == 2) {
-              return '{' + value + '| } {value|' + '3-5秒  ' + '}'
-            } else {
-              return '{' + value + '| } {value|' + '5秒以上' + '}'
+        getPicture() {
+            const chartDom1 = document.getElementById('main1')
+            const myChart1 = this.$echarts.init(chartDom1, 'dark')
+            var option1
+
+            const seriesLabel = {
+                show: true,
+                position: 'right',
             }
-          },
-          margin: 20,
-          rich: {
-            value: {
-              lineHeight: 30,
-              align: 'center',
-            },
-            0: {
-              height: 8,
-              width: 8,
-              align: 'center',
-              backgroundColor: '#8ED6FA ',
-              borderRadius: 10,
-            },
-            1: {
-              height: 8,
-              width: 8,
-              align: 'center',
-              backgroundColor: '#6BE6C1 ',
-              borderRadius: 10,
-            },
-            2: {
-              height: 8,
-              width: 8,
-              align: 'center',
-              backgroundColor: '#466AEB ',
-              borderRadius: 10,
-            },
-            3: {
-              height: 8,
-              width: 8,
-              align: 'center',
-              backgroundColor: '#466AEB ',
-              borderRadius: 10,
-            },
-          },
-        },
-      },
-      series: [
-        {
-          name: 'City Beta',
-          type: 'bar',
-          label: seriesLabel,
-          data: [150, 105, 110, 178],
-          barWidth: 13,
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 1,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#1A70F3', // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: '#6BE6C1 ', // 100% 处的颜色
-              },
-            ],
-            global: false, // 缺省为 false
-          },
-          // barCategoryGap: '100%',
-          // boundaryGap: ['10%','10%','10%','20%']
-        },
-      ],
-    }
-    myChart1.setOption(option1)
-  },
+            option1 = {
+                grid: {
+                    left: '10%',
+                    // right: '30%',
+                    bottom: '0%',
+                    top: '0%',
+                    containLabel: true,
+                },
+                backgroundColor: '#000000',
+                // title: {
+                //     text: '页面访问速度分布',
+                //     textStyle: {
+                //         fontFamily: "Alibaba",
+                //         fontSize: 18,
+                //         color: "#fff",
+                //     }
+                // },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                    },
+                },
+                // grid: {
+                //     left: 100
+                // },
+                // toolbox: {
+                //   show: true,
+                //   feature: {
+                //     saveAsImage: {}
+                //   }
+                // },
+                xAxis: {
+                    type: 'value',
+                    show: false,
+                    axisLabel: {
+                        formatter: '{value}',
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    color: 'black',
+                },
+                yAxis: {
+                    axisLine: {
+                        lineStyle: {
+                            color: '#000',
+                            width: 1, //这里是为了突出显示加上的
+                        },
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    boundaryGap: true,
+                    type: 'category',
+                    inverse: true,
+                    data: ['0', '1', '2', '3'],
+                    axisLabel: {
+                        interval: 0,
+                        formatter: function (value) {
+                            if (parseInt(value) == 0) {
+                                return '{' + value + '| } {value|' + '< 1秒   ' + '}'
+                            } else if (parseInt(value) == 1) {
+                                return '{' + value + '| } {value|' + '1-3秒   ' + '}'
+                            } else if (parseInt(value) == 2) {
+                                return '{' + value + '| } {value|' + '3-5秒  ' + '}'
+                            } else {
+                                return '{' + value + '| } {value|' + '5秒以上' + '}'
+                            }
+                        },
+                        margin: 20,
+                        rich: {
+                            value: {
+                                lineHeight: 30,
+                                align: 'center',
+                            },
+                            0: {
+                                height: 8,
+                                width: 8,
+                                align: 'center',
+                                backgroundColor: '#8ED6FA ',
+                                borderRadius: 10,
+                            },
+                            1: {
+                                height: 8,
+                                width: 8,
+                                align: 'center',
+                                backgroundColor: '#6BE6C1 ',
+                                borderRadius: 10,
+                            },
+                            2: {
+                                height: 8,
+                                width: 8,
+                                align: 'center',
+                                backgroundColor: '#466AEB ',
+                                borderRadius: 10,
+                            },
+                            3: {
+                                height: 8,
+                                width: 8,
+                                align: 'center',
+                                backgroundColor: '#466AEB ',
+                                borderRadius: 10,
+                            },
+                        },
+                    },
+                },
+                series: [{
+                    name: 'City Beta',
+                    type: 'bar',
+                    label: seriesLabel,
+                    data: this.loadData,
+                    barWidth: 13,
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 1,
+                        colorStops: [{
+                                offset: 0,
+                                color: '#1A70F3', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: '#6BE6C1 ', // 100% 处的颜色
+                            },
+                        ],
+                        global: false, // 缺省为 false
+                    },
+                    // barCategoryGap: '100%',
+                    // boundaryGap: ['10%','10%','10%','20%']
+                }, ],
+            }
+            myChart1.setOption(option1)
+        }
+    },
+    mounted() {
+      this.getLoadArr()
+    },
 }
 </script>
 
diff --git a/src/services/jsError/jsError.js b/src/services/jsError/jsError.js
index 00873eb10f014e027fd16be9e6907758a8670fc4..72e7d5c93c267f73f77a9d6bd93f0636a9d01b7e 100644
--- a/src/services/jsError/jsError.js
+++ b/src/services/jsError/jsError.js
@@ -1,8 +1,17 @@
+/*
+ * @Author: 18062706139 2279549769@qq.com
+ * @Date: 2022-08-25 05:37:23
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-25 09:11:53
+ * @FilePath: /t1/src/services/jsError/jsError.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import axios from 'axios'
 export function request (config) {
   // 1.创建axios的实例
   const instance = axios.create({
     baseURL: 'https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp',
+    // https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp/mountArr
     timeout: 5000
   })
 
diff --git a/src/utils/request.js b/src/utils/request.js
index f0608c406be2361969763516e64c3dba74f5d7da..a3e864ab5e5c2399b4da6b8ad810d40f931806fb 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,8 +2,8 @@
  * @Descripttion: 
  * @Author: Wang Dejiang(aei)
  * @Date: 2022-08-02 21:45:04
- * @LastEditors: arvin(王德江)
- * @LastEditTime: 2022-08-05 14:40:31
+ * @LastEditors: 18062706139 2279549769@qq.com
+ * @LastEditTime: 2022-08-25 09:42:23
  */
 import axios from "axios";
 
@@ -41,6 +41,6 @@ service.interceptors.response.use(
 export default service;
 
 export const staticService = axios.create({
-  baseURL: process.env.BASE_URL + "api",
+  baseURL: process.env.BASE_URL ,
   timeout: 5000,
 });
\ No newline at end of file