msb-public
/
hippo4j
mirror of https://github.com/longtai-cn/hippo4j
1
0
Code Issues Projects Releases Wiki Activity

feat:add thread pool (#1488)

Browse Source 
Co-authored-by: 吹泡泡的团子 <baoxinyi_i@didiglobal.com>
pull/1493/head
GRL-bxy 1 year ago committed by GitHub
parent ef73f2569a
commit 910f594076
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 519 additions and 394 deletions
Show Stats Download Patch File Download Diff File

1
threadpool/console/src/icons/svg/monitor.svg
Unescape View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695992735183" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" id="mx_n_1695992735184" width="400" height="400" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M855.8 868.3H167.1l-7.5-9.5c-29.3-37.4-52.2-78.9-67.9-123.3-16.2-46-24.4-94.3-24.4-143.5 0-59.2 11.8-116.6 35.2-170.7 22.4-52.1 54.6-98.9 95.5-138.9 40.8-40 88.2-71.3 141.1-93.3 54.6-22.6 112.6-34.2 172.4-34.2 59.7 0 117.7 11.5 172.4 34.2 52.9 22 100.3 53.2 141.1 93.3 40.9 40.1 73 86.8 95.5 138.9 23.3 54 35.2 111.5 35.2 170.7 0 49.2-8.2 97.5-24.5 143.5-15.7 44.4-38.6 85.9-67.9 123.3l-7.5 9.5z m-665-51.9h641.1c48.4-65.7 73.8-143 73.8-224.4 0-212.3-176.9-385.1-394.4-385.1-217.4 0.1-394.4 172.8-394.4 385.1 0.1 81.4 25.7 158.8 73.9 224.4z m0 0" p-id="1816" fill="#435f81"></path><path d="M421 650.7c0 49.9 40.5 90.4 90.4 90.4 49.9 0 90.4-40.5 90.4-90.4s-40.5-90.4-90.4-90.4c-49.9 0-90.4 40.5-90.4 90.4z m0 0" p-id="1817" fill="#435f81"></path><path d="M518.2 643.3c-10.8 8.3-26.5 6.3-34.9-4.6L382.9 508.3c-8.3-10.8-6.3-26.5 4.6-34.9 10.8-8.3 26.5-6.3 34.9 4.6l100.5 130.5c8.2 10.7 6.1 26.4-4.7 34.8z m0 0" p-id="1818" fill="#435f81"></path><path d="M806.9 602.1c-13.7 0-24.8-11.6-24.8-25.9 0-141-121.4-255.6-270.6-255.6-149.2 0-270.6 114.6-270.6 255.6 0 14.3-11.1 25.9-24.8 25.9-13.7 0-24.8-11.6-24.8-25.9 0-41.8 8.5-82.4 25.5-120.5 16.3-36.7 39.5-69.5 69.2-97.8 60.4-57.5 140.5-89.2 225.6-89.2s165.2 31.7 225.6 89.2c29.6 28.2 52.9 61.1 69.1 97.8 16.9 38.2 25.5 78.7 25.5 120.5-0.1 14.2-11.2 25.9-24.9 25.9z m0 0" p-id="1819" fill="#435f81"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

86
threadpool/console/src/views/hippo4j/monitor/components/LineChart.vue
Unescape View File

@ -32,6 +32,14 @@ export default {
type: Array, type: Array,
required: true, required: true,
}, },
title: {
type: String,
default: '标题'
},
cusFormatter: {
type: Boolean,
default: false
}
}, },
data() { data() {
return { return {
@ -67,11 +75,19 @@ export default {
}, },
setOptions() { setOptions() {
const series = this.chartData.map((item) => { const series = this.chartData.map((item) => {
const other = !item.show ? {
symbolSize: 0,
showSymbol: false,
lineStyle: {
width: 0,
color: 'rgba(0, 0, 0, 0)'
}
} : {}
return { return {
name: item.name, name: item.name,
type: 'line', type: 'line',
stack: 'Total', // stack: 'Total',
areaStyle: {}, // areaStyle: {},
label: { label: {
position: 'top', position: 'top',
}, },
@ -82,40 +98,82 @@ export default {
smooth: true, smooth: true,
data: item.data, data: item.data,
showSymbol: false, 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({ this.chart.setOption({
tooltip: { title: {
trigger: 'axis', text: this.title,
axisPointer: { textStyle: {
type: 'cross', fontSize: '16px'
label: {
backgroundColor: '#6a7985',
}, },
left: 0,
right: 0,
top: 0,
bottom: 0,
padding: 0,
}, },
tooltip: {
trigger: 'axis',
...cusFormatterObj
}, },
legend: { legend: {
show:false,
data: this.chartData, data: this.chartData,
icon: 'circle',
top: 0,
}, },
toolbox: { toolbox: {
feature: {}, feature: {},
}, },
grid: { grid: {
left: '3%', left: 0,
right: '4%', right: 0,
bottom: '3%', top: '18%',
bottom: '0',
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: {
{
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: this.times, data: this.times,
nameTextStyle: {
width: '20px'
},
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: true,
lineStyle: {
color: '#ddd'
}
},
}, },
],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
max: maxNumber,
}, },
], ],
series: series, series: series,

46
threadpool/console/src/views/hippo4j/monitor/components/mixins/resize.js
Unescape View File

@ -1,28 +1,28 @@
import { debounce } from '@/utils' import { debounce } from '@/utils';
export default { export default {
data() { data() {
return { return {
$_sidebarElm: null $_sidebarElm: null,
} };
}, },
mounted() { mounted() {
this.$_initResizeEvent() this.$_initResizeEvent();
this.$_initSidebarResizeEvent() this.$_initSidebarResizeEvent();
}, },
beforeDestroy() { beforeDestroy() {
this.$_destroyResizeEvent() this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent() this.$_destroySidebarResizeEvent();
}, },
// to fixed bug when cached by keep-alive // to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116 // https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() { activated() {
this.$_initResizeEvent() this.$_initResizeEvent();
this.$_initSidebarResizeEvent() this.$_initSidebarResizeEvent();
}, },
deactivated() { deactivated() {
this.$_destroyResizeEvent() this.$_destroyResizeEvent();
this.$_destroySidebarResizeEvent() this.$_destroySidebarResizeEvent();
}, },
methods: { methods: {
// use $_ for mixins properties // use $_ for mixins properties
@ -30,27 +30,29 @@ export default {
$_resizeHandler() { $_resizeHandler() {
return debounce(() => { return debounce(() => {
if (this.chart) { if (this.chart) {
this.chart.resize() this.chart.resize();
} }
}, 100)() }, 100)();
}, },
$_initResizeEvent() { $_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler) window.addEventListener('resize', this.$_resizeHandler);
}, },
$_destroyResizeEvent() { $_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler) window.removeEventListener('resize', this.$_resizeHandler);
}, },
$_sidebarResizeHandler(e) { $_sidebarResizeHandler(e) {
if (e.propertyName === 'width') { if (e.propertyName === 'width') {
this.$_resizeHandler() this.$_resizeHandler();
} }
}, },
$_initSidebarResizeEvent() { $_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) this.$_sidebarElm &&
this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
}, },
$_destroySidebarResizeEvent() { $_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) this.$_sidebarElm &&
} this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
} },
} },
};

762
threadpool/console/src/views/hippo4j/monitor/index.vue
Unescape View File

@ -1,252 +1,154 @@
<template> <template>
<div class="dashboard-editor-container"> <div class="monitor-wrapper">
<div class="filter-container"> <div class="info-wrapper">
<el-select <div class="top-card">
v-model="listQuery.itemId" <svg-icon id="top-icon" icon-class="monitor" />
:placeholder="$t('projectManage.itemRequired')" <div class="top-info">
style="width: 220px" <div class="label">操作者：</div>
filterable <span class="user">{{userName}}</span>
class="filter-item" </div>
@change="itemSelectList()" </div>
> <div class="query-monitoring">
<el-option <div class="title">查询监控</div>
v-for="item in itemOptions" <el-cascader
:key="item.key" class="el-cascader"
:label="item.display_name" learable
:value="item.key" v-model="selectMonitorValue"
/> :options="selectMonitor"
</el-select> :props="{ expandTrigger: 'hover' }"
<el-select @change="handleChangeMonitorSelect"></el-cascader>
v-model="listQuery.tpId" </div>
:placeholder="$t('threadPool.threadPoolRequired')" <div class="info-card">
style="width: 220px" <div class="info-card-title">{{ selectMonitor[0].label }}数量</div>
filterable <div class="data-num">
class="filter-item" <span class="num">
@change="threadPoolSelectList()" {{ selectMonitor[0].children.length || "_" }}
> </span>个
<el-option </div>
v-for="item in threadPoolOptions" </div>
:key="item.key" <div class="tp-card">
:label="item.display_name" <div class="tp-item" v-for="(item, index) in tableData" :key="index">
:value="item.key" <div>{{ item.name }}</div>
/> <div class="tp-label">{{ item.label }}</div>
</el-select> </div>
<el-select </div>
v-model="listQuery.identify" </div>
:placeholder="$t('threadPoolMonitor.ipPortRequired')" <div class="search-wrapper">
style="width: 220px" <div class="demonstration">时间筛选</div>
filterable <el-date-picker
class="filter-item" type="datetimerange"
> start-placeholder="开始日期"
<el-option end-placeholder="结束日期"
v-for="item in identifyOptions" value-format="yyyy-MM-dd HH:mm:ss"
:key="item.key" v-model="timeValue"
:label="item.display_name" @input="changeMonitorData">
:value="item.key" </el-date-picker>
/> </div>
</el-select> <div class="center-chart-wrapper">
<line-chart title="任务数" :chart-data="lineChartData" :times="times" height="100%" :cus-formatter="true" />
<el-button </div>
v-waves <div class="bottom-chart-wraper">
class="filter-item" <div class="inner-chart">
type="primary" <line-chart title="活跃线程数" :chart-data="activeSizeList" :times="times" height="100%" />
style="margin-left: 10px" </div>
icon="el-icon-search" <div class="inner-chart">
@click="fetchData" <line-chart title="线程数" :chart-data="poolSizeList" :times="times" height="100%" />
> </div>
{{ $t('common.query') }} <div class="inner-chart">
</el-button> <line-chart title="队列元素数" :chart-data="queueSizeList" :times="times" height="100%" />
<el-button </div>
v-waves <div class="inner-chart">
class="filter-item" <line-chart title="拒绝数" :chart-data="rangeRejectCountList" :times="times" height="100%" />
type="primary" </div>
style="margin-left: 10px"
icon="el-icon-refresh"
@click="refreshData"
>
{{ $t('common.reset') }}
</el-button>
</div> </div>
<el-empty v-if="!temp.coreSize" :description="$t('threadPoolMonitor.noResultsYet')" />
<section v-else>
<!-- <el-card shadow="hover">
<el-descriptions :column="3" border>
<el-descriptions-item label="实例 ID">{{ listQuery.identify }}</el-descriptions-item>
<el-descriptions-item label="核心线程">{{ temp.coreSize }}</el-descriptions-item>
<el-descriptions-item label="最大线程">{{ temp.maxSize }}</el-descriptions-item>
<el-descriptions-item label="队列类型">
{{ temp.queueType | queueFilter }}
</el-descriptions-item>
<el-descriptions-item label="队列容量">{{ temp.capacity }}</el-descriptions-item>
<el-descriptions-item label="已完成任务数">{{ lastTaskCount }}</el-descriptions-item>
<el-descriptions-item label="拒绝策略">
{{ temp.rejectedType | rejectedFilter }}
</el-descriptions-item>
<el-descriptions-item label="是否报警">
{{ temp.isAlarm | alarmFilter }}
</el-descriptions-item>
<el-descriptions-item label="任务拒绝次数">
{{ rejectCount }}
</el-descriptions-item>
</el-descriptions>
</el-card> -->
<el-row :gutter="10" style="margin-top: 16px">
<el-col :span="12">
<el-card shadow="hover">
<line-chart :chart-data="lineChartData1" :times="times" />
</el-card>
</el-col>
<!-- <el-col :span="8">
<el-card shadow="hover">
<line-chart :chart-data="lineChartData2" :times="times" />
</el-card>
</el-col> -->
<el-col :span="12">
<el-card shadow="hover">
<line-chart :chart-data="lineChartData3" :times="times" />
</el-card>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-top: 16px">
<el-col :span="12">
<el-card shadow="hover">
<line-chart :chart-data="lineChartData5" :times="times" />
</el-card>
</el-col>
<!-- <el-col :span="8">
<el-card shadow="hover">
<line-chart :chart-data="lineChartData4" :times="times" />
</el-card>
</el-col> -->
<el-col :span="12">
<el-card shadow="hover">
<line-chart :chart-data="lineChartData6" :times="times" />
</el-card>
</el-col>
</el-row>
</section>
</div> </div>
</template> </template>
<script> <script>
import LineChart from './components/LineChart.vue';
import waves from '@/directive/waves';
import * as itemApi from '@/api/hippo4j-item';
import * as tenantApi from '@/api/hippo4j-tenant';
import * as threadPoolApi from '@/api/hippo4j-threadPool'; import * as threadPoolApi from '@/api/hippo4j-threadPool';
import * as instanceApi from '@/api/hippo4j-instance';
import * as monitorApi from '@/api/hippo4j-monitor'; import * as monitorApi from '@/api/hippo4j-monitor';
import * as instanceApi from '@/api/hippo4j-instance';
import * as itemApi from '@/api/hippo4j-item';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { i18nConfig } from '@/locale/config' import { i18nConfig } from '@/locale/config'
import LineChart from './components/LineChart.vue';
export default { export default {
name: 'Monitor', name: 'Monitor',
components: { components: {
LineChart, LineChart,
}, },
directives: { waves },
filters: {
queueFilter(type) {
const typeList = {
1: 'ArrayBlockingQueue',
2: 'LinkedBlockingQueue',
3: 'LinkedBlockingDeque',
4: 'SynchronousQueue',
5: 'LinkedTransferQueue',
6: 'PriorityBlockingQueue',
9: 'ResizableLinkedBlockingQueue',
};
return typeList[type];
},
rejectedFilter(type) {
const typeList = {
1: 'CallerRunsPolicy',
2: 'AbortPolicy',
3: 'DiscardPolicy',
4: 'DiscardOldestPolicy',
5: 'RunsOldestTaskPolicy',
6: 'SyncPutQueuePolicy',
};
return type && typeList[type] ? typeList[type] : type ? `CustomRejectedPolicy-${type}` : '';
},
alarmFilter(type) {
return type === '1' ? '报警' : '忽略';
},
allowCoreThreadTimeOutFilter(type) {
return type === '1' ? '超时' : '不超时';
},
},
data() { data() {
return { return {
lineChartData1: [ lineChartData: [],
{ times: [],
name: 'activeSizeList', timeValue: new Date(),
data: [], selectMonitorValue: {
color: '#709775', default: [0]
},
],
lineChartData2: [
{
name: 'poolSizeList',
data: [],
color: '#e9c46a',
},
],
lineChartData3: [
{
name: 'queueSizeList',
data: [],
color: '#003049',
},
],
lineChartData4: [
{
name: 'queueRemainingCapacityList',
data: [],
color: '#f4a261',
},
],
lineChartData5: [
{
name: 'completedTaskCountList',
data: [],
color: '#023e8a',
}, },
], selectMonitor: [{
lineChartData6: [ value: 0,
{ label: '项目',
name: 'rejectCountList', children: []
data: [], }, {
color: '#dd1c1a', value: 1,
label: '线程池',
children: [],
}, {
value: 2,
label: '实例',
children: [],
}],
activeSizeList: [],
poolSizeList: [],
queueSizeList: [],
rangeRejectCountList: [],
chooseData: {},
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
}, },
], selectMonitor: [],
times: [], tableData: [{
size: 500, date: '2016-05-02',
tenantOptions: [], name: '王小虎',
threadPoolOptions: [], }, {
itemOptions: [], date: '2016-05-04',
identifyOptions: [], name: '王小虎',
}, {
date: '2016-05-01',
name: '王小虎',
}, {
date: '2016-05-03',
name: '王小虎',
}],
listQuery : { listQuery : {
current: 1, "current": 1,
size: 10, "size": 10,
itemId: '', "itemId": "dynamic-threadpool-example",
tpId: '', "tpId": "message-produce",
tenantId: '', "tenantId": "prescription",
identify: '', "identify": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662",
instanceId: '', "instanceId": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662"
}, }
}
temp: {},
rejectCount: null,
lastTaskCount: null,
};
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
@ -259,153 +161,315 @@ export default {
this.fetchData() this.fetchData()
} }
}, },
async created() { created() {
this.initSelect(); this.fetchData()
this.fetchChartData()
this.getSelectMonitor()
}, },
methods: { methods: {
fetchData() { fetchData() {
this.userName = this.$cookie.get('userName')
this.listQuery.tenantId = this?.tenantInfo?.tenantId || this.listQuery.tenantId this.listQuery.tenantId = this?.tenantInfo?.tenantId || this.listQuery.tenantId
let isAllTenant = this.listQuery.tenantId == i18nConfig.messages.zh.common.allTenant || this.listQuery.tenantId == i18nConfig.messages.en.common.allTenant let isAllTenant = this.listQuery.tenantId == i18nConfig.messages.zh.common.allTenant || this.listQuery.tenantId == i18nConfig.messages.en.common.allTenant
this.listQuery.tenantId = isAllTenant ? '' : this.listQuery.tenantId this.listQuery.tenantId = isAllTenant ? '' : this.listQuery.tenantId
if (!this.listQuery.tenantId) {
this.$message.warning(this.$t('message.emptyWarning', { name: this.$t('tenantManage.tenant') }));
return;
}
if (!this.listQuery.itemId) {
this.$message.warning(this.$t('message.emptyWarning', { name: this.$t('projectManage.item') }));
return;
}
if (!this.listQuery.tpId) {
this.$message.warning(this.$t('message.emptyWarning', { name: this.$t('threadPool.threadPool') }));
return;
}
if (!this.listQuery.identify) {
this.$message.warning(this.$t('message.emptyWarning', { name: this.$t('threadPoolMonitor.ipPort') }));
return;
}
this.listQuery.instanceId = this.listQuery.identify;
threadPoolApi.info( this.listQuery).then((res) => { threadPoolApi.info( this.listQuery).then((res) => {
this.temp = res; this.temp = res;
}); });
// monitorApi.lastTaskCountFun(this.listQuery).then((res) => {
// this.rejectCount = res.rejectCount;
// this.lastTaskCount = res.completedTaskCount;
// });
this.initChart();
},
refreshData() {
this.listQuery.tenantId = null;
this.listQuery.itemId = null;
this.listQuery.tpId = null;
this.listQuery.identify = null;
this.itemOptions = [];
this.threadPoolOptions = [];
this.identifyOptions = [];
}, },
initSelect() { getSelectMonitor() {
tenantApi.list({ size: this.size }).then((res) => { this.selectMonitor = [{
value: 0,
label: '项目',
children: []
}, {
value: 1,
label: '线程池',
children: [],
}, {
value: 2,
label: '实例',
children: [],
}]
//项目接口 itenId
itemApi.list(this.listQuery).then((res) => {
const { records } = res || {}; const { records } = res || {};
this.tenantOptions = records && records.map((item) => {
records && item.value = item.tenantId
records.map((item) => { item.label = item.tenantId
return {
key: item.tenantId,
display_name: item.tenantId + ' ' + item.tenantName,
};
}); });
this.selectMonitor[0].children = records
//初始化tenantId
this.selectMonitorValue = [0, records[0].tenantId ]
this.listQuery.tenantId = records[0].tenantId
this.listQuery.itemId = records[0].itemId
this.listQuery.current = records[0].current
}); });
}, //线程池接口tpId,itemId,tenantId
threadPoolApi.list( this.listQuery).then((res) => {
tenantSelectList() {
this.listQuery.itemId = null;
this.listQuery.tpId = null;
this.listQuery.identify = null;
this.itemOptions = [];
this.threadPoolOptions = [];
this.identifyOptions = [];
const params = { tenantId: this.listQuery.tenantId, size: this.size };
itemApi.list(params).then((res) => {
const { records } = res || {}; const { records } = res || {};
this.itemOptions = records && records.map((item) => {
records && item.value = item.tenantId
records.map((item) => { item.label = item.tenantId
return {
key: item.itemId,
display_name: item.itemId + ' ' + item.itemName,
};
}); });
this.selectMonitor[1].children = records
this.listQuery.tenantId = records[0].tenantId
this.listQuery.itemId = records[0].itemId
this.listQuery.current = records[0].current
this.listQuery.tpId = records[0].tpId
}); });
}, let param = [
this.listQuery.itemId,
itemSelectList() { this.listQuery.tpId,
this.listQuery.tpId = null; ]
this.listQuery.identify = null; //实例接口
this.threadPoolOptions = []; instanceApi.list(param).then((res) => {
this.identifyOptions = []; res.map((item) => {
const params = { itemId: this.listQuery.itemId, size: this.size }; item.value = item.tenantId
threadPoolApi.list(params).then((res) => { item.label = item.tenantId
const { records } = res || {};
this.threadPoolOptions =
records &&
records.map((item) => {
return {
key: item.tpId,
display_name: item.tpId,
};
}); });
this.selectMonitor[2].children = res
this.listQuery.tenantId = res[0].tenantId
this.listQuery.itemId = res[0].itemId
this.listQuery.current = res[0].current
this.listQuery.tpId = res[0].tpId,
this.listQuery.identify = res[0].identify
}); });
},
threadPoolSelectList() { //线程池配置
this.listQuery.identify = null; threadPoolApi.info(this.listQuery).then((res) => {
this.identifyOptions = []; this.temp = res;
const listArray = [this.listQuery.itemId, this.listQuery.tpId]; this.tableData = [{
instanceApi.list(listArray).then((res) => { name: '租户',
this.identifyOptions = label: res.tenantId
res && }, {
res.map((item) => { name: '线程池',
return { label: res.tpId
key: item.identify, }, {
display_name: item.clientAddress, name: '核心线程池',
}; label: res.coreSize
}); }, {
// name: '项目',
// label: res.itemId
// }, {
name: '拒绝次数',
label: res.rejectedType
}]
}); });
}, },
initChart() { fetchChartData() {
monitorApi.active(this.listQuery).then((res) => { monitorApi.active( this.listQuery).then(res => {
const { this.monitor = res
poolSizeList, this.lineChartData = [
activeSizeList, {
queueSizeList, name: '区间任务完成数',
queueRemainingCapacityList, data: res?.rangeCompletedTaskCountList,
completedTaskCountList, show: true
rejectCountList, }, {
times, name: '拒绝总数',
} = res || {}; data: res?.rejectCountList,
this.times = times; show: false,
this.lineChartData1[0].data = activeSizeList; itemStyle: {
this.lineChartData2[0].data = poolSizeList; opacity: 0,
this.lineChartData3[0].data = queueSizeList; },
this.lineChartData4[0].data = queueRemainingCapacityList; textStyle: {
this.lineChartData5[0].data = completedTaskCountList; opacity: 0,
this.lineChartData6[0].data = rejectCountList; }
}); }, {
name: '任务总数',
data: res?.completedTaskCountList,
show: false,
itemStyle: {
opacity: 0,
}, },
textStyle: {
opacity: 0,
}
},]
this.times = res?.times.map(item => {
const list = item.split(':')
list.pop()
return list.join(':')
})
console.log
this.activeSizeList = [{
name: '活跃线程数',
data: res?.activeSizeList,
show: true,
num: res?.activeSizeList[res.activeSizeList.length - 1]
}]
this.poolSizeList = [{
name: '线程数',
data: res?.poolSizeList,
show: true
}]
this.queueSizeList = [{
name: '队列元素数',
data: res?.queueSizeList,
show: true
}]
this.rangeRejectCountList = [{
name: '拒绝数',
data: res?.rangeRejectCountList,
show: true
}]
})
},
changeMonitorData(value, row) {
console.log("time", value)
this.listQuery.startTime = value[0]
this.listQuery.endTime = value[1]
this.fetchChartData()
}, },
};
handleChangeMonitorSelect(value) {
console.log("asaksasa", value)
this.selectMonitor[value[0]].map((item) => {
if (item.children.label == value[1]) {
this.listQuery.identify = item.identify || this.listQuery.identify
this.listQuery.tenantId = item.tenantId || this.listQuery.tenantId
this.listQuery.itemId = item.itemId || this.listQuery.itemId
this.listQuery.instanceId = item.current || this.listQuery.instanceId
this.listQuery.tpId = item.tpId || this.listQuery.tpId
}
})
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-editor-container { .monitor-wrapper {
padding: 32px; width: 100%;
background-color: rgb(240, 242, 245); height: calc(100vh - 50px);
/* background-color: #2f4256; */ display: grid;
position: relative; grid-template-rows: 60px 1fr 2fr;
min-height: 100vh; grid-template-columns: 240px 2fr 1fr;
background-color: #ebebf3;
gap: 10px;
padding: 10px;
box-sizing: border-box;
>div {
border-radius: 8px;
background-color: #fff;
padding: 12px;
}
.chart-title {
font-size: 16px;
font-weight: bolder;
margin: 0;
}
.info-wrapper::-webkit-scrollbar {
display: none; /*隐藏滚动条*/
}
.info-wrapper {
grid-row: 1 / 4;
grid-column: 1 / 2;
padding: 20rpx;
overflow-y: scroll;
.top-card {
display: flex;
justify-content: space-around;
padding: 20px 0;
align-items: center;
color: rgba($color: #435f81, $alpha: 0.9);
font-weight: 600;
.svg-icon {
width: 60px;
height: 60px;
left: 0;
}
.top-icon {
width: 40px;
}
}
.query-monitoring {
margin-bottom: 30px;
.title {
padding: 0 0 10px 5px;
font-weight: 600;
color: rgba($color: #435f81, $alpha: 0.9);
}
.el-cascader {
width: 100%;
}
}
.info-card {
// background: #435f81;
background-color: rgba($color: #435f81, $alpha: 0.9);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
color: #fefefe;
font-family: HelveticaNeue-Medium,Helvetica Medium,PingFangSC-Medium,STHeitiSC-Medium,Microsoft YaHei Bold,Arial,sans-serif;
.info-card-title, .data-num {
font-size: 14px;
font-weight: 500;
padding-bottom: 10px;
}
.num {
font-family: DIDIFD-Regular;
font-size: 40px;
}
.operation-list {
color: darkgray;
}
}
.tp-card {
// background: rgb(237, 237, 237);
border: 1px solid #dfe6ec;
padding: 20px 10px 30px 10px;
border-radius: 8px;
background-color: rgba($color: #435f81, $alpha: 0.9);
color: white;
.tp-item {
border-bottom: 1px solid #e3e3e3;
line-height: 40px;
display: flex;
justify-content: space-between;
font-size: 14px;
flex-wrap: nowrap;
overflow: hidden;
.tp-label {
width: 600;
}
}
}
}
.search-wrapper {
grid-row: 1 / 2;
grid-column: 2 / 4;
display: flex;
align-items: center;
.demonstration {
margin: 0 10px;
font-weight: 600;
color: #3a3b3c;
}
}
.center-chart-wrapper {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
.bottom-chart-wraper {
grid-row: 3 / 4;
grid-column: 2 / 4;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 24px;
.inner-chart {
grid-column: span 1;
grid-row: span 1;
}
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save