From 2922aaf78f4985d57bd17bb7dd287f164c6497b5 Mon Sep 17 00:00:00 2001 From: GRL-bxy <77558077+GRL-bxy@users.noreply.github.com> Date: Mon, 30 Oct 2023 17:02:00 +0800 Subject: [PATCH] Feature/console monitor (#1491) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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: 吹泡泡的团子 --- threadpool/console/src/App.vue | 18 +- .../console/src/layout/components/Navbar.vue | 38 +- threadpool/console/src/locale/langChange.vue | 47 +- .../console/src/store/modules/tenant.js | 17 +- .../src/views/hippo4j/instance/index.vue | 6 +- .../src/views/hippo4j/monitor/index.vue | 510 +++++++++++------- .../src/views/hippo4j/notify/index.vue | 2 +- .../hippo4j/other/alibaba-dubbo/index.vue | 2 +- .../src/views/hippo4j/other/dubbo/index.vue | 2 +- .../src/views/hippo4j/other/hystrix/index.vue | 2 +- .../hippo4j/other/rabbitmq-stream/index.vue | 2 +- .../views/hippo4j/other/rabbitmq/index.vue | 2 +- .../hippo4j/other/rocketmq-stream/index.vue | 2 +- .../views/hippo4j/other/rocketmq/index.vue | 2 +- .../src/views/hippo4j/server/jetty/index.vue | 2 +- .../src/views/hippo4j/server/tomcat/index.vue | 2 +- .../views/hippo4j/server/undertow/index.vue | 2 +- .../src/views/hippo4j/threadpool/index.vue | 3 +- .../src/views/hippo4j/verify/index.vue | 2 +- 19 files changed, 429 insertions(+), 234 deletions(-) diff --git a/threadpool/console/src/App.vue b/threadpool/console/src/App.vue index d25307a0..0ec05356 100755 --- a/threadpool/console/src/App.vue +++ b/threadpool/console/src/App.vue @@ -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) } }) diff --git a/threadpool/console/src/layout/components/Navbar.vue b/threadpool/console/src/layout/components/Navbar.vue index 086375bd..b116e9d1 100755 --- a/threadpool/console/src/layout/components/Navbar.vue +++ b/threadpool/console/src/layout/components/Navbar.vue @@ -18,12 +18,12 @@ - + + :value="item.index"> @@ -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; diff --git a/threadpool/console/src/locale/langChange.vue b/threadpool/console/src/locale/langChange.vue index 34c50251..a051c092 100644 --- a/threadpool/console/src/locale/langChange.vue +++ b/threadpool/console/src/locale/langChange.vue @@ -11,7 +11,7 @@ :key="item.lang" :command="item.lang" > - {{ item.name }} + {{ item.name }} @@ -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; } diff --git a/threadpool/console/src/store/modules/tenant.js b/threadpool/console/src/store/modules/tenant.js index 574645f2..5170f6df 100644 --- a/threadpool/console/src/store/modules/tenant.js +++ b/threadpool/console/src/store/modules/tenant.js @@ -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) }, diff --git a/threadpool/console/src/views/hippo4j/instance/index.vue b/threadpool/console/src/views/hippo4j/instance/index.vue index 398f7125..456757de 100755 --- a/threadpool/console/src/views/hippo4j/instance/index.vue +++ b/threadpool/console/src/views/hippo4j/instance/index.vue @@ -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) => { diff --git a/threadpool/console/src/views/hippo4j/monitor/index.vue b/threadpool/console/src/views/hippo4j/monitor/index.vue index 526b1d0e..d6d1a42d 100644 --- a/threadpool/console/src/views/hippo4j/monitor/index.vue +++ b/threadpool/console/src/views/hippo4j/monitor/index.vue @@ -5,61 +5,64 @@
操作者：
- {{userName}} + {{ userName }}
查询监控
- +
+
-
{{ selectMonitor[0].label }}数量
-
- - {{ selectMonitor[0].children.length || "_" }} - 个 +
+
{{ listQuery.itemId }}
+
项目：
+
{{ listQuery.itemId }}
+
+
+
{{ listQuery.tpId }}
+
线程池：
+
{{ listQuery.tpId }}
+
+
+
{{ listQuery.identify }}
+
实例：
+
{{ listQuery.identify }}
+
-
+
+
{{ item.label }}
{{ item.name }}
{{ item.label }}
-
时间筛选
- - -
-
- +
时间筛选
+ + + 筛选
-
-
- -
-
- -
-
- -
-
- +
+
+
请选择实例～
+
+
+ +
+
+ +
+
+ +
+
+ +
@@ -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'; + } + }, } } @@ -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; + } } diff --git a/threadpool/console/src/views/hippo4j/notify/index.vue b/threadpool/console/src/views/hippo4j/notify/index.vue index 62eac7ed..9fcf6349 100755 --- a/threadpool/console/src/views/hippo4j/notify/index.vue +++ b/threadpool/console/src/views/hippo4j/notify/index.vue @@ -406,7 +406,7 @@ export default { created() { this.fetchData(); // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, methods: { fetchData() { diff --git a/threadpool/console/src/views/hippo4j/other/alibaba-dubbo/index.vue b/threadpool/console/src/views/hippo4j/other/alibaba-dubbo/index.vue index 89ba23ec..96152fe8 100755 --- a/threadpool/console/src/views/hippo4j/other/alibaba-dubbo/index.vue +++ b/threadpool/console/src/views/hippo4j/other/alibaba-dubbo/index.vue @@ -281,7 +281,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, methods: { onInput() { diff --git a/threadpool/console/src/views/hippo4j/other/dubbo/index.vue b/threadpool/console/src/views/hippo4j/other/dubbo/index.vue index 002e7d11..44cccf71 100755 --- a/threadpool/console/src/views/hippo4j/other/dubbo/index.vue +++ b/threadpool/console/src/views/hippo4j/other/dubbo/index.vue @@ -281,7 +281,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, methods: { onInput() { diff --git a/threadpool/console/src/views/hippo4j/other/hystrix/index.vue b/threadpool/console/src/views/hippo4j/other/hystrix/index.vue index 9a62d62a..5b56e00f 100755 --- a/threadpool/console/src/views/hippo4j/other/hystrix/index.vue +++ b/threadpool/console/src/views/hippo4j/other/hystrix/index.vue @@ -281,7 +281,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, methods: { onInput() { diff --git a/threadpool/console/src/views/hippo4j/other/rabbitmq-stream/index.vue b/threadpool/console/src/views/hippo4j/other/rabbitmq-stream/index.vue index 009bfcf9..1d73e078 100755 --- a/threadpool/console/src/views/hippo4j/other/rabbitmq-stream/index.vue +++ b/threadpool/console/src/views/hippo4j/other/rabbitmq-stream/index.vue @@ -280,7 +280,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, methods: { onInput() { diff --git a/threadpool/console/src/views/hippo4j/other/rabbitmq/index.vue b/threadpool/console/src/views/hippo4j/other/rabbitmq/index.vue index 93063672..480e6009 100755 --- a/threadpool/console/src/views/hippo4j/other/rabbitmq/index.vue +++ b/threadpool/console/src/views/hippo4j/other/rabbitmq/index.vue @@ -281,7 +281,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, methods: { onInput() { diff --git a/threadpool/console/src/views/hippo4j/other/rocketmq-stream/index.vue b/threadpool/console/src/views/hippo4j/other/rocketmq-stream/index.vue index a96afac7..111fd261 100755 --- a/threadpool/console/src/views/hippo4j/other/rocketmq-stream/index.vue +++ b/threadpool/console/src/views/hippo4j/other/rocketmq-stream/index.vue @@ -280,7 +280,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, methods: { onInput() { diff --git a/threadpool/console/src/views/hippo4j/other/rocketmq/index.vue b/threadpool/console/src/views/hippo4j/other/rocketmq/index.vue index 693c4917..85b9911a 100755 --- a/threadpool/console/src/views/hippo4j/other/rocketmq/index.vue +++ b/threadpool/console/src/views/hippo4j/other/rocketmq/index.vue @@ -281,7 +281,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, methods: { onInput() { diff --git a/threadpool/console/src/views/hippo4j/server/jetty/index.vue b/threadpool/console/src/views/hippo4j/server/jetty/index.vue index 18b6b1bf..315f0816 100755 --- a/threadpool/console/src/views/hippo4j/server/jetty/index.vue +++ b/threadpool/console/src/views/hippo4j/server/jetty/index.vue @@ -369,7 +369,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, mounted() { this.isEditDisabled = localStorage.getItem('USER_ROLE') !== 'ROLE_ADMIN'; diff --git a/threadpool/console/src/views/hippo4j/server/tomcat/index.vue b/threadpool/console/src/views/hippo4j/server/tomcat/index.vue index b1de42ea..4781959d 100755 --- a/threadpool/console/src/views/hippo4j/server/tomcat/index.vue +++ b/threadpool/console/src/views/hippo4j/server/tomcat/index.vue @@ -379,7 +379,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, mounted() { this.isEditDisabled = localStorage.getItem('USER_ROLE') !== 'ROLE_ADMIN'; diff --git a/threadpool/console/src/views/hippo4j/server/undertow/index.vue b/threadpool/console/src/views/hippo4j/server/undertow/index.vue index 9b69a5a8..486411a6 100755 --- a/threadpool/console/src/views/hippo4j/server/undertow/index.vue +++ b/threadpool/console/src/views/hippo4j/server/undertow/index.vue @@ -379,7 +379,7 @@ export default { }, created() { // 初始化租户、项目 - this.initSelect(); + this.tenantSelectList(); }, mounted() { this.isEditDisabled = localStorage.getItem('USER_ROLE') !== 'ROLE_ADMIN'; diff --git a/threadpool/console/src/views/hippo4j/threadpool/index.vue b/threadpool/console/src/views/hippo4j/threadpool/index.vue index f5c70c22..a832b389 100755 --- a/threadpool/console/src/views/hippo4j/threadpool/index.vue +++ b/threadpool/console/src/views/hippo4j/threadpool/index.vue @@ -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({ diff --git a/threadpool/console/src/views/hippo4j/verify/index.vue b/threadpool/console/src/views/hippo4j/verify/index.vue index 8122d50b..db183093 100644 --- a/threadpool/console/src/views/hippo4j/verify/index.vue +++ b/threadpool/console/src/views/hippo4j/verify/index.vue @@ -489,7 +489,7 @@ export default { }, created() { this.fetchData(); - this.initSelect(); + this.tenantSelectList(); }, mounted() { this.isEditDisabled = localStorage.getItem('USER_ROLE') !== 'ROLE_ADMIN';