配置修改

src/api/hl/bm.js

@@ -75,6 +75,14 @@ export function getCheckModel(modelId) {
     })
 }
 
+// 导入分类
+export function impClass(modelId) {
+    return request({
+        url: '/hl/bm/imp/' + modelId,
+        method: 'get'
+    })
+}
+
 // 健康度配置
 export function getBmConfig(modelId){
     return request({

src/views/alarm/record/bizAccess.vue

@@ -48,24 +48,60 @@
             </template>
           </el-table-column>
           <el-table-column label="组件名称" align="left" prop="objName"/>
-          <el-table-column label="告警数量" align="center" prop="num" width="120"/>
+          <el-table-column label="告警数量" align="center" prop="num" width="120">
+          <template #default="scope">
+            <el-button link type="primary" @click="msDetail(scope.row)">{{ scope.row.num }}</el-button>
+          </template>
+          </el-table-column>
         </el-table>
         <div ref="asLine" v-show="axx" style="height: 400px;padding-top: 20px;"></div>
       </el-col>
     </el-row>
+
+    <!-- 添加或修改应用程序管理对话框 -->
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
+      <div ref="alarmMs" style="height: 250px;"></div>
+      <el-table v-loading="loading" :data="msList" border style="height:500px;overflow-y: auto;">
+        <!--          <el-table-column label="风险对象" align="left" prop="objName"/>-->
+        <!--          <el-table-column label="风险指标" align="center" prop="metricsName"/>-->
+        <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="center" prop="metricsName"/>
+        <el-table-column label="风险级别" align="center" prop="alarmLevel">
+          <template #default="scope">
+            <dict-tag :options="alarm_level" :value="scope.row.alarmLevel"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="风险状态" align="center" prop="alarmType">
+          <template #default="scope">
+            <dict-tag :options="alarm_type" :value="scope.row.alarmType"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="风险值" align="center" prop="alarmValue" :formatter="rounding"/>
+        <el-table-column label="事件时间" align="center" prop="alarmTime" width="220">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {h}:{mi}:{s}') }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="Record">
-import {getBizAccess} from "@/api/alarm/record";
-import {useRouter,useRoute} from "vue-router";
+import {calcMs,getBizAccess} from "@/api/alarm/record";
+import {useRoute, 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 {biz_type} = proxy.useDict('biz_type');
+const {alarm_type} = proxy.useDict('alarm_type');
 const leftList = ref([]);
 const rightList = ref([]);
 const open = ref(false);
@@ -74,6 +110,7 @@ const axx = ref(true);
 const sr = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
+const msList = ref([]);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
@@ -84,6 +121,7 @@ const router = useRouter();
 const route = useRoute();
 const chartAccess = ref();
 const asLine = ref();
+const alarmMs = ref();
 
 const data = reactive({
   form: {},
@@ -97,7 +135,24 @@ const data = reactive({
 function handleDetails(row) {
   console.log(row, router)
 }
+function msDetail(row) {
+  open.value = true;
+  title.value = "[" + row.objName + "]详情";
+  let msParams = {
+    objId: row.objId,
+    params: {}
+  };
+  if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
+    msParams.params["beginAlarmTime"] = daterangeAlarmTime.value[0];
+    msParams.params["endAlarmTime"] = daterangeAlarmTime.value[1];
+  }
 
+  console.error(msParams)
+  calcMs(msParams).then(response => {
+    initMs(response.data.hour);
+    msList.value = response.data.detail;
+  });
+}
 const {queryParams, form} = toRefs(data);
 
 function initChart(res) {
@@ -150,11 +205,11 @@ function initChart(res) {
         top: 0,
         left: '20%',
         bottom: '0%',
-        width: '50%',
+        width: '40%',
         show: false
       },
       {
-        left: '74%',
+        left: '64%',
         right: '10%',
         top: 0,
         bottom: '0%',
@@ -297,7 +352,7 @@ function initChart(res) {
     ],
     series: [{
       type: 'bar',
-      name: '系统压力值',
+      name: '系统压力值（次）',
       stack: '2',
       barWidth: 20,
       z: 10,
@@ -352,7 +407,7 @@ function initChart(res) {
         xAxisIndex: 2,
         yAxisIndex: 2,
         type: 'bar',
-        name: '告警数量',
+        name: '告警数量（次）',
         stack: '3',
         barWidth: 30,
         barCategoryGap: 15,
@@ -366,16 +421,15 @@ function initChart(res) {
         },
         // 数字
         label: {
-          show: true,
-          position: 'inside',
-          right: 0,
-          color: '#fff',
-          formatter: function (params) {
-            if (params.value == 0) {
-              return '';
-            } else {
-              return params.value;
-            }
+          normal: {
+            color: '#000',
+            show: true,
+            position: 'right',
+            distance: 4,
+            textStyle: {
+              fontSize: 16,
+            },
+            formatter: '{c}',
           },
         },
         data: legendData2,
@@ -396,6 +450,132 @@ function initChart(res) {
   });
 }
 
+function initMs(res) {
+  let myChart = echarts.init(alarmMs.value);
+  let yd = [];
+  let xd = [];
+  for (let i = 0; i < res.length; i++) {
+    xd.push(res[i].hour);
+    yd.push(res[i].num);
+  }
+  let ss = [];
+  let xx = {
+    // name: xd,
+    type: 'line',
+    data: yd,
+    symbolSize: 1,
+    symbol: 'circle',
+    smooth: true,
+    showSymbol: false,
+  }
+  ss.push(xx);
+  let x_data = xd;
+  let option = {
+    backgroundColor: '#FFFFFF',
+    dataZoom: {
+      type: 'inside', // 内置型数据区域缩放组件
+      start: 0, // 默认为0，表示从头开始
+      end: 100 // 默认为100，表示直到末尾
+    },
+    title: {
+      show: true,
+      text: '告警趋势',
+      // textStyle: {
+      //   fontFamily: 'PingFangSC-Regular, PingFang SC',
+      //   fontSize: 16,
+      //   fontWeight: 600,
+      //   color: '#848E98'
+      // },
+      left: 'left',
+      // top: '3%'
+    },
+    legend: {
+      icon: 'rect',
+      top: '3%',
+      right: '10%',
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 20,
+      textStyle: {
+        fontFamily: 'PingFangSC-Regular, PingFang SC',
+        color: '#848E98'
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        label: {
+          show: true,
+          backgroundColor: '#fff',
+          color: '#556677',
+          borderColor: 'rgba(0,0,0,0)',
+          shadowColor: 'rgba(0,0,0,0)',
+          shadowOffsetY: 0
+        },
+        lineStyle: {
+          width: 0
+        }
+      },
+      backgroundColor: '#fff',
+      textStyle: {
+        color: '#5c6c7c'
+      },
+      padding: [10, 10],
+      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+    },
+    grid: {
+      top: '18%'
+    },
+    xAxis: [{
+      type: 'category',
+      data: x_data,
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#000000'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        interval: 'auto',
+        rotate: 45,
+        textStyle: {
+          color: '#B7C3CE'
+        },
+        // 默认x轴字体大小
+        fontSize: 12,
+        // margin:文字到x轴的距离
+        margin: 5,
+        hideOverlap: true // 隐藏部分标签避免重叠
+      }
+    }],
+    yAxis: [{
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        fontSize: 12,
+        textStyle: {
+          color: '#B7C3CE'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed"
+        }
+      }
+    }],
+    series: ss
+  };
+  myChart.setOption(option)
+}
 function dl(modelId, name) {
   title.value = "[" + name + "] 组件压力排行";
   sl.value = true;
@@ -650,9 +830,10 @@ function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
-if(route.query.today){
+
+if (route.query.today) {
   timeSelect(0);
-}else{
+} else {
   timeSelect(30);
 }
 getList();

src/views/alarm/record/bizSort.vue

@@ -136,7 +136,7 @@ function initChart(res) {
     backgroundColor: '#fff',
     grid: {
       left: '2%',
-      right: '4%',
+      right: '10%',
       bottom: '2%',
       top: '2%',
       containLabel: true,
@@ -308,7 +308,7 @@ function initChart(res) {
             textStyle: {
               fontSize: 16,
             },
-            formatter: '{c}',
+            formatter: '{c}次',
           },
         },
       },

src/views/alarm/record/bizType.vue

@@ -143,7 +143,7 @@ function initChart(res) {
   let option = {
     title: {
       show: true,
-      text: '业务类型统计',
+      text: '业务类型统计（次）',
       textStyle: {
         fontFamily: 'PingFangSC-Regular, PingFang SC',
         align: 'center',
@@ -351,7 +351,7 @@ function initChartRight(res, name) {
   let option = {
     title: {
       show: true,
-      text: name + ' 业务组件统计',
+      text: name + ' 业务组件统计（次）',
       textStyle: {
         fontFamily: 'PingFangSC-Regular, PingFang SC',
         align: 'center',

src/views/alarm/record/index.vue

@@ -260,7 +260,7 @@ function right() {
       },
       title: {
         show: true,
-        text: '告警趋势',
+        text: '告警趋势（次）',
         // textStyle: {
         //   fontFamily: 'PingFangSC-Regular, PingFang SC',
         //   fontSize: 16,

src/views/hl/bm/component/healthSetting.vue

@@ -1,4 +1,5 @@
 <template>
+  <el-button type="primary" plain @click="handleAddClass">导入对象类型</el-button>
   <el-table :data="bmConfigData" border style="width: 100%">
     <el-table-column label="对像类型" width="120">
       <template #default="scope">
@@ -71,7 +72,7 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import {getBmConfig} from "@/api/hl/bm"
+import {getBmConfig,impClass} from "@/api/hl/bm"
 import {hlClassList,deleteHlClass,selectHlList,addHoList} from "@/api/hl/ho"
 import {updateHc,delHc} from "@/api/hl/hc"
 import {onMounted} from "vue";
@@ -136,6 +137,11 @@ async function handleAddHl(){
   selectHlData.value = res.data
 }
 
+async function handleAddClass(){
+  const res = await impClass(props.modelId)
+  await bmConfigList(props.modelId)
+}
+
 async function handleHlDelete({hlObjId,hlClassId}){
   await deleteHlClass(hlObjId)
   await selectObj({hlClassId})