diff --git a/src/assets/jsError/logo1.png b/src/assets/jsError/logo1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f910f7ef33975fe05f6e7bb49e64719339f6799d
Binary files /dev/null and b/src/assets/jsError/logo1.png differ
diff --git a/src/assets/jsError/logo2.png b/src/assets/jsError/logo2.png
new file mode 100644
index 0000000000000000000000000000000000000000..af89e2d4225db9fcc8e0efab694b7c0eb622d56c
Binary files /dev/null and b/src/assets/jsError/logo2.png differ
diff --git a/src/assets/jsError/logo3.png b/src/assets/jsError/logo3.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0a283638505a4281bb91b2e325cb2e95269dee2
Binary files /dev/null and b/src/assets/jsError/logo3.png differ
diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5332a0ac48df26d45446c1646350687ceea0fec
--- /dev/null
+++ b/src/componets/jsError/dataShow.vue
@@ -0,0 +1,224 @@
+<template>
+  <div>
+    <!-- 上半部分 -->
+    <div class="heater">
+      <!-- 选择框 -->
+      <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="jseTitle">
+        <i class="el-icon-caret-right" id="el-icon-caret-right"></i>
+        <p class="jseH1">JS错误概况</p>
+      </div>
+    </div>
+    <!-- 下半部分展示 -->
+    <div class="contemt" id="contemt"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dataShow",
+  data() {
+    return {
+      channel: "全部页面",
+    };
+  },
+  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",
+          ],
+          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>
+.heater {
+  height: 19vh;
+  width: 59vw;
+}
+.contemt {
+  width: 56vw;
+  height: 30.9vh;
+  border: 0.3px dashed #a485e6;
+}
+/* jsErrorTitle */
+#el-icon-caret-right {
+  color: #2cbeff;
+  width: 5px;
+  height: 15px;
+  margin-top: 1.6vh;
+  font-size: 1.1vw;
+}
+.jseTitle {
+  width: 122px;
+  height: 30px;
+  display: flex;
+  justify-content: left;
+  position: absolute;
+  top: 80px;
+  left: 357px;
+}
+.jseH1 {
+  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/jsError/jsDetailed.vue b/src/componets/jsError/jsDetailed.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bb3735b852e6f6817bab6a6e61d3eb773435241
--- /dev/null
+++ b/src/componets/jsError/jsDetailed.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="jsDetailed">
+    <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="jsContentT jstitle">事件内容</p>
+      <p class="jsContentV jsValue">error is not defined</p>
+      <p class="errorContentT jstitle">错误内容</p>
+      <p class="errorContentV jsValue">暂无</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>
+    </div>
+    <div class="jsDetailed-right">
+      <!-- 圆 -->
+      <div class="errorCount1 circle">
+        <div class="errorCount2 circle">
+          <p class="errorCount-num">1,100</p>
+          <p class="errorCount-title">发生总次数</p>
+        </div>
+      </div>
+      <!-- 趋势图 -->
+      <js-trend />
+    </div>
+  </div>
+</template>
+
+<script>
+import jsTrend from "./jsTrend.vue";
+
+export default {
+  components: { jsTrend },
+  name: "jsDetailed",
+
+  data() {
+    return {};
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.jsDetailed {
+  width: 37.4vw;
+  height: 40vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  opacity: 0.7;
+  border: 1px solid #275079;
+  margin-right: 47px;
+  display: flex;
+}
+.jsDetailed-left {
+  width: 20vw;
+  height: 40vh;
+}
+.jsDetailed-right {
+  width: 16vw;
+  height: 40vh;
+  border-left: 1px dashed #7a97b6;
+}
+.jstitle {
+  width: 71px;
+  height: 25px;
+  font-size: clamp(0.5rem, 1vw, 4rem);
+  font-family: AlibabaMedium;
+  color: #789dc3;
+  font-weight: 500;
+  margin: 0px 0px 0px 0.7vw;
+  padding: 0;
+}
+.pBlock {
+  display: inline-block;
+}
+.jsTypeTitle {
+  margin-left: -1.4vw !important;
+  width: 71px !important;
+  margin-bottom: 1vh;
+}
+.jsValue {
+  width: 250px;
+  height: 25px;
+  font-size: clamp(-1rem, 0.9vw, 4rem);
+  font-family: AlibabaRegular;
+  font-weight: 400;
+  color: #ffffff;
+  margin: 0 0 0 0;
+}
+.jsTimeV {
+  color: #ffffff;
+  font-size: clamp(-1rem, 0.8vw, 4rem);
+  margin: 2vh 0 0 2.6vw;
+}
+.jsTypeValue {
+  color: #ffffff;
+  font-size: clamp(-1rem, 0.9vw, 4rem);
+  margin: 0 0 1vw 0;
+  margin: 2vh 0 0 1vw;
+}
+.jsContentV {
+  margin: 0 0 0.8vh -3vw;
+}
+.errorContentV {
+  margin: 0 0 0.8vh -6vw;
+}
+.jsUrV {
+  margin: 0 0 0.8vh -1vw;
+}
+.jsInfoV {
+  margin: 0 0 0.8vh -1vw;
+}
+.buttonStyle {
+  width: 98px;
+  height: 30px;
+  border-radius: 5px 5px 5px 5px;
+  opacity: 1;
+  font-family: AlibabaRegular;
+  font-weight: 400;
+  font-size: clamp(-1rem, 0.8vw, 4rem);
+  color: #ffffff;
+  line-height: 1px;
+}
+.el-button--success {
+  background: rgba(7, 90, 65, 0.92);
+  border: 1px solid #6be6c1;
+  margin: 0 1vw 0 1vw;
+}
+.el-button--warning {
+  background: #682d00;
+  border: 1px solid #ff750c;
+  margin: 0 1vw 0 1vw;
+}
+.circle {
+  border-radius: 100px;
+}
+.errorCount1 {
+  border: 2px solid #8ed6fa;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto;
+  margin-top: 2vmin;
+}
+.errorCount2 {
+  border: 1px solid #8ed6fa;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto;
+  margin-top: 1vmin;
+}
+.errorCount2 p {
+  color: #ffffff;
+}
+.errorCount-num {
+  margin: 2vmin 0 0 0;
+  font-size: clamp(-1rem, 1.5vw, 4rem);
+  font-weight: 600;
+  font-family: AlibabaRegular;
+}
+.errorCount-title {
+  margin: 0vmin 0 0 0;
+  font-size: clamp(-1rem, 0.2vw, 4rem);
+  font-family: AlibabaMedium;
+}
+</style>
diff --git a/src/componets/jsError/jsRecord.vue b/src/componets/jsError/jsRecord.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ba4f208fdb9ccb2613d6ab161376de7138a6e72e
--- /dev/null
+++ b/src/componets/jsError/jsRecord.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="jsRecord"></div>
+</template>
+
+<script>
+export default {
+  name: "jsRecord",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.jsRecord {
+  width: 44.1vw;
+  height: 37.7vh;
+  border: 1px slateblue solid;
+}
+</style>
diff --git a/src/componets/jsError/jsTrend.vue b/src/componets/jsError/jsTrend.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32038f8eb01577e291acea85fc07b265e3d6e460
--- /dev/null
+++ b/src/componets/jsError/jsTrend.vue
@@ -0,0 +1,121 @@
+<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>
diff --git a/src/componets/jsError/mainContent.vue b/src/componets/jsError/mainContent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3ee96c304e3d5dc803d5098656b81c545dc619a4
--- /dev/null
+++ b/src/componets/jsError/mainContent.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="mainComtent">
+    <!-- 上半部分 -->
+    <div class="topComtent">
+      <!-- 上半左 -->
+      <div class="topComtent-left">
+        <data-show />
+      </div>
+      <!-- 上半右 -->
+      <top-right />
+      <!-- 下半部分 -->
+    </div>
+    <div class="title">
+      <div class="js-detailed js-title">错误记录列表</div>
+      <div class="js-record js-title">错误详情</div>
+    </div>
+    <div class="footerComtent">
+      <!-- left -->
+      <js-record />
+      <!-- right -->
+      <js-detailed />
+    </div>
+  </div>
+</template>
+
+<script>
+import DataShow from "./dataShow.vue";
+import TopRight from "./topRight.vue";
+import JsDetailed from "./jsDetailed.vue";
+import JsRecord from "./jsRecord.vue";
+
+export default {
+  components: { DataShow, JsDetailed, JsRecord, TopRight },
+  name: "mainComtent",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.topComtent {
+  padding-left: 60px;
+  display: flex;
+  height: 53vh;
+  width: 76vw;
+}
+.footerComtent {
+  padding-left: 60px;
+  height: 40vh;
+  width: 76vw;
+  display: flex;
+}
+.title {
+  width: 73vw;
+  height: 5.5vh;
+  margin-left: 60px;
+
+  display: flex;
+}
+.js-title {
+  font-size: clamp(1rem, 1.3vw, 4rem);
+  font-family: Alibaba;
+  font-weight: 400;
+  color: #ffffff;
+  height: 3.5vh;
+}
+.js-detailed {
+  width: 9vw;
+}
+.js-record {
+  width: 6vw;
+  margin-left: 415px;
+}
+</style>
diff --git a/src/componets/jsError/navMenu.vue b/src/componets/jsError/navMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d0fb2c03b9997f92de630b7460ed7b173384caeb
--- /dev/null
+++ b/src/componets/jsError/navMenu.vue
@@ -0,0 +1,70 @@
+<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>
diff --git a/src/componets/jsError/topRight.vue b/src/componets/jsError/topRight.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a057c0f65bd3a7aaf9443944d9c06c130b8e4b62
--- /dev/null
+++ b/src/componets/jsError/topRight.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="topright"></div>
+</template>
+
+<script>
+export default {
+  name: "top-right",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+/* .topright {
+} */
+</style>
diff --git a/src/componets/reqError/dataShow.vue b/src/componets/reqError/dataShow.vue
new file mode 100644
index 0000000000000000000000000000000000000000..52b6d43d4e1382f0c5da2408ea701b4d28d15ce8
--- /dev/null
+++ b/src/componets/reqError/dataShow.vue
@@ -0,0 +1,224 @@
+<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
new file mode 100644
index 0000000000000000000000000000000000000000..f1cf84bc1f2c7e928dc5f7c200468a2ff759709f
--- /dev/null
+++ b/src/componets/reqError/mainContent.vue
@@ -0,0 +1,75 @@
+<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>
+  </div>
+</template>
+
+<script>
+import DataShow from "./dataShow.vue";
+import TopRight from "./topRight.vue";
+import ReqDetailed from "./reqDetailed.vue";
+import ReqRecord from "./reqRecord.vue";
+
+export default {
+  components: { DataShow, ReqDetailed, ReqRecord, TopRight },
+  name: "mainContent",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.topContent {
+  padding-left: 60px;
+  display: flex;
+  height: 53vh;
+  width: 76vw;
+}
+.footerContent {
+  padding-left: 60px;
+  height: 40vh;
+  width: 76vw;
+  display: flex;
+}
+.title {
+  width: 73vw;
+  height: 5.5vh;
+  margin-left: 60px;
+
+  display: flex;
+}
+.req-title {
+  font-size: clamp(1rem, 1.3vw, 4rem);
+  font-family: Alibaba;
+  font-weight: 400;
+  color: #ffffff;
+  height: 3.5vh;
+}
+.req-detailed {
+  width: 9vw;
+}
+.req-record {
+  width: 6vw;
+  margin-left: 415px;
+}
+</style>
diff --git a/src/componets/reqError/navMenu.vue b/src/componets/reqError/navMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..efd7fdc2735750af4047ca2ca41e9318c68f8211
--- /dev/null
+++ b/src/componets/reqError/navMenu.vue
@@ -0,0 +1,70 @@
+<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
new file mode 100644
index 0000000000000000000000000000000000000000..b5b2570360acf9db283c902b449d4dcfef8e6859
--- /dev/null
+++ b/src/componets/reqError/reqDetailed.vue
@@ -0,0 +1,168 @@
+<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>
+    <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>
+      </div>
+      <!-- 趋势图,其实是同类型错误 -->
+      <req-trend />
+    </div>
+  </div>
+</template>
+
+<script>
+import reqTrend from "./reqTrend.vue";
+
+export default {
+  components: { reqTrend },
+  name: "reqDetailed",
+
+  data() {
+    return {};
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.reqDetailed {
+  width: 37.4vw;
+  height: 40vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  opacity: 0.7;
+  border: 1px solid #275079;
+  margin-right: 47px;
+  display: flex;
+}
+.reqDetailed-left {
+  width: 20vw;
+  height: 40vh;
+}
+.reqDetailed-right {
+  width: 16vw;
+  height: 40vh;
+  border-left: 1px dashed #7a97b6;
+}
+.reqtitle {
+  width: 71px;
+  height: 25px;
+  font-size: clamp(0.5rem, 1vw, 4rem);
+  font-family: AlibabaMedium;
+  color: #789dc3;
+  font-weight: 500;
+  margin: 0px 0px 0px 0.7vw;
+  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);
+  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;
+}
+.reqInfoV {
+  margin: 0 0 0.8vh -1vw;
+}
+.buttonStyle {
+  width: 98px;
+  height: 30px;
+  border-radius: 5px 5px 5px 5px;
+  opacity: 1;
+  font-family: AlibabaRegular;
+  font-weight: 400;
+  font-size: clamp(-1rem, 0.8vw, 4rem);
+  color: #ffffff;
+  line-height: 1px;
+}
+.el-button--success {
+  background: rgba(7, 90, 65, 0.92);
+  border: 1px solid #6be6c1;
+  margin: 0 1vw 0 1vw;
+}
+.el-button--warning {
+  background: #682d00;
+  border: 1px solid #ff750c;
+  margin: 0 1vw 0 1vw;
+}
+.circle {
+  border-radius: 100px;
+}
+.errorCount1 {
+  border: 2px solid #8ed6fa;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto;
+  margin-top: 2vmin;
+}
+.errorCount2 {
+  border: 1px solid #8ed6fa;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto;
+  margin-top: 1vmin;
+}
+.errorCount2 p {
+  color: #ffffff;
+}
+.errorCount-num {
+  margin: 2vmin 0 0 0;
+  font-size: clamp(-1rem, 1.5vw, 4rem);
+  font-weight: 600;
+  font-family: AlibabaRegular;
+}
+.errorCount-title {
+  margin: 0vmin 0 0 0;
+  font-size: clamp(-1rem, 0.2vw, 4rem);
+  font-family: AlibabaMedium;
+}
+</style>
diff --git a/src/componets/reqError/reqRecord.vue b/src/componets/reqError/reqRecord.vue
new file mode 100644
index 0000000000000000000000000000000000000000..87c7f1905d40e1edbad604a19af01d8b62df2850
--- /dev/null
+++ b/src/componets/reqError/reqRecord.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="reqRecord"></div>
+</template>
+
+<script>
+export default {
+  name: "reqRecord",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.reqRecord {
+  width: 44.1vw;
+  height: 37.7vh;
+  border: 1px slateblue solid;
+}
+</style>
diff --git a/src/componets/reqError/reqTrend.vue b/src/componets/reqError/reqTrend.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d7c607d773c7746afdf6caadb60d0d0b8dd0e5e
--- /dev/null
+++ b/src/componets/reqError/reqTrend.vue
@@ -0,0 +1,121 @@
+<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
new file mode 100644
index 0000000000000000000000000000000000000000..a057c0f65bd3a7aaf9443944d9c06c130b8e4b62
--- /dev/null
+++ b/src/componets/reqError/topRight.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="topright"></div>
+</template>
+
+<script>
+export default {
+  name: "top-right",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+/* .topright {
+} */
+</style>
diff --git a/src/views/JsErrorView.vue b/src/views/JsErrorView.vue
index 2d0a73b21c67122d4c0c39224e74cc0af6349589..f7bfe58325319c787e461169bb40e625266ebaeb 100644
--- a/src/views/JsErrorView.vue
+++ b/src/views/JsErrorView.vue
@@ -1,36 +1,49 @@
-<!--
- * @Author: arvin(王德江)
- * @Date: 2022-08-05 15:09:01
- * @LastEditors: arvin(王德江)
- * @LastEditTime: 2022-08-05 15:19:14
- * @Description: 
--->
 <template>
-  <div>
-    JsErrorView
+  <div class="JsErrorView">
+    <!-- <div class="left"> -->
+    <el-container>
+      <!-- 侧边栏 -->
+      <el-aside width="303px"><nav-menu /></el-aside>
+      <!-- 主内容展示区 -->
+      <el-main>
+        <main-content />
+      </el-main>
+    </el-container>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'JsErrorView',
+import NavMenu from "@/componets/jsError/navMenu.vue";
+import MainContent from "@/componets/jsError/mainContent.vue";
 
+export default {
+  name: "JsErrorView",
+  components: { NavMenu, MainContent },
   data() {
-    return {
-      
-    };
-  },
-
-  mounted() {
-    
-  },
-
-  methods: {
-    
+    return {};
   },
+  mounted() {},
+  methods: {},
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+<style scoped>
+body {
+  margin: 0;
+  padding: 0;
+}
+.JsErrorView {
+  display: flex;
+}
+.el-aside {
+  background-color: #25253f;
+  height: 100vh;
+}
+.el-main {
+  width: 84.2vw;
+  padding: 0;
+  flex: 1;
+  background-color: #000000;
+  height: 100vh;
+}
+</style>
diff --git a/src/views/ReqErrorView.vue b/src/views/ReqErrorView.vue
index bd4976aee2634ab515bbb56820b84fe25dfa561c..264ed0242fa0a32e0d10599387c3bdf28b5029e1 100644
--- a/src/views/ReqErrorView.vue
+++ b/src/views/ReqErrorView.vue
@@ -1,29 +1,55 @@
 <template>
-  <div>
-    ReqErrorView
+  <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>
 </template>
 
 <script>
+import mainContent from "@/componets/reqError/mainContent.vue";
+import navMenu from "@/componets/reqError/navMenu.vue";
+
 export default {
-  name: 'ReqErrorView',
+  name: "ReqErrorView",
+  components: {
+    mainContent,
+    navMenu,
+  },
 
   data() {
-    return {
-      
-    };
+    return {};
   },
 
-  mounted() {
-    
-  },
+  mounted() {},
 
-  methods: {
-    
-  },
+  methods: {},
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+<style scoped>
+body {
+  margin: 0;
+  padding: 0;
+}
+.ReqErrorView {
+  display: flex;
+}
+.el-aside {
+  background-color: #25253f;
+  height: 100vh;
+}
+.el-main {
+  width: 84.2vw;
+  padding: 0;
+  flex: 1;
+  background-color: #000000;
+  height: 100vh;
+}
+</style>