Feature/console monitor (#1491)

* feat:add thread pool

* fix: monitor

* feat:monitor

* feat:tenant style + thread pool query

* feat:Monitor selection + search boxes for no items

* feat:tenantList

---------

Co-authored-by: 吹泡泡的团子 <baoxinyi_i@didiglobal.com>
pull/1504/head
GRL-bxy 8 months ago committed by GitHub
parent fa206974f4
commit 2922aaf78f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -12,27 +12,29 @@ export default {
computed: {
...mapGetters(['tenantInfo'])
},
mounted() {
async mounted() {
const userName = this.$cookie.get('userName');
user
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'),
index: 0,
})
}
this.$store.dispatch('tenant/setTenantList', resources)
const resourcesRes = resources.map((item, index) => ({
...item,
tenantId: item.resource,
index: index,
}))
this.$store.dispatch('tenant/setTenantList', resourcesRes)
if (!this.tenantInfo.resource) {
this.$store.dispatch('tenant/setTenantInfo', resources[0])
this.$store.dispatch('tenant/setTenantInfo', resourcesRes[0])
console.log("ssss", this.tenantInfo)
}
})

@ -18,12 +18,12 @@
<!-- </el-tooltip>-->
</template>
<el-select class="select-tenant" v-model="tenant.resource" filterable @change="changeTenant">
<el-select class="select-tenant" v-model="tenant.index" filterable @change="changeTenant">
<el-option
v-for="(item, index) in tenantList"
:key="index"
:label="item.resource"
:value="index">
:value="item.index">
</el-option>
</el-select>
<langChange />
@ -65,7 +65,7 @@
action: '',
resource: '',
username: ''
}
},
}
},
components: {
@ -87,7 +87,7 @@
tenantInfo(newVal) {
this.tenant.tenantId = newVal.tenantId
this.tenant.resource = newVal.resource
console.log("ischangLang", newVal)
console.log("ischangLang", newVal, this.tenantList)
}
},
methods: {
@ -96,6 +96,7 @@
},
async logout() {
this.$cookie.delete('userName')
this.$cookie.delete('tenantInfo')
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
},
@ -105,22 +106,32 @@
.getCurrentUser(userName)
.then((response) => {
const { resources } = response;
resources.map((item) => ({
...item,
tenantId: item.resource
}))
console.log("isTenList1", resources, this.tenantList)
if (response.role == 'ROLE_ADMIN') {
resources.unshift({
action: "rw",
resource: this.$t('common.allTenant'),
username: userName,
tenantId: this.$t('common.allTenant'),
index: 0,
})
}
this.$store.dispatch('tenant/setTenantList', resources)
this.$store.dispatch('tenant/setTenantInfo', this.tenantInfo || resources[0])
this.tenant = this.tenantInfo || resources[0]
console.log("isResour", resources[0], this.tenant)
console.log("isTenList1111111", this.$t('common.allTenant'), resources, this.tenantList)
const resourcesRes = resources.map((item, index) => {
let query = {
...item,
tenantId: item.resource,
index: index,
}
console.log("=============", index, query, item)
return query
})
console.log("isTenList22222", resourcesRes, this.tenantList)
this.$store.dispatch('tenant/setTenantList', resourcesRes)
this.tenant = JSON.parse(this.$cookie.get('tenantInfo')) || resourcesRes[0]
this.$store.dispatch('tenant/setTenantInfo', this.tenant || resourcesRes[0])
this.$cookie.set('tenantInfo', JSON.stringify(this.tenant));
console.log("isTenList2", this.tenantList)
})
.catch(() => {});
@ -130,11 +141,13 @@
let tenant = {
tenantId: this.tenantList[index].resource,
resource: this.tenantList[index].resource,
index: this.tenantList[index].index,
current: 1,
desc: true,
size: 10,
}
this.$store.dispatch('tenant/setTenantInfo', tenant)
this.$cookie.set('tenantInfo', JSON.stringify(tenant));
let isAllTenant = tenant.tenantId == i18nConfig.messages.zh.common.allTenant || tenant.tenantId == i18nConfig.messages.en.common.allTenant
tenant.tenantId = isAllTenant ? '' : tenant.tenantId
await jobProjectApi.list(tenant).then((response) => {
@ -199,6 +212,7 @@
width: 150px;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;

@ -11,7 +11,7 @@
:key="item.lang"
:command="item.lang"
>
<span class="dropdown-item-text" :data-active="item.lang === currentLang">{{ item.name }}</span>
<span :data-active="item.lang === currentLang" :class="{chooseItem: item.lang === currentLang}" >{{ item.name }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -53,11 +53,6 @@ export default {
user.getCurrentUser(userName)
.then((response) => {
const { resources } = response;
resources.map((item) => ({
...item,
tenantId: item.resource
}))
//change lang = change global tenantInfo
if (response.role == 'ROLE_ADMIN') {
//tenantInfo
@ -66,18 +61,32 @@ export default {
let alreadyHasAll = resources[0] == i18nConfig.messages.zh.common.allTenant || resources[0] == i18nConfig.messages.en.common.allTenant
if (alreadyHasAll) {
this.$set(resources[0], 'resource', this.$t('common.allTenant'))
this.$store.dispatch('tenant/setTenantList', resources)
const resourcesRes = resources.map((item, index) => ({
...item,
tenantId: item.resource,
index: index,
}))
this.$store.dispatch('tenant/setTenantList', resourcesRes)
if (isAllTenant) {
this.$store.dispatch('tenant/setTenantInfo', resources[0])
}
} else {
resources.unshift({
action: "rw",
resource: this.$t('common.allTenant'),
username: userName,
tenantId: this.$t('common.allTenant'),
index: 0,
})
this.$store.dispatch('tenant/setTenantList', resources)
}
if (isAllTenant) {
this.$store.dispatch('tenant/setTenantInfo', resources[0])
const resourcesRes = resources.map((item, index) => ({
...item,
tenantId: item.resource,
index: index,
}))
this.$store.dispatch('tenant/setTenantList', resourcesRes)
if (isAllTenant) {
this.$store.dispatch('tenant/setTenantInfo', resources[0])
}
}
}
})
@ -93,9 +102,17 @@ export default {
cursor: pointer;
}
}
.dropdown-item-text{
&[data-active=true] {
color: var(--jjext-color-dropdown-text) !important;
}
::v-deep .el-dropdown-menu__item:not(.is-disabled):hover {
background: #f5f7fa;
color: #606266;
}
.el-icon--right {
color: #c0c4cc;
}
.chooseItem {
font-weight: bold;
color: #1890ff;
}
</style>

@ -26,17 +26,26 @@ const actions = {
if (response.role == 'ROLE_ADMIN') {
resources.unshift({
action: "rw",
resource: "所有租户",
username: userName
resource: this.$t('common.allTenant'),
username: userName,
tenantId: this.$t('common.allTenant'),
index: 0,
})
}
commit('SET_TENANT_LIST', resources)
const resourcesRes = resources.map((item, index) => ({
...item,
tenantId: item.resource,
index: index,
}))
console.log("asasxasxas==========", resourcesRes)
commit('SET_TENANT_LIST', resourcesRes)
if (!state.tenantInfo) {
commit('SET_GLOBAL_TENANT', resources[0])
commit('SET_GLOBAL_TENANT', resourcesRes[0])
}
})
.catch(() => {});
},
setTenantList({commit}, log) {
commit('SET_TENANT_LIST', log)
},

@ -584,7 +584,10 @@ export default {
created() {
// this.fetchData()
//
this.initSelect();
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
this.tenantSelectList();
},
methods: {
onInput() {
@ -819,6 +822,7 @@ export default {
this.itemOptions = [];
this.threadPoolOptions = [];
const tenantId = { tenantId: this.listQuery.tenantId, size: this.size };
console.log("XXXXXXXXXXXXXXX", tenantId)
itemApi
.list(tenantId)
.then((response) => {

@ -5,61 +5,64 @@
<svg-icon id="top-icon" icon-class="monitor" />
<div class="top-info">
<div class="label">操作者</div>
<span class="user">{{userName}}</span>
<span class="user">{{ userName }}</span>
</div>
</div>
<div class="query-monitoring">
<div class="title">查询监控</div>
<el-cascader
class="el-cascader"
learable
v-model="selectMonitorValue"
:options="selectMonitor"
:props="{ expandTrigger: 'hover' }"
@change="handleChangeMonitorSelect"></el-cascader>
<el-cascader :props="props" v-model="selectMonitorValue" class="el-cascader" @change="handleChangeMonitorSelect" placeholder="项目/线程池/实例"></el-cascader>
</div>
<div class="info-card">
<div class="info-card-title">{{ selectMonitor[0].label }}数量</div>
<div class="data-num">
<span class="num">
{{ selectMonitor[0].children.length || "_" }}
</span>
<div class="info-card-item">
<div v-if="listQuery.itemId" class="info-card-show">{{ listQuery.itemId }}</div>
<div class="data-num">项目</div>
<div v-if="listQuery.itemId" class="info-card-title">{{ listQuery.itemId }}</div>
</div>
<div class="info-card-item">
<div v-if="listQuery.itemId" class="info-card-show">{{ listQuery.tpId }}</div>
<div class="data-num">线程池</div>
<div v-if="listQuery.itemId" class="info-card-title">{{ listQuery.tpId }}</div>
</div>
<div class="info-card-item">
<div v-if="listQuery.itemId" class="info-card-show">{{ listQuery.identify }}</div>
<div class="data-num">实例</div>
<div v-if="listQuery.itemId" class="info-card-title">{{ listQuery.identify }}</div>
</div>
</div>
<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 class="info-card-show">{{ item.label }}</div>
<div>{{ item.name }}</div>
<div class="tp-label">{{ item.label }}</div>
</div>
</div>
</div>
<div class="search-wrapper">
<div class="demonstration">时间筛选</div>
<el-date-picker
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="timeValue"
@input="changeMonitorData">
</el-date-picker>
</div>
<div class="center-chart-wrapper">
<line-chart title="任务数" :chart-data="lineChartData" :times="times" height="100%" :cus-formatter="true" />
<div class="demonstration">时间筛选</div>
<el-date-picker v-model="timeValue" type="datetimerange" start-placeholder="" end-placeholder=""
value-format="timestamp" :picker-options="pickerOptions">
</el-date-picker>
<el-button class="button" @click="changeMonitorData" v-loading.fullscreen.lock="fullscreenLoading">筛选</el-button>
</div>
<div class="bottom-chart-wraper">
<div class="inner-chart">
<line-chart title="活跃线程数" :chart-data="activeSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="线程数" :chart-data="poolSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="队列元素数" :chart-data="queueSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="拒绝数" :chart-data="rangeRejectCountList" :times="times" height="100%" />
<div class="center-chart-wrapper" v-if="listQuery.identify">
<line-chart title="任务数" :chart-data="lineChartData" :times="times" height="100%" :cus-formatter="true" />
</div>
<div v-else class="center-chart-wrapper bottom-no-wraper">请选择实例</div>
<div class="bottom-chart-wraper" >
<div class="inner-chart">
<line-chart title="活跃线程数" :chart-data="activeSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="线程数" :chart-data="poolSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="队列元素数" :chart-data="queueSizeList" :times="times" height="100%" />
</div>
<div class="inner-chart">
<line-chart title="拒绝数" :chart-data="rangeRejectCountList" :times="times" height="100%" />
</div>
</div>
</div>
</template>
@ -78,76 +81,142 @@ export default {
LineChart,
},
data() {
let that = this;
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node;
setTimeout(() => {
if (level == 0) {
that.userName = that.$cookie.get('userName')
that.listQuery.tenantId = that?.tenantInfo?.tenantId || that.listQuery.tenantId
let isAllTenant = that.listQuery.tenantId == i18nConfig.messages.zh.common.allTenant || that.listQuery.tenantId == i18nConfig.messages.en.common.allTenant
that.listQuery.tenantId = isAllTenant ? '' : that.listQuery.tenantId
//-线-
itemApi.list(that.listQuery).then((itemRes) => {
let itemList = itemRes.records.map((item) => {
return {
...item,
value: item.itemId,
label: item.itemId,
leaf: level >= 2
}
})
resolve(itemList)
})
} else if (level == 1) {
that.listQuery.itemId = node.value
threadPoolApi.list(that.listQuery).then((tpRes) => {
let tpList = tpRes.records.map((tpItem) => {
return {
...tpItem,
value: tpItem.tpId,
label: tpItem.tpId,
leaf: level >= 2
}
})
resolve(tpList)
})
} else if (level == 2) {
that.listQuery.tpId = node.value
let param = [
that.listQuery.itemId,
that.listQuery.tpId
]
instanceApi.list(param).then((instanceRes) => {
let itList = instanceRes.map((itItem) => {
return {
...itItem,
value: itItem.identify,
label: itItem.identify,
leaf: level >= 2
}
});
resolve(itList ? itList : [{value: '暂无实例', label: '暂无实例'}])
});
}
}, 1000);
}
},
isFirstShow: true,
lineChartData: [],
times: [],
timeValue: new Date(),
selectMonitorValue: {
default: [0]
},
selectMonitor: [{
value: 0,
label: '项目',
children: []
}, {
value: 1,
label: '线程池',
children: [],
}, {
value: 2,
label: '实例',
children: [],
}],
activeSizeList: [],
poolSizeList: [],
queueSizeList: [],
rangeRejectCountList: [],
chooseData: {},
timeValue: new Date(),
fullscreenLoading: false,
pickerOptions: {
shortcuts: [{
text: '今天',
text: '30 分钟',
onClick(picker) {
picker.$emit('pick', new Date());
const end = new Date();
const start = that.getBeforeDate(new Date(), 0.5);
that.timeValue = [start, end]
picker.$emit("pick", [start, end]);
}
}, {
text: '昨天',
text: '1 小时',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
const end = new Date();
const start = that.getBeforeDate(new Date(), 1);
picker.$emit("pick", [start, end]);
}
}, {
text: '一周前',
text: '6 小时',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
const end = new Date();
const start = that.getBeforeDate(new Date(), 6);
picker.$emit("pick", [start, end]);
}
}]
}, {
text: '今天',
onClick(picker) {
const end = new Date();
const start = that.getBeforeDate(new Date(), 24);
picker.$emit("pick", [start, end]);
}
}, {
text: '一周内',
onClick(picker) {
const end = new Date();
const start = that.getBeforeDate(new Date(), 24 * 7);
picker.$emit("pick", [start, end]);
}
}],
onPick: ({ maxDate, minDate }) => {
this.timeValue = [maxDate, minDate]
this.choiceDate = minDate.getTime();//
// //
if (maxDate) this.choiceDate = ''
},
disabledDate: time => {
return time.getTime() > this.getDayStartOrEnd(new Date(), "end");
}
},
itemList: [],
selectMonitor: [],
tableData: [{
date: '2016-05-02',
name: '王小虎',
}, {
date: '2016-05-04',
name: '王小虎',
}, {
date: '2016-05-01',
name: '王小虎',
}, {
date: '2016-05-03',
name: '王小虎',
}],
listQuery : {
tableData: [],
listQuery: {
"current": 1,
"size": 10,
"itemId": "dynamic-threadpool-example",
"tpId": "message-produce",
"tenantId": "prescription",
"identify": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662",
"instanceId": "127.0.0.1:8088_93bfe5307a844e07ada13cbfc3f16662"
}
"itemId": "",
"tpId": "",
"tenantId": "",
"identify": "",
"instanceId": "",
startTime:"",
endTime:""
},
rejectCount: 0,
}
},
computed: {
@ -156,110 +225,77 @@ export default {
]),
},
watch: {
tenantInfo(newVal, oldVal) {
this.listQuery.tenantId = newVal.tenantId;
this.fetchData()
listQuery:{
handler(newVal) {
if (!this.isFirstShow) {
this.getSelectMonitor()
}
},
deep: true
},
selectMonitorValue(newVal) {
this.listQuery.identify = newVal[2]
this.listQuery.instanceId = newVal[2]
this.fetchChartData(this.listQuery)
}
},
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]
this.fetchData()
this.fetchChartData()
this.getSelectMonitor()
this.fetchChartData(this.listQuery)
},
methods: {
fetchData() {
// next
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.info( this.listQuery).then((res) => {
this.temp = res;
});
},
//
getSelectMonitor() {
this.selectMonitor = [{
value: 0,
label: '项目',
children: []
}, {
value: 1,
label: '线程池',
children: [],
}, {
value: 2,
label: '实例',
children: [],
}]
// itenId
itemApi.list(this.listQuery).then((res) => {
const { records } = res || {};
records && records.map((item) => {
item.value = item.tenantId
item.label = item.tenantId
});
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) => {
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.current = records[0].current
this.listQuery.tpId = records[0].tpId
});
let param = [
this.listQuery.itemId,
this.listQuery.tpId,
]
//
instanceApi.list(param).then((res) => {
res.map((item) => {
item.value = item.tenantId
item.label = item.tenantId
});
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
});
//线
threadPoolApi.info(this.listQuery).then((res) => {
this.temp = res;
this.tableData = [{
name: '租户',
label: res.tenantId
}, {
name: '线程池',
label: res.tpId
}, {
name: '核心线程',
name: '核心线程数',
label: res.coreSize
}, {
// name: '',
// label: res.itemId
// }, {
name: '最大线程数',
label: res.maxSize
}, {
name: '阻塞队列',
label: this.queueFilter(res.queueType)
}, {
name: '队列容量',
label: res.capacity
}, {
name: '任务完成数',
label: this.completedTaskCount
}, {
name: '拒绝策略',
label: this.rejectedTypeFilter(res.rejectedType)
}, {
name: '拒绝次数',
label: res.rejectedType
label: this.rejectCount
}]
});
},
fetchChartData() {
monitorApi.active( this.listQuery).then(res => {
//
fetchChartData(value) {
let query = value
monitorApi.active({ ...query }).then(res => {
this.monitor = res
this.lineChartData = [
{
@ -287,12 +323,18 @@ export default {
opacity: 0,
}
},]
this.rejectCount = res?.rejectCountList[res.rejectCountList.length - 1]
this.completedTaskCount = res?.completedTaskCountList[res.completedTaskCountList.length - 1]
if (this.tableData.length > 1) {
this.tableData[7].label = res?.rejectCountList[res.rejectCountList.length - 1]
this.tableData[5].label = res?.completedTaskCountList[res.completedTaskCountList.length - 1]
}
this.times = res?.times.map(item => {
const list = item.split(':')
list.pop()
return list.join(':')
})
console.log
this.activeSizeList = [{
name: '活跃线程数',
data: res?.activeSizeList,
@ -314,28 +356,78 @@ export default {
data: res?.rangeRejectCountList,
show: true
}]
this.fullscreenLoading = false
})
},
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.isFirstShow = false
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.instanceId = item.instanceId || this.listQuery.instanceId
this.listQuery.tpId = item.tpId || this.listQuery.tpId
}
})
}
},
changeMonitorData() {
this.fullscreenLoading = true
this.listQuery.startTime = this.timeValue[0]
this.listQuery.endTime = this.timeValue[1]
this.fetchChartData(this.listQuery)
},
getBeforeDate(date = new Date(), days = 7) {
date.setTime(date.getTime() - 3600 * 1000 * days);
return date;
},
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);
}
},
rejectedTypeFilter(type) {
if ('1' == type) {
return 'CallerRunsPolicy';
} else if ('2' == type) {
return 'AbortPolicy';
} else if ('3' == type) {
return 'DiscardPolicy';
} else if ('4' == type) {
return 'DiscardOldestPolicy';
} else if ('5' == type) {
return 'RunsOldestTaskPolicy';
} else if ('6' == type) {
return 'SyncPutQueuePolicy';
} else {
return 'CustomRejectedPolicy_' + type;
}
},
queueFilter(type) {
if ('1' == type) {
return 'ArrayBlockingQueue';
} else if ('2' == type) {
return 'LinkedBlockingQueue';
} else if ('3' == type) {
return 'LinkedBlockingDeque';
} else if ('4' == type) {
return 'SynchronousQueue';
} else if ('5' == type) {
return 'LinkedTransferQueue';
} else if ('6' == type) {
return 'PriorityBlockingQueue';
} else if ('9' == type) {
return 'ResizableLinkedBlockingQueue';
}
},
}
}
</script>
@ -363,14 +455,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;
@ -378,26 +474,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);
@ -405,39 +507,65 @@ 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;
.info-card-show {
display: none;
}
.info-card-item:hover .info-card-show {
display: block;
position: absolute;
left: 30px;
background: #313131;
border-radius: 4px;
padding: 5px 8px 6px 8px;
box-shadow: 1px 1px 5px red($color: #efecec);
z-index: 9999;
}
.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;
display: flex;
justify-content: space-between;
font-size: 14px;
flex-wrap: nowrap;
flex-wrap: wrap;
overflow: hidden;
.tp-label {
width: 600;
}
}
.info-card-show {
display: none;
}
.tp-item:hover .info-card-show {
display: block;
position: absolute;
background: #313131;
border-radius: 4px;
padding: 5px 8px 6px 8px;
box-shadow: 1px 1px 5px red($color: #efecec);
z-index: 9999;
}
}
}
@ -446,11 +574,18 @@ 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;
margin-left: 20px;
}
}
.center-chart-wrapper {
@ -465,11 +600,24 @@ export default {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 24px;
.inner-chart {
grid-column: span 1;
grid-row: span 1;
}
}
.bottom-no-wraper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
color: #818689;
font-family: 'Courier New', Courier, monospace;
}
}
</style>

@ -406,7 +406,7 @@ export default {
created() {
this.fetchData();
//
this.initSelect();
this.tenantSelectList();
},
methods: {
fetchData() {

@ -281,7 +281,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
methods: {
onInput() {

@ -281,7 +281,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
methods: {
onInput() {

@ -281,7 +281,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
methods: {
onInput() {

@ -280,7 +280,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
methods: {
onInput() {

@ -281,7 +281,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
methods: {
onInput() {

@ -280,7 +280,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
methods: {
onInput() {

@ -281,7 +281,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
methods: {
onInput() {

@ -369,7 +369,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
mounted() {
this.isEditDisabled = localStorage.getItem('USER_ROLE') !== 'ROLE_ADMIN';

@ -379,7 +379,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
mounted() {
this.isEditDisabled = localStorage.getItem('USER_ROLE') !== 'ROLE_ADMIN';

@ -379,7 +379,7 @@ export default {
},
created() {
//
this.initSelect();
this.tenantSelectList();
},
mounted() {
this.isEditDisabled = localStorage.getItem('USER_ROLE') !== 'ROLE_ADMIN';

@ -537,7 +537,7 @@ export default {
created() {
this.fetchData();
//
this.initSelect();
this.tenantSelectList();
},
mounted() {
this.isEditDisabled =
@ -757,6 +757,7 @@ export default {
this.threadPoolOptions = [];
const tenantId = { tenantId: this.listQuery.tenantId, size: this.size };
itemApi.list(tenantId).then((response) => {
console.log('--------OOOOOOO', tenantId, response)
const { records = [] } = response;
for (let i = 0; i < records.length; i++) {
this.itemOptions.push({

@ -489,7 +489,7 @@ export default {
},
created() {
this.fetchData();
this.initSelect();
this.tenantSelectList();
},
mounted() {
this.isEditDisabled = localStorage.getItem('USER_ROLE') !== 'ROLE_ADMIN';

Loading…
Cancel
Save