风险管理-->系统压力排行搞定

src/api/alarm/record.js

@@ -52,6 +52,7 @@ export function getBizType(query) {
         params: query
     })
 }
+
 // 业务类型统计
 export function getBizObj(query) {
     return request({
@@ -85,6 +86,25 @@ export function getBizAccess(query) {
         params: query
     })
 }
+
+// 组件压力排名
+export function getObjAccess(query) {
+    return request({
+        url: "/alarm/record/list/objAccess",
+        method: 'get',
+        params: query
+    })
+}
+
+// 组件告警数量排名
+export function getObjAlarm(query) {
+    return request({
+        url: "/alarm/record/list/objAlarm",
+        method: 'get',
+        params: query
+    })
+}
+
 // 系统压力排名
 export function getLevelSort(query) {
     return request({

src/views/alarm/record/bizAccess.vue

@@ -2,10 +2,10 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0">
       <el-form-item>
-        <el-button type="primary" plain>今天</el-button>
-        <el-button type="primary" plain>3天</el-button>
-        <el-button type="primary" plain>7天</el-button>
-        <el-button type="primary" plain>1月</el-button>
+        <el-button type="primary" plain @click="timeSelect(0)">今天</el-button>
+        <el-button type="primary" plain @click="timeSelect(3)">3天</el-button>
+        <el-button type="primary" plain @click="timeSelect(7)">7天</el-button>
+        <el-button type="primary" plain @click="timeSelect(30)">1月</el-button>
       </el-form-item>
       <el-form-item label="" style="width: 308px;margin-right:10px">
         <el-date-picker
@@ -22,28 +22,38 @@
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-card>
-      <div ref="chartAccess" style="height: 600px;"></div>
-    </el-card>
-    <!--    <el-table v-loading="loading" :data="recordList" border>-->
-    <!--      <el-table-column label="告警ID" align="center" prop="modelId" width="80"/>-->
-    <!--      <el-table-column label="业务模型" align="center" prop="modelName"/>-->
-    <!--      <el-table-column label="最近1小时系统压力值" align="center" prop="access"/>-->
-    <!--      <el-table-column label="告警数量" align="center" prop="num" />-->
-    <!--      <el-table-column label="操作" align="center" prop="alarmTime" width="180">-->
-    <!--        <template #default="scope">-->
-    <!--          <el-button type="text" plain icon="Position" @click="handleDetails(scope.row)">明细</el-button>-->
-    <!--        </template>-->
-    <!--      </el-table-column>-->
-    <!--    </el-table>-->
-
-    <!--    <pagination-->
-    <!--        v-show="total>0"-->
-    <!--        :total="total"-->
-    <!--        v-model:page="queryParams.pageNum"-->
-    <!--        v-model:limit="queryParams.pageSize"-->
-    <!--        @pagination="getList"-->
-    <!--    />-->
+    <el-row>
+      <el-col :span="12">
+        <el-card>
+          <div ref="chartAccess" style="height: 600px;"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <template #header>
+            <Tickets style="width: 1em; height: 1em; vertical-align: middle;"/>
+            <span style="vertical-align: middle;">{{ title }}</span></template>
+          <el-table v-loading="loading" :data="leftList" v-show="sl" border style="height:555px;overflow-y: auto;">
+            <el-table-column label="序号" align="center" width="120">
+              <template #default="scope">
+                <span>{{ scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="组件名称" align="left" prop="OBJ_NAME"/>
+            <el-table-column label="系统压力值" align="center" prop="TIMES" width="120"/>
+          </el-table>
+          <el-table v-loading="loading" :data="rightList" v-show="sr" border style="height:555px;overflow-y: auto;">
+            <el-table-column label="序号" align="center" width="120">
+              <template #default="scope">
+                <span>{{ scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="组件名称" align="left" prop="objName"/>
+            <el-table-column label="告警数量" align="center" prop="num" width="120"/>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -51,12 +61,17 @@
 import {getBizAccess} from "@/api/alarm/record";
 import {useRouter} from "vue-router";
 import * as echarts from "echarts";
+import moment from "moment";
+import {getObjAccess, getObjAlarm} from "../../../api/alarm/record.js";
 
 const {proxy} = getCurrentInstance();
 const {alarm_level} = proxy.useDict('alarm_level');
 
-const recordList = ref([]);
+const leftList = ref([]);
+const rightList = ref([]);
 const open = ref(false);
+const sl = ref(true);
+const sr = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
@@ -73,6 +88,7 @@ const data = reactive({
   queryParams: {
     start: null,
     end: null,
+    modeId: null
   },
 });
 
@@ -94,8 +110,8 @@ function initChart(res) {
   for (let i in res.data) {
     let obj = res.data[i];
     datas.push(obj.modelName);
-    legendData1.push(obj.access);
-    legendData2.push(obj.num);
+    legendData1.push({id:obj.modelId,value:obj.access});
+    legendData2.push({id:obj.modelId,value:obj.num});
     if (obj.access > xMax1) {
       xMax1 = obj.access;
     }
@@ -103,7 +119,7 @@ function initChart(res) {
       xMax2 = obj.num;
     }
   }
-  let dataheng = [xMax1+2, xMax1+2, xMax1+2, xMax1+2, xMax1+2];
+  let dataheng = [xMax1 + 2, xMax1 + 2, xMax1 + 2, xMax1 + 2, xMax1 + 2];
   let option = {
     backgroundColor: '#fff',
     tooltip: {
@@ -134,7 +150,7 @@ function initChart(res) {
       },
       {
         left: '74%',
-        right: '0%',
+        right: '10%',
         top: 0,
         bottom: '0%',
         containLabel: true,
@@ -363,6 +379,50 @@ function initChart(res) {
   };
   // 3.配置项和数据给实例化对象
   myChart.setOption(option);
+  myChart.on("click", function (param) {
+    if (param.seriesIndex == 0) {
+      dl(param.data.id,param.name);
+    } else {
+      dr(param.data.id,param.name);
+    }
+    console.log(param);
+    // console.error(param,param.data.id,param.data.value,param.name);
+    // let url = '/zabbix/zabbix.php?action=map.view&sysmapid=2&kiosk=1&line';
+  });
+}
+
+function dl(modelId, name) {
+  title.value = "[" + name + "] 组件压力排行";
+  sl.value=true;
+  sr.value=false;
+  queryParams.value.modelId = modelId;
+  queryParams.value.params = {};
+  if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
+    queryParams.value.start = daterangeAlarmTime.value[0];
+    queryParams.value.end = daterangeAlarmTime.value[1];
+  }
+  getObjAccess(queryParams.value).then(response => {
+    loading.value = false;
+    leftList.value = response.data;
+  });
+
+}
+
+function dr(modelId, name){
+  title.value = "[" + name + "] 组件告警数量排行";
+  sl.value=false;
+  sr.value=true;
+  queryParams.value.modelId = modelId;
+  queryParams.value.params = {};
+  if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
+    queryParams.value.start = daterangeAlarmTime.value[0];
+    queryParams.value.end = daterangeAlarmTime.value[1];
+  }
+  getObjAlarm(queryParams.value).then(response => {
+    loading.value = false;
+    rightList.value = response.data;
+  });
+
 }
 
 /** 查询告警记录列表 */
@@ -388,6 +448,13 @@ function handleQuery() {
   getList();
 }
 
+function timeSelect(v) {
+  let end = new Date();
+  let start = new Date().setDate(end.getDate() - v);
+  daterangeAlarmTime.value[0] = moment(start).format('YYYY-MM-DD');
+  daterangeAlarmTime.value[1] = moment(end).format('YYYY-MM-DD');
+}
+
 /** 重置按钮操作 */
 function resetQuery() {
   daterangeAlarmTime.value = [];