|
|
|
|
@ -19,7 +19,6 @@
|
|
|
|
|
<script src="./js/echarts-gl.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="./css/common.css">
|
|
|
|
|
<script type="text/javascript" src="./js/axios.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
|
@ -117,13 +116,28 @@
|
|
|
|
|
</a-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="activeKey === 'countPRPD'" key="countPRPD" class="sub-content total-prpd">
|
|
|
|
|
<div v-if="activeKey === 'countPRPD'" key="countPRPD" class="sub-content total-prpd-panel">
|
|
|
|
|
<!-- 累计PRPD -->
|
|
|
|
|
<div class="trend-box"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<history-trend-graph :data='trendGraphInfo' used-tab="countPRPD"
|
|
|
|
|
@get-time-list="getTimeList" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="prpd-box">
|
|
|
|
|
<!-- 累计PRPD组件 -->
|
|
|
|
|
<total-prpd class="total-prpd-item" v-for="(item,index) in totalPrpds" :key="index"
|
|
|
|
|
:data="item" />
|
|
|
|
|
<div class="totle-prpds">
|
|
|
|
|
<total-prpd class="total-prpd-item" v-for="(item,index) in totalPrpds" :key="index"
|
|
|
|
|
:data="item" :time="prpdTimeArr" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="time-sider">
|
|
|
|
|
<div class="title">时间:</div>
|
|
|
|
|
<div class="list">
|
|
|
|
|
<div v-for="item in timeList" :key="item"
|
|
|
|
|
:class="['time-item',activeTime==item?'time-active-item':'']"
|
|
|
|
|
@click="selectTime(item)">
|
|
|
|
|
{{item}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="activeKey === 'prpdAndPrps'" key="prpdAndPrps" class="sub-content prpd-and-prps">
|
|
|
|
|
@ -173,7 +187,11 @@
|
|
|
|
|
<div class="path-item" v-for="item in allPathCongfigs" :key="item.key">
|
|
|
|
|
<div class="name">{{item.label}} :</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<el-input v-model="item.value" style="width: 560px" placeholder="请输入路径" />
|
|
|
|
|
<el-radio-group v-if="item.key==='ALARM_TYPE'" v-model="item.value">
|
|
|
|
|
<el-radio value="3">国网</el-radio>
|
|
|
|
|
<el-radio value="2">南网</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
<el-input v-else v-model="item.value" style="width: 560px" placeholder="请输入路径" />
|
|
|
|
|
</div>
|
|
|
|
|
<a-button size="small" type="primary" style="margin-right: 4px;"
|
|
|
|
|
@click="savePathConfig(item)">保存</a-button>
|
|
|
|
|
@ -236,7 +254,7 @@
|
|
|
|
|
<a-input v-model:value="monitorModalForm.stationName" disabled />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="监测点Key" name="monitorKey" :rules="[
|
|
|
|
|
{
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入监测点Key',
|
|
|
|
|
},
|
|
|
|
|
@ -268,7 +286,7 @@
|
|
|
|
|
</a-modal>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
const { createApp, ref, onMounted, unref, watch, reactive, computed, nextTick, onUnmounted, components } = Vue;
|
|
|
|
|
const { createApp, ref, onMounted, unref, watch, reactive, computed, nextTick, onUnmounted, components, provide, inject } = Vue;
|
|
|
|
|
const { message } = antd;
|
|
|
|
|
axios.defaults.baseURL = 'http://192.168.1.198:9501'; // 临时服务地址
|
|
|
|
|
axios.defaults.timeout = 10000;
|
|
|
|
|
@ -329,6 +347,46 @@
|
|
|
|
|
});
|
|
|
|
|
return result.find(item => item.key === key)?.name
|
|
|
|
|
}
|
|
|
|
|
// 生成21个时间点
|
|
|
|
|
const generateTimePoints = (centralTimeString) => {
|
|
|
|
|
const timePoints = [];
|
|
|
|
|
const centralDate = new Date(centralTimeString);
|
|
|
|
|
if (isNaN(centralDate.getTime())) {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
const firstPointTime = centralDate.getTime() - (10 * 15 * 60 * 1000);
|
|
|
|
|
for (let i = 0; i < 21; i++) {
|
|
|
|
|
const currentTime = new Date(firstPointTime + (i * 15 * 60 * 1000));
|
|
|
|
|
// 4. 格式化时间点为 'YYYY-MM-DD HH:mm:ss' 格式
|
|
|
|
|
const year = currentTime.getFullYear();
|
|
|
|
|
const month = (currentTime.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始
|
|
|
|
|
const day = currentTime.getDate().toString().padStart(2, '0');
|
|
|
|
|
const hours = currentTime.getHours().toString().padStart(2, '0');
|
|
|
|
|
const minutes = currentTime.getMinutes().toString().padStart(2, '0');
|
|
|
|
|
const seconds = currentTime.getSeconds().toString().padStart(2, '0');
|
|
|
|
|
const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
|
|
timePoints.push(formattedTime);
|
|
|
|
|
}
|
|
|
|
|
return timePoints;
|
|
|
|
|
}
|
|
|
|
|
// 获取前十五分钟数据
|
|
|
|
|
const getFifteenMinutesBefore = (timeString) => {
|
|
|
|
|
const originalDate = new Date(timeString);
|
|
|
|
|
if (isNaN(originalDate.getTime())) {
|
|
|
|
|
return null; // 返回 null 或抛出错误，表示输入无效
|
|
|
|
|
}
|
|
|
|
|
const originalTimeInMs = originalDate.getTime();
|
|
|
|
|
const fifteenMinutesInMs = 15 * 60 * 1000;
|
|
|
|
|
const newTimeInMs = originalTimeInMs - fifteenMinutesInMs;
|
|
|
|
|
const newDate = new Date(newTimeInMs);
|
|
|
|
|
const year = newDate.getFullYear();
|
|
|
|
|
const month = (newDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1
|
|
|
|
|
const day = newDate.getDate().toString().padStart(2, '0');
|
|
|
|
|
const hours = newDate.getHours().toString().padStart(2, '0');
|
|
|
|
|
const minutes = newDate.getMinutes().toString().padStart(2, '0');
|
|
|
|
|
const seconds = newDate.getSeconds().toString().padStart(2, '0');
|
|
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
|
|
}
|
|
|
|
|
// 历史趋势图组件
|
|
|
|
|
const trendGraphRefs = ref([]);
|
|
|
|
|
watch(trendGraphRefs, (arr) => {
|
|
|
|
|
@ -359,6 +417,11 @@
|
|
|
|
|
data: {
|
|
|
|
|
type: Object,
|
|
|
|
|
default: () => { }
|
|
|
|
|
},
|
|
|
|
|
// 使用的场景
|
|
|
|
|
usedTab: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: 'historyTrend'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 定义常量，不定义在data（减少性能开销）
|
|
|
|
|
@ -405,6 +468,20 @@
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 2,
|
|
|
|
|
},
|
|
|
|
|
markLine: {
|
|
|
|
|
data: [], // 初始为空，点击时再添加
|
|
|
|
|
symbol: 'none', // 不显示标记线两端的箭头
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#ff0000', // 标记线的颜色，例如红色
|
|
|
|
|
type: 'solid',
|
|
|
|
|
width: 1.5
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false // 标记线上不显示标签
|
|
|
|
|
},
|
|
|
|
|
// 可以在这里设置 z 值让标记线在最上层
|
|
|
|
|
// z: 99
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
const legend = {
|
|
|
|
|
data: HISTORY_TREND_LEGEND.map(s => s.name), // 图例数据
|
|
|
|
|
@ -465,6 +542,32 @@
|
|
|
|
|
}
|
|
|
|
|
// 3. 设置配置项并渲染图表
|
|
|
|
|
this.chart.setOption(option);
|
|
|
|
|
// 图数据的点击事件（获取时间段数据)
|
|
|
|
|
this.chart.on('click', (params) => {
|
|
|
|
|
if (this.usedTab === 'countPRPD' && params.componentType === 'series' && params.dataIndex !== undefined) {
|
|
|
|
|
// 或者直接获取 X 轴的值
|
|
|
|
|
const clickedXValue = params.name;
|
|
|
|
|
const updatedSeries = this.chart.getOption().series.map((s, idx) => {
|
|
|
|
|
// 克隆 series，防止直接修改option导致问题
|
|
|
|
|
const newSeries = JSON.parse(JSON.stringify(s));
|
|
|
|
|
// 更新 markLine 数据
|
|
|
|
|
newSeries.markLine = {
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#ff0000',
|
|
|
|
|
type: 'solid',
|
|
|
|
|
width: 1.5
|
|
|
|
|
},
|
|
|
|
|
data: [{ xAxis: clickedXValue }]
|
|
|
|
|
};
|
|
|
|
|
return newSeries;
|
|
|
|
|
});
|
|
|
|
|
this.chart.setOption({
|
|
|
|
|
series: updatedSeries
|
|
|
|
|
});
|
|
|
|
|
this.$emit('getTimeList', clickedXValue);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getChart() {
|
|
|
|
|
return this.chart;
|
|
|
|
|
@ -474,60 +577,91 @@
|
|
|
|
|
}
|
|
|
|
|
// 累计prpd组件
|
|
|
|
|
const totalPrpd = {
|
|
|
|
|
template: `<div ref="prpdBoxRef" style="width: 100%; height: 100%;"></div>`,
|
|
|
|
|
props: ['data'], // 接收父组件传递的数据
|
|
|
|
|
template: `<div>
|
|
|
|
|
<div class="total-prpd-title" :style="{color:!!data.monitorName?'red':''}">{{data.monitorName ||'暂无监测点'}}</div>
|
|
|
|
|
<div ref="prpdBoxRef" class="prpd"></div>
|
|
|
|
|
</div>`,
|
|
|
|
|
props: ['data', 'time'], // 接收父组件传递的数据
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
// prpd所需参数
|
|
|
|
|
mixPRPDParams() {
|
|
|
|
|
return {
|
|
|
|
|
...this.data,
|
|
|
|
|
time: this.time
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
mixPRPDParams: {
|
|
|
|
|
handler(newVal) {
|
|
|
|
|
if (newVal.monitorKey && newVal.time[0]) {
|
|
|
|
|
// 新增操作
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.fetchPRPDData(newVal)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
if (!newVal.monitorKey) {
|
|
|
|
|
// 删除操作
|
|
|
|
|
this.myChart.setOption({
|
|
|
|
|
series: [{
|
|
|
|
|
name: 'PRPD数据',
|
|
|
|
|
data: []
|
|
|
|
|
}]
|
|
|
|
|
}, { notMerge: false });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
deep: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.myChart = null
|
|
|
|
|
this.resizeObserver = null
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.initPrpd()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initPrpd() {
|
|
|
|
|
const chartDom = this.$refs.prpdBoxRef;
|
|
|
|
|
this.myChart = echarts.init(chartDom);
|
|
|
|
|
const option = {
|
|
|
|
|
backgroundColor: '#ffffff', // 设置背景色为深色，与图片相似
|
|
|
|
|
title: {
|
|
|
|
|
text: 'PRPD',
|
|
|
|
|
left: 'center',
|
|
|
|
|
top: '2%',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#444444', // 标题文字颜色
|
|
|
|
|
fontSize: 20
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisPointer: {
|
|
|
|
|
show: true,
|
|
|
|
|
snap: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
margin: 6,
|
|
|
|
|
backgroundColor: '#556',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
link: [{
|
|
|
|
|
xAxisId: ['xAxisLeft-yAxisTop', 'xAxisLeft-yAxisBottom']
|
|
|
|
|
}, {
|
|
|
|
|
xAxisId: ['xAxisRight-yAxisTop', 'xAxisRight-yAxisBottom']
|
|
|
|
|
}, {
|
|
|
|
|
yAxisId: ['xAxisLeft-yAxisTop', 'xAxisRight-yAxisTop']
|
|
|
|
|
}, {
|
|
|
|
|
yAxisId: ['xAxisLeft-yAxisBottom', 'xAxisRight-yAxisBottom']
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
// axisPointer: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// snap: true,
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// type: 'dashed',
|
|
|
|
|
// },
|
|
|
|
|
// label: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// margin: 6,
|
|
|
|
|
// backgroundColor: '#556',
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: '#fff'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// link: [{
|
|
|
|
|
// xAxisId: ['xAxisLeft-yAxisTop', 'xAxisLeft-yAxisBottom']
|
|
|
|
|
// }, {
|
|
|
|
|
// xAxisId: ['xAxisRight-yAxisTop', 'xAxisRight-yAxisBottom']
|
|
|
|
|
// }, {
|
|
|
|
|
// yAxisId: ['xAxisLeft-yAxisTop', 'xAxisRight-yAxisTop']
|
|
|
|
|
// }, {
|
|
|
|
|
// yAxisId: ['xAxisLeft-yAxisBottom', 'xAxisRight-yAxisBottom']
|
|
|
|
|
// }]
|
|
|
|
|
// },
|
|
|
|
|
grid: {
|
|
|
|
|
left: '10%',
|
|
|
|
|
left: '8%',
|
|
|
|
|
right: '10%',
|
|
|
|
|
top: '15%',
|
|
|
|
|
bottom: '15%',
|
|
|
|
|
top: '8%',
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
@ -607,7 +741,7 @@
|
|
|
|
|
{
|
|
|
|
|
name: 'PRPD数据',
|
|
|
|
|
type: 'scatter', // 使用折线图来模拟曲线
|
|
|
|
|
symbolSize: 2.5,
|
|
|
|
|
symbolSize: 1,
|
|
|
|
|
data: [],
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
@ -618,97 +752,22 @@
|
|
|
|
|
});
|
|
|
|
|
this.resizeObserver.observe(chartDom);
|
|
|
|
|
},
|
|
|
|
|
datting(arr) {
|
|
|
|
|
let dataArr = [];
|
|
|
|
|
let newArr = [];
|
|
|
|
|
for (let i = 1; i <= 100; i++) {
|
|
|
|
|
let obj = []
|
|
|
|
|
for (let j = 0; j < 50; j++) {
|
|
|
|
|
obj.push(arr[i + j * 100 - 1])
|
|
|
|
|
}
|
|
|
|
|
newArr.push(obj);
|
|
|
|
|
};
|
|
|
|
|
let lay1 = []
|
|
|
|
|
for (let i = 0; i < newArr.length; i++) {
|
|
|
|
|
let lay2 = [];
|
|
|
|
|
for (let k = 0; k < 80; k++) {
|
|
|
|
|
let lay3 = [];
|
|
|
|
|
for (let j = 0; j < newArr[i].length; j++) {
|
|
|
|
|
if (newArr[i][j][2] == k) {
|
|
|
|
|
lay3.push(newArr[i][j])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (lay3 != '') {
|
|
|
|
|
lay2.push(lay3)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
lay1.push(lay2)
|
|
|
|
|
// console.log(lay1)
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < lay1.length; i++) {
|
|
|
|
|
for (let j = 0; j < lay1[i].length; j++) {
|
|
|
|
|
for (let k = 0; k < lay1[i][j].length; k++) {
|
|
|
|
|
for (let m = 0; m < lay1[i][j][k].length; m++) {
|
|
|
|
|
lay1[i][j][k][0] = lay1[i][j].length;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
dataArr.push(lay1[i][j][0]);
|
|
|
|
|
}
|
|
|
|
|
// 请求PRPD数据
|
|
|
|
|
async fetchPRPDData(data) {
|
|
|
|
|
const params = {
|
|
|
|
|
// startTime: data.time[0],
|
|
|
|
|
// endTime: data.time[1],
|
|
|
|
|
// monitorKey: data.monitorKey,
|
|
|
|
|
// mock数据
|
|
|
|
|
startTime: '2025-07-16 22:50:54',
|
|
|
|
|
endTime: '2025-07-16 23:05:54',
|
|
|
|
|
monitorKey: '50100542_1'
|
|
|
|
|
}
|
|
|
|
|
// console.log(dataArr)
|
|
|
|
|
data = dataArr;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.myChart = null
|
|
|
|
|
this.resizeObserver = null
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.initPrpd()
|
|
|
|
|
})
|
|
|
|
|
// fetch('./three/prpd.json') // JSON文件路径
|
|
|
|
|
// .then(response => response.json()) // 解析为JSON对象
|
|
|
|
|
// .then(data => {
|
|
|
|
|
// let index = 0;
|
|
|
|
|
// const intervalId = setInterval(() => {
|
|
|
|
|
// const curret = data[index].map(item => {
|
|
|
|
|
|
|
|
|
|
// const y = Number(item[0]) - 80
|
|
|
|
|
// return [item[1], y, item[2]]
|
|
|
|
|
// });
|
|
|
|
|
// const countArr = data[index].map(item => item[2])
|
|
|
|
|
// const minCount = Math.min(...countArr)
|
|
|
|
|
// const maxCount = Math.max(...countArr)
|
|
|
|
|
// console.log(curret);
|
|
|
|
|
|
|
|
|
|
// this.myChart.setOption({
|
|
|
|
|
// series: [{
|
|
|
|
|
// name: 'PRPD数据',
|
|
|
|
|
// data: curret
|
|
|
|
|
// }],
|
|
|
|
|
// visualMap: {
|
|
|
|
|
// min: minCount,
|
|
|
|
|
// max: maxCount
|
|
|
|
|
// }
|
|
|
|
|
// }, { notMerge: false });
|
|
|
|
|
// index = (index + 1) % data.length; // 循环索引
|
|
|
|
|
// }, 1000);
|
|
|
|
|
// })
|
|
|
|
|
// .catch(error => console.error('加载JSON失败:', error));
|
|
|
|
|
fetch('./three/prps copy.json')
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(res => {
|
|
|
|
|
let dbm = res.slice(5000, 10000);
|
|
|
|
|
if (dbm.length == 0) {
|
|
|
|
|
dbm = res.slice(0, 5000)
|
|
|
|
|
} else if (dbm.length < 5000) {
|
|
|
|
|
dbm = res.slice(5000, 5000 + dbm.length).concat(res.slice(0, 5000 - dbm.length))
|
|
|
|
|
}
|
|
|
|
|
let arr = [];
|
|
|
|
|
deal(arr, dbm)
|
|
|
|
|
this.datting(arr)
|
|
|
|
|
const result = data.map(item => [item[1], item[2] - 80, item[0]])
|
|
|
|
|
const { data: { code, result } } = await axios.get(`/ldpdtools/eventData/getPrpdByParam`, {
|
|
|
|
|
params,
|
|
|
|
|
})
|
|
|
|
|
if (code === 200) {
|
|
|
|
|
console.log(result, 'res');
|
|
|
|
|
const countArr = result.map(item => item[2])
|
|
|
|
|
const minCount = Math.min(...countArr)
|
|
|
|
|
const maxCount = Math.max(...countArr)
|
|
|
|
|
@ -722,8 +781,8 @@
|
|
|
|
|
max: maxCount
|
|
|
|
|
}
|
|
|
|
|
}, { notMerge: false });
|
|
|
|
|
})
|
|
|
|
|
.catch(error => console.error('加载JSON失败:', error));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
// 放在vue中的data会卡顿
|
|
|
|
|
@ -1014,13 +1073,24 @@
|
|
|
|
|
historyTrendGraph,
|
|
|
|
|
},
|
|
|
|
|
template: `<div class='event-count-box'>
|
|
|
|
|
<history-trend-graph :data='graphInfo' />
|
|
|
|
|
<history-trend-graph :data='graphInfo' used-tab="eventCount"/>
|
|
|
|
|
<div class="pd-type-grid">
|
|
|
|
|
<el-table :data="pdTypeData" border>
|
|
|
|
|
<el-table-column prop="typeCn" label="局放类型"/>
|
|
|
|
|
<el-table-column prop="max" label="最大值" />
|
|
|
|
|
<el-table-column prop="avg" label="平均值" />
|
|
|
|
|
<el-table-column prop="count" label="事件数" />
|
|
|
|
|
<el-table-column prop="plusCount" label="脉冲数" />
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
pdTypeData: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
props: ['time', 'selectedKey', 'treeData'],
|
|
|
|
|
inject: ['provideAllPdTypes'],
|
|
|
|
|
computed: {
|
|
|
|
|
graphInfo() {
|
|
|
|
|
return {
|
|
|
|
|
@ -1031,7 +1101,43 @@
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
graphInfo: {
|
|
|
|
|
handler(value) {
|
|
|
|
|
const { startTime, endTime, key } = value
|
|
|
|
|
if (!key || !startTime) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.feachGrid()
|
|
|
|
|
},
|
|
|
|
|
deep: true,
|
|
|
|
|
immediate: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取表格数据
|
|
|
|
|
async feachGrid() {
|
|
|
|
|
this.loading = true
|
|
|
|
|
const params = {
|
|
|
|
|
startTime: this.time[0],
|
|
|
|
|
endTime: this.time[1],
|
|
|
|
|
monitorKey: this.selectedKey,
|
|
|
|
|
}
|
|
|
|
|
const { data: { result } } = await axios.get(`/ldpdtools/eventData/getEventStatistics`, {
|
|
|
|
|
params,
|
|
|
|
|
})
|
|
|
|
|
const res = result || {}
|
|
|
|
|
const data = [] // 展示的数据
|
|
|
|
|
Object.keys(res).forEach(key => {
|
|
|
|
|
const type = unref(this.provideAllPdTypes).find(el => el.value == key)
|
|
|
|
|
data.push({
|
|
|
|
|
typeCn: type.label,
|
|
|
|
|
typeEn: type.value,
|
|
|
|
|
...res[key]
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
this.pdTypeData = data || []
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
createApp({
|
|
|
|
|
@ -1056,7 +1162,7 @@
|
|
|
|
|
};
|
|
|
|
|
const searchValue = ref('');
|
|
|
|
|
const treeRef = ref()
|
|
|
|
|
const activeKey = ref('historyTrend')
|
|
|
|
|
const activeKey = ref('countPRPD')
|
|
|
|
|
const tabsArr = [
|
|
|
|
|
{ key: 'historyTrend', tab: '历史趋势' },
|
|
|
|
|
{ key: 'alarmConfig', tab: '告警管理' },
|
|
|
|
|
@ -1102,13 +1208,17 @@
|
|
|
|
|
treeMenuInfo.menuY = event.clientY - 12
|
|
|
|
|
treeMenuInfo.data = data
|
|
|
|
|
}
|
|
|
|
|
const checkTree = (checkedKeys, { checkedKeys: currentKeys }) => {
|
|
|
|
|
const checkTree = (checkedNode, { checkedKeys: currentKeys }) => {
|
|
|
|
|
if (currentKeys.length > 6) {
|
|
|
|
|
message.warning('最多只能勾选6个节点！');
|
|
|
|
|
// 阻止勾选：回退到前一次的状态
|
|
|
|
|
checkedKeys1.value = checkedKeys1.value.slice(0, 6);
|
|
|
|
|
treeRef.value.setCheckedKeys(checkedKeys1.value);
|
|
|
|
|
} else {
|
|
|
|
|
if (unref(activeKey) === 'countPRPD') {
|
|
|
|
|
// 处理累计prpd逻辑
|
|
|
|
|
handleCountPRPDSelect(checkedNode)
|
|
|
|
|
}
|
|
|
|
|
checkedKeys1.value = currentKeys
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1438,24 +1548,68 @@
|
|
|
|
|
// 累计prpd
|
|
|
|
|
const totalPrpds = ref([
|
|
|
|
|
{
|
|
|
|
|
monitorKey: ''
|
|
|
|
|
monitorKey: '', // 监控点key
|
|
|
|
|
monitorName: '' // 监控点名称
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
monitorKey: ''
|
|
|
|
|
monitorKey: '',
|
|
|
|
|
monitorName: ''
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
monitorKey: ''
|
|
|
|
|
monitorKey: '',
|
|
|
|
|
monitorName: ''
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
monitorKey: ''
|
|
|
|
|
monitorKey: '',
|
|
|
|
|
monitorName: ''
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
monitorKey: ''
|
|
|
|
|
monitorKey: '',
|
|
|
|
|
monitorName: ''
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
monitorKey: ''
|
|
|
|
|
monitorKey: '',
|
|
|
|
|
monitorName: ''
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
const timeList = ref([]) // 事件列表
|
|
|
|
|
const activeTime = ref('')
|
|
|
|
|
const prpdTimeArr = ref([]) // prpd筛选时间
|
|
|
|
|
// 历史趋势所需数据
|
|
|
|
|
const trendGraphInfo = computed(() => {
|
|
|
|
|
return {
|
|
|
|
|
key: unref(selectedKey),
|
|
|
|
|
label: findMonitorNameByKey(unref(fullTreeData), unref(selectedKey)),
|
|
|
|
|
startTime: unref(dateRange)[0],
|
|
|
|
|
endTime: unref(dateRange)[1],
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const getTimeList = (time) => {
|
|
|
|
|
timeList.value = generateTimePoints(time)
|
|
|
|
|
}
|
|
|
|
|
const selectTime = async (time) => {
|
|
|
|
|
activeTime.value = time
|
|
|
|
|
const before15Min = getFifteenMinutesBefore(time)
|
|
|
|
|
prpdTimeArr.value = [before15Min, time]
|
|
|
|
|
console.log(prpdTimeArr.value, ' prpdTimeArr.value ');
|
|
|
|
|
}
|
|
|
|
|
const handleCountPRPDSelect = ({ key: currentKey }) => {
|
|
|
|
|
const index = unref(checkedKeys1).indexOf(currentKey);
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
// 取消选中
|
|
|
|
|
const deleteItem = unref(totalPrpds).find(item => item.monitorKey === currentKey)
|
|
|
|
|
deleteItem.monitorKey = ''
|
|
|
|
|
deleteItem.monitorName = ''
|
|
|
|
|
} else {
|
|
|
|
|
// 选中
|
|
|
|
|
const addItem = unref(totalPrpds).find(item => !item.monitorKey)
|
|
|
|
|
addItem.monitorKey = currentKey
|
|
|
|
|
addItem.monitorName = findMonitorNameByKey(unref(fullTreeData), currentKey)
|
|
|
|
|
}
|
|
|
|
|
console.log(unref(totalPrpds), ' unref(totalPrpds)');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
// 配置页面
|
|
|
|
|
const stationName1 = ref('')
|
|
|
|
|
const deleteAlarmTimes = ref([]) // 删除告警时间段
|
|
|
|
|
@ -1518,8 +1672,23 @@
|
|
|
|
|
const allPathCongfigs = ref([]) // 所有路径配置
|
|
|
|
|
const isCurrentInit = ref(false) // 是否正在初始化
|
|
|
|
|
const initTips = ref('')
|
|
|
|
|
const allPdTypes = ref([])
|
|
|
|
|
provide('provideAllPdTypes', allPdTypes)
|
|
|
|
|
// 获取放电类型
|
|
|
|
|
const getPdTypes = async () => {
|
|
|
|
|
const types = []
|
|
|
|
|
const { data: { result } } = await axios.get('/ldpdtools/config/getPdTypes');
|
|
|
|
|
Object.keys(result).forEach(key => {
|
|
|
|
|
types.push({
|
|
|
|
|
value: key,
|
|
|
|
|
label: result[key]
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
allPdTypes.value = types
|
|
|
|
|
}
|
|
|
|
|
// 获取所有配置项
|
|
|
|
|
const getAllConfigs = async () => {
|
|
|
|
|
getPdTypes()
|
|
|
|
|
allPathCongfigs.value = []
|
|
|
|
|
const { data: { result } } = await axios.post('/ldpdtools/config/getConfigKey')
|
|
|
|
|
Object.keys(result).forEach(key => {
|
|
|
|
|
@ -1535,11 +1704,12 @@
|
|
|
|
|
item.value = paths[item.key] || ''
|
|
|
|
|
})
|
|
|
|
|
// 排序
|
|
|
|
|
const itemIdToMove = "MERGIN_ROOT_PATH";
|
|
|
|
|
const itemToMove = unref(allPathCongfigs).find(item => item.key === itemIdToMove);
|
|
|
|
|
const remainingItems = unref(allPathCongfigs).filter(item => item.key !== itemIdToMove);
|
|
|
|
|
if (itemToMove) {
|
|
|
|
|
allPathCongfigs.value = [...remainingItems, itemToMove];
|
|
|
|
|
const itemIdToMoves = ["ALARM_TYPE", "MERGIN_ROOT_PATH"];
|
|
|
|
|
const startOfItemToMove = unref(allPathCongfigs).find(item => item.key === itemIdToMoves[0]);
|
|
|
|
|
const endOfItemToMove = unref(allPathCongfigs).find(item => item.key === itemIdToMoves[1]);
|
|
|
|
|
const remainingItems = unref(allPathCongfigs).filter(item => !itemIdToMoves.includes(item.key));
|
|
|
|
|
if (startOfItemToMove && endOfItemToMove) {
|
|
|
|
|
allPathCongfigs.value = [startOfItemToMove, ...remainingItems, endOfItemToMove];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 保存路径
|
|
|
|
|
@ -1680,7 +1850,14 @@
|
|
|
|
|
initCatalogue,
|
|
|
|
|
isCurrentInit,
|
|
|
|
|
initTips,
|
|
|
|
|
trendGraphRefs
|
|
|
|
|
trendGraphRefs,
|
|
|
|
|
allPdTypes,
|
|
|
|
|
trendGraphInfo,
|
|
|
|
|
getTimeList,
|
|
|
|
|
timeList,
|
|
|
|
|
selectTime,
|
|
|
|
|
activeTime,
|
|
|
|
|
prpdTimeArr
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
|
guoyixuan
2 months ago