diff --git a/src/api/device-boot/communicate.ts b/src/api/device-boot/communicate.ts
index 13b5a2ce..f4414ef8 100644
--- a/src/api/device-boot/communicate.ts
+++ b/src/api/device-boot/communicate.ts
@@ -1,27 +1,43 @@
 import request from '@/utils/request'
 
 // 事件分析  获取数据
-export function getRunOnlineRateData(data:any) {
+export function getRunOnlineRateData(data: any) {
     return request({
-        url: "/device-boot/communicate/getRunOnlineRateData",
-        method: "post",
+        url: '/device-boot/communicate/getRunOnlineRateData',
+        method: 'post',
         data
-    });
+    })
 }
 // 事件分析  运行状态 获取数据
-export function getComFlagInfoData(data:any) {
+export function getComFlagInfoData(data: any) {
     return request({
-        url: "/device-boot/communicate/getComFlagInfoData",
-        method: "post",
+        url: '/device-boot/communicate/getComFlagInfoData',
+        method: 'post',
         data
-    });
+    })
 }
 
 // 事件分析  运行状态 获取数据
-export function getRunInfoData(data:any) {
+export function getRunInfoData(data: any) {
     return request({
-        url: "/device-boot/communicate/getRunInfoData",
-        method: "post",
+        url: '/device-boot/communicate/getRunInfoData',
+        method: 'post',
         data
-    });
-}
\ No newline at end of file
+    })
+}
+// 根据监测点id获取越限数值
+export function getOverLimitData(data: any) {
+    return request({
+        url: '/device-boot/line/getOverLimitData',
+        method: 'post',
+        params: data
+    })
+}
+// 获取监测点id取监测点信息
+export function getLineDetail(data: any) {
+    return request({
+        url: '/device-boot/commLine/getLineDetail',
+        method: 'get',
+        params: data
+    })
+}
diff --git a/src/api/event-boot/highAndLowPressure.ts b/src/api/event-boot/highAndLowPressure.ts
index de7a23af..5e8a4b27 100644
--- a/src/api/event-boot/highAndLowPressure.ts
+++ b/src/api/event-boot/highAndLowPressure.ts
@@ -15,4 +15,12 @@ export function updateEventReason(data: any) {
         method: 'post',
         data
     })
-}
\ No newline at end of file
+}
+//获取暂态事件明细
+export function queryEventDetailByEventId(params: any) {
+    return request({
+        url: '/event-boot/rmpEventDetail/queryEventDetailByEventId',
+        method: 'GET',
+        params
+    })
+}
diff --git a/src/api/user-boot/user.ts b/src/api/user-boot/user.ts
index d285f9c1..480dc2db 100644
--- a/src/api/user-boot/user.ts
+++ b/src/api/user-boot/user.ts
@@ -54,8 +54,15 @@ export function getUserById() {
 }
 
 // 刷新token
+// 导出一个名为refreshToken的函数，该函数返回一个Promise对象
 export function refreshToken(): Promise<any> {
+    // 调用useAdminInfo函数获取管理员信息，并将其赋值给adminInfo变量
     const adminInfo = useAdminInfo()
+    // 调用login函数，传入一个对象作为参数，该对象包含grant_type、refresh_token和username三个属性
+    // grant_type设置为'refresh_token'，表示使用刷新令牌的方式获取新的访问令牌
+    // refresh_token使用adminInfo中的refresh_token属性
+    // username使用adminInfo中的loginName属性
+    // 返回login函数的调用结果，即一个Promise对象
     return login({
         grant_type: 'refresh_token',
         refresh_token: adminInfo.refresh_token,
diff --git a/src/assets/11111.gif b/src/assets/11111.gif
new file mode 100644
index 00000000..2986314b
Binary files /dev/null and b/src/assets/11111.gif differ
diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue
index e59645d6..453c7738 100644
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -15,8 +15,7 @@ import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
 const config = useConfig()
 // import { nextTick } from 'process'
-
-
+const emit = defineEmits(['triggerPoint'])
 color[0] = config.layout.elementUiPrimary[0]
 const chartRef = ref<HTMLDivElement>()
 
@@ -37,7 +36,7 @@ const initChart = () => {
         chart?.dispose()
     }
     // chart?.dispose()
-    chart = echarts.init(chartRef.value as HTMLDivElement)
+    chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
     const options = {
         title: {
             left: 'center',
@@ -69,10 +68,11 @@ const initChart = () => {
         },
         toolbox: {
             right: 20,
-            top: 20,
+            top: 15,
             feature: {
                 saveAsImage: {
-                    title: '保存图片',
+                    title: '', // 按钮标题
+                    icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
                 },
 
                 ...(props.options?.toolbox?.featureProps || null)
@@ -87,8 +87,8 @@ const initChart = () => {
             ...(props.options?.toolbox || null)
         },
         legend: {
-            right: 20,
-            top: 0,
+            right: 50,
+            top: 25,
             itemGap: 10,
             itemStyle: {},
             // textStyle: {
@@ -100,7 +100,7 @@ const initChart = () => {
             ...(props.options?.legend || null)
         },
         grid: {
-            top: '60px',
+            top: '70px',
             left: '30px',
             right: '70px',
             bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
@@ -132,7 +132,13 @@ const initChart = () => {
     handlerBar(options)
     // 处理柱状图
     chart.setOption(options, true)
-
+    chart.group = 'group'
+    // 添加点击事件
+    chart.on('click', function (params) {
+        if (params.seriesName == '暂态触发点') {
+            emit('triggerPoint', params.data)
+        }
+    })
     setTimeout(() => {
         chart.resize()
     }, 0)
@@ -223,9 +229,9 @@ const handlerXAxis = () => {
             // textStyle: {
             fontFamily: 'dinproRegular',
             color: '#000',
-            fontSize: '12',
+            fontSize: '12'
             // }
-        },
+        }
         // boundaryGap: false,
     }
     // props.options?.xAxis 是数组还是对象
@@ -256,11 +262,17 @@ const resizeObserver = new ResizeObserver(entries => {
         }, 100)
     }
 })
+const setOptions = (options: any) => {
+    chart.setOption(options)
+}
+const getChart = () => {
+    return chart
+}
 onMounted(() => {
     initChart()
     resizeObserver.observe(chartRef.value!)
 })
-defineExpose({ initChart })
+defineExpose({ initChart, setOptions, getChart })
 onBeforeUnmount(() => {
     resizeObserver.unobserve(chartRef.value!)
     chart?.dispose()
diff --git a/src/components/echarts/rmsboxi.vue b/src/components/echarts/rmsboxi.vue
index 8ddbb697..b9a8ea64 100644
--- a/src/components/echarts/rmsboxi.vue
+++ b/src/components/echarts/rmsboxi.vue
@@ -1,11 +1,12 @@
 <template>
-  <div v-loading="loading" style="position: relative">
-    <div id="boxr">
-      <div id="rmsp" :style="`height:${vh};overflow: hidden;`">
-        <div class="bx" id="rms"></div>
-      </div>
-    </div>
-    <!-- <el-button
+    <div v-loading="loading" style="position: relative">
+        <div id="boxr">
+            <div id="rmsp" :style="`height:${vh};overflow: hidden;`">
+                <div class="bx" id="rms"></div>
+            </div>
+            
+        </div>
+        <!-- <el-button
             style="position: absolute; right: 10px; top: 0px; z-index: 20000"
             type="primary"
             link
@@ -15,7 +16,7 @@
         >
             下载
         </el-button> -->
-  </div>
+    </div>
 </template>
 <script lang="js">
 import html2canvas from "html2canvas";
@@ -36,6 +37,10 @@ export default {
       type: [String, Number, Boolean],
       default: 3,
     },
+    parentHeight: {
+            type: [String, Number, Boolean],
+            default: 0
+        },
     DColor: {
       type: Boolean,
       default: false,
@@ -103,6 +108,10 @@ export default {
     } else {
       this.vh = mainHeight(165, 2).height
     }
+    if (this.parentHeight != 0) {
+            this.vh = mainHeight(this.parentHeight, 2).height
+
+        }
     this.vw = '100%'
   },
   mounted() {
@@ -936,8 +945,8 @@ export default {
           },
         },
         legend: {
-          left: "70px",
-          top: "20",
+          right: 50,
+          top: 25,
           verticalAlign: "top",
           enabled: true,
           itemDistance: 5,
@@ -953,17 +962,22 @@ export default {
             padding: [0, 0, 0, 0], //[上、右、下、左]
           },
         },
-        // toolbox: {
-        //   show: step != 1 ? true : false,
-        //   feature: {
-        //     //restore: {},
-        //     saveAsImage: {
-        //       iconStyle: {
-        //         borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
-        //       },
-        //     },
-        //   },
-        // },
+        toolbox: {
+          right: 20,
+           top: 15,
+                feature: {
+                    // 移除默认的 saveAsImage
+                    // saveAsImage: { title: '保存图片' }
+                    myCustomDownload: {
+                        title: '', // 按钮标题
+                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
+
+                        onclick: function () {
+                            _this.download()
+                        }
+                    }
+                }
+            },
         xAxis: {
           type: "value",
           name: "时间\n(ms)",
@@ -1063,7 +1077,7 @@ export default {
           left: "1%",
           right: "45px",
           bottom: "40px",
-          top: "15%",
+             top: '70px',
           containLabel: true,
         },
         dataZoom: [
@@ -1353,8 +1367,8 @@ export default {
           },
         },
         legend: {
-          left: "70px",
-          top: "20",
+          right: 50,
+            top: 25,
           verticalAlign: "top",
           enabled: true,
           itemDistance: 5,
@@ -1483,7 +1497,7 @@ export default {
           left: "1%",
           right: "45px",
           bottom: "40px",
-          top: "15%",
+             top: '70px',
           containLabel: true,
         },
         dataZoom: [
diff --git a/src/components/echarts/shushiboxi.vue b/src/components/echarts/shushiboxi.vue
index 25197921..ff4cf7dd 100644
--- a/src/components/echarts/shushiboxi.vue
+++ b/src/components/echarts/shushiboxi.vue
@@ -5,10 +5,10 @@
                 <div class="bx" id="wave"></div>
             </div>
         </div>
-        <el-button style="position: absolute; right: 10px; top: 0px; z-index: 20000" type="primary" link
+        <!-- <el-button style="position: absolute; right: 10px; top: 0px; z-index: 20000" type="primary" link
             icon="el-icon-Download" title="生成图片" @click="download">
             下载
-        </el-button>
+        </el-button> -->
     </div>
 </template>
 <script lang="js">
@@ -28,6 +28,10 @@ export default {
             type: [String, Number, Boolean],
             default: 3
         },
+        parentHeight: {
+            type: [String, Number, Boolean],
+            default: 0
+        },
         DColor: {
             type: Boolean,
             default: false
@@ -78,6 +82,10 @@ export default {
         } else {
             this.vh = mainHeight(165, 2).height
         }
+        if (this.parentHeight != 0) {
+            this.vh = mainHeight(this.parentHeight, 2).height
+
+        }
         this.vw = '100%'
     },
     watch: {
@@ -506,7 +514,7 @@ export default {
                         colors.push('#CC0000')
                         break
                 }
-               
+
 
                 if (waveDatas[0].unit === '电压') {
                     if (this.value === 1) {
@@ -604,8 +612,8 @@ export default {
                     }
                 },
                 legend: {
-                    left: '70px',
-                    top: '20',
+                    right: 50,
+                    top: 25,
                     verticalAlign: 'top',
                     enabled: true,
                     itemDistance: 5,
@@ -621,17 +629,22 @@ export default {
                         padding: [0, 0, 0, 0] //[上、右、下、左]
                     }
                 },
-                // toolbox: {
-                //   show: step != 1 ? true : false,
-                //   feature: {
-                //     //restore: {},
-                //     saveAsImage: {
-                //       iconStyle: {
-                //         borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
-                //       },
-                //     },
-                //   },
-                // },
+                toolbox: {
+                    right: 20,
+                     top: 15,
+                feature: {
+                    // 移除默认的 saveAsImage
+                    // saveAsImage: { title: '保存图片' }
+                    myCustomDownload: {
+                        title: '', // 按钮标题
+                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
+
+                        onclick: function () {
+                            _this.download()
+                        }
+                    }
+                }
+            },
                 xAxis: {
                     type: 'value',
                     name: '时间\n(ms)',
@@ -724,7 +737,7 @@ export default {
                     left: '1%',
                     right: '2.8%',
                     bottom: '40px',
-                    top: '15%',
+                    top: '70px',
                     containLabel: true
                 },
                 dataZoom: [
@@ -747,7 +760,7 @@ export default {
                         name: a,
                         type: 'line',
                         large: true,
-                       
+
                         smooth: true,
                         symbol: 'none',
                         sampling: 'average',
@@ -760,7 +773,7 @@ export default {
                         name: b,
                         type: 'line',
                         large: true,
-                       
+
                         smooth: true,
                         symbol: 'none',
                         sampling: 'average',
@@ -773,7 +786,7 @@ export default {
                         name: c,
                         type: 'line',
                         large: true,
-                       
+
                         smooth: true,
                         symbol: 'none',
                         sampling: 'average',
@@ -964,8 +977,8 @@ export default {
                     }
                 },
                 legend: {
-                    left: '70px',
-                    top: '20',
+                    right: 50,
+                    top: 25,
                     verticalAlign: 'top',
                     enabled: true,
                     itemDistance: 5,
@@ -1086,7 +1099,7 @@ export default {
                     left: '1%',
                     right: '2.8%',
                     bottom: '40px',
-                    top: '15%',
+                    top: '70px',
                     containLabel: true
                 },
                 dataZoom: [
@@ -1109,7 +1122,7 @@ export default {
                         name: a,
                         type: 'line',
                         large: true,
-                       
+
                         smooth: true,
                         symbol: 'none',
                         sampling: 'average',
@@ -1122,7 +1135,7 @@ export default {
                         name: b,
                         type: 'line',
                         large: true,
-                       
+
                         smooth: true,
                         symbol: 'none',
                         sampling: 'average',
@@ -1135,7 +1148,7 @@ export default {
                         name: c,
                         type: 'line',
                         large: true,
-                       
+
                         smooth: true,
                         symbol: 'none',
                         sampling: 'average',
diff --git a/src/components/echarts/waveForm.vue b/src/components/echarts/waveForm.vue
index dc6ce5f3..799271ed 100644
--- a/src/components/echarts/waveForm.vue
+++ b/src/components/echarts/waveForm.vue
@@ -2,35 +2,65 @@
     <div v-if="view2">
         <el-row>
             <el-col :span="12">
-                <span style="font-size: 14px;  line-height: 30px">值类型选择:</span>
-                <el-select style="min-width: 200px; width: 200px" @change="changeView" v-model="value"
-                    placeholder="请选择值类型">
-                    <el-option v-for="item in options" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
+                <span style="font-size: 14px; line-height: 30px">值类型选择:</span>
+                <el-select
+                    style="min-width: 200px; width: 200px"
+                    @change="changeView"
+                    v-model="value"
+                    placeholder="请选择值类型"
+                >
+                    <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
                 </el-select>
                 <!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
                     @click="AdvancedAnalytics">高级分析</el-button> -->
             </el-col>
             <el-col :span="12">
-                <el-button @click="backbxlb" class="el-icon-refresh-right" icon="el-icon-CloseBold"
-                    style="float: right">
+                <el-button
+                    @click="backbxlb"
+                    class="el-icon-refresh-right"
+                    icon="el-icon-CloseBold"
+                    style="float: right"
+                >
                     返回
                 </el-button>
             </el-col>
         </el-row>
         <div v-loading="loading" style="height: calc(100vh - 190px)">
             <el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
-                <el-tab-pane label="瞬时波形" name="ssbx" class="boxbx pt10 pb10"
-                    :style="'height:' + bxecharts + ';overflow-y: scroll;'">
-                    <shushiboxi ref="shushiboxiRef" v-if="bxactiveName == 'ssbx' && showBoxi" :value="value"
-                        :boxoList="boxoList" :wp="wp">
-                    </shushiboxi>
+                <el-tab-pane
+                    label="瞬时波形"
+                    name="ssbx"
+                    class="boxbx pt10 pb10"
+                    :style="'height:' + bxecharts + ';overflow-y: scroll;'"
+                >
+                    <shushiboxi
+                        ref="shushiboxiRef"
+                        v-if="bxactiveName == 'ssbx' && showBoxi"
+                        :value="value"
+                        :parentHeight="parentHeight"
+                        :boxoList="boxoList"
+                        :wp="wp"
+                    ></shushiboxi>
                 </el-tab-pane>
-                <el-tab-pane label="RMS波形" class="boxbx pt10 pb10" name="rmsbx"
-                    :style="'height:' + bxecharts + ';overflow-y: scroll;'">
-                    <rmsboxi ref="rmsboxiRef" v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value"
-                        :boxoList="boxoList" :wp="wp">
-                    </rmsboxi>
+                <el-tab-pane
+                    label="RMS波形"
+                    class="boxbx pt10 pb10"
+                    name="rmsbx"
+                    :style="'height:' + bxecharts + ';overflow-y: scroll;'"
+                >
+                    <rmsboxi
+                        ref="rmsboxiRef"
+                        v-if="bxactiveName == 'rmsbx' && showBoxi"
+                        :value="value"
+                        :parentHeight="parentHeight"
+                        :boxoList="boxoList"
+                        :wp="wp"
+                    ></rmsboxi>
                 </el-tab-pane>
             </el-tabs>
             <el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
@@ -60,6 +90,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
     senior: false
 })
+const parentHeight = ref(0)
 const loading = ref(true)
 const bxactiveName = ref('ssbx')
 const rmsboxiRef = ref()
@@ -75,7 +106,7 @@ const options = ref([
     }
 ])
 const shushiboxiRef = ref()
-const bxecharts = mainHeight(95).height as any
+const bxecharts = ref(mainHeight(95).height as any)
 const view2 = ref(true)
 const boxoList = ref(null)
 const wp = ref(null)
@@ -88,7 +119,6 @@ const open = async (row: any) => {
     loading.value = true
     await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
         .then(res => {
-
             row.loading = false
             if (res != undefined) {
                 boxoList.value = row
@@ -106,15 +136,13 @@ const bxhandleClick = (tab: any) => {
     if (tab.name == 'ssbx') {
         if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
         bxactiveName.value = 'ssbx'
-       
     } else if (tab.name == 'rmsbx') {
         if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
         bxactiveName.value = 'rmsbx'
-        
     }
     setTimeout(() => {
-        loading.value = false 
-    },0)
+        loading.value = false
+    }, 0)
     //  console.log(tab, event);
 }
 const backbxlb = () => {
@@ -125,6 +153,15 @@ const backbxlb = () => {
 
     emit('backbxlb')
 }
+const setHeight = (h: any, vh: any) => {
+    if (h != false) {
+        parentHeight.value = h
+    }
+
+    setTimeout(() => {
+        bxecharts.value = mainHeight(vh).height
+    }, 100)
+}
 // 高级分析
 const AdvancedAnalytics = () => {
     analysis({
@@ -145,6 +182,6 @@ const gaoBack = () => {
     view2.value = true
     view3.value = false
 }
-defineExpose({ open })
+defineExpose({ open, setHeight })
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/form/datePicker/index.vue b/src/components/form/datePicker/index.vue
index 749f6408..1c0a9700 100644
--- a/src/components/form/datePicker/index.vue
+++ b/src/components/form/datePicker/index.vue
@@ -19,7 +19,7 @@ import { ref, onMounted, nextTick, watch } from 'vue'
 
 interface Props {
     nextFlag?: boolean
-    theCurrentTime: boolean
+    theCurrentTime?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/src/components/table/header/index.vue b/src/components/table/header/index.vue
index 6ab5c393..015f948f 100644
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -48,7 +48,7 @@ import { mainHeight } from '@/utils/layout'
 import { useDictData } from '@/stores/dictData'
 import { Search, RefreshLeft } from '@element-plus/icons-vue'
 import { defineProps } from 'vue'
-
+const emit = defineEmits(['selectChange',])
 const tableStore = inject('tableStore') as TableStore
 const tableHeader = ref()
 const datePickerRef = ref()
@@ -139,20 +139,17 @@ onUnmounted(() => {
 })
 
 const handlerHeight = () => {
+    tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
     tableStore.table.height = mainHeight(
         tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
     ).height as string
 }
 const computedSearchRow = () => {
-
 if (!headerForm.value.$el) return
-
-
 // 清空headerFormSecond.value.$el下的元素
 while (headerFormSecond.value.$el.firstChild) {
     headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
 }
-
 // 获取第一行放了几个表单
 const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
 
@@ -160,10 +157,10 @@ const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
 let width = 0
 for (let i = 0; i < elFormItem.length; i++) {
     width += elFormItem[i].offsetWidth + 32
+
     if (width > headerForm.value.$el.offsetWidth) {
         headerFormSecond.value.$el.appendChild(elFormItem[i])
     }
-      
 }
 
 // 判断是否需要折叠
@@ -177,6 +174,7 @@ if (headerFormSecond.value.$el.scrollHeight > 0) {
 const showSelect = ref(false)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
+    emit('selectChange', showSelect.value)
 }
 const onComSearch = async () => {
     if (props.datePicker && timeAll.value) {
@@ -205,7 +203,7 @@ const onExport = () => {
     tableStore.onTableAction('export', { showAllFlag: true })
 }
 
-defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange })
+defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange,computedSearchRow })
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/tree/pqs/pointTree.vue b/src/components/tree/pqs/pointTree.vue
index 31d4a11d..3fbe21a3 100644
--- a/src/components/tree/pqs/pointTree.vue
+++ b/src/components/tree/pqs/pointTree.vue
@@ -83,6 +83,7 @@ const loadData = () => {
                         item4.color = config.getColorVal('elementUiPrimary')
                         item4.children.forEach((item5: anyObj) => {
                             item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
+                            item5.pid= item4.id
                             item5.icon = 'fa-solid fa-location-dot'
                             item5.color = config.getColorVal('elementUiPrimary')
                             if (item5.comFlag === 0) {
diff --git a/src/main.ts b/src/main.ts
index 6fe33638..0851b2a4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -34,12 +34,13 @@ import { setupFormCreate } from '@/plugins/formCreate'
 const setupAll = async () => {
     const app = createApp(App)
 
-    //开启离线地图
-    // app.use(BaiduMapOffline, {
-    //     offline: true,
-    //     // offlineUrl:'http://sjzx:8088/map/' //window.location.origin + '/map/'
-    // })
+    // //开启离线地图
+    app.use(BaiduMapOffline, {
+        offline: true,
+        // offlineUrl:'http://sjzx:8088/map/' //window.location.origin + '/map/'
+    })
     app.use(BaiduMap, {
+        offline: true,
         // ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
         ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
         v: '3.0'
diff --git a/src/stores/monitoringPoint.ts b/src/stores/monitoringPoint.ts
index b468b9d7..119f7a63 100644
--- a/src/stores/monitoringPoint.ts
+++ b/src/stores/monitoringPoint.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 interface MonitoringPoint {
     lineId: string
     lineName: string
+    pid: string
     lineIds: string[]
     showCheckBox: boolean
 }
@@ -13,18 +14,19 @@ export const useMonitoringPoint = defineStore(
         const state: MonitoringPoint = reactive({
             lineId: '',
             lineName: '',
+            pid: '',
             lineIds: [],
             showCheckBox: false
         })
-        const setValue = (key: keyof Pick<MonitoringPoint, 'lineId' | 'lineName' | 'lineIds'>, val: any) => {
+        const setValue = (key: keyof Pick<MonitoringPoint, 'lineId' | 'lineName' | 'lineIds' | 'pid'>, val: any) => {
             state[key] = val
         }
         const setShowCheckBox = (val: boolean) => {
             if (val && state.lineIds.length === 0) {
                 state.lineIds = [state.lineId]
-                console.log('====================================');
-                console.log(state.lineIds);
-                console.log('====================================');
+                console.log('====================================')
+                console.log(state.lineIds)
+                console.log('====================================')
             }
             state.showCheckBox = val
         }
diff --git a/src/utils/echartMethod.ts b/src/utils/echartMethod.ts
index a3c9d0f2..17843d69 100644
--- a/src/utils/echartMethod.ts
+++ b/src/utils/echartMethod.ts
@@ -20,6 +20,9 @@ export const yMethod = (arr: any) => {
         } else {
             min = Math.floor(minValue / 100) * 100
         }
+    } else if (maxValue < 60 && minValue > 40) {
+        max = 60
+        min = 40
     } else if (maxValue == minValue && maxValue < 10 && minValue > 0) {
         max = Math.ceil(maxValue / 10) * 10
         min = Math.floor(minValue / 10) * 10
diff --git a/src/utils/webSocketClient.ts b/src/utils/webSocketClient.ts
new file mode 100644
index 00000000..8fc60d0b
--- /dev/null
+++ b/src/utils/webSocketClient.ts
@@ -0,0 +1,197 @@
+import { ElMessage, EVENT_CODE } from 'element-plus'
+
+// 定义消息类型，用于类型检查
+type MessageType = {
+    [key: string]: any
+}
+
+export default class SocketService {
+    // 单例模式实例
+    private static instance: SocketService | null = null
+    // 和服务端连接的socket对象
+    private ws: WebSocket | null = null
+    // 存储回调函数
+    private callBackMapping: { [key: string]: ((message: MessageType) => void) | null } = {}
+    // 标识是否连接成功
+    private connected: boolean = false
+    // 记录重试的次数
+    private sendRetryCount: number = 0
+    // 重新连接尝试的次数
+    private connectRetryCount: number = 0
+    // Web Worker 实例
+    private work: Worker | null = null
+    // 临时的 Blob URL
+    private workerBlobUrl: string | null = null
+    // 上次活动时间戳
+    private lastActivityTime: number = 0
+    // 最后一次收到心跳回复时间
+    private lastResponseHeartTime: number = Date.now()
+    // 重新连接延迟，单位毫秒
+    private reconnectDelay: number = 5000
+
+    // 单例模式获取实例
+    public static get Instance(): SocketService {
+        if (!this.instance) {
+            this.instance = new SocketService()
+        }
+        return this.instance
+    }
+
+    // 定义连接服务器的方法
+    public connect(id: string): void {
+        if (!window.WebSocket) {
+            console.log('您的浏览器不支持WebSocket')
+            return
+        }
+
+        const url = 'ws://192.168.1.79:10407/api/pushMessage/' + id
+        this.ws = new WebSocket(url)
+
+        this.ws.onopen = () => this.handleOpen()
+        this.ws.onclose = () => this.handleClose()
+        this.ws.onerror = () => this.handleError()
+        this.ws.onmessage = event => this.handleMessage(event)
+    }
+
+    // 处理连接成功事件
+    private handleOpen(): void {
+        ElMessage.success('webSocket连接服务端成功了')
+        console.log('连接服务端成功了')
+        this.connected = true
+        this.connectRetryCount = 0
+        this.updateLastActivityTime()
+        this.startHeartbeat()
+    }
+
+    // 处理连接关闭事件
+    private handleClose(): void {
+        console.log('连接webSocket服务端关闭')
+        this.connected = false
+        this.connectRetryCount++
+        this.clearHeartbeat()
+        // 可根据需要添加重连逻辑
+        // setTimeout(() => this.connect(), 500 * this.connectRetryCount);
+    }
+
+    // 处理连接错误事件
+    private handleError(): void {
+        ElMessage.error('webSocket连接异常！')
+    }
+
+    // 处理服务端发送过来的数据
+    private handleMessage(event: MessageEvent): void {
+        // console.log('🚀 ~ SocketService ~ handleMessage ~ event.data:', event.data)
+
+        if (event.data == '连接成功') {
+            this.sendHeartbeat()
+        } else if (event.data.length > 10) {
+            let message: MessageType
+            try {
+                // console.log('Received message:', event.data)
+                message = JSON.parse(event.data)
+            } catch (e) {
+                console.error('消息解析失败', event.data, e)
+                return
+            }
+            // console.log("🚀 ~ SocketService ~ handleMessage ~ message:", message)
+
+            // 通过接受服务端发送的type字段来回调函数
+            if (message.key && this.callBackMapping['message']) {
+                this.callBackMapping['message']!(message)
+            } else {
+                console.log('抛弃====>')
+                // console.log(event.data)
+                // 丢弃或继续写你的逻辑
+            }
+        } else {
+            ElMessage.error(event.data)
+        }
+    }
+
+    // 启动心跳检测
+    private startHeartbeat(): void {
+        this.lastResponseHeartTime = Date.now()
+        const url = window.URL.createObjectURL(
+            new Blob(['(function(e){setInterval(function(){this.postMessage(null)},30000)})()'])
+        )
+        this.workerBlobUrl = url
+        this.work = new Worker(url)
+        this.work.onmessage = e => this.handleWorkerMessage(e)
+    }
+
+    // 处理 Web Worker 消息
+    private handleWorkerMessage(e: MessageEvent): void {
+        // if (this.lastActivityTime - this.lastResponseHeartTime > 30000) {
+        //     // 说明已经三轮心跳没收到回复了，关闭检测，提示用户。
+        //     // ElMessage.error('业务主体模块发生未知异常，请尝试重新启动！')
+        //     this.clearHeartbeat()
+        //     return
+        // }
+        // console.log(123);
+
+        this.sendHeartbeat()
+    }
+
+    // 发送心跳消息
+    private sendHeartbeat(): void {
+        // console.log(new Date() + '进入心跳消息发送。。。。。。。。。。。。。')
+        if (this.ws) {
+            this.ws.send('alive')
+            this.updateLastActivityTime()
+        }
+    }
+
+    // 更新活动时间
+    private updateLastActivityTime(): void {
+        this.lastActivityTime = Date.now()
+    }
+
+    // 清除心跳检测
+    private clearHeartbeat(): void {
+        if (this.work) {
+            this.work.terminate()
+            this.work = null
+        }
+        if (this.workerBlobUrl) {
+            window.URL.revokeObjectURL(this.workerBlobUrl)
+            this.workerBlobUrl = null
+        }
+    }
+
+    // 回调函数的注册
+    public registerCallBack(socketType: string, callBack: (message: MessageType) => void): void {
+        this.callBackMapping[socketType] = callBack
+    }
+
+    // 取消某一个回调函数
+    public unRegisterCallBack(socketType: string): void {
+        this.callBackMapping[socketType] = null
+    }
+
+    // 发送数据的方法
+    public send(data: any): void {
+        if (this.connected) {
+            this.sendRetryCount = 0
+            try {
+                if (this.ws) {
+                    this.ws.send(JSON.stringify(data))
+                }
+            } catch (e) {
+                if (this.ws) {
+                    this.ws.send(data)
+                }
+            }
+        } else {
+            this.sendRetryCount++
+            setTimeout(() => this.send(data), this.sendRetryCount * 500)
+        }
+    }
+
+    // 断开方法
+    public closeWs(): void {
+        if (this.connected && this.ws) {
+            this.ws.close()
+        }
+        console.log('执行WS关闭命令..')
+    }
+}
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
index 10ecd015..fb9e65fb 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
@@ -2,36 +2,48 @@
     <div class="default-main" style="padding: 10px">
         <splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
             <pane :size="size">
-                <PointTree ref="pointTree" :default-expand-all="false"
+                <PointTree
+                    ref="pointTree"
+                    :default-expand-all="false"
                     :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
-                    :current-node-key="monitoringPoint.state.lineId" :show-checkbox="monitoringPoint.state.showCheckBox"
-                    :default-checked-keys="monitoringPoint.state.lineIds" @check="handleCheckChange"
-                    @node-click="handleNodeClick" @init="handleNodeClick"></PointTree>
+                    :current-node-key="monitoringPoint.state.lineId"
+                    :show-checkbox="monitoringPoint.state.showCheckBox"
+                    :default-checked-keys="monitoringPoint.state.lineIds"
+                    @check="handleCheckChange"
+                    @node-click="handleNodeClick"
+                    @init="handleNodeClick"
+                ></PointTree>
             </pane>
             <pane>
                 <div style="position: relative; height: 100%">
-                    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" style="height: 100%">
+                    <el-tabs
+                        v-model="activeName"
+                        type="border-card"
+                        class="demo-tabs"
+                        style="height: 100%"
+                        @tab-change="handleTabChange"
+                    >
                         <!-- <el-tab-pane label="稳态综合评估" name="1" lazy v-if="!isReload">
                             <Wentaizonghepinggu />
                         </el-tab-pane> -->
                         <el-tab-pane label="稳态指标合格率" name="2" lazy v-if="!isReload">
-                            <Wentaizhibiaohegelv />
+                            <Wentaizhibiaohegelv v-if="activeName == '2'" />
                         </el-tab-pane>
                         <el-tab-pane label="稳态数据分析" name="3" lazy v-if="!isReload">
-                            <Wentaishujufenxi />
+                            <Wentaishujufenxi v-if="activeName == '3'" />
                         </el-tab-pane>
                         <el-tab-pane label="谐波频谱" name="4" lazy v-if="!isReload">
-                            <Xiebopingpu />
+                            <Xiebopingpu v-if="activeName == '4'" />
                         </el-tab-pane>
-                        <!-- <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload">
-                            <Gaojingshujutongji />
+                        <!-- <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload ">
+                            <Gaojingshujutongji v-if=" activeName == '5'"/>
                         </el-tab-pane> -->
                         <el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload">
-                            <Yunxingzhuangtai />
+                            <Yunxingzhuangtai v-if="activeName == '6'" />
+                        </el-tab-pane>
+                        <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload">
+                            <Shishishuju v-if="activeName == '7'" />
                         </el-tab-pane>
-                        <!-- <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload">
-                            <Shishishuju />
-                        </el-tab-pane> -->
                     </el-tabs>
                     <!-- <div
                         class="monitoring-point"
@@ -78,7 +90,9 @@ onMounted(() => {
 })
 const handleNodeClick = (data: any, node: any) => {
     if (data.level === 6) {
+        console.log('🚀 ~ handleNodeClick ~ data:', data)
         monitoringPoint.setValue('lineId', data.id)
+        monitoringPoint.setValue('pid', data.pids)
         monitoringPoint.setValue('lineName', data.alias)
     }
 }
@@ -88,6 +102,9 @@ const handleCheckChange = (data: any, node: any) => {
         node.checkedNodes.filter((item: any) => item.level === 6).map((item: any) => item.id)
     )
 }
+const handleTabChange = () => {
+    monitoringPoint.setShowCheckBox(false)
+}
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
index c145ced3..9fd93420 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
@@ -1,173 +1,1114 @@
 <template>
-    <div style='display: flex;flex-direction: column;height: 100%'>
-        <el-form :inline='true'>
-            <el-form-item label='日期'>
-                <DatePicker ref='datePickerRef'></DatePicker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type='primary' @click='init' icon="el-icon-Search">查询</el-button>
-            </el-form-item>
-        </el-form>
-        <div style='flex: 1;' class='mt10'>
-            <my-echart :options='options' />
+    <div class="view" v-loading="loading">
+        <h3 class="view_title">最新时刻:{{ timeFormat(time) }}</h3>
+        <div v-show="view == 1">
+            <div class="view_btn" v-if="time">
+                <el-button type="primary" :icon="DataLine" @click="view = 2">谐波频谱</el-button>
+                <el-button type="primary" :icon="TrendCharts" @click="view = 3">实时趋势</el-button>
+            </div>
+            <el-collapse v-model.trim="activeNames">
+                <el-collapse-item title="基础数据" name="1">
+                    <div class="view_top">
+                        <!-- 左侧仪表盘 -->
+                        <div class="view_top_left">
+                            <div class="left_charts_title">电压有效值(kV)</div>
+                            <div class="left_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
+                            </div>
+                            <div class="left_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
+                            </div>
+                            <div class="left_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
+                            </div>
+                        </div>
+                        <div class="view_top_mid">
+                            <div class="mid_charts_title">基波电压/电流幅值(相位)</div>
+                            <div class="mid_charts">
+                                <MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart>
+                                <div class="mid_charts_text">
+                                    <div>电压</div>
+                                    <div>
+                                        A相:
+                                        <span style="color: #ffcc00">
+                                            {{ echartsData1?.options?.series[1].data[0].value }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        B相:
+                                        <span style="color: #009900">
+                                            {{ echartsData1?.options?.series[1].data[1].value }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        C相:
+                                        <span style="color: #cc0000">
+                                            {{ echartsData1?.options?.series[1].data[2].value }}
+                                        </span>
+                                    </div>
+                                    <div style="margin-top: 10px">电流</div>
+                                    <div>
+                                        A相:
+                                        <span style="color: #ffcc00">
+                                            {{ echartsData1?.options?.series[0].data[0].value }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        B相:
+                                        <span style="color: #009900">
+                                            {{ echartsData1?.options?.series[0].data[1].value }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        C相:
+                                        <span style="color: #cc0000">
+                                            {{ echartsData1?.options?.series[0].data[2].value }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 右侧仪表盘 -->
+                        <div class="view_top_right">
+                            <div class="right_charts_title">电流有效值(A)</div>
+                            <div class="right_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
+                            </div>
+                            <div class="right_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
+                            </div>
+                            <div class="right_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
+                            </div>
+                        </div>
+                    </div>
+                </el-collapse-item>
+            </el-collapse>
+
+            <div class="view_bot">
+                <vxe-table border height="" :data="webMsgSend" :tooltip-config="{ enterable: true }">
+                    <vxe-colgroup align="center" title="电压有效值(kV)">
+                        <vxe-column
+                            align="center"
+                            field="vRmsA"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vRmsB"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vRmsC"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="电流有效值(A)">
+                        <vxe-column align="center" field="iRmsA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="iRmsB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="iRmsC" title="C相" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="基波电压相位(°)">
+                        <vxe-column
+                            align="center"
+                            field="v1AngA"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="v1AngB"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="v1AngC"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="基波电流相位(°)">
+                        <vxe-column align="center" field="i1AngA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="i1AngB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="i1AngC" title="C相" :formatter="formatter" />
+                    </vxe-colgroup>
+                </vxe-table>
+                <br />
+                <vxe-table border height="" :data="webMsgSend" :tooltip-config="{ enterable: true }">
+                    <vxe-column align="center" field="freq" width="140" title="频率(Hz)" :formatter="formatter" />
+                    <vxe-column
+                        align="center"
+                        field="freqDev"
+                        width="120"
+                        title="频率偏差(Hz)"
+                        :formatter="formatter"
+                    />
+                    <vxe-column
+                        align="center"
+                        width="180"
+                        field="vUnbalance"
+                        title="电压不平衡度(%)"
+                        :formatter="formatter"
+                    />
+                    <vxe-column
+                        align="center"
+                        width="180"
+                        field="iUnbalance"
+                        title="电流不平衡度(%)"
+                        :formatter="formatter"
+                    />
+                    <vxe-colgroup align="center" title="基波电压幅值(kV)">
+                        <vxe-column
+                            align="center"
+                            field="v1A"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="v1B"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="v1C"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="基波电流幅值(A)">
+                        <vxe-column align="center" field="i1A" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="i1B" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="i1C" title="C相" :formatter="formatter" />
+                    </vxe-colgroup>
+                </vxe-table>
+                <br />
+                <vxe-table border height="" :data="webMsgSend" :tooltip-config="{ enterable: true }">
+                    <vxe-colgroup align="center" title="电压偏差(%)">
+                        <vxe-column
+                            align="center"
+                            field="vDevA"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vDevB"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vDevC"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="电压总谐波畸变率(%)">
+                        <vxe-column
+                            align="center"
+                            field="vThdA"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vThdB"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vThdC"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="电流总谐波畸变率(%)">
+                        <vxe-column align="center" field="iThdA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="iThdB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="iThdC" title="C相" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="有功功率(kW)">
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="pA"
+                            title="A相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="pB"
+                            title="B相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="pC"
+                            title="C相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column align="center" field="pTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                </vxe-table>
+                <br />
+                <vxe-table border height="" :data="webMsgSend" :tooltip-config="{ enterable: true }">
+                    <vxe-colgroup align="center" title="无功功率(kVar)">
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="qA"
+                            title="A相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="qB"
+                            title="B相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="qC"
+                            title="C相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column align="center" field="qTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="视在功率(kVA)">
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="sA"
+                            title="A相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="sB"
+                            title="B相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="sC"
+                            title="C相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column align="center" field="sTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="功率因数">
+                        <vxe-column align="center" field="pfA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="pfB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="pfC" title="C相" :formatter="formatter" />
+                        <vxe-column align="center" field="pfTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="基波功率因数">
+                        <vxe-column align="center" field="dpfA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="dpfB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="dpfC" title="C相" :formatter="formatter" />
+                        <vxe-column align="center" field="dpfTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                </vxe-table>
+            </div>
         </div>
+        <!-- 谐波频谱 -->
+        <spectrum v-if="view == 2" ref="spectrumRef" @shutDown="view = 1" />
+        <!-- 实时趋势 -->
+        <trend v-if="view == 3" ref="trendRef" :ptName="ptName" @shutDown="view = 1" />
     </div>
 </template>
-<script setup lang='ts'>
-import { nextTick, onMounted, reactive, ref } from 'vue'
-import DatePicker from '@/components/form/datePicker/index.vue'
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
+import socketClient from '@/utils/webSocketClient'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
-import { getProbabilityDistribution } from '@/api/event-boot/monitor'
-
-const datePickerRef = ref()
+import { useDictData } from '@/stores/dictData'
+import { timeFormat } from '@/utils/common'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { TrendCharts, DataLine } from '@element-plus/icons-vue'
+import spectrum from './spectrum.vue'
+import trend from './trend.vue'
+import { getLineDetail } from '@/api/device-boot/communicate'
+// import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
 const monitoringPoint = useMonitoringPoint()
-const loading = ref(true)
-const formData = reactive({
-    lineIndex: monitoringPoint.state.lineId,
-    startTime: '',
-    endTime: ''
+const dictData = useDictData()
+const adminInfo = useAdminInfo()
+const pieChartRef: any = ref()
+const spectrumRef = ref()
+const trendRef = ref()
+const connection: any = dictData.getBasicData('Dev_Connect')
+const ptName = ref('star') //star:星型接线,Star_Triangle:星三角 ,Open_Delta:开口三角
+const view = ref(1) //1:实时数据，2:谐波频谱 3:实时趋势
+const time: any = ref('')
+const webMsgSend: any = ref([])
+const activeNames = ref(['1'])
+const pieChart1: any = ref()
+const pieChart2: any = ref()
+const pieChart3: any = ref()
+const pieChart4: any = ref()
+const pieChart5: any = ref()
+const pieChart6: any = ref()
+const echartsData: any = ref({})
+const echartsData1: any = ref({})
+//电压有效值
+const echartsDataV1: any = ref({})
+const echartsDataV2: any = ref({})
+const echartsDataV3: any = ref({})
+//电流有效值
+const echartsDataA1: any = ref({})
+const echartsDataA2: any = ref({})
+const echartsDataA3: any = ref({})
+//开始创建webSocket客户端
+const dataSocket = reactive({
+    socketServe: socketClient.Instance
 })
-const options = ref({})
+//渲染中间相角图
+const initRadioCharts = () => {
+    echartsData1.value = {
+        options: {
+            grid: {
+                top: 0
+            },
+            title: {
+                text: '',
+                x: 'center'
+            },
+            tooltip: {
+                formatter: '{a} <br/>{b} {c}°'
+            },
 
-const init = () => {
-    loading.value = true
-    formData.lineIndex = monitoringPoint.state.lineId
-    formData.startTime = datePickerRef.value.timeValue[0]
-    formData.endTime = datePickerRef.value.timeValue[1]
-    getProbabilityDistribution(formData).then(
-        (res: any) => {
-            let data = res.data
-            let sisttime = data.sisttime
-            let persisttime = data.persisttime
-            options.value = {
-                backgroundColor: '#fff', //背景色,
-                title: {
-                    text: '持续时间的概率分布函数',
-                    x: 'center'
-                },
-                legend: {
-                    show: true,
-                    left: 10,
-                    data: ['概率分布', '占比'],
-
-                    textStyle: {
-                        rich: {
-                            a: {
-                                verticalAlign: 'middle'
-                            }
-                        },
-
-                        padding: [2, 0, 0, 0] //[上、右、下、左]
-                    }
-                },
-
-                tooltip: {
-                    //提示框组件
-                    trigger: 'axis',
-
-                    axisPointer: {
-                        type: 'shadow',
-                        label: {
-                            color: '#fff',
-                            fontSize: 16
+            toolbox: {
+                show: false
+            },
+            legend: {
+                show: false
+            },
+            series: [
+                // 外圈电压 内圈电流
+                {
+                    zlevel: 2,
+                    name: '基波电流相位',
+                    type: 'gauge',
+                    // 表盘最小值
+                    min: 180,
+                    // 表盘最大值
+                    max: -180,
+                    // 表盘分割数
+                    splitNumber: 6,
+                    // 圆心位置
+                    center: ['50%', '50%'],
+                    // 半径
+                    radius: '54%',
+                    // startAngle: 180,
+                    // endAngle: -179.99,
+                    startAngle: 90,
+                    endAngle: -179.99,
+                    // 指针方向
+                    clockWise: true,
+                    title: false,
+                    // 表盘外框
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: [
+                                [0.25, '#9D322D'],
+                                [0.5, '#9D322D'],
+                                [0.75, '#9D322D'],
+                                [1, '#9D322D']
+                            ],
+                            width: 2
                         }
                     },
-                    textStyle: {
-                        color: '#fff',
-                        fontStyle: 'normal',
-                        opacity: 0.35,
-                        fontSize: 14
+                    // 表盘细分数
+                    axisTick: {
+                        show: true,
+                        splitNumber: 5,
+                        length: 4,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 1,
+                            type: 'solid'
+                        }
                     },
-                    backgroundColor: 'rgba(0,0,0,0.55)',
-                    borderWidth: 0
-                },
-                calculable: true,
-                xAxis: [
-                    {
-                        type: 'category',
-                        name: '暂降幅值',
-                        nameGap: 10,
-                        nameTextStyle: {
-                            fontSize: 12
-                        },
-                        data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: '概率分布',
-                        nameTextStyle: {
-                            fontSize: 15
-                        },
-                        axisLabel: {
-                            formatter: '{value}%'
-                        },
-                        axisLine: {
-                            show: true
-                        },
-                        splitLine: {
-                            lineStyle: {
-                                // 使用深浅的间隔色
-                                type: 'dashed',
-                                opacity: 0.5
+                    // 分割线
+                    splitLine: {
+                        show: true,
+                        length: 10,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 2,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线标识
+                    axisLabel: {
+                        show: true,
+                        distance: 5,
+                        formatter: function (v) {
+                            switch (v + '') {
+                                case '-180':
+                                    return ''
+                                default:
+                                    return v
                             }
                         }
                     },
-                    {
-                        type: 'value',
-                        name: '占比',
 
-                        nameTextStyle: {
-                            fontSize: 15
-                        },
-                        axisLine: {
-                            show: true
-                        },
+                    // 指针设置
+                    pointer: {
+                        length: '80%',
+                        width: 4,
+                        opacity: 1
+                    },
+                    detail: {
+                        show: false
+                    },
+                    //数值位置
 
-                        splitLine: {
-                            lineStyle: {
-                                type: 'dashed',
-                                opacity: 0.5
+                    data: [
+                        {
+                            value: 0,
+                            name: 'A相',
+                            itemStyle: {
+                                color: '#FFCC00'
+                            }
+                        },
+                        {
+                            value: 0,
+                            name: 'B相',
+                            itemStyle: {
+                                color: '#009900'
+                            }
+                        },
+                        {
+                            value: 0,
+                            name: 'C相',
+                            itemStyle: {
+                                color: '#CC0000'
                             }
                         }
-                    }
-                ],
-                series: [
-                    {
-                        name: '概率分布',
-                        type: 'line',
-                        data: sisttime,
-                        itemStyle: {
-                            normal: { show: true }
+                    ]
+                },
+                {
+                    zlevel: 1,
+                    name: '基波电压相位',
+                    type: 'gauge',
+                    // 表盘最小值
+                    min: 180,
+                    // 表盘最大值
+                    max: -180,
+                    // 表盘分割数
+                    splitNumber: 6,
+                    // 圆心位置
+                    center: ['50%', '50%'],
+                    // 半径
+                    radius: '84%',
+                    // startAngle: 180,
+                    // endAngle: -179.99,
+                    startAngle: 90,
+                    endAngle: -179.99,
+                    // 指针方向
+                    clockWise: true,
+                    title: false,
+                    // 表盘外框
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: [
+                                [0.25, '#9D322D'],
+                                [0.5, '#9D322D'],
+                                [0.75, '#9D322D'],
+                                [1, '#9D322D']
+                            ],
+                            width: 1.5
                         }
                     },
-                    {
-                        name: '占比',
-                        type: 'bar',
-                        data: persisttime,
-                        barWidth: 30,
-                        itemStyle: {
-                            normal: { show: true }
+                    // 表盘细分数
+                    axisTick: {
+                        show: true,
+                        splitNumber: 5,
+                        length: 6,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 1,
+                            type: 'solid'
                         }
-                    }
-                ],
-                options: {
-                    dataZoom: null
+                    },
+                    // 分割线
+                    splitLine: {
+                        show: true,
+                        length: 10,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 2,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线标识
+                    axisLabel: {
+                        show: true,
+                        distance: 5,
+                        formatter: function (v) {
+                            switch (v + '') {
+                                case '-180':
+                                    return ''
+                                default:
+                                    return v
+                            }
+                        }
+                    },
+
+                    // 指针设置
+                    pointer: {
+                        length: '90%',
+                        width: 6,
+                        opacity: 0.5
+                    },
+                    detail: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: 0,
+                            name: ptName.value == 'star' ? 'A相' : 'AB相', //'A相',
+                            itemStyle: {
+                                color: '#FFCC00'
+                            }
+                        },
+                        {
+                            value: 0,
+                            name: ptName.value == 'star' ? 'B相' : 'BC相', //'B相',
+                            itemStyle: {
+                                color: '#009900'
+                            }
+                        },
+                        {
+                            value: 0,
+                            name: ptName.value == 'star' ? 'C相' : 'CA相', //'C相',
+                            itemStyle: {
+                                color: '#CC0000'
+                            }
+                        }
+                    ]
                 }
-            }
-            nextTick(() => {
-                loading.value = false
-            })
+            ]
         }
-    )
+    }
+    //电流相角
+    echartsData1.value.options.series[0].data.map((item: any) => {
+        iRadioList.value.map((vv: any) => {
+            if (item.name.includes(vv.phase)) {
+                item.value = vv.statisticalData
+            }
+        })
+    })
+    //电压相角
+    echartsData1.value.options.series[1].data.map((item: any) => {
+        vRadioList.value.map((vv: any) => {
+            if (item.name.includes(vv.phase)) {
+                item.value = vv.statisticalData
+            }
+        })
+    })
+
+    //新的实时数据
+    // 电流相角
+    echartsData1.value.options.series[0].data[0].value = Math.floor(webMsgSend.value[0]?.i1AngA * 100) / 100 || 0
+    echartsData1.value.options.series[0].data[1].value = Math.floor(webMsgSend.value[0]?.i1AngB * 100) / 100 || 0
+    echartsData1.value.options.series[0].data[2].value = Math.floor(webMsgSend.value[0]?.i1AngC * 100) / 100 || 0
+    // 电压相角
+    echartsData1.value.options.series[1].data[0].value = Math.floor(webMsgSend.value[0]?.v1AngA * 100) / 100 || 0
+    echartsData1.value.options.series[1].data[1].value = Math.floor(webMsgSend.value[0]?.v1AngB * 100) / 100 || 0
+    echartsData1.value.options.series[1].data[2].value = Math.floor(webMsgSend.value[0]?.v1AngC * 100) / 100 || 0
+
+    for (var i = 0; i < echartsData1.value.options.series.length; i++) {
+        echartsData1.value.options.series[i].type = 'gauge'
+        echartsData1.value.options.series[i].startAngle = 180
+        echartsData1.value.options.series[i].endAngle = -360
+        echartsData1.value.options.series[i].center = ['50%', '50%']
+    }
 }
+const initEcharts = (color: string, key: number) => {
+    return {
+        options: {
+            tooltip: {},
+            toolbox: {
+                show: false
+            },
+            series: [
+                {
+                    type: 'gauge',
+                    startAngle: key == 0 ? 180 : 90,
+                    endAngle: key == 0 ? 90 : 0,
+                    min: 0,
+                    max: key == 0 ? 12 : 400,
+                    radius: '180%',
+                    center: key == 0 ? ['70%', '95%'] : ['30%', '95%'],
+                    splitNumber: 2, //刻度数量
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 5,
+                            color: [
+                                [0.3, color],
+                                [0.7, color],
+                                [1, color]
+                            ]
+                        }
+                    },
+                    color: color,
+                    // 表盘细分数
+                    axisTick: {
+                        show: true,
+                        distance: -5,
+                        length: 12,
+                        lineStyle: {
+                            color: color,
+                            width: 2,
+                            type: 'solid'
+                        }
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: color,
+                            fontSize: '12'
+                        }
+                    },
+                    splitLine: {
+                        show: true,
+                        distance: -5,
+                        length: 20,
+                        lineStyle: {
+                            color: color,
+                            width: 3,
+                            type: 'solid'
+                        }
+                    },
+                    //标题位置
+                    title: {
+                        fontWeight: 'bolder',
+                        fontSize: 12,
+                        offsetCenter: key == 0 ? ['-130%', '-20%'] : ['130%', '-20%']
+                    },
+                    //数值位置
+                    detail: {
+                        fontSize: 14,
+                        valueAnimation: true,
+                        formatter: '{value}',
+                        offsetCenter: key == 0 ? ['30%', '-35%'] : ['-35%', '-35%'],
+                        color: color
+                    },
 
+                    // 指针设置
+                    pointer: {
+                        length: '80%',
+                        width: 3
+                    },
+                    data: [
+                        {
+                            value: 0,
+                            name: 'A相',
+                            itemStyle: {
+                                color: color
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+}
+//渲染echarts
+const init = () => {
+    echartsDataV1.value = initEcharts('#FFCC00', 0)
+    echartsDataV2.value = initEcharts('#009900', 0)
+    echartsDataV3.value = initEcharts('#CC0000', 0)
 
+    echartsDataA1.value = initEcharts('#FFCC00', 1)
+    echartsDataA2.value = initEcharts('#009900', 1)
+    echartsDataA3.value = initEcharts('#CC0000', 1)
+
+    if (!dataSocket.socketServe) {
+        console.error('WebSocket 客户端实例不存在')
+        return
+    }
+    let pids = monitoringPoint.state.pid.split(',')
+    dataSocket.socketServe.connect(`${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`)
+    dataSocket.socketServe.registerCallBack('message', (res: any) => {
+        let data = JSON.parse(res.value)
+        // console.log('🚀 ~ dataSocket.socketServe.registerCallBack ~ data:', data)
+        time.value = data.TIME - 0
+        webMsgSend.value = [
+            {
+                vRmsA: ptName.value == 'star' ? data.V.A.VRMS : data.V.A.VRMS_LVR, //A相电压
+                vRmsB: ptName.value == 'star' ? data.V.B.VRMS : data.V.B.VRMS_LVR, //B相电压
+                vRmsC: ptName.value == 'star' ? data.V.C.VRMS : data.V.C.VRMS_LVR, //C相电压
+                iRmsA: data.I.A.IRMS, //A相电流
+                iRmsB: data.I.B.IRMS, //B相电流
+                iRmsC: data.I.C.IRMS, //C相电流
+                v1AngA: data.V.A.V_ANGLE, //A相基波电压相位
+                v1AngB: data.V.B.V_ANGLE, //B相基波电压相位
+                v1AngC: data.V.C.V_ANGLE, //C相基波电压相位
+                i1AngA: data.I.A.I_ANGLE, //A相基波电流相位
+                i1AngB: data.I.A.I_ANGLE, //B相基波电流相位
+                i1AngC: data.I.A.I_ANGLE, //C相基波电流相位
+                freq: data.V.T.FREQ, //频率
+                freqDev: data.V.T.DELTA_FREQ, //频率偏差
+                vUnbalance: data.V.T.V_UNBAN, //电压不平衡度
+                iUnbalance: data.I.T.I_UNBAN, //电流不平衡度
+                v1A: data.V.A.V1, //A相基波电压相位
+                v1B: data.V.B.V1, //A相基波电压相位
+                v1C: data.V.C.V1, //A相基波电压相位
+                i1A: data.I.A.I1, //A相基波电流相位
+                i1B: data.I.B.I1, //A相基波电流相位
+                i1C: data.I.C.I1, //A相基波电流相位
+                vDevA: data.V.A.DELTA_V, //A相电压偏差
+                vDevB: data.V.B.DELTA_V, //B相电压偏差
+                vDevC: data.V.C.DELTA_V, //C相电压偏差
+                vThdA: data.V.A.VTHD, //A相电压总谐波畸变率
+                vThdB: data.V.B.VTHD, //B相电压总谐波畸变率
+                vThdC: data.V.C.VTHD, //C相电压总谐波畸变率
+                iThdA: data.I.A.ITHD, //A相电流总谐波畸变率
+                iThdB: data.I.B.ITHD, //B相电流总谐波畸变率
+                iThdC: data.I.C.ITHD, //C相电流总谐波畸变率
+                pA: data.PQ.A.P, //A相有功功率
+                pB: data.PQ.B.P, //B相有功功率
+                pC: data.PQ.C.P, //C相有功功率
+                pTot: data.PQ.T.P, //总有功功率
+                qA: data.PQ.A.Q, //A相无功功率
+                qB: data.PQ.B.Q, //B相无功功率
+                qC: data.PQ.C.Q, //C相无功功率
+                qTot: data.PQ.T.Q, //总无功功率
+                sA: data.PQ.A.S, //A相视在功率
+                sB: data.PQ.B.S, //B相视在功率
+                sC: data.PQ.C.S, //C相视在功率
+                sTot: data.PQ.T.S, //总视在功率
+                pfA: data.PQ.A.PF, //A相功率因数
+                pfB: data.PQ.B.PF, //B相功率因数
+                pfC: data.PQ.C.PF, //C相功率因数
+                pfTot: data.PQ.T.PF, //总功率因数
+                dpfA: data.PQ.A.DF, //A相基波功率因数
+                dpfB: data.PQ.B.DF, //B相基波功率因数
+                dpfC: data.PQ.C.DF, //C相基波功率因数
+                dpfTot: data.PQ.T.DF //总基波功率因数
+            }
+        ]
+        spectrumRef.value?.init(data)
+        trendRef.value?.init(data)
+
+        // console.log('🚀 ~ dataSocket.socketServe.registerCallBack ~ webMsgSend.value:', data)
+        setRealData()
+    })
+}
+//接收父组件传递的table数据
+
+const loading = ref(false)
+
+const formatter = (row: any) => {
+    return Math.floor(row.cellValue * 100) / 100
+}
+//电流相角数组&电压相角数组
+const iRadioList: any = ref([])
+const vRadioList: any = ref([])
+
+const setRealData = () => {
+    initRadioCharts()
+    //新的
+    // echartsDataV1.value.options.series[0].max =
+    //     webMsgSend.value[0].vRmsA == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsA)
+    // echartsDataV2.value.options.series[0].max =
+    //     webMsgSend.value[0].vRmsB == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsB)
+    // echartsDataV3.value.options.series[0].max =
+    //     webMsgSend.value[0].vRmsC == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsC)
+    echartsDataV1.value.options.series[0].data = [
+        {
+            name: ptName.value == 'star' ? 'A相' : 'AB相', //A相
+            value: Math.floor(webMsgSend.value[0].vRmsA * 100) / 100 || 0
+        }
+    ]
+    pieChart1.value.initChart()
+    echartsDataV2.value.options.series[0].data = [
+        {
+            name: ptName.value == 'star' ? 'B相' : 'BC相', // 'B相',
+            value: Math.floor(webMsgSend.value[0].vRmsB * 100) / 100 || 0
+        }
+    ]
+    pieChart2.value.initChart()
+    echartsDataV3.value.options.series[0].data = [
+        {
+            name: ptName.value == 'star' ? 'C相' : 'CA相', //'C相',
+            value: Math.floor(webMsgSend.value[0].vRmsC * 100) / 100 || 0
+        }
+    ]
+    pieChart3.value.initChart()
+    //新的电流有效值
+    // echartsDataA1.value.options.series[0].max =
+    //     webMsgSend.value[0].iRmsA == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsA)
+    // echartsDataA2.value.options.series[0].max =
+    //     webMsgSend.value[0].iRmsB == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsB)
+    // echartsDataA3.value.options.series[0].max =
+    //     webMsgSend.value[0].iRmsC == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsC)
+    echartsDataA1.value.options.series[0].data = [
+        {
+            name: 'A相',
+            value: Math.floor(webMsgSend.value[0].iRmsA * 100) / 100 || 0
+        }
+    ]
+    pieChart4.value.initChart()
+    echartsDataA2.value.options.series[0].data = [
+        {
+            name: 'B相',
+            value: Math.floor(webMsgSend.value[0].iRmsB * 100) / 100 || 0
+        }
+    ]
+    pieChart5.value.initChart()
+    echartsDataA3.value.options.series[0].data = [
+        {
+            name: 'C相',
+            value: Math.floor(webMsgSend.value[0].iRmsC * 100) / 100 || 0
+        }
+    ]
+    pieChart6.value.initChart()
+}
+defineExpose({ setRealData })
 onMounted(() => {
     init()
+    initRadioCharts()
+    getLineDetail({ id: monitoringPoint.state.lineId }).then(res => {
+        ptName.value = connection.filter(item => item.value == res.data.ptType)[0].code || ''
+    })
+})
+onBeforeUnmount(() => {
+    dataSocket.socketServe?.closeWs()
 })
-
 </script>
-<style></style>
+<style lang="scss" scoped>
+.view {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .view_title {
+        position: absolute;
+        left: 50%;
+        top: 15px;
+        transform: translateX(-50%);
+    }
+    .view_btn {
+        position: absolute;
+        right: 50px;
+        top: 10px;
+    }
+    .view_top {
+        width: 100%;
+        height: 400px !important;
+        display: flex;
+        justify-content: space-between;
+        //border: 1px solid #eee;
+        // padding: 10px;
+        margin-top: 10px;
+
+        .view_top_left,
+        .view_top_right {
+            // width: 300px;
+            flex: 1;
+            height: 100%;
+            // padding: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border: 1px solid #eee;
+
+            .left_charts,
+            .right_charts {
+                flex: none;
+                width: 100%;
+                height: 115px;
+                // margin-bottom: 16px;
+                // padding: 10px;
+                margin-bottom: 8px;
+            }
+        }
+
+        .view_top_mid {
+            // flex: 1;
+            width: 40%;
+            border: 1px solid #eee;
+            margin: 0 10px;
+            // padding: 10px;
+            position: relative;
+
+            .mid_charts {
+                width: 100%;
+                height: 370px;
+                position: relative;
+                // top: 20%;
+                // bottom: 10px;
+                .mid_charts_text {
+                    position: absolute;
+                    bottom: 10px;
+                    right: 10px;
+                    font-size: 12px;
+                    font-weight: 600;
+                    line-height: 16px;
+                    span {
+                        font-size: 14px;
+                        font-weight: 600;
+                    }
+                }
+            }
+        }
+
+        .left_charts_title,
+        .mid_charts_title,
+        .right_charts_title {
+            width: 100%;
+            height: 20px;
+            text-align: left;
+            font-weight: 800;
+            font-weight: 16px;
+            line-height: 20px;
+            margin: 10px 0 0 10px;
+            padding-left: 5px;
+            box-sizing: border-box;
+        }
+    }
+
+    .view_bot {
+        // min-height: 300px;
+        margin: 10px 0 0 0;
+        overflow: auto !important;
+        flex: 1 !important;
+        // padding-bottom: 200px !important;
+        box-sizing: border-box !important;
+
+        .view_bot_tables {
+            margin-bottom: 10px;
+            height: auto;
+            min-height: 120px;
+        }
+    }
+}
+
+.view::-webkit-scrollbar {
+    display: none;
+}
+
+.table_container {
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .table {
+        flex: 1;
+
+        .table_info {
+            width: 100%;
+            height: 120px;
+            // border: 1px solid #eee;
+            border-bottom: 2px solid #eee;
+            margin-bottom: 20px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .thead {
+            width: 100%;
+            height: auto;
+            background: #f4f6f9;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+
+            .thead_top {
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                border: 1px solid #eee;
+                color: #111;
+                font-size: 14px;
+                font-weight: 800;
+            }
+
+            .thead_bot {
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                display: flex;
+                color: #111;
+                font-size: 14px;
+                font-weight: 800;
+
+                .thead_bot_cell {
+                    flex: 1;
+                    border: 1px solid #eee;
+                }
+            }
+        }
+
+        .tbody {
+            flex: 1;
+            display: flex;
+            text-align: center;
+
+            .tbody_cell {
+                flex: 1;
+                text-align: center;
+                line-height: 40px;
+                border: 1px solid #eee;
+                border-bottom: 0;
+            }
+        }
+
+        .tbody:hover {
+            background: #f4f6f9;
+        }
+    }
+}
+
+.table_container:hover {
+    .table {
+        .tbody {
+            background: #f4f6f9;
+        }
+    }
+}
+
+:deep(.view_bot) {
+    .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
+    .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
+    .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
+        padding: 5px !important;
+    }
+
+    .vxe-table--body-wrapper {
+        min-height: 32px !important;
+    }
+}
+
+::v-deep .el-collapse-item__header {
+    font-size: 16px !important;
+    font-weight: 800 !important;
+}
+::v-deep .el-collapse-item__content {
+    padding-bottom: 10px;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/spectrum.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/spectrum.vue
new file mode 100644
index 00000000..d497b097
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/spectrum.vue
@@ -0,0 +1,345 @@
+<template>
+    <div class="pt50">
+        <el-button class="shutDown" icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
+        <div class="select">
+            <div class="mr10">谐波次数</div>
+            <el-select v-model="selectValue" style="width: 100px" @change="loading = true">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </div>
+        <el-tabs type="border-card" v-model="activeName" @tab-change="handleClick" v-loading="loading">
+            <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
+                <div>
+                    <div class="realtrend_top">
+                        <div class="realtrend_table">
+                            <div class="thead_left">
+                                <p style="font-weight: 700; background-color: #f3f6f9">次数(次)</p>
+                                <p>{{ item.groupName }}{{ item.unit ? '(' + item.unit + ')' : '' }}</p>
+                            </div>
+                            <div class="thead_right">
+                                <div
+                                    class="right_cell"
+                                    v-for="i in selectValue == '1'
+                                        ? item.title.filter(num => (activeName == 1 ? num - 0.5 : num) % 2 !== 0)
+                                        : selectValue == '2'
+                                        ? item.title.filter(num => (activeName == 1 ? num - 0.5 : num) % 2 == 0)
+                                        : item.title"
+                                    :key="index"
+                                >
+                                    <p style="background-color: #f3f6f9">
+                                        <span>{{ i }}次</span>
+                                    </p>
+                                    <p>
+                                        <span>{{ item.data[`h${i}`] == 0 ? 0 : item.data[`h${i}`] || '/' }}</span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt10" :style="height">
+                        <MyEchart ref="barCharts" :options="tabsList[0].echartsData"></MyEchart>
+                    </div>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { getOverLimitData } from '@/api/device-boot/communicate'
+import { mainHeight } from '@/utils/layout'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+const emit = defineEmits(['shutDown'])
+const monitoringPoint = useMonitoringPoint()
+const options = [
+    {
+        value: '3',
+        label: '全部'
+    },
+
+    {
+        value: '1',
+        label: '奇次'
+    },
+    {
+        value: '2',
+        label: '偶次'
+    }
+]
+const height = mainHeight(315)
+const barCharts = ref()
+const loading = ref(true)
+const crossTheLine: any = ref({})
+const tabsList: any = ref([
+    {
+        id: '6d5470f509ca271d7108a86e83bb283f',
+        groupName: '谐波电压含有率',
+        thdDataVOS: null,
+        thdDataTdVODatas: null,
+        unit: '%',
+        title: [
+            2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
+            31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
+        ],
+        data: {},
+        echartsData: {}
+    },
+    {
+        id: 'ae31115b83f02f03a0d3bd65cb017121',
+        groupName: '间谐波电压含有率',
+        thdDataVOS: null,
+        thdDataTdVODatas: null,
+        unit: '%',
+        title: [
+            0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5, 16.5, 17.5, 18.5,
+            19.5, 20.5, 21.5, 22.5, 23.5, 24.5, 25.5, 26.5, 27.5, 28.5, 29.5, 30.5, 31.5, 32.5, 33.5, 34.5, 35.5, 36.5,
+            37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.5, 44.5, 45.5, 46.5, 47.5, 48.5, 49.5
+        ],
+        data: {},
+        echartsData: {}
+    },
+    {
+        id: '8dc260f16280184e2b57d26668dc00b1',
+        groupName: '谐波电流幅值',
+        thdDataVOS: null,
+        thdDataTdVODatas: null,
+        unit: 'A',
+        title: [
+            2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
+            31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
+        ],
+
+        data: {},
+        echartsData: {}
+    }
+])
+
+const selectValue = ref('1')
+const activeName = ref(0)
+// 点击tab
+const handleClick = (tab: any, event: any) => {
+    loading.value = true
+}
+const init = (row: any) => {
+    let vData: any = {}
+    let iData: any = {}
+    let SvData: any = {}
+    for (let i = 1; i < 50; i++) {
+        vData[`h${i + 1}`] =
+            Math.floor(Math.max(...[row.V.A[`V` + i], row.V.B[`V` + i], row.V.C[`V` + i]].map(Number)) * 100) / 100
+
+        SvData[`h${i - 0.5}`] =
+            Math.floor(Math.max(...[row.V.A[`SV_` + i], row.V.B[`SV_` + i], row.V.C[`SV_` + i]].map(Number)) * 100) /
+            100
+        iData[`h${i + 1}`] =
+            Math.floor(Math.max(...[row.I.A[`I` + i], row.I.B[`I` + i], row.I.C[`I` + i]].map(Number)) * 100) / 100
+    }
+    SvData[`h49.5`] =
+        Math.floor(Math.max(...[row.V.A[`SV_50`], row.V.B[`SV_50`], row.V.C[`SV_50`]].map(Number)) * 100) / 100
+
+    tabsList.value[0].data = vData
+    tabsList.value[1].data = SvData
+    tabsList.value[2].data = iData
+
+    let xData =
+        selectValue.value == '1'
+            ? tabsList.value[activeName.value].title.filter(num => (activeName.value == 1 ? num - 0.5 : num) % 2 !== 0)
+            : selectValue.value == '2'
+            ? tabsList.value[activeName.value].title.filter(num => (activeName.value == 1 ? num - 0.5 : num) % 2 === 0)
+            : tabsList.value[activeName.value].title
+
+    barCharts.value[activeName.value]?.setOptions({
+        xAxis: {
+            data: xData.map(num => `${num}次`)
+        },
+        series: [
+            {
+                name: tabsList.value[activeName.value].groupName,
+                type: 'bar',
+                data: xData.map(num => {
+                    return tabsList.value[activeName.value].data[`h${num}`]
+                })
+            },
+            {
+                data: xData.map(num => {
+                    return (
+                        crossTheLine.value[
+                            activeName.value == 0
+                                ? `uharm${num}`
+                                : activeName.value == 1
+                                ? `inuharm${num + 0.5}`
+                                : `iharm${num}`
+                        ] || ''
+                    )
+                })
+            }
+        ]
+    })
+    loading.value = false
+}
+// 设置ecartsData
+const echarts = (num: number) => {
+    return {
+        title: {
+            text: tabsList.value[num].groupName
+        },
+        xAxis: {
+            name: tabsList.value[num].unit,
+            data: []
+        },
+        yAxis: {},
+        color: ['#2E8B57', '#DAA520'],
+        options: {
+            series: [
+                {
+                    name: tabsList.value[num].groupName,
+                    type: 'bar',
+
+                    data: []
+                },
+                {
+                    name: '国标限值(%)',
+                    type: 'bar',
+                    // label: {
+                    //     normal: {
+                    //         position: 'top'
+                    //     }
+                    // },
+                    data: []
+                }
+            ]
+        }
+    }
+}
+onMounted(() => {
+    tabsList.value[0].echartsData = echarts(0)
+    tabsList.value[0].echartsData = echarts(1)
+    tabsList.value[0].echartsData = echarts(2)
+    getOverLimitData({ id: monitoringPoint.state.lineId }).then(res => {
+        crossTheLine.value = res.data
+    })
+})
+defineExpose({
+    init
+})
+</script>
+<style lang="scss" scoped>
+.shutDown {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+.select {
+    position: absolute;
+    top: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+.realtrend_top {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .table {
+        flex: 1;
+        // min-height: 80px;
+        cursor: pointer;
+        min-height: 90px;
+        max-height: 170px;
+        border: 1px solid #eee;
+        overflow-x: auto;
+        overflow-y: hidden;
+        position: relative;
+
+        ul {
+            width: auto;
+            height: 40px;
+            display: flex;
+
+            li {
+                flex: none;
+                width: 100px;
+                line-height: 40px;
+                border: 1px solid #eee;
+                text-align: center;
+                list-style: none;
+            }
+        }
+
+        ul:nth-child(1) {
+            li {
+                font-weight: 800;
+                background: #f4f6f9;
+            }
+        }
+    }
+
+    // .table::-webkit-scrollbar {
+    //     display: none;
+    // }
+
+    .realtrend_table {
+        width: 100%;
+        height: auto;
+        max-height: 150px;
+        display: flex;
+        border: 2px solid #eee;
+        cursor: pointer;
+        font-size: 13px;
+
+        .thead_left {
+            width: 150px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            line-height: 50px;
+
+            padding-bottom: 5px;
+
+            p {
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                border: 1px solid #eee;
+                line-height: 38px;
+                margin: 0 !important;
+            }
+        }
+
+        .thead_right {
+            flex: 1;
+            align-items: center;
+            overflow-x: auto;
+            overflow-y: hidden;
+            display: flex;
+            padding-bottom: 5px;
+
+            .right_cell {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+
+                p {
+                    flex: none;
+                    min-width: 60px;
+                    height: 100%;
+                    text-align: center;
+                    border: 1px solid #eee;
+                    line-height: 38px;
+                    margin: 0 !important;
+                }
+
+                p:nth-child(1) {
+                    font-weight: 800;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/trend.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/trend.vue
new file mode 100644
index 00000000..0f1ed0c6
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/trend.vue
@@ -0,0 +1,384 @@
+<template>
+    <div class="pt50">
+        <el-button class="shutDown" icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
+        <div class="select">
+            <el-form :model="searchForm" id="history_select">
+                <el-form-item label="稳态指标">
+                    <el-select
+                        multiple
+                        collapse-tags
+                        collapse-tags-tooltip
+                        v-model.trim="searchForm.index"
+                        placeholder="请选择统计指标"
+                        :multiple-limit="3"
+                        value-key="id"
+                        @change="change"
+                    >
+                        <el-option
+                            v-for="(item, index) in indexOptions"
+                            :label="item.name"
+                            :key="index"
+                            :value="item"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div v-loading="loading" id="trend">
+            <div :style="height" v-for="(item, index) in searchForm.index" :key="index">
+                <MyEchart ref="MyEchartRef" :options="item.echartsData" :isInterVal="true"></MyEchart>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+import { timeFormat } from '@/utils/common'
+import { useConfig } from '@/stores/config'
+import { yMethod } from '@/utils/echartMethod'
+import html2canvas from 'html2canvas'
+import * as echarts from 'echarts' // 全引入
+const config = useConfig()
+const props = defineProps({
+    ptName: {
+        type: String
+    }
+})
+const loading = ref(true)
+const emit = defineEmits(['shutDown'])
+const searchForm: any = ref({ index: [] })
+const timeList = ref([])
+const MyEchartRef = ref()
+const height = ref(mainHeight(150, 2))
+//统计指标
+const indexOptions: any = ref([
+    {
+        id: 0,
+        name: '电压总有效值(kV)',
+        children: [
+            { name: 'vRmsA', phase: props.ptName == 'star' ? 'A相' : 'AB相', data: [] },
+            { name: 'vRmsB', phase: props.ptName == 'star' ? 'B相' : 'BC相', data: [] },
+            { name: 'vRmsC', phase: props.ptName == 'star' ? 'C相' : 'CA相', data: [] }
+        ],
+        color: ['#FFCC00', '#2E8B57', '#A52a2a'],
+        unit: 'kV',
+        data: []
+    },
+    {
+        id: 1,
+        name: '电流总有效值(A)',
+        children: [
+            { name: 'iRmsA', phase: 'A相', data: [] },
+            { name: 'iRmsB', phase: 'B相', data: [] },
+            { name: 'iRmsC', phase: 'C相', data: [] }
+        ],
+        color: ['#FFCC00', '#2E8B57', '#A52a2a'],
+        unit: 'A',
+        data: []
+    },
+    {
+        id: 2,
+        name: '有功功率(kW)',
+        children:
+            props.ptName == 'star'
+                ? [
+                      { name: 'pA', phase: 'A相', data: [] },
+                      { name: 'pB', phase: 'B相', data: [] },
+                      { name: 'pC', phase: 'C相', data: [] },
+                      { name: 'pTot', phase: '总', data: [] }
+                  ]
+                : [{ name: 'pTot', phase: '总', data: [] }],
+        color: props.ptName == 'star' ? ['#FFCC00', '#2E8B57', '#A52a2a', '#000'] : ['#000'],
+        unit: 'kW',
+        data: []
+    },
+    {
+        id: 3,
+        name: '无功功率(kW)',
+        children:
+            props.ptName == 'star'
+                ? [
+                      { name: 'qA', phase: 'A相', data: [] },
+                      { name: 'qB', phase: 'B相', data: [] },
+                      { name: 'qC', phase: 'C相', data: [] },
+                      { name: 'qTot', phase: '总', data: [] }
+                  ]
+                : [{ name: 'qTot', phase: '总', data: [] }],
+        color: props.ptName == 'star' ? ['#FFCC00', '#2E8B57', '#A52a2a', '#000'] : ['#000'],
+        unit: 'kW',
+        data: []
+    },
+
+    {
+        id: 4,
+        name: '基波电压总有效值(kV)',
+        children: [
+            { name: 'v1A', phase: props.ptName == 'star' ? 'A相' : 'AB相', data: [] },
+            { name: 'v1B', phase: props.ptName == 'star' ? 'B相' : 'BC相', data: [] },
+            { name: 'v1C', phase: props.ptName == 'star' ? 'C相' : 'CA相', data: [] }
+        ],
+        color: ['#FFCC00', '#2E8B57', '#A52a2a'],
+        unit: 'kV',
+        data: []
+    },
+    {
+        id: 5,
+        name: '基波电流总有效值(A)',
+        children: [
+            { name: 'i1A', phase: 'A相', data: [] },
+            { name: 'i1B', phase: 'B相', data: [] },
+            { name: 'i1C', phase: 'C相', data: [] }
+        ],
+        color: ['#FFCC00', '#2E8B57', '#A52a2a'],
+        unit: 'A',
+        data: []
+    },
+    {
+        id: 6,
+        name: '频率(Hz)',
+        children: [
+            { name: 'freq', phase: '频率', data: [] },
+            { name: 'freqDev', phase: '频率偏差', data: [] }
+        ],
+        color: [config.layout.elementUiPrimary[0], '#00BFF5'],
+        unit: 'Hz',
+        data: []
+    },
+    {
+        id: 7,
+        name: '电压不平衡度(%)',
+        children: [{ name: 'vUnbalance', phase: '电压不平衡度', data: [] }],
+        color: [config.layout.elementUiPrimary[0]],
+        unit: '%',
+        data: []
+    },
+    {
+        id: 8,
+        name: '电流不平衡度(%)',
+        children: [{ name: 'iUnbalance', phase: '电流不平衡度', data: [] }],
+        color: [config.layout.elementUiPrimary[0]],
+        unit: '%',
+        data: []
+    }
+])
+const change = () => {
+    height.value = mainHeight(150, searchForm.value.index.length)
+    // let name = searchForm.value.index.map(item => item.name)
+    // let list = indexOptions.value.filter(item => !name.includes(item.name))
+    loading.value = true
+    searchForm.value.index.forEach((item: any) => {
+        item.echartsData.xAxis.data = []
+        item.echartsData.series.forEach((child: any) => {
+            child.data = []
+        })
+    })
+
+    // console.log("🚀 ~ change ~ MyEchartRef.value[0]?.getChart():", MyEchartRef.value[0]?.getChart())
+}
+onMounted(() => {
+    setEcharts()
+    searchForm.value.index.push(...[indexOptions.value[0], indexOptions.value[1]])
+})
+const init = (row: any) => {
+    // timeList.value.push(timeFormat(row.TIME - 0))
+    searchForm.value.index.forEach((item: any, index: any) => {
+        // item.echartsData.xAxis.data.push(timeFormat(row.TIME - 0))
+        let time = timeFormat(row.TIME - 0)
+        switch (item.name) {
+            case '电压总有效值(kV)':
+                item.echartsData.series[0].data.push([
+                    time,
+                    Math.floor((props.ptName == 'star' ? row.V.A.VRMS : row.V.A.VRMS_LVR) * 100) / 100
+                ])
+                item.echartsData.series[1].data.push([
+                    time,
+                    Math.floor((props.ptName == 'star' ? row.V.B.VRMS : row.V.B.VRMS_LVR) * 100) / 100
+                ])
+                item.echartsData.series[2].data.push([
+                    time,
+                    Math.floor((props.ptName == 'star' ? row.V.C.VRMS : row.V.C.VRMS_LVR) * 100) / 100
+                ])
+                break
+            case '电流总有效值(A)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.I.A.IRMS * 100) / 100])
+                item.echartsData.series[1].data.push([time, Math.floor(row.I.B.IRMS * 100) / 100])
+                item.echartsData.series[2].data.push([time, Math.floor(row.I.C.IRMS * 100) / 100])
+                break
+            case '有功功率(kW)':
+                if (props.ptName == 'star') {
+                    item.echartsData.series[0].data.push([time, Math.floor(row.PQ.A.P * 100) / 100])
+                    item.echartsData.series[1].data.push([time, Math.floor(row.PQ.B.P * 100) / 100])
+                    item.echartsData.series[2].data.push([time, Math.floor(row.PQ.C.P * 100) / 100])
+                    item.echartsData.series[3].data.push([time, Math.floor(row.PQ.T.P * 100) / 100])
+                } else {
+                    item.echartsData.series[0].data.push([time, Math.floor(row.PQ.T.P * 100) / 100])
+                }
+
+                break
+            case '无功功率(kW)':
+                if (props.ptName == 'star') {
+                    item.echartsData.series[0].data.push([time, Math.floor(row.PQ.A.Q * 100) / 100])
+                    item.echartsData.series[1].data.push([time, Math.floor(row.PQ.B.Q * 100) / 100])
+                    item.echartsData.series[2].data.push([time, Math.floor(row.PQ.C.Q * 100) / 100])
+                    item.echartsData.series[3].data.push([time, Math.floor(row.PQ.T.Q * 100) / 100])
+                } else {
+                    item.echartsData.series[0].data.push([time, Math.floor(row.PQ.T.Q * 100) / 100])
+                }
+
+                break
+            case '基波电压总有效值(kV)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.V.A.V1 * 100) / 100])
+                item.echartsData.series[1].data.push([time, Math.floor(row.V.B.V1 * 100) / 100])
+                item.echartsData.series[2].data.push([time, Math.floor(row.V.C.V1 * 100) / 100])
+                break
+            case '基波电流总有效值(A)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.I.A.I1 * 100) / 100])
+                item.echartsData.series[1].data.push([time, Math.floor(row.I.B.I1 * 100) / 100])
+                item.echartsData.series[2].data.push([time, Math.floor(row.I.C.I1 * 100) / 100])
+                break
+            case '频率(Hz)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.V.T.FREQ * 100) / 100])
+                item.echartsData.series[1].data.push([time, Math.floor(row.V.T.DELTA_FREQ * 100) / 100])
+                break
+            case '电压不平衡度(%)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.V.T.V_UNBAN * 100) / 100])
+
+                break
+            case '电流不平衡度(%)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.I.T.I_UNBAN * 100) / 100])
+                break
+        }
+        item.echartsData.series.forEach((item1: any) => {
+            if (item1.data.length > 60) {
+                item1.data.shift()
+            }
+        })
+
+        let [min, max] = yMethod([].concat(...item.echartsData.series.map(k => k.data).map(k1 => k1.map(k2 => k2[1]))))
+        item.echartsData.yAxis.min = min
+        item.echartsData.yAxis.max = max
+    })
+
+    MyEchartRef.value[0]?.setOptions(searchForm.value.index[0].echartsData)
+    MyEchartRef.value[1]?.setOptions(searchForm.value.index[1].echartsData)
+    MyEchartRef.value[2]?.setOptions(searchForm.value.index[2].echartsData)
+    if (loading.value) {
+        echarts.connect('group')
+    }
+
+    loading.value = false
+}
+const setEcharts = () => {
+    indexOptions.value.forEach((item: any, index: any) => {
+        item.echartsData = {
+            title: {
+                text: item.name
+            },
+
+            xAxis: {
+                name: '时间',
+                type: 'time',
+                axisLabel: {
+                    interval: 0, // 强制显示所有标签
+                    formatter: {
+                        day: '{MM}-{dd}',
+                        month: '{MM}',
+                        year: '{yyyy}'
+                    }
+                },
+
+                data: []
+            },
+
+            yAxis: {
+                // type: 'value',
+                name: item.unit,
+                splitNumber: 5,
+                minInterval: 1,
+                alignTicks: true // 强制对齐刻度
+            },
+            toolbox: {
+                right: 20,
+                top: 15,
+                show: index == 0 ? true : false,
+                feature: {
+                    // 移除默认的 saveAsImage
+                    // saveAsImage: { title: '保存图片' }
+                    myCustomDownload: {
+                        title: '', // 按钮标题
+                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
+
+                        onclick: function () {
+                            html2canvas(document.getElementById('trend'), {
+                                scale: 1
+                            }).then(function (canvas) {
+                                // 创建a标签，实现下载
+                                let creatIMg = document.createElement('a')
+                                creatIMg.download = '实时趋势.png' // 设置下载的文件名，
+                                creatIMg.href = canvas.toDataURL() // 下载url
+                                creatIMg.click()
+                                creatIMg.remove() // 下载之后把创建的元素删除
+                            })
+                        }
+                    }
+                }
+            },
+
+            tooltip: {
+                axisPointer: {
+                    type: 'cross',
+                    label: {
+                        color: '#fff',
+                        fontSize: 16
+                    }
+                },
+                textStyle: {
+                    color: '#fff',
+                    fontStyle: 'normal',
+                    opacity: 0.35,
+                    fontSize: 14
+                },
+                backgroundColor: 'rgba(0,0,0,0.55)',
+                borderWidth: 0
+            },
+            series: []
+        }
+        item.children.map((zz: any, zzIndex: any) => {
+            item.echartsData.series.push({
+                name: zz.phase,
+                type: 'line',
+                increment: true,
+                itemStyle: {
+                    barBorderRadius: [3, 3, 0, 0],
+                    color: [...item.color][zzIndex]
+                },
+                data: [],
+                smooth: true, // 这里设置平滑曲线
+                symbol: 'none' // 设置为 'none' 去掉折点小圆
+            })
+        })
+    })
+}
+onBeforeUnmount(() => {
+    echarts.disconnect('group')
+})
+defineExpose({
+    init
+})
+</script>
+<style lang="scss" scoped>
+.shutDown {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+.select {
+    position: absolute;
+    top: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
index 1900e2f0..382561d9 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
@@ -1,57 +1,96 @@
 <template>
-    <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline="true">
-            <el-form-item label="多监测点">
-                <el-checkbox v-model="checked" @change="checkChange" />
-            </el-form-item>
-            <el-form-item label="日期">
-                <DatePicker ref="datePickerRef"></DatePicker>
-            </el-form-item>
-            <el-form-item label="指标类型:">
-                <el-select v-model="formData.condition" multiple collapse-tags :multiple-limit="5" filterable
-                    placeholder="请选择指标" @change="conditionChange">
-                    <el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
-                        <el-option v-for="item in group.options" :key="item.value" :label="item.label"
-                            :value="item.value"></el-option>
-                    </el-option-group>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="数值类型:">
-                <el-select style="width: 100%" v-model="formData.valueType" placeholder="请选择类型">
-                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="谐波次数:" v-if="showXieBoCiShu">
-                <el-select style="width: 100%" v-model="formData.harmonic" placeholder="请选择谐波">
-                    <el-option v-for="item in harmonicOptions" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item v-if="showJianXieBoCiShu" label="间谐波次数:">
-                <el-select style="width: 100%" v-model="formData.inHarmonic" placeholder="请选择间谐波">
-                    <el-option v-for="item in inharmonicOptions" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
-        </el-form>
-        <div style="flex: 1; overflow-y: scroll" class="mt10">
-            <my-echart :options="item.option" v-for="item in list" :style="height" />
+    <div>
+        <div v-show="view">
+            <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
+                <template v-slot:select>
+                    <el-form-item label="多监测点">
+                        <el-checkbox v-model="checked" @change="checkChange" />
+                    </el-form-item>
+                    <el-form-item label="日期">
+                        <DatePicker ref="datePickerRef"></DatePicker>
+                    </el-form-item>
+                    <el-form-item label="指标类型:">
+                        <el-select
+                            v-model="formData.condition"
+                            multiple
+                            collapse-tags
+                            :multiple-limit="5"
+                            filterable
+                            placeholder="请选择指标"
+                            @change="conditionChange"
+                        >
+                            <el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
+                                <el-option
+                                    v-for="item in group.options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                ></el-option>
+                            </el-option-group>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="数值类型:">
+                        <el-select style="width: 100%" v-model="formData.valueType" placeholder="请选择类型">
+                            <el-option
+                                v-for="item in typeOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="谐波次数:" v-show="showXieBoCiShu">
+                        <el-select style="width: 100%" v-model="formData.harmonic" placeholder="请选择谐波">
+                            <el-option
+                                v-for="item in harmonicOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item v-show="showJianXieBoCiShu" label="间谐波次数:">
+                        <el-select style="width: 100%" v-model="formData.inHarmonic" placeholder="请选择间谐波">
+                            <el-option
+                                v-for="item in inharmonicOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                </template>
+                <template v-slot:operation>
+                    <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
+                </template>
+            </TableHeader>
+            <!-- <el-form :inline="true">
+           
+        </el-form> -->
+            <div id="canvas" class="mt10" :style="height1" v-loading="loading">
+                <my-echart :options="item.option" v-for="item in list" :style="height" @triggerPoint="triggerPoint" />
+            </div>
+        </div>
+        <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
+            <waveForm ref="waveFormRef" senior  @backbxlb="backbxlb" />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, ref } from 'vue'
+import { nextTick, onMounted, reactive, ref, onBeforeUnmount } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { indexOptions, harmonicOptions, inharmonicOptions } from '@/utils/dictionary'
 import { getHistoryResult } from '@/api/harmonic-boot/harmonic'
 import { mainHeight } from '@/utils/layout'
+import TableHeader from '@/components/table/header/index.vue'
+import { queryEventDetailByEventId } from '@/api/event-boot/highAndLowPressure'
+import TableStore from '@/utils/tableStore'
+import waveForm from '@/components/echarts/waveForm.vue'
+import html2canvas from 'html2canvas'
+import * as echarts from 'echarts' // 全引入
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const checked = ref(monitoringPoint.state.showCheckBox)
@@ -75,6 +114,16 @@ const formData = reactive<{
     inHarmonic: 1,
     ptType: 0
 })
+const wp = ref({})
+const pageHeight = mainHeight(20)
+const view = ref(true)
+const waveFormRef = ref()
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
+const tableHeaderRef = ref()
 const options = ref({})
 const traceability = ref<any>([])
 const list = ref<any>([])
@@ -90,6 +139,7 @@ onMounted(() => {
     init()
 })
 const height: any = ref(mainHeight(200, 1))
+const height1: any = ref(mainHeight(200))
 const checkChange = () => {
     if (checked.value) {
         monitoringPoint.setShowCheckBox(true)
@@ -111,14 +161,19 @@ const init = () => {
             return false
         }
     })
-    getHistoryResult(formData).then((res: any) => {
-        if (directionValue >= 0) {
-            res.data[directionValue].targetName = '谐波电流方向'
-            traceability.value = [(res.data as [])[directionValue]]
-        }
-        list.value = []
-        shujuchuli(res)
-    })
+    getHistoryResult(formData)
+        .then((res: any) => {
+            if (directionValue >= 0) {
+                res.data[directionValue].targetName = '谐波电流方向'
+                traceability.value = [(res.data as [])[directionValue]]
+            }
+            list.value = []
+            shujuchuli(res)
+            loading.value = false
+        })
+        .catch(() => {
+            loading.value = false
+        })
 }
 const shujuchuli = (res: any) => {
     let shujuData = res.data
@@ -1091,11 +1146,10 @@ const shujuchuli = (res: any) => {
     rendering()
 }
 const rendering = () => {
-    height.value = mainHeight(200, list.value.length > 1 ? 2 : 1)
-    
+    height.value = mainHeight(160, list.value.length)
+
     list.value.forEach((item: any) => {
         if (item.targetName == '电压不平衡') {
-
             item.valueName = ''
             item.legend = item.legend.map((item2: any) => {
                 if (item2 == '零序电压') {
@@ -1107,7 +1161,6 @@ const rendering = () => {
                 }
                 return item2
             })
-           
         }
 
         let opitonserise: any[] = []
@@ -1335,7 +1388,7 @@ const getEcharts = () => {
                     opacity: 0.35,
                     fontSize: 14
                 },
-                backgroundColor: 'rgba(0,0,0,0.35)',
+                backgroundColor: 'rgba(0,0,0,0.55)',
 
                 formatter: function (params: any) {
                     let tips = ''
@@ -1350,39 +1403,39 @@ const getEcharts = () => {
                                 params[i].value[1] > 0
                                     ? 'A相谐波电流方向:流入<br/>'
                                     : params[i].value[1] == 0
-                                        ? 'A相谐波电流方向:无<br/>'
-                                        : 'A相谐波电流方向:流出<br/>'
+                                    ? 'A相谐波电流方向:无<br/>'
+                                    : 'A相谐波电流方向:流出<br/>'
                         } else if (params[i].seriesName == 'B相谐波电流方向') {
                             tips +=
                                 params[i].value[1] > 0
                                     ? 'B相谐波电流方向:流入<br/>'
                                     : params[i].value[1] == 0
-                                        ? 'B相谐波电流方向:无<br/>'
-                                        : 'B相谐波电流方向:流出<br/>'
+                                    ? 'B相谐波电流方向:无<br/>'
+                                    : 'B相谐波电流方向:流出<br/>'
                         } else if (params[i].seriesName == 'C相谐波电流方向') {
                             tips +=
                                 params[i].value[1] > 0
                                     ? 'C相谐波电流方向:流入<br/>'
                                     : params[i].value[1] == 0
-                                        ? 'C相谐波电流方向:无<br/>'
-                                        : 'C相谐波电流方向:流出<br/>'
+                                    ? 'C相谐波电流方向:无<br/>'
+                                    : 'C相谐波电流方向:流出<br/>'
                         } else if (params[i].seriesName == '总谐波电流方向') {
                             tips +=
                                 params[i].value[1] > 0
                                     ? '总谐波电流方向:流入<br/>'
                                     : params[i].value[1] == 0
-                                        ? '总谐波电流方向:无<br/>'
-                                        : '总谐波电流方向:流出<br/>'
+                                    ? '总谐波电流方向:无<br/>'
+                                    : '总谐波电流方向:流出<br/>'
                         } else if (params[i].seriesName == '正序电压(kV)') {
                             let str = (params[i].value[1] * 1).toString()
                             let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
                             let str1 = str.replace(reg, '$1,')
-                            tips += params[i].seriesName.replace("(kV)", "") + ':' + str1 + 'kV<br/>'
+                            tips += params[i].seriesName.replace('(kV)', '') + ':' + str1 + 'kV<br/>'
                         } else if (params[i].seriesName == '零序电压(V)' || params[i].seriesName == '负序电压(V)') {
                             let str = (params[i].value[1] * 1).toString()
                             let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
                             let str1 = str.replace(reg, '$1,')
-                            tips += params[i].seriesName.replace("(V)", "") + ':' + str1 + 'V<br/>'
+                            tips += params[i].seriesName.replace('(V)', '') + ':' + str1 + 'V<br/>'
                         } else if (params[i].seriesName !== '正序电压(kV)') {
                             let str = (params[i].value[1] * 1).toString()
                             let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
@@ -1407,9 +1460,35 @@ const getEcharts = () => {
                     return tips
                 }
             },
+            toolbox: {
+                right: 20,
+                top: 15,
+                show: i == 0 ? true : false,
+                feature: {
+                    // 移除默认的 saveAsImage
+                    // saveAsImage: { title: '保存图片' }
+                    myCustomDownload: {
+                        title: '', // 按钮标题
+                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
+
+                        onclick: function () {
+                            html2canvas(document.getElementById('canvas'), {
+                                scale: 1
+                            }).then(function (canvas) {
+                                // 创建a标签，实现下载
+                                let creatIMg = document.createElement('a')
+                                creatIMg.download = '稳态数据分析.png' // 设置下载的文件名，
+                                creatIMg.href = canvas.toDataURL() // 下载url
+                                creatIMg.click()
+                                creatIMg.remove() // 下载之后把创建的元素删除
+                            })
+                        }
+                    }
+                }
+            },
             legend: {
-                left: '50px',
-                top: '25px',
+                right: 50,
+                top: 25,
                 verticalAlign: 'top',
                 enabled: true,
                 itemDistance: 5,
@@ -1424,7 +1503,7 @@ const getEcharts = () => {
                 }
             },
             grid: {
-                top: '70px',
+                top: '70px'
             },
             xAxis: [
                 {
@@ -1468,7 +1547,7 @@ const getEcharts = () => {
                         show: true,
                         onZero: false, //-----------重点
                         lineStyle: {}
-                    },
+                    }
                     // splitLine: {
                     //     lineStyle: {
                     //         // 使用深浅的间隔色
@@ -1589,6 +1668,7 @@ const getEcharts = () => {
             ]
         }
     })
+    echarts.connect('group')
 }
 const conditionChange = () => {
     //判断一个指标时
@@ -1725,6 +1805,39 @@ const conditionChange = () => {
             { label: 'cp95值', value: 4 }
         ]
     }
+    setTimeout(() => {
+        console.log('🚀 ~ setTimeout ~  tableHeaderRef.value:', tableHeaderRef.value)
+
+        tableHeaderRef.value && tableHeaderRef.value?.computedSearchRow()
+    }, 100)
 }
+
+// 点击暂降触发点
+const triggerPoint = (data: any) => {
+    let nameList = monitoringPoint.state.lineName.split('>')
+
+    view.value = false
+    setTimeout(() => {
+        queryEventDetailByEventId({ eventId: data[2] }).then(res => {
+            waveFormRef.value.open({
+                ...res.data,
+                subName: nameList[nameList.length - 2].split('（')[0] || nameList[nameList.length - 2],
+                lineName: nameList[nameList.length - 1].split('_')[1] || nameList[nameList.length - 1]
+            })
+            waveFormRef.value.setHeight(220, 180)
+        })
+    }, 100)
+}
+// 计算高度
+const selectChange = (flag: boolean) => {
+    height.value = mainHeight(flag ? 220 : 160, list.value.length)
+}
+const backbxlb = () => {
+    view.value = true
+}
+provide('tableStore', tableStore)
+onBeforeUnmount(() => {
+    echarts.disconnect('group')
+})
 </script>
 <style></style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
index ab833cfd..824c0aff 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
@@ -1,19 +1,26 @@
 <template>
     <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline="true">
-            <el-form-item label="日期">
-                <DatePicker ref="datePickerRef"></DatePicker>
-            </el-form-item>
-            <el-form-item label="对比">
-                <el-select v-model="searchType" clearable placeholder="可选择同比、环比">
-                    <el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
-                        :value="item.value" />
-                </el-select>
-            </el-form-item>
-            <el-form-item>
+        <TableHeader ref="TableHeaderRef" :showSearch="false">
+            <template v-slot:select>
+                <el-form-item label="日期">
+                    <DatePicker ref="datePickerRef"></DatePicker>
+                </el-form-item>
+                <el-form-item label="对比">
+                    <el-select v-model="searchType" clearable placeholder="可选择同比、环比">
+                        <el-option
+                            v-for="item in searchTypeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
                 <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
-        </el-form>
+            </template>
+        </TableHeader>
+
         <div style="flex: 1" class="mt10" v-loading="loading">
             <my-echart :options="options" />
         </div>
@@ -26,7 +33,13 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getSteadyData } from '@/api/harmonic-boot/pollution'
 import { gradeColor3 } from '@/components/echarts/color'
-import { formatter } from 'element-plus'
+import TableHeader from '@/components/table/header/index.vue'
+import TableStore from '@/utils/tableStore'
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
@@ -289,7 +302,7 @@ const init = () => {
         })
     })
 }
-
+provide('tableStore', tableStore)
 onMounted(() => {
     init()
 })
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue
index 7989bb2a..646c4c27 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue
@@ -1,7 +1,8 @@
 <template>
     <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline="true">
-            <el-form-item label="日期">
+        <TableHeader ref="TableHeaderRef" :showSearch="false" >
+            <template v-slot:select>
+                <el-form-item label="日期">
                 <DatePicker ref="datePickerRef"></DatePicker>
             </el-form-item>
             <el-form-item label="指标">
@@ -10,10 +11,13 @@
                     <el-radio-button :label="1">谐波电流幅值</el-radio-button>
                 </el-radio-group>
             </el-form-item>
-            <el-form-item>
+            </template>
+            <template v-slot:operation>
                 <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
-        </el-form>
+               
+            </template>
+        </TableHeader>
+    
         <vxe-table :data="analysisData" v-bind="defaultAttribute">
             <vxe-column field="name" title="指标" width="140px"></vxe-column>
             <vxe-column
@@ -35,7 +39,13 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getHarmInHarmData } from '@/api/harmonic-boot/inHarm'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
-
+import TableHeader from '@/components/table/header/index.vue'
+import TableStore from '@/utils/tableStore'
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
@@ -107,6 +117,7 @@ const init = () => {
         })
     })
 }
+provide('tableStore', tableStore)
 onMounted(() => {
     init()
 })
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue
index 7c1b6ea4..cb698409 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue
@@ -1,7 +1,8 @@
 <template>
     <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline="true">
-            <el-form-item label="日期">
+        <TableHeader ref="TableHeaderRef" :showSearch="false" >
+            <template v-slot:select>
+                <el-form-item label="日期">
                 <DatePicker ref="datePickerRef"></DatePicker>
             </el-form-item>
             <el-form-item label="对比">
@@ -14,10 +15,12 @@
                     />
                 </el-select>
             </el-form-item>
-            <el-form-item>
+            </template>
+            <template v-slot:operation>
                 <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
-        </el-form>
+            </template>
+        </TableHeader>
+       
         <div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
             <div style="flex: 1">
                 <my-echart :options="options1" />
@@ -35,7 +38,13 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getProbabilityDistribution } from '@/api/event-boot/monitor'
 import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
-
+import TableHeader from '@/components/table/header/index.vue'
+import TableStore from '@/utils/tableStore'
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
@@ -173,5 +182,6 @@ const handlerOptions2 = (data: any) => {
         ]
     }
 }
+provide('tableStore', tableStore)
 </script>
 <style></style>