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

feat：monitor

Browse Source
pull/1491/head
吹泡泡的团子 2 years ago
parent a84fa5846e
commit 0b96588ae3
1 changed files with 78 additions and 151 deletions
Show Stats Download Patch File Download Diff File

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

@ -5,21 +5,16 @@
<svg-icon id="top-icon" icon-class="monitor" /> <svg-icon id="top-icon" icon-class="monitor" />
<div class="top-info"> <div class="top-info">
<div class="label">操作者：</div> <div class="label">操作者：</div>
<span class="user">{{userName}}</span> <span class="user">{{ userName }}</span>
</div> </div>
</div> </div>
<div class="query-monitoring"> <div class="query-monitoring">
<div class="title">查询监控</div> <div class="title">查询监控</div>
<el-cascader <el-cascader v-model="selectMonitorValue" class="el-cascader" learable :options="selectMonitor"
class="el-cascader" :props="{ expandTrigger: 'hover' }" @change="handleChangeMonitorSelect"></el-cascader>
learable
v-model="selectMonitorValue"
:options="selectMonitor"
:props="{ expandTrigger: 'hover' }"
@change="handleChangeMonitorSelect"></el-cascader>
</div> </div>
<div class="info-card"> <div class="info-card">
<div class="info-card-title">{{ selectMonitor[0].label }}数量</div> <div class="info-card-title">{{ selectMonitor[0].label }}数量</div>
<div class="data-num"> <div class="data-num">
<span class="num"> <span class="num">
{{ selectMonitor[0].children.length || "_" }} {{ selectMonitor[0].children.length || "_" }}
@ -27,23 +22,18 @@
</div> </div>
</div> </div>
<div class="tp-card"> <div class="tp-card">
<div class="tp-item" v-for="(item, index) in tableData" :key="index"> <div v-for="(item, index) in tableData" :key="index" class="tp-item">
<div>{{ item.name }}</div> <div>{{ item.name }}</div>
<div class="tp-label">{{ item.label }}</div> <div class="tp-label">{{ item.label }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="search-wrapper"> <div class="search-wrapper">
<div class="demonstration">时间筛选</div> <div class="demonstration">时间筛选</div>
<el-date-picker <el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
type="datetimerange" value-format="timestamp" :picker-options="pickerOptions">
start-placeholder="开始日期" </el-date-picker>
end-placeholder="结束日期" <el-button class="button" @click="changeMonitorData">筛选</el-button>
value-format="timestamp"
v-model="timeValue"
:picker-options="pickerOptions">
</el-date-picker>
<el-button class="button" @click="changeMonitorData">筛选</el-button>
</div> </div>
<div class="center-chart-wrapper"> <div class="center-chart-wrapper">
<line-chart title="任务数" :chart-data="lineChartData" :times="times" height="100%" :cus-formatter="true" /> <line-chart title="任务数" :chart-data="lineChartData" :times="times" height="100%" :cus-formatter="true" />
@ -68,9 +58,6 @@
import * as threadPoolApi from '@/api/hippo4j-threadPool'; import * as threadPoolApi from '@/api/hippo4j-threadPool';
import * as monitorApi from '@/api/hippo4j-monitor'; import * as monitorApi from '@/api/hippo4j-monitor';
import * as instanceApi from '@/api/hippo4j-instance'; import * as instanceApi from '@/api/hippo4j-instance';
import * as tenantApi from '@/api/hippo4j-tenant';
import * as itemApi from '@/api/hippo4j-item';
import * as user from '@/api/hippo4j-user';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { i18nConfig } from '@/locale/config' import { i18nConfig } from '@/locale/config'
import LineChart from './components/LineChart.vue'; import LineChart from './components/LineChart.vue';
@ -103,21 +90,21 @@ export default {
that.timeValue = [start, end] that.timeValue = [start, end]
picker.$emit("pick", [start, end]); picker.$emit("pick", [start, end]);
} }
},{ }, {
text: '1 小时', text: '1 小时',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = that.getBeforeDate(new Date(), 1); const start = that.getBeforeDate(new Date(), 1);
picker.$emit("pick", [start, end]); picker.$emit("pick", [start, end]);
} }
},{ }, {
text: '6 小时', text: '6 小时',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = that.getBeforeDate(new Date(), 6); const start = that.getBeforeDate(new Date(), 6);
picker.$emit("pick", [start, end]); picker.$emit("pick", [start, end]);
} }
},{ }, {
text: '今天', text: '今天',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
@ -128,14 +115,14 @@ export default {
text: '昨天', text: '昨天',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = that.getBeforeDate(new Date(), 24*30); const start = that.getBeforeDate(new Date(), 24 * 30);
picker.$emit("pick", [start, end]); picker.$emit("pick", [start, end]);
} }
}, { }, {
text: '一周内', text: '一周内',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = that.getBeforeDate(new Date(), 24*90); const start = that.getBeforeDate(new Date(), 24 * 90);
picker.$emit("pick", [start, end]); picker.$emit("pick", [start, end]);
} }
}], }],
@ -146,24 +133,21 @@ export default {
if (maxDate) this.choiceDate = '' if (maxDate) this.choiceDate = ''
}, },
disabledDate: time => { disabledDate: time => {
return time.getTime() > this.getDayStartOrEnd(new Date(),"end"); return time.getTime() > this.getDayStartOrEnd(new Date(), "end");
} }
}, },
selectMonitor: [], selectMonitor: [],
tableData: [], tableData: [],
listQuery : { listQuery: {
"current": 1, "current": 1,
"size": 10, "size": 10,
// "itemId": "", "itemId": "",
// "tpId": "", "tpId": "",
// "tenantId": "", "tenantId": "",
// "identify": "", "identify": "",
// "instanceId": "", "instanceId": "",
"identify": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662", startTime:"",
"itemId": "dynamic-threadpool-example", endTime:""
"tpId": "message-produce",
"tenantId": "prescription",
"instanceId": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662"
} }
} }
}, },
@ -173,132 +157,59 @@ export default {
]), ]),
}, },
watch: { watch: {
tenantInfo(newVal, oldVal) { listQuery:{
this.listQuery.tenantId = newVal.tenantId; handler(newVal) {
this.fetchData() this.fetchChartData(newVal)
this.fetchChartData() },
deep: true
} }
}, },
async mounted() { created() {
const end = new Date().getTime(); const end = new Date().getTime();
const start = this.getBeforeDate(new Date(), 0.5).getTime() const start = this.getBeforeDate(new Date(), 0.5).getTime()
this.timeValue = [start, end] this.timeValue = [start, end]
this.listQuery.startTime = this.timeValue[0] this.listQuery.startTime = this.timeValue[0]
this.listQuery.endTime = this.timeValue[1] this.listQuery.endTime = this.timeValue[1]
await this.getTenantList() this.fetchData()
await this.fetchData()
}, },
methods: { methods: {
async fetchData() { fetchData() {
// debugger // debugger
this.userName = this.$cookie.get('userName') 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
threadPoolApi.list(this.listQuery).then((res) => { threadPoolApi.list(this.listQuery).then((res) => {
console.log("获取itemId， tpId", res)
this.listQuery.itemId = res.records[0].itemId this.listQuery.itemId = res.records[0].itemId
this.listQuery.tpId = res.records[0].tpId this.listQuery.tpId = res.records[0].tpId
this.listQuery.tenantId = res.records[0].tenantId this.listQuery.tenantId = res.records[0].tenantId
this.getSelectMonitor(res.records[0].itemId,res.records[0].tpId)
}) })
threadPoolApi.info( this.listQuery).then((res) => {
this.temp = res;
});
await this.getSelectMonitor()
await this.fetchChartData()
await this.changeMonitorData()
}, },
async getTenantList() {
const userName = this.$cookie.get('userName')
await user
.getCurrentUser(userName)
.then((response) => {
const { resources } = response;
resources.map((item) => ({
...item,
tenantId: item.resource
}))
if (response.role == 'ROLE_ADMIN') {
resources.unshift({
action: "rw",
resource: this.$t('common.allTenant'),
username: userName,
tenantId: this.$t('common.allTenant'),
})
}
this.$store.dispatch('tenant/setTenantList', resources)
this.$store.dispatch('tenant/setTenantInfo', this.tenantInfo || resources[0])
this.listQuery.tenantId = this.tenantInfo.tenantId || resources[0].tenantId
})
.catch(() => {});
},
//获取搜索框实例数据，数据面板展示 getSelectMonitor(itemId,tpId) {
getSelectMonitor() {
this.selectMonitor = [{ this.selectMonitor = [{
value: 0, value: 0,
label: '实例', label: '实例',
children: [], children: [],
// },{ },]
// value: 0,
// label: '项目',
// children: []
// }, {
// value: 1,
// label: '线程池',
// children: [],
}, ]
let param = [ let param = [
this.listQuery.itemId, itemId,
this.listQuery.tpId, tpId
] ]
//实例接口
instanceApi.list(param).then((res) => { instanceApi.list(param).then((res) => {
res.map((item) => { res.map((item) => {
item.value = item.identify item.value = item.identify
item.label = item.identify item.label = item.identify
}); });
this.selectMonitor[0].children = res this.selectMonitor[0].children = res
this.selectMonitorValue = [0, res[0].identify ] this.selectMonitorValue = [0, res[0].identify]
this.listQuery.tenantId = res[0].tenantId
this.listQuery.itemId = res[0].itemId
this.listQuery.tpId = res[0].tpId
this.listQuery.identify = res[0].identify this.listQuery.identify = res[0].identify
this.listQuery.instanceId = res[0].identify this.listQuery.instanceId = res[0].identify
// this.fetchChartData()
}); });
//项目接口 itenId
// debugger
// let query = this.listQuery
// itemApi.list(query).then((res) => {
// console.log("sasasassSS----", this.listQuery)
// const { records } = res || {};
// records && records.map((item) => {
// item.value = item.tenantId
// item.label = item.tenantId
// });
// this.selectMonitor[0].children = records
// //初始化tenantId
// this.listQuery.tenantId = records[0].tenantId
// this.listQuery.itemId = records[0].itemId
// });
//线程池接口tpId,itemId,tenantId
// threadPoolApi.list( this.listQuery).then((res) => {
// const { records } = res || {};
// records && records.map((item) => {
// item.value = item.tenantId
// item.label = item.tenantId
// });
// this.selectMonitor[1].children = records
// this.listQuery.tenantId = records[0].tenantId
// this.listQuery.itemId = records[0].itemId
// this.listQuery.tpId = records[0].tpId
// });
//线程池配置
threadPoolApi.info(this.listQuery).then((res) => { threadPoolApi.info(this.listQuery).then((res) => {
this.temp = res; this.temp = res;
this.tableData = [{ this.tableData = [{
@ -329,11 +240,9 @@ export default {
}); });
}, },
//监控数据 fetchChartData(value) {
fetchChartData() { let query = value
let query = this.listQuery monitorApi.active({ ...query }).then(res => {
monitorApi.active(query).then(res => {
console.log("这是监控数据返回值", res)
this.monitor = res this.monitor = res
this.lineChartData = [ this.lineChartData = [
{ {
@ -402,25 +311,23 @@ export default {
}) })
}, },
//更新时间筛选
changeMonitorData() { changeMonitorData() {
console.log('this.timeVqlue:::',this.timeValue)
this.listQuery.startTime = this.timeValue[0] this.listQuery.startTime = this.timeValue[0]
this.listQuery.endTime = this.timeValue[1] this.listQuery.endTime = this.timeValue[1]
this.fetchChartData()
}, },
//返回几天前的毫秒数
getBeforeDate(date = new Date(), days = 7) { getBeforeDate(date = new Date(), days = 7) {
date.setTime(date.getTime() - 3600 * 1000 * days); date.setTime(date.getTime() - 3600 * 1000 * days);
return date; return date;
}, },
getDayStartOrEnd(time,type = "start"){//end 返回毫秒数 getDayStartOrEnd(time, type = "start") {
if(type == "start"){ if (type == "start") {
return new Date(time).setHours(0,0,0,0);//hourse、min、sec、millisec return new Date(time).setHours(0, 0, 0, 0);
}else{ } else {
return new Date(time).setHours(23,59,59,999); return new Date(time).setHours(23, 59, 59, 999);
} }
} }
} }
} }
@ -449,14 +356,18 @@ export default {
font-weight: bolder; font-weight: bolder;
margin: 0; margin: 0;
} }
.info-wrapper::-webkit-scrollbar { .info-wrapper::-webkit-scrollbar {
display: none; /*隐藏滚动条*/ display: none;
/*隐藏滚动条*/
} }
.info-wrapper { .info-wrapper {
grid-row: 1 / 4; grid-row: 1 / 4;
grid-column: 1 / 2; grid-column: 1 / 2;
padding: 20rpx; padding: 20rpx;
overflow-y: scroll; overflow-y: scroll;
.top-card { .top-card {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -464,26 +375,32 @@ export default {
align-items: center; align-items: center;
color: rgba($color: #435f81, $alpha: 0.9); color: rgba($color: #435f81, $alpha: 0.9);
font-weight: 600; font-weight: 600;
.svg-icon { .svg-icon {
width: 60px; width: 60px;
height: 60px; height: 60px;
left: 0; left: 0;
} }
.top-icon { .top-icon {
width: 40px; width: 40px;
} }
} }
.query-monitoring { .query-monitoring {
margin-bottom: 30px; margin-bottom: 30px;
.title { .title {
padding: 0 0 10px 5px; padding: 0 0 10px 5px;
font-weight: 600; font-weight: 600;
color: rgba($color: #435f81, $alpha: 0.9); color: rgba($color: #435f81, $alpha: 0.9);
} }
.el-cascader { .el-cascader {
width: 100%; width: 100%;
} }
} }
.info-card { .info-card {
// background: #435f81; // background: #435f81;
background-color: rgba($color: #435f81, $alpha: 0.9); background-color: rgba($color: #435f81, $alpha: 0.9);
@ -491,27 +408,33 @@ export default {
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
color: #fefefe; color: #fefefe;
font-family: HelveticaNeue-Medium,Helvetica Medium,PingFangSC-Medium,STHeitiSC-Medium,Microsoft YaHei Bold,Arial,sans-serif; font-family: HelveticaNeue-Medium, Helvetica Medium, PingFangSC-Medium, STHeitiSC-Medium, Microsoft YaHei Bold, Arial, sans-serif;
.info-card-title, .data-num {
.info-card-title,
.data-num {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding-bottom: 10px; padding-bottom: 10px;
} }
.num { .num {
font-family: DIDIFD-Regular; font-family: DIDIFD-Regular;
font-size: 40px; font-size: 40px;
} }
.operation-list { .operation-list {
color: darkgray; color: darkgray;
} }
} }
.tp-card { .tp-card {
// background: rgb(237, 237, 237); // background: rgb(237, 237, 237);
border: 1px solid #dfe6ec; border: 1px solid #dfe6ec;
padding: 20px 10px 30px 10px; padding: 20px 10px 30px 10px;
border-radius: 8px; border-radius: 8px;
background-color: rgba($color: #435f81, $alpha: 0.9); background-color: rgba($color: #435f81, $alpha: 0.9);
color: white; color: white;
.tp-item { .tp-item {
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
line-height: 40px; line-height: 40px;
@ -520,6 +443,7 @@ export default {
font-size: 14px; font-size: 14px;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: hidden; overflow: hidden;
.tp-label { .tp-label {
width: 600; width: 600;
} }
@ -532,11 +456,13 @@ export default {
grid-column: 2 / 4; grid-column: 2 / 4;
display: flex; display: flex;
align-items: center; align-items: center;
.demonstration { .demonstration {
margin: 0 10px; margin: 0 10px;
font-weight: 600; font-weight: 600;
color: #3a3b3c; color: #3a3b3c;
} }
.button { .button {
background: rgba($color: #435f81, $alpha: 0.9); background: rgba($color: #435f81, $alpha: 0.9);
color: white; color: white;
@ -556,6 +482,7 @@ export default {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: 24px; gap: 24px;
.inner-chart { .inner-chart {
grid-column: span 1; grid-column: span 1;
grid-row: span 1; grid-row: span 1;

Write Preview
Loading…
Cancel
Save