diff --git a/src/assets/jsError/yuanquan.jpg b/src/assets/jsError/yuanquan.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a2d0b6e66031401431ca3acd4f46846dbbd549dc
Binary files /dev/null and b/src/assets/jsError/yuanquan.jpg differ
diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
index 643a75bdfac3a442fc2d57cea4786125855dbe78..b3e50c5efb51d8083e864dc6f0426d1fa0e33d58 100644
--- a/src/componets/jsError/dataShow.vue
+++ b/src/componets/jsError/dataShow.vue
@@ -4,14 +4,23 @@
     <div class="heater">
       <!-- 选择框 -->
       <el-select
-        placeholder="监测页面"
+        placeholder="监测组件"
         v-model="channel"
         :popper-append-to-body="false"
       >
-        <el-option label="首页" value="首页"> </el-option>
-        <el-option label="产品页" value="产品页"> </el-option>
-        <el-option label="公司详情" value="公司详情"> </el-option>
+        <el-option label="全部组件" value="全部组件"> </el-option>
       </el-select>
+      <div class="elOption">
+        <el-date-picker
+          v-model="value"
+          type="daterange"
+          start-placeholder="2022-08-08"
+          end-placeholder="2022-08-21"
+          :default-time="['00:00:00', '23:59:59']"
+        >
+        </el-date-picker>
+      </div>
+
       <div class="jseTitle">
         <i class="el-icon-caret-right" id="el-icon-caret-right"></i>
         <p class="jseH1">JS错误概况</p>
@@ -23,101 +32,119 @@
 </template>
 
 <script>
+import { jsSituation } from '@/services/jsError/request'
+
 export default {
   name: 'dataShow',
   data () {
     return {
-      channel: "全部页面"
+      channel: "全部组件",
+      value1: '',
+      value: ''
+
     }
   },
   mounted () {
-    var chartDom = document.getElementById('contemt');
-    var myChart = this.$echarts.init(chartDom, 'dark');
-    var option = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        }
-      },
-      xAxis: [
-        {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          data: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7', '7/8', '7/9', '7/10', '7/11', '7/12', '7/13', '7/14'],
+    jsSituation().then(res => {
+      this.data = res.data.result
+      let day = this.data.map(function (item) {
+        return item.day
+      })
+      let errorCount = this.data.map(function (item) {
+        return item.errorCount
+      })
+
+      var chartDom = document.getElementById('contemt');
+      var myChart = this.$echarts.init(chartDom, 'dark');
+      var option = {
+        tooltip: {
+          trigger: 'axis',
           axisPointer: {
-            alignWithLabel: true
+            type: 'shadow',
           }
-        }
-      ],
-      yAxis: [
-        {
-          // name: '个',
-          type: 'value',
-          splitLine: {
-            show: false
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            data: day,
+            axisPointer: {
+              alignWithLabel: true
+            }, axisLabel: {
+              interval: 0
+            }
           }
-        }
-      ],
-      series: [{
-        type: 'bar',
-        barWidth: '17px',
-        data: [820, 422, 200, 534, 790, 330, 820, 630, 702, 400, 834, 390, 930, 420],
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 1,
-          colorStops: [{
-            offset: 0,
-            color: '#6BE6C1' // 0% 处的颜色
-          },
+        ],
+        yAxis: [
           {
-            offset: 1,
-            color: '#1A70F3' // 100% 处的颜色
+            // name: '个',
+            type: 'value',
+            splitLine: {
+              show: false
+            }
           }
-          ],
-        },
-      },
-      {
-        type: 'line',
-        symbolSize: 7,
-        data: [820, 422, 200, 534, 790, 330, 820, 630, 702, 400, 834, 390, 930, 420],
-        itemStyle: {
-          normal: {
-            color: "#FFFFFF", //改变折线点的颜色
-            lineStyle: {
-              color: "#466AEB", //改变折线颜色
-              width: 1// 0.1的线条是非常细的了
+        ],
+        series: [{
+          type: 'bar',
+          barWidth: '17px',
+          data: errorCount,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: '#6BE6C1' // 0% 处的颜色
             },
+            {
+              offset: 1,
+              color: '#1A70F3' // 100% 处的颜色
+            }
+            ],
           },
         },
-      }],
-      grid: [{
-        left: '100px',
-        bottom: '30px',
-        top: '13%',
-        right: '100px'
-      }],
-      backgroundColor: '#000000',
-    };
+        {
+          type: 'line',
+          symbolSize: 7,
+          data: errorCount,
+          itemStyle: {
+            normal: {
+              color: "#FFFFFF", //改变折线点的颜色
+              lineStyle: {
+                color: "#466AEB", //改变折线颜色
+                width: 1// 0.1的线条是非常细的了
+              },
+            },
+          },
+        }],
+        grid: [{
+          left: '100px',
+          bottom: '30px',
+          top: '13%',
+          right: '100px'
+        }],
+        backgroundColor: '#000000',
+      };
+
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    })
 
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
   }
 
 }
 </script>
 
-<style scoped>
+<style scoped lang="less" >
 .heater {
   height: 19vh;
   width: 59vw;
@@ -141,8 +168,8 @@ export default {
   display: flex;
   justify-content: left;
   position: absolute;
-  top: 80px;
-  left: 357px;
+  top: 10vh;
+  left: 17.5vw;
 }
 .jseH1 {
   font-size: clamp(1rem, 1.3vw, 4rem);
@@ -157,8 +184,8 @@ export default {
 .el-select {
   width: 10vw;
   position: absolute;
-  left: 363px;
-  top: 30px;
+  left: 17.5vw;
+  top: 3vh;
   font-family: AlibabaMedium;
   font-weight: 400;
 }
@@ -192,8 +219,19 @@ export default {
   font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
   font-weight: 400;
   color: #ffffff;
+  border-radius: 25px;
 }
 .el-select-dropdown__item:last-child {
   border-bottom: none;
 }
+.elOption {
+  position: relative;
+  left: 15vw;
+  top: 9vh;
+}
+::v-deep .el-range-input {
+  background: linear-gradient(#081f37, #123251);
+  opacity: 0.3;
+  color: #ffffff;
+}
 </style>
\ No newline at end of file
diff --git a/src/componets/jsError/jsDetailed.vue b/src/componets/jsError/jsDetailed.vue
index bccf3affdd1aa17ade3d0052d9f51d72c40a7ab0..f99dd72ec8e3452f9a05517b5088ccacaa6c342d 100644
--- a/src/componets/jsError/jsDetailed.vue
+++ b/src/componets/jsError/jsDetailed.vue
@@ -1,62 +1,208 @@
 <template>
-  <div class="jsDetailed">
+  <div class="jsDetailed" v-if="errorDetailed[current]">
     <div class="jsDetailed-left">
       <p class="jsTypeTitle jstitle pBlock">事件类型</p>
-      <p class="jsTypeValue pBlock">Error</p>
-      <p class="jsTimeV pBlock">2022-9-20 12:30:20</p>
+      <p class="jsTypeValue pBlock">{{ errorDetailed[current].errorTypes }}</p>
+      <p class="jsTimeV pBlock">{{ errorDetailed[current].timeStamp }}</p>
 
       <p class="jsContentT jstitle">事件内容</p>
-      <p class="jsContentV jsValue">error is not defined</p>
+      <p class="jsContentV jsValue">{{ errorDetailed[current].message }}</p>
       <p class="errorContentT jstitle">错误内容</p>
-      <p class="errorContentV jsValue">暂无</p>
+      <p class="errorContentV jsValue">{{ errorDetailed[current].detail }}</p>
       <p class="jsUrlT jstitle">发生页面</p>
-      <p class="jsUrV jsValue">https://www.(检测对象网址)</p>
-      <p class="jsInfoT jstitle">加载信息</p>
-      <p class="jsInfoV jsValue">错误代码行列 行：xx，列：xx</p>
-      <el-button type="success" class="buttonStyle">解决</el-button>
-      <el-button type="warning" class="buttonStyle">忽略</el-button>
+      <p class="jsUrV jsValue">{{ errorDetailed[current].simpleUrl }}</p>
+      <p class="jsInfoT jstitle">错误定位</p>
+      <p class="jsInfoV jsValue">
+        错误代码行列 行：{{ errorDetailed[current].Position.row }}，列：{{
+          errorDetailed[current].Position.column
+        }}
+      </p>
+      <el-button type="success" class="buttonStyle" @click="solve"
+        >解决</el-button
+      >
+      <el-button type="warning" class="buttonStyle" @click="neglect"
+        >忽略</el-button
+      >
     </div>
     <div class="jsDetailed-right">
       <!-- 圆 -->
       <div class="errorCount1 circle">
         <div class="errorCount2 circle">
-          <p class="errorCount-num">1,100</p>
+          <p class="errorCount-num">
+            {{ errorDetailed[current].errorCount }}
+          </p>
           <p class="errorCount-title">发生总次数</p>
         </div>
       </div>
       <!-- 趋势图 -->
-      <js-trend />
+      <div class="trend" id="trend"></div>
     </div>
   </div>
 </template>
 
 <script>
-import jsTrend from './jsTrend.vue'
-
+import { getJsError } from '@/services/jsError/request'
 export default {
-  components: { jsTrend },
+  props: {
+    errorDetailed: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
   name: 'jsDetailed',
-
   data () {
     return {
-
+      data1: [],
     }
   },
+  watch: {
+    current (val) {
+      if (val) {
+        let seriesData = this.errorDetailed[val].errorStatistics.map(function (item) {
+          return item.errorCount
+        })
+        this.drawChart(seriesData)
+      }
+    },
+    immediate: true
+  },
   mounted () {
+    getJsError().then(res => {
+      this.data1 = res.data.result[0].errorStatistics
+      let seriesData = this.data1.map(function (item) {
+        return item.errorCount
+      })
+      this.drawChart(seriesData)
+    })
+
+  },
+
+  methods: {
+    solve () {
+      this.$emit('solve')
+    },
+    neglect () {
+      this.$emit('neglect')
+    },
+    drawChart (seriesData) {
+      const chartDom = document.getElementById('trend')
+      const myChart = this.$echarts.init(chartDom, 'dark')
+      let option = {
+        grid: [{
+          left: '15%',
+          bottom: '10%',
+          top: '20%',
+          right: '10%'
+        }],
+        title: {
+          padding: [10, 0, 0, 0],
+          show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
+          text: '24小时报错趋势',
+          textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+            fontFamily: 'AlibabaMedium',
+            fontSize: 15,
+            fontWeight: '200',
+            color: '#739FC7'
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          },
+          showContent: true,
+        }
+        ,
+        backgroundColor: '',
+        xAxis: {
+          type: 'category',
+          data: ['00', '04', '08', '12', '16', '20'], // 时间
+          boundaryGap: false,
+          lineStyle: {
+            color: '#647483'
+          },
+          axisTick: {
+            show: false
+          },
+        },
+
+        yAxis: {
+          type: 'value',
+          data: ['0', '5', '10', '15', '20', '25'],
+          splitLine: {
+            show: false
+          }
+        },
+        series: [{
+          name: '错误',
+          type: 'line',
+          data: seriesData,
+          symbol: 'none',
+          lineStyle: {
+            // 设置线条的style等
+            normal: {
+              color: '#4E6CBD'
+            }
+          },
+          itemStyle: {
+            // 设置线条上点的颜色（和图例的颜色）
+            normal: {
+              color: '#FFFFFF'
+            }
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                // 渐变颜色
+                {
+                  offset: 0,
+                  color: '#4D6CF3'
+                },
+                {
+                  offset: 1,
+                  color: '#092134'
+                }
+              ],
+              global: false
+            }
+          }
+        },
+        ]
+      };
+      myChart.setOption(option)
+      window.onresize = function () {
+        myChart.resize();
+      }
+    }
+  },
 
-  }
 
 }
+
 </script>
 
 <style  scoped>
 .jsDetailed {
-  width: 37.4vw;
+  width: 41.4vw;
   height: 40vh;
   background: linear-gradient(10deg, #081f37 0%, #123251 100%);
   opacity: 0.7;
   border: 1px solid #275079;
-  margin-right: 47px;
+  margin: 0 -5vw 0 4vw;
   display: flex;
 }
 .jsDetailed-left {
@@ -64,7 +210,7 @@ export default {
   height: 40vh;
 }
 .jsDetailed-right {
-  width: 16vw;
+  width: 20vw;
   height: 40vh;
   border-left: 1px dashed #7a97b6;
 }
@@ -82,7 +228,7 @@ export default {
   display: inline-block;
 }
 .jsTypeTitle {
-  margin-left: -1.4vw !important;
+  margin-left: -3vw !important;
   width: 71px !important;
   margin-bottom: 1vh;
 }
@@ -107,13 +253,13 @@ export default {
   margin: 2vh 0 0 1vw;
 }
 .jsContentV {
-  margin: 0 0 0.8vh -3vw;
+  margin: 0 0 0.9vh -1vw;
 }
 .errorContentV {
-  margin: 0 0 0.8vh -6vw;
+  margin: 0 0 0.8vh 1.2vw;
 }
 .jsUrV {
-  margin: 0 0 0.8vh -1vw;
+  margin: 0px 0 0.8vh -1.8vw;
 }
 .jsInfoV {
   margin: 0 0 0.8vh -1vw;
@@ -170,4 +316,9 @@ export default {
   font-size: clamp(-1rem, 0.2vw, 4rem);
   font-family: AlibabaMedium;
 }
+.trend {
+  width: 16vw;
+  height: 23vh;
+  margin: 0 0 0vh 2vw;
+}
 </style>
diff --git a/src/componets/jsError/jsRecord.vue b/src/componets/jsError/jsRecord.vue
index faa0ddedeac9780d0787436298e648242fa71a5f..7be1e75609418f1df5d6b9a921f1c65d272b1711 100644
--- a/src/componets/jsError/jsRecord.vue
+++ b/src/componets/jsError/jsRecord.vue
@@ -1,13 +1,43 @@
 <template>
-  <div class="jsRecord"></div>
+  <div class="jsRecord">
+    <ul>
+      <template>
+        <li
+          v-for="(item, index) in errorDetailed"
+          :key="index"
+          @click="changecurrent(index)"
+        >
+          <div class="icon"></div>
+          <div class="content">
+            <div class="Ctop">
+              <p class="jstype">{{ item.errorType }}</p>
+              <p class="time">{{ item.timeStamp }}</p>
+            </div>
+            <p class="jsmessage">{{ item.message }}</p>
+          </div>
+        </li>
+      </template>
+    </ul>
+  </div>
 </template>
 
 <script>
 export default {
+  props: {
+    errorDetailed: {
+      type: Array,
+    }
+  },
   name: 'jsRecord',
   data () {
     return {
 
+    }
+  },
+  methods: {
+    changecurrent (index) {
+      this.$emit('changecurrent', index)
+
     }
   }
 }
@@ -16,7 +46,72 @@ export default {
 <style  scoped>
 .jsRecord {
   width: 44.1vw;
-  height: 37.7vh;
-  border: 1px slateblue solid;
+  overflow-y: scroll;
+  display: flex;
+}
+.jsRecord::-webkit-scrollbar {
+  width: 20px;
+  height: 8px;
+}
+
+.jsRecord::-webkit-scrollbar-thumb {
+  border-radius: 12px;
+  border: 7px solid rgba(0, 0, 0, 0);
+  box-shadow: 9px 0 0 #a5adb7 inset;
+  height: 120px;
+}
+li {
+  width: 35vw;
+  height: 10vh;
+
+  list-style: none;
+  display: flex;
+  border: 1px solid #000;
+  cursor: pointer;
+}
+ul {
+  padding: 0;
+  margin: 0;
+}
+.content {
+  width: 31vw;
+  height: 9vh;
+  margin-top: 3px;
+  border: 1px solid #275079;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  opacity: 0.7;
+}
+.content:hover {
+  background-color: #f1f7fc;
+  opacity: 1;
+}
+.icon {
+  width: 56px;
+  height: 11vh;
+  background-image: url(../../assets/jsError/yuanquan.jpg);
+  background-size: auto;
+}
+p {
+  padding: 0;
+  color: #fff;
+  margin: 0;
+}
+.Ctop {
+  width: 31vw;
+  height: 4vh;
+
+  display: flex;
+}
+.jstype {
+  font-size: clamp(-1rem, 1.1vw, 4rem);
+  margin: 1.5vh 0 0 2vw;
+}
+.jsmessage {
+  font-size: clamp(-2rem, 0.9vw, 4rem);
+  margin: 1vh 0 0 -17vw;
+}
+.time {
+  font-size: clamp(-1rem, 1vw, 4rem);
+  margin: 1vh 0 0 13vw;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/componets/jsError/jsTrend.vue b/src/componets/jsError/jsTrend.vue
deleted file mode 100644
index f23ce493be59365f97305db072c611b4c7d0360b..0000000000000000000000000000000000000000
--- a/src/componets/jsError/jsTrend.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div class="trend" id="trend"></div>
-</template>
-
-<script>
-export default {
-  name: 'jsTrend',
-  data () {
-    return {
-
-    }
-  },
-  mounted () {
-    const chartDom = document.getElementById('trend')
-    const myChart = this.$echarts.init(chartDom, 'dark')
-    let option = {
-      grid: [{
-        left: '10%',
-        bottom: '10%',
-        top: '30%',
-        right: '10%'
-      }],
-      title: {
-        padding: [10, 0, 0, 0],
-        show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
-        text: '24小时报错趋势',
-        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
-          fontFamily: 'AlibabaMedium',
-          fontSize: 15,
-          fontWeight: '200',
-          color: '#739FC7'
-        },
-      },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'cross',
-          label: {
-            backgroundColor: '#6a7985'
-          }
-        },
-        showContent: true,
-      }
-      ,
-      backgroundColor: '',
-      xAxis: {
-        type: 'category',
-        data: ['7-24', '7-26', '7-27', '7-28', '7-29', '7-30'], // 时间
-        boundaryGap: false,
-        lineStyle: {
-          color: '#647483'
-        },
-        axisTick: {
-          show: false
-        },
-      },
-
-      yAxis: {
-        type: 'value',
-        data: ['10', '20', '30', '40', '70', '100'],
-        splitLine: {
-          show: false
-        }
-      },
-      series: [{
-        name: '同步错误',
-        type: 'line',
-        data: [10, 20, 78, 80, 40, 10],
-        symbol: 'none',
-        lineStyle: {
-          // 设置线条的style等
-          normal: {
-            color: '#4E6CBD' // 折线线条颜色:红色
-          }
-        },
-        itemStyle: {
-          // 设置线条上点的颜色（和图例的颜色）
-          normal: {
-            color: '#FFFFFF'
-          }
-        },
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              // 渐变颜色
-              {
-                offset: 0,
-                color: '#4D6CF3'
-              },
-              {
-                offset: 1,
-                color: '#092134'
-              }
-            ],
-            global: false
-          }
-        }
-      },
-      ]
-    };
-    myChart.setOption(option)
-    window.onresize = function () {
-      myChart.resize();
-    };
-  }
-}
-</script>
-
-<style  scoped>
-.trend {
-  width: 14vw;
-  height: 23vh;
-  margin: 0 0 0vh 1vw;
-}
-</style>
\ No newline at end of file
diff --git a/src/componets/jsError/mainContent.vue b/src/componets/jsError/mainContent.vue
index ec9f735c54055e73e5e5ca4623c08af1c9dac0d8..342db764a357db47c3f7ec8cfe49df2aaf0191fc 100644
--- a/src/componets/jsError/mainContent.vue
+++ b/src/componets/jsError/mainContent.vue
@@ -16,9 +16,17 @@
     </div>
     <div class="footerComtent">
       <!-- left -->
-      <js-record />
+      <js-record
+        :errorDetailed="errorDetailed"
+        @changecurrent="changecurrent"
+      />
       <!-- right -->
-      <js-detailed />
+      <js-detailed
+        :errorDetailed="errorDetailed"
+        :current="current"
+        @solve="solve"
+        @neglect="neglect"
+      />
     </div>
   </div>
 </template>
@@ -29,11 +37,37 @@ import TopRight from './topRight1.vue'
 import JsDetailed from './jsDetailed.vue'
 import JsRecord from './jsRecord.vue'
 
+import { getJsError } from '@/services/jsError/request'
+
 export default {
   components: { DataShow, JsDetailed, JsRecord, TopRight },
   name: 'mainComtent',
   data () {
     return {
+      errorDetailed: [],
+      current: 0
+    }
+  },
+  created () {
+    getJsError().then(res => {
+      this.errorDetailed = res.data.result
+    })
+
+  },
+  methods: {
+    changecurrent (index) {
+      this.current = index
+    },
+    solve () {
+      this.errorDetailed.splice(this.current, 1)
+    },
+    neglect () {
+      if (this.current < this.errorDetailed.length - 1) {
+        this.current = this.current + 1
+      }
+      else {
+        this.current = 0
+      }
 
     }
   }
@@ -73,6 +107,6 @@ export default {
 }
 .js-record {
   width: 6vw;
-  margin-left: 415px;
+  margin-left: 31vw;
 }
 </style>
\ No newline at end of file
diff --git a/src/componets/jsError/navMenu.vue b/src/componets/jsError/navMenu.vue
deleted file mode 100644
index a476f53a2c76f36abbe90e9dde31bf9360c2fa3d..0000000000000000000000000000000000000000
--- a/src/componets/jsError/navMenu.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div class="nav-menu">
-    <!-- logo -->
-    <div class="logo">
-      <img src="@/assets/jsError/logo3.png" alt="Logo" />
-      <span>Revue</span>
-    </div>
-    <!-- 导航栏 -->
-    <el-menu
-      class="el-menu-vertical-demo"
-      default-active="/js-error"
-      background-color="#25253f"
-      text-color="#FFFFFF "
-      active-text-color="#466AEB "
-      router
-    >
-      <el-menu-item index="/">
-        <i class="el-icon-s-home"></i>
-        <span slot="title">首页</span>
-      </el-menu-item>
-
-      <el-menu-item index="/js-error">
-        <i class="el-icon-setting"></i>
-        <span slot="title">Js错误</span>
-      </el-menu-item>
-
-      <el-menu-item index="req-error">
-        <i class="el-icon-setting"></i>
-        <span slot="title">页面性能</span>
-      </el-menu-item>
-
-      <el-menu-item index="/req-error">
-        <i class="el-icon-setting"></i>
-        <span slot="title">接口错误</span>
-      </el-menu-item>
-    </el-menu>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'nav-menu',
-  data () {
-    return {
-
-    }
-  }
-}
-</script>
-
-<style  scoped>
-.el-menu {
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-.logo {
-  display: flex;
-  width: 154px;
-  height: 47px;
-  padding: 34px 0px 0px 63px;
-  /* 水平显示不换行 */
-  flex-direction: row;
-  /* 从左往右排 */
-  justify-content: flex-start;
-  align-items: center;
-  font-family: Alibaba;
-  font-weight: AlibabaRegular;
-  font-size: 36px;
-  color: #ffffff;
-}
-</style>
\ No newline at end of file
diff --git a/src/componets/jsError/topRight.vue b/src/componets/jsError/topRight.vue
deleted file mode 100644
index a057c0f65bd3a7aaf9443944d9c06c130b8e4b62..0000000000000000000000000000000000000000
--- a/src/componets/jsError/topRight.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="topright"></div>
-</template>
-
-<script>
-export default {
-  name: "top-right",
-  data() {
-    return {};
-  },
-};
-</script>
-
-<style scoped>
-/* .topright {
-} */
-</style>
diff --git a/src/componets/jsError/topRight1.vue b/src/componets/jsError/topRight1.vue
index 6db04ccdd8a9b71c5c81ae8c4a4b87e742f63340..41ec84406e55e7f077246371915aceaf57df3b05 100644
--- a/src/componets/jsError/topRight1.vue
+++ b/src/componets/jsError/topRight1.vue
@@ -1,25 +1,65 @@
 <template>
   <div class="topright">
-    <button class="doc">使用文档</button>
+    <a
+      href="https://gitee.com/re-vue-monitor/monitor-middle-platform"
+      class="md"
+    >
+      <img src="../../assets/组 67.png" alt="" class="img" />
+      <p>使用文档</p>
+    </a>
+    <div class="hTitle">
+      <i class="el-icon-caret-right" id="el-icon-caret-right"></i>
+      <p class="hp">健康状况</p>
+    </div>
 
     <div id="heathStatus"></div>
+    <p class="grade">优秀</p>
   </div>
 </template>
 
 <script>
+import { jshealth } from '@/services/jsError/request';
+
 export default {
   name: 'topRight',
   data () {
     return {
+      health: 100
 
     }
   },
+  created () {
+    jshealth().then(res => {
+      this.health = res.data.health
+    })
+  },
   mounted () {
     var chartDom = document.getElementById('heathStatus');
     var myChart = this.$echarts.init(chartDom, 'dark');
     //反方向剩下部分的样式
 
     var options = {
+      title: {
+        // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
+        // 例如： `示例
+        //   这里的文字会变为第二行(因为会保留格式)
+        //  `
+        text: this.health,
+        subtext: '分',
+        left: "center",//对齐方式居中
+        top: "35%",//距离顶部
+        textStyle: {//文字配置
+          color: "#FFFF",//文字颜色
+          fontSize: 40,//字号
+          align: "center"//对齐方式
+        },
+        subtextStyle: {//副标题文本样式{"color": "#aaa"}
+          color: "#FFFF",//文字颜色
+          fontSize: 15,//字号
+          align: "center"//对齐方式
+        },
+      },
+
       backgroundColor: ' ',
       series: [{
         type: 'pie',
@@ -39,26 +79,11 @@ export default {
 
           }
         },
-        graphic: [{ //环形图中间添加文字
-          type: 'text', //通过不同top值可以设置上下显示
-          left: 'center',
-          top: '45%',
-          style: {
-            text: '85' + '\n' + '分',
-            textAlign: 'center',
-            fill: '#FFFFFF ', //文字的颜色
-            width: 30,
-            height: 30,
-            fontSize: 10,
-            fontFamily: "AlibabaMedium"
-          }
-        }],
-
         data: [{
-          value: 8,
+          value: this.health,
         },
         {
-          value: 2,
+          value: (100 - this.health),
           name: '',
           itemStyle: {
             normal: {
@@ -96,10 +121,10 @@ export default {
           }
         },
         data: [{
-          value: 8,
+          value: this.health,
         },
         {
-          value: 2,
+          value: (100 - this.health),
           name: '',
           itemStyle: {
             normal: {
@@ -134,23 +159,73 @@ export default {
 .topright {
   width: 16vw;
   height: 50vh;
+  margin: 3vh 0 0 2vw;
 }
-.doc {
-  width: 6vw;
-  height: 4vh;
+
+#heathStatus {
+  width: 10vw;
+  height: 19vh;
+  background-color: #fff;
+  margin: 17vh 0 0 3vw;
+}
+.md {
+  position: fixed;
+  top: 3.1vh;
+  right: 2vw;
+  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;
-  font-family: AlibabaRegular;
-  font-size: 13px;
-  margin: 20px 0px 0 0;
+  line-height: 1vh;
+  margin-right: 0.625vw;
 }
-#heathStatus {
-  width: 10vw;
-  height: 19vh;
-  background-color: #fff;
-  margin: 13vh 0 0 0;
+/* title */
+#el-icon-caret-right {
+  color: #2cbeff;
+  width: 5px;
+  height: 15px;
+  margin-top: 1.6vh;
+  font-size: 1.1vw;
+}
+.hTitle {
+  width: 140px;
+  height: 30px;
+  display: flex;
+  justify-content: left;
+  position: absolute;
+  top: 10vh;
+  left: 76vw;
+}
+.hp {
+  font-size: clamp(1rem, 1.3vw, 4rem);
+  font-family: Alibaba;
+  font-weight: 400;
+  color: #ffffff;
+  margin-left: 0.8vw;
+  line-height: 7px;
+}
+.grade {
+  margin: 3vh 0 0 5.5vw;
+  font-size: clamp(1rem, 1.3vw, 4rem);
+  font-family: AlibabaMedium;
 }
 </style>
\ No newline at end of file
diff --git a/src/componets/reqError/reqTrend.vue b/src/componets/reqError/reqTrend.vue
index 3d7c607d773c7746afdf6caadb60d0d0b8dd0e5e..1c0055f4f99d574023a9307424fa70c49f975797 100644
--- a/src/componets/reqError/reqTrend.vue
+++ b/src/componets/reqError/reqTrend.vue
@@ -5,10 +5,10 @@
 <script>
 export default {
   name: "reqTrend",
-  data() {
+  data () {
     return {};
   },
-  mounted() {
+  mounted () {
     const chartDom = document.getElementById("trend");
     const myChart = this.$echarts.init(chartDom, "dark");
     let option = {
@@ -116,6 +116,6 @@ export default {
 .trend {
   width: 14vw;
   height: 23vh;
-  margin: 0 0 0vh 1vw;
+  margin: 0 0 0vh 2.5vw;
 }
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index f3c24ed9033ab1e6e6522533ace601239d7d4f05..64c6c5f441651fa402772cdb8acd12886ed472f2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,7 +25,7 @@ const routes = [
   },
   {
     // 性能视图
-    path: 'req-error',
+    path: '/performance',
     name: 'performance',
     component: () => import('../views/PerformanceView.vue')
   },
diff --git a/src/services/jsError/jsError.js b/src/services/jsError/jsError.js
new file mode 100644
index 0000000000000000000000000000000000000000..00873eb10f014e027fd16be9e6907758a8670fc4
--- /dev/null
+++ b/src/services/jsError/jsError.js
@@ -0,0 +1,10 @@
+import axios from 'axios'
+export function request (config) {
+  // 1.创建axios的实例
+  const instance = axios.create({
+    baseURL: 'https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp',
+    timeout: 5000
+  })
+
+  return instance(config)
+}
\ No newline at end of file
diff --git a/src/services/jsError/request.js b/src/services/jsError/request.js
new file mode 100644
index 0000000000000000000000000000000000000000..150efe3fc18a9c5597ed5b395238fcab5e4c561c
--- /dev/null
+++ b/src/services/jsError/request.js
@@ -0,0 +1,17 @@
+import { request } from "./jsError";
+
+export function getJsError () {
+  return request({
+    url: '/getJsError'
+  })
+}
+export function jsSituation () {
+  return request({
+    url: '/jsSituation'
+  })
+}
+export function jshealth () {
+  return request({
+    url: '/health'
+  })
+}
diff --git a/src/store/index.js b/src/store/index.js
index ceffa8e3acbd629064905827e0192b19c42ad254..a584477e08efcf8b16b3f6dff1b25f8c820863c3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,6 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    jsCurrent: 0
   },
   getters: {
   },
diff --git a/src/views/JsErrorView.vue b/src/views/JsErrorView.vue
index f755a3d36ec48d9379b7efe30b99c92827861493..e9115ba042625c847ec17ced1d2b161a9a1a42e0 100644
--- a/src/views/JsErrorView.vue
+++ b/src/views/JsErrorView.vue
@@ -4,7 +4,7 @@
     <!-- <div class="left"> -->
     <el-container>
       <!-- 侧边栏 -->
-      <el-aside width="303px"><nav-menu /></el-aside>
+      <left-menu />
       <!-- 主内容展示区 -->
       <el-main>
         <main-content />
@@ -14,17 +14,20 @@
 </template>
 
 <script>
-import NavMenu from '@/componets/jsError/navMenu.vue'
+
 import MainContent from '@/componets/jsError/mainContent.vue'
+import leftMenu from '@/componets/leftMenu.vue'
+
 
 export default {
   name: 'JsErrorView',
-  components: { NavMenu, MainContent },
+  components: { MainContent, leftMenu },
   data () {
     return {}
 
   },
   mounted () {
+
   },
   methods: {
   },
@@ -39,10 +42,7 @@ body {
 .JsErrorView {
   display: flex;
 }
-.el-aside {
-  background-color: #25253f;
-  height: 100vh;
-}
+
 .el-main {
   width: 84.2vw;
   padding: 0;