diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 8d62ee4..91f1cb5 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -341,3 +341,6 @@ aside { left: 53% !important; //transform: translate(-50%, -50%) !important; } +.el-dialog__wrapper { + z-index: 99999999!important; +} diff --git a/src/components/echartsList/line.vue b/src/components/echartsList/line.vue index 2a72446..fd44251 100644 --- a/src/components/echartsList/line.vue +++ b/src/components/echartsList/line.vue @@ -84,6 +84,12 @@ this.getList(this.title, this.lineData); }); } + // 确保使用 window 对象挂载 + window.detailsVal = this.detailsVal; + }, + beforeUnmount() { + // 组件销毁时清理全局函数 + delete window.detailsVal; }, methods: { getList(title, dataXY) { @@ -162,45 +168,52 @@ y = y - size.contentSize[1] - 20; } - return [x + 5, y + 10]; + return [x - 10, y + 10]; }, - formatter: !dataXY.tooltipFormatter ? null : function(params) { + formatter: !dataXY.tooltipFormatter ? null : function(params) { // 主要应对与MTRAgent丢包趋势图模块的功能 // 获取当前悬停的日期 const date = params[0].name; // 构建提示框HTML内容 let html = `
${date}
`; - html+=` - - - - - - - - - - `; // 遍历所有系列 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+= `
最新一跳平均延迟: ${content[content.length - 1].avgLatency}(ms)
+
最新一跳丢包率: ${content[content.length - 1].lossPercent}(%)
`; + // 如果不是弹窗这显示按钮，可点击查看弹窗信息 + if (dataXY.tooltipFormatter && !dataXY.tooltipFormatter.defaultType) { + html+= ``; + } + } else { + let valueparams = paramItem.value; + if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.valueToop) { + let value = dataXY.tooltipFormatter.valueToop; + valueparams = paramItem.value && paramItem.value === value.num ? value.msg : paramItem.value || paramItem.value === 0 ? paramItem.value : '-'; + // 为每个系列创建一行 + html += ` +
+
+ + ${paramItem.seriesName} +
+ ${valueparams} +
`; + } } + } else { + // 为每个系列创建一行 + html += ` +
+
+ + ${paramItem.seriesName} +
+ ${paramItem.value} +
`; } }); - html+=`
路径平均延迟(ms)丢包率%地址国家运营商省市
${contItem.hopNumber || ''}${contItem.avgLatency || ''}${contItem.lossPercent || ''}${contItem.ipAddress || ''}${contItem.country || ''}${contItem.isp || ''}${contItem.province || ''}${contItem.city || ''}
`; return html; } }, @@ -301,13 +314,18 @@ },1000); } }); - // 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮） + // ​当鼠标在图形元素内部移动时持续触发 + lineDataListIntance.on('mousemove', (params) => { + this.$emit('showChartTabList', {value: params.name, tableVal: params.data}); + }); + // 2. 关键：拦截默认的鼠标移入事件，不做任何操作（即不取消高亮） lineDataListIntance.on('mouseover', (params) => { // 这个函数体为空，或者只包含一些不涉及downplay的逻辑 // 这样就阻止了鼠标移出时高亮自动消失 }); // 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮） lineDataListIntance.on('mouseout', (params) => { + this.$emit('showChartTabList', {}); // 这个函数体为空，或者只包含一些不涉及downplay的逻辑 // 这样就阻止了鼠标移出时高亮自动消失 }); @@ -388,6 +406,10 @@ } // let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData; // this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList}); + }, + // tooltip中的按钮点击事件 + detailsVal(xTime, content) { + this.$emit('dialogChartTabList', {value: xTime, tableVal: this.lineData.dataList[0].data[content]}); } } } diff --git a/src/components/table/index.vue b/src/components/table/index.vue index 7b21ccb..7d997f9 100644 --- a/src/components/table/index.vue +++ b/src/components/table/index.vue @@ -123,12 +123,12 @@ }, queryParams: { type: Object, - default: { + default: () => ({ total: 0, pageNum: 1, pageSize: 10, layout: 'total, sizes, prev, pager, next, jumper' - } + }) }, config: { type: Object, diff --git a/src/views/earnManage/server/analysisChart.vue b/src/views/earnManage/server/analysisChart.vue index 306d194..c9949af 100644 --- a/src/views/earnManage/server/analysisChart.vue +++ b/src/views/earnManage/server/analysisChart.vue @@ -40,10 +40,10 @@ @@ -300,9 +300,9 @@ let chartList = []; res.data.forEach((item, index) => { let newChartData = JSON.parse(JSON.stringify(this.echartData[this.resourceType === 2 ? 1 : 0])); - let outContent = `最后一个值：${item && item.other && item.other.lastOutSpeedGb ? item.other.lastOutSpeedGb + 'G' : '0'} 平均值：${item && item.other && item.other.avgOutSpeedGb ? item.other.avgOutSpeedGb + 'G' : '0'} 最大值：${item && item.other && item.other.maxOutSpeedGb ? item.other.maxOutSpeedGb + 'G' : '0'}`; - let inContent = `最后一个值：${item && item.other && item.other.lastInSpeedGb ? item.other.lastInSpeedGb + 'G' : '0'} 平均值：${item && item.other && item.other.avgInSpeedGb ? item.other.avgInSpeedGb + 'G' : '0'} 最大值：${item && item.other && item.other.maxInSpeedGb ? item.other.maxInSpeedGb + 'G' : '0'}`; - let kdContent = `(${item && item['95value'] ? item['95value'] + 'mbit' : '0'} ${this.resourceType === 2 ? 'in+out' : 'out'})`; + let outContent = `最后一个值：${item && item.other && item.other.lastOutSpeedGb ? item.other.lastOutSpeedGb + 'G' : '0G'} 平均值：${item && item.other && item.other.avgOutSpeedGb ? item.other.avgOutSpeedGb + 'G' : '0G'} 最大值：${item && item.other && item.other.maxOutSpeedGb ? item.other.maxOutSpeedGb + 'G' : '0G'}`; + let inContent = `最后一个值：${item && item.other && item.other.lastInSpeedGb ? item.other.lastInSpeedGb + 'G' : '0G'} 平均值：${item && item.other && item.other.avgInSpeedGb ? item.other.avgInSpeedGb + 'G' : '0G'} 最大值：${item && item.other && item.other.maxInSpeedGb ? item.other.maxInSpeedGb + 'G' : '0G'}`; + let kdContent = `(${item && item['95value'] ? item['95value'] + 'mbit' : '0mbit'} ${this.resourceType === 2 ? 'in+out' : 'out'})`; newChartData.title = item && item.name; newChartData.yAxisName = item && item.other && item.other.recommendedUnit ? '单位' + item.other.recommendedUnit : ' '; newChartData['unitModel'] = item && item.other && item.other.recommendedUnit || ''; @@ -342,9 +342,9 @@ res.data.forEach((item, index) => { let newChartData = JSON.parse(JSON.stringify(this.echartData[this.resourceType === 2 ? 1 : 0])); newChartData.dataList[newChartData.dataList.length - 1].name = '95带宽值/月'; - let outContent = `最后一个值：${item && item.other && item.other.lastOutSpeedGb ? item.other.lastOutSpeedGb + 'G' : '0'} 平均值：${item && item.other && item.other.avgOutSpeedGb ? item.other.avgOutSpeedGb + 'G' : '0'} 最大值：${item && item.other && item.other.maxOutSpeedGb ? item.other.maxOutSpeedGb + 'G' : '0'}`; - let inContent = `最后一个值：${item && item.other && item.other.lastInSpeedGb ? item.other.lastInSpeedGb + 'G' : '0'} 平均值：${item && item.other && item.other.avgInSpeedGb ? item.other.avgInSpeedGb + 'G' : '0'} 最大值：${item && item.other && item.other.maxInSpeedGb ? item.other.maxInSpeedGb + 'G' : '0'}`; - let kdContent = `(${item && item['95value'] ? item['95value'] + 'mbit' : '0'} ${this.resourceType === 2 ? 'in+out' : 'out'})`; + let outContent = `最后一个值：${item && item.other && item.other.lastOutSpeedGb ? item.other.lastOutSpeedGb + 'G' : '0G'} 平均值：${item && item.other && item.other.avgOutSpeedGb ? item.other.avgOutSpeedGb + 'G' : '0G'} 最大值：${item && item.other && item.other.maxOutSpeedGb ? item.other.maxOutSpeedGb + 'G' : '0G'}`; + let inContent = `最后一个值：${item && item.other && item.other.lastInSpeedGb ? item.other.lastInSpeedGb + 'G' : '0G'} 平均值：${item && item.other && item.other.avgInSpeedGb ? item.other.avgInSpeedGb + 'G' : '0G'} 最大值：${item && item.other && item.other.maxInSpeedGb ? item.other.maxInSpeedGb + 'G' : '0G'}`; + let kdContent = `(${item && item['95value'] ? item['95value'] + 'mbit' : '0mbit'} ${this.resourceType === 2 ? 'in+out' : 'out'})`; newChartData.title = item && item.name; newChartData.yAxisName = item && item.other && item.other.recommendedUnit ? '单位' + item.other.recommendedUnit : ' '; newChartData['unitModel'] = item && item.other && item.other.recommendedUnit || ''; @@ -448,8 +448,8 @@ } }); }, - async chartDataEvent(valData, unit, resourceType) { - if (resourceType === 1) { + async chartDataEvent(valData, unit, type) { + if (type === 'day') { await Promise.all([ this.$modal.loading(), this.graDailyList({startTime: this.timeList[1][0], endTime: this.timeList[1][1]}, {unit: unit}), diff --git a/src/views/resource/mtrAgent/lossRateChart.vue b/src/views/resource/mtrAgent/lossRateChart.vue index 72eeae8..97c4c15 100644 --- a/src/views/resource/mtrAgent/lossRateChart.vue +++ b/src/views/resource/mtrAgent/lossRateChart.vue @@ -1,5 +1,5 @@