diff --git a/threadpool/console/src/icons/svg/monitor.svg b/threadpool/console/src/icons/svg/monitor.svg new file mode 100644 index 0000000000..c82fd6b71e --- /dev/null +++ b/threadpool/console/src/icons/svg/monitor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue b/threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue index 79c28ad19e..6bb267130f 100755 --- 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 `
+
${taskCom?.seriesName}：${taskCom?.value}
+
+
${taskAll?.seriesName}：${taskAll?.value}
+
${taskReject?.seriesName}：${taskReject?.value}
+
` + } + } : {}; 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 index bcd17bf0e5..122cb7889a 100755 --- a/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js +++ b/threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js @@ -1,28 +1,28 @@ -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 @@ -30,27 +30,29 @@ export default { $_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); + }, + }, +}; diff --git a/threadpool/console/src/views/hippo4j/monitor/index.vue b/threadpool/console/src/views/hippo4j/monitor/index.vue old mode 100755 new mode 100644 index d44e4eae5e..526b1d0ee3 --- a/threadpool/console/src/views/hippo4j/monitor/index.vue +++ b/threadpool/console/src/views/hippo4j/monitor/index.vue @@ -1,252 +1,154 @@ -