修改问题

src/components/echarts/MyEchart.vue

@@ -124,7 +124,7 @@ const initChart = () => {
     }
     handlerBar(options)
     // 处理柱状图
-    chart.setOption(options)
+    chart.setOption(options,true)
 
     setTimeout(() => {
         chart.resize()

src/views/govern/device/control/index.vue

@@ -90,7 +90,6 @@
                 </el-tab-pane>
                 <TableHeader
                     :showSearch="false"
-                    :key="mqttMessage"
                     v-if="
                         (dataSet.indexOf('_trenddata') == -1 &&
                             dataSet.indexOf('_realtimedata') == -1 &&
@@ -111,12 +110,9 @@
                                 placeholder="请输入关键词"
                             ></el-input>
                         </el-form-item>
-                        <el-form-item v-if="mqttMessage.dataTime" label="数据时间">
-                            {{ mqttMessage.dataTime }}
-                        </el-form-item>
                         <el-form-item label="值类型">
                             <el-select
-                                style="width: 160px !important"
+                                style="min-width: 120px !important"
                                 v-model="formInline.dataLevel"
                                 :disabled="dataLevel == 'Primary' && deviceType == '0'"
                             >
@@ -124,6 +120,9 @@
                                 <el-option value="Secondary" label="二次值"></el-option>
                             </el-select>
                         </el-form-item>
+                        <el-form-item v-if="mqttMessage.dataTime" label="数据时间">
+                            {{ mqttMessage.dataTime }}
+                        </el-form-item>
                     </template>
                     <template #operation>
                         <el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
@@ -276,7 +275,8 @@
                             实时录波
                         </el-button>
                     </div> -->
-                    <div class="view_top_btn" v-if="!realTimeFlag">
+                    <div class="view_top_btn" v-if="!realTimeFlag && mqttMessage.dataTime">
+                        <p v-if="mqttMessage.dataTime" style="margin: 0 auto">数据时间： {{ mqttMessage.dataTime }}</p>
                         <el-button :icon="Back" @click="handleReturn">返回</el-button>
                     </div>
                     <!-- 实时数据主界面组件 -->
@@ -285,7 +285,7 @@
                     <recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
                     <!-- 实时数据-实时趋势组件 -->
                     <realTrend
-                        v-show="!realTimeFlag && sonTab == 1"
+                        v-if="!realTimeFlag && sonTab == 1"
                         ref="realTrendRef"
                         @changeTrendType="changeTrendType"
                     ></realTrend>
@@ -387,11 +387,11 @@ const realTimeFlag = ref(true)
 //实时数据子菜单
 const sonTab = ref()
 //实时录波
-const handleRecordWaves = () => {
+// const handleRecordWaves = () => {
-    realTimeFlag.value = false
+//     realTimeFlag.value = false
-    sonTab.value = 0
+//     sonTab.value = 0
-    window.clearInterval(timer.value)
+//     window.clearInterval(timer.value)
-}
+// }
 //谐波频谱
 const realTrendRef = ref()
 const changeTrendType = (val: any) => {
@@ -400,24 +400,49 @@ const changeTrendType = (val: any) => {
 }
 //谐波频谱
 const activeTrendName: any = ref(0)
+const trendTimer: any = ref()
 const handleTrend = async () => {
     realTimeFlag.value = false
     sonTab.value = 1
     clearInterval(timer.value)
     clearInterval(realDataTimer.value)
+    clearInterval(trendTimer.value)
     await getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
         if (res.code == 'A0000') {
             ElMessage.success('装置应答成功')
             mqttRef.value.on('message', (topic: any, message: any) => {
-                // console.log('mqtt接收到消息', message,topic)
+                console.log('谐波频谱---mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
-                console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
                 let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
+                if (obj.data1) {
                     realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
+                }
             })
         } else {
             ElMessage.success('装置应答失败')
         }
     })
+    //每隔30s调用一下接口，通知后台推送mqtt消息
+    trendTimer.value = setInterval(() => {
+        getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
+            console.log(res, '获取谐波频谱数据')
+            connectMqtt()
+            mqttRef.value.on('connect', (e: any) => {
+                // ElMessage.success('连接mqtt服务器成功!')
+                console.log('mqtt客户端已连接....')
+                // mqttRef.value.subscribe('/Web/Progress')
+                mqttRef.value.subscribe('/Web/RealData/+')
+                //假数据
+            })
+
+            mqttRef.value.on('message', (topic: any, message: any) => {
+                console.log('谐波频谱----mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
+                let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
+                if (obj.data1) {
+                    realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
+                }
+            })
+        })
+    }, 30000)
     await getOverLimitData(lineId.value).then((res: any) => {
         console.log(res, '获取国标限制')
         if (res.code == 'A0000') {
@@ -432,11 +457,8 @@ const harmonicSpectrumRef = ref()
 //实时趋势
 const handleHarmonicSpectrum = () => {
     realTimeFlag.value = false
-    // harmonicSpectrumRef.value &&
-    //     harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
     window.clearInterval(timer.value)
     clearInterval(realDataTimer.value)
-    realTimeFlag.value = false
     sonTab.value = 2
     harmonicSpectrumRef.value && harmonicSpectrumRef.value.resetData()
     getRealDataMqttMsg()
@@ -570,6 +592,7 @@ const connectMqtt = () => {
 const getRealDataMqttMsg = async () => {
     clearInterval(timer.value)
     clearInterval(realDataTimer.value)
+    clearInterval(trendTimer.value)
     //新的实时数据
     //1.调用接口 mqtt推送数据
     await getBasicRealData(lineId.value).then((res: any) => {
@@ -593,8 +616,8 @@ const getRealDataMqttMsg = async () => {
 
             mqttRef.value.on('message', (topic: any, message: any) => {
                 mqttMessage.value = {}
-                // console.log('mqtt接收到消息', message,topic)
+                
-                console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
+                console.log('实时数据&实时趋势---mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
                 let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
                 //处理mqtt数据 1转2除 2转1乘
                 //如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000
@@ -710,11 +733,16 @@ const getRealDataMqttMsg = async () => {
                 mqttMessage.value = obj
                 //更新实时数据值
                 realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
-                //更新谐波频谱数据
+                //更新实时趋势数据
                 !realTimeFlag.value &&
                     sonTab.value == 2 &&
                     harmonicSpectrumRef.value &&
                     harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value)
+                //更新谐波频谱数据
+                !realTimeFlag.value &&
+                    sonTab.value == 1 &&
+                    realTrendRef.value &&
+                    realTrendRef.value.setRealTrendData(obj)
             })
 
             mqttRef.value.on('error', (error: any) => {
@@ -965,7 +993,8 @@ onUnmounted(() => {
     height: 40px;
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: space-between;
+    padding-left: 20%;
 }
 
 .custom-tabs-label {

src/views/govern/device/control/tabs/components/harmonicSpectrum.vue

@@ -1,6 +1,6 @@
-<!-- 实时数据页面 -->
+<!-- 实时趋势 -->
 <template>
-    <div class="harmonic" :style="heightTop">
+    <div class="harmonic" :style="heightTop" v-loading="loading">
         <div class="harmonic_select">
             <el-form :model="searchForm" id="history_select">
                 <el-form-item label="稳态指标">
@@ -21,23 +21,16 @@
                         ></el-option>
                     </el-select>
                 </el-form-item>
-                <el-button type="primary" :loading="loading" @click="init">查询</el-button>
+                <!-- <el-button type="primary" :loading="loading" @click="init">查询</el-button> -->
             </el-form>
         </div>
-        <div class="harmonic_body" v-loading="loading">
+        <div class="harmonic_body">
             <div
                 class="harmonic_body_charts"
                 :style="{ height: height }"
                 v-for="(item, index) in searchForm.index"
                 :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" :isInterVal="true"></MyEchart>
             </div>
         </div>
@@ -46,7 +39,7 @@
 <script lang="ts" setup>
 import { ref, onMounted, watch } from 'vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
+import { getDeviceHarmonicSpectrumData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
 import { mainHeight } from '@/utils/layout'
 import { yMethod } from '@/utils/echartMethod'
 const searchForm: any = ref({})
@@ -66,7 +59,8 @@ indexOptions.value = [
             { name: 'vRmsC', phase: 'C相', data: [] }
         ],
         unit: 'kV',
-        data: []
+        data: [],
+        yMethodList: []
     },
     {
         id: 1,
@@ -77,7 +71,8 @@ indexOptions.value = [
             { name: 'iRmsC', phase: 'C相', data: [] }
         ],
         unit: 'A',
-        data: []
+        data: [],
+        yMethodList: []
     },
     {
         id: 2,
@@ -89,7 +84,8 @@ indexOptions.value = [
             { name: 'pTot', phase: '总', data: [] }
         ],
         unit: 'kW',
-        data: []
+        data: [],
+        yMethodList: []
     },
     {
         id: 3,
@@ -101,7 +97,8 @@ indexOptions.value = [
             { name: 'qTot', phase: '总', data: [] }
         ],
         unit: 'kW',
-        data: []
+        data: [],
+        yMethodList: []
     },
 
     {
@@ -113,7 +110,8 @@ indexOptions.value = [
             { name: 'v1C', phase: 'C相', data: [] }
         ],
         unit: 'kV',
-        data: []
+        data: [],
+        yMethodList: []
     },
     {
         id: 5,
@@ -124,7 +122,8 @@ indexOptions.value = [
             { name: 'i1C', phase: 'C相', data: [] }
         ],
         unit: 'A',
-        data: []
+        data: [],
+        yMethodList: []
     },
     {
         id: 6,
@@ -134,21 +133,24 @@ indexOptions.value = [
             { name: 'freqDev', phase: '频率偏差', data: [] }
         ],
         unit: 'Hz',
-        data: []
+        data: [],
+        yMethodList: []
     },
     {
         id: 7,
         name: '电压不平衡度(%)',
         children: [{ name: 'vUnbalance', phase: '电压不平衡度', data: [] }],
         unit: '%',
-        data: []
+        data: [],
+        yMethodList: []
     },
     {
         id: 8,
         name: '电流不平衡度(%)',
         children: [{ name: 'iUnbalance', phase: '电流不平衡度', data: [] }],
         unit: '%',
-        data: []
+        data: [],
+        yMethodList: []
     }
 ]
 // searchForm.value.index[0] = indexOptions.value[0]
@@ -156,7 +158,9 @@ const heightTop = mainHeight(275)
 let height: any = mainHeight(275).height
 
 const params: any = ref({})
+const loading = ref(false)
 const resetData = () => {
+    loading.value = true
     indexOptions.value = [
         {
             id: 0,
@@ -261,39 +265,27 @@ const setHarmonicSpectrumData = (val: any) => {
     mqttMessage.value = val
     init()
 }
-const chartsList: any = ref([])
-const loading = ref(false)
 // 为每个子组件实例设置ref
 const setChildRef = (index: any) => {
     return `child-${index}`
 }
 const childRefs: any = {}
-const harmonicData: any = ref([])
 const init = () => {
     loading.value = true
-    mqttMessage.value
     searchForm.value.index.map((item: any, index: any) => {
         item?.children.map((vv: any, vvs: any) => {
             if (mqttMessage.value[vv.name]) {
-                // console.log(
-                //     mqttMessage.value[vv.name],
-                //     '这是一个哥哥哥哥哥哥哥哥还是哈哈',
-                //     mqttMessage.value.dataTime,
-                //     vvs,
-                //     index,
-                //     vv.name
-                // )
                 item.linesList = []
                 item?.data.push({
                     time: mqttMessage.value.dataTime,
                     value: mqttMessage.value[vv.name],
                     key: vv.name
                 })
+                item?.yMethodList.push([mqttMessage.value.dataTime, mqttMessage.value[vv.name], vv.name])
                 vv.data.push(mqttMessage.value[vv.name])
             }
         })
     })
-    loading.value = false
     //循环渲染图表
     let timeList: any = []
     searchForm.value.index.map((item: any, index: any) => {
@@ -308,7 +300,6 @@ const init = () => {
         const refName = setChildRef(index)
         childRefs[refName] = ref(null) // 初始化ref
         item.echartsData = {
-            options: {
             title: [
                 {
                     left: '10%',
@@ -331,276 +322,80 @@ const init = () => {
                     }
                 }
             },
-                legend: {
-                    data: [],
-                    top: '2%',
-                    right: '2%'
-                },
             xAxis: {
                 name: '时间',
-                    data: timeList,
+                type: 'time',
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
                 axisLabel: {
-                        show: true,
+                    formatter: {
-                        textStyle: {
+                        day: '{MM}-{dd}',
-                            color: '#000' //X轴文字颜色
+                        month: '{MM}',
+                        year: '{yyyy}'
                     }
-                    },
-                    boundaryGap: false
-                },
-                yAxis: {
-                    type: 'value',
-                    name: item.unit,
-                    splitLine: {
-                        show: false
-                    },
-                    axisTick: {
-                        show: true
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#000'
                 }
+                // data: timeList
             },
-                    splitNumber: 5,
+            // yAxis: {
-                    minInterval: 1
+            //     type: 'value',
-                },
+            //     name: item.unit,
+            //     splitLine: {
+            //         show: false
+            //     },
+            //     axisTick: {
+            //         show: true
+            //     },
+            //     axisLine: {
+            //         show: true,
+            //         lineStyle: {
+            //             color: '#000'
+            //         }
+            //     },
+            //     splitNumber: 5,
+            //     minInterval: 1
+            // },
+            yAxis: [{}],
             series: []
         }
-        }
         //根据指标判断渲染几条线
         searchForm.value.index.length == 3
             ? (height = mainHeight(275, 3).height)
             : (height = mainHeight(275, searchForm.value.index.length).height)
+        console.log(item.children, '<<<<<<<<<<<<<<<<<<<<<<344')
         item.children.map((zz: any, zzIndex: any) => {
-            item.echartsData.options.legend.data.push(zz.phase)
+            let seriesList: any = []
-            item.echartsData.options.series.push({
+            // zz.yMethodList = []
+            // console.log(zz.yMethodList, '不能给嘎嘎嘎哈哈')
+            // zz.yMethodList=new Set(...zz.yMethodList)
+            // return;
+            item.echartsData.series.push({
                 name: zz.phase,
                 type: 'line',
                 increment: true,
-                barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                 itemStyle: {
-                    // normal: {
                     barBorderRadius: [3, 3, 0, 0],
-                    color:['#DAA520', '#2E8B57', '#A52a2a', '#000'][zzIndex],
+                    color: ['#DAA520', '#2E8B57', '#A52a2a', '#000'][zzIndex]
-                    // color: '#00CC99'
-                    // }e
-                    // 修改线条颜色
-                    // lineStyle: {
-                    //     color: ['#DAA520', '#2E8B57', '#A52a2a', '#000'][index]
-                    // }
                 },
-                data: zz.data,
+                data: zz.yMethodList,
                 smooth: true, // 这里设置平滑曲线
                 symbol: 'none' // 设置为 'none' 去掉折点小圆
             })
         })
+        console.log(searchForm.value.index, item.echartsData, '最新的结果')
+    })
 
-        console.log(searchForm.value.index, '最新的结果')
-        return
-        //横轴数据
-        item.echartsData.options.xAxis.data =
-            item.thdDataVOS.length != 0 &&
-            item.thdDataVOS[0].list &&
-            item.thdDataVOS[0].list.map((ss: any) => {
-                return ss.frequency + '次'
-            })
-        let aar: any = []
-        //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'
-                    // }e
-                },
-                data: vv.list.map((vvs: any) => {
-                    aar.push(vvs.statisticalData)
-                    return vvs.statisticalData
-                }),
-                smooth: true, // 这里设置平滑曲线
-                symbol: 'none' // 设置为 'none' 去掉折点小圆
-            })
-            //legend数据
-            item.echartsData.options.legend.data.push(vv.phase + '相')
-        })
-        let [min, max] = yMethod(aar)
-        item.echartsData.options.yAxis.max = max
-        item.echartsData.options.yAxis.min = min
-    })
-    return
-    params.value.list = []
-    searchForm.value.index.map((item: any) => {
-        params.value.list.push({ statisticalId: item })
-    })
-    // 查询谐波频谱
-    getDeviceHarmonicSpectrumData(params.value).then(res => {
-        res.data.length > 3 ? (height = mainHeight(275, 3).height) : (height = mainHeight(275, res.data.length).height)
-        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
-        })
-
-        //循环渲染图表
-        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'
-                                }
-                            },
-                            splitNumber: 5,
-                            minInterval: 1
-                        },
-                        series: []
-                    }
-                }
-                //横轴数据
-                item.echartsData.options.xAxis.data =
-                    item.thdDataVOS.length != 0 &&
-                    item.thdDataVOS[0].list &&
-                    item.thdDataVOS[0].list.map((ss: any) => {
-                        return ss.frequency + '次'
-                    })
-                let aar: any = []
-                //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'
-                            // }e
-                        },
-                        data: vv.list.map((vvs: any) => {
-                            aar.push(vvs.statisticalData)
-                            return vvs.statisticalData
-                        }),
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    })
-                    //legend数据
-                    item.echartsData.options.legend.data.push(vv.phase + '相')
-                })
-                let [min, max] = yMethod(aar)
-                item.echartsData.options.yAxis.max = max
-                item.echartsData.options.yAxis.min = min
-            })
     loading.value = false
-    })
 }
-watch(
+// watch(
-    () => searchForm.value.index,
+//     () => searchForm.value.index,
-    (val: any, oldval: any) => {
+//     (val: any, oldval: any) => {
-        if (val && val.length != 0) {
+//         if (val && val.length != 0) {
 //             init()
-        }
+//         }
-    },
+//     },
-    {
+//     {
-        deep: true,
+//         deep: true,
-        immediate: true
+//         immediate: true
-    }
+//     }
-)
+// )
 onMounted(() => {})
 defineExpose({ resetData, setHarmonicSpectrumData })
 </script>
@@ -629,12 +424,11 @@ defineExpose({ resetData, setHarmonicSpectrumData })
     .harmonic_body {
         flex: 1;
         overflow-y: auto;
-
-        // padding-bottom: 200px;
         .harmonic_body_charts {
-            // margin: 15px 0;
             border: 1px solid #eee;
             position: relative;
+            padding-top: 10px;
+            box-sizing: border-box;
 
             .charts_title {
                 position: absolute;

src/views/govern/device/control/tabs/components/realtrend.vue

@@ -24,11 +24,15 @@
                         <div class="realtrend_table" v-if="Object.keys(tableData).length != 0">
                             <div class="thead_left">
                                 <p>次数</p>
-                                <p>{{ item.groupName }}</p>
+                                <p>
+                                    {{ item.groupName }}{{ item.unit?'('+item.unit+')':'' }}
+                                </p>
                             </div>
                             <div class="thead_right">
                                 <div class="right_cell" v-for="(value, key, index) in tableData" :key="index">
-                                    <p v-if="item.groupName.includes('间谐波') && index != 50">{{ index + 0.5 }}次</p>
+                                    <p v-if="item.groupName.includes('间谐波')">
+                                        {{ Number(String(key).replace('data', ' ')) - 0.5 }}次
+                                    </p>
                                     <p v-else>
                                         <span>{{ String(key).replace('data', ' ') }}次</span>
                                     </p>
@@ -92,32 +96,27 @@ const params = ref({})
 const open = async (val: any) => {
     loading.value = true
     //获取指标tab
-    // await getDeviceTrendDataGroup().then(res => {
-    //     tabsList.value = res.data.reverse()
-    //     if (tabsList.value.length != 0) {
-    //         // activeName.value = tabsList.value[0]?.id
-    //         activeName.value = val.activeTrendName || 0
-    //     }
-    //     params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
-    // })
     tabsList.value = [
         {
             id: '6d5470f509ca271d7108a86e83bb283f',
             groupName: '谐波电压含有率',
             thdDataVOS: null,
-            thdDataTdVODatas: null
+            thdDataTdVODatas: null,
+            unit: '%'
         },
         {
             id: '8dc260f16280184e2b57d26668dc00b1',
             groupName: '谐波电流幅值',
             thdDataVOS: null,
-            thdDataTdVODatas: null
+            thdDataTdVODatas: null,
+            unit: 'A'
         },
         {
             id: 'ae31115b83f02f03a0d3bd65cb017121',
             groupName: '间谐波电压含有率',
             thdDataVOS: null,
-            thdDataTdVODatas: null
+            thdDataTdVODatas: null,
+            unit: '%'
         }
     ]
     if (tabsList.value.length != 0) {
@@ -137,7 +136,7 @@ const open = async (val: any) => {
 const chartsData: any = ref([])
 const chartsYxiasData: any = ref([])
 
-const echartsData: any = ref([])
+const echartsData: any = ref()
 const barCharts = ref()
 
 //加载echarts
@@ -171,94 +170,18 @@ const init = () => {
     })
     xAxisList = [...new Set(xAxisList)]
     echartsData.value = {
-        options: {
+        color: ['#2E8B57', '#DAA520'],
-            // backgroundColor: '#0f375f',
-            // dataZoom: [
-            //     {
-            //         type: 'inside',
-            //         height: 13,
-            //         start: 0,
-            //         bottom: '20px',
-            //         end: 20
-            //     },
-            //     {
-            //         start: 0,
-            //         height: 13,
-            //         bottom: '20px',
-            //         end: 20
-            //     }
-            // ],
-            grid: {
-                top: '14%',
-                bottom: '70px', //也可设置left和right设置距离来控制图表的大小
-                left: '3%',
-                right: '5%'
-            },
-            // tooltip: {
-            //     trigger: 'axis',
-            //     axisPointer: {
-            //         type: 'cross',
-            //         label: {
-            //             show: false
-            //         }
-            //     }
-            // },
-            legend: {
-                data: [],
-                itemGap: 15,
-                type: 'scroll', // 开启滚动分页
-                // orient: 'vertical', // 垂直排列
-                right: '3%', // 位置调整
-                top: 0,
-                bottom: 20,
-                width: 400,
-                height: 50
-            },
         xAxis: {
             name: '次数',
             data: trendData.map((item: any) => {
                 return item.count + '次'
-                }),
+            })
-                axisLine: {
-                    show: true, //隐藏X轴轴线
-                    lineStyle: {
-                        color: '#000'
-                    }
         },
-                axisTick: {
+        yAxis: {
-                    show: true //隐藏X轴刻度
+            name: tabsList.value[activeName.value].unit
         },
-                axisPointer: {
-                    type: 'shadow'
-                },
-                axisLabel: {
-                    show: true,
-                    textStyle: {
-                        color: '#000' //X轴文字颜色
-                    }
-                }
-            },
-            yAxis: [
-                {
-                    type: 'value',
-                    name: '',
-                    splitLine: {
-                        show: false
-                    },
-                    axisTick: {
-                        show: true
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    }
-                }
-            ],
         series: []
     }
-    }
     let list: any = [
         gbData.map((item: any) => {
             return item.value
@@ -268,19 +191,11 @@ const init = () => {
         })
     ]
     let legendList = ['国标限值', tabsList.value[activeName.value]?.groupName]
-    echartsData.value.options.legend.data = legendList
+    // echartsData.value.legend.data = legendList
     list.map((item: any, index: any) => {
-        echartsData.value.options.series.push({
+        echartsData.value.series.push({
             name: legendList[index],
             type: 'bar',
-            barMaxWidth: 16, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-            itemStyle: {
-                // normal: {
-                barBorderRadius: [3, 3, 0, 0],
-                // color: '#00CC99'
-                // }e
-                color: colorList[index]
-            },
             data: item
         })
     })
@@ -299,22 +214,25 @@ const handleClick = (tab: any, event: any) => {
 //获取mqtt传送的实时数据
 const mqttMessage: any = ref()
 const tableData: any = ref({})
-const colorList = ['#DAA520', '#2E8B57', '#A52a2a', '#000']
 const setRealTrendData = (val: any) => {
+    loading.value = true
     console.log(val, '谐波频谱')
     tableData.value = {}
     mqttMessage.value = val
     for (let key in val) {
         if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
             tableData.value[key] = val[key]
+            if(tabsList.value[activeName.value].groupName.includes("间")==false){
                 delete tableData.value.data1
             }
         }
+    }
     if (tableData.value) {
         init()
     } else {
         emit('changeTrendType', activeName.value)
     }
+    loading.value = false
 }
 //获取国标限值
 const limitData: any = ref()

src/views/govern/device/control/tabs/realtime.vue

@@ -190,6 +190,9 @@ const initRadioCharts = () => {
             tooltip: {
                 formatter: '{a} <br/>{c} {b}'
             },
+            toolbox:{
+                show:false
+            },
             legend: {
                 show: false
             },
@@ -203,7 +206,7 @@ const initRadioCharts = () => {
                     // 表盘最大值
                     max: -180,
                     // 表盘分割数
-                    splitNumber: 12,
+                    splitNumber: 6,
                     // 圆心位置
                     center: ['50%', '50%'],
                     // 半径
@@ -301,7 +304,7 @@ const initRadioCharts = () => {
                     // 表盘最大值
                     max: -180,
                     // 表盘分割数
-                    splitNumber: 12,
+                    splitNumber: 6,
                     // 圆心位置
                     center: ['50%', '50%'],
                     // 半径
@@ -433,6 +436,9 @@ const init = () => {
     echartsData.value = {
         options: {
             tooltip: {},
+            toolbox:{
+                show:false
+            },
             series: [
                 {
                     type: 'gauge',
@@ -442,7 +448,7 @@ const init = () => {
                     max: 450,
                     radius: '150%',
                     center: ['55%', '76%'],
-                    splitNumber: 3, //刻度数量
+                    splitNumber: 2, //刻度数量
                     axisLine: {
                         show: true,
                         lineStyle: {
@@ -607,6 +613,7 @@ onMounted(() => {
         justify-content: space-between;
         //border: 1px solid #eee;
         // padding: 10px;
+        margin-top: 10px;
         .view_top_left,
         .view_top_right {
             // width: 300px;
@@ -636,10 +643,10 @@ onMounted(() => {
             position: relative;
             .mid_charts {
                 width: 100%;
-                height: 80%;
+                height: 280px;
-                position: absolute;
+                // position: absolute;
-                top: 20%;
+                // top: 20%;
-                bottom: 10px;
+                // bottom: 10px;
             }
         }
 

src/views/govern/device/planData/index.vue

@@ -568,7 +568,7 @@ const init = (flag: boolean) => {
 
                                         seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
                                     })
-
+console.log(seriesList,"9999999999");
                                     echartsData.value.options.series.push({
                                         name: kk[0].phase + '相' + item[0].anotherName,
                                         type: 'line',