Merge branch 'master' of http://94.191.59.107:3000/wukai/jy2024-ui

src/api/alarm/record.js

@@ -105,7 +105,7 @@ export function getObjAlarm(query) {
     })
 }
 
-// 系统压力排名
+// 告警等级排名
 export function getLevelSort(query) {
     return request({
         url: "/alarm/record/list/levelSort",
@@ -114,3 +114,20 @@ export function getLevelSort(query) {
     })
 }
 
+// 趋势
+export function listHours(query) {
+    return request({
+        url: "/alarm/record/list/hours",
+        method: 'get',
+        params: query
+    })
+}
+// 指标明细
+export function calcMs(query) {
+    return request({
+        url: "/alarm/record/calc/ms",
+        method: 'get',
+        params: query
+    })
+}
+

src/views/alarm/record/bizAccess.vue

@@ -24,34 +24,33 @@
     </el-form>
     <el-row>
       <el-col :span="12">
-        <el-card>
-          <div ref="chartAccess" style="height: 600px;"></div>
-        </el-card>
+        <div ref="chartAccess" style="height: 600px;"></div>
       </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>
+        <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:300px;overflow-y: auto;">
+          <el-table-column label="序号" align="center" width="80">
+            <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="组件名称" align="left" prop="modelName"/>
+          <el-table-column label="系统压力值TPS/QPS" align="center" prop="access" width="150"/>
+          <el-table-column label="访问错误次数" align="center" prop="num" 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>
+        <div ref="asLine" v-show="axx" style="height: 400px;padding-top: 20px;"></div>
       </el-col>
     </el-row>
   </div>
@@ -71,6 +70,7 @@ const leftList = ref([]);
 const rightList = ref([]);
 const open = ref(false);
 const sl = ref(true);
+const axx = ref(true);
 const sr = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
@@ -82,6 +82,7 @@ const title = ref("");
 const daterangeAlarmTime = ref([]);
 const router = useRouter();
 const chartAccess = ref();
+const asLine = ref();
 
 const data = reactive({
   form: {},
@@ -110,10 +111,10 @@ function initChart(res) {
   for (let i in res.data) {
     let obj = res.data[i];
     datas.push(obj.modelName);
-    legendData1.push({id:obj.modelId,value:obj.access});
-    legendData2.push({id:obj.modelId,value:obj.num});
+    legendData1.push({id: obj.modelId, value: obj.access});
+    legendData2.push({id: obj.modelId, value: obj.num});
     if (i == 0) {
-      dl(obj.modelId,obj.modelName);
+      dl(obj.modelId, obj.modelName);
     }
     if (obj.access > xMax1) {
       xMax1 = obj.access;
@@ -239,7 +240,7 @@ function initChart(res) {
           },
         },
         formatter: function (params) {
-          var index = datas.map((item) => item).indexOf(params);
+          let index = datas.map((item) => item).indexOf(params);
           index = index + 1;
           if (index < 4) {
             return [`{a${index}|${index}}{b|${params}}`].join('\n');
@@ -304,11 +305,11 @@ function initChart(res) {
       xAxisIndex: 1,
       yAxisIndex: 1,
       itemStyle: {
-        color: '#ffc001',
+        color: '#419491',
         barBorderRadius: [0, 10, 10, 0],
         // barBorderRadius: legendData[i].barBorderRadius,
         emphasis: {
-          color: '#ffc001',
+          color: '#419491',
         },
       },
       // 数字
@@ -356,10 +357,10 @@ function initChart(res) {
         barCategoryGap: 15,
         // barGap:i==1?'-100%':'0',
         itemStyle: {
-          color: '#fe5959',
+          color: '#FFB25C',
           barBorderRadius: [0, 20, 20, 0],
           emphasis: {
-            color: '#fe5959',
+            color: '#FFB25C',
           },
         },
         // 数字
@@ -384,9 +385,9 @@ function initChart(res) {
   myChart.setOption(option);
   myChart.on("click", function (param) {
     if (param.seriesIndex == 0) {
-      dl(param.data.id,param.name);
+      dl(param.data.id, param.name);
     } else {
-      dr(param.data.id,param.name);
+      dr(param.data.id, param.name);
     }
     console.log(param);
     // console.error(param,param.data.id,param.data.value,param.name);
@@ -396,8 +397,9 @@ function initChart(res) {
 
 function dl(modelId, name) {
   title.value = "[" + name + "] 组件压力排行";
-  sl.value=true;
-  sr.value=false;
+  sl.value = true;
+  axx.value = true;
+  sr.value = false;
   queryParams.value.modelId = modelId;
   queryParams.value.params = {};
   if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
@@ -406,15 +408,17 @@ function dl(modelId, name) {
   }
   getObjAccess(queryParams.value).then(response => {
     loading.value = false;
-    leftList.value = response.data;
+    leftList.value = response.data.objs;
+    line(response.data.datas);
   });
 
 }
 
-function dr(modelId, name){
+function dr(modelId, name) {
   title.value = "[" + name + "] 组件告警数量排行";
-  sl.value=false;
-  sr.value=true;
+  sl.value = false;
+  axx.value = false;
+  sr.value = true;
   queryParams.value.modelId = modelId;
   queryParams.value.params = {};
   if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
@@ -428,6 +432,187 @@ function dr(modelId, name){
 
 }
 
+function line(data) {
+  let myChart = echarts.init(asLine.value);
+  let colorList = [
+    '#419491',
+    '#3581F8',
+    '#FFB25C',
+  ];
+  let x_data = [];
+  let max_data = [];
+  let avg_data = [];
+  let err_data = [];
+  for (let i = 0; i < data.length; i++) {
+    x_data.push(data[i].time);
+    max_data.push(data[i].max);
+    avg_data.push(data[i].avg);
+    err_data.push(data[i].error);
+  }
+  let option = {
+    backgroundColor: '#FFFFFF',
+    dataZoom: {
+      type: 'inside', // 内置型数据区域缩放组件
+      start: 0, // 默认为0，表示从头开始
+      end: 50 // 默认为100，表示直到末尾
+    },
+    title: {
+      show: true,
+      text: '系统压力值趋势',
+      // subtext:'分配总量：18041核\n释放总量：5288核',
+      // textStyle: {
+      //   fontFamily: 'PingFangSC-Regular, PingFang SC',
+      //   fontSize: 14,
+      //   fontWeight: 400,
+      //   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: 0,
+        rotate: 0,
+        textStyle: {
+          color: '#B7C3CE'
+        },
+        // 默认x轴字体大小
+        fontSize: 12,
+        // margin:文字到x轴的距离
+        margin: 5
+      }
+    }],
+    yAxis: [{
+      type: 'value',
+      // name: "核数",
+      // position: 'left',
+      // offset: 55,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        fontSize: 12,
+        textStyle: {
+          color: '#B7C3CE'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed"
+        }
+      }
+    }],
+    series: [{
+      name: '最大值',
+      type: 'line',
+      data: max_data,
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 1,
+        type: 'dotted', //'dotted'虚线 'solid'实线
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[0],
+          borderColor: colorList[0]
+        }
+      }
+    }, {
+      name: '平均值',
+      type: 'line',
+      data: avg_data,
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 1,
+      },
+      itemStyle: {
+        normal: {
+          color: colorList[1],
+          borderColor: colorList[1]
+        }
+      }
+    },
+      {
+        name: '错误次数',
+        type: 'line',
+        data: err_data,
+        symbolSize: 1,
+        symbol: 'circle',
+        smooth: true,
+        showSymbol: false,
+        lineStyle: {
+          width: 1,
+        },
+        itemStyle: {
+          normal: {
+            color: colorList[2],
+            borderColor: colorList[2]
+          }
+        }
+      }
+    ]
+  };
+  myChart.setOption(option);
+}
+
 /** 查询告警记录列表 */
 function getList() {
   loading.value = true;

src/views/alarm/record/bizSort.vue

@@ -38,16 +38,50 @@
               </template>
             </el-table-column>
             <el-table-column label="指标名称" align="left" prop="name"/>
-            <el-table-column label="告警数量" align="center" prop="num" width="120"/>
+            <el-table-column label="告警数量" align="center" 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>
         </el-card>
       </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="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 {getBizSort, getMetrics} from "@/api/alarm/record";
+import {getBizSort, getMetrics,calcMs} from "@/api/alarm/record";
 import {useRouter} from "vue-router";
 import * as echarts from "echarts";
 import moment from "moment/moment.js";
@@ -55,13 +89,16 @@ import moment from "moment/moment.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 recordList = ref([]);
+const msList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const total = ref(0);
 const title = ref("");
+const alarmMs = ref();
 const daterangeAlarmTime = ref([]);
 const router = useRouter();
 const chartSort = ref();
@@ -284,9 +321,133 @@ function initChart(res) {
     // let url = '/zabbix/zabbix.php?action=map.view&sysmapid=2&kiosk=1&line';
   });
 }
-
+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 detail(objId, name) {
-  open.value = true;
   title.value = "[" + name + "]指标风险排名";
   loading.value = true;
   queryParams.value.objId = objId;
@@ -321,7 +482,23 @@ function getList() {
     initChart(response);
   });
 }
+function msDetail(row) {
+  open.value = true;
+  title.value = "[" + row.name + "]详情";
+  let msParams = {
+    objMetricsId: row.id,
+    params: {}
+  };
+  if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
+    msParams.params["beginAlarmTime"] = daterangeAlarmTime.value[0];
+    msParams.params["endAlarmTime"] = daterangeAlarmTime.value[1];
+  }
 
+  calcMs(msParams).then(response => {
+    initMs(response.data.hour);
+    msList.value = response.data.detail;
+  });
+}
 
 /** 搜索按钮操作 */
 function handleQuery() {

src/views/alarm/record/bizType.vue

@@ -23,35 +23,72 @@
       </el-form-item>
     </el-form>
     <el-row>
-      <el-col :span="12">
+      <el-col :span="7">
         <el-card>
           <div ref="chartType" style="height: 600px;"></div>
         </el-card>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="7">
         <el-card>
           <div ref="chartRightType" style="height: 600px;">请点击左边柱状图</div>
         </el-card>
       </el-col>
+      <el-col :span="10">
+        <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" 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>
+        </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:500px;overflow-y: auto;">
+      <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>
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <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-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 {getBizObj, getBizType, getMetrics} from "@/api/alarm/record";
+import {calcMs, getBizObj, getBizType, getMetrics} from "@/api/alarm/record";
 import {useRouter} from "vue-router";
 import * as echarts from 'echarts'
 import moment from 'moment'
@@ -59,8 +96,10 @@ import moment from 'moment'
 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 recordList = ref([]);
+const msList = ref([]);
 const loading = ref(true);
 const showSearch = ref(true);
 const open = ref(false);
@@ -68,6 +107,7 @@ const total = ref(0);
 const title = ref("");
 const chartType = ref();
 const chartRightType = ref();
+const alarmMs = ref();
 const daterangeAlarmTime = ref([]);
 const router = useRouter();
 
@@ -304,6 +344,9 @@ function initChartRight(res, name) {
     let obj = res.data[i]
     ydata.push(obj.name);
     salvProValue.push({id: obj.id, value: obj.num});
+    if (i == 0) {
+      detail(obj.id, obj.name);
+    }
   }
   let option = {
     title: {
@@ -500,6 +543,132 @@ function initChartRight(res, name) {
   });
 }
 
+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 rightData(type, name) {
   queryParams.value.type = type;
@@ -524,7 +693,6 @@ function getList() {
 }
 
 function detail(objId, name) {
-  open.value = true;
   title.value = "[" + name + "]指标风险排名";
   loading.value = true;
   queryParams.value.objId = objId;
@@ -552,6 +720,25 @@ function timeSelect(v) {
   daterangeAlarmTime.value[1] = moment(end).format('YYYY-MM-DD');
 }
 
+function msDetail(row) {
+  open.value = true;
+  title.value = "[" + row.name + "]详情";
+  let msParams = {
+    objMetricsId: row.id,
+    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;
+  });
+}
+
 /** 重置按钮操作 */
 function resetQuery() {
   daterangeAlarmTime.value = [];

src/views/alarm/record/index.vue

@@ -95,7 +95,7 @@
 </template>
 
 <script setup name="Record">
-import {getLevelSort, listRecord} from "@/api/alarm/record";
+import {getLevelSort, listHours, listRecord} from "@/api/alarm/record";
 import {listObj} from "@/api/obj/obj.js"
 import * as echarts from 'echarts'
 import moment from 'moment'
@@ -222,147 +222,145 @@ function left() {
 
 function right() {
   let myChart = echarts.init(alarmRight.value);
-  var res = [
-    {
-      "scores": [
-        58.0,
-        86.0,
-        59.0,
-        81.0,
-        51.0,
-        73.0,
-        51.0
-      ],
-      "xdata": [
-        "8-27",
-        "8-28",
-        "8-29",
-        "8-30",
-        "8-31",
-        "9-1",
-        "9-2"
-      ]
-    }
-  ];
-  let ss = [];
-  for (let i = 0; i < res.length; i++) {
-    let xx = {
-      name: res[i].modelName,
-      type: 'line',
-      data: res[i].scores,
-      symbolSize: 1,
-      symbol: 'circle',
-      smooth: true,
-      showSymbol: false,
-      stack: 'total'
+  listHours(queryParams.value).then(res => {
+    let yd=[];
+    let xd=[];
+    for (let i = 0; i < res.data.length; i++) {
+      xd.push(res.data[i].hour);
+      yd.push(res.data[i].num);
     }
-    ss.push(xx);
-  }
-  let x_data = res[0].xdata;
-  let option = {
-    backgroundColor: '#FFFFFF',
-    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
-        },
+    let ss = [];
+      let xx = {
+        // name: xd,
+        type: 'line',
+        data: yd,
+        symbolSize: 1,
+        symbol: 'circle',
+        smooth: true,
+        showSymbol: false,
         lineStyle: {
-          width: 0
+          width: 1,
+          type: 'solid', //'dotted'虚线 'solid'实线
+        },
+        itemStyle: {
+        	normal: {
+        		color: '#FFB25C',
+        		borderColor: '#FFB25C'
+        	}
         }
+      }
+      ss.push(xx);
+    let x_data = xd;
+    let option = {
+      backgroundColor: '#FFFFFF',
+      dataZoom: {
+        type: 'inside', // 内置型数据区域缩放组件
+        start: 0, // 默认为0，表示从头开始
+        end: 100 // 默认为100，表示直到末尾
       },
-      backgroundColor: '#fff',
-      textStyle: {
-        color: '#5c6c7c'
+      title: {
+        show: true,
+        text: '告警趋势',
+        // textStyle: {
+        //   fontFamily: 'PingFangSC-Regular, PingFang SC',
+        //   fontSize: 16,
+        //   fontWeight: 600,
+        //   color: '#848E98'
+        // },
+        left: 'left',
+        // top: '3%'
       },
-      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'
+      legend: {
+        icon: 'rect',
+        top: '3%',
+        right: '10%',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 20,
+        textStyle: {
+          fontFamily: 'PingFangSC-Regular, PingFang SC',
+          color: '#848E98'
         }
       },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        interval: 0,
-        rotate: 0,
+      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: '#B7C3CE'
+          color: '#5c6c7c'
         },
-        // 默认x轴字体大小
-        fontSize: 12,
-        // margin:文字到x轴的距离
-        margin: 5
-      }
-    }],
-    yAxis: [{
-      type: 'value',
-      axisTick: {
-        show: false
+        padding: [10, 10],
+        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
       },
-      axisLine: {
-        show: false,
+      grid: {
+        top: '18%'
       },
-      axisLabel: {
-        fontSize: 12,
-        textStyle: {
-          color: '#B7C3CE'
+      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 // 隐藏部分标签避免重叠
         }
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: "dashed"
+      }],
+      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)
+      }],
+      series: ss
+    };
+    myChart.setOption(option)
+  });
 }
 
 /** 查询告警记录列表 */
 function getList() {
-  console.error(alarm_type);
   loading.value = true;
   queryParams.value.params = {};
   if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {

src/views/hl/bm/index.vue

@@ -143,9 +143,11 @@ function handleHealthSet(row, type) {
 function initChatLeft(res, tag) {
   let obj = bmLeft;
   let title = "24小时健康度趋势"
+  let tt = "dotted";
   if (tag == 'right') {
     obj = bmRight;
     title = "最近7天健康度趋势"
+    tt = "solid";
   }
   const myChart = echarts.init(obj.value);
   let ss = [];
@@ -157,7 +159,11 @@ function initChatLeft(res, tag) {
       symbolSize: 1,
       symbol: 'circle',
       smooth: true,
-      showSymbol: false
+      showSymbol: false,
+      lineStyle: {
+        width: 2,
+        type: tt, //'dotted'虚线 'solid'实线
+      },
     }
     ss.push(xx);
   }
@@ -170,8 +176,8 @@ function initChatLeft(res, tag) {
       textStyle: {
         fontFamily: 'PingFangSC-Regular, PingFang SC',
         fontSize: 16,
-        fontWeight: 600,
-        color: '#848E98'
+        fontWeight: 800,
+        // color: '#848E98'
       },
       left: 'left',
       top: '3%'
@@ -211,7 +217,7 @@ function initChatLeft(res, tag) {
       extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
     },
     grid: {
-      top: '18%'
+      top: '25%'
     },
     xAxis: [{
       type: 'category',