|
@@ -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();
|