feat:add thread pool (#1488)

Co-authored-by: 吹泡泡的团子 <[email protected]>
opengoofy · Sep 30, 2023 · 910f594 · 910f594
1 parent ef73f25
commit 910f594
Show file tree

Hide file tree

Showing 4 changed files with 519 additions and 394 deletions.
diff --git a/threadpool/console/src/icons/svg/monitor.svg b/threadpool/console/src/icons/svg/monitor.svg
diff --git a/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue b/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue
@@ -32,6 +32,14 @@ export default {
       type: Array,
       required: true,
     },
+    title: {
+      type: String,
+      default: '标题'
+    },
+    cusFormatter: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -67,11 +75,19 @@ export default {
     },
     setOptions() {
       const series = this.chartData.map((item) => {
+        const other = !item.show ? {
+          symbolSize: 0,
+          showSymbol: false,
+          lineStyle: {
+            width: 0,
+            color: 'rgba(0, 0, 0, 0)'
+          }
+        } : {}
         return {
           name: item.name,
           type: 'line',
-          stack: 'Total',
-          areaStyle: {},
+          // stack: 'Total',
+          // areaStyle: {},
           label: {
             position: 'top',
           },
@@ -82,40 +98,82 @@ export default {
           smooth: true,
           data: item.data,
           showSymbol: false,
+          ...other
         };
       });
+      let numbers = this.chartData && this.chartData[0]?.data;
+      let maxNumber = Math.max(...numbers);
+      const cusFormatterObj = this.cusFormatter ? {
+        formatter: (params) => {
+          const taskAll = params.find(item => item.seriesName === '任务总数')
+          const taskCom = params.find(item => item.seriesName === '区间任务完成数')
+          const taskReject = params.find(item => item.seriesName === '拒绝总数')
+          return `<div>
+              <div style="padding: 6px 0;font-weight: bolder;">${taskCom?.seriesName}：${taskCom?.value}</div>
+              <div style="width: 100%,height: 0px;border-bottom: 1px dashed #ddd;padding: 6px 0;"></div>
+              <div style="padding: 6px 0;">${taskAll?.seriesName}：${taskAll?.value}</div>
+              <div style="padding: 6px 0;">${taskReject?.seriesName}：${taskReject?.value}</div>
+              </div>`
+        }
+      } : {};
       this.chart.setOption({
+        title: {
+          text: this.title,
+          textStyle: {
+            fontSize: '16px'
+          },
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          padding: 0,
+        },
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985',
-            },
-          },
+          ...cusFormatterObj
         },
         legend: {
+          show:false,
           data: this.chartData,
+          icon: 'circle',
+          top: 0,
         },
         toolbox: {
           feature: {},
         },
         grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
+          left: 0,
+          right: 0,
+          top: '18%',
+          bottom: '0',
           containLabel: true,
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: this.times,
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.times,
+          nameTextStyle: {
+            width: '20px'
           },
-        ],
+          axisLabel: {
+            color: '#333'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ddd'
+            }
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#ddd'
+            }
+          },
+        },
         yAxis: [
           {
             type: 'value',
+            max: maxNumber,
           },
         ],
         series: series,

diff --git a/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js b/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js
@@ -1,56 +1,58 @@
-import { debounce } from '@/utils'
+import { debounce } from '@/utils';
 
 export default {
   data() {
     return {
-      $_sidebarElm: null
-    }
+      $_sidebarElm: null,
+    };
   },
   mounted() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
+    this.$_initResizeEvent();
+    this.$_initSidebarResizeEvent();
   },
   beforeDestroy() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
+    this.$_destroyResizeEvent();
+    this.$_destroySidebarResizeEvent();
   },
   // to fixed bug when cached by keep-alive
   // https://github.com/PanJiaChen/vue-element-admin/issues/2116
   activated() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
+    this.$_initResizeEvent();
+    this.$_initSidebarResizeEvent();
   },
   deactivated() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
+    this.$_destroyResizeEvent();
+    this.$_destroySidebarResizeEvent();
   },
   methods: {
     // use $_ for mixins properties
     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     $_resizeHandler() {
       return debounce(() => {
         if (this.chart) {
-          this.chart.resize()
+          this.chart.resize();
         }
-      }, 100)()
+      }, 100)();
     },
     $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
+      window.addEventListener('resize', this.$_resizeHandler);
     },
     $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
+      window.removeEventListener('resize', this.$_resizeHandler);
     },
     $_sidebarResizeHandler(e) {
       if (e.propertyName === 'width') {
-        this.$_resizeHandler()
+        this.$_resizeHandler();
       }
     },
     $_initSidebarResizeEvent() {
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
+      this.$_sidebarElm &&
+        this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
     },
     $_destroySidebarResizeEvent() {
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    }
-  }
-}
+      this.$_sidebarElm &&
+        this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
+    },
+  },
+};