From f897af4618064dc160136b22d20dc0137b992ca6 Mon Sep 17 00:00:00 2001
From: caijianhaoa <1784581164@qq.com>
Date: Wed, 10 Aug 2022 10:04:26 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=B8=AD=E5=8F=B0=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/componets/HomePage/firstGraph.vue         | 263 +++---
 src/componets/HomePage/fourGraph.vue          | 875 ++++++++++--------
 src/componets/Performance/barComponent.vue    |  65 ++
 src/componets/Performance/leftMenu.vue        |  19 +
 src/componets/Performance/lineComponent.vue   | 197 ++++
 src/componets/Performance/listComponent.vue   | 177 ++++
 src/componets/Performance/paintList.vue       |  44 +
 .../Performance/performanceBottom.vue         | 182 ++++
 src/componets/Performance/performanceMain.vue |  77 ++
 .../Performance/performanceMiddle.vue         |  78 ++
 src/componets/Performance/performanceTop.vue  | 176 ++++
 src/views/PerformanceView.vue                 |  33 +-
 12 files changed, 1644 insertions(+), 542 deletions(-)
 create mode 100644 src/componets/Performance/barComponent.vue
 create mode 100644 src/componets/Performance/leftMenu.vue
 create mode 100644 src/componets/Performance/lineComponent.vue
 create mode 100644 src/componets/Performance/listComponent.vue
 create mode 100644 src/componets/Performance/paintList.vue
 create mode 100644 src/componets/Performance/performanceBottom.vue
 create mode 100644 src/componets/Performance/performanceMain.vue
 create mode 100644 src/componets/Performance/performanceMiddle.vue
 create mode 100644 src/componets/Performance/performanceTop.vue

diff --git a/src/componets/HomePage/firstGraph.vue b/src/componets/HomePage/firstGraph.vue
index 40675fe..3aedab4 100644
--- a/src/componets/HomePage/firstGraph.vue
+++ b/src/componets/HomePage/firstGraph.vue
@@ -1,147 +1,152 @@
 <template>
-<div style="display: flex; justify-content: center;flex-direction:column;">
+  <div style="display: flex; justify-content: center; flex-direction: column">
     <!-- <div class="title">JS报错趋势统计</div> -->
     <title-componentVue :na="na"></title-componentVue>
-    <div id="main" style="height: calc((100vw / 7 * 2 - 99px) * 0.67); width: calc(100vw / 7 * 2 - 99px)"></div>
-</div>
+    <div
+      id="main"
+      style="
+        height: calc((100vw / 7 * 2 - 99px) * 0.67);
+        width: calc(100vw / 7 * 2 - 99px);
+      "
+    ></div>
+  </div>
 </template>
 
 <script>
 import titleComponentVue from './titleComponent.vue'
 export default {
-    name: 'firstGraph',
-    components: {
-        titleComponentVue
-    },
-    data() {
-        return {
-            time: ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30'] || [],
-            jsErrorNumberTong: [12, 120, 430, 430, 450, 320, 120] || [],
-            jsErrorNumberYi: [12, 225, 327, 330, 320, 220, 120] || [],
-            na: 'JS报错趋势统计'
-        }
-    },
-    mounted() {
-        const chartDom = document.getElementById('main')
-        const myChart = this.$echarts.init(chartDom, 'dark')
-        let option = {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
+  name: 'firstGraph',
+  components: {
+    titleComponentVue,
+  },
+  data() {
+    return {
+      time: ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30'] || [],
+      jsErrorNumberTong: [12, 120, 430, 430, 450, 320, 120] || [],
+      jsErrorNumberYi: [12, 225, 327, 330, 320, 220, 120] || [],
+      na: 'JS报错趋势统计',
+    }
+  },
+  mounted() {
+    const chartDom = document.getElementById('main')
+    const myChart = this.$echarts.init(chartDom, 'dark')
+    let option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      backgroundColor: '#000000',
+      // title: {
+      //     text: 'JS报错趋势统计',
+      //     textStyle: {
+      //         fontFamily: "Alibaba",
+      //         fontSize: 18,
+      //         color: "#fff",
+      //     }
+      // },
+      legend: {
+        orient: 'vertical',
+        data: ['同步错误', '异步错误'],
+        right: -5,
+        top: 15,
+      },
+      xAxis: {
+        type: 'category',
+        data: this.time, // 时间
+        boundaryGap: false,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: '同步错误',
+          type: 'line',
+          data: this.jsErrorNumberTong,
+          symbol: 'none',
+          lineStyle: {
+            // 设置线条的style等
+            normal: {
+              color: '#466AEB', // 折线线条颜色:红色
+            },
+          },
+          itemStyle: {
+            // 设置线条上点的颜色（和图例的颜色）
+            normal: {
+              color: '#466AEB',
             },
-            backgroundColor: '#000000',
-            // title: {
-            //     text: 'JS报错趋势统计',
-            //     textStyle: {
-            //         fontFamily: "Alibaba",
-            //         fontSize: 18,
-            //         color: "#fff", 
-            //     }
-            // },
-            legend: {
-                orient: 'vertical',
-                data: ['同步错误', '异步错误'],
-                right: -5,
-                top: 15
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                // 渐变颜色
+                {
+                  offset: 0,
+                  color: '#466AEB',
+                },
+                {
+                  offset: 1,
+                  color: '#ffff',
+                },
+              ],
+              global: false,
             },
-            xAxis: {
-                type: 'category',
-                data: this.time, // 时间
-                boundaryGap: false
+          },
+        },
+        {
+          name: '异步错误',
+          type: 'line',
+          symbol: 'none',
+          data: this.jsErrorNumberYi,
+          lineStyle: {
+            // 设置线条的style等
+            normal: {
+              color: '#6BE6C1', // 折线线条颜色:红色
             },
-            yAxis: {
-                type: 'value',
-                splitLine: {
-                    show: false
-                }
+          },
+          itemStyle: {
+            // 设置线条上点的颜色（和图例的颜色）
+            normal: {
+              color: '#6BE6C1',
             },
-            series: [{
-                    name: '同步错误',
-                    type: 'line',
-                    data: this.jsErrorNumberTong,
-                    symbol: 'none',
-                    lineStyle: {
-                        // 设置线条的style等
-                        normal: {
-                            color: '#466AEB' // 折线线条颜色:红色
-                        }
-                    },
-                    itemStyle: {
-                        // 设置线条上点的颜色（和图例的颜色）
-                        normal: {
-                            color: '#466AEB'
-                        }
-                    },
-                    areaStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [
-                                // 渐变颜色
-                                {
-                                    offset: 0,
-                                    color: '#466AEB'
-                                },
-                                {
-                                    offset: 1,
-                                    color: '#ffff'
-                                }
-                            ],
-                            global: false
-                        }
-                    }
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                // 渐变颜色
+                {
+                  offset: 0,
+                  color: '#6BE6C1',
                 },
                 {
-                    name: '异步错误',
-                    type: 'line',
-                    symbol: 'none',
-                    data: this.jsErrorNumberYi,
-                    lineStyle: {
-                        // 设置线条的style等
-                        normal: {
-                            color: '#6BE6C1' // 折线线条颜色:红色
-                        }
-                    },
-                    itemStyle: {
-                        // 设置线条上点的颜色（和图例的颜色）
-                        normal: {
-                            color: '#6BE6C1'
-                        }
-                    },
-                    areaStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [
-                                // 渐变颜色
-                                {
-                                    offset: 0,
-                                    color: '#6BE6C1'
-                                },
-                                {
-                                    offset: 1,
-                                    color: '#402D6B'
-                                }
-                            ],
-                            global: false
-                        }
-                    }
-                }
-            ]
-        };
-        myChart.setOption(option)
+                  offset: 1,
+                  color: '#402D6B',
+                },
+              ],
+              global: false,
+            },
+          },
+        },
+      ],
     }
+    myChart.setOption(option)
+  },
 }
 </script>
 
-<style>
-
-</style>
+<style></style>
diff --git a/src/componets/HomePage/fourGraph.vue b/src/componets/HomePage/fourGraph.vue
index 3ff04e1..1541697 100644
--- a/src/componets/HomePage/fourGraph.vue
+++ b/src/componets/HomePage/fourGraph.vue
@@ -1,423 +1,506 @@
 <template>
-<div class="water-eval-container">
-    <div class="cityGreenLand-charts" id="cityGreenLand-charts">
-    </div>
-</div>
+  <div class="water-eval-container">
+    <div class="cityGreenLand-charts" id="cityGreenLand-charts"></div>
+  </div>
 </template>
 
 <script>
-import 'echarts-gl';
+import 'echarts-gl'
 export default {
-    name: "cityGreenLand",
-    components: {},
-    data() {
-        return {
-            optionData: [{
-                name: '<1s',
-                value: 10000,
-                itemStyle: {
-                    color: '#22c4ff',
-                }
-            }, {
-                name: '1-3s',
-                value: 12116,
-                itemStyle: {
-                    color: '#aaff00'
-                }
-            }, {
-                name: '3-5s',
-                value: 16616,
-                itemStyle: {
-                    color: '#ffaaff'
-                }
-            }],
-        }
-    },
-    mounted() {
-        this.$nextTick(function () {
-            this.init();
-        });
-    },
-    methods: {
-        init() {
-            //构建3d饼状图
-            let myChart = this.$echarts.init(document.getElementById('cityGreenLand-charts'));
-            // 传入数据生成 option
-            this.option = this.getPie3D(this.optionData, 0.8);
-            myChart.setOption(this.option);
-            //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
-            this.option.series.push({
-                name: 'pie2d',
-                type: 'pie',
-                labelLine: {
-                    length: 10,
-                    length2: 10
-                },
-                startAngle: -20, //起始角度，支持范围[0, 360]。
-                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-                radius: ['20%', '50%'],
-                center: ['50%', '50%'],
-                data: this.optionData,
-                itemStyle: {
-                    opacity: 0
-                }
-            });
-            myChart.setOption(this.option);
-            this.bindListen(myChart);
+  name: 'cityGreenLand',
+  components: {},
+  data() {
+    return {
+      optionData: [
+        {
+          name: '<1s',
+          value: 10000,
+          itemStyle: {
+            color: '#22c4ff',
+          },
         },
+        {
+          name: '1-3s',
+          value: 12116,
+          itemStyle: {
+            color: '#aaff00',
+          },
+        },
+        {
+          name: '3-5s',
+          value: 16616,
+          itemStyle: {
+            color: '#ffaaff',
+          },
+        },
+        {
+          name: '>5s',
+          value: 16616,
+          itemStyle: {
+            color: '#4D74FF',
+          },
+        },
+      ],
+    }
+  },
+  props: ['loadData'],
+  mounted() {
+    this.$nextTick(function () {
+      for (let i = 0; i < this.optionData.length; i++) {
+        this.optionData[i].value = this.loadData[i]
+      }
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      //构建3d饼状图
+      let myChart = this.$echarts.init(
+        document.getElementById('cityGreenLand-charts')
+      )
+      // 传入数据生成 option
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10,
+        },
+        startAngle: -20, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0,
+        },
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
 
-        getPie3D(pieData, internalDiameterRatio) {
-            //internalDiameterRatio:透明的空心占比
-            let that = this;
-            let series = [];
-            let sumValue = 0;
-            let startValue = 0;
-            let endValue = 0;
-            let legendData = [];
-            let legendBfb = [];
-            let k = 1 - internalDiameterRatio;
-            pieData.sort((a, b) => {
-                return (b.value - a.value);
-            });
-            // 为每一个饼图数据，生成一个 series-surface 配置
-            for (let i = 0; i < pieData.length; i++) {
-                sumValue += pieData[i].value;
-                let seriesItem = {
-                    name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-                    type: 'surface',
-                    parametric: true,
-                    wireframe: {
-                        show: false
-                    },
-                    pieData: pieData[i],
-                    pieStatus: {
-                        selected: false,
-                        hovered: false,
-                        k: k
-                    },
-                    center: ['10%', '50%']
-                };
-
-                if (typeof pieData[i].itemStyle != 'undefined') {
-                    let itemStyle = {};
-                    typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
-                    typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
-                    seriesItem.itemStyle = itemStyle;
-                }
-                series.push(seriesItem);
-            }
+    getPie3D(pieData, internalDiameterRatio) {
+      //internalDiameterRatio:透明的空心占比
+      let that = this
+      let series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      let k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return b.value - a.value
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        let seriesItem = {
+          name:
+            typeof pieData[i].name === 'undefined'
+              ? `series${i}`
+              : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+          center: ['10%', '50%'],
+        }
 
-            // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-            // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-            legendData = [];
-            legendBfb = [];
-            for (let i = 0; i < series.length; i++) {
-                endValue = startValue + series[i].pieData.value;
-                series[i].pieData.startRatio = startValue / sumValue;
-                series[i].pieData.endRatio = endValue / sumValue;
-                series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
-                    false, false, k, series[i].pieData.value);
-                startValue = endValue;
-                let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
-                legendData.push({
-                    name: series[i].name,
-                    value: bfb
-                });
-                legendBfb.push({
-                    name: series[i].name,
-                    value: bfb
-                });
-            }
-            let boxHeight = this.getHeight3D(series, 26); //通过传参设定3d饼/环的高度，26代表26px
-            // 准备待返回的配置项，把准备好的 legendData、series 传入。
-            let option = {
-                legend: {
-                    data: legendData,
-                    orient: 'horizontal',
-                    left: 10,
-                    top: 10,
-                    itemGap: 10,
-                    textStyle: {
-                        color: '#A1E2FF',
-                    },
-                    show: false,
-                    icon: "circle",
-                    formatter: function (param) {
-                        let item = legendBfb.filter(item => item.name == param)[0];
-                        let bfs = that.fomatFloat(item.value * 100, 2) + "%";
-                        return `${item.name}  ${bfs}`;
-                    }
-                },
-                labelLine: {
-                    show: false,
-                    lineStyle: {
-                        color: '#7BC0CB'
-                    }
-                },
-                label: {
-                    show: false,
-                    position: 'outside',
-                    rich: {
-                        b: {
-                            color: '#7BC0CB',
-                            fontSize: 12,
-                            lineHeight: 20
-                        },
-                        c: {
-                            fontSize: 16,
-                        },
-                    },
-                    formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
+        if (typeof pieData[i].itemStyle != 'undefined') {
+          let itemStyle = {}
+          typeof pieData[i].itemStyle.color != 'undefined'
+            ? (itemStyle.color = pieData[i].itemStyle.color)
+            : null
+          typeof pieData[i].itemStyle.opacity != 'undefined'
+            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+            : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
 
-                },
-                // hover
-                tooltip: {
-                    formatter: params => {
-                        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
-                            let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
-                                100).toFixed(2);
-                            return `${params.seriesName}<br/>` +
-                                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-                                `${ bfb }%`;
-                        }
-                    }
-                },
-                xAxis3D: {
-                    min: -1,
-                    max: 1
-                },
-                yAxis3D: {
-                    min: -1,
-                    max: 1
-                },
-                zAxis3D: {
-                    min: -1,
-                    max: 1
-                },
-                grid3D: {
-                    show: false,
-                    boxHeight: boxHeight, //圆环的高度
-                    viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
-                        alpha: 40, //角度
-                        distance: 300, //调整视角到主体的距离，类似调整zoom
-                        rotateSensitivity: 0, //设置为0无法旋转
-                        zoomSensitivity: 0, //设置为0无法缩放
-                        panSensitivity: 0, //设置为0无法平移
-                        autoRotate: false //自动旋转
-                    }
-                },
-                series: series
-            };
-            return option;
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        )
+        startValue = endValue
+        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb,
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb,
+        })
+      }
+      let boxHeight = this.getHeight3D(series, 26) //通过传参设定3d饼/环的高度，26代表26px
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          left: 10,
+          top: 10,
+          itemGap: 10,
+          textStyle: {
+            color: '#A1E2FF',
+          },
+          show: false,
+          icon: 'circle',
+          formatter: function (param) {
+            let item = legendBfb.filter((item) => item.name == param)[0]
+            let bfs = that.fomatFloat(item.value * 100, 2) + '%'
+            return `${item.name}  ${bfs}`
+          },
         },
-
-        //获取3d丙图的最高扇区的高度
-        getHeight3D(series, height) {
-            series.sort((a, b) => {
-                return (b.pieData.value - a.pieData.value);
-            })
-            return height * 25 / series[0].pieData.value;
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: '#7BC0CB',
+          },
         },
-
-        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-        getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-            // 计算
-            let midRatio = (startRatio + endRatio) / 2;
-            let startRadian = startRatio * Math.PI * 2;
-            let endRadian = endRatio * Math.PI * 2;
-            let midRadian = midRatio * Math.PI * 2;
-            // 如果只有一个扇形，则不实现选中效果。
-            if (startRatio === 0 && endRatio === 1) {
-                isSelected = false;
+        label: {
+          show: false,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#7BC0CB',
+              fontSize: 12,
+              lineHeight: 20,
+            },
+            c: {
+              fontSize: 16,
+            },
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
+        },
+        // hover
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== 'mouseoutSeries' &&
+              params.seriesName !== 'pie2d'
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2)
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              )
             }
-            // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-            k = typeof k !== 'undefined' ? k : 1 / 3;
-            // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-            let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-            let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-            // 计算高亮效果的放大比例（未高亮，则比例为 1）
-            let hoverRate = isHovered ? 1.05 : 1;
-            // 返回曲面参数方程
-            return {
-                u: {
-                    min: -Math.PI,
-                    max: Math.PI * 3,
-                    step: Math.PI / 32
-                },
-                v: {
-                    min: 0,
-                    max: Math.PI * 2,
-                    step: Math.PI / 20
-                },
-                x: function (u, v) {
-                    if (u < startRadian) {
-                        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                    }
-                    if (u > endRadian) {
-                        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                    }
-                    return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-                },
-                y: function (u, v) {
-                    if (u < startRadian) {
-                        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                    }
-                    if (u > endRadian) {
-                        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                    }
-                    return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-                },
-                z: function (u, v) {
-                    if (u < -Math.PI * 0.5) {
-                        return Math.sin(u);
-                    }
-                    if (u > Math.PI * 2.5) {
-                        return Math.sin(u) * h * .1;
-                    }
-                    return Math.sin(v) > 0 ? 1 * h * .1 : -1;
-                }
-            };
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
         },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, //圆环的高度
+          viewControl: {
+            //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 40, //角度
+            distance: 300, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, //设置为0无法旋转
+            zoomSensitivity: 0, //设置为0无法缩放
+            panSensitivity: 0, //设置为0无法平移
+            autoRotate: false, //自动旋转
+          },
+        },
+        series: series,
+      }
+      return option
+    },
 
-        fomatFloat(num, n) {
-            var f = parseFloat(num);
-            if (isNaN(f)) {
-                return false;
-            }
-            f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
-            var s = f.toString();
-            var rs = s.indexOf('.');
-            //判定如果是整数，增加小数点再补0
-            if (rs < 0) {
-                rs = s.length;
-                s += '.';
-            }
-            while (s.length <= rs + n) {
-                s += '0';
-            }
-            return s;
+    //获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return b.pieData.value - a.pieData.value
+      })
+      return (height * 25) / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      let midRatio = (startRatio + endRatio) / 2
+      let startRadian = startRatio * Math.PI * 2
+      let endRadian = endRatio * Math.PI * 2
+      let midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      let hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            )
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            )
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
         },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            )
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            )
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        },
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
 
-        bindListen(myChart) {
-            // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
-            let that = this;
-            let selectedIndex = '';
-            let hoveredIndex = '';
-            // 监听点击事件，实现选中效果（单选）
-            myChart.on('click', function (params) {
-                // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-                let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
-                let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
-                let k = that.option.series[params.seriesIndex].pieStatus.k;
-                let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
-                let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
-                // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-                if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
-                    that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
-                            selectedIndex].pieData
-                        .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
-                            selectedIndex].pieData
-                        .value);
-                    that.option.series[selectedIndex].pieStatus.selected = false;
-                }
-                // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
-                that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                    isSelected,
-                    isHovered, k, that.option.series[params.seriesIndex].pieData.value);
-                that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
-                // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-                isSelected ? selectedIndex = params.seriesIndex : null;
-                // 使用更新后的 option，渲染图表
-                myChart.setOption(that.option);
-            });
-            // 监听 mouseover，近似实现高亮（放大）效果
-            myChart.on('mouseover', function (params) {
-                // 准备重新渲染扇形所需的参数
-                let isSelected;
-                let isHovered;
-                let startRatio;
-                let endRatio;
-                let k;
-                // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-                if (hoveredIndex === params.seriesIndex) {
-                    return;
-                    // 否则进行高亮及必要的取消高亮操作
-                } else {
-                    // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-                    if (hoveredIndex !== '') {
-                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-                        isSelected = that.option.series[hoveredIndex].pieStatus.selected;
-                        isHovered = false;
-                        startRatio = that.option.series[hoveredIndex].pieData.startRatio;
-                        endRatio = that.option.series[hoveredIndex].pieData.endRatio;
-                        k = that.option.series[hoveredIndex].pieStatus.k;
-                        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                        that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                            isSelected,
-                            isHovered, k, that.option.series[hoveredIndex].pieData.value);
-                        that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
-                        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                        hoveredIndex = '';
-                    }
-                    // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-                    if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
-                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                        isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
-                        isHovered = true;
-                        startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
-                        endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
-                        k = that.option.series[params.seriesIndex].pieStatus.k;
-                        // 对当前点击的扇形，执行高亮操作（对 option 更新）
-                        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                            isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
-                        that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
-                        // 记录上次高亮的扇形对应的系列号 seriesIndex
-                        hoveredIndex = params.seriesIndex;
-                    }
-                    // 使用更新后的 option，渲染图表
-                    myChart.setOption(that.option);
-                }
-            });
-            // 修正取消高亮失败的 bug
-            myChart.on('globalout', function () {
-                // 准备重新渲染扇形所需的参数
-                let isSelected;
-                let isHovered;
-                let startRatio;
-                let endRatio;
-                let k;
-                if (hoveredIndex !== '') {
-                    // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                    isSelected = that.option.series[hoveredIndex].pieStatus.selected;
-                    isHovered = false;
-                    k = that.option.series[hoveredIndex].pieStatus.k;
-                    startRatio = that.option.series[hoveredIndex].pieData.startRatio;
-                    endRatio = that.option.series[hoveredIndex].pieData.endRatio;
-                    // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                    that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                        isSelected,
-                        isHovered, k, that.option.series[hoveredIndex].pieData.value);
-                    that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
-                    // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                    hoveredIndex = '';
-                }
-                // 使用更新后的 option，渲染图表
-                myChart.setOption(that.option);
-            });
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      let that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected
+        let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        let k = that.option.series[params.seriesIndex].pieStatus.k
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            )
+          that.option.series[selectedIndex].pieStatus.selected = false
         }
-    }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          )
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              )
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== 'mouseoutSeries' &&
+            params.seriesName !== 'pie2d'
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              )
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            )
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .water-eval-container {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .cityGreenLand-charts {
-    width: calc((100vw / 7 * 2 - 64px) * 5 / 8 );
-    height: calc((100vw / 7 * 2 - 64px) * 9 / 16 );
-    max-height: 250px;
+  width: calc((100vw / 7 * 2 - 64px) * 5 / 8);
+  height: calc((100vw / 7 * 2 - 64px) * 9 / 16);
+  max-height: 250px;
 }
 </style>
diff --git a/src/componets/Performance/barComponent.vue b/src/componets/Performance/barComponent.vue
new file mode 100644
index 0000000..8e6b4f3
--- /dev/null
+++ b/src/componets/Performance/barComponent.vue
@@ -0,0 +1,65 @@
+<template>
+  <div id="main1"></div>
+</template>
+
+<script>
+export default {
+  name: 'barComponent',
+  data() {
+    return {
+      nameArr: [],
+      data: [],
+    }
+  },
+  props: ['mountArr'],
+  mounted() {
+    this.mountArr.forEach((item) => {
+      this.nameArr.push(item.componentName)
+      this.data.push({ value: item.mountTime })
+    })
+    const chartDom = document.getElementById('main1')
+    const myChart = this.$echarts.init(chartDom, 'dark')
+
+    window.onresize = function () {
+      myChart.resize()
+    }
+
+    let option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      xAxis: {
+        type: 'category',
+        data: this.nameArr,
+      },
+      backgroundColor: '#000000',
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          type: 'bar',
+          data: this.data,
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)',
+          },
+        },
+      ],
+    }
+    myChart.setOption(option)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#main1 {
+  height: 27vh;
+}
+</style>
diff --git a/src/componets/Performance/leftMenu.vue b/src/componets/Performance/leftMenu.vue
new file mode 100644
index 0000000..2efdcb5
--- /dev/null
+++ b/src/componets/Performance/leftMenu.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="main"></div>
+</template>
+
+<script>
+export default {
+  name: 'leftMenu',
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  flex: 0.16;
+  height: 100vh;
+  background: #25253f;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+}
+</style>
diff --git a/src/componets/Performance/lineComponent.vue b/src/componets/Performance/lineComponent.vue
new file mode 100644
index 0000000..c0fb18c
--- /dev/null
+++ b/src/componets/Performance/lineComponent.vue
@@ -0,0 +1,197 @@
+<template>
+  <div id="line"></div>
+</template>
+
+<script>
+export default {
+  name: 'lineComponent',
+  data() {
+    return {
+      paintArr: [
+        {
+          firstPaint: 94,
+          firstContentfulPaint: 68,
+          firstMeaningfulPaint: 3,
+          largestContentfulPaint: 41,
+          id: '78',
+          day: 83,
+          kind: 'anim',
+          type: 'deserunt ad et aliqua',
+        },
+        {
+          firstPaint: 40,
+          firstContentfulPaint: 75,
+          firstMeaningfulPaint: 54,
+          largestContentfulPaint: 83,
+          id: '95',
+          day: 18,
+          kind: 'anim minim',
+          type: 'consectetur et elit',
+        },
+        {
+          firstPaint: 13,
+          firstContentfulPaint: 69,
+          firstMeaningfulPaint: 51,
+          largestContentfulPaint: 16,
+          id: '3',
+          day: 83,
+          type: 'tempor eiusmod incididunt',
+          kind: 'esse officia consequat',
+        },
+        {
+          firstPaint: 2,
+          firstContentfulPaint: 23,
+          firstMeaningfulPaint: 42,
+          largestContentfulPaint: 74,
+          id: '85',
+          day: 62,
+          kind: 'occaecat sunt',
+          type: 'Duis amet irure eu in',
+        },
+        {
+          firstPaint: 1,
+          firstContentfulPaint: 57,
+          firstMeaningfulPaint: 62,
+          largestContentfulPaint: 81,
+          id: '90',
+          day: 74,
+          kind: 'exercitation',
+          type: 'aliquip dolore cillum',
+        },
+      ],
+      firstPaint: [],
+      firstContentfulPaint: [],
+      firstMeaningfulPaint: [],
+      largestContentfulPaint: [],
+    }
+  },
+  mounted() {
+    const chartDom = document.getElementById('line')
+    const myChart = this.$echarts.init(chartDom, 'dark')
+
+    window.onresize = function () {
+      myChart.resize()
+    }
+
+    this.paintArr = this.paintArr.sort((a, b) => a.day - b.day)
+    this.paintArr.forEach((item) => {
+      this.firstPaint.push(item.firstPaint)
+    })
+
+    this.paintArr.forEach((item) => {
+      this.firstContentfulPaint.push(item.firstContentfulPaint)
+    })
+
+    this.paintArr.forEach((item) => {
+      this.firstMeaningfulPaint.push(item.firstMeaningfulPaint)
+    })
+
+    this.paintArr.forEach((item) => {
+      this.largestContentfulPaint.push(item.largestContentfulPaint)
+    })
+
+    let option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      backgroundColor: '#000000',
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+      xAxis: {
+        type: 'category',
+        data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7'],
+        boundaryGap: false,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: 'FP',
+          type: 'line',
+          data: this.firstPaint,
+          symbolSize: 10,
+          lineStyle: {
+            normal: {
+              color: '#6BE6C1 ',
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: '#6BE6C1 ',
+            },
+          },
+        },
+        {
+          name: 'FCP',
+          type: 'line',
+          data: this.firstContentfulPaint,
+          symbolSize: 10,
+          lineStyle: {
+            normal: {
+              color: '#8ED6FA ',
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: '#8ED6FA',
+            },
+          },
+        },
+        {
+          name: 'FMP',
+          type: 'line',
+          data: this.firstMeaningfulPaint,
+          symbolSize: 10,
+          lineStyle: {
+            normal: {
+              color: '#466AEB',
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: '#466AEB',
+            },
+          },
+        },
+        {
+          name: 'LCP',
+          type: 'line',
+          data: this.largestContentfulPaint,
+          symbolSize: 10,
+
+          lineStyle: {
+            normal: {
+              color: '#EABE37',
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: '#EABE37',
+            },
+          },
+        },
+      ],
+    }
+    myChart.setOption(option)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#line {
+  width: 50vw;
+  height: 27vh;
+}
+</style>
diff --git a/src/componets/Performance/listComponent.vue b/src/componets/Performance/listComponent.vue
new file mode 100644
index 0000000..9b1d348
--- /dev/null
+++ b/src/componets/Performance/listComponent.vue
@@ -0,0 +1,177 @@
+<template>
+  <div id="main"></div>
+</template>
+
+<script>
+export default {
+  name: 'listComponent',
+  data() {
+    return {}
+  },
+  props: ['loadData'],
+  mounted() {
+    this.$nextTick(function () {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const chartDom = document.getElementById('main')
+      const myChart = this.$echarts.init(chartDom, 'dark')
+
+      window.onresize = function () {
+        myChart.resize()
+      }
+
+      const seriesLabel = {
+        show: true,
+        position: 'right',
+      }
+      let option = {
+        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: 'count',
+            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%']
+          },
+        ],
+      }
+      myChart.setOption(option)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#main {
+  width: calc((100vw / 7 * 2 - 64px) * 5 / 8);
+}
+</style>
diff --git a/src/componets/Performance/paintList.vue b/src/componets/Performance/paintList.vue
new file mode 100644
index 0000000..ab5c341
--- /dev/null
+++ b/src/componets/Performance/paintList.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="main">
+    <div class="paint">
+      <div class="common" style="background-color: #6be6c1"></div>
+      <div style="color: #6be6c1">首屏绘制时间（FP）</div>
+    </div>
+    <div class="paint">
+      <div class="common" style="background-color: #8ed6fa"></div>
+      <div style="color: #8ed6fa">首次内容绘制时间（FCP）</div>
+    </div>
+    <div class="paint">
+      <div class="common" style="background-color: #466aeb"></div>
+      <div style="color: #466aeb">第一个有意义的内容出现时间（FMP）</div>
+    </div>
+    <div class="paint">
+      <div class="common" style="background-color: #eabe37"></div>
+      <div style="color: #eabe37">最大内容块渲染时间（LCP）</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'paintList',
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.paint {
+  display: flex;
+  margin-right: 1.3021vw;
+  .common {
+    width: 0.5729vw;
+    height: 0.5729vw;
+    border-radius: 50%;
+    margin-right: 0.5208vw;
+  }
+}
+</style>
diff --git a/src/componets/Performance/performanceBottom.vue b/src/componets/Performance/performanceBottom.vue
new file mode 100644
index 0000000..c6a315a
--- /dev/null
+++ b/src/componets/Performance/performanceBottom.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="footer">
+    <div class="left">
+      <div style="display: flex; margin-bottom: 0.9896vw">
+        <titleComponent na="页面访问速度分布"></titleComponent>
+      </div>
+      <div class="page">
+        <div class="topleft"></div>
+        <div class="topright"></div>
+        <div class="leftbottom"></div>
+        <div class="rightbottom"></div>
+        <ListComponent :loadData="loadData"></ListComponent>
+        <div>
+          <fourGraph :loadData="loadData"></fourGraph>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div style="display: flex; margin-bottom: 0.9896vw">
+        <titleComponent na="组件访问时间"></titleComponent>
+      </div>
+      <div class="component">
+        <div class="topleft"></div>
+        <div class="topright"></div>
+        <div class="leftbottom"></div>
+        <div class="rightbottom"></div>
+        <BarComponent :mountArr="mountArr"></BarComponent>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import titleComponent from '../HomePage/titleComponent.vue'
+import fourGraph from '../HomePage/fourGraph.vue'
+import ListComponent from './listComponent.vue'
+import BarComponent from './barComponent.vue'
+
+export default {
+  name: 'performanceBottom',
+  components: {
+    titleComponent,
+    fourGraph,
+    ListComponent,
+    BarComponent,
+  },
+  data() {
+    return {
+      loadArr: [
+        {
+          id: 89,
+          loadTime: 1427678475642,
+          type: 'ullamco sed',
+          kind: 'cillum veniam nulla in',
+        },
+        {
+          id: 5,
+          loadTime: 137549105933,
+          type: 'ea',
+          kind: 'consequat aute sed quis et',
+        },
+        {
+          id: 13,
+          loadTime: 57383004513,
+          type: 'ut do',
+          kind: 'nulla amet cillum',
+        },
+      ],
+      mountArr: [
+        {
+          id: 97,
+          componentName: '方话里极',
+          mountTime: 1,
+          type: 'ut adipisicing cupidatat',
+          kind: 'labore veniam mollit id',
+        },
+        {
+          id: 5,
+          componentName: '自北断直上',
+          mountTime: 74,
+          type: 'esse',
+          kind: 'velit',
+        },
+        {
+          id: 16,
+          componentName: '红少影适界思',
+          mountTime: 9364,
+          type: 'sed exercitation',
+          kind: 'deserunt tempor',
+        },
+      ],
+      best: 0,
+      good: 0,
+      bad: 0,
+      badest: 0,
+      loadData: [],
+    }
+  },
+  mounted() {
+    this.loadArr.forEach((item) => {
+      if (item.loadTime < 1) {
+        this.best++
+      } else if (item.loadTime < 3) {
+        console.log(item.loadTime)
+        this.good++
+      } else if (item.loadTime < 5) {
+        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)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  margin-top: 1.0417vw;
+  display: flex;
+  justify-content: space-between;
+}
+.left,
+.right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.page {
+  position: relative;
+  width: 36.4583vw;
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid rgba($color: #a0a7e6, $alpha: 0.6);
+}
+.component {
+  position: relative;
+  width: 26vw;
+  height: 28vh;
+  border: 1px solid rgba($color: #a0a7e6, $alpha: 0.6);
+}
+
+.topleft {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: 0.5208vw;
+  height: 0.5208vw;
+  border-left: 2px solid #a485e6;
+  border-top: 2px solid #a485e6;
+}
+.topright {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 0.5208vw;
+  height: 0.5208vw;
+  border-right: 2px solid #a485e6;
+  border-top: 2px solid #a485e6;
+}
+.leftbottom {
+  position: absolute;
+  bottom: -2px;
+  left: -2px;
+  width: 0.5208vw;
+  height: 0.5208vw;
+  border-left: 2px solid #a485e6;
+  border-bottom: 2px solid #a485e6;
+}
+.rightbottom {
+  position: absolute;
+  bottom: -1px;
+  right: -2px;
+  width: 0.5208vw;
+  height: 0.5208vw;
+  border-right: 2px solid #a485e6;
+  border-bottom: 2px solid #a485e6;
+}
+</style>
diff --git a/src/componets/Performance/performanceMain.vue b/src/componets/Performance/performanceMain.vue
new file mode 100644
index 0000000..5ef8efc
--- /dev/null
+++ b/src/componets/Performance/performanceMain.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="main">
+    <div class="wrapper">
+      <performanceTop :paintArr="paintArr"></performanceTop>
+      <performanceMiddle></performanceMiddle>
+      <performanceBottom></performanceBottom>
+    </div>
+  </div>
+</template>
+
+<script>
+import performanceTop from './performanceTop.vue'
+import performanceMiddle from './performanceMiddle.vue'
+import performanceBottom from './performanceBottom.vue'
+
+export default {
+  name: 'performanceMain',
+  components: {
+    performanceTop,
+    performanceMiddle,
+    performanceBottom,
+  },
+  data() {
+    return {
+      paintArr: [
+        {
+          firstPaint: 50,
+          firstContentfulPaint: 97,
+          firstMeaningfulPaint: 24,
+          largestContentfulPaint: 60,
+          id: '21',
+          day: 27,
+          kind: 'fugiat',
+          type: 'ex est id proident',
+        },
+        {
+          firstPaint: 35,
+          firstContentfulPaint: 43,
+          firstMeaningfulPaint: 29,
+          largestContentfulPaint: 14,
+          id: '40',
+          day: 97,
+          kind: 'do aliqua dolore Excepteur in',
+          type: 'anim laboris quis',
+        },
+        {
+          firstPaint: 73,
+          firstContentfulPaint: 61,
+          firstMeaningfulPaint: 23,
+          largestContentfulPaint: 41,
+          id: '99',
+          day: 91,
+          kind: 'ullamco minim',
+          type: 'laboris exercitation eu aliquip dolore',
+        },
+      ],
+    }
+  },
+
+  mounted() {},
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  flex: 0.84;
+  height: 100vh;
+  background: #000000;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  box-sizing: border-box;
+}
+.wrapper {
+  width: 100%;
+  margin: 6.7vh 7.7vw 6.7vh 7.7vw;
+}
+</style>
diff --git a/src/componets/Performance/performanceMiddle.vue b/src/componets/Performance/performanceMiddle.vue
new file mode 100644
index 0000000..88bc5ea
--- /dev/null
+++ b/src/componets/Performance/performanceMiddle.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="middle">
+    <div style="display: flex; margin-bottom: 0.9895vw">
+      <titleComponent na="页面渲染时间"></titleComponent>
+    </div>
+    <div class="wrapper">
+      <LineComponent></LineComponent>
+      <div class="topleft"></div>
+      <div class="topright"></div>
+      <div class="leftbottom"></div>
+      <div class="rightbottom"></div>
+      <PaintList></PaintList>
+    </div>
+  </div>
+</template>
+
+<script>
+import titleComponent from '../HomePage/titleComponent.vue'
+import LineComponent from './lineComponent.vue'
+import PaintList from './paintList.vue'
+export default {
+  name: 'performanceMiddle',
+  components: {
+    titleComponent,
+    LineComponent,
+    PaintList,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.middle {
+  margin-top: 1.0417vw;
+  position: relative;
+  .wrapper {
+    position: relative;
+    border: 1px solid rgba($color: #a0a7e6, $alpha: 0.6);
+    display: flex;
+    justify-content: space-between;
+  }
+  .topleft {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    width: 0.5208vw;
+    height: 0.5208vw;
+    border-left: 2px solid #a485e6;
+    border-top: 2px solid #a485e6;
+  }
+  .topright {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 0.5208vw;
+    height: 0.5208vw;
+    border-right: 2px solid #a485e6;
+    border-top: 2px solid #a485e6;
+  }
+  .leftbottom {
+    position: absolute;
+    bottom: -2px;
+    left: -2px;
+    width: 0.5208vw;
+    height: 0.5208vw;
+    border-left: 2px solid #a485e6;
+    border-bottom: 2px solid #a485e6;
+  }
+  .rightbottom {
+    position: absolute;
+    bottom: -1px;
+    right: -2px;
+    width: 0.5208vw;
+    height: 0.5208vw;
+    border-right: 2px solid #a485e6;
+    border-bottom: 2px solid #a485e6;
+  }
+}
+</style>
diff --git a/src/componets/Performance/performanceTop.vue b/src/componets/Performance/performanceTop.vue
new file mode 100644
index 0000000..f2ed62b
--- /dev/null
+++ b/src/componets/Performance/performanceTop.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="top">
+    <div class="left">
+      <div style="display: flex; margin-bottom: 0.9895vw">
+        <titleComponent na="概况"></titleComponent>
+      </div>
+      <div class="meanTime">
+        <div class="item">
+          <div class="item-item1">FP平均时间</div>
+          <div class="item-item2">{{ parseInt(firstPaint / 7) }}ms</div>
+        </div>
+        <div class="item">
+          <div class="item-item1">FP平均时间</div>
+          <div class="item-item2">
+            {{ parseInt(firstContentfulPaint / 7) }}ms
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-item1">FP平均时间</div>
+          <div class="item-item2">
+            {{ parseInt(firstMeaningfulPaint / 7) }}ms
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-item1">FP平均时间</div>
+          <div class="item-item2">
+            {{ parseInt(largestContentfulPaint / 7) }}ms
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div style="display: flex; margin-bottom: 0.9895vw">
+        <titleComponent na="白屏页面个数"></titleComponent>
+      </div>
+      <div class="blank">
+        <div class="count">{{ count }}</div>
+        <div class="status">
+          <div class="healthy">健康状况:</div>
+          <div class="what">{{ getWhat(count) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import titleComponent from '../HomePage/titleComponent.vue'
+export default {
+  name: 'performanceTop',
+  components: {
+    titleComponent,
+  },
+  props: ['paintArr'],
+  data() {
+    return {
+      firstPaint: 0,
+      firstContentfulPaint: 0,
+      firstMeaningfulPaint: 0,
+      largestContentfulPaint: 0,
+      count: 0,
+    }
+  },
+  mounted() {
+    this.paintArr.forEach((item) => {
+      this.firstPaint += item.firstPaint
+      this.firstContentfulPaint += item.firstContentfulPaint
+      this.firstMeaningfulPaint += item.firstMeaningfulPaint
+      this.largestContentfulPaint += item.largestContentfulPaint
+    })
+    console.log(this.firstPaint)
+  },
+  methods: {
+    getWhat(count) {
+      if (count < 5) {
+        return '优秀'
+      } else if (count < 10) {
+        return '良好'
+      } else {
+        return '直接扑街'
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left,
+.right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.meanTime {
+  width: 44.6354vw;
+  height: 10.5vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 0.7;
+  border: 0.0521vw solid #275079;
+  display: flex;
+}
+.blank {
+  width: 19.0104vw;
+  height: 11vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 0.7;
+  border: 1px solid #275079;
+  padding-left: 1.5625vw;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  .count {
+    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;
+  }
+  .status {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1.302vw;
+    margin-right: 3.6458vw;
+    .healthy {
+      width: 4.1146vw;
+      height: 2.037vh;
+      font-size: 0.833vw;
+      font-weight: 400;
+      color: #fff;
+      line-height: 0px;
+    }
+    .what {
+      margin-top: 1.0417vw;
+      width: 2.4479vw;
+      height: 3.0555vw;
+      font-size: 1vw;
+      font-weight: 500;
+      color: #fff;
+      line-height: 0px;
+    }
+  }
+}
+.item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  .item-item1 {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    color: #82a1bf;
+    line-height: 0px;
+  }
+  .item-item2 {
+    margin-bottom: 10px;
+    text-align: center;
+    font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
+    font-size: 28px;
+    font-weight: 500;
+    color: #fff;
+    line-height: 0px;
+  }
+}
+</style>
diff --git a/src/views/PerformanceView.vue b/src/views/PerformanceView.vue
index ad36014..4020330 100644
--- a/src/views/PerformanceView.vue
+++ b/src/views/PerformanceView.vue
@@ -1,29 +1,28 @@
 <template>
-  <div>
-    PerformanceView
+  <div class="main">
+    <leftMenu></leftMenu>
+    <performanceMain></performanceMain>
   </div>
 </template>
 
 <script>
+import performanceMain from '@/componets/Performance/performanceMain.vue'
+import leftMenu from '@/componets/Performance/leftMenu.vue'
+
 export default {
   name: 'PerformanceView',
-
-  data() {
-    return {
-      
-    };
-  },
-
-  mounted() {
-    
+  components: {
+    performanceMain,
+    leftMenu,
   },
 
-  methods: {
-    
-  },
-};
+  methods: {},
+}
 </script>
 
 <style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+.main {
+  display: flex;
+  font-family: Alibaba;
+}
+</style>
-- 
Gitee


From 99715e79de64505892a7303590a88b36f953eb06 Mon Sep 17 00:00:00 2001
From: caijianhaoa <1784581164@qq.com>
Date: Fri, 12 Aug 2022 20:28:02 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=B8=AD=E5=8F=B0=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/logo/logo.png                      | Bin 0 -> 2962 bytes
 "src/assets/\347\273\204 65.png"              | Bin 0 -> 625 bytes
 "src/assets/\347\273\204 66.png"              | Bin 0 -> 259 bytes
 "src/assets/\347\273\204 67.png"              | Bin 0 -> 478 bytes
 "src/assets/\350\267\257\345\276\204 14.png"  | Bin 0 -> 374 bytes
 src/componets/HomePage/fourGraph.vue          |  16 +-
 src/componets/Performance/barComponent.vue    |  78 +++---
 src/componets/Performance/leftMenu.vue        |  19 --
 src/componets/Performance/lineComponent.vue   | 257 ++++++++----------
 src/componets/Performance/listComponent.vue   |   6 +-
 src/componets/Performance/paintList.vue       |   4 +-
 .../Performance/performanceBottom.vue         | 105 +++----
 src/componets/Performance/performanceMain.vue |  85 +++---
 .../Performance/performanceMiddle.vue         |   2 +-
 src/componets/Performance/performanceTop.vue  |  31 ++-
 src/componets/leftMenu.vue                    |  94 +++++++
 src/services/performance.js                   |   9 +
 src/views/PerformanceView.vue                 |   2 +-
 18 files changed, 381 insertions(+), 327 deletions(-)
 create mode 100644 src/assets/logo/logo.png
 create mode 100644 "src/assets/\347\273\204 65.png"
 create mode 100644 "src/assets/\347\273\204 66.png"
 create mode 100644 "src/assets/\347\273\204 67.png"
 create mode 100644 "src/assets/\350\267\257\345\276\204 14.png"
 delete mode 100644 src/componets/Performance/leftMenu.vue
 create mode 100644 src/componets/leftMenu.vue
 create mode 100644 src/services/performance.js

diff --git a/src/assets/logo/logo.png b/src/assets/logo/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..24a5ee454a02710f7dc8801b19765ccdeb628957
GIT binary patch
literal 2962
zcmV;D3vKj?P)<h;3K|Lk000e1NJLTq005c*001ut1^@s68~D@F00001b5ch_0Itp)
z=>Px=Oi4sRRCr$PTnUgA<rV(Ep6NvaQIQqU^$3cJXp&W9q48F{0iz}HNMg_^MyZ%8
zVobDBVxpiSrwK_sLK5Q@VkBxTH5l<e62t^SEh`35kV7t6Wa#eceyKM*yUg+bJu|yI
zQ#DrqRZ}AU{`bFr@9TH|N+c`MKm#<u2Aq)`k!S!3&=L?dL<0%X8lvXpkOXK61{$J)
z1ZWLWb8<)mv;+eU(Le&UhNw9?Bmr82fre-x0a`=UoE(w>Ex|xTG>`zTA!<$z;Stg?
z-$Uw{K+*^U2ayLvzW&(x&+dQE|9u7s))B#4z~6|_*#*KDAoSpe0j~?D@YXK1woH>x
z2LYZIU_h*@1@kbSXC~(O<Z6H?NoLQF;J@x8Jt&A=gaHwGd64CRR`_Qiy9w|=1hV>D
zOE?38^ln|?#DdIZ=X0vA9cReS9X=LBK1Nhf-+K5MjhS3!q7#v+00!2<1oKF~SO>ld
zOM?b-q4Q|jcxeW>J%EcKQqPtu_GEdmh3d`JldS=Q4}mBH^c&e3eIp+oz89Y3O>*a9
zj->j%kH@ke#;Qk@Y>e)+xDdDSUK@pooCDy2I#};=lDE}?Z^F_Bv~xvLE3skjRygB2
z!DjYs!NyLI`Ktj5fR;TKVNfr)F3g1EIwra=<-FOQ;q<Lr_}%UhYy+F%0Zhk4fD!{V
zJ!M%Ptamoaxpm;1u(Sb9|Nb;t-nI$bE%cCX4a9~13UfB~X5MOU1KIAKV2gY#jk3-e
z>&Eg;<<t77?8Gfwoclr#j`%?61ETp}IoMVr!oirqb#ayvkuLyv&_d$_*b=i}LvGsg
zd@qvkC8%hO28ycAv9jv?kCDE|N1CN!)ZYMjD>V!f?vPH9g&tn_L+AAMW4K(!9saO?
zNXAb;6?)jQypSjXTZ9Ri!G|lorie@i@EZ%=Y?7D6c*73?3^6?4LNdNUsU%qPye174
zw>Lz10@mEU6{!n+q|p^dvl$0lR{;_N=>eS;Y3TEr%^9Axv7H<B#N8g*G{jF0d@&3#
zGEz_1Rjn3Pt=(XojhpbbxRBZP79w&DfSWCEbq&cM#sDp_c(fHH+e-I|$Rv&YHEGaH
z`~=B2MdTC!qb&SBAUVe%!$AN}vg~=1<YIj$BFb0!+t$k@U(VBN`f+v)ZJ8{6t&6fg
z+IU$#v;$b+A=Rc}^TkDGQyNh=1;_2IE<+CwzPl=Q9uA`#GPj1!iyjREIbEpUuB0`R
z2b+e`$mh~%6As1A+)#}{MdS|vzG9)hjN~1rXCiVKfPY!`Eg+ezjtiHFe4viG8o4Ua
zj3xPG9t{7qRLv_%?q-nTaSMPp0~kqetIkE_FEIf64#``(_>0Kz0DRRV_cW3>)KeG6
zhV2=$V*F+}a|5`J7o_1uE+RLVvq{$H9q;VmOaZrnZ1?%$jedY@g&<RwKAfjT1H#DX
zDcPy~N43Tjk$(gDjD>yzX%4?4axQ=}kCEqd8_CNJM)m--R4bc>E=$raFz`$O-?Gr|
zL-KzGwCbf6S-kM|B)?w*hU);_Sj|T$BHsqk4ZM;)SCQNLpZZKh`cxOz$-rr{e0D}s
zlRPa9oHTs2L;>7sZ_@oip^$CQ$~k@z&5<me)F42j!X|HtXA9&Pnafh&sKt;KyiAdy
zN{kSf+f60;lM?#R19-j`*(|iHNe(LjPh5MZ$Rmr$Jpe8+@LdUDG+7)4L}WgI<1BKV
zN%GMGIUWIEYl@#w^8NzaKG%g6XlKZ>oqag31W1qc;fe=$%B$S*SA{RN=kqe!3!+yf
z!~moKcW`&(wrs)>dU#{=R*u0X?5M?<B9Z~Honeo5=d6VQfKvgSZ#ioc$={a%?K}YY
zS?E`kgdNR!erut9jpQLEygvre-#~vS$xHJdWIq5)EZ*!Ql6M(A@KOMK8~8?A1Qh~P
zM6@e#fJNq`NWM@2v_98G?5y)tS$1LwKH$Nf{49qTg`u_=WpLJyUWl@CfO@f(R>Il7
zWMtKyo6!riJgMVs*5olnM5hYx)B?;ZX>&PL2^iGV{@k+vd6Gw0X^670EF!M}INZSd
zJ(7Fnfp$B99Oz2c+a&il$t5B-0Iwz4TJnC{MjCA3<CE-HZ(URzs%wAkF}CH}7u{>V
zq=zy)Hwt;CHf;4b-~g>k4f9bC$Y!1C8&0O?6E&?0c~(ul3W&FAk!%P<*8`YlVXAxd
z*R?c{GkGX|ZpwGA0`M~fZ}rN1<awz#GkNZDB>z^rx57ubgrrulxg{bR$~F9&R#{OZ
zB7Lrlia;|-HteyED?&K4#Bm`)v<xQtf2zxy6@xAGv2YEYqi`fO1lF`f<m&*6!gWmy
z%83;$T8))?E)mhG#+Y96*X<KY{<)Bkh{WYQT2UXW05zQb3`t`SR^cPOi{wQGKpPL>
zA<Mg&LVcg>q6a_|4tsF@vd~HG5jic8R2n;sa?r9%K0nKaOYO4(;$e%I36EJjrsdV1
z7*Is61#pvP??M3j)tahA^|QYOP<U<#;5pkgKtyc$POYLF3ltHtHIFr9Y5`DsaX`JD
zhWMvV0*J_!`FAuuF6uAV+Vrl6E@}qa@cTa)m5rRml1e){kCskj$XFLlIr-~FdCwM5
zvOca`v43htt(GeI65}eRtMhbPvO9(|wC{8b$=9kmUqrM>G2If;5m!|_G`x~DHd|x*
zfeI+onCxznU$)6EB0mN2P0RC3NX{<MV_X~LYLY)H@xXnqi<*Hp?5^eK2H9wiq+B57
zBE6G~VW;bCG>ypL2DZ?{OYg2q9b4Gct;XObFRWeg(UyI=%27nr<EiH}t<?aI*DihB
z*&-4*xPObJt-D|KD~ZU(F_mg59}V%^&gky3l@f@EHlwvEZCd)y-JY;Q8>FZLua_=r
z2HLK(m!9H#(c=m-9Tg1P$HlJ4<@#(0!ZaeiJn5q&2vUc?JA`jlZ3zRRi0B=)p%xye
zk<>1_CcCo$T+vgoiAY=yqxaTMuJj&x1I;A)MN6ntFlz;E8}b)!yOpFVXX~aB5iQVm
zx5%X+)2eeP06PE}6eEAP9`m}ai!N#gTI;MO12b874Vl`WDHpAubusiv7d|?FLF7sp
z$keyDYf;zUs}<9oj+mQ4Y+E9tJuvP6*gV^jHV;uDhtV4z?^p36BLO^Kn1ma=(0>8!
zQ-PO`<_;_zHCcdb>n~OzYBz~Vk8zFe9_ylJps9%cXTI@QfiuBLx!C(S7p?7GKvU1=
zKDh|}PX_IG%&O5ug;`};pD6z|J_q0^3;(zC$#vP)AQ91Ar`I0_fGH%^yBe2>#Eql6
z_LPm941n#c&b_JMRu^6L2x$FgEZH}Tu-IX`-{^5^3^}L^Xf2yO^gsAjZr|&BULq3L
zoi^r8BC<089n08eqeifa$d>^8v6>H{0?nx;pNIikrQ5>BTO|gdT?pXr7+Lg2&H8-r
zOlOuSSZK@iST9}l2xuy_bHk#^5a-wJ<6RDK@0^ADNMHOkhwE*NUM~^RF1hUrkY1P3
zp?TTL=Sn)`E4v1iCsySiVKCmE047wKLz#}&inHR)k9^)))QK-(b|q=Q*4{;z5B2)r
zQs`*xDF7b<P;lvWpVEnk79l^j7{sVY5$SVX^cZM4!N0fY?+2ggjNSLx9MB$mlq1gS
zHNp}GpGXb#4rtT<)3)CsvbcR*I?SN|fe&+pwiA+-XrN33y#pG6_GcHKH|l6+?q$1e
z#F3~y(LnOQ7ELhF7!CB=qcuj%<dkODKmxR8w_uaVp8%~%4AtynCO~U;3pR=T3DBCv
zP|Yr80<>ngV3Ww70If+3)$C#>Kx=jjHi`TR(3-?h%`WEu0o9*wdyzT==Kufz07*qo
IM6N<$f)o>mzyJUM

literal 0
HcmV?d00001

diff --git "a/src/assets/\347\273\204 65.png" "b/src/assets/\347\273\204 65.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c961faa4911fbfee6c8e333b43c45d3a2071158c
GIT binary patch
literal 625
zcmV-%0*?KOP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B00001b5ch_0Itp)
z=>Px%D@jB_R5(wKls{<GQ4q&Jmo`a@6)_l0X$R4!R--N&?NGtuB#Mh}F8)D8P^g1A
zXjfeY7l)!wqEL%sMbY3QQqkB3#g-)2p%&Vr1=~bo`up{F@_v|_{7h5d_U_$%?t6ES
z6RMnKMh^l<fi8tsQEXsReIyX>#oOeyH%!V6sjS9qr4Q(=mY~cw=vbWI9h2#jZ3#3y
zuKOLEhX_q8K-_0lrtz~czERTV?t)w;4sX1Wp9P0ijlN~MYRa{U8)Ysinb9F{IiDvM
zxHT}(rBfl+tX>`l+}YJGC*)6K2fb;F3(C|tn++}gl`B=Y7|?CtxYv7P%Hsah92ZZ9
z_&Q~A_eqYqyhC%ij`PRXR=6u%F`z8a<^_G3wCL-f<7&@3`k&_r_=UsWO&F!YK*g|4
z<Dbd9j1~kMYJo<^iadImqh-CHJ=+`Du{r2fl#*mxbJa#(uE<0gB_A_I1`>IC&xU9W
z{vCiSNmJSw&{0d#P^y5VF#BVX;n5<O&xG*TSCls>@3VSCm2<T~AJRo;W^H^vVe6&<
z&Ea~ldygrt3*lAy%jkH~&1}YRrdI1H{8|*Er4RWSI8+KSpqcNBY>Ng7hw5sA1g`IF
zmkTcF?I(@+>KQ?Zto-{bJW@G}z1=a%FLf-L)(#b32(<nuEag}nC~bg>*1O95T&woe
zOK{T@AKaX`=rv0IStI2tj5-mHIEooW1jQD??4E=zJm`$dq*wKC@Ok-TD?t@~00000
LNkvXXu0mjf<QF3S

literal 0
HcmV?d00001

diff --git "a/src/assets/\347\273\204 66.png" "b/src/assets/\347\273\204 66.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a23f51880abcd89d9c808e135ad40e851a35b140
GIT binary patch
literal 259
zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2co#^NA%Cx&(BWL^R}dp%toLoEE?
zPBG*<6d>S|?yyL_Q@mqoYpb}Y<~#-asUAhlfg3!vD;N}A`4TR9Cr!*&aXJ?DCtgSA
zZdqGmrL|7)OF0I&4Sf8Wuhy=L+S#!5ZnJgo%O?Vi2HwH?I@zKOVtnzx`74z_8>{`5
zJ8;Bp-W65PW6M`vj5>7Youl{n%KhOLYo}fgG!uG$;JIGk?zaXR?`}Lfx9M8@CdJvl
zl5T<V6E;orbpo1j^mnjY@9X&!PB6`vPX4u6<+}Y&TSkp%Yq!ps#5^D95e83JKbLh*
G2~7Zpc4grJ

literal 0
HcmV?d00001

diff --git "a/src/assets/\347\273\204 67.png" "b/src/assets/\347\273\204 67.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e5c871bf108c01aee4552de36d4760ed44ece5a4
GIT binary patch
literal 478
zcmV<40U`d0P)<h;3K|Lk000e1NJLTq000vJ000#T1^@s6qzTp000001b5ch_0Itp)
z=>Px$m`OxIR5(w~l)Y<HQ5eR5&$;);52QF15p<}ixG2I!sxE?}i**%52mb@X$$!92
z+}w2NCg@VzNyRNt8%2;po2HxKU{R`Ql_d9(TicsL(j+!e`VQy7;eCGZCr7N=^qkWW
zxF>TCabW$u%U!d1A-JC&*HZ4M{CHdS?Ep{u0JOOnK1p0ik7`lx7koA|<*k6$HHKMz
z=d@<3o)C-;0?V~o#&uPy{sHVOq8RFR7wjmADDESac$C9hN?`eG#_Nejp^js?cC*w6
zjc0AJM#Ic~X!7UxzZi!`B8Cr!o-o7nHds&9CJx&J`|{aq8`wFGUAtju|LTes)-khh
zOBrt_TLajv?6DgONvQ?w2(wMI2TOt|?jy6EJAjp+ru?eWbpWLjoWGn9HmqOAo~`^c
z<(KuY)$Z9VMlZ&Muwek=sb=QAC^53tUKKj=K<^g((B{sdu*_UiW!8tC@KG={0B|Zj
zrmL$(PtW^Q1mlR4{|z*ciMg8|(Q?tjik-N|EoEFm40nU(dmTir*<}382^GKeU$Yak
UXeaf1ZvX%Q07*qoM6N<$f?L4g$N&HU

literal 0
HcmV?d00001

diff --git "a/src/assets/\350\267\257\345\276\204 14.png" "b/src/assets/\350\267\257\345\276\204 14.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d9063b9af923a58a27e4b5dbecf87b1a2676841e
GIT binary patch
literal 374
zcmV-+0g3*JP)<h;3K|Lk000e1NJLTq000pH000vR1^@s6cBSU=00001b5ch_0Itp)
z=>Px$FiAu~R5(xVlrcy`Q5c24qtYZz4$&5<M760kyA`$7(BK*^jV)1Q(HgWEv;>W9
z4Yj!jKBtO&j{>J?4u>dvf2b+-e1bYPbjSam^WA$7hb#Il$F+osV~jN-6zlKo<Y!e6
zlPhfKc(!cDsl-Hg->51|A(K=k==lXH-CI09#-WU@Ft{0w2<*Q;bCA!g(b04vj%N$N
zIgsr4#2@n;L?N5fQ*)+L$ztP^?E0`L5gP!|mKb%3?MzxHD!X<iu{f|fAQT+Q@ytdA
zeEVwuke&qpdL{;MG|1&<bl16j<-t}g%4J9$`aY+YO=~J>=+mj19M?YRt@|*LYO`#&
zz+B+eVIUW(c(!R!92MgGEVaIZvTN%St3aX!6OY-HHbOFK1{-fnc=_}>o1fP87qKdn
UqVM43Qvd(}07*qoM6N<$f^+<(p8x;=

literal 0
HcmV?d00001

diff --git a/src/componets/HomePage/fourGraph.vue b/src/componets/HomePage/fourGraph.vue
index 1541697..0491a4a 100644
--- a/src/componets/HomePage/fourGraph.vue
+++ b/src/componets/HomePage/fourGraph.vue
@@ -44,15 +44,17 @@ export default {
     }
   },
   props: ['loadData'],
-  mounted() {
-    this.$nextTick(function () {
-      for (let i = 0; i < this.optionData.length; i++) {
-        this.optionData[i].value = this.loadData[i]
+  mounted() {},
+  methods: {
+    getData() {
+      if (this.loadData && this.loadData.length) {
+        for (let i = 0; i < this.optionData.length; i++) {
+          this.optionData[i].value = this.loadData[i]
+        }
       }
       this.init()
-    })
-  },
-  methods: {
+    },
+
     init() {
       //构建3d饼状图
       let myChart = this.$echarts.init(
diff --git a/src/componets/Performance/barComponent.vue b/src/componets/Performance/barComponent.vue
index 8e6b4f3..4bec27a 100644
--- a/src/componets/Performance/barComponent.vue
+++ b/src/componets/Performance/barComponent.vue
@@ -12,48 +12,54 @@ export default {
     }
   },
   props: ['mountArr'],
-  mounted() {
-    this.mountArr.forEach((item) => {
-      this.nameArr.push(item.componentName)
-      this.data.push({ value: item.mountTime })
-    })
-    const chartDom = document.getElementById('main1')
-    const myChart = this.$echarts.init(chartDom, 'dark')
+  mounted() {},
+  methods: {
+    getMountArr() {
+      this.mountArr.forEach((item) => {
+        this.nameArr.push(item.componentName)
+        this.data.push({ value: item.mountTime })
+      })
+      this.init()
+    },
+    init() {
+      const chartDom = document.getElementById('main1')
+      const myChart = this.$echarts.init(chartDom, 'dark')
 
-    window.onresize = function () {
-      myChart.resize()
-    }
+      window.onresize = function () {
+        myChart.resize()
+      }
 
-    let option = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
         },
-      },
-      xAxis: {
-        type: 'category',
-        data: this.nameArr,
-      },
-      backgroundColor: '#000000',
-      yAxis: {
-        type: 'value',
-        splitLine: {
-          show: false,
+        xAxis: {
+          type: 'category',
+          data: this.nameArr,
         },
-      },
-      series: [
-        {
-          type: 'bar',
-          data: this.data,
-          showBackground: true,
-          backgroundStyle: {
-            color: 'rgba(180, 180, 180, 0.2)',
+        backgroundColor: '#000000',
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false,
           },
         },
-      ],
-    }
-    myChart.setOption(option)
+        series: [
+          {
+            type: 'bar',
+            data: this.data,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)',
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+    },
   },
 }
 </script>
diff --git a/src/componets/Performance/leftMenu.vue b/src/componets/Performance/leftMenu.vue
deleted file mode 100644
index 2efdcb5..0000000
--- a/src/componets/Performance/leftMenu.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="main"></div>
-</template>
-
-<script>
-export default {
-  name: 'leftMenu',
-}
-</script>
-
-<style lang="scss" scoped>
-.main {
-  flex: 0.16;
-  height: 100vh;
-  background: #25253f;
-  border-radius: 0px 0px 0px 0px;
-  opacity: 1;
-}
-</style>
diff --git a/src/componets/Performance/lineComponent.vue b/src/componets/Performance/lineComponent.vue
index c0fb18c..61c4135 100644
--- a/src/componets/Performance/lineComponent.vue
+++ b/src/componets/Performance/lineComponent.vue
@@ -3,62 +3,13 @@
 </template>
 
 <script>
+import { getpaintTime } from '@/services/performance'
+
 export default {
   name: 'lineComponent',
   data() {
     return {
-      paintArr: [
-        {
-          firstPaint: 94,
-          firstContentfulPaint: 68,
-          firstMeaningfulPaint: 3,
-          largestContentfulPaint: 41,
-          id: '78',
-          day: 83,
-          kind: 'anim',
-          type: 'deserunt ad et aliqua',
-        },
-        {
-          firstPaint: 40,
-          firstContentfulPaint: 75,
-          firstMeaningfulPaint: 54,
-          largestContentfulPaint: 83,
-          id: '95',
-          day: 18,
-          kind: 'anim minim',
-          type: 'consectetur et elit',
-        },
-        {
-          firstPaint: 13,
-          firstContentfulPaint: 69,
-          firstMeaningfulPaint: 51,
-          largestContentfulPaint: 16,
-          id: '3',
-          day: 83,
-          type: 'tempor eiusmod incididunt',
-          kind: 'esse officia consequat',
-        },
-        {
-          firstPaint: 2,
-          firstContentfulPaint: 23,
-          firstMeaningfulPaint: 42,
-          largestContentfulPaint: 74,
-          id: '85',
-          day: 62,
-          kind: 'occaecat sunt',
-          type: 'Duis amet irure eu in',
-        },
-        {
-          firstPaint: 1,
-          firstContentfulPaint: 57,
-          firstMeaningfulPaint: 62,
-          largestContentfulPaint: 81,
-          id: '90',
-          day: 74,
-          kind: 'exercitation',
-          type: 'aliquip dolore cillum',
-        },
-      ],
+      paintArr: [],
       firstPaint: [],
       firstContentfulPaint: [],
       firstMeaningfulPaint: [],
@@ -66,125 +17,137 @@ export default {
     }
   },
   mounted() {
-    const chartDom = document.getElementById('line')
-    const myChart = this.$echarts.init(chartDom, 'dark')
+    this.getPaintArr()
+  },
+  methods: {
+    async getPaintArr() {
+      let res = await getpaintTime()
+      for (let i = 0; i < res.data.result.length; i++) {
+        this.paintArr.push(res.data.result[i])
+      }
+      this.paintArr = this.paintArr.sort((a, b) => a.day - b.day)
 
-    window.onresize = function () {
-      myChart.resize()
-    }
+      this.paintArr.forEach((item) => {
+        this.firstPaint.push(item.firstPaint)
+      })
 
-    this.paintArr = this.paintArr.sort((a, b) => a.day - b.day)
-    this.paintArr.forEach((item) => {
-      this.firstPaint.push(item.firstPaint)
-    })
+      this.paintArr.forEach((item) => {
+        this.firstContentfulPaint.push(item.firstContentfulPaint)
+      })
 
-    this.paintArr.forEach((item) => {
-      this.firstContentfulPaint.push(item.firstContentfulPaint)
-    })
+      this.paintArr.forEach((item) => {
+        this.firstMeaningfulPaint.push(item.firstMeaningfulPaint)
+      })
 
-    this.paintArr.forEach((item) => {
-      this.firstMeaningfulPaint.push(item.firstMeaningfulPaint)
-    })
+      this.paintArr.forEach((item) => {
+        this.largestContentfulPaint.push(item.largestContentfulPaint)
+      })
 
-    this.paintArr.forEach((item) => {
-      this.largestContentfulPaint.push(item.largestContentfulPaint)
-    })
+      this.init()
+    },
+    init() {
+      const chartDom = document.getElementById('line')
+      const myChart = this.$echarts.init(chartDom, 'dark')
 
-    let option = {
-      tooltip: {
+      window.onresize = function () {
+        myChart.resize()
+      }
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        backgroundColor: '#000000',
         trigger: 'axis',
         axisPointer: {
-          type: 'shadow',
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985',
+          },
         },
-      },
-      backgroundColor: '#000000',
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985',
+        xAxis: {
+          type: 'category',
+          data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7'],
+          boundaryGap: false,
         },
-      },
-      xAxis: {
-        type: 'category',
-        data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7'],
-        boundaryGap: false,
-      },
-      yAxis: {
-        type: 'value',
-        splitLine: {
-          show: false,
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false,
+          },
         },
-      },
-      series: [
-        {
-          name: 'FP',
-          type: 'line',
-          data: this.firstPaint,
-          symbolSize: 10,
-          lineStyle: {
-            normal: {
-              color: '#6BE6C1 ',
+        series: [
+          {
+            name: 'FP',
+            type: 'line',
+            data: this.firstPaint,
+            symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: '#6BE6C1 ',
+              },
             },
-          },
-          itemStyle: {
-            normal: {
-              color: '#6BE6C1 ',
+            itemStyle: {
+              normal: {
+                color: '#6BE6C1 ',
+              },
             },
           },
-        },
-        {
-          name: 'FCP',
-          type: 'line',
-          data: this.firstContentfulPaint,
-          symbolSize: 10,
-          lineStyle: {
-            normal: {
-              color: '#8ED6FA ',
+          {
+            name: 'FCP',
+            type: 'line',
+            data: this.firstContentfulPaint,
+            symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: '#8ED6FA ',
+              },
             },
-          },
-          itemStyle: {
-            normal: {
-              color: '#8ED6FA',
+            itemStyle: {
+              normal: {
+                color: '#8ED6FA',
+              },
             },
           },
-        },
-        {
-          name: 'FMP',
-          type: 'line',
-          data: this.firstMeaningfulPaint,
-          symbolSize: 10,
-          lineStyle: {
-            normal: {
-              color: '#466AEB',
+          {
+            name: 'FMP',
+            type: 'line',
+            data: this.firstMeaningfulPaint,
+            symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: '#466AEB',
+              },
             },
-          },
-          itemStyle: {
-            normal: {
-              color: '#466AEB',
+            itemStyle: {
+              normal: {
+                color: '#466AEB',
+              },
             },
           },
-        },
-        {
-          name: 'LCP',
-          type: 'line',
-          data: this.largestContentfulPaint,
-          symbolSize: 10,
+          {
+            name: 'LCP',
+            type: 'line',
+            data: this.largestContentfulPaint,
+            symbolSize: 10,
 
-          lineStyle: {
-            normal: {
-              color: '#EABE37',
+            lineStyle: {
+              normal: {
+                color: '#EABE37',
+              },
             },
-          },
-          itemStyle: {
-            normal: {
-              color: '#EABE37',
+            itemStyle: {
+              normal: {
+                color: '#EABE37',
+              },
             },
           },
-        },
-      ],
-    }
-    myChart.setOption(option)
+        ],
+      }
+      myChart.setOption(option)
+    },
   },
 }
 </script>
diff --git a/src/componets/Performance/listComponent.vue b/src/componets/Performance/listComponent.vue
index 9b1d348..b71fe7d 100644
--- a/src/componets/Performance/listComponent.vue
+++ b/src/componets/Performance/listComponent.vue
@@ -9,11 +9,7 @@ export default {
     return {}
   },
   props: ['loadData'],
-  mounted() {
-    this.$nextTick(function () {
-      this.init()
-    })
-  },
+  mounted() {},
   methods: {
     init() {
       const chartDom = document.getElementById('main')
diff --git a/src/componets/Performance/paintList.vue b/src/componets/Performance/paintList.vue
index ab5c341..3f7904c 100644
--- a/src/componets/Performance/paintList.vue
+++ b/src/componets/Performance/paintList.vue
@@ -10,7 +10,9 @@
     </div>
     <div class="paint">
       <div class="common" style="background-color: #466aeb"></div>
-      <div style="color: #466aeb">第一个有意义的内容出现时间（FMP）</div>
+      <div style="color: #466aeb; text-align: left">
+        第一个有意义的内容出现时间（FMP）
+      </div>
     </div>
     <div class="paint">
       <div class="common" style="background-color: #eabe37"></div>
diff --git a/src/componets/Performance/performanceBottom.vue b/src/componets/Performance/performanceBottom.vue
index c6a315a..52d0771 100644
--- a/src/componets/Performance/performanceBottom.vue
+++ b/src/componets/Performance/performanceBottom.vue
@@ -2,29 +2,29 @@
   <div class="footer">
     <div class="left">
       <div style="display: flex; margin-bottom: 0.9896vw">
-        <titleComponent na="页面访问速度分布"></titleComponent>
+        <titleComponent na="近7天页面访问速度分布"></titleComponent>
       </div>
       <div class="page">
         <div class="topleft"></div>
         <div class="topright"></div>
         <div class="leftbottom"></div>
         <div class="rightbottom"></div>
-        <ListComponent :loadData="loadData"></ListComponent>
+        <ListComponent :loadData="loadData" ref="list"></ListComponent>
         <div>
-          <fourGraph :loadData="loadData"></fourGraph>
+          <fourGraph :loadData="loadData" ref="four"></fourGraph>
         </div>
       </div>
     </div>
     <div class="right">
       <div style="display: flex; margin-bottom: 0.9896vw">
-        <titleComponent na="组件访问时间"></titleComponent>
+        <titleComponent na="近7天监控组件访问时间"></titleComponent>
       </div>
       <div class="component">
         <div class="topleft"></div>
         <div class="topright"></div>
         <div class="leftbottom"></div>
         <div class="rightbottom"></div>
-        <BarComponent :mountArr="mountArr"></BarComponent>
+        <BarComponent :mountArr="mountArr" ref="mount"></BarComponent>
       </div>
     </div>
   </div>
@@ -35,6 +35,7 @@ import titleComponent from '../HomePage/titleComponent.vue'
 import fourGraph from '../HomePage/fourGraph.vue'
 import ListComponent from './listComponent.vue'
 import BarComponent from './barComponent.vue'
+import { getLoadArr, getMountArr } from '@/services/performance'
 
 export default {
   name: 'performanceBottom',
@@ -46,49 +47,8 @@ export default {
   },
   data() {
     return {
-      loadArr: [
-        {
-          id: 89,
-          loadTime: 1427678475642,
-          type: 'ullamco sed',
-          kind: 'cillum veniam nulla in',
-        },
-        {
-          id: 5,
-          loadTime: 137549105933,
-          type: 'ea',
-          kind: 'consequat aute sed quis et',
-        },
-        {
-          id: 13,
-          loadTime: 57383004513,
-          type: 'ut do',
-          kind: 'nulla amet cillum',
-        },
-      ],
-      mountArr: [
-        {
-          id: 97,
-          componentName: '方话里极',
-          mountTime: 1,
-          type: 'ut adipisicing cupidatat',
-          kind: 'labore veniam mollit id',
-        },
-        {
-          id: 5,
-          componentName: '自北断直上',
-          mountTime: 74,
-          type: 'esse',
-          kind: 'velit',
-        },
-        {
-          id: 16,
-          componentName: '红少影适界思',
-          mountTime: 9364,
-          type: 'sed exercitation',
-          kind: 'deserunt tempor',
-        },
-      ],
+      loadArr: [],
+      mountArr: [],
       best: 0,
       good: 0,
       bad: 0,
@@ -97,22 +57,41 @@ export default {
     }
   },
   mounted() {
-    this.loadArr.forEach((item) => {
-      if (item.loadTime < 1) {
-        this.best++
-      } else if (item.loadTime < 3) {
-        console.log(item.loadTime)
-        this.good++
-      } else if (item.loadTime < 5) {
-        this.bad++
-      } else {
-        this.badest++
+    this.getLoadArr()
+    this.getMountArr()
+  },
+  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.list.init()
+      this.$refs.four.getData()
+    },
+    async getMountArr() {
+      const res = await getMountArr()
+      for (let i = 0; i < res.data.result.length; i++) {
+        this.mountArr.push(res.data.result[i])
       }
-    })
-    this.loadData.push(this.best)
-    this.loadData.push(this.good)
-    this.loadData.push(this.bad)
-    this.loadData.push(this.badest)
+
+      this.$refs.mount.getMountArr()
+      console.log(this.$refs.mount.mountArr)
+    },
   },
 }
 </script>
diff --git a/src/componets/Performance/performanceMain.vue b/src/componets/Performance/performanceMain.vue
index 5ef8efc..0847452 100644
--- a/src/componets/Performance/performanceMain.vue
+++ b/src/componets/Performance/performanceMain.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="main">
     <div class="wrapper">
-      <performanceTop :paintArr="paintArr"></performanceTop>
+      <performanceTop :paintArr="paintArr" ref="top"></performanceTop>
       <performanceMiddle></performanceMiddle>
       <performanceBottom></performanceBottom>
     </div>
+    <a href="https://www.npmjs.com/package/revue-monitor" class="md">
+      <img src="../../assets/组 67.png" alt="" class="img" />
+      <p>使用文档</p>
+    </a>
   </div>
 </template>
 
@@ -12,6 +16,7 @@
 import performanceTop from './performanceTop.vue'
 import performanceMiddle from './performanceMiddle.vue'
 import performanceBottom from './performanceBottom.vue'
+import { getpaintTime } from '@/services/performance'
 
 export default {
   name: 'performanceMain',
@@ -22,48 +27,28 @@ export default {
   },
   data() {
     return {
-      paintArr: [
-        {
-          firstPaint: 50,
-          firstContentfulPaint: 97,
-          firstMeaningfulPaint: 24,
-          largestContentfulPaint: 60,
-          id: '21',
-          day: 27,
-          kind: 'fugiat',
-          type: 'ex est id proident',
-        },
-        {
-          firstPaint: 35,
-          firstContentfulPaint: 43,
-          firstMeaningfulPaint: 29,
-          largestContentfulPaint: 14,
-          id: '40',
-          day: 97,
-          kind: 'do aliqua dolore Excepteur in',
-          type: 'anim laboris quis',
-        },
-        {
-          firstPaint: 73,
-          firstContentfulPaint: 61,
-          firstMeaningfulPaint: 23,
-          largestContentfulPaint: 41,
-          id: '99',
-          day: 91,
-          kind: 'ullamco minim',
-          type: 'laboris exercitation eu aliquip dolore',
-        },
-      ],
+      paintArr: [],
     }
   },
 
-  mounted() {},
+  mounted() {
+    this.getPaintArr()
+  },
+  methods: {
+    async getPaintArr() {
+      let res = await getpaintTime()
+      for (let i = 0; i < res.data.result.length; i++) {
+        this.paintArr.push(res.data.result[i])
+      }
+      this.$refs.top.getPaintArr()
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .main {
-  flex: 0.84;
+  flex: 0.842;
   height: 100vh;
   background: #000000;
   border-radius: 0px 0px 0px 0px;
@@ -74,4 +59,34 @@ export default {
   width: 100%;
   margin: 6.7vh 7.7vw 6.7vh 7.7vw;
 }
+.md {
+  position: fixed;
+  top: 3.1vh;
+  right: 3.3854vw;
+  width: 8.3333vw;
+  height: 5vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 27px 27px 27px 27px;
+  opacity: 0.7;
+  border: 1px solid #275079;
+  display: flex;
+  justify-content: space-around;
+  vertical-align: center;
+  .img {
+    margin-top: 1.28vh;
+    margin-left: 1.3021vw;
+    width: 1.0938vw;
+    height: 2.3vh;
+  }
+  p {
+    width: 5vw;
+    height: 2.5vh;
+    font-size: 0.9vw;
+    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 1vh;
+    margin-right: 0.625vw;
+  }
+}
 </style>
diff --git a/src/componets/Performance/performanceMiddle.vue b/src/componets/Performance/performanceMiddle.vue
index 88bc5ea..f58a99a 100644
--- a/src/componets/Performance/performanceMiddle.vue
+++ b/src/componets/Performance/performanceMiddle.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="middle">
     <div style="display: flex; margin-bottom: 0.9895vw">
-      <titleComponent na="页面渲染时间"></titleComponent>
+      <titleComponent na="近7天页面渲染时间"></titleComponent>
     </div>
     <div class="wrapper">
       <LineComponent></LineComponent>
diff --git a/src/componets/Performance/performanceTop.vue b/src/componets/Performance/performanceTop.vue
index f2ed62b..12ea064 100644
--- a/src/componets/Performance/performanceTop.vue
+++ b/src/componets/Performance/performanceTop.vue
@@ -2,7 +2,7 @@
   <div class="top">
     <div class="left">
       <div style="display: flex; margin-bottom: 0.9895vw">
-        <titleComponent na="概况"></titleComponent>
+        <titleComponent na="近7天概况"></titleComponent>
       </div>
       <div class="meanTime">
         <div class="item">
@@ -10,19 +10,19 @@
           <div class="item-item2">{{ parseInt(firstPaint / 7) }}ms</div>
         </div>
         <div class="item">
-          <div class="item-item1">FP平均时间</div>
+          <div class="item-item1">FCP平均时间</div>
           <div class="item-item2">
             {{ parseInt(firstContentfulPaint / 7) }}ms
           </div>
         </div>
         <div class="item">
-          <div class="item-item1">FP平均时间</div>
+          <div class="item-item1">FMP平均时间</div>
           <div class="item-item2">
             {{ parseInt(firstMeaningfulPaint / 7) }}ms
           </div>
         </div>
         <div class="item">
-          <div class="item-item1">FP平均时间</div>
+          <div class="item-item1">LCP平均时间</div>
           <div class="item-item2">
             {{ parseInt(largestContentfulPaint / 7) }}ms
           </div>
@@ -31,7 +31,7 @@
     </div>
     <div class="right">
       <div style="display: flex; margin-bottom: 0.9895vw">
-        <titleComponent na="白屏页面个数"></titleComponent>
+        <titleComponent na="近7天白屏页面个数"></titleComponent>
       </div>
       <div class="blank">
         <div class="count">{{ count }}</div>
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import { getBlankCount } from '@/services/performance'
 import titleComponent from '../HomePage/titleComponent.vue'
 export default {
   name: 'performanceTop',
@@ -62,13 +63,7 @@ export default {
     }
   },
   mounted() {
-    this.paintArr.forEach((item) => {
-      this.firstPaint += item.firstPaint
-      this.firstContentfulPaint += item.firstContentfulPaint
-      this.firstMeaningfulPaint += item.firstMeaningfulPaint
-      this.largestContentfulPaint += item.largestContentfulPaint
-    })
-    console.log(this.firstPaint)
+    this.getCount()
   },
   methods: {
     getWhat(count) {
@@ -80,6 +75,18 @@ export default {
         return '直接扑街'
       }
     },
+    getPaintArr() {
+      this.paintArr.forEach((item) => {
+        this.firstPaint += item.firstPaint
+        this.firstContentfulPaint += item.firstContentfulPaint
+        this.firstMeaningfulPaint += item.firstMeaningfulPaint
+        this.largestContentfulPaint += item.largestContentfulPaint
+      })
+    },
+    async getCount() {
+      const res = await getBlankCount()
+      this.count = res.data.count
+    },
   },
 }
 </script>
diff --git a/src/componets/leftMenu.vue b/src/componets/leftMenu.vue
new file mode 100644
index 0000000..ebae4fb
--- /dev/null
+++ b/src/componets/leftMenu.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="main">
+    <div class="logo">
+      <img src="../assets/logo/logo.png" alt="Revue" class="img" />
+    </div>
+    <el-menu
+      default-active="2"
+      background-color="#25253f"
+      text-color="#fff"
+      active-text-color="#466AEB"
+      :router="true"
+      style="width: 100%"
+    >
+      <el-menu-item index="/">
+        <div class="item">
+          <div class="wrapper">
+            <img src="../assets/路径 14.png" alt="" class="item-img" />
+          </div>
+          <span slot="title">首页</span>
+        </div>
+      </el-menu-item>
+      <el-menu-item index="/js-error">
+        <div class="item">
+          <div class="wrapper">
+            <img src="../assets/组 65.png" alt="" class="item-img" />
+          </div>
+          <span slot="title">js错误</span>
+        </div>
+      </el-menu-item>
+      <el-menu-item index="/performance">
+        <div class="item">
+          <div class="wrapper">
+            <img src="../assets/组 66.png" alt="" class="item-img" />
+          </div>
+          <span slot="title">页面性能</span>
+        </div>
+      </el-menu-item>
+      <el-menu-item index="/req-error">
+        <div class="item">
+          <div class="wrapper">
+            <img src="../assets/组 67.png" alt="" class="item-img" />
+          </div>
+          <span slot="title">接口错误</span>
+        </div>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'leftMenu',
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  flex: 0.158;
+  height: 100vh;
+  background: #25253f;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding-top: 1.7708vw;
+  .logo {
+    margin-bottom: 1.1vw;
+  }
+}
+.img {
+  width: 8.0208vw;
+}
+.item {
+  display: flex;
+  flex-flow: row wrap;
+  align-content: center;
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .item-img {
+    width: 0.8781vw;
+    height: 1.9vh;
+    margin-top: -0.4vh;
+    margin-left: 2.5vw;
+    margin-right: 2.4vw;
+  }
+}
+:deep(.el-menu) {
+  border-right: 0px;
+}
+</style>
diff --git a/src/services/performance.js b/src/services/performance.js
new file mode 100644
index 0000000..2fb08fe
--- /dev/null
+++ b/src/services/performance.js
@@ -0,0 +1,9 @@
+import service from '@/utils/request'
+
+export const getLoadArr = () => service.get('/loadArr')
+
+export const getMountArr = () => service.get('/mountArr')
+
+export const getBlankCount = () => service.get('/blankCount')
+
+export const getpaintTime = () => service.get('/paintTime')
diff --git a/src/views/PerformanceView.vue b/src/views/PerformanceView.vue
index 4020330..713fa3c 100644
--- a/src/views/PerformanceView.vue
+++ b/src/views/PerformanceView.vue
@@ -7,7 +7,7 @@
 
 <script>
 import performanceMain from '@/componets/Performance/performanceMain.vue'
-import leftMenu from '@/componets/Performance/leftMenu.vue'
+import leftMenu from '@/componets/leftMenu.vue'
 
 export default {
   name: 'PerformanceView',
-- 
Gitee