feat：monitor

threadpool/console/src/views/hippo4j/monitor/index.vue

@@ -5,21 +5,16 @@
         <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 v-model="selectMonitorValue" class="el-cascader" learable :options="selectMonitor"
+          :props="{ expandTrigger: 'hover' }" @change="handleChangeMonitorSelect"></el-cascader>
       </div>
       <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">
           <span class="num">
             {{ selectMonitor[0].children.length || "_" }}
@@ -27,23 +22,18 @@
         </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>{{ 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="timestamp"
-          v-model="timeValue"
-          :picker-options="pickerOptions">
-        </el-date-picker>
-        <el-button class="button" @click="changeMonitorData">筛选</el-button>
+      <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">筛选</el-button>
     </div>
     <div class="center-chart-wrapper">
       <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 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;