diff --git a/src/views/govern/device/control/index.vue b/src/views/govern/device/control/index.vue
index 0d9d124..8cb1895 100644
--- a/src/views/govern/device/control/index.vue
+++ b/src/views/govern/device/control/index.vue
@@ -227,7 +227,10 @@
                     <!-- 实时数据-实时趋势组件 -->
                     <realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></realTrend>
                     <!-- 实时数据-谐波频谱组件 -->
-                    <harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef"></harmonicSpectrum>
+                    <harmonicSpectrum
+                        v-show="!realTimeFlag && sonTab == 2"
+                        ref="harmonicSpectrumRef"
+                    ></harmonicSpectrum>
                 </div>
                 <!-- 暂态事件 -->
                 <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1">
@@ -292,43 +295,6 @@ const formInline = reactive({
     lineId: ''
 })
 const detail = ref<any>(null)
-// WebSocket
-const socket: any = ref(null)
-const url = 'wss://your-websocket-url'
-//连接websocket
-const connectWebSocket = () => {
-    return
-    socket.value = new WebSocket(url)
-    socket.value.onopen = () => {
-        console.log('WebSocket connected')
-        socket.value.isConnected = true
-    }
-
-    socket.value.onerror = (error: any) => {
-        console.error('WebSocket error:', error)
-    }
-
-    socket.value.onmessage = (message: any) => {
-        console.log('Received message:', message.data)
-    }
-
-    socket.value.onclose = () => {
-        console.log('WebSocket disconnected')
-        socket.value.isConnected = false
-    }
-}
-//建立连接发送消息
-const sendMessage = () => {
-    if (socket.value.isConnected) {
-        socket.value.send('Your message here')
-    }
-}
-//关闭websocket
-const disconnectWebSocket = () => {
-    if (socket.value.isConnected) {
-        socket.value.close()
-    }
-}
 //是否显示实时数据默认内容
 const realTimeFlag = ref(true)
 //实时数据子菜单
@@ -353,13 +319,15 @@ const harmonicSpectrumRef = ref()
 const handleHarmonicSpectrum = () => {
     realTimeFlag.value = false
     sonTab.value = 2
-    harmonicSpectrumRef.value && harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
+    harmonicSpectrumRef.value &&
+        harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
     window.clearInterval(timer.value)
 }
 //返回
 const handleReturn = () => {
     realTimeFlag.value = true
     sonTab.value = null
+    handleClick()
 }
 const getDeviceDataTrend = (e: any) => {
     detail.value = {
@@ -621,9 +589,7 @@ watch(
         }
     }
 )
-onMounted(() => {
-    connectWebSocket()
-})
+onMounted(() => {})
 </script>
 
 <style lang="scss">
diff --git a/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue b/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
index ab642d0..75164ab 100644
--- a/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
+++ b/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
@@ -2,12 +2,10 @@
 <template>
     <div class="harmonic">
         <div class="harmonic_select">
-            <!-- {{ searchForm.index }} -->
             <el-form :model="searchForm" class="history_select" id="history_select">
                 <el-form-item label="稳态指标">
                     <el-select
                         multiple
-                        :multiple-limit="3"
                         collapse-tags
                         collapse-tags-tooltip
                         v-model="searchForm.index"
@@ -22,17 +20,18 @@
                     </el-select>
                 </el-form-item>
             </el-form>
-            <el-button type="primary" @click="init">查询</el-button>
+            <el-button type="primary" :loading="loading" @click="init">查询</el-button>
         </div>
-        <div class="harmonic_body">
-            <div class="harmonic_body_charts" v-if="searchForm.index[0]">
-                <MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
-            </div>
-            <div class="harmonic_body_charts" v-if="searchForm.index[1]">
-                <MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
-            </div>
-            <div class="harmonic_body_charts" v-if="searchForm.index[2]">
-                <MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
+        <div class="harmonic_body" v-loading="loading">
+            <div class="harmonic_body_charts" v-for="(item, index) in chartsList" :key="index">
+                <p class="charts_title">
+                    {{
+                        indexOptions.find((item: any) => {
+                            return item.id == searchForm.index[index]
+                        })?.name
+                    }}
+                </p>
+                <MyEchart :ref="setChildRef(index)" :options="item.echartsData"></MyEchart>
             </div>
         </div>
     </div>
@@ -43,7 +42,7 @@ import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictT
 import { queryStatistical } from '@/api/system-boot/csstatisticalset'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
-const searchForm = ref({})
+const searchForm: any = ref({})
 searchForm.value = {
     index: []
 }
@@ -59,471 +58,171 @@ queryByCode('portable-harmonic').then(res => {
         legendDictList.value = vv.data
     })
 })
-const tableList: any = ref([])
-for (let i = 0; i < 10000; i++) {
-    tableList.value.push({
-        name: i + 1,
-        // value: Math.floor(Math.random() * 101)
-        value: i + 2
-    })
-}
-const echartsData1: any = ref([]),
-    echartsData2: any = ref([]),
-    echartsData3: any = ref([]),
-    barCharts1 = ref(),
-    barCharts2 = ref(),
-    barCharts3 = ref()
-//查询谐波频谱折线图
-const chartsTitle1 = ref('')
-const chartsTitle2 = ref('')
-const chartsTitle3 = ref('')
 //谐波频谱参数
-const params = ref({})
+const params: any = ref({})
 const getHarmonicSpectrumParams = (val: any) => {
     params.value = val
-    params.value.list = []
-    console.log(params.value, '+++++++++++++')
+    init()
+    return
     //查询稳态指标
     getRealTimeTableList().then(res => {
         console.log('稳态指标', res)
     })
+}
+const chartsList: any = ref([])
+const loading = ref(false)
+// 为每个子组件实例设置ref
+const setChildRef = (index: any) => {
+    return `child-${index}`
+}
+const childRefs = {}
+const init = () => {
+    loading.value = true
+    params.value.list = []
+    searchForm.value.index.map((item: any) => {
+        params.value.list.push({ statisticalId: item })
+    })
     //查询谐波频谱
     getDeviceHarmonicSpectrumData(params.value).then(res => {
-        console.log('谐波频谱')
-    })
-}
-const init = () => {
-    const xDataList: any = [],
-        yDataList1: any = [],
-        yDataList2: any = [],
-        yDataList3: any = []
-    tableList.value.map((item: any) => {
-        xDataList.push(item.name)
-        yDataList1.push(item.value)
-        yDataList2.push(item.value + 1000)
-        yDataList3.push(item.value + 2000)
-    })
+        chartsList.value = res.data
+        //数据根据相别组装成新数组
+        chartsList.value.map((item: any) => {
+            item.countList = []
+            item.thdDataVOS = item.thdDataVOS.reduce((acc: any, current: any) => {
+                const existing = acc.find((redu: any) => redu.phase == current.phase)
+                if (existing) {
+                    existing.list.push(current)
+                } else {
+                    acc.push({
+                        phase: current.phase,
+                        list: [current]
+                    })
+                }
+                return acc
+            }, [])
+            return
+        })
 
-    indexOptions.value.map((item: any) => {
-        if (item.id == searchForm.value.index[0]) {
-            chartsTitle1.value = item.name
-        }
-        if (item.id == searchForm.value.index[1]) {
-            chartsTitle2.value = item.name
-        }
-        if (item.id == searchForm.value.index[2]) {
-            chartsTitle3.value = item.name
-        }
-    })
-    console.log(chartsTitle1.value, chartsTitle2.value, chartsTitle3.value, '666677777')
-    if (searchForm.value.index[0]) {
-        echartsData1.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                title: [
-                    {
-                        left: '10%',
-                        top: 0,
-                        text: chartsTitle1.value
-                    }
-                ],
-                grid: {
-                    top: '8%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['A相', 'B相', 'C相'],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    // name: '时间(ms)',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    },
-                    boundaryGap: false
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: 'kv',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
+        //循环渲染图表
+        chartsList.value &&
+            chartsList.value.map((item: any, index: any) => {
+                const refName = setChildRef(index)
+                childRefs[refName] = ref(null) // 初始化ref
+                item.echartsData = {
+                    options: {
+                        title: [
+                            {
+                                left: '10%',
+                                top: 0
+                                // text: item.showName
                             }
-                        }
+                        ],
+                        grid: {
+                            top: '16%',
+                            bottom: '15%', //也可设置left和right设置距离来控制图表的大小
+                            left: '3%',
+                            right: '4%'
+                        },
+                        tooltip: {
+                            trigger: 'axis',
+                            axisPointer: {
+                                type: 'cross',
+                                label: {
+                                    show: false
+                                }
+                            }
+                        },
+                        legend: {
+                            data: [],
+                            top: '2%',
+                            right: '2%'
+                        },
+                        xAxis: {
+                            name: '次数',
+                            data: [],
+                            axisLine: {
+                                show: true, //隐藏X轴轴线
+                                lineStyle: {
+                                    color: '#000'
+                                }
+                            },
+                            axisTick: {
+                                show: true //隐藏X轴刻度
+                            },
+                            axisPointer: {
+                                type: 'shadow'
+                            },
+                            axisLabel: {
+                                show: true,
+                                textStyle: {
+                                    color: '#000' //X轴文字颜色
+                                }
+                            },
+                            boundaryGap: false
+                        },
+                        yAxis: [
+                            {
+                                type: 'value',
+                                name:
+                                    item.thdDataVOS.length != 0 &&
+                                    item.thdDataVOS[0].list &&
+                                    item.thdDataVOS[0].list[0].unit,
+                                splitLine: {
+                                    show: false
+                                },
+                                axisTick: {
+                                    show: true
+                                },
+                                axisLine: {
+                                    show: true,
+                                    lineStyle: {
+                                        color: '#000'
+                                    }
+                                }
+                            }
+                        ],
+                        series: []
                     }
-                ],
-                series: [
-                    {
-                        name: 'A相',
+                }
+                //横轴数据
+                item.echartsData.options.xAxis.data =
+                    item.thdDataVOS.length != 0 &&
+                    item.thdDataVOS[0].list &&
+                    item.thdDataVOS[0].list.map((ss: any) => {
+                        return ss.frequency + '次'
+                    })
+
+                //y轴数据
+                item.thdDataVOS.map((vv: any) => {
+                    item.echartsData.options.series.push({
+                        name: vv.phase + '相',
                         type: 'line',
                         barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                         itemStyle: {
                             // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#00CC99'
+                            barBorderRadius: [3, 3, 0, 0]
+                            // color: '#00CC99'
                             // }e
                         },
-                        data: yDataList1,
+                        data: vv.list.map((vvs: any) => {
+                            return vvs.statisticalData
+                        }),
                         smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    },
-                    {
-                        name: 'B相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-
-                            color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList2,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    },
-                    {
-                        name: 'C相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0]
-                            // color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList3,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    }
-                ]
-            }
-        }
-        barCharts1.value && barCharts1.value.initChart()
-    }
-    if (searchForm.value.index[1]) {
-        echartsData2.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                title: [
-                    {
-                        left: '10%',
-                        top: 0,
-                        text: chartsTitle2.value
-                    }
-                ],
-                grid: {
-                    top: '8%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['A相', 'B相', 'C相'],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    // name: '时间(ms)',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    },
-                    boundaryGap: false
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: 'kv',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: 'A相',
-                        type: 'line',
-                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#00CC99'
-                            // }e
-                        },
-                        data: yDataList1,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    },
-                    {
-                        name: 'B相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-
-                            color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList2,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    },
-                    {
-                        name: 'C相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0]
-                            // color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList3,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    }
-                ]
-            }
-        }
-        barCharts2.value && barCharts2.value.initChart()
-    }
-    if (searchForm.value.index[2]) {
-        echartsData3.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                title: [
-                    {
-                        left: '10%',
-                        top: 0,
-                        text: chartsTitle3.value
-                    }
-                ],
-                grid: {
-                    top: '8%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['A相', 'B相', 'C相'],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    // name: '时间(ms)',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    },
-                    boundaryGap: false
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: 'kv',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: 'A相',
-                        type: 'line',
-                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#00CC99'
-                            // }e
-                        },
-                        data: yDataList1,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    },
-                    {
-                        name: 'B相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-
-                            color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList2,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    },
-                    {
-                        name: 'C相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0]
-                            // color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList3,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    }
-                ]
-            }
-        }
-        barCharts3.value && barCharts3.value.initChart()
-    }
+                    })
+                    //legend数据
+                    item.echartsData.options.legend.data.push(vv.phase + '相')
+                })
+            })
+        loading.value = false
+    })
+    return
 }
 watch(
     () => searchForm.value.index,
     (val: any, oldval: any) => {
         if (val && val.length != 0) {
-            init()
+            // init()
         }
     },
     {
@@ -531,10 +230,7 @@ watch(
         immediate: true
     }
 )
-onMounted(() => {
-    console.log()
-    // init()
-})
+onMounted(() => {})
 defineExpose({ getHarmonicSpectrumParams })
 </script>
 <style lang="scss" scoped>
@@ -564,6 +260,14 @@ defineExpose({ getHarmonicSpectrumParams })
             height: 200px;
             margin: 15px 0;
             border: 1px solid #eee;
+            position: relative;
+            .charts_title {
+                position: absolute;
+                top: 10px;
+                left: 10%;
+                font-size: 18px;
+                font-weight: 800;
+            }
         }
     }
 }