feat:累计prpd联调

css/common.css

@@ -1,9 +1,42 @@
+/* 整个滚动条的区域 */
+::-webkit-scrollbar {
+  width: 10px; /* 滚动条的宽度 */
+  height: 10px; /* 滚动条的高度，用于水平滚动条 */
+}
+
+/* 滚动条的轨道（背景） */
+::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 轨道背景色 */
+  border-radius: 10px; /* 轨道圆角 */
+}
+
+/* 滚动条的滑块 */
+::-webkit-scrollbar-thumb {
+  background: #888; /* 滑块颜色 */
+  border-radius: 10px; /* 滑块圆角 */
+}
+
+/* 鼠标悬停在滑块上时 */
+::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 悬停时的滑块颜色 */
+}
+
+/* 滚动条的角落（当同时有垂直和水平滚动条时） */
+::-webkit-scrollbar-corner {
+  background: #fff;
+}
+
+/* 滚动条两端的按钮（很少用到，默认通常是隐藏的） */
+/* ::-webkit-scrollbar-button {
+  background: #eee;
+} */
 #app {
   box-sizing: border-box;
   padding: 12px;
   width: 100%;
   height: 100%;
 }
+
 .content {
   background: #fff;
   width: 100%;
@@ -13,6 +46,7 @@
   border-radius: 4px;
   position: relative;
 }
+
 .context-menu {
   position: absolute;
   z-index: 9;
@@ -23,14 +57,17 @@
   border-radius: 2px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
+
 .context-menu > div {
   cursor: pointer;
   font-size: 14px;
   line-height: 22px;
 }
+
 .context-menu > div:hover {
   background-color: #f5f5f5;
 }
+
 .tree-content {
   padding: 12px 0;
   width: 20%;
@@ -38,52 +75,64 @@
   display: flex;
   flex-direction: column;
 }
+
 .input-box {
   padding: 0 8px;
 }
+
 .tree-box {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
 }
+
 .ant-tree-child-tree li .ant-tree-switcher {
   visibility: hidden;
 }
+
 .bottom-btns {
   padding: 8px 8px 0 8px;
   display: flex;
   justify-content: center;
 }
+
 .right-content {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
 }
+
 .panel-views {
   flex: 1;
   min-height: 0;
 }
+
 .sub-content {
   height: 100%;
   width: 100%;
 }
+
 .history-trend {
   display: flex;
   flex-direction: column;
 }
+
 .top-timer {
   padding-bottom: 18px;
 }
+
 .top-timer .custom-date-picker {
   width: 280px !important;
 }
+
 .trend-graph-container {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 .graph-container {
   height: 240px;
   border-bottom: 1px dashed #e8e8e8;
@@ -91,52 +140,66 @@
   display: flex;
   flex-direction: column;
 }
+
 .graph-container .line-graph {
   flex: 1;
   min-height: 0;
 }
+
 .alarm-config .grid-content {
   padding: 0 24px;
 }
+
 .alarm-config .search-bar {
   padding: 0 24px 0 24px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }
+
 .alarm-config .search-bar .search-item {
   margin-right: 24px;
   margin-bottom: 12px;
 }
+
 .alarm-config .search-bar .break {
   flex-basis: 100%;
-  height: 0; /* 避免影响垂直间距 */
+  height: 0;
+  /* 避免影响垂直间距 */
 }
 
 .config-page {
-  padding: 0 24px;
+  padding: 0 24px 24px 24px;
+  overflow-y: auto;
 }
+
 .config-page .station-config {
   padding-bottom: 12px;
   border-bottom: 1px dashed #e8e8e8;
 }
+
 .config-page .station-config .title,
 .config-page .path-config .title {
   font-size: 14px;
   font-weight: 700;
 }
+
 .path-config {
   margin-top: 12px;
 }
+
 .config-page .path-config .path-item {
   margin-top: 12px;
 }
+
 .config-page .path-config .path-item .name {
   font-size: 14px;
 }
+
 .config-page .path-config .path-item .row {
   margin: 4px 0;
 }
+
 .config-page .station-config .station {
   margin-top: 12px;
 }
@@ -144,27 +207,30 @@
 .config-page .delete-bar {
   margin-top: 12px;
 }
+
 .config-page .delete-bar .delete-time {
   margin-right: 12px;
 }
+
 .config-page .delete-bar .label {
   margin-right: 8px;
 }
+
 .is-root > .el-tree-node__content {
   background-color: transparent !important;
   color: inherit !important;
 }
-.total-prpd,
+
 .prpd-and-prps {
   display: flex;
   flex-direction: column;
 }
-.total-prpd .trend-box,
+
 .prpd-and-prps .trend-box {
   height: 180px;
   border-bottom: 1px solid #e8e8e8;
 }
-.total-prpd .prpd-box,
+
 .prpd-and-prps .prpd-and-prps-box {
   flex: 1;
   min-height: 0;
@@ -172,40 +238,114 @@
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr);
 }
-.total-prpd .prpd-box .total-prpd-item,
+
 .prpd-and-prps .prpd-and-prps-box .prpd-and-prps-item {
   border: 1px solid #e8e8e8;
 }
+
 .prps-and-prpd-container {
   height: 100%;
   width: 100%;
   position: relative;
 }
+
 .prps-and-prpd-container .switcher {
   position: absolute;
   bottom: 0;
 }
+
 .prps-and-prpd-container .switcher > span {
   cursor: pointer;
   font-size: 12px;
   margin-left: 8px;
 }
+
 .prps-and-prpd-container .switcher .active-span {
   color: #1890ff;
 }
+
 .init-warning-tips {
   font-size: 12px;
   color: red;
 }
+
 .event-count-box {
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
 }
+.event-count-box .pd-type-grid {
+  padding: 24px 12px;
+}
 .top-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-right: 8px;
 }
+
+.total-prpd-panel {
+  display: flex;
+  flex-direction: column;
+}
+.total-prpd-panel .prpd-box {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+.total-prpd-panel .prpd-box .time-sider {
+  padding: 8px 0 0 8px;
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+}
+.total-prpd-panel .prpd-box .time-sider .title {
+  font-size: 14px;
+  font-weight: 700;
+  height: 24px;
+}
+.total-prpd-panel .prpd-box .time-sider .list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  font-size: 12px;
+}
+.total-prpd-panel .prpd-box .time-sider .list .time-item {
+  cursor: pointer;
+  padding: 2px 4px;
+}
+.total-prpd-panel .prpd-box .time-sider .list .time-item:hover {
+  background-color: #e6f2ff; /* 背景变浅蓝 */
+  transform: translateY(-3px); /* 向上轻微浮动 */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 阴影加深 */
+}
+.total-prpd-panel .prpd-box .time-sider .list .time-active-item {
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 阴影加深 */
+  color: #1890ff;
+  font-weight: 700;
+}
+.total-prpd-panel .prpd-box .totle-prpds {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+.total-prpd-panel .prpd-box .totle-prpds .total-prpd-item {
+  border: 1px solid #e8e8e8;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.total-prpd-panel .prpd-box .totle-prpds .total-prpd-item .total-prpd-title {
+  padding-left: 12px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 700;
+}
+.total-prpd-panel .prpd-box .totle-prpds .total-prpd-item .prpd {
+  flex: 1;
+}

index.html

@@ -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"
+                            <div class="totle-prpds">
-                                :data="item" />
+                                <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>`,
+                template: `<div> 
-                props: ['data'], // 接收父组件传递的数据
+                           <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: {
+                            // axisPointer: {
-                                show: true,
+                            //     show: true,
-                                snap: true,
+                            //     snap: true,
-                                lineStyle: {
+                            //     lineStyle: {
-                                    type: 'dashed',
+                            //         type: 'dashed',
-                                },
+                            //     },
-                                label: {
+                            //     label: {
-                                    show: true,
+                            //         show: true,
-                                    margin: 6,
+                            //         margin: 6,
-                                    backgroundColor: '#556',
+                            //         backgroundColor: '#556',
-                                    textStyle: {
+                            //         textStyle: {
-                                        color: '#fff'
+                            //             color: '#fff'
-                                    }
+                            //         }
-                                },
+                            //     },
-                                link: [{
+                            //     link: [{
-                                    xAxisId: ['xAxisLeft-yAxisTop', 'xAxisLeft-yAxisBottom']
+                            //         xAxisId: ['xAxisLeft-yAxisTop', 'xAxisLeft-yAxisBottom']
-                                }, {
+                            //     }, {
-                                    xAxisId: ['xAxisRight-yAxisTop', 'xAxisRight-yAxisBottom']
+                            //         xAxisId: ['xAxisRight-yAxisTop', 'xAxisRight-yAxisBottom']
-                                }, {
+                            //     }, {
-                                    yAxisId: ['xAxisLeft-yAxisTop', 'xAxisRight-yAxisTop']
+                            //         yAxisId: ['xAxisLeft-yAxisTop', 'xAxisRight-yAxisTop']
-                                }, {
+                            //     }, {
-                                    yAxisId: ['xAxisLeft-yAxisBottom', 'xAxisRight-yAxisBottom']
+                            //         yAxisId: ['xAxisLeft-yAxisBottom', 'xAxisRight-yAxisBottom']
-                                }]
+                            //     }]
-                            },
+                            // },
                             grid: {
-                                left: '10%',
+                                left: '8%',
                                 right: '10%',
-                                top: '15%',
+                                top: '8%',
-                                bottom: '15%',
+                                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) {
+                    // 请求PRPD数据
-                        let dataArr = [];
+                    async fetchPRPDData(data) {
-                        let newArr = [];
+                        const params = {
-                        for (let i = 1; i <= 100; i++) {
+                            // startTime: data.time[0],
-                            let obj = []
+                            // endTime: data.time[1],
-                            for (let j = 0; j < 50; j++) {
+                            // monitorKey: data.monitorKey,
-                                obj.push(arr[i + j * 100 - 1])
+                            // mock数据
-                            }
+                            startTime: '2025-07-16 22:50:54',
-                            newArr.push(obj);
+                            endTime: '2025-07-16 23:05:54',
-                        };
+                            monitorKey: '50100542_1'
-                        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]);
-                            }
                         }
-                        // console.log(dataArr)
+                        const { data: { code, result } } = await axios.get(`/ldpdtools/eventData/getPrpdByParam`, {
-                        data = dataArr;
+                            params,
-                    }
+                        })
-                },
+                        if (code === 200) {
-                created() {
+                            console.log(result, 'res');
-                    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 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 itemIdToMoves = ["ALARM_TYPE", "MERGIN_ROOT_PATH"];
-                        const itemToMove = unref(allPathCongfigs).find(item => item.key === itemIdToMove);
+                        const startOfItemToMove = unref(allPathCongfigs).find(item => item.key === itemIdToMoves[0]);
-                        const remainingItems = unref(allPathCongfigs).filter(item => item.key !== itemIdToMove);
+                        const endOfItemToMove = unref(allPathCongfigs).find(item => item.key === itemIdToMoves[1]);
-                        if (itemToMove) {
+                        const remainingItems = unref(allPathCongfigs).filter(item => !itemIdToMoves.includes(item.key));
-                            allPathCongfigs.value = [...remainingItems, itemToMove];
+                        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: {