diff --git a/threadpool/console/src/views/hippo4j/monitor/index.vue b/threadpool/console/src/views/hippo4j/monitor/index.vue
index 8bd8920d..595171c7 100644
--- a/threadpool/console/src/views/hippo4j/monitor/index.vue
+++ b/threadpool/console/src/views/hippo4j/monitor/index.vue
@@ -5,21 +5,16 @@
操作者：
-
{{userName}}
+
{{ userName }}
-
{{ selectMonitor[0].label }}数量
+
{{ selectMonitor[0].label }}数量
{{ selectMonitor[0].children.length || "_" }}
@@ -27,23 +22,18 @@
-
+
{{ item.name }}
{{ item.label }}
-
时间筛选
-
-
-
筛选
+
时间筛选
+
+
+
筛选
@@ -68,9 +58,6 @@
import * as threadPoolApi from '@/api/hippo4j-threadPool';
import * as monitorApi from '@/api/hippo4j-monitor';
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 { i18nConfig } from '@/locale/config'
import LineChart from './components/LineChart.vue';
@@ -103,21 +90,21 @@ export default {
that.timeValue = [start, end]
picker.$emit("pick", [start, end]);
}
- },{
+ }, {
text: '1 小时',
onClick(picker) {
const end = new Date();
const start = that.getBeforeDate(new Date(), 1);
picker.$emit("pick", [start, end]);
}
- },{
+ }, {
text: '6 小时',
onClick(picker) {
const end = new Date();
const start = that.getBeforeDate(new Date(), 6);
picker.$emit("pick", [start, end]);
}
- },{
+ }, {
text: '今天',
onClick(picker) {
const end = new Date();
@@ -128,14 +115,14 @@ export default {
text: '昨天',
onClick(picker) {
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]);
}
}, {
text: '一周内',
onClick(picker) {
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]);
}
}],
@@ -146,24 +133,21 @@ export default {
if (maxDate) this.choiceDate = ''
},
disabledDate: time => {
- return time.getTime() > this.getDayStartOrEnd(new Date(),"end");
+ return time.getTime() > this.getDayStartOrEnd(new Date(), "end");
}
},
selectMonitor: [],
tableData: [],
- listQuery : {
+ listQuery: {
"current": 1,
"size": 10,
- // "itemId": "",
- // "tpId": "",
- // "tenantId": "",
- // "identify": "",
- // "instanceId": "",
- "identify": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662",
- "itemId": "dynamic-threadpool-example",
- "tpId": "message-produce",
- "tenantId": "prescription",
- "instanceId": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662"
+ "itemId": "",
+ "tpId": "",
+ "tenantId": "",
+ "identify": "",
+ "instanceId": "",
+ startTime:"",
+ endTime:""
}
}
},
@@ -173,132 +157,59 @@ export default {
]),
},
watch: {
- tenantInfo(newVal, oldVal) {
- this.listQuery.tenantId = newVal.tenantId;
- this.fetchData()
- this.fetchChartData()
+ listQuery:{
+ handler(newVal) {
+ this.fetchChartData(newVal)
+ },
+ deep: true
}
+
},
- async mounted() {
+ created() {
const end = new Date().getTime();
const start = this.getBeforeDate(new Date(), 0.5).getTime()
this.timeValue = [start, end]
this.listQuery.startTime = this.timeValue[0]
this.listQuery.endTime = this.timeValue[1]
- await this.getTenantList()
- await this.fetchData()
+ this.fetchData()
+
},
methods: {
- async fetchData() {
+ fetchData() {
// debugger
this.userName = this.$cookie.get('userName')
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
this.listQuery.tenantId = isAllTenant ? '' : this.listQuery.tenantId
threadPoolApi.list(this.listQuery).then((res) => {
- console.log("获取itemId， tpId", res)
this.listQuery.itemId = res.records[0].itemId
this.listQuery.tpId = res.records[0].tpId
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() {
+ getSelectMonitor(itemId,tpId) {
this.selectMonitor = [{
value: 0,
label: '实例',
children: [],
- // },{
- // value: 0,
- // label: '项目',
- // children: []
- // }, {
- // value: 1,
- // label: '线程池',
- // children: [],
- }, ]
+ },]
let param = [
- this.listQuery.itemId,
- this.listQuery.tpId,
+ itemId,
+ tpId
]
- //实例接口
instanceApi.list(param).then((res) => {
res.map((item) => {
item.value = item.identify
item.label = item.identify
});
this.selectMonitor[0].children = res
- 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.selectMonitorValue = [0, res[0].identify]
this.listQuery.identify = 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) => {
this.temp = res;
this.tableData = [{
@@ -329,11 +240,9 @@ export default {
});
},
- //监控数据
- fetchChartData() {
- let query = this.listQuery
- monitorApi.active(query).then(res => {
- console.log("这是监控数据返回值", res)
+ fetchChartData(value) {
+ let query = value
+ monitorApi.active({ ...query }).then(res => {
this.monitor = res
this.lineChartData = [
{
@@ -402,25 +311,23 @@ export default {
})
},
- //更新时间筛选
changeMonitorData() {
+ console.log('this.timeVqlue:::',this.timeValue)
this.listQuery.startTime = this.timeValue[0]
this.listQuery.endTime = this.timeValue[1]
- this.fetchChartData()
},
- //返回几天前的毫秒数
getBeforeDate(date = new Date(), days = 7) {
- date.setTime(date.getTime() - 3600 * 1000 * days);
- return date;
+ date.setTime(date.getTime() - 3600 * 1000 * days);
+ return date;
},
- getDayStartOrEnd(time,type = "start"){//end 返回毫秒数
- if(type == "start"){
- return new Date(time).setHours(0,0,0,0);//hourse、min、sec、millisec
- }else{
- return new Date(time).setHours(23,59,59,999);
- }
+ getDayStartOrEnd(time, type = "start") {
+ if (type == "start") {
+ return new Date(time).setHours(0, 0, 0, 0);
+ } else {
+ return new Date(time).setHours(23, 59, 59, 999);
+ }
}
}
}
@@ -449,14 +356,18 @@ export default {
font-weight: bolder;
margin: 0;
}
+
.info-wrapper::-webkit-scrollbar {
- display: none; /*隐藏滚动条*/
+ 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;
@@ -464,26 +375,32 @@ export default {
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);
@@ -491,27 +408,33 @@ export default {
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-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;
+ 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;
@@ -520,6 +443,7 @@ export default {
font-size: 14px;
flex-wrap: nowrap;
overflow: hidden;
+
.tp-label {
width: 600;
}
@@ -532,11 +456,13 @@ export default {
grid-column: 2 / 4;
display: flex;
align-items: center;
+
.demonstration {
margin: 0 10px;
font-weight: 600;
color: #3a3b3c;
}
+
.button {
background: rgba($color: #435f81, $alpha: 0.9);
color: white;
@@ -556,6 +482,7 @@ export default {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 24px;
+
.inner-chart {
grid-column: span 1;
grid-row: span 1;