风险管理界面修改

src/api/alarm/record.js

@@ -59,6 +59,13 @@ export function getBizObj(query) {
         method: 'get',
         params: query
     })
+}// 业务类型统计
+export function getMetrics(query) {
+    return request({
+        url: "/alarm/record/list/getMetrics",
+        method: 'get',
+        params: query
+    })
 }
 
 // 应用组件统计

src/views/alarm/record/bizSort.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
@@ -17,49 +17,40 @@
             end-placeholder="结束日期"
         ></el-date-picker>
       </el-form-item>
-<!--      <el-form-item label="" style="width: 208px;margin-right:10px">-->
-<!--        <el-select v-model="queryParams.objType" placeholder="请选择业务类型" clearable style="width: 100%">-->
-<!--          <el-option-->
-<!--              v-for="dict in biz_type"-->
-<!--              :key="dict.value"-->
-<!--              :label="dict.label"-->
-<!--              :value="dict.value"-->
-<!--          ></el-option>-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-card>
-      <div ref="chartSort" style="height: 600px;"></div>
-    </el-card>
-    <!--    <el-table v-loading="loading" border :data="recordList">-->
-    <!--      <el-table-column label="告警ID" align="center" prop="objId" width="80"/>-->
-    <!--      <el-table-column label="告警对象/应用组件" align="center" prop="objName"/>-->
-    <!--      <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="chartSort" 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="recordList" 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="name"/>
+            <el-table-column label="告警数量" align="center" prop="num" width="120"/>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup name="Record">
-import {getBizSort} from "@/api/alarm/record";
+import {getBizSort, getMetrics} from "@/api/alarm/record";
 import {useRouter} from "vue-router";
 import * as echarts from "echarts";
+import moment from "moment/moment.js";
 
 const {proxy} = getCurrentInstance();
 const {alarm_level} = proxy.useDict('alarm_level');
@@ -70,6 +61,7 @@ const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const total = ref(0);
+const title = ref("");
 const daterangeAlarmTime = ref([]);
 const router = useRouter();
 const chartSort = ref();
@@ -78,7 +70,8 @@ const data = reactive({
   form: {},
   queryParams: {
     start: null,
-    end: null
+    end: null,
+    objId:null
   },
 });
 
@@ -93,11 +86,14 @@ function initChart(res) {
   var ydata = [];
   var salvProValue = [];
   for (const i in res.data) {
-    let obj=res.data[i]
+    let obj = res.data[i]
     ydata.push(obj.objName);
-    salvProValue.push({id:i,value:obj.num});
+    salvProValue.push({id: obj.objId, value: obj.num});
+    if (i == 0) {
+      detail(obj.objId, obj.objName);
+    }
   }
-  let colorList = ['#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093','#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093'];
+  let colorList = ['#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093', '#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093'];
   let option = {
     backgroundColor: '#fff',
     grid: {
@@ -283,11 +279,33 @@ function initChart(res) {
 
   myChart.setOption(option)
   myChart.on("click", function (param) {
-    console.log(param)
+    detail(param.data.id, param.name);
     // 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 detail(objId, name) {
+  open.value = true;
+  title.value = "[" + name + "]指标风险排名";
+  loading.value = true;
+  queryParams.value.objId = objId;
+  queryParams.value.params = {};
+  if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
+    queryParams.value.start = daterangeAlarmTime.value[0];
+    queryParams.value.end = daterangeAlarmTime.value[1];
+  }
+  getMetrics(queryParams.value).then(response => {
+    loading.value = false;
+    recordList.value = response.data;
+  });
+}
+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 getList() {
   loading.value = true;

src/views/alarm/record/bizType.vue

@@ -34,11 +34,24 @@
         </el-card>
       </el-col>
     </el-row>
+
+    <!-- 添加或修改应用程序管理对话框 -->
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
+      <el-table v-loading="loading" :data="recordList" border style="height:600px;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="name"/>
+        <el-table-column label="告警数量" align="center" prop="num" width="120"/>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="Record">
-import {getBizType,getBizObj} from "@/api/alarm/record";
+import {getBizObj, getBizType, getMetrics} from "@/api/alarm/record";
 import {useRouter} from "vue-router";
 import * as echarts from 'echarts'
 import moment from 'moment'
@@ -50,6 +63,7 @@ const {biz_type} = proxy.useDict('biz_type');
 const recordList = ref([]);
 const loading = ref(true);
 const showSearch = ref(true);
+const open = ref(false);
 const total = ref(0);
 const title = ref("");
 const chartType = ref();
@@ -62,7 +76,8 @@ const data = reactive({
   queryParams: {
     start: null,
     end: null,
-    type:null
+    type: null,
+    objId: null
   },
 });
 
@@ -80,9 +95,9 @@ function initChart(res) {
   for (const i in res.data) {
     let obj = res.data[i]
     ydata.push(obj.name);
-    salvProValue.push({id:obj.id,value:obj.num});
+    salvProValue.push({id: obj.id, value: obj.num});
     if (i == 0) {
-      rightData(obj.id,obj.name);
+      rightData(obj.id, obj.name);
     }
   }
   let option = {
@@ -274,12 +289,13 @@ function initChart(res) {
 
   myChart.setOption(option);
   myChart.on("click", function (param) {
-    rightData(param.data.id,param.name);
+    rightData(param.data.id, param.name);
     // 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 initChartRight(res,name) {
+
+function initChartRight(res, name) {
   const myChart = echarts.init(chartRightType.value);
   let colorList = ['#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093', '#fe8019', '#fec429', '#4a90e2', '#9095a7', '#4cb051', '#ec0019', '#dcb093'];
   var ydata = [];
@@ -287,12 +303,12 @@ function initChartRight(res,name) {
   for (const i in res.data) {
     let obj = res.data[i]
     ydata.push(obj.name);
-    salvProValue.push({id:obj.id,value:obj.num});
+    salvProValue.push({id: obj.id, value: obj.num});
   }
   let option = {
     title: {
       show: true,
-      text: name+' 业务组件统计',
+      text: name + ' 业务组件统计',
       textStyle: {
         fontFamily: 'PingFangSC-Regular, PingFang SC',
         align: 'center',
@@ -478,18 +494,18 @@ function initChartRight(res,name) {
 
   myChart.setOption(option);
   myChart.on("click", function (param) {
-    console.log(param)
+    detail(param.data.id, param.name);
     // 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 rightData(type,name){
-  queryParams.value.type=type;
+function rightData(type, name) {
+  queryParams.value.type = type;
   getBizObj(queryParams.value).then(response => {
     loading.value = false;
-    initChartRight(response,name);
+    initChartRight(response, name);
   });
 }
 
@@ -507,6 +523,22 @@ function getList() {
   });
 }
 
+function detail(objId, name) {
+  open.value = true;
+  title.value = "[" + name + "]指标风险排名";
+  loading.value = true;
+  queryParams.value.objId = objId;
+  queryParams.value.params = {};
+  if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
+    queryParams.value.start = daterangeAlarmTime.value[0];
+    queryParams.value.end = daterangeAlarmTime.value[1];
+  }
+  getMetrics(queryParams.value).then(response => {
+    loading.value = false;
+    recordList.value = response.data;
+  });
+}
+
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;