|
|
|
@ -69,8 +69,7 @@
|
|
|
|
<div class="top-selector">
|
|
|
|
<div class="top-selector">
|
|
|
|
<el-date-picker v-model="dateRange" style="width: 360px" class="custom-date-picker"
|
|
|
|
<el-date-picker v-model="dateRange" style="width: 360px" class="custom-date-picker"
|
|
|
|
value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="至"
|
|
|
|
value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="至"
|
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate"
|
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
|
@panel-change="handlePanelChange" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="trend-graph-container">
|
|
|
|
<div class="trend-graph-container">
|
|
|
|
<div class="trend-item" v-for="item in trendGraphData" :key="item.id">
|
|
|
|
<div class="trend-item" v-for="item in trendGraphData" :key="item.id">
|
|
|
|
@ -81,6 +80,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div v-if="activeKey === 'alarmConfig'" key="alarmConfig" class="sub-content alarm-config">
|
|
|
|
<div v-if="activeKey === 'alarmConfig'" key="alarmConfig" class="sub-content alarm-config">
|
|
|
|
<!-- 告警配置 -->
|
|
|
|
<!-- 告警配置 -->
|
|
|
|
<div class="search-bar">
|
|
|
|
<div class="search-bar">
|
|
|
|
@ -264,7 +264,7 @@
|
|
|
|
</a-modal>
|
|
|
|
</a-modal>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
axios.defaults.baseURL = 'http://192.168.1.80:9501'; // 临时服务地址
|
|
|
|
axios.defaults.baseURL = 'http://192.168.1.198:9501'; // 临时服务地址
|
|
|
|
axios.defaults.timeout = 10000;
|
|
|
|
axios.defaults.timeout = 10000;
|
|
|
|
const findParentByKey = (tree, targetKey) => {
|
|
|
|
const findParentByKey = (tree, targetKey) => {
|
|
|
|
for (const parent of tree) {
|
|
|
|
for (const parent of tree) {
|
|
|
|
@ -867,7 +867,7 @@
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const searchValue = ref('');
|
|
|
|
const searchValue = ref('');
|
|
|
|
const treeRef = ref()
|
|
|
|
const treeRef = ref()
|
|
|
|
const activeKey = ref('prpdAndPrps')
|
|
|
|
const activeKey = ref('historyTrend')
|
|
|
|
const tabsArr = [
|
|
|
|
const tabsArr = [
|
|
|
|
{ key: 'historyTrend', tab: '历史趋势' },
|
|
|
|
{ key: 'historyTrend', tab: '历史趋势' },
|
|
|
|
{ key: 'alarmConfig', tab: '告警管理' },
|
|
|
|
{ key: 'alarmConfig', tab: '告警管理' },
|
|
|
|
@ -1107,37 +1107,12 @@
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const childRefs = ref({});
|
|
|
|
const childRefs = ref({});
|
|
|
|
const dateRange = ref([]);
|
|
|
|
const dateRange = ref([]);
|
|
|
|
const currentYear = ref(new Date().getFullYear());
|
|
|
|
|
|
|
|
const allowedMonths = ref([]); // 允许选择的月份（如[1,5]表示1月和5月）
|
|
|
|
|
|
|
|
// 禁用日期规则（核心逻辑）
|
|
|
|
|
|
|
|
const disabledDate = (time) => {
|
|
|
|
|
|
|
|
const date = new Date(time);
|
|
|
|
|
|
|
|
const year = date.getFullYear();
|
|
|
|
|
|
|
|
const month = date.getMonth() + 1;
|
|
|
|
|
|
|
|
// 规则1：只允许选择当前年份
|
|
|
|
|
|
|
|
if (year !== currentYear.value) return true;
|
|
|
|
|
|
|
|
// 规则2：只允许选择API返回的月份
|
|
|
|
|
|
|
|
if (!allowedMonths.value.includes(month)) return true;
|
|
|
|
|
|
|
|
// 规则3：限制选择范围为1个月内（当已选开始日期时）
|
|
|
|
|
|
|
|
if (dateRange.value?.[0]) {
|
|
|
|
|
|
|
|
const startDate = new Date(dateRange.value[0]);
|
|
|
|
|
|
|
|
const minDate = new Date(startDate);
|
|
|
|
|
|
|
|
const maxDate = new Date(startDate);
|
|
|
|
|
|
|
|
minDate.setMonth(minDate.getMonth() - 1);
|
|
|
|
|
|
|
|
maxDate.setMonth(maxDate.getMonth() + 1);
|
|
|
|
|
|
|
|
return date < minDate || date > maxDate;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlePanelChange = (date) => {
|
|
|
|
|
|
|
|
currentYear.value = date?.[0]?.getFullYear() || 2025
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const fetchHistoryTrendData = async (id, time) => {
|
|
|
|
const fetchHistoryTrendData = async (id, time) => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const params = {
|
|
|
|
const params = {
|
|
|
|
current: 1,
|
|
|
|
current: 1,
|
|
|
|
startTimeStr: time[0],
|
|
|
|
startTime: time[0],
|
|
|
|
endTimeStr: time[1],
|
|
|
|
endTime: time[1],
|
|
|
|
monitorKey: id,
|
|
|
|
monitorKey: id,
|
|
|
|
pageSize: 99999
|
|
|
|
pageSize: 99999
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -1147,7 +1122,7 @@
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
id,
|
|
|
|
id,
|
|
|
|
// label:
|
|
|
|
// label:
|
|
|
|
data: result
|
|
|
|
data: result || []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error(`请求 ${id} 时出错:`, error);
|
|
|
|
console.error(`请求 ${id} 时出错:`, error);
|
|
|
|
@ -1156,6 +1131,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 初始化趋势echart
|
|
|
|
// 初始化趋势echart
|
|
|
|
const initTrendGraph = (el, data) => {
|
|
|
|
const initTrendGraph = (el, data) => {
|
|
|
|
|
|
|
|
console.log(data, 'data');
|
|
|
|
const legendData = [
|
|
|
|
const legendData = [
|
|
|
|
{ id: 'avg', name: '平均值' },
|
|
|
|
{ id: 'avg', name: '平均值' },
|
|
|
|
{ id: 'maxValue', name: '最大值' },
|
|
|
|
{ id: 'maxValue', name: '最大值' },
|
|
|
|
@ -1249,7 +1225,7 @@
|
|
|
|
// tab在历史趋势监听勾选节点
|
|
|
|
// tab在历史趋势监听勾选节点
|
|
|
|
watch([checkedKeys1, dateRange], async ([keys, time]) => {
|
|
|
|
watch([checkedKeys1, dateRange], async ([keys, time]) => {
|
|
|
|
const [starTime, endTime] = time || [];
|
|
|
|
const [starTime, endTime] = time || [];
|
|
|
|
if (unref(activeKey) !== 'historyTrend' || !keys.length || !starTime || !endTime) return;
|
|
|
|
if (unref(activeKey) !== 'historyTrend' || !starTime || !endTime) return;
|
|
|
|
// 先清理之前的图表
|
|
|
|
// 先清理之前的图表
|
|
|
|
Object.values(chartGroups.value).forEach(group => {
|
|
|
|
Object.values(chartGroups.value).forEach(group => {
|
|
|
|
group.instances.forEach(chart => chart.dispose());
|
|
|
|
group.instances.forEach(chart => chart.dispose());
|
|
|
|
@ -1287,17 +1263,6 @@
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const checkedKeys1Str = computed(() => checkedKeys1.value.join(',')) // 选中节点的字符串 为了减少监听
|
|
|
|
|
|
|
|
// 请求可选择的月份
|
|
|
|
|
|
|
|
watch([checkedKeys1Str, currentYear], async ([keys, year]) => {
|
|
|
|
|
|
|
|
if (!keys || !year) return
|
|
|
|
|
|
|
|
dateRange.value = []
|
|
|
|
|
|
|
|
const { data: { result } } = await axios.post(`/ldpdtools/trendData/multHasData?year=${year}`, unref(checkedKeys1))
|
|
|
|
|
|
|
|
allowedMonths.value = result.map(item => Number(item))
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
|
|
immediate: true
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 告警信息
|
|
|
|
// 告警信息
|
|
|
|
const configLoading = ref(false)
|
|
|
|
const configLoading = ref(false)
|
|
|
|
const columns = [
|
|
|
|
const columns = [
|
|
|
|
@ -1554,8 +1519,6 @@
|
|
|
|
trendGraphData.value = []
|
|
|
|
trendGraphData.value = []
|
|
|
|
childRefs.value = {}
|
|
|
|
childRefs.value = {}
|
|
|
|
dateRange.value = []
|
|
|
|
dateRange.value = []
|
|
|
|
currentYear.value = new Date().getFullYear()
|
|
|
|
|
|
|
|
allowedMonths.value = []
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (oldKey === 'alarmConfig') {
|
|
|
|
if (oldKey === 'alarmConfig') {
|
|
|
|
// 销毁告警管理
|
|
|
|
// 销毁告警管理
|
|
|
|
@ -1618,9 +1581,6 @@
|
|
|
|
monitorModalForm,
|
|
|
|
monitorModalForm,
|
|
|
|
onMonitorModalSubmit,
|
|
|
|
onMonitorModalSubmit,
|
|
|
|
dateRange,
|
|
|
|
dateRange,
|
|
|
|
handlePanelChange,
|
|
|
|
|
|
|
|
currentYear,
|
|
|
|
|
|
|
|
disabledDate,
|
|
|
|
|
|
|
|
checkTree,
|
|
|
|
checkTree,
|
|
|
|
trendGraphData,
|
|
|
|
trendGraphData,
|
|
|
|
trendGraphRefs,
|
|
|
|
trendGraphRefs,
|
|
|
|
|
guoyixuan
2 months ago