diff --git a/src/assets/jsError/p399423274.mp4 b/src/assets/jsError/p399423274.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..5a4cb1e33f9a3f36b13e722b72e276814e14e352
Binary files /dev/null and b/src/assets/jsError/p399423274.mp4 differ
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/reqError/ExampleData.vue b/src/componets/reqError/ExampleData.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51983761706c8e717b330678ff03e2474cbdf461
--- /dev/null
+++ b/src/componets/reqError/ExampleData.vue
@@ -0,0 +1,13 @@
+// reqRecord records: [ { statusCode: 404, method: "get", pathName:
+"https://www.test.com", timeStamp: "最近：12:30:40", }, { statusCode: 500,
+method: "post", pathName: "https://www.test.com/message", timeStamp:
+"最近：12:30:30", }, { statusCode: 400, method: "Websocket", pathName:
+"https://www.test.com", timeStamp: "最近：12:30:20", }, { statusCode: 302,
+method: "get", pathName: "https://www.test.com", timeStamp: "最近：12:30:10", },
+{ statusCode: 301, method: "post", pathName: "https://www.test.com", timeStamp:
+"最近：12:30:09", }, { statusCode: 414, method: "get", pathName:
+"https://www.test.com", timeStamp: "最近：12:30:08", }, { statusCode: 502,
+method: "get", pathName: "https://www.test.com", timeStamp: "最近：12:30:07", },
+], 柱状图 [ "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", ] countArray [ 820, 422, 200, 534, 790,
+330, 820, 630, 702, 400, 834, 390, 930, 420, ]
diff --git a/src/componets/reqError/dataShow.vue b/src/componets/reqError/dataShow.vue
deleted file mode 100644
index 52b6d43d4e1382f0c5da2408ea701b4d28d15ce8..0000000000000000000000000000000000000000
--- a/src/componets/reqError/dataShow.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-  <div>
-    <!-- 上半部分 -->
-    <div class="header">
-      <!-- 选择框 -->
-      <el-select
-        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-select>
-      <div class="reqTitle">
-        <i class="el-icon-caret-right" id="el-icon-caret-right"></i>
-        <p class="reqH1">接口错误概况</p>
-      </div>
-    </div>
-    <!-- 下半部分展示 -->
-    <div class="content" id="content"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "dataShow",
-  data() {
-    return {
-      channel: "全部页面",
-    };
-  },
-  mounted() {
-    var chartDom = document.getElementById("content");
-    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",
-          ],
-          axisPointer: {
-            alignWithLabel: true,
-          },
-        },
-      ],
-      yAxis: [
-        {
-          // name: '个',
-          type: "value",
-          splitLine: {
-            show: false,
-          },
-        },
-      ],
-      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% 处的颜色
-              },
-              {
-                offset: 1,
-                color: "#1A70F3", // 100% 处的颜色
-              },
-            ],
-          },
-        },
-        {
-          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的线条是非常细的了
-              },
-            },
-          },
-        },
-      ],
-      grid: [
-        {
-          left: "100px",
-          bottom: "30px",
-          top: "13%",
-          right: "100px",
-        },
-      ],
-      backgroundColor: "#000000",
-    };
-
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  },
-};
-</script>
-
-<style scoped>
-.header {
-  height: 19vh;
-  width: 59vw;
-}
-.content {
-  width: 56vw;
-  height: 30.9vh;
-  border: 0.3px dashed #a485e6;
-}
-/* reqErrorTitle */
-#el-icon-caret-right {
-  color: #2cbeff;
-  width: 5px;
-  height: 15px;
-  margin-top: 1.6vh;
-  font-size: 1.1vw;
-}
-.reqTitle {
-  width: 122px;
-  height: 30px;
-  display: flex;
-  justify-content: left;
-  position: absolute;
-  top: 80px;
-  left: 357px;
-}
-.reqH1 {
-  font-size: clamp(1rem, 1.3vw, 4rem);
-  font-family: Alibaba;
-  font-weight: 400;
-  color: #ffffff;
-  margin-left: 0.8vw;
-  line-height: 7px;
-}
-
-/* 下拉框 */
-.el-select {
-  width: 10vw;
-  position: absolute;
-  left: 363px;
-  top: 30px;
-  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
-  font-weight: 400;
-}
-/*  设置输入框的背景色、字体颜色、边框属性设置； */
-::v-deep .el-input__inner {
-  background: linear-gradient(to right, #081f37, #123251);
-  border-color: #203d53;
-  border-radius: 0;
-}
-
-/* 设置下拉框的 ，滚动条*/
-::v-deep .el-scrollbar,
-::v-deep .el-select-dropdown {
-  background-color: #000000;
-  border-color: #7c97c0;
-}
-/* 下拉框的 选项和外围*/
-::v-deep .el-scrollbar__wrap,
-::v-deep .el-select-dropdown__list {
-  background-color: #000000;
-  color: #fff !important;
-}
-/* 设置下拉框的属性 */
-::v-deep .el-select-dropdown__item {
-  width: 168px;
-  margin: 0 auto;
-  text-align: left;
-  background-color: #000000;
-  border-bottom: 1px solid #6e716e;
-  font-size: 16px;
-  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
-  font-weight: 400;
-  color: #ffffff;
-}
-.el-select-dropdown__item:last-child {
-  border-bottom: none;
-}
-</style>
diff --git a/src/componets/reqError/mainContent.vue b/src/componets/reqError/mainContent.vue
index f1cf84bc1f2c7e928dc5f7c200468a2ff759709f..2a92b14a9a85fc73db611155c96ced2672522b39 100644
--- a/src/componets/reqError/mainContent.vue
+++ b/src/componets/reqError/mainContent.vue
@@ -1,36 +1,26 @@
 <template>
-  <div class="mainContent">
-    <!-- 上半部分 -->
-    <div class="topContent">
-      <!-- 上半左 -->
-      <div class="topContent-left">
-        <data-show />
-      </div>
-      <!-- 上半右 -->
-      <top-right />
-      <!-- 下半部分 -->
-    </div>
-    <div class="title">
-      <div class="req-detailed req-title">接口错误记录</div>
-      <div class="req-record req-title">错误详情</div>
-    </div>
-    <div class="footerContent">
-      <!-- left -->
-      <req-record />
-      <!-- right -->
-      <req-detailed />
+  <div class="container">
+    <div class="top-bar">
+      <a href="https://gitee.com/re-vue-monitor" class="md">
+        <img src="../../assets/组 67.png" alt="" class="img" />
+        <p>使用文档</p>
+      </a>
     </div>
+    <req-overview class="overview" />
+    <req-detailed class="detail" />
+    <req-record class="record" />
+    <mini-count class="top" />
   </div>
 </template>
 
 <script>
-import DataShow from "./dataShow.vue";
-import TopRight from "./topRight.vue";
+import ReqOverview from "./reqOverview.vue";
+import MiniCount from "./miniCount.vue";
 import ReqDetailed from "./reqDetailed.vue";
 import ReqRecord from "./reqRecord.vue";
 
 export default {
-  components: { DataShow, ReqDetailed, ReqRecord, TopRight },
+  components: { ReqOverview, ReqDetailed, ReqRecord, MiniCount },
   name: "mainContent",
   data() {
     return {};
@@ -39,37 +29,73 @@ export default {
 </script>
 
 <style scoped>
-.topContent {
-  padding-left: 60px;
-  display: flex;
-  height: 53vh;
-  width: 76vw;
+.container {
+  flex: 0.842;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 3fr 1fr 2fr;
+  grid-template-rows: 1fr 3fr 3fr;
+  grid-gap: 1vw;
+  background-color: black;
+  border-radius: 0px 0px 0px 0px;
+  box-sizing: border-box;
 }
-.footerContent {
-  padding-left: 60px;
-  height: 40vh;
-  width: 76vw;
+
+.top-bar {
+  grid-column: 1/4;
+  grid-row: 1;
   display: flex;
+  justify-content: right;
 }
-.title {
-  width: 73vw;
-  height: 5.5vh;
-  margin-left: 60px;
 
+.overview {
+  grid-column: 1/3;
+  grid-row: 2;
+}
+
+.top {
+  grid-column: 3/4;
+  grid-row: 2;
+}
+
+.record {
+  grid-column: 1/2;
+  grid-row: 3;
+}
+
+.detail {
+  grid-column: 2/4;
+  grid-row: 3;
+}
+
+.md {
+  width: 8vw;
+  height: 5vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 1.9vw;
+  opacity: 0.7;
+  border: 1px solid #275079;
   display: flex;
+  justify-content: stretch;
+  margin: 0.5vw;
+  margin-top: 1vh;
+}
+
+.img {
+  margin-top: 1.28vh;
+  margin-left: 1.2vw;
+  width: 1.2vw;
+  height: 1.2vw;
 }
-.req-title {
-  font-size: clamp(1rem, 1.3vw, 4rem);
-  font-family: Alibaba;
+
+p {
+  width: 5vw;
+  height: 2.5vh;
+  font-size: 0.9vw;
+  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
   font-weight: 400;
   color: #ffffff;
-  height: 3.5vh;
-}
-.req-detailed {
-  width: 9vw;
-}
-.req-record {
-  width: 6vw;
-  margin-left: 415px;
+  line-height: 1vh;
+  margin-right: 0.625vw;
 }
 </style>
diff --git a/src/componets/reqError/miniCount.vue b/src/componets/reqError/miniCount.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fbdf289bff126a23676c7f2aadffaa297179c4a0
--- /dev/null
+++ b/src/componets/reqError/miniCount.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="mini-container">
+    <div class="title-container">
+      <title-component :na="na" class="title"></title-component>
+    </div>
+    <div class="mini-content" id="content">
+      <div class="grid-container">
+        <div
+          class="flag-container"
+          v-for="(stats, index) in errorStats"
+          :key="index"
+        >
+          <div class="bar" :class="'bar-' + stats.statusCode"></div>
+          <div class="flag" :class="'flag-' + stats.statusCode">
+            <div class="flag-1">{{ stats.statusCode }}</div>
+            <div class="flag-2">发生次数</div>
+            <div class="flag-3">{{ stats.count }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import titleComponent from "@/componets/HomePage/titleComponent.vue";
+
+export default {
+  name: "mini-count",
+  components: {
+    titleComponent,
+  },
+  data() {
+    return {
+      na: "接口错误概况",
+      errorStats: [],
+    };
+  },
+  created() {
+    this.$req
+      .get(
+        "https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp/classifiedcount"
+      )
+      .then((response) => {
+        // console.log("分类成功", response.data.countArray);
+        this.errorStats = response.data.countArray;
+      });
+  },
+};
+</script>
+
+<style scoped>
+.mini-container {
+  display: flex;
+  flex-direction: column;
+  margin-right: 1.6vw;
+}
+
+.title-container {
+  margin-bottom: 2.5vw;
+  display: flex;
+  justify-content: space-between;
+}
+
+.mini-content {
+  border: 0.3px dashed #a485e6;
+  width: 100%;
+  height: 32.5vh;
+  overflow-y: scroll;
+}
+
+.mini-content::-webkit-scrollbar {
+  width: 20px;
+  height: 8px;
+}
+
+.mini-content::-webkit-scrollbar-thumb {
+  border-radius: 12px;
+  border: 7px solid rgba(0, 0, 0, 0);
+  box-shadow: 9px 0 0 #a5adb7 inset;
+  height: 120px;
+}
+
+.grid-container {
+  margin: 1vw;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 7vw;
+  gap: 2vw;
+}
+
+.flag-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.bar {
+  width: 5.6vw;
+  height: 0.5vh;
+}
+
+.flag {
+  width: 5.6vw;
+  height: 7vw;
+  background: red;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 6px 6px 6px 6px;
+  opacity: 0.55;
+}
+
+.flag-1 {
+  font-size: 1.5vw;
+  color: white;
+  font-family: AlibabaRegular;
+  font-weight: bold;
+}
+
+.flag-2 {
+  color: white;
+  font-size: 6px;
+  font-family: AlibabaRegular;
+}
+
+.flag-3 {
+  padding: 0.5vw;
+  color: white;
+  font-size: 16px;
+  font-family: AlibabaRegular;
+}
+
+.flag-400 {
+  background: #6c9ac4;
+}
+
+.bar-400 {
+  background: #466aeb;
+}
+
+.flag-404 {
+  background: #c4aa6c;
+}
+
+.bar-404 {
+  background: #eabe37;
+}
+
+.flag-500 {
+  background: #6cb8c4;
+}
+
+.bar-500 {
+  background: #6be6c1;
+}
+
+.flag-304 {
+  background: #726cc4;
+}
+
+.bar-304 {
+  background: #7a7af9;
+}
+
+.flag-502 {
+  background: pink;
+}
+
+.bar-502 {
+  background: palevioletred;
+}
+
+.flag-401 {
+  background: #3cb371;
+}
+
+.bar-401 {
+  background: #2e8b57;
+}
+
+.flag-402 {
+  background: Orange;
+}
+
+.bar-402 {
+  background: DarkOrange;
+}
+
+.flag-403 {
+  background: Salmon;
+}
+
+.bar-403 {
+  background: FireBrick;
+}
+</style>
diff --git a/src/componets/reqError/navMenu.vue b/src/componets/reqError/navMenu.vue
deleted file mode 100644
index efd7fdc2735750af4047ca2ca41e9318c68f8211..0000000000000000000000000000000000000000
--- a/src/componets/reqError/navMenu.vue
+++ /dev/null
@@ -1,70 +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="/req-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>
diff --git a/src/componets/reqError/reqDetailed.vue b/src/componets/reqError/reqDetailed.vue
index b5b2570360acf9db283c902b449d4dcfef8e6859..35c4488fd8d316840ff29f059870014cc268b475 100644
--- a/src/componets/reqError/reqDetailed.vue
+++ b/src/componets/reqError/reqDetailed.vue
@@ -1,168 +1,315 @@
 <template>
-  <div class="reqDetailed">
-    <div class="reqDetailed-left">
-      <p class="reqTypeTitle reqtitle pBlock">事件类型</p>
-      <p class="reqTypeValue pBlock">400</p>
-      <p class="reqTypeTitle reqtitle pBlock">获取方式</p>
-      <p class="reqTypeValue pBlock">Websocket</p>
-      <p class="reqContentT reqtitle">事件内容</p>
-      <p class="reqContentV reqValue">error is not defined</p>
-      <p class="errorContentT reqtitle">错误内容</p>
-      <p class="errorContentV reqValue">暂无</p>
-      <p class="reqUrlT jstitle">发生页面</p>
-      <p class="reqUrV reqValue">https://www.(检测对象网址)</p>
-      <p class="reqInfoT reqtitle">加载信息</p>
-      <p class="reqInfoV reqValue">...</p>
-      <el-button type="success" class="buttonStyle">解决</el-button>
-      <el-button type="warning" class="buttonStyle">忽略</el-button>
+  <!-- <div class="div-wrapper"> -->
+  <div class="detail-container">
+    <div class="left">
+      <div class="horizontal">
+        <p class="label">事件类型</p>
+        <p class="answer">{{ record.statusCode }}</p>
+      </div>
+      <div class="horizontal">
+        <p class="label">获取方式</p>
+        <p class="answer special">{{ record.method }}</p>
+      </div>
+      <div class="vertical">
+        <p class="title">事件内容</p>
+        <p class="center">
+          {{ record.response ? record.response : "no specific response" }}
+        </p>
+      </div>
+      <div class="vertical">
+        <p class="title">错误内容</p>
+        <p class="center">{{ record.status }}</p>
+      </div>
+      <div class="vertical">
+        <p class="title">发生页面</p>
+        <p class="center">{{ record.url }}</p>
+      </div>
+      <div class="vertical">
+        <p class="title">加载信息</p>
+        <p class="center">...</p>
+      </div>
     </div>
-    <div class="reqDetailed-right">
-      <!-- 圆 -->
-      <div class="errorCount1 circle">
-        <div class="errorCount2 circle">
-          <p class="errorCount-num">1,100</p>
-          <p class="errorCount-title">发生总次数</p>
+    <div class="line"></div>
+    <div class="right">
+      <div class="circlecount">
+        <div class="circle1">
+          <div class="circle2">
+            <div class="word">
+              <p class="circlecount-num">{{ miniCount }}</p>
+              <p class="circlecount-title">发生总次数</p>
+            </div>
+          </div>
         </div>
       </div>
-      <!-- 趋势图,其实是同类型错误 -->
-      <req-trend />
+      <div class="error-list">
+        <ul class="list-container">
+          <li class="list-item" v-for="(record, index) in records" :key="index">
+            <div class="list-div">
+              <div class="list-name">{{ record.url }}</div>
+              <div class="list-value">
+                {{ timeFormatter(record.timeStamp) }}
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
+  <!-- </div> -->
 </template>
 
 <script>
-import reqTrend from "./reqTrend.vue";
+import bus from "@/utils/bus";
 
 export default {
-  components: { reqTrend },
   name: "reqDetailed",
-
   data() {
-    return {};
+    return {
+      record: {},
+      miniCount: 0,
+      records: [],
+    };
+  },
+  methods: {
+    upload(date) {
+      return (
+        `${date.getFullYear()}-` +
+        `${date.getMonth() + 1}-` +
+        `${date.getDate()}`
+      );
+    },
+    timeFormatter(timeStamp) {
+      const date = new Date(timeStamp);
+      const Y = date.getFullYear() + "-";
+      const M =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+      const D = date.getDate() + " ";
+      const h = date.getHours() + ":";
+      const m = date.getMinutes() + ":";
+      const s = date.getSeconds();
+      return Y + M + D + h + m + s;
+    },
+  },
+  created() {
+    bus.$on("detail", (data) => {
+      console.log(data, "上车成功");
+      this.record = data;
+      const code = data.statusCode;
+      this.$req
+        .get(
+          "https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp/classifiedcount"
+        )
+        .then((response) => {
+          // console.log("分类成功", response.data.countArray);
+          const array = response.data.countArray;
+          const target = array.find((obj) => obj.statusCode === code);
+          this.miniCount = target.count;
+        });
+      this.$req
+        .get(
+          "https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp/detailedErrors?date=" +
+            this.upload(new Date(Date.now()))
+        )
+        .then((response) => {
+          // console.log("记录响应成功", response.data.detailedErrors);
+          const mediumArray = response.data.detailedErrors.filter(
+            (obj) => obj.statusCode === code
+          );
+          if (mediumArray.length <= 4) {
+            this.records = mediumArray;
+          } else {
+            this.records = mediumArray.slice(0, 4);
+          }
+        });
+    });
+  },
+  // 打卡
+  beforeDestroy() {
+    bus.$off("detail");
   },
   mounted() {},
 };
 </script>
 
 <style scoped>
-.reqDetailed {
-  width: 37.4vw;
-  height: 40vh;
+/* .div-wrapper {
+  margin-right: 1.6vw;
+  margin-bottom: 2.4vh;
+  height: 47vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+} */
+
+.detail-container {
+  /* width: 37.4vw; */
+  height: 37vh;
   background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 0px 0px 0px 0px;
   opacity: 0.7;
-  border: 1px solid #275079;
-  margin-right: 47px;
+  border: 0.0521vw solid #275079;
   display: flex;
+  margin-top: 7.5vh;
+  margin-right: 1.6vw;
+  margin-bottom: 2.4vh;
+}
+
+.line {
+  width: 0px;
+  height: 80%;
+  background: #ffffff;
+  opacity: 0.5;
+  border: 1px dash #ffffff;
+  filter: blur(undefinedpx);
 }
-.reqDetailed-left {
-  width: 20vw;
-  height: 40vh;
+
+.left {
+  flex: 0.56;
 }
-.reqDetailed-right {
-  width: 16vw;
-  height: 40vh;
+.right {
+  flex: 0.44;
   border-left: 1px dashed #7a97b6;
+  display: flex;
+  flex-direction: column;
+}
+
+.horizontal {
+  display: flex;
+  flex-direction: row;
+  margin-left: 2vw;
+  margin-top: 1.5vh;
+  margin-bottom: 1.5vh;
+  align-items: stretch;
 }
-.reqtitle {
-  width: 71px;
-  height: 25px;
-  font-size: clamp(0.5rem, 1vw, 4rem);
+
+.vertical {
+  display: flex;
+  flex-direction: column;
+  margin-left: 2vw;
+  margin-bottom: 1.5vh;
+}
+
+.label {
+  flex: 1;
+  text-align: left;
+  margin-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
   font-family: AlibabaMedium;
-  color: #789dc3;
+  color: #6c9ac4;
   font-weight: 500;
-  margin: 0px 0px 0px 0.7vw;
+  font-size: 16px;
   padding: 0;
 }
-.pBlock {
-  display: inline-block;
-}
-.reqTypeTitle {
-  margin-left: -1.4vw !important;
-  width: 71px !important;
-  margin-bottom: 1vh;
-}
-.reqValue {
-  width: 250px;
-  height: 25px;
-  font-size: clamp(-1rem, 0.9vw, 4rem);
+
+.answer {
+  flex: 3;
+  text-align: left;
   font-family: AlibabaRegular;
   font-weight: 400;
   color: #ffffff;
-  margin: 0 0 0 0;
-}
-.reqTimeV {
-  color: #ffffff;
-  font-size: clamp(-1rem, 0.8vw, 4rem);
-  margin: 2vh 0 0 2.6vw;
-}
-.reqTypeValue {
-  color: #ffffff;
-  font-size: clamp(-1rem, 0.9vw, 4rem);
-  margin: 0 0 1vw 0;
-  margin: 2vh 0 0 1vw;
-}
-.reqContentV {
-  margin: 0 0 0.8vh -3vw;
-}
-.errorContentV {
-  margin: 0 0 0.8vh -6vw;
-}
-.reqUrV {
-  margin: 0 0 0.8vh -1vw;
+  font-size: 16px;
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.reqInfoV {
-  margin: 0 0 0.8vh -1vw;
+
+.title {
+  flex: 1;
+  font-family: AlibabaMedium;
+  color: #6c9ac4;
+  font-weight: 500;
+  font-size: 16px;
+  text-align: left;
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.buttonStyle {
-  width: 98px;
-  height: 30px;
-  border-radius: 5px 5px 5px 5px;
-  opacity: 1;
+
+.center {
+  flex: 1;
   font-family: AlibabaRegular;
   font-weight: 400;
-  font-size: clamp(-1rem, 0.8vw, 4rem);
   color: #ffffff;
-  line-height: 1px;
+  font-size: 16px;
+  text-align: left;
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.el-button--success {
-  background: rgba(7, 90, 65, 0.92);
-  border: 1px solid #6be6c1;
-  margin: 0 1vw 0 1vw;
+
+.special {
+  color: #6be6c1;
 }
-.el-button--warning {
-  background: #682d00;
-  border: 1px solid #ff750c;
-  margin: 0 1vw 0 1vw;
+
+.circlecount {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.circle {
-  border-radius: 100px;
+
+.error-list {
+  flex: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.errorCount1 {
+
+.circle1 {
   border: 2px solid #8ed6fa;
   width: 100px;
   height: 100px;
-  margin: 0 auto;
-  margin-top: 2vmin;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.errorCount2 {
-  border: 1px solid #8ed6fa;
+
+.circle2 {
+  border: 2px solid #6c9ac4;
   width: 80px;
   height: 80px;
-  margin: 0 auto;
-  margin-top: 1vmin;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.errorCount2 p {
-  color: #ffffff;
+
+.circlecount-num {
+  font-size: 20px;
+  margin: 0;
+}
+
+.list-container {
+  padding: 1vh;
 }
-.errorCount-num {
-  margin: 2vmin 0 0 0;
-  font-size: clamp(-1rem, 1.5vw, 4rem);
-  font-weight: 600;
+
+.list-div {
+  width: 14vw;
+  border-bottom: 1px #707070 solid;
+  margin-bottom: 1vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.list-name {
+  flex: 1;
+  height: 2.2vh;
+  padding-left: 0.5vw;
+  text-align: left;
   font-family: AlibabaRegular;
+  font-size: 12px;
+  color: #6c9ac4;
 }
-.errorCount-title {
-  margin: 0vmin 0 0 0;
-  font-size: clamp(-1rem, 0.2vw, 4rem);
-  font-family: AlibabaMedium;
+
+.list-value {
+  flex: 1;
+  height: 2.2vh;
+  text-align: left;
+  padding-left: 0.5vw;
+  font-family: AlibabaRegular;
+  font-size: 12px;
+  color: white;
 }
 </style>
diff --git a/src/componets/reqError/reqOverview.vue b/src/componets/reqError/reqOverview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..70d80f8088edf5e51373eb263866a054e1ded9bd
--- /dev/null
+++ b/src/componets/reqError/reqOverview.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="overview-container">
+    <div class="top-container">
+      <div class="title-container">
+        <title-component :na="na" class="title"></title-component>
+      </div>
+      <div class="date-container">
+        <el-date-picker
+          class="date"
+          v-model="value"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @input="uploadDate"
+        >
+        </el-date-picker>
+      </div>
+    </div>
+    <div class="content" id="content"></div>
+  </div>
+</template>
+
+<script>
+import titleComponent from "@/componets/HomePage/titleComponent.vue";
+
+export default {
+  name: "reqOverview",
+  components: {
+    titleComponent,
+  },
+  data() {
+    return {
+      na: "接口错误概况",
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近两周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value: [new Date(Date.now() - 1209600000), new Date(Date.now())],
+      // 默认日期为当前两周
+    };
+  },
+
+  methods: {
+    drawChart(dateArray, countArray) {
+      var chartDom = document.getElementById("content");
+      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: dateArray,
+            axisPointer: {
+              alignWithLabel: true, //坐标轴指示器无
+            },
+          },
+        ],
+        yAxis: [
+          {
+            // name: '个',
+            type: "value",
+            splitLine: {
+              show: false, //不显示分隔线
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            // barWidth: "17px",不设置时自适应
+            data: countArray,
+            color: {
+              //线性渐变的颜色
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#6BE6C1", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#1A70F3", // 100% 处的颜色
+                },
+              ],
+            },
+          },
+          {
+            type: "line",
+            symbolSize: 7, //标记的大小
+            data: countArray,
+            itemStyle: {
+              normal: {
+                color: "#FFFFFF", //改变折线点的颜色
+                lineStyle: {
+                  color: "#466AEB", //改变折线颜色
+                  width: 1, // 0.1的线条是非常细的了
+                },
+              },
+            },
+          },
+        ],
+        grid: [
+          {
+            left: "5%", //grid 组件离容器左侧的距离
+            bottom: "10%",
+            top: "13%",
+            right: "5%",
+          },
+        ],
+        backgroundColor: "#000000",
+      };
+
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    },
+
+    uploadDate() {
+      function upload(date) {
+        return (
+          `${date.getFullYear()}-` +
+          `${date.getMonth() + 1}-` +
+          `${date.getDate()}`
+        );
+      }
+      function makeDateArray(array) {
+        return array.map((obj) => obj.date.substring(5));
+      }
+      function makeCountArray(array) {
+        return array.map((obj) => obj.count);
+      }
+      console.log("日期对象", this.value);
+      console.log("开始日期", upload(this.value[0]));
+      console.log("结束日期", upload(this.value[1]));
+      this.$req
+        .get(
+          "https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp/longTermErrors?startDate=" +
+            upload(this.value[0]) +
+            "&endDate=" +
+            upload(this.value[1])
+        )
+        .then((response) => {
+          console.log("请求成功", response);
+          const errors = response.data.longTermErrors.reverse();
+          this.drawChart(makeDateArray(errors), makeCountArray(errors));
+        });
+    },
+  },
+
+  mounted() {
+    this.uploadDate();
+  },
+};
+</script>
+
+<style scoped>
+.overview-container {
+  display: flex;
+  justify-content: stretch;
+  flex-direction: column;
+  margin-left: 3.6vw;
+}
+
+.top-container {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+}
+
+.date {
+  font-family: AlibabaRegular;
+  border: 0.0521vw solid #275079;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  font-weight: 400;
+  color: white;
+}
+
+.content {
+  width: 100%;
+  height: 32.5vh;
+  border: 0.3px dashed #a485e6;
+}
+
+.date >>> .el-range-input {
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+}
+</style>
diff --git a/src/componets/reqError/reqRecord.vue b/src/componets/reqError/reqRecord.vue
index 87c7f1905d40e1edbad604a19af01d8b62df2850..d110b33b5377154385460e99a778882fbfc753a2 100644
--- a/src/componets/reqError/reqRecord.vue
+++ b/src/componets/reqError/reqRecord.vue
@@ -1,20 +1,293 @@
 <template>
-  <div class="reqRecord"></div>
+  <div class="record-container">
+    <div class="title-container">
+      <title-component :na="na" class="title"></title-component>
+      <el-date-picker
+        v-model="value"
+        type="date"
+        placeholder="选择日期"
+        class="date-picker"
+        @input="uploadDate"
+      >
+      </el-date-picker>
+    </div>
+    <div class="records">
+      <ul class="record-list">
+        <li
+          v-for="(record, index) in records"
+          :key="index"
+          class="list-item"
+          @click="busFun(record)"
+        >
+          <div class="icon"></div>
+          <div class="words">
+            <div class="top">
+              <div class="top-left">
+                <div class="code">{{ record.statusCode }}</div>
+                <div
+                  class="method"
+                  :class="'method-' + record.method.toLowerCase()"
+                >
+                  {{ record.method }}
+                </div>
+              </div>
+              <div class="time">
+                {{
+                  typeof record.timeStamp === String
+                    ? record.timeStamp
+                    : timeFormatter(record.timeStamp)
+                }}
+              </div>
+            </div>
+            <div class="bottom">
+              <div class="path">{{ record.url }}</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
+import titleComponent from "@/componets/HomePage/titleComponent.vue";
+
+import bus from "@/utils/bus";
+
 export default {
   name: "reqRecord",
+  components: {
+    titleComponent,
+  },
   data() {
-    return {};
+    return {
+      na: "接口错误记录",
+      records: [
+        {
+          statusCode: 404,
+          method: "get",
+          pathName: "https://www.test.com",
+          timeStamp: "最近：12:30:40",
+        },
+        {
+          statusCode: 500,
+          method: "post",
+          pathName: "https://www.test.com/message",
+          timeStamp: "最近：12:30:30",
+        },
+        {
+          statusCode: 400,
+          method: "Websocket",
+          pathName: "https://www.test.com",
+          timeStamp: "最近：12:30:20",
+        },
+        {
+          statusCode: 302,
+          method: "get",
+          pathName: "https://www.test.com",
+          timeStamp: "最近：12:30:10",
+        },
+        {
+          statusCode: 301,
+          method: "post",
+          pathName: "https://www.test.com",
+          timeStamp: "最近：12:30:09",
+        },
+        {
+          statusCode: 414,
+          method: "get",
+          pathName: "https://www.test.com",
+          timeStamp: "最近：12:30:08",
+        },
+        {
+          statusCode: 502,
+          method: "get",
+          pathName: "https://www.test.com",
+          timeStamp: "最近：12:30:07",
+        },
+      ],
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      value: new Date(Date.now()), //默认日期为当天
+    };
+  },
+  methods: {
+    uploadDate() {
+      function upload(date) {
+        return (
+          `${date.getFullYear()}-` +
+          `${date.getMonth() + 1}-` +
+          `${date.getDate()}`
+        );
+      }
+      console.log("日期依旧是个对象", this.value);
+      this.$req
+        .get(
+          "https://koa-monitorrver-koa-dxsjkmwnnu.cn-hangzhou.fcapp.run/api/mp/detailedErrors?date=" +
+            upload(this.value)
+        )
+        .then((response) => {
+          console.log("记录响应成功", response.data.detailedErrors);
+          this.records = response.data.detailedErrors;
+          bus.$emit("detail", response.data.detailedErrors[0]); //默认传列表第一个错误
+        });
+    },
+    timeFormatter(timeStamp) {
+      const date = new Date(timeStamp);
+      const h = date.getHours() + ":";
+      const m = date.getMinutes() + ":";
+      const s = date.getSeconds();
+      return h + m + s;
+    },
+    busFun(record) {
+      // 通过 $emit 来触发方法，参数1是定义方法名，参数2是你要发送的数据
+      // console.log(record);
+      // console.log("1");
+      bus.$emit("detail", record);
+    },
+  },
+  mounted() {
+    this.uploadDate();
   },
 };
 </script>
 
 <style scoped>
-.reqRecord {
-  width: 44.1vw;
-  height: 37.7vh;
-  border: 1px slateblue solid;
+.record-container {
+  margin-left: 3.6vw;
+  margin-top: 1vw;
+  height: 41vh;
+}
+
+.title-container {
+  margin-bottom: 1.5vw;
+  display: flex;
+  justify-content: space-between;
+}
+
+.date-picker {
+  font-family: AlibabaRegular;
+  border: 0.0521vw solid #275079;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  font-weight: 400;
+  color: white;
+}
+
+.records {
+  width: 100%;
+  height: 75%;
+  overflow-y: scroll;
+}
+
+.records::-webkit-scrollbar {
+  width: 20px;
+  height: 8px;
+}
+
+.records::-webkit-scrollbar-thumb {
+  border-radius: 12px;
+  border: 7px solid rgba(0, 0, 0, 0);
+  box-shadow: 9px 0 0 #a5adb7 inset;
+  height: 120px;
+}
+
+.record-list {
+  margin-top: 1vw;
+  margin-right: 1vw;
+}
+
+.list-item {
+  height: 9vh;
+  margin-bottom: 1vh;
+
+  border-radius: 0px 0px 0px 0px;
+  opacity: 0.7;
+
+  display: flex;
+  font-family: AlibabaMedium;
+}
+
+.icon {
+  width: 3.8vw;
+  height: 9vh;
+  background-image: url(../../assets/jsError/yuanquan.jpg);
+  background-repeat: no-repeat;
+}
+
+.words {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 0.0521vw solid #275079;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+}
+
+.words:hover {
+  background: linear-gradient(10deg, #185da5 0%, #2a70b4 100%);
+  opacity: 70%;
+}
+
+.top {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+}
+
+.bottom {
+  flex: 1;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.top-left {
+  display: flex;
+}
+
+.code {
+  line-height: 4.5vh;
+  padding-left: 0.5vw;
+  padding-right: 0.5vw;
+  font-size: 18px;
+}
+
+.method {
+  width: 5vw;
+  padding-left: 0.5vw;
+  text-align: left;
+  line-height: 4.5vh;
+  font-size: 18px;
+}
+
+.path {
+  line-height: 4.5vh;
+  font-size: 16px;
+  padding-left: 0.5vw;
+}
+
+.time {
+  line-height: 4.5vh;
+  width: 7vw;
+  font-size: 16px;
+}
+
+.method-get {
+  color: #1990ff;
+}
+
+.method-post {
+  color: #f58159;
+}
+
+.method-Websocket {
+  color: #4fcea4;
+}
+
+.date-picker >>> .el-input__inner {
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border: 0.0521vw solid #275079;
 }
 </style>
diff --git a/src/componets/reqError/reqTrend.vue b/src/componets/reqError/reqTrend.vue
deleted file mode 100644
index 3d7c607d773c7746afdf6caadb60d0d0b8dd0e5e..0000000000000000000000000000000000000000
--- a/src/componets/reqError/reqTrend.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <div class="trend" id="trend"></div>
-</template>
-
-<script>
-export default {
-  name: "reqTrend",
-  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>
diff --git a/src/componets/reqError/topRight.vue b/src/componets/reqError/topRight.vue
deleted file mode 100644
index a057c0f65bd3a7aaf9443944d9c06c130b8e4b62..0000000000000000000000000000000000000000
--- a/src/componets/reqError/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/router/index.js b/src/router/index.js
index f3c24ed9033ab1e6e6522533ace601239d7d4f05..b71bbbe93d704a10712bf4234db9a2627e9be0b2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,42 +3,42 @@
  * @Date: 2022-08-05 14:24:57
  * @LastEditors: arvin(王德江)
  * @LastEditTime: 2022-08-05 15:19:53
- * @Description: 
+ * @Description:
  */
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import Vue from "vue";
+import VueRouter from "vue-router";
+import HomeView from "../views/HomeView.vue";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
-    component: HomeView
+    path: "/",
+    name: "home",
+    component: HomeView,
   },
   {
     // js错误
-    path: '/js-error',
-    name: 'jsError',
-    component: () => import('../views/JsErrorView.vue')
+    path: "/js-error",
+    name: "jsError",
+    component: () => import("../views/JsErrorView.vue"),
   },
   {
     // 性能视图
-    path: 'req-error',
-    name: 'performance',
-    component: () => import('../views/PerformanceView.vue')
+    path: "/performance",
+    name: "performance",
+    component: () => import("../views/PerformanceView.vue"),
   },
   {
     // 请求错误视图
-    path: '/req-error',
-    name: 'reqError',
-    component: () => import('../views/ReqErrorView.vue')
-  }
-]
+    path: "/req-error",
+    name: "reqError",
+    component: () => import("../views/ReqErrorView.vue"),
+  },
+];
 
 const router = new VueRouter({
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;
diff --git a/src/utils/bus.js b/src/utils/bus.js
new file mode 100644
index 0000000000000000000000000000000000000000..dc7e25b8f0cd9480edd51268869629158d989001
--- /dev/null
+++ b/src/utils/bus.js
@@ -0,0 +1,3 @@
+import Vue from "vue";
+
+export default new Vue();
diff --git a/src/views/PerformanceView.vue b/src/views/PerformanceView.vue
index 713fa3cb553e1b85636d2df617457379d19d0710..42e8e7ddd3b2461dda36989b19236d318efd8f54 100644
--- a/src/views/PerformanceView.vue
+++ b/src/views/PerformanceView.vue
@@ -6,23 +6,24 @@
 </template>
 
 <script>
-import performanceMain from '@/componets/Performance/performanceMain.vue'
-import leftMenu from '@/componets/leftMenu.vue'
+import performanceMain from "@/componets/Performance/performanceMain.vue";
+import leftMenu from "@/componets/leftMenu.vue";
 
 export default {
-  name: 'PerformanceView',
+  name: "PerformanceView",
   components: {
     performanceMain,
     leftMenu,
   },
 
   methods: {},
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .main {
   display: flex;
+  font-size: 0.2vw;
   font-family: Alibaba;
 }
 </style>
diff --git a/src/views/ReqErrorView.vue b/src/views/ReqErrorView.vue
index 264ed0242fa0a32e0d10599387c3bdf28b5029e1..ddd83b4dc4dd1d1446981b46e2c1e33615e3da56 100644
--- a/src/views/ReqErrorView.vue
+++ b/src/views/ReqErrorView.vue
@@ -1,26 +1,19 @@
 <template>
-  <div class="ReqErrorView">
-    <!-- <div class="left"> -->
-    <el-container>
-      <!-- 侧边栏 -->
-      <el-aside width="303px"><nav-menu /></el-aside>
-      <!-- 主内容展示区 -->
-      <el-main>
-        <main-content />
-      </el-main>
-    </el-container>
+  <div class="main">
+    <left-menu />
+    <main-content />
   </div>
 </template>
 
 <script>
 import mainContent from "@/componets/reqError/mainContent.vue";
-import navMenu from "@/componets/reqError/navMenu.vue";
+import leftMenu from "@/componets/leftMenu.vue";
 
 export default {
   name: "ReqErrorView",
   components: {
     mainContent,
-    navMenu,
+    leftMenu,
   },
 
   data() {
@@ -34,22 +27,21 @@ export default {
 </script>
 
 <style scoped>
-body {
+html {
+  height: 100vh;
   margin: 0;
   padding: 0;
 }
-.ReqErrorView {
-  display: flex;
-}
-.el-aside {
-  background-color: #25253f;
+
+body {
   height: 100vh;
-}
-.el-main {
-  width: 84.2vw;
+  margin: 0;
   padding: 0;
-  flex: 1;
-  background-color: #000000;
-  height: 100vh;
+}
+.main {
+  display: flex;
+  font-size: 0.2vw;
+  font-family: Alibaba;
+  color: white;
 }
 </style>