diff --git a/src/components/echartsList/line.vue b/src/components/echartsList/line.vue index f5bb664..2a72446 100644 --- a/src/components/echartsList/line.vue +++ b/src/components/echartsList/line.vue @@ -137,34 +137,70 @@ legend: legendData, tooltip: { trigger: 'axis', + confine: true, // 将tooltip限制在图表的区域内，防止超出屏幕[1,7](@ref) + enterable: true, // 关键配置：允许鼠标移入tooltip内部[1,2,7](@ref) + hideDelay: 300, // 建议设置隐藏延迟，方便鼠标有足够时间移动到tooltip上[1](@ref) axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }, + // 自定义位置 - 跟随鼠标 + position: !dataXY.tooltipFormatter ? null : function (point, params, dom, rect, size) { + // 确保提示框在视图范围内 + let x = point[0]; + let y = point[1]; + + // 如果太靠右，向左偏移 + if (x > size.viewSize[0] - size.contentSize[0]) { + x = x - size.contentSize[0] - 20; + } + + // 如果太靠下，向上偏移 + if (y > size.viewSize[1] - size.contentSize[1]) { + y = y - size.contentSize[1] - 20; + } + + return [x + 5, y + 10]; + }, formatter: !dataXY.tooltipFormatter ? null : function(params) { // 获取当前悬停的日期 const date = params[0].name; // 构建提示框HTML内容 let html = `
${date}
`; + html+=` + + + + + + + + + + `; // 遍历所有系列 - params.forEach(param => { - let valueparams = param.value; - if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.valueToop) { - let value = dataXY.tooltipFormatter.valueToop; - valueparams = param.value && param.value === value.num ? value.msg : param.value || param.value === 0 ? param.value : '-'; + params.forEach(paramItem => { + if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.customList) { + if (paramItem.data.content) { + let content = JSON.parse(paramItem.data.content); + content.forEach((contItem, index) => { + html+= ` + + + + + + + + + `; + }); + } } - // 为每个系列创建一行 - html += ` -
-
- - ${param.seriesName} -
- ${valueparams} -
`; }); + html+=`
路径平均延迟(ms)丢包率%地址国家运营商省市
${contItem.hopNumber || ''}${contItem.avgLatency || ''}${contItem.lossPercent || ''}${contItem.ipAddress || ''}${contItem.country || ''}${contItem.isp || ''}${contItem.province || ''}${contItem.city || ''}
`; return html; } }, @@ -379,4 +415,14 @@ padding: 2px 5px; font-size: 12px; } + ::v-deep .tab_border { + padding: 2px 10px; + border-bottom: 1px solid #ddd; + } + ::v-deep .ellipsis { + max-width: 300px; + white-space: nowrap; /* 防止文本换行 */ + overflow: hidden; /* 隐藏溢出的内容 */ + text-overflow: ellipsis; /* 显示省略号来代表被裁剪的文本 */ + } diff --git a/src/views/earnManage/server/analysisChart.vue b/src/views/earnManage/server/analysisChart.vue index 9cd063e..306d194 100644 --- a/src/views/earnManage/server/analysisChart.vue +++ b/src/views/earnManage/server/analysisChart.vue @@ -249,11 +249,15 @@ this.form.clientId = this.clientId; } else { if (nameArr && nameArr.length > 0) { - if (nameListArr.length >=2) { - this.form.clientId = [nameListArr[0].label, nameListArr[1].label]; - } else { - this.form.clientId = [nameListArr[0].label]; - } + this.form.clientId = []; + nameListArr && nameListArr.forEach(item => { + this.form.clientId.push(item.label); + }); + // if (nameListArr.length >=2) { + // this.form.clientId = [nameListArr[0].label, nameListArr[1].label]; + // } else { + // this.form.clientId = [nameListArr[0].label]; + // } } } showNameList = this.form.clientId; @@ -468,52 +472,21 @@ }, // 获取前一天的 getBeforDay() { - let startData = ''; - let endData = ''; - const year = new Date().getFullYear(); - const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月 - const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8） - const prevDay = String(new Date().getDate() - 1).padStart(2, '0'); - startData = `${year}-${month}-${prevDay}`; - endData = `${year}-${month}-${day}`; - return {startTime: startData, endTime: endData}; - }, - // 获取前一个月的所有日期 - getDaysOfPreviousMonth(star, end) { - const currentDate = new Date(); - const endYear = currentDate.getFullYear(); - const endMonth = currentDate.getMonth(); // 0=1月，11=12月 - const endDay = currentDate.getDate(); // 当前日（如8） - - // 2. 计算起点日期（当前日期的“上月同日”，处理边界：如3月31日→2月28/29日） - const startDate = new Date(endYear, endMonth, endDay); - // 核心：将当前日期的月份减1（得到上月同日，自动处理天数不足问题） - startDate.setMonth(startDate.getMonth() - 1); - - // 3. 提取起点日期的年、月、日（用于循环判断） - const startYear = startDate.getFullYear(); - const startMonth = startDate.getMonth(); - const startDay = startDate.getDate(); - - // 4. 循环生成“起点~终点”的所有日期 - const dateCollection = []; - // 临时日期：从起点日期开始递增 - const tempDate = new Date(startYear, startMonth, startDay); - - // 循环条件：临时日期 <= 当前日期（终点） - while (tempDate <= currentDate) { - // 格式化日期为“YYYY-MM-DD”（补零处理：如8月→08，5日→05） - const year = tempDate.getFullYear(); - const month = String(tempDate.getMonth() + 1).padStart(2, '0'); - const day = String(tempDate.getDate()).padStart(2, '0'); - const formattedDate = `${year}-${month}-${day}`; - - dateCollection.push(formattedDate); - - // 临时日期加1天（进入下一天） - tempDate.setDate(tempDate.getDate() + 1); - } - return {startTime: dateCollection[0], endTime: dateCollection[dateCollection.length - 1]}; + const now = new Date(); + // 获取当前时间 + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + // 正确计算前一天（处理跨月情况） + const prevDate = new Date(now); + prevDate.setDate(now.getDate() - 1); + const prevYear = prevDate.getFullYear(); + const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0'); + const prevDay = String(prevDate.getDate()).padStart(2, '0'); + // 构建时间字符串 + const startData = `${prevYear}-${prevMonth}-${prevDay}`; + const endData = `${year}-${month}-${day}`; + return {startTime: startData, endTime: startData}; }, // 获取前一年的月 getLastMonths(num) { @@ -535,7 +508,7 @@ const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1是因为月份从0开始 threeMonths.unshift(`${targetYear}-${monthStr}`); } - return {startTime: threeMonths[0], endTime: threeMonths[threeMonths.length - 1]}; + return {startTime: threeMonths[0], endTime: threeMonths[0]}; }, // 监听事件 callback(result, dataVal, formVal) { diff --git a/src/views/resource/alarmLog/alarmLog.vue b/src/views/resource/alarmLog/alarmLog.vue index ab52e57..18dbdd1 100644 --- a/src/views/resource/alarmLog/alarmLog.vue +++ b/src/views/resource/alarmLog/alarmLog.vue @@ -131,7 +131,7 @@ // }); if (rowData && rowData.alarmType === '1') { this.$router.push({ - path: '/resource/switchRegister/edit/index', + path: '/resource/alarmLog/details', query: { id: rowData.clientId, readonly: true, diff --git a/src/views/resource/monitorBoard/monitorBoard.vue b/src/views/resource/monitorBoard/monitorBoard.vue index 9297f18..338eefa 100644 --- a/src/views/resource/monitorBoard/monitorBoard.vue +++ b/src/views/resource/monitorBoard/monitorBoard.vue @@ -122,17 +122,25 @@ } }, created() { - let startData = ''; - let endData = ''; - const year = new Date().getFullYear(); - const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月 - const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8） - const prevDay = String(new Date().getDate() - 1).padStart(2, '0'); - const hours = String(new Date().getHours()).padStart(2, '0') + ':'; - const minutes = String(new Date().getMinutes()).padStart(2, '0') + ':'; - const seconds = String(new Date().getSeconds()).padStart(2, '0'); - startData = `${year}-${month}-${prevDay}` + ' ' + hours + minutes + seconds; - endData = `${year}-${month}-${day}` + ' ' + hours + minutes + seconds; + const now = new Date(); + // 获取当前时间 + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + // 正确计算前一天（处理跨月情况） + const prevDate = new Date(now); + prevDate.setDate(now.getDate() - 1); + const prevYear = prevDate.getFullYear(); + const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0'); + const prevDay = String(prevDate.getDate()).padStart(2, '0'); + // 构建时间字符串 + const timeString = `${hours}:${minutes}:${seconds}`; + const startData = `${prevYear}-${prevMonth}-${prevDay} ${timeString}`; + const endData = `${year}-${month}-${day} ${timeString}`; + this.currTimeList = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? {startTime: this.datetimeModelDefault[0], endTime: this.datetimeModelDefault[1]} : {startTime: startData, endTime: endData}; this.datetimeModel = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? this.datetimeModelDefault : [startData, endData]; this.fnChartView({}); diff --git a/src/views/resource/monitorBoard/monitorBoardView.vue b/src/views/resource/monitorBoard/monitorBoardView.vue index 76066b1..78fdc12 100644 --- a/src/views/resource/monitorBoard/monitorBoardView.vue +++ b/src/views/resource/monitorBoard/monitorBoardView.vue @@ -133,17 +133,25 @@ this.activeType = this.activeTypeOne; this.paramsData = this.$route && this.$route.query; this.configModel = this.paramsData && this.paramsData.id ? Number(this.paramsData.id) : ''; - let startData = ''; - let endData = ''; - const year = new Date().getFullYear(); - const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月 - const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8） - const prevDay = String(new Date().getDate() - 1).padStart(2, '0'); - const hours = String(new Date().getHours()).padStart(2, '0') + ':'; - const minutes = String(new Date().getMinutes()).padStart(2, '0') + ':'; - const seconds = String(new Date().getSeconds()).padStart(2, '0'); - startData = `${year}-${month}-${prevDay}` + ' ' + hours + minutes + seconds; - endData = `${year}-${month}-${day}` + ' ' + hours + minutes + seconds; + const now = new Date(); + // 获取当前时间 + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + // 正确计算前一天（处理跨月情况） + const prevDate = new Date(now); + prevDate.setDate(now.getDate() - 1); + const prevYear = prevDate.getFullYear(); + const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0'); + const prevDay = String(prevDate.getDate()).padStart(2, '0'); + // 构建时间字符串 + const timeString = `${hours}:${minutes}:${seconds}`; + const startData = `${prevYear}-${prevMonth}-${prevDay} ${timeString}`; + const endData = `${year}-${month}-${day} ${timeString}`; + this.currTimeList = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? {startTime: this.datetimeModelOne[0], endTime: this.datetimeModelOne[1]} : {startTime: startData, endTime: endData}; this.datetimeModel = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? this.datetimeModelOne : [startData, endData]; this.timeModel = this.timeModelOne; diff --git a/src/views/resource/mtrAgent/lossRateChart.vue b/src/views/resource/mtrAgent/lossRateChart.vue index 07516db..72eeae8 100644 --- a/src/views/resource/mtrAgent/lossRateChart.vue +++ b/src/views/resource/mtrAgent/lossRateChart.vue @@ -51,7 +51,9 @@ params[this.dialogRowData.clientId]['jointName'] = '丢包率'; this.activeShowList.push(this.dialogRowData.clientId); this.chartDataLit = params; - this.getEchartList(params); + this.$nextTick(() => { + this.getEchartList(params); + }); } else if (val === 'type_false') { } }, @@ -71,7 +73,7 @@ titleVal: {textAlign: 'left', left: '1%'}, yAxisName: ' ', gridTop: '35%', - tooltipFormatter: {valueToop: {num: -1, msg: '探测失败'}}, + tooltipFormatter: {customList: true, valueToop: {num: -1, msg: '探测失败'}}, legend: {}, lineXData: [], dataList: [{ @@ -87,17 +89,25 @@ }, created() { this.paramsData = this.$route && this.$route.query; - let startData = ''; - let endData = ''; - const year = new Date().getFullYear(); - const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月 - const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8） - const prevDay = String(new Date().getDate() - 1).padStart(2, '0'); - const hours = String(new Date().getHours()).padStart(2, '0') + ':'; - const minutes = String(new Date().getMinutes()).padStart(2, '0') + ':'; - const seconds = String(new Date().getSeconds()).padStart(2, '0'); - startData = `${year}-${month}-${prevDay}` + ' ' + hours + minutes + seconds; - endData = `${year}-${month}-${day}` + ' ' + hours + minutes + seconds; + const now = new Date(); + // 获取当前时间 + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + // 正确计算前一天（处理跨月情况） + const prevDate = new Date(now); + prevDate.setDate(now.getDate() - 1); + const prevYear = prevDate.getFullYear(); + const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0'); + const prevDay = String(prevDate.getDate()).padStart(2, '0'); + // 构建时间字符串 + const timeString = `${hours}:${minutes}:${seconds}`; + const startData = `${prevYear}-${prevMonth}-${prevDay} ${timeString}`; + const endData = `${year}-${month}-${day} ${timeString}`; + this.currTimeList = {startTime: startData, endTime: endData}; this.defaultTimes = [startData, endData]; if (!this.open) { @@ -126,9 +136,17 @@ chartList.dateDataTrans['dateRange'] = this.defaultTimes; lossRateByMtr(Object.assign({}, {clientId: resVal[item].clientId, mtrClientId: resVal[item].mtrClientId || null}, this.currTimeList)).then(res => { if (res && res.data) { + let yDataList = []; + if (res.data.yData && res.data.yData.packetLossRate) { + if (res.data.yData && res.data.yData.deployDevice) { + yDataList = res.data.yData.packetLossRate.map((yItem,index) => {return {value: yItem, content: res.data.yData.deployDevice[index]}}); + } else { + yDataList = res.data.yData.packetLossRate || []; + } + } chartList.dataVal.lineXData = res.data && res.data.xData || []; - chartList.dataVal.dataList[0].data = res.data.yData && res.data.yData.packetLossRate || []; - chartList.dataVal.lastYDataNum = chartList.dataVal.dataList[0].data.length > 0 ? chartList.dataVal.dataList[0].data[chartList.dataVal.dataList[0].data.length - 1] : null; + chartList.dataVal.dataList[0].data = yDataList || []; + chartList.dataVal.lastYDataNum = chartList.dataVal.dataList[0].data.length > 0 ? chartList.dataVal.dataList[0].data[chartList.dataVal.dataList[0].data.length - 1].value : null; this.$set(this.chartDataLit, item, Object.assign({}, this.chartDataLit[item], {echartList: [chartList]})); } }); diff --git a/src/views/resource/serverRegister/monitorChart.vue b/src/views/resource/serverRegister/monitorChart.vue index de029e3..da592ac 100644 --- a/src/views/resource/serverRegister/monitorChart.vue +++ b/src/views/resource/serverRegister/monitorChart.vue @@ -258,23 +258,25 @@ } }, created() { - let startData = ''; - let endData = ''; - let todyTime = ''; - const year = new Date().getFullYear(); - const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月 - const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8） - const prevDay = String(new Date().getDate() - 1).padStart(2, '0'); - const hours = String(new Date().getHours()).padStart(2, '0') + ':'; - const minutes = String(new Date().getMinutes()).padStart(2, '0') + ':'; - const seconds = String(new Date().getSeconds()).padStart(2, '0'); - startData = `${year}-${month}-${prevDay}` + ' ' + hours + minutes + seconds; - endData = `${year}-${month}-${day}` + ' ' + hours + minutes + seconds; - // startData = `${year}-${month}-${prevDay} 00:00:00`; - // endData = `${year}-${month}-${day} 23:59:59`; - // todyTime = `${year}-${month}-${day}`; - // this.firstTabTime = {startTime: todyTime + ' 00:00:00', endTime: todyTime + ' 23:59:59'}; - // this.firstTabTimeArr = [todyTime + ' 00:00:00', todyTime + ' 23:59:59']; + const now = new Date(); + // 获取当前时间 + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + // 正确计算前一天（处理跨月情况） + const prevDate = new Date(now); + prevDate.setDate(now.getDate() - 1); + const prevYear = prevDate.getFullYear(); + const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0'); + const prevDay = String(prevDate.getDate()).padStart(2, '0'); + // 构建时间字符串 + const timeString = `${hours}:${minutes}:${seconds}`; + const startData = `${prevYear}-${prevMonth}-${prevDay} ${timeString}`; + const endData = `${year}-${month}-${day} ${timeString}`; + this.firstTabTime = {startTime: startData, endTime: endData}; this.firstTabTimeArr = [startData, endData]; this.currTimeList = {startTime: startData, endTime: endData}; diff --git a/src/views/resource/switchRegister/monitorChart.vue b/src/views/resource/switchRegister/monitorChart.vue index 441d80b..857c619 100644 --- a/src/views/resource/switchRegister/monitorChart.vue +++ b/src/views/resource/switchRegister/monitorChart.vue @@ -178,23 +178,25 @@ } }, created() { - let startData = ''; - let endData = ''; - let todyTime = ''; - const year = new Date().getFullYear(); - const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月 - const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8） - const prevDay = String(new Date().getDate() - 1).padStart(2, '0'); - const hours = String(new Date().getHours()).padStart(2, '0') + ':'; - const minutes = String(new Date().getMinutes()).padStart(2, '0') + ':'; - const seconds = String(new Date().getSeconds()).padStart(2, '0'); - startData = `${year}-${month}-${prevDay}` + ' ' + hours + minutes + seconds; - endData = `${year}-${month}-${day}` + ' ' + hours + minutes + seconds; - // startData = `${year}-${month}-${prevDay} 00:00:00`; - // endData = `${year}-${month}-${day} 23:59:59`; - // todyTime = `${year}-${month}-${day}`; - // this.firstTabTime = {startTime: todyTime + ' 00:00:00', endTime: todyTime + ' 23:59:59'}; - // this.firstTabTimeArr = [todyTime + ' 00:00:00', todyTime + ' 23:59:59']; + const now = new Date(); + // 获取当前时间 + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + // 正确计算前一天（处理跨月情况） + const prevDate = new Date(now); + prevDate.setDate(now.getDate() - 1); + const prevYear = prevDate.getFullYear(); + const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0'); + const prevDay = String(prevDate.getDate()).padStart(2, '0'); + // 构建时间字符串 + const timeString = `${hours}:${minutes}:${seconds}`; + const startData = `${prevYear}-${prevMonth}-${prevDay} ${timeString}`; + const endData = `${year}-${month}-${day} ${timeString}`; + this.firstTabTime = {startTime: startData, endTime: endData}; this.firstTabTimeArr = [startData, endData]; this.currTimeList = {startTime: startData, endTime: endData};