TRKJ/profitManage1.2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

联调监控看板分组流量图

Browse Source 
1、联调监控看板分组流量图
2、联调分组的增删改查功能
3、优化多选/单选下拉增删改查功能
4、添加图表图例太多时滚动条展示
This commit is contained in:
康冉冉
2026-01-23 19:27:09 +08:00
parent 9b2c0eb638
commit ccd7a7179f
9 changed files with 294 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/customModule/selectModule.vue
+121 -86
View File
@@ -3,11 +3,12 @@
<!-- 多选下拉框 -->
<el-select
v-model="selectedValues"
multiple
:multiple="multiple"
placeholder="请选择或搜索"
@visible-change="handleVisibleChange"
class="multi-select w100"
class="multi-select"
ref="selectRef"
clearable
@remove-tag="handleRemoveTag"
>
<!-- 自定义下拉面板 -->
@@ -46,7 +47,7 @@
:key="item.value"
class="editable-option"
:class="{
'selected': selectedValues.includes(item.value),
'selected': multiple ? selectedValues.includes(item.value) : selectedValues === item.value,
'editing': editingItem === item.value
}"
@click.stop="handleOptionClick(item.value)"
@@ -79,13 +80,21 @@
<!-- 查看模式 -->
<div v-else class="view-mode">
<!-- 多选复选框 -->
<!-- 多选复选框 用于多选下拉-->
<!-- <el-checkbox-->
<!-- :value="selectedValues.includes(item.value)"-->
<!-- @click.native.stop="toggleOption(item.value)"-->
<!-- class="option-checkbox"-->
<!-- ></el-checkbox>-->
<!-- 单选指示器（选中时的圆点） 用于单选下拉-->
<!-- <div class="option-radio-indicator">-->
<!-- <div-->
<!-- class="radio-dot"-->
<!-- :class="{ 'selected': selectedValue === item.value }"-->
<!-- ></div>-->
<!-- </div>-->
<!-- 选项标签（高亮搜索关键词） -->
<span class="option-label" :title="item.label">
<template v-if="searchQuery && highlightSearch">
@@ -139,7 +148,7 @@
},
// 初始选中的值
value: {
type: Array,
type: [String, Number, Array],
default: () => []
},
// 是否允许创建新选项
@@ -156,6 +165,10 @@
width: {
type: String,
default: '100%'
},
multiple: {
type: Boolean,
default: false
}
},
data() {
@@ -163,7 +176,7 @@
// 所有选项
options: [],
// 选中值
selectedValues: this.value,
selectedValues: null,
// 搜索关键词
searchQuery: '',
// 当前编辑的选项值
@@ -188,7 +201,11 @@
value: {
immediate: true,
handler(newVal) {
this.selectedValues = Array.isArray(newVal) ? newVal : [];
if (this.multiple) {
this.selectedValues = Array.isArray(newVal) ? newVal : [];
} else {
this.selectedValues = newVal;
}
}
},
selectedValues(newVal) {
@@ -304,8 +321,9 @@
value: newValue
};
this.options.push(newOption);
this.selectedValues.push(newValue);
// 新增的值更新到选项 并 默认选中
// this.options.push(newOption);
// this.selectedValues.push(newValue);
this.searchQuery = '';
this.filterOptions();
@@ -313,7 +331,7 @@
this.$emit('option-added', newOption);
this.$emit('options-updated', this.options);
this.$message.success('添加成功');
// this.$message.success('添加成功');
},
// 切换选项选中状态
@@ -328,10 +346,31 @@
// 选项点击事件
handleOptionClick(value) {
if (this.editingItem) {
return;
if (this.multiple) {
if (this.editingItem) {
return;
}
this.toggleOption(value);
} else {
this.selectedValues = value;
// 延迟更新原生select的状态
this.$nextTick(() => {
// 确保原生select的显示值更新
if (this.$refs.selectRef) {
// 手动触发input事件，让el-select更新显示
this.$refs.selectRef.blur();
}
});
// 选中后延迟关闭下拉框
setTimeout(() => {
this.dropdownVisible = false;
}, 100);
}
this.toggleOption(value);
this.handleChange(this.selectedValues);
},
// 选中值变化时
handleChange(val){
this.$emit('value-change', val);
},
// 开始编辑
@@ -341,8 +380,10 @@
// // 下一个tick聚焦到输入框
this.$nextTick(() => {
if (this.$refs.editInputRef && this.$refs.editInputRef.length > 0) {
this.$refs.editInputRef[0].focus();
if (this.$refs.editInputRef) {
if (this.$refs.editInputRef.length > 0) {
this.$refs.editInputRef[0].focus();
}
}
});
},
@@ -366,34 +407,41 @@
// 检查是否重复（排除自身）
const duplicate = this.options.find(
opt => opt.value !== oldValue && opt.label.toLowerCase() === newValue.toLowerCase()
opt => opt.value === oldValue && opt.label.toLowerCase() === newValue.toLowerCase()
);
if (duplicate) {
this.$message.warning('该选项已存在');
// this.$message.warning('该选项已存在');
this.editingItem = null;
this.saveType = false;
return;
}
// 更新选项
const index = this.options.findIndex(opt => opt.value === oldValue);
if (index !== -1) {
this.options[index] = {
...this.options[index],
label: newValue,
// value: newValue
};
// 如果原值被选中，更新选中值
const selectedIndex = this.selectedValues.indexOf(oldValue);
if (selectedIndex !== -1) {
this.selectedValues.splice(selectedIndex, 1, newValue);
}
}
// // 更新选项 针对不走接口的操作
// const index = this.options.findIndex(opt => opt.value === oldValue);
// if (index !== -1) {
// this.options[index] = {
// ...this.options[index],
// label: newValue,
// // value: newValue
// };
//
// // 如果原值被选中，更新选中值 多选下拉
// if (this.multiple) {
// const selectedIndex = this.selectedValues.indexOf(oldValue);
// if (selectedIndex !== -1) {
// this.selectedValues.splice(selectedIndex, 1, newValue);
// }
// } else {
// // 如果原值被选中，更新选中值 单选下拉
// if (this.selectedValue === oldValue) {
// this.selectedValue = newValue;
// }
// }
// }
this.editingItem = null;
this.filterOptions();
// 触发更新事件
this.$emit('option-updated', { oldValue, newValue: newValue });
this.$emit('options-updated', this.options);
@@ -408,34 +456,46 @@
// 删除选项
deleteOption(value) {
this.saveType = true;
this.$confirm('确定删除这个选项吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.options.findIndex(opt => opt.value === value);
if (index !== -1) {
this.options.splice(index, 1);
// 触发删除事件
this.$emit('option-deleted', value);
this.$emit('options-updated', this.options);
// 从选中值中移除
const selectedIndex = this.selectedValues.indexOf(value);
if (selectedIndex !== -1) {
this.selectedValues.splice(selectedIndex, 1);
}
}
this.editingItem = null;
this.filterOptions();
// 触发删除事件
this.$emit('option-deleted', value);
this.$emit('options-updated', this.options);
this.$message.success('删除成功');
this.saveType = false;
}).catch(() => {
this.saveType = false;
});
// this.saveType = true;
// this.$confirm('确定删除这个选项吗？', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const index = this.options.findIndex(opt => opt.value === value);
// if (index !== -1) {
// this.options.splice(index, 1);
//
// // 从选中值中移除 多选下拉
// if (this.multiple) {
// const selectedIndex = this.selectedValues.indexOf(value);
// if (selectedIndex !== -1) {
// this.selectedValues.splice(selectedIndex, 1);
// }
// } else {
// // 如果删除的是当前选中的选项，清空选中 单选下拉
// if (this.this.selectedValue === value) {
// this.selectedValue = '';
// }
// }
// }
//
// this.editingItem = null;
// this.filterOptions();
//
// // 触发删除事件
// this.$emit('option-deleted', value);
// this.$emit('options-updated', this.options);
//
// this.$message.success('删除成功');
// this.saveType = false;
// }).catch(() => {
// this.saveType = false;
// });
},
// 移除标签
@@ -458,6 +518,7 @@
// 下拉框显示状态变化
handleVisibleChange(visible) {
// 下拉框显隐与否
this.dropdownVisible = visible;
if (visible) {
// 下拉框打开时，如果有搜索框，聚焦
@@ -487,32 +548,6 @@
this.dropdownVisible = false;
}
},
// 获取当前所有选项
getOptions() {
return this.options;
},
// 添加选项（外部调用）
addOption(option) {
const processedOption = typeof option === 'string'
? { label: option, value: option }
: option;
this.options.push(processedOption);
this.filterOptions();
this.$emit('options-updated', this.options);
},
// 删除选项（外部调用）
removeOption(value) {
this.deleteOption(value);
},
// 清空选中
clearSelection() {
this.selectedValues = [];
}
}
}
</script>
src/components/echartsList/line.vue
+9 -4
View File
@@ -193,11 +193,16 @@
return [x - 5, y + 18];
},
formatter: !dataXY.tooltipFormatter ? null : function(params) { // 主要应对与MTRAgent丢包趋势图模块的功能
formatter: function(params) { // 主要应对与MTRAgent丢包趋势图模块的功能
// 获取当前悬停的日期
const date = params[0].name;
// 构建提示框HTML内容
let html = `<div>${date}</div>`;
let html = `<div><div>${date}</div>`;
if (params && params.length >= 7) {
html = `<div style="max-height: 175px; overflow-y: auto;">
<div>${date}</div>
`;
}
// 遍历所有系列
params.forEach(paramItem => {
if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.customList) {
@@ -230,11 +235,11 @@
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${paramItem.color}; margin-right: 8px;"></span>
<span style="color: #57606f;">${paramItem.seriesName} </span>
</div>
<span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${paramItem.value}</span>
<span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${paramItem.value || paramItem.value === 0 ? paramItem.value : '-'}</span>
</div>`;
}
});
return html;
return html += `</div>`;
}
},
grid: {