From a188f609963647dad9be4b800e56a2505feb9124 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Sat, 13 Aug 2022 10:33:52 +0800
Subject: [PATCH 01/10] 8/13

---
 src/componets/jsError/dataShow.vue  |  8 +++----
 src/componets/jsError/topRight.vue  | 17 --------------
 src/componets/jsError/topRight1.vue | 35 ++++++++++++++++++++++++++++-
 src/router/index.js                 |  2 +-
 src/views/JsErrorView.vue           |  7 +++---
 5 files changed, 43 insertions(+), 26 deletions(-)
 delete mode 100644 src/componets/jsError/topRight.vue

diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
index 643a75b..5418468 100644
--- a/src/componets/jsError/dataShow.vue
+++ b/src/componets/jsError/dataShow.vue
@@ -141,8 +141,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 +157,8 @@ export default {
 .el-select {
   width: 10vw;
   position: absolute;
-  left: 363px;
-  top: 30px;
+  left: 17.5vw;
+  top: 3vh;
   font-family: AlibabaMedium;
   font-weight: 400;
 }
diff --git a/src/componets/jsError/topRight.vue b/src/componets/jsError/topRight.vue
deleted file mode 100644
index a057c0f..0000000
--- 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 6db04cc..043464d 100644
--- a/src/componets/jsError/topRight1.vue
+++ b/src/componets/jsError/topRight1.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="topright">
-    <button class="doc">使用文档</button>
+    <a href="https://www.npmjs.com/package/revue-monitor" class="md">
+      <img src="../../assets/组 67.png" alt="" class="img" />
+      <p>使用文档</p>
+    </a>
 
     <div id="heathStatus"></div>
   </div>
@@ -153,4 +156,34 @@ export default {
   background-color: #fff;
   margin: 13vh 0 0 0;
 }
+.md {
+  position: fixed;
+  top: 3.1vh;
+  right: 3.3854vw;
+  width: 8.3333vw;
+  height: 5vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 27px 27px 27px 27px;
+  opacity: 0.7;
+  border: 1px solid #275079;
+  display: flex;
+  justify-content: space-around;
+  vertical-align: center;
+}
+.img {
+  margin-top: 1.28vh;
+  margin-left: 1.3021vw;
+  width: 1.0938vw;
+  height: 2.3vh;
+}
+p {
+  width: 5vw;
+  height: 2.5vh;
+  font-size: 0.9vw;
+  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 1vh;
+  margin-right: 0.625vw;
+}
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index f3c24ed..64c6c5f 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/views/JsErrorView.vue b/src/views/JsErrorView.vue
index f755a3d..3548ba7 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,12 +14,13 @@
 </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 {}
 
-- 
Gitee


From 0ea68e98457d4f0d0c2c1bf87a8c72a40926961b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Sat, 13 Aug 2022 15:14:40 +0800
Subject: [PATCH 02/10] =?UTF-8?q?=E5=81=A5=E5=BA=B7=E7=8A=B6=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/componets/jsError/dataShow.vue  |  7 ++-
 src/componets/jsError/topRight1.vue | 80 +++++++++++++++++++----------
 src/views/JsErrorView.vue           |  5 +-
 3 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
index 5418468..f20944d 100644
--- a/src/componets/jsError/dataShow.vue
+++ b/src/componets/jsError/dataShow.vue
@@ -4,13 +4,11 @@
     <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="jseTitle">
         <i class="el-icon-caret-right" id="el-icon-caret-right"></i>
@@ -192,6 +190,7 @@ 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;
diff --git a/src/componets/jsError/topRight1.vue b/src/componets/jsError/topRight1.vue
index 043464d..294e709 100644
--- a/src/componets/jsError/topRight1.vue
+++ b/src/componets/jsError/topRight1.vue
@@ -4,6 +4,10 @@
       <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>
   </div>
@@ -23,6 +27,27 @@ export default {
     //反方向剩下部分的样式
 
     var options = {
+      title: {
+        // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
+        // 例如： `示例
+        //   这里的文字会变为第二行(因为会保留格式)
+        //  `
+        text: '85',
+        // subtext: '分',
+        left: "center",//对齐方式居中
+        top: "35%",//距离顶部
+        textStyle: {//文字配置
+          color: "#FFFF",//文字颜色
+          fontSize: 40,//字号
+          align: "center"//对齐方式
+        },
+        subtextStyle: {//副标题文本样式{"color": "#aaa"}
+          color: "#FFFF",//文字颜色
+          fontSize: 10,//字号
+          align: "center"//对齐方式
+        },
+      },
+
       backgroundColor: ' ',
       series: [{
         type: 'pie',
@@ -42,21 +67,6 @@ 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,
         },
@@ -138,23 +148,12 @@ export default {
   width: 16vw;
   height: 50vh;
 }
-.doc {
-  width: 6vw;
-  height: 4vh;
-  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
-  border-radius: 27px 27px 27px 27px;
-  opacity: 0.7;
-  border: 1px solid #275079;
-  color: #ffffff;
-  font-family: AlibabaRegular;
-  font-size: 13px;
-  margin: 20px 0px 0 0;
-}
+
 #heathStatus {
   width: 10vw;
   height: 19vh;
   background-color: #fff;
-  margin: 13vh 0 0 0;
+  margin: 17vh 0 0 3vw;
 }
 .md {
   position: fixed;
@@ -186,4 +185,29 @@ p {
   line-height: 1vh;
   margin-right: 0.625vw;
 }
+/* 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;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/JsErrorView.vue b/src/views/JsErrorView.vue
index 3548ba7..87cafab 100644
--- a/src/views/JsErrorView.vue
+++ b/src/views/JsErrorView.vue
@@ -40,10 +40,7 @@ body {
 .JsErrorView {
   display: flex;
 }
-.el-aside {
-  background-color: #25253f;
-  height: 100vh;
-}
+
 .el-main {
   width: 84.2vw;
   padding: 0;
-- 
Gitee


From dc6b78042834df6f9d3bbb3aad2e3c18d5efeb3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Sat, 13 Aug 2022 17:36:54 +0800
Subject: [PATCH 03/10] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/jsError/yuanquan.jpg    | Bin 0 -> 1064 bytes
 src/componets/jsError/jsRecord.vue | 129 ++++++++++++++++++++++++++++-
 2 files changed, 125 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/jsError/yuanquan.jpg

diff --git a/src/assets/jsError/yuanquan.jpg b/src/assets/jsError/yuanquan.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a2d0b6e66031401431ca3acd4f46846dbbd549dc
GIT binary patch
literal 1064
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=Bjg6g+m4ls~os*M;i${c)hnt&6Qb?Fz
zL{>^(PF6}rMnOeST|r4lSw=>~TvNxu(8R<<Uft5x!pKI?*u)5A2qPyaCl5D|1TU|I
zk)n*E5y{~HAqGJXhHwT0W=16jCP7AKLB{__7^J{XWoBeR045ejW>$8foCMGpAdesc
zCPrqK|F;-;fEt(tm<1RZ7=Qi{7js~Uy_=S3b#;2`xmTCZFK+Mduj7-wRjgb)>*H^0
z*QXXY(mofaM=(4)yha{qth@jN6C(=~Gs0LVpm72U#)3kMCeA?9Ie>ODvNG*_bL3l6
zwSnl&V3C6GfTK)jH)I(s>+!f{n^wvC`S!z98D2)ifWz6E%VlCb+Ge<_cY@XHf;=V2
zz=Ui*&?ZI!AwdNLu;I*%jP{I|4Nh-#wWtRwmJ?(EdJ4%k42%qdhD^*t3If7TU=2)Q
z4Z=3jQ(ub~g{pS1yKv&l)9*m7${?RGvoNy4y~4=EAgE9%Af#yM$ZQmtSOoPAn?2Lj
z&BbZY&hF7k_R~%*d*OR@+xkZC#o@2`18cso{Oh<)>iCcKQWNf7*4R?gnz^-RhG3Og
zfk)etd3iZ^ZtmQ?9%z}O00Scv8_@9x%Yb$PEec#HkXShJBP`(T6(5A=DT+pSxQ0EF
zeA#iz$S>uA-LiXLT*n$yN^W#cc39Zb*nD>Tl1DESPPpDZrK|q6D0s`4S*+8&9Ob{b
z{4Vohu}gFgXqb6MX>}sUsvAyP+hqPT01XGnIRhx11U^65b7A!rzE9a7xNMmCfo_u#
z1WJHn5dj#1ZW91H4(u#YkP95r*<%wWt3RJ_L)HqD?M{K|K#lUim||pNM`&YU6l8#C
zOe{PI)(Z-Kfkk&)6Bs6%J07##Uce-{qF|LzldXMlThV@?87iPyU}8hE9%zPPpn!s+
zW8sIy#)%6bLJR^XDxf3UjhF2_?L6~x%+rNuUal+Z<%`-PuVyjJ)kXc$#3T{_W9$O+
z&KKApXgk!Rwjggk(~KvX1;yPzSi(-!9a~^Gt<x!Eg0YFuVdE~vFN<Fbns`ilcjG|N
z$*TJcr?MZMVtYnGKW6>zp5AoNs}KJ;SaWbWTmf41c3shhXJywdGm5RV=hXkd2>>nr
BK|cTh

literal 0
HcmV?d00001

diff --git a/src/componets/jsError/jsRecord.vue b/src/componets/jsError/jsRecord.vue
index faa0dde..88c2f60 100644
--- a/src/componets/jsError/jsRecord.vue
+++ b/src/componets/jsError/jsRecord.vue
@@ -1,5 +1,50 @@
 <template>
-  <div class="jsRecord"></div>
+  <div class="jsRecord">
+    <ul>
+      <li>
+        <div class="icon"></div>
+        <div class="content">
+          <div class="Ctop">
+            <p class="jstype">Script error</p>
+            <p class="time">发生时间：2012/4/7</p>
+          </div>
+          <p class="jsmessage">cannript read properly</p>
+        </div>
+      </li>
+      <li>
+        <div class="icon"></div>
+        <div class="content"></div>
+      </li>
+      <li>
+        <div class="icon"></div>
+        <div class="content"></div>
+      </li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+      <li>a</li>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -7,7 +52,12 @@ export default {
   name: 'jsRecord',
   data () {
     return {
-
+      count: 0
+    }
+  },
+  methods: {
+    load () {
+      this.count += 2
     }
   }
 }
@@ -16,7 +66,78 @@ export default {
 <style  scoped>
 .jsRecord {
   width: 44.1vw;
-  height: 37.7vh;
   border: 1px slateblue solid;
+  overflow-y: scroll;
+  display: flex;
+}
+.line {
+  width: 5px;
+  height: 10px;
+  background-color: #494649;
+  border-radius: 10px;
+}
+.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;
+}
+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 -18vw;
+}
+.time {
+  font-size: clamp(-1rem, 1vw, 4rem);
+  margin: 1vh 0 0 13vw;
 }
-</style>
\ No newline at end of file
+</style>
-- 
Gitee


From d5818c7c5fbe9fa48d743f1f1a83a9cd1aeb8902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Sat, 13 Aug 2022 17:57:35 +0800
Subject: [PATCH 04/10] .

---
 src/componets/jsError/jsRecord.vue | 58 +++++++-----------------------
 1 file changed, 13 insertions(+), 45 deletions(-)

diff --git a/src/componets/jsError/jsRecord.vue b/src/componets/jsError/jsRecord.vue
index 88c2f60..4a09543 100644
--- a/src/componets/jsError/jsRecord.vue
+++ b/src/componets/jsError/jsRecord.vue
@@ -1,48 +1,18 @@
 <template>
   <div class="jsRecord">
     <ul>
-      <li>
-        <div class="icon"></div>
-        <div class="content">
-          <div class="Ctop">
-            <p class="jstype">Script error</p>
-            <p class="time">发生时间：2012/4/7</p>
+      <template>
+        <li v-for="(item, index) in aa" :key="index">
+          <div class="icon"></div>
+          <div class="content">
+            <div class="Ctop">
+              <p class="jstype">{{ item.a }}</p>
+              <p class="time">{{ item.b }}</p>
+            </div>
+            <p class="jsmessage">{{ item.c }}</p>
           </div>
-          <p class="jsmessage">cannript read properly</p>
-        </div>
-      </li>
-      <li>
-        <div class="icon"></div>
-        <div class="content"></div>
-      </li>
-      <li>
-        <div class="icon"></div>
-        <div class="content"></div>
-      </li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
-      <li>a</li>
+        </li>
+      </template>
     </ul>
   </div>
 </template>
@@ -52,13 +22,11 @@ export default {
   name: 'jsRecord',
   data () {
     return {
-      count: 0
+      aa: [{ a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }]
     }
   },
   methods: {
-    load () {
-      this.count += 2
-    }
+
   }
 }
 </script>
-- 
Gitee


From 4df88c0fe1fc9fa0b470061a706efcf21f0ad38f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Sat, 13 Aug 2022 17:59:58 +0800
Subject: [PATCH 05/10] .

---
 src/componets/jsError/jsRecord.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/componets/jsError/jsRecord.vue b/src/componets/jsError/jsRecord.vue
index 4a09543..736cbab 100644
--- a/src/componets/jsError/jsRecord.vue
+++ b/src/componets/jsError/jsRecord.vue
@@ -34,7 +34,7 @@ export default {
 <style  scoped>
 .jsRecord {
   width: 44.1vw;
-  border: 1px slateblue solid;
+
   overflow-y: scroll;
   display: flex;
 }
-- 
Gitee


From bd9b8778ce96d590c1f5cf53ea0c298ada7c29ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Wed, 17 Aug 2022 15:57:48 +0800
Subject: [PATCH 06/10] 8/17

---
 src/componets/jsError/dataShow.vue  |  4 +-
 src/componets/jsError/jsRecord.vue  |  9 +---
 src/componets/jsError/navMenu.vue   | 72 -----------------------------
 src/componets/jsError/topRight1.vue |  6 +++
 4 files changed, 10 insertions(+), 81 deletions(-)
 delete mode 100644 src/componets/jsError/navMenu.vue

diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
index f20944d..372e405 100644
--- a/src/componets/jsError/dataShow.vue
+++ b/src/componets/jsError/dataShow.vue
@@ -10,6 +10,7 @@
       >
         <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>
@@ -25,7 +26,8 @@ export default {
   name: 'dataShow',
   data () {
     return {
-      channel: "全部页面"
+      channel: "全部组件",
+      value1: ''
     }
   },
   mounted () {
diff --git a/src/componets/jsError/jsRecord.vue b/src/componets/jsError/jsRecord.vue
index 736cbab..5fda8b7 100644
--- a/src/componets/jsError/jsRecord.vue
+++ b/src/componets/jsError/jsRecord.vue
@@ -26,7 +26,6 @@ export default {
     }
   },
   methods: {
-
   }
 }
 </script>
@@ -34,16 +33,9 @@ export default {
 <style  scoped>
 .jsRecord {
   width: 44.1vw;
-
   overflow-y: scroll;
   display: flex;
 }
-.line {
-  width: 5px;
-  height: 10px;
-  background-color: #494649;
-  border-radius: 10px;
-}
 .jsRecord::-webkit-scrollbar {
   width: 20px;
   height: 8px;
@@ -62,6 +54,7 @@ li {
   list-style: none;
   display: flex;
   border: 1px solid #000;
+  cursor: pointer;
 }
 ul {
   padding: 0;
diff --git a/src/componets/jsError/navMenu.vue b/src/componets/jsError/navMenu.vue
deleted file mode 100644
index a476f53..0000000
--- 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/topRight1.vue b/src/componets/jsError/topRight1.vue
index 294e709..a3ccd68 100644
--- a/src/componets/jsError/topRight1.vue
+++ b/src/componets/jsError/topRight1.vue
@@ -10,6 +10,7 @@
     </div>
 
     <div id="heathStatus"></div>
+    <p class="grade">优秀</p>
   </div>
 </template>
 
@@ -210,4 +211,9 @@ p {
   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
-- 
Gitee


From 9dc5da059044a8e24c6370f9bcc1a340c952e434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Wed, 17 Aug 2022 23:48:56 +0800
Subject: [PATCH 07/10] =?UTF-8?q?8/17=E9=99=A4=E4=BA=86=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=BF=98=E6=9C=AA=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/componets/jsError/dataShow.vue    |  3 +
 src/componets/jsError/jsDetailed.vue  | 79 ++++++++++++++++++++++-----
 src/componets/jsError/jsRecord.vue    | 25 +++++++--
 src/componets/jsError/jsTrend.vue     | 10 ++--
 src/componets/jsError/mainContent.vue | 38 ++++++++++++-
 src/componets/jsError/topRight1.vue   | 22 +++++---
 src/services/jsError/jsError.js       | 10 ++++
 src/services/jsError/request.js       | 17 ++++++
 src/views/JsErrorView.vue             |  2 +
 9 files changed, 171 insertions(+), 35 deletions(-)
 create mode 100644 src/services/jsError/jsError.js
 create mode 100644 src/services/jsError/request.js

diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
index 372e405..95b6fbd 100644
--- a/src/componets/jsError/dataShow.vue
+++ b/src/componets/jsError/dataShow.vue
@@ -28,8 +28,11 @@ export default {
     return {
       channel: "全部组件",
       value1: ''
+
     }
   },
+
+
   mounted () {
     var chartDom = document.getElementById('contemt');
     var myChart = this.$echarts.init(chartDom, 'dark');
diff --git a/src/componets/jsError/jsDetailed.vue b/src/componets/jsError/jsDetailed.vue
index bccf3af..1bd6b2c 100644
--- a/src/componets/jsError/jsDetailed.vue
+++ b/src/componets/jsError/jsDetailed.vue
@@ -1,26 +1,36 @@
 <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="jsUrV jsValue">{{ errorDetailed[current].simpleUrl }}</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="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>
@@ -34,17 +44,56 @@
 import jsTrend from './jsTrend.vue'
 
 export default {
+  props: {
+    errorDetailed: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
   components: { jsTrend },
   name: 'jsDetailed',
 
   data () {
     return {
+      data: [],
+      count: []
+    }
+  },
+  computed: {
+    // dataShow () {
+    //   this.errorDetailed[0].errorStatistics.forEach(function (item) {
+    //     this.data.push(item.errorCount)
+    //   })
+    //   return "a"
+    // }
+  },
+  beforeMount () {
 
+
+  },
+  methods: {
+    // dataShow () {
+    //    this.errorDetailed[0].errorStatistics.forEach(function (item) {
+    //     this.data.push(item.errorCount)
+    //      console.log("aa")
+    //   })
+    // }
+    solve () {
+      this.$emit('solve')
+    },
+    neglect () {
+      this.$emit('neglect')
     }
+
   },
-  mounted () {
 
-  }
+
 
 }
 </script>
@@ -82,7 +131,7 @@ export default {
   display: inline-block;
 }
 .jsTypeTitle {
-  margin-left: -1.4vw !important;
+  margin-left: -3vw !important;
   width: 71px !important;
   margin-bottom: 1vh;
 }
@@ -110,10 +159,10 @@ export default {
   margin: 0 0 0.8vh -3vw;
 }
 .errorContentV {
-  margin: 0 0 0.8vh -6vw;
+  margin: 0 0 0.8vh 1.2vw;
 }
 .jsUrV {
-  margin: 0 0 0.8vh -1vw;
+  margin: 0 0 0.8vh 0vw;
 }
 .jsInfoV {
   margin: 0 0 0.8vh -1vw;
diff --git a/src/componets/jsError/jsRecord.vue b/src/componets/jsError/jsRecord.vue
index 5fda8b7..7be1e75 100644
--- a/src/componets/jsError/jsRecord.vue
+++ b/src/componets/jsError/jsRecord.vue
@@ -2,14 +2,18 @@
   <div class="jsRecord">
     <ul>
       <template>
-        <li v-for="(item, index) in aa" :key="index">
+        <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.a }}</p>
-              <p class="time">{{ item.b }}</p>
+              <p class="jstype">{{ item.errorType }}</p>
+              <p class="time">{{ item.timeStamp }}</p>
             </div>
-            <p class="jsmessage">{{ item.c }}</p>
+            <p class="jsmessage">{{ item.message }}</p>
           </div>
         </li>
       </template>
@@ -19,13 +23,22 @@
 
 <script>
 export default {
+  props: {
+    errorDetailed: {
+      type: Array,
+    }
+  },
   name: 'jsRecord',
   data () {
     return {
-      aa: [{ a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }, { a: 'Script error', b: '发生时间：2012/4/7', c: 'cannript read properly' }]
+
     }
   },
   methods: {
+    changecurrent (index) {
+      this.$emit('changecurrent', index)
+
+    }
   }
 }
 </script>
@@ -95,7 +108,7 @@ p {
 }
 .jsmessage {
   font-size: clamp(-2rem, 0.9vw, 4rem);
-  margin: 1vh 0 0 -18vw;
+  margin: 1vh 0 0 -17vw;
 }
 .time {
   font-size: clamp(-1rem, 1vw, 4rem);
diff --git a/src/componets/jsError/jsTrend.vue b/src/componets/jsError/jsTrend.vue
index f23ce49..acae313 100644
--- a/src/componets/jsError/jsTrend.vue
+++ b/src/componets/jsError/jsTrend.vue
@@ -45,7 +45,7 @@ export default {
       backgroundColor: '',
       xAxis: {
         type: 'category',
-        data: ['7-24', '7-26', '7-27', '7-28', '7-29', '7-30'], // 时间
+        data: ['00', '04', '08', '12', '16', '20', '24'], // 时间
         boundaryGap: false,
         lineStyle: {
           color: '#647483'
@@ -57,20 +57,20 @@ export default {
 
       yAxis: {
         type: 'value',
-        data: ['10', '20', '30', '40', '70', '100'],
+        data: ['0', '5', '10', '15', '20', '25'],
         splitLine: {
           show: false
         }
       },
       series: [{
-        name: '同步错误',
+        name: '错误',
         type: 'line',
-        data: [10, 20, 78, 80, 40, 10],
+        data: [0, 5, 6, 80, 40, 10],
         symbol: 'none',
         lineStyle: {
           // 设置线条的style等
           normal: {
-            color: '#4E6CBD' // 折线线条颜色:红色
+            color: '#4E6CBD'
           }
         },
         itemStyle: {
diff --git a/src/componets/jsError/mainContent.vue b/src/componets/jsError/mainContent.vue
index ec9f735..d9e240d 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
+      }
 
     }
   }
diff --git a/src/componets/jsError/topRight1.vue b/src/componets/jsError/topRight1.vue
index a3ccd68..80482f1 100644
--- a/src/componets/jsError/topRight1.vue
+++ b/src/componets/jsError/topRight1.vue
@@ -15,13 +15,21 @@
 </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');
@@ -33,8 +41,8 @@ export default {
         // 例如： `示例
         //   这里的文字会变为第二行(因为会保留格式)
         //  `
-        text: '85',
-        // subtext: '分',
+        text: this.health,
+        subtext: '分',
         left: "center",//对齐方式居中
         top: "35%",//距离顶部
         textStyle: {//文字配置
@@ -44,7 +52,7 @@ export default {
         },
         subtextStyle: {//副标题文本样式{"color": "#aaa"}
           color: "#FFFF",//文字颜色
-          fontSize: 10,//字号
+          fontSize: 15,//字号
           align: "center"//对齐方式
         },
       },
@@ -69,10 +77,10 @@ export default {
           }
         },
         data: [{
-          value: 8,
+          value: this.health,
         },
         {
-          value: 2,
+          value: (100 - this.health),
           name: '',
           itemStyle: {
             normal: {
@@ -110,10 +118,10 @@ export default {
           }
         },
         data: [{
-          value: 8,
+          value: this.health,
         },
         {
-          value: 2,
+          value: (100 - this.health),
           name: '',
           itemStyle: {
             normal: {
diff --git a/src/services/jsError/jsError.js b/src/services/jsError/jsError.js
new file mode 100644
index 0000000..00873eb
--- /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 0000000..150efe3
--- /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/views/JsErrorView.vue b/src/views/JsErrorView.vue
index 87cafab..e9115ba 100644
--- a/src/views/JsErrorView.vue
+++ b/src/views/JsErrorView.vue
@@ -18,6 +18,7 @@
 import MainContent from '@/componets/jsError/mainContent.vue'
 import leftMenu from '@/componets/leftMenu.vue'
 
+
 export default {
   name: 'JsErrorView',
   components: { MainContent, leftMenu },
@@ -26,6 +27,7 @@ export default {
 
   },
   mounted () {
+
   },
   methods: {
   },
-- 
Gitee


From eaa9fbc857cc60704f30e03edf8859796242403f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Thu, 18 Aug 2022 21:31:05 +0800
Subject: [PATCH 08/10] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/componets/jsError/dataShow.vue   | 164 +++++++++++++++------------
 src/componets/jsError/jsDetailed.vue | 152 +++++++++++++++++++++----
 src/componets/jsError/jsTrend.vue    | 120 --------------------
 src/store/index.js                   |   1 +
 4 files changed, 219 insertions(+), 218 deletions(-)
 delete mode 100644 src/componets/jsError/jsTrend.vue

diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
index 95b6fbd..107407b 100644
--- a/src/componets/jsError/dataShow.vue
+++ b/src/componets/jsError/dataShow.vue
@@ -22,99 +22,113 @@
 </template>
 
 <script>
+import { jsSituation } from '@/services/jsError/request'
+
 export default {
   name: 'dataShow',
   data () {
     return {
       channel: "全部组件",
-      value1: ''
+      value1: '',
 
     }
   },
-
-
   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
+      })
+
+      console.log(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();
-    };
   }
 
 }
diff --git a/src/componets/jsError/jsDetailed.vue b/src/componets/jsError/jsDetailed.vue
index 1bd6b2c..37bb74c 100644
--- a/src/componets/jsError/jsDetailed.vue
+++ b/src/componets/jsError/jsDetailed.vue
@@ -35,14 +35,13 @@
         </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 {
   props: {
     errorDetailed: {
@@ -56,46 +55,148 @@ export default {
       default: 0
     }
   },
-  components: { jsTrend },
+
   name: 'jsDetailed',
 
   data () {
     return {
-      data: [],
+      data1: [],
       count: []
     }
   },
-  computed: {
-    // dataShow () {
-    //   this.errorDetailed[0].errorStatistics.forEach(function (item) {
-    //     this.data.push(item.errorCount)
-    //   })
-    //   return "a"
-    // }
+  watch: {
+    current (val) {
+      if (val) {
+        let seriesData = this.errorDetailed[val].errorStatistics.map(function (item) {
+          return item.errorCount
+        })
+        this.drawChart(seriesData)
+      }
+    },
+    immediate: true
   },
-  beforeMount () {
-
+  mounted () {
+    getJsError().then(res => {
+      this.data1 = res.data.result[0].errorStatistics
+      let seriesData = this.data1.map(function (item) {
+        return item.errorCount
+      })
+      this.drawChart(seriesData)
+      console.log(res.data.result)
+    })
 
   },
+
   methods: {
-    // dataShow () {
-    //    this.errorDetailed[0].errorStatistics.forEach(function (item) {
-    //     this.data.push(item.errorCount)
-    //      console.log("aa")
-    //   })
-    // }
     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: '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: ['00', '04', '08', '12', '16', '20', '24'], // 时间
+          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>
@@ -156,7 +257,7 @@ export default {
   margin: 2vh 0 0 1vw;
 }
 .jsContentV {
-  margin: 0 0 0.8vh -3vw;
+  margin: 0 0 0.8vh -1vw;
 }
 .errorContentV {
   margin: 0 0 0.8vh 1.2vw;
@@ -219,4 +320,9 @@ export default {
   font-size: clamp(-1rem, 0.2vw, 4rem);
   font-family: AlibabaMedium;
 }
+.trend {
+  width: 14vw;
+  height: 23vh;
+  margin: 0 0 0vh 1vw;
+}
 </style>
diff --git a/src/componets/jsError/jsTrend.vue b/src/componets/jsError/jsTrend.vue
deleted file mode 100644
index acae313..0000000
--- 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: ['00', '04', '08', '12', '16', '20', '24'], // 时间
-        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: [0, 5, 6, 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/store/index.js b/src/store/index.js
index ceffa8e..a584477 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: {
   },
-- 
Gitee


From 5c1931070d392fea92ad102d6e720e2adee124bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Thu, 18 Aug 2022 21:36:14 +0800
Subject: [PATCH 09/10] =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/componets/jsError/dataShow.vue   | 1 -
 src/componets/jsError/jsDetailed.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
index 107407b..97b3e7e 100644
--- a/src/componets/jsError/dataShow.vue
+++ b/src/componets/jsError/dataShow.vue
@@ -43,7 +43,6 @@ export default {
         return item.errorCount
       })
 
-      console.log(errorCount)
       var chartDom = document.getElementById('contemt');
       var myChart = this.$echarts.init(chartDom, 'dark');
       var option = {
diff --git a/src/componets/jsError/jsDetailed.vue b/src/componets/jsError/jsDetailed.vue
index 37bb74c..7af8d1c 100644
--- a/src/componets/jsError/jsDetailed.vue
+++ b/src/componets/jsError/jsDetailed.vue
@@ -82,7 +82,6 @@ export default {
         return item.errorCount
       })
       this.drawChart(seriesData)
-      console.log(res.data.result)
     })
 
   },
-- 
Gitee


From 4d5bc5326f981aa551e1b9aeb576f1450e8a063f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=89=91=E8=B1=AA?= <764439554@qq.com>
Date: Sun, 21 Aug 2022 19:57:29 +0800
Subject: [PATCH 10/10] =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/componets/jsError/dataShow.vue    | 23 ++++++++++++++++++++++-
 src/componets/jsError/jsDetailed.vue  | 23 ++++++++++-------------
 src/componets/jsError/mainContent.vue |  2 +-
 src/componets/jsError/topRight1.vue   |  8 ++++++--
 src/componets/reqError/reqTrend.vue   |  6 +++---
 5 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
index 97b3e7e..b3e50c5 100644
--- a/src/componets/jsError/dataShow.vue
+++ b/src/componets/jsError/dataShow.vue
@@ -10,6 +10,16 @@
       >
         <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>
@@ -30,6 +40,7 @@ export default {
     return {
       channel: "全部组件",
       value1: '',
+      value: ''
 
     }
   },
@@ -133,7 +144,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less" >
 .heater {
   height: 19vh;
   width: 59vw;
@@ -213,4 +224,14 @@ export default {
 .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 7af8d1c..f99dd72 100644
--- a/src/componets/jsError/jsDetailed.vue
+++ b/src/componets/jsError/jsDetailed.vue
@@ -11,7 +11,7 @@
       <p class="errorContentV jsValue">{{ errorDetailed[current].detail }}</p>
       <p class="jsUrlT jstitle">发生页面</p>
       <p class="jsUrV jsValue">{{ errorDetailed[current].simpleUrl }}</p>
-      <p class="jsInfoT jstitle">加载信息</p>
+      <p class="jsInfoT jstitle">错误定位</p>
       <p class="jsInfoV jsValue">
         错误代码行列 行：{{ errorDetailed[current].Position.row }}，列：{{
           errorDetailed[current].Position.column
@@ -55,13 +55,10 @@ export default {
       default: 0
     }
   },
-
   name: 'jsDetailed',
-
   data () {
     return {
       data1: [],
-      count: []
     }
   },
   watch: {
@@ -100,7 +97,7 @@ export default {
         grid: [{
           left: '15%',
           bottom: '10%',
-          top: '30%',
+          top: '20%',
           right: '10%'
         }],
         title: {
@@ -128,7 +125,7 @@ export default {
         backgroundColor: '',
         xAxis: {
           type: 'category',
-          data: ['00', '04', '08', '12', '16', '20', '24'], // 时间
+          data: ['00', '04', '08', '12', '16', '20'], // 时间
           boundaryGap: false,
           lineStyle: {
             color: '#647483'
@@ -200,12 +197,12 @@ export default {
 
 <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 {
@@ -213,7 +210,7 @@ export default {
   height: 40vh;
 }
 .jsDetailed-right {
-  width: 16vw;
+  width: 20vw;
   height: 40vh;
   border-left: 1px dashed #7a97b6;
 }
@@ -256,13 +253,13 @@ export default {
   margin: 2vh 0 0 1vw;
 }
 .jsContentV {
-  margin: 0 0 0.8vh -1vw;
+  margin: 0 0 0.9vh -1vw;
 }
 .errorContentV {
   margin: 0 0 0.8vh 1.2vw;
 }
 .jsUrV {
-  margin: 0 0 0.8vh 0vw;
+  margin: 0px 0 0.8vh -1.8vw;
 }
 .jsInfoV {
   margin: 0 0 0.8vh -1vw;
@@ -320,8 +317,8 @@ export default {
   font-family: AlibabaMedium;
 }
 .trend {
-  width: 14vw;
+  width: 16vw;
   height: 23vh;
-  margin: 0 0 0vh 1vw;
+  margin: 0 0 0vh 2vw;
 }
 </style>
diff --git a/src/componets/jsError/mainContent.vue b/src/componets/jsError/mainContent.vue
index d9e240d..342db76 100644
--- a/src/componets/jsError/mainContent.vue
+++ b/src/componets/jsError/mainContent.vue
@@ -107,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/topRight1.vue b/src/componets/jsError/topRight1.vue
index 80482f1..41ec844 100644
--- a/src/componets/jsError/topRight1.vue
+++ b/src/componets/jsError/topRight1.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="topright">
-    <a href="https://www.npmjs.com/package/revue-monitor" class="md">
+    <a
+      href="https://gitee.com/re-vue-monitor/monitor-middle-platform"
+      class="md"
+    >
       <img src="../../assets/组 67.png" alt="" class="img" />
       <p>使用文档</p>
     </a>
@@ -156,6 +159,7 @@ export default {
 .topright {
   width: 16vw;
   height: 50vh;
+  margin: 3vh 0 0 2vw;
 }
 
 #heathStatus {
@@ -167,7 +171,7 @@ export default {
 .md {
   position: fixed;
   top: 3.1vh;
-  right: 3.3854vw;
+  right: 2vw;
   width: 8.3333vw;
   height: 5vh;
   background: linear-gradient(10deg, #081f37 0%, #123251 100%);
diff --git a/src/componets/reqError/reqTrend.vue b/src/componets/reqError/reqTrend.vue
index 3d7c607..1c0055f 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>
-- 
Gitee