diff --git a/hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js b/hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
index e3539cd..5e9db5e 100644
--- a/hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
+++ b/hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
@@ -153,6 +153,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
// rowMenu.attr('data-canca', data.canCA);
// rowMenu.attr('data-incaing', data.inCAing);
// rowMenu.attr('data-restype', data.resType);
+ rowMenu.attr('data-restype', (data && data[0])?data[0].resType:'');
//监听告警压制等操作配置
$('#' + targetId + "_detail_row_menu").hover(function () {
var $that = $(this);
@@ -253,6 +254,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
rowMenu.attr("data-unit", "");
rowMenu.attr('data-hidem', 'true');
rowMenu.attr('data-nature', 'true');//性能趋势
+ rowMenu.attr('data-restype', (data && data[0])?data[0].resType:'');
//监听告警压制等操作配置
$('#' + targetId + "_detail_row_menu").hover(function () {
var $that = $(this);
@@ -4090,7 +4092,42 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
}
});
}
+ //start 连接状态 2022-05-19
+ function connectStatus(param,title){
+ var obj = {
+ resId: param.resId,
+ kpiId: param.kpiId,
+ flag: param.flag,
+ subFlag: param.subFlag
+ }
+
+ let urlParams='';
+ for(let key in param){
+ if(param[key]){
+ urlParams+=key+'='+param[key]+'&'
+ }
+ }
+ urlParams=urlParams.substr(0,urlParams.length-1)
+ //End LSQ 2022/1/17
+ if (!title) {
+ title = "状态指标";
+ }
+ view('commonViewModel').render("template/detail/line").then(function (res) {
+ layer.open({
+ title: [title, 'font-size:18px;'],
+ type: 2,
+ area: ['80%', '90%'],
+ shadeClose: true,//开启遮罩层
+ id: 'kpi_line_chart_div',
+ content: ['/vue3/index.html#/vue3/connectScatter?'+urlParams, 'no'],
+ cancel: function () {
+ clearTimeout(obj.lineTimer);
+ }
+ });
+ });
+ }
+ //end lsq 2022-05-19
//监听过滤压制等事件
function filterSuppressMonitor(resId){
//菜单按钮点击事件
@@ -4144,58 +4181,103 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
if (flag) {
flag = flag.replace(/^\s+|\s+$/g, "");
}
-
- //菜单点击事件
- $("#detail_menubox_id ul>li").unbind("click").on("click",function (){
- var type = $(this).attr("type");
- var params = {
- resId: resId,
- kpiId: id,
- flag: flag,
- warning:isWarning,
- ident:ident,
- trend:trend,
- unit:unit,
- // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
- // name:kpiName + " " + name,
- name:kpiName,
- // End Wang 2022/2/8 14:29
- subFlag: subFlag,
- resType: resType
- };
- switch (type){
- case 'w':
- setKPIAlarmConfig(params);
- break;
- case 's':
- setKpiFilter(params,true);
- break;
- case 'm':
- setKpiFilter(params,false);
- break;
- case 't':
- //性能趋势
- if ($.inArray('back:details:trend', checkList) == -1) {
- layer.msg('暂无权限!', {icon: 7, time: 3000});
+ //start lsq 根据kpiid获取是否是指标状态 2022-05-23
+ admin.req({
+ url: common.domainName + '/api-web/manage/kpi/page?' +
+ 'isWarning=&isTrend=&kpiLevel=&ignoreCnt=&startTime=&endTime=&kpiPower=',
+ data: {
+ page:1,limit:99999,
+ kpiName: '',resType: '',kpiIdent: 2,kpiCategory: '',
+ kpiDataType:'',kpiUnit:'',isWarning:'',isTrend:'',
+ kpiLevel:'',ignoreCnt:'',startTime:'',endTime:'',kpiPower:''
+ },
+ success(response) {
+ let arr=[];
+ if (response && response.success) {
+ arr=response.data;
+ let idArr=[];
+ let idStr='';
+ if(id.indexOf(',')!=-1){
+ idArr=id.split(',');
+ idStr=idArr[0];
}else{
- // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
- // common.openLineChart(kpiName + " " + name, params);
- common.openLineChart(kpiName, params);
- // End Wang 2022/2/8 14:29
+ idStr=id;
}
- break;
- case 'n':
- setKpiPressTimes(params);
- break;
- case 'ca-cancel':
- caCancel(params, $menu);
- break;
- case 'ca-add':
- caAdd(params, $menu);
- break;
+ let isKpi=false;
+ arr.map(item=>{
+ if(idStr==item.kpiId){
+ isKpi=true;
+ }
+ })
+ if(isKpi){
+ let menuboxStr = '<li type="link-status-kpi"><i class="layui-icon"></i>状态指标</li>';
+ $("#detail_menubox_id ul").append(menuboxStr)
+ }
+ } else {
+ // layer.msg('状态指标获取失败!', {icon: 2});
+ }
+ },
+ error(){
+ // layer.msg('状态指标获取失败!', {icon: 2});
}
-
});
+ setTimeout(function (){
+ //end lsq 2022-05-23
+ //菜单点击事件
+ $("#detail_menubox_id ul>li").unbind("click").on("click",function (){
+ var type = $(this).attr("type");
+ var params = {
+ resId: resId,
+ kpiId: id,
+ flag: flag,
+ warning:isWarning,
+ ident:ident,
+ trend:trend,
+ unit:unit,
+ // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
+ // name:kpiName + " " + name,
+ name:kpiName,
+ // End Wang 2022/2/8 14:29
+ subFlag: subFlag,
+ resType: resType
+ };
+ switch (type){
+ case 'w':
+ setKPIAlarmConfig(params);
+ break;
+ case 's':
+ setKpiFilter(params,true);
+ break;
+ case 'm':
+ setKpiFilter(params,false);
+ break;
+ case 't':
+ //性能趋势
+ if ($.inArray('back:details:trend', checkList) == -1) {
+ layer.msg('暂无权限!', {icon: 7, time: 3000});
+ }else{
+ // Start Wang 2022/2/8 14:28 BUG#273 【性能曲线】测试名称重复
+ // common.openLineChart(kpiName + " " + name, params);
+ common.openLineChart(kpiName, params);
+ // End Wang 2022/2/8 14:29
+ }
+ break;
+ case 'n':
+ setKpiPressTimes(params);
+ break;
+ case 'ca-cancel':
+ caCancel(params, $menu);
+ break;
+ case 'ca-add':
+ caAdd(params, $menu);
+ break;
+ //lsq 连接状态指标事件2022-05-19
+ case 'link-status-kpi':
+ connectStatus(params);
+ break;
+ }
+ });
+ },300)
});
//点击空白处隐藏弹出菜单
$(document).click(function(event){
diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/router/index.js b/hg-monitor-web-base/src/main/resources/static/vue3/src/router/index.js
index 511db4d..ba8c77e 100644
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/router/index.js
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/router/index.js
@@ -121,6 +121,11 @@ const routes = [{
name: 'pingIndex',
component: () => myImport('views/ping/index'),
},
+ {
+ path: '/vue3/connectScatter',
+ name: 'connectScatter',
+ component: () => myImport('views/connectScatter/index')
+ },
];
// hash模式： createWebHashHistory
diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html
new file mode 100644
index 0000000..a6c2c16
--- /dev/null
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.html
@@ -0,0 +1,38 @@
+<div class="pie-detail-line-container" >
+
+ <div class="pie-detail-content">
+ <el-row class="detail-content-title">
+ <el-col :span="8"></el-col>
+ <el-col :span="16" class="pie-flex-end">
+ <div class="pie-date-range">
+<!-- <cm-date-range-influx v-if="dateType=='custom'" :keys="keys" @callbackinflux="getInfluxOption" @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range-influx>-->
+ </div>
+ <div class="line-filter pie-line-filter">
+ <div class="linechartfrequency line-filter-content">
+ <div v-if="dateType!='custom'" @click="changeInterval('oneDay')" :class="['line-filter-item', {'active':dateType=='oneDay'}]" data-value="oneDay" >近24小时</div>
+ <div v-if="dateType!='custom'" @click="changeInterval('week')" :class="['line-filter-item', {'active':dateType=='week'}]" data-value="week">一周</div>
+ <div v-if="dateType!='custom'" @click="changeInterval('month')" :class="['line-filter-item', {'active':dateType=='month'}]" data-value="month">一月</div>
+<!-- <div v-if="dateType!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':dateType=='YEAR'}]" data-value="YEAR">一年</div>-->
+<!-- <div v-if="dateType!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">自定义</div>-->
+<!-- <div v-if="dateType=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':dateType=='custom'}]" data-value="custom">返 回</div>-->
+ </div>
+ </div>
+
+ </el-col>
+
+ </el-row>
+ <el-row class="detail-content">
+ <el-col :span="24" class="detail_linechart">
+ <LineChart :optionData="optionData" v-if="optionData"></LineChart>
+
+<!-- <div class="detail_linechart" id="indentKpiLineChart"></div>-->
+ <!-- <div class="detail_linechart" id="warningKpiLineChart" style="margin-top:35px;"></div>-->
+ <!-- <div class="detail_linechart" id="line-tingyun-trendKpiLineChart" style="margin-top:35px;"></div>-->
+
+
+ </el-col>
+ </el-row>
+ </div>
+
+</div>
+
diff --git a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js
new file mode 100644
index 0000000..55c859c
--- /dev/null
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/connectScatter/index.js
@@ -0,0 +1,382 @@
+export default {
+ name: 'pieDetailLine',
+ template: '',
+ components:{
+ 'LineChart': Vue.defineAsyncComponent(
+ () => myImport('views/page/components/lineChart/index')
+ )
+ },
+ data() {
+ return{}
+ },
+ setup(props, {attrs, slots, emit}) {
+ const {proxy} = Vue.getCurrentInstance();
+ let dateType=Vue.ref('oneDay');
+ let optionData=Vue.ref('');
+ //series接口无数据时默认数据
+ let seriesData = Vue.ref([{
+ "data": [['2022-05-13','02:00'],['2022-05-15','03:00'],['2022-05-17','04:00']],
+ // "name": kpiName.value
+ "name": '成功'
+ },{
+ "data": [['2022-05-14','08:00'],['2022-05-16','09:00'],['2022-05-17','10:00']],
+ // "name": kpiName.value
+ "name": '失败'
+ }]);
+ let series = Vue.ref([]);
+ let rateData = Vue.ref([]);
+ let kpiUnit = Vue.ref('');
+ let kpiName = Vue.ref('');//指标名称
+ let colorsArr=Vue.ref([
+ {
+ start: '#46d6d8',
+ end: '#2883d0'
+ },
+ {
+ start: '#facf5b',
+ end: '#f77623'
+ },
+ {
+ start: '#C04DD8',
+ end: '#D81F72'
+ },
+ {
+ start: '#F5A1EB',
+ end: '#A04DE2'
+ },
+ {
+ start: '#F36093',
+ end: '#FF465C'
+ },
+ {
+ start: '#C2E74D',
+ end: '#00AE8B'
+ },
+ {
+ start: '#3DC3FF',
+ end: '#01FFFF'
+ },
+ {
+ start: '#B850ED',
+ end: '#9062EF'
+ },
+ {
+ start: '#305be6',
+ end: '#36a7d3'
+ },
+ {
+ start: '#FFA500',
+ end: '#FFEE00'
+ },
+ {
+ start: '#C4E64C',
+ end: '#2de078'
+ },
+ {
+ start: '#30ffb3',
+ end: '#01FFFF'
+ },
+ {
+ start: '#FF4488',
+ end: '#F13EFF'
+ },
+ {
+ start: '#A64CE2',
+ end: '#625AE7'
+ },
+ {
+ start: '#5AEBC7',
+ end: '#5FC9F8'
+ },
+ {
+ start: '#FFA500',
+ end: '#FFEE00'
+ },
+ {
+ start: '#00AAD6',
+ end: '#625AE7'
+ },
+ {
+ start: '#E48BDE',
+ end: '#FF9262'
+ },
+ {
+ start: '#B2797B',
+ end: '#FF4B51'
+ },
+ {
+ start: '#ffe393',
+ end: '#feff5b'
+ }
+ ])
+
+ const changeInterval=(val)=>{
+ dateType.value=val;
+ if(val=='custom'){
+ }else{
+ getMonthDay();
+ getLineChart();
+
+ }
+ }
+
+ const getLineChart=()=>{
+ let params=proxy.$route.query
+ let resourceId=params.resId;//资源ID
+ let kpiId =params.kpiId; //指标ID
+ let resType=params.resType;//资源类型
+ let idArr=[];
+ let idStr='';
+ if(kpiId.indexOf(',')!=-1){
+ idArr=kpiId.split(',');
+ if(idArr.length<=2){
+ idStr=idArr[0];
+ }else{
+ idStr=kpiId;
+ }
+ }else{
+ idStr=kpiId;
+ }
+ kpiName.value = params.name;//指标名称
+ let url = '/api-web/scatter/getByResId?dateType=' + dateType.value +
+ '&resId=' + resourceId + '&kpiId=' + idStr + '&resType=' + resType;
+ proxy.$http.get(url, {},function (res){
+ kpiUnit.value = (!res.data || res.data.kpiUnit == null) ? "" : res.data.kpiUnit;
+ if (res.data && res.data.length == 0) {
+ rateData.value = {
+ series: seriesData.value,
+ kpiUnit: kpiUnit.value
+ }
+ } else {
+ rateData.value = res.data;
+ }
+ setSeries();
+ },function (error){
+ rateData.value = {
+ series: seriesData.value,
+ kpiUnit: kpiUnit.value
+ }
+ setSeries();
+ })
+
+ }
+ const setSeries=()=>{
+ series.value=[];
+ $.each(rateData.value,function (i,v) {
+ if(v.x && v.x.length>0){
+ let nameArr=[];
+ v.x.map(item=>{
+ nameArr.unshift(item);
+
+ })
+ xAxisData.value=nameArr;
+ }
+ series.value.push({
+ name: v.name,
+ type: 'scatter',
+ data: v.date,
+ /* symbolSize: 12,
+ symbol: 'circle',*/
+ itemStyle: {
+ normal: {
+ color: colorsArr.value[i]?colorsArr.value[i].start:colorsArr.value[0].start //图标颜色
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3, //连线粗细
+ color: colorsArr.value[i]?colorsArr.value[i].end:colorsArr.value[0].end //连线颜色
+ }
+ }
+ })
+ });
+ optionDataInit();
+ }
+ const optionDataInit=()=>{
+ optionData.value = {
+ tooltip: {
+ trigger: 'axis',
+ formatter:function (param) {
+ // var tips = kpiName.value+" "+param[0].name +"<br/>";
+ var tips =kpiName.value +"<br/>";
+ $.each(param,function (i,v) {
+ // tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
+ tips += "<div style='display: flex;align-content: flex-start;'><span>"+v.marker+"</span> <span>"+
+ v.seriesName + ":"+v.value +"</span></div>"
+ });
+ return tips;
+ }
+ },
+ legend: {
+ show: true
+ },
+ grid: {
+ top: '10%',
+ left: '3%',
+ right: '4%',
+ bottom: '15%',
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {
+ show: false
+ }
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: xAxisData.value,
+ axisLine: {
+ lineStyle: {
+ color: '#c9c9c9'
+ }
+ },
+ axisLabel: {
+ color: '#232425',
+ showMaxLabel: true
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(200,200,200,0.1)', 'transparent'
+ ]
+ }
+ }
+ },
+ yAxis: {
+ // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+ data:YAxisData.value,
+ scale: true,
+ boundaryGap: ['10%', '10%'],
+ axisLabel: {
+ interval:59,//label无间隔
+ formatter: '{value} 时'
+
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#232425'
+ },
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ color: ['#ccc']
+ }
+ }
+ },
+ // x轴拖动
+ dataZoom: [
+ {
+ type: "slider",
+ realtime: true, //拖动滚动条时是否动态的更新图表数据
+ height: 25, //滚动条高度
+ start: 40, //滚动条开始位置（共100等份）
+ end: 65 //结束位置（共100等份）
+ }
+ ],
+ series:series.value
+ };
+ }
+
+ //获取近30天
+ let xAxisData=Vue.ref([]);
+ const getMonthDay=()=>{
+ let m=24;
+ if(dateType.value=='oneDay'){
+ m=24;
+ }else if(dateType.value=='week'){
+ m=7;
+ }else if(dateType.value=='month'){
+ m=30;
+ }
+ let dateArr=[];
+ for(let i=0;i<=m;i++){
+ let myDate=new Date();
+ if(dateType.value=='oneDay'){
+ myDate.setHours(myDate.getHours()-i)
+ }else if(dateType.value=='week' || dateType.value=='month'){
+ myDate.setDate(myDate.getDate() - i);
+ }
+ let lowData =getDateTime(myDate); //用了上面转年月日的方法
+ dateArr.unshift(lowData)
+ }
+ xAxisData.value=dateArr;
+ }
+ //获取时间点 转年月日的方法
+ const getDateTime=(newDate)=>{
+ let dateTime='';
+ let year=newDate.getFullYear();//获取当前年
+ let month1=(newDate.getMonth()+1)+'';
+ let month=timeFormat(month1);//获取当前月
+ let day=timeFormat(newDate.getDate());//获取当前日
+ let hours=timeFormat(newDate.getHours()+'');//获取当前时
+ let minutes=timeFormat(newDate.getMinutes()+'');//获取当前分
+ let seconds=timeFormat(newDate.getSeconds()+'');//获取当前秒
+ if(day < 10){
+ day = '0'+day;
+ }
+ if(dateType.value=='oneDay'){
+ dateTime= year+'-'+month+'-'+day+' '+hours+':00';//+minutes;//+':'+seconds;
+ }else{
+ dateTime= year+'-'+month+'-'+day;//+' '+hours+':'+minutes+':'+seconds;
+ }
+ return dateTime;
+ }
+ //转换个位数为 00
+ let timeFormat =(number)=> {
+ return number.length == 1 ? ('0' + number) : number
+ }
+ //00:00-23:59数据
+ let YAxisData=Vue.ref([]);
+ let getYAxisData=()=>{
+ let arr1=[];
+ for(let i=0;i<24;i++){
+ for(let j=0;j<60;j++){
+ if(i<10){
+ if(j<10){
+ arr1.push('0'+i+':0'+j);
+ }else{
+ arr1.push('0'+i+':'+j);
+ }
+
+ }else{
+ if(j<10){
+ arr1.push(i+':0'+j);
+ }else{
+ arr1.push(i+':'+j);
+ }
+ }
+ }
+
+ }
+ YAxisData.value=arr1;
+ }
+ // 挂载完
+ Vue.onMounted(() => {
+ getYAxisData();
+ getMonthDay();
+ getLineChart();
+ })
+ return {
+ xAxisData,
+ YAxisData,
+ getMonthDay,
+ timeFormat,
+ dateType,
+ optionData,
+ seriesData,
+ series,
+ rateData,
+ kpiUnit,
+ kpiName,
+ optionDataInit,
+ getLineChart,
+ changeInterval
+ }
+ }
+}
diff --git a/hg-monitor-web-qh/src/main/resources/static/vue3/src/router/index.js b/hg-monitor-web-qh/src/main/resources/static/vue3/src/router/index.js
index 6fc3114..70aac58 100644
--- a/hg-monitor-web-qh/src/main/resources/static/vue3/src/router/index.js
+++ b/hg-monitor-web-qh/src/main/resources/static/vue3/src/router/index.js
@@ -216,6 +216,11 @@ const routes = [{
name: 'pingIndex',
component: () => myImport('views/ping/index'),
},
+ {
+ path: '/vue3/connectScatter',
+ name: 'connectScatter',
+ component: () => myImport('views/connectScatter/index')
+ },
];
// hash模式： createWebHashHistory