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