From a9084c7b0ad5af870848d22969d37c9addab19e0 Mon Sep 17 00:00:00 2001
From: caijianhaoa <1784581164@qq.com>
Date: Sun, 21 Aug 2022 22:11:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/componets/HomePage/thirdGraph.vue         | 351 ++++++++++--------
 src/componets/HomePage/titleComponent.vue     |  21 +-
 src/componets/Performance/paintList.vue       |  13 +-
 src/componets/Performance/performanceMain.vue |   5 +-
 src/componets/Performance/performanceTop.vue  |  26 +-
 src/router/index.js                           |  16 +-
 6 files changed, 247 insertions(+), 185 deletions(-)

diff --git a/src/componets/HomePage/thirdGraph.vue b/src/componets/HomePage/thirdGraph.vue
index fc44354..0936918 100644
--- a/src/componets/HomePage/thirdGraph.vue
+++ b/src/componets/HomePage/thirdGraph.vue
@@ -5,179 +5,214 @@
  * @LastEditTime: 2022-08-08 21:44:32
 -->
 <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></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 './titleComponent.vue'
 // import titleComponent from '@/componets/HomePage/title.vue';
-import fourGraph from './fourGraph.vue';
+import fourGraph from './fourGraph.vue'
+import { getLoadArr } from '@/services/performance'
+
 export default {
-    name: 'thirdGraph',
-    components: {
-        titleComponent,
-        fourGraph
-    },
-    data() {
-        return {
-            na: '页面访问速度分布'
+  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++
         }
+      })
+      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() {
-        const chartDom1 = document.getElementById('main1')
-        const myChart1 = this.$echarts.init(chartDom1, 'dark')
-        var option1;
+  },
+  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
+    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,
+        },
+        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',
             },
-            backgroundColor: '#000000',
-            // title: {
-            //     text: '页面访问速度分布',
-            //     textStyle: {
-            //         fontFamily: "Alibaba",
-            //         fontSize: 18,
-            //         color: "#fff",
-            //     }
-            // },
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
+            0: {
+              height: 8,
+              width: 8,
+              align: 'center',
+              backgroundColor: '#8ED6FA ',
+              borderRadius: 10,
             },
-            // grid: {
-            //     left: 100
-            // },
-            // toolbox: {
-            //   show: true,
-            //   feature: {
-            //     saveAsImage: {}
-            //   }
-            // },
-            xAxis: {
-                type: 'value',
-                show: false,
-                axisLabel: {
-                    formatter: '{value}'
-                },
-                splitLine: {
-                    show: false
-                },
-                color: 'black',
+            1: {
+              height: 8,
+              width: 8,
+              align: 'center',
+              backgroundColor: '#6BE6C1 ',
+              borderRadius: 10,
             },
-            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
-                        }
-                    }
-                }
+            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);
+          },
+        },
+      },
+      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)
+  },
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/componets/HomePage/titleComponent.vue b/src/componets/HomePage/titleComponent.vue
index a22223b..2677879 100644
--- a/src/componets/HomePage/titleComponent.vue
+++ b/src/componets/HomePage/titleComponent.vue
@@ -5,27 +5,30 @@
  * @LastEditTime: 2022-08-07 10:14:32
 -->
 <template>
-  <div class="mainTitle"><div class="triangle"></div>{{na}}</div>
+  <div class="mainTitle">
+    <div class="triangle"></div>
+    {{ na }}
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'titleComponent',
-    props: ['na'],
+  name: 'titleComponent',
+  props: ['na'],
 }
 </script>
 
 <style scoped>
 .triangle {
   border: 10px solid;
-  border-color: transparent transparent transparent #2CBEFF;
+  border-color: transparent transparent transparent #2cbeff;
   height: 0;
   width: 0;
 }
 .mainTitle {
-    display: flex;
-    color: #fff;
-    align-items: center;
-    font-size: 1.4rem;
+  display: flex;
+  color: #fff;
+  align-items: center;
+  font-size: 1.4rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/componets/Performance/paintList.vue b/src/componets/Performance/paintList.vue
index 3f7904c..6b64d6a 100644
--- a/src/componets/Performance/paintList.vue
+++ b/src/componets/Performance/paintList.vue
@@ -2,21 +2,25 @@
   <div class="main">
     <div class="paint">
       <div class="common" style="background-color: #6be6c1"></div>
-      <div style="color: #6be6c1">首屏绘制时间（FP）</div>
+      <div style="color: #6be6c1; font-size: 1.1vw">首屏绘制时间（FP）</div>
     </div>
     <div class="paint">
       <div class="common" style="background-color: #8ed6fa"></div>
-      <div style="color: #8ed6fa">首次内容绘制时间（FCP）</div>
+      <div style="color: #8ed6fa; font-size: 1.1vw">
+        首次内容绘制时间（FCP）
+      </div>
     </div>
     <div class="paint">
       <div class="common" style="background-color: #466aeb"></div>
-      <div style="color: #466aeb; text-align: left">
+      <div style="color: #466aeb; text-align: left; font-size: 1.1vw">
         第一个有意义的内容出现时间（FMP）
       </div>
     </div>
     <div class="paint">
       <div class="common" style="background-color: #eabe37"></div>
-      <div style="color: #eabe37">最大内容块渲染时间（LCP）</div>
+      <div style="color: #eabe37; font-size: 1.1vw">
+        最大内容块渲染时间（LCP）
+      </div>
     </div>
   </div>
 </template>
@@ -41,6 +45,7 @@ export default {
     height: 0.5729vw;
     border-radius: 50%;
     margin-right: 0.5208vw;
+    margin-top: 0.8vh;
   }
 }
 </style>
diff --git a/src/componets/Performance/performanceMain.vue b/src/componets/Performance/performanceMain.vue
index 0847452..1683c45 100644
--- a/src/componets/Performance/performanceMain.vue
+++ b/src/componets/Performance/performanceMain.vue
@@ -5,7 +5,10 @@
       <performanceMiddle></performanceMiddle>
       <performanceBottom></performanceBottom>
     </div>
-    <a href="https://www.npmjs.com/package/revue-monitor" class="md">
+    <a
+      href="https://gitee.com/re-vue-monitor/monitor-middle-platform"
+      class="md"
+    >
       <img src="../../assets/组 67.png" alt="" class="img" />
       <p>使用文档</p>
     </a>
diff --git a/src/componets/Performance/performanceTop.vue b/src/componets/Performance/performanceTop.vue
index 12ea064..067c092 100644
--- a/src/componets/Performance/performanceTop.vue
+++ b/src/componets/Performance/performanceTop.vue
@@ -34,7 +34,9 @@
         <titleComponent na="近7天白屏页面个数"></titleComponent>
       </div>
       <div class="blank">
-        <div class="count">{{ count }}</div>
+        <div class="count" :class="{ green: green, yellow: yellow, red: red }">
+          {{ count }}
+        </div>
         <div class="status">
           <div class="healthy">健康状况:</div>
           <div class="what">{{ getWhat(count) }}</div>
@@ -60,6 +62,9 @@ export default {
       firstMeaningfulPaint: 0,
       largestContentfulPaint: 0,
       count: 0,
+      green: false,
+      red: false,
+      yellow: false,
     }
   },
   mounted() {
@@ -68,11 +73,14 @@ export default {
   methods: {
     getWhat(count) {
       if (count < 5) {
+        this.green = true
         return '优秀'
       } else if (count < 10) {
+        this.yellow = true
         return '良好'
       } else {
-        return '直接扑街'
+        this.red = true
+        return '差劲'
       }
     },
     getPaintArr() {
@@ -127,13 +135,21 @@ export default {
     margin-top: 6px;
     width: 3.39vw;
     height: 3.39vw;
-    border: 8px solid #6be6c1;
     border-radius: 50%;
     opacity: 1;
     font-size: 2.1354vw;
     line-height: 3.39vw;
     color: #fff;
   }
+  .green {
+    border: 8px solid #6be6c1;
+  }
+  .yellow {
+    border: 8px solid yellow;
+  }
+  .red {
+    border: 8px solid red;
+  }
   .status {
     display: flex;
     flex-direction: column;
@@ -165,7 +181,7 @@ export default {
   justify-content: space-around;
   .item-item1 {
     text-align: center;
-    font-size: 16px;
+    font-size: 1.1vw;
     font-weight: 400;
     color: #82a1bf;
     line-height: 0px;
@@ -174,7 +190,7 @@ export default {
     margin-bottom: 10px;
     text-align: center;
     font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
-    font-size: 28px;
+    font-size: 1.8vw;
     font-weight: 500;
     color: #fff;
     line-height: 0px;
diff --git a/src/router/index.js b/src/router/index.js
index f3c24ed..28b5769 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,7 @@
  * @Date: 2022-08-05 14:24:57
  * @LastEditors: arvin(王德江)
  * @LastEditTime: 2022-08-05 15:19:53
- * @Description: 
+ * @Description:
  */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
@@ -15,30 +15,30 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
+    component: HomeView,
   },
   {
     // js错误
     path: '/js-error',
     name: 'jsError',
-    component: () => import('../views/JsErrorView.vue')
+    component: () => import('../views/JsErrorView.vue'),
   },
   {
     // 性能视图
-    path: 'req-error',
+    path: '/performance',
     name: 'performance',
-    component: () => import('../views/PerformanceView.vue')
+    component: () => import('../views/PerformanceView.vue'),
   },
   {
     // 请求错误视图
     path: '/req-error',
     name: 'reqError',
-    component: () => import('../views/ReqErrorView.vue')
-  }
+    component: () => import('../views/ReqErrorView.vue'),
+  },
 ]
 
 const router = new VueRouter({
-  routes
+  routes,
 })
 
 export default router
-- 
Gitee