谐波频谱数据展示

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

@@ -12,9 +12,20 @@
                     <!-- <el-button v-if="deviceType == '1'"  type="primary" @click="handleDownLoadTemplate">
                         模版下载
                     </el-button> -->
-                    <el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Connection"  @click="handleImport">离线补召</el-button>
+                    <el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Connection" @click="handleImport">
-                    <el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">在线补召</el-button>
+                        离线补召
-                    <el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Tickets" @click="handleAnalysisList">补招日志</el-button>
+                    </el-button>
+                    <el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">
+                        在线补召
+                    </el-button>
+                    <el-button
+                        v-if="deviceType == '1'"
+                        type="primary"
+                        icon="el-icon-Tickets"
+                        @click="handleAnalysisList"
+                    >
+                        补招日志
+                    </el-button>
                 </template>
                 <el-descriptions-item label="名称">
                     {{ deviceData.name ? deviceData.name : '/' }}
@@ -373,8 +384,6 @@ const handleRecordWaves = () => {
 }
 //实时趋势
 const realTrendRef = ref()
-//谐波频谱
-const harmonicSpectrumRef = ref()
 const changeTrendType = (val: any) => {
     activeTrendName.value = val * 1
     handleTrend()
@@ -409,12 +418,17 @@ const handleTrend = async () => {
         realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value, activeTrendName: activeTrendName.value })
 }
 //谐波频谱
+const harmonicSpectrumRef = ref()
+//谐波频谱
 const handleHarmonicSpectrum = () => {
     realTimeFlag.value = false
-    sonTab.value = 2
+    // harmonicSpectrumRef.value &&
-    harmonicSpectrumRef.value &&
+    //     harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
-        harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
     window.clearInterval(timer.value)
+    clearInterval(realDataTimer.value)
+    realTimeFlag.value = false
+    sonTab.value = 2
+    getRealDataMqttMsg()
 }
 //返回
 const handleReturn = () => {
@@ -542,9 +556,172 @@ const connectMqtt = () => {
     }
     mqttRef.value = mqtt.connect(url, options)
 }
+const getRealDataMqttMsg = async () => {
+    //新的实时数据
+    //1.调用接口 mqtt推送数据
+    await getBasicRealData(lineId.value).then((res: any) => {
+        if (res.code == 'A0000') {
+            ElMessage.success('装置应答成功')
+        } else {
+            ElMessage.success('装置应答失败')
+        }
+    })
+    //2.建立mqtt通讯
+    //每隔30s调用一下接口，通知后台推送mqtt消息
+    realDataTimer.value = await setInterval(() => {
+        getBasicRealData(lineId.value).then((res: any) => {
+            console.log(res, '获取基础实时数据')
+        })
+    }, 30000)
+    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) => {
+        mqttMessage.value = {}
+        // console.log('mqtt接收到消息', message,topic)
+        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
+        //如果消息返回值是一次值，下拉框是一次值只需要单位换算 除以1000
+        if (obj.dataLevel == formInline.dataLevel) {
+            obj = {
+                ...obj,
+                // 电压有效值
+                vRmsA: obj.vRmsA / 1000,
+                vRmsB: obj.vRmsB / 1000,
+                vRmsC: obj.vRmsC / 1000,
+                //基波电压幅值
+                v1A: obj.v1A / 1000,
+                v1B: obj.v1B / 1000,
+                v1C: obj.v1C / 1000,
+                //有功功率
+                pA: obj.pA / 1000,
+                pB: obj.pB / 1000,
+                pC: obj.pC / 1000,
+                pTot: obj.pTot / 1000,
+                //无功功率
+                qA: obj.qA / 1000,
+                qB: obj.qB / 1000,
+                qC: obj.qC / 1000,
+                qTot: obj.qTot / 1000,
+                //视在功率
+                sA: obj.sA / 1000,
+                sB: obj.sB / 1000,
+                sC: obj.sC / 1000,
+                sTot: obj.sTot / 1000
+            }
+        }
+        //如果消息返回值是二次值，下拉框是一次值需要单位换算 除以1000 并且乘以pt ct
+        if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') {
+            obj = {
+                ...obj,
+                // 电压有效值
+                vRmsA: (obj.vRmsA * obj.pt) / 1000,
+                vRmsB: (obj.vRmsA * obj.pt) / 1000,
+                vRmsC: (obj.vRmsA * obj.pt) / 1000,
+                // 电流有效值
+                iRmsA: obj.iRmsA * obj.ct,
+                iRmsB: obj.iRmsA * obj.ct,
+                iRmsC: obj.iRmsA * obj.ct,
+                //基波电压幅值
+                v1A: (obj.v1A * obj.pt) / 1000,
+                v1B: (obj.v1B * obj.pt) / 1000,
+                v1C: (obj.v1C * obj.pt) / 1000,
+                //基波电流幅值
+                i1A: obj.i1A * obj.ct,
+                i1B: obj.i1B * obj.ct,
+                i1C: obj.i1C * obj.ct,
+                //有功功率
+                pA: (obj.pA * obj.pt * obj.ct) / 1000,
+                pB: (obj.pB * obj.pt * obj.ct) / 1000,
+                pC: (obj.pC * obj.pt * obj.ct) / 1000,
+                pTot: (obj.pTot * obj.pt * obj.ct) / 1000,
+                //无功功率
+                qA: (obj.qA * obj.pt * obj.ct) / 1000,
+                qB: (obj.qB * obj.pt * obj.ct) / 1000,
+                qC: (obj.qC * obj.pt * obj.ct) / 1000,
+                qTot: (obj.qTot * obj.pt * obj.ct) / 1000,
+                //视在功率
+                sA: (obj.sA * obj.pt * obj.ct) / 1000,
+                sB: (obj.sB * obj.pt * obj.ct) / 1000,
+                sC: (obj.sC * obj.pt * obj.ct) / 1000,
+                sTot: (obj.sTot * obj.pt * obj.ct) / 1000
+            }
+        }
+        //如果消息返回值是一次值，下拉框是二次值需要单位换算 乘以1000 并且除以pt ct
+        if (obj.dataLevel == 'Primary' && formInline.dataLevel == 'Secondary') {
+            console.log(6666)
+            obj = {
+                ...obj,
+                // 电压有效值
+                vRmsA: (obj.vRmsA / obj.pt) * 1000,
+                vRmsB: (obj.vRmsA / obj.pt) * 1000,
+                vRmsC: (obj.vRmsA / obj.pt) * 1000,
+                // 电流有效值
+                iRmsA: obj.iRmsA / obj.ct,
+                iRmsB: obj.iRmsA / obj.ct,
+                iRmsC: obj.iRmsA / obj.ct,
+                //基波电压幅值
+                v1A: (obj.v1A / obj.pt) * 1000,
+                v1B: (obj.v1B / obj.pt) * 1000,
+                v1C: (obj.v1C / obj.pt) * 1000,
+                //基波电流幅值
+                i1A: obj.i1A / obj.ct,
+                i1B: obj.i1B / obj.ct,
+                i1C: obj.i1C / obj.ct,
+                //有功功率
+                pA: (obj.pA / obj.pt / obj.ct) * 1000,
+                pB: (obj.pB / obj.pt / obj.ct) * 1000,
+                pC: (obj.pC / obj.pt / obj.ct) * 1000,
+                pTot: (obj.pTot / obj.pt / obj.ct) * 1000,
+                //无功功率
+                qA: (obj.qA / obj.pt / obj.ct) * 1000,
+                qB: (obj.qB / obj.pt / obj.ct) * 1000,
+                qC: (obj.qC / obj.pt / obj.ct) * 1000,
+                qTot: (obj.qTot / obj.pt / obj.ct) * 1000,
+                //视在功率
+                sA: (obj.sA / obj.pt / obj.ct) * 1000,
+                sB: (obj.sB / obj.pt / obj.ct) * 1000,
+                sC: (obj.sC / obj.pt / obj.ct) * 1000,
+                sTot: (obj.sTot / obj.pt / obj.ct) * 1000
+            }
+        }
+        //保留两位小数
+        for (var i in obj) {
+            if (typeof obj[i] == 'number' && obj[i] != 0 && Math.abs(obj[i]) % 1 != 0) {
+                obj[i] = obj[i].toFixed(2)
+            }
+        }
+        mqttMessage.value = obj
+        //更新实时数据值
+        realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
+        //更新谐波频谱数据
+        !realTimeFlag.value &&
+            sonTab.value == 2 &&
+            harmonicSpectrumRef.value &&
+            harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value)
+    })
+
+    mqttRef.value.on('error', (error: any) => {
+        console.log('mqtt连接失败...', error)
+        mqttRef.value.end()
+    })
+
+    mqttRef.value.on('close', function () {
+        console.log('mqtt客户端已断开连接.....')
+    })
+}
 //tab点击事件
 
 const realDataTimer: any = ref()
+const mqttMessage = ref<any>({})
 const handleClick = async (tab?: any) => {
     if (realDataTimer.value) {
         window.clearInterval(realDataTimer.value)
@@ -614,163 +791,7 @@ const handleClick = async (tab?: any) => {
             tableLoading.value = false
         }, 1500)
 
-        //新的实时数据
+        getRealDataMqttMsg()
-        //1.调用接口 mqtt推送数据
-        await getBasicRealData(lineId.value).then((res: any) => {
-            if (res.code == 'A0000') {
-                ElMessage.success('装置应答成功')
-            } else {
-                ElMessage.success('装置应答失败')
-            }
-        })
-        //2.建立mqtt通讯
-
-        const mqttMessage = ref<any>({})
-
-        //每隔30s调用一下接口，通知后台推送mqtt消息
-        realDataTimer.value = setInterval(() => {
-            getBasicRealData(lineId.value).then((res: any) => {
-                console.log(res, '获取基础实时数据')
-            })
-        }, 30000)
-        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) => {
-            mqttMessage.value = {}
-            // console.log('mqtt接收到消息', message,topic)
-            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
-            //如果消息返回值是一次值，下拉框是一次值只需要单位换算 除以1000
-            if (obj.dataLevel == formInline.dataLevel) {
-                obj = {
-                    ...obj,
-                    // 电压有效值
-                    vRmsA: obj.vRmsA / 1000,
-                    vRmsB: obj.vRmsB / 1000,
-                    vRmsC: obj.vRmsC / 1000,
-                    //基波电压幅值
-                    v1A: obj.v1A / 1000,
-                    v1B: obj.v1B / 1000,
-                    v1C: obj.v1C / 1000,
-                    //有功功率
-                    pA: obj.pA / 1000,
-                    pB: obj.pB / 1000,
-                    pC: obj.pC / 1000,
-                    pTot: obj.pTot / 1000,
-                    //无功功率
-                    qA: obj.qA / 1000,
-                    qB: obj.qB / 1000,
-                    qC: obj.qC / 1000,
-                    qTot: obj.qTot / 1000,
-                    //视在功率
-                    sA: obj.sA / 1000,
-                    sB: obj.sB / 1000,
-                    sC: obj.sC / 1000,
-                    sTot: obj.sTot / 1000
-                }
-            }
-            //如果消息返回值是二次值，下拉框是一次值需要单位换算 除以1000 并且乘以pt ct
-            if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') {
-                obj = {
-                    ...obj,
-                    // 电压有效值
-                    vRmsA: (obj.vRmsA * obj.pt) / 1000,
-                    vRmsB: (obj.vRmsA * obj.pt) / 1000,
-                    vRmsC: (obj.vRmsA * obj.pt) / 1000,
-                    // 电流有效值
-                    iRmsA: obj.iRmsA * obj.ct,
-                    iRmsB: obj.iRmsA * obj.ct,
-                    iRmsC: obj.iRmsA * obj.ct,
-                    //基波电压幅值
-                    v1A: (obj.v1A * obj.pt) / 1000,
-                    v1B: (obj.v1B * obj.pt) / 1000,
-                    v1C: (obj.v1C * obj.pt) / 1000,
-                    //基波电流幅值
-                    i1A: obj.i1A * obj.ct,
-                    i1B: obj.i1B * obj.ct,
-                    i1C: obj.i1C * obj.ct,
-                    //有功功率
-                    pA: (obj.pA * obj.pt * obj.ct) / 1000,
-                    pB: (obj.pB * obj.pt * obj.ct) / 1000,
-                    pC: (obj.pC * obj.pt * obj.ct) / 1000,
-                    pTot: (obj.pTot * obj.pt * obj.ct) / 1000,
-                    //无功功率
-                    qA: (obj.qA * obj.pt * obj.ct) / 1000,
-                    qB: (obj.qB * obj.pt * obj.ct) / 1000,
-                    qC: (obj.qC * obj.pt * obj.ct) / 1000,
-                    qTot: (obj.qTot * obj.pt * obj.ct) / 1000,
-                    //视在功率
-                    sA: (obj.sA * obj.pt * obj.ct) / 1000,
-                    sB: (obj.sB * obj.pt * obj.ct) / 1000,
-                    sC: (obj.sC * obj.pt * obj.ct) / 1000,
-                    sTot: (obj.sTot * obj.pt * obj.ct) / 1000
-                }
-            }
-            //如果消息返回值是一次值，下拉框是二次值需要单位换算 乘以1000 并且除以pt ct
-            if (obj.dataLevel == 'Primary' && formInline.dataLevel == 'Secondary') {
-                console.log(6666)
-                obj = {
-                    ...obj,
-                    // 电压有效值
-                    vRmsA: (obj.vRmsA / obj.pt) * 1000,
-                    vRmsB: (obj.vRmsA / obj.pt) * 1000,
-                    vRmsC: (obj.vRmsA / obj.pt) * 1000,
-                    // 电流有效值
-                    iRmsA: obj.iRmsA / obj.ct,
-                    iRmsB: obj.iRmsA / obj.ct,
-                    iRmsC: obj.iRmsA / obj.ct,
-                    //基波电压幅值
-                    v1A: (obj.v1A / obj.pt) * 1000,
-                    v1B: (obj.v1B / obj.pt) * 1000,
-                    v1C: (obj.v1C / obj.pt) * 1000,
-                    //基波电流幅值
-                    i1A: obj.i1A / obj.ct,
-                    i1B: obj.i1B / obj.ct,
-                    i1C: obj.i1C / obj.ct,
-                    //有功功率
-                    pA: (obj.pA / obj.pt / obj.ct) * 1000,
-                    pB: (obj.pB / obj.pt / obj.ct) * 1000,
-                    pC: (obj.pC / obj.pt / obj.ct) * 1000,
-                    pTot: (obj.pTot / obj.pt / obj.ct) * 1000,
-                    //无功功率
-                    qA: (obj.qA / obj.pt / obj.ct) * 1000,
-                    qB: (obj.qB / obj.pt / obj.ct) * 1000,
-                    qC: (obj.qC / obj.pt / obj.ct) * 1000,
-                    qTot: (obj.qTot / obj.pt / obj.ct) * 1000,
-                    //视在功率
-                    sA: (obj.sA / obj.pt / obj.ct) * 1000,
-                    sB: (obj.sB / obj.pt / obj.ct) * 1000,
-                    sC: (obj.sC / obj.pt / obj.ct) * 1000,
-                    sTot: (obj.sTot / obj.pt / obj.ct) * 1000
-                }
-            }
-            //保留两位小数
-            for (var i in obj) {
-                if (typeof obj[i] == 'number' && obj[i] != 0) {
-                    obj[i].toFixed(2)
-                }
-            }
-            mqttMessage.value = obj
-            realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
-        })
-
-        mqttRef.value.on('error', (error: any) => {
-            console.log('mqtt连接失败...', error)
-            mqttRef.value.end()
-        })
-
-        mqttRef.value.on('close', function () {
-            console.log('mqtt客户端已断开连接.....')
-        })
     }
     //查询暂态事件
     if (dataSet.value.includes('_event')) {

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

@@ -1,47 +1,36 @@
 <template>
     <div class="default-main device">
-        <currentDevice  ref="currentDeviceRef"/>
+        <currentDevice ref="currentDeviceRef" />
-        <!-- <el-tabs v-model="activeName" type="border-card">
-            <el-tab-pane label="当前设备补召" name="0">
-                <currentDevice v-if="activeName == '0'" ref="currentDeviceRef"/>
-            </el-tab-pane>
-            <el-tab-pane label="历史设备补召" name="1">
-                <history v-if="activeName == '1'" />
-            </el-tab-pane>
-        </el-tabs> -->
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted,watch ,nextTick} from 'vue'
+import { ref, onMounted, watch, nextTick } from 'vue'
-// import current from './supplementaryRecruitment/current.vue'
 import currentDevice from './supplementaryRecruitment/currentDevice.vue'
-import history from './supplementaryRecruitment/history.vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 const activeName = ref('0')
-const currentDeviceRef=ref()
+const currentDeviceRef = ref()
 watch(
-    ()=>activeName.value,
+    () => activeName.value,
-    (val,oldVal)=>{
+    (val, oldVal) => {
-        if(val=='0'){
+        if (val == '0') {
-            nextTick(()=>{
+            nextTick(() => {
-                currentDeviceRef.value&&currentDeviceRef.value.getMakeUpDataList(route.query)
+                currentDeviceRef.value && currentDeviceRef.value.getMakeUpDataList(route.query)
             })
-           
         }
     },
     {
-        immediate:true,
+        immediate: true,
-        deep:true
+        deep: true
     }
 )
 onMounted(() => {
     console.log()
-    currentDeviceRef.value&&currentDeviceRef.value.getMakeUpDataList(route.query)
+    currentDeviceRef.value && currentDeviceRef.value.getMakeUpDataList(route.query)
 })
 </script>
 <style lang="scss" scoped>
-.device{
+.device {
     width: 100%;
     height: 100%;
 }

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

@@ -10,12 +10,14 @@
                         collapse-tags-tooltip
                         v-model="searchForm.index"
                         placeholder="请选择统计指标"
+                        :multiple-limit="3"
+                        value-key="id"
                     >
                         <el-option
-                            v-for="item in indexOptions"
+                            v-for="(item, index) in indexOptions"
-                            :key="item.id"
                             :label="item.name"
-                            :value="item.id"
+                            :key="index"
+                            :value="item"
                         ></el-option>
                     </el-select>
                 </el-form-item>
@@ -26,16 +28,16 @@
             <div
                 class="harmonic_body_charts"
                 :style="{ height: height }"
-                v-for="(item, index) in chartsList"
+                v-for="(item, index) in searchForm.index"
                 :key="index"
             >
-                <p class="charts_title">
+                <!-- <p class="charts_title">
                     {{
                         indexOptions.find((item: any) => {
                             return item.id == searchForm.index[index]
                         })?.name
                     }}
-                </p>
+                </p> -->
                 <MyEchart :ref="setChildRef(index)" :options="item.echartsData"></MyEchart>
             </div>
         </div>
@@ -43,8 +45,6 @@
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, watch } from 'vue'
-import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
-import { queryStatistical } from '@/api/system-boot/csstatisticalset'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
 import { mainHeight } from '@/utils/layout'
@@ -55,55 +55,103 @@ searchForm.value = {
 }
 //统计指标
 const indexOptions: any = ref([])
-// const legendDictList: any = ref([])
+
-// queryByCode('portable-harmonic').then(res => {
-//     queryCsDictTree(res.data.id).then(item => {
-//         indexOptions.value = item.data
-//         searchForm.value.index[0] = indexOptions.value[0].id
-//     })
-//     queryStatistical(res.data.id).then(vv => {
-//         legendDictList.value = vv.data
-//     })
-// })
 indexOptions.value = [
     {
         id: 0,
-        name: '电压总有效值(kV)'
+        name: '电压总有效值(kV)',
+        children: [
+            { name: 'vRmsA', phase: 'A相', data: [] },
+            { name: 'vRmsB', phase: 'B相', data: [] },
+            { name: 'vRmsC', phase: 'C相', data: [] }
+        ],
+        unit:'kV',
+        data: []
     },
     {
         id: 1,
-        name: '电流总有效值(A)'
+        name: '电流总有效值(A)',
+        children: [
+            { name: 'iRmsA', phase: 'A相', data: [] },
+            { name: 'iRmsB', phase: 'B相', data: [] },
+            { name: 'iRmsC', phase: 'C相', data: [] }
+        ],
+        unit:"A",
+        data: []
     },
     {
         id: 2,
-        name: '有功功率(kW)'
+        name: '有功功率(kW)',
+        children: [
+            { name: 'pA', phase: 'A相', data: [] },
+            { name: 'pB', phase: 'B相', data: [] },
+            { name: 'pC', phase: 'C相', data: [] },
+            { name: 'pTot', phase: '总', data: [] }
+        ],
+        unit:"kW",
+        data: []
     },
     {
         id: 3,
-        name: '无功功率(kW)'
+        name: '无功功率(kW)',
+        children: [
+            { name: 'qA', phase: 'A相', data: [] },
+            { name: 'qB', phase: 'B相', data: [] },
+            { name: 'qC', phase: 'C相', data: [] },
+            { name: 'qTot', phase: '总', data: [] }
+        ],
+        unit:"kW",
+        data: []
     },
+
     {
         id: 4,
-        name: '基波电压总有效值(kV)'
+        name: '基波电压总有效值(kV)',
+        children: [
+            { name: 'v1A', phase: 'A相', data: [] },
+            { name: 'v1B', phase: 'B相', data: [] },
+            { name: 'v1C', phase: 'C相', data: [] }
+        ],
+        unit:"kV",
+        data: []
     },
     {
         id: 5,
-        name: '基波电流总有效值(A)'
+        name: '基波电流总有效值(A)',
+        children: [
+            { name: 'i1A', phase: 'A相', data: [] },
+            { name: 'i1B', phase: 'B相', data: [] },
+            { name: 'i1C', phase: 'C相', data: [] }
+        ],
+        unit:"A",
+        data: []
     },
     {
         id: 6,
-        name: '频率(Hz)'
+        name: '频率(Hz)',
+        children: [
+            { name: 'freq',phase: '频率', data: [] },
+            { name: 'freqDev',phase: '频率偏差', data: [] }
+        ],
+        unit:"Hz",
+        data: []
     },
     {
         id: 7,
-        name: '电压不平衡度(%)'
+        name: '电压不平衡度(%)',
+        children: [{ name: 'vUnbalance',phase: '电压不平衡度', data: [] }],
+        unit:"%",
+        data: []
     },
     {
         id: 8,
-        name: '电流不平衡度(%)'
+        name: '电流不平衡度(%)',
+        children: [{ name: 'iUnbalance',phase: '电流不平衡度', data: [] }],
+        unit:"%",
+        data: []
     }
 ]
-searchForm.value.index[0] = indexOptions.value[0].id
+searchForm.value.index[0] = indexOptions.value[0]
 const heightTop = mainHeight(275)
 let height: any = mainHeight(275).height
 //谐波频谱参数
@@ -112,20 +160,194 @@ const getHarmonicSpectrumParams = (val: any) => {
     params.value = val
     init()
 }
+const mqttMessage: any = ref()
+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 = {}
+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
+                })
+                vv.data.push(mqttMessage.value[vv.name])
+            }
+        })
+    })
+    loading.value = false
+    //循环渲染图表
+    let timeList: any = []
+    searchForm.value.index.map((item: any, index: any) => {
+        timeList = Array.from(
+            new Set(
+                item.data.map((vv: any) => {
+                    return vv.time
+                })
+            )
+        )
+        //循环渲染图表
+        const refName = setChildRef(index)
+        childRefs[refName] = ref(null) // 初始化ref
+        item.echartsData = {
+            options: {
+                title: [
+                    {
+                        left: '10%',
+                        top: 0,
+                        text: item.name
+                    }
+                ],
+                // 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: timeList,
+                    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.unit,
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: true
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    splitNumber: 5,
+                    minInterval: 1
+                },
+                series: []
+            }
+        }
+        //根据指标判断渲染几条线
+        searchForm.value.index.length == 3
+            ? (height = mainHeight(275, 3).height)
+            : (height = mainHeight(275, searchForm.value.index.length).height)
+        item.children.map((zz: any) => {
+            item.echartsData.options.legend.data.push(zz.phase)
+            item.echartsData.options.series.push({
+                name: zz.phase,
+                type: 'line',
+                barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+                itemStyle: {
+                    // normal: {
+                    barBorderRadius: [3, 3, 0, 0]
+                    // color: '#00CC99'
+                    // }e
+                },
+                data: zz.data,
+                smooth: true, // 这里设置平滑曲线
+                symbol: 'none' // 设置为 'none' 去掉折点小圆
+            })
+        })
+
+        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
@@ -182,7 +404,7 @@ const init = () => {
                             right: '2%'
                         },
                         xAxis: {
-                            name: '次数',
+                            name: '时间',
                             data: [],
                             axisLine: {
                                 show: true, //隐藏X轴轴线
@@ -264,7 +486,6 @@ const init = () => {
             })
         loading.value = false
     })
-    return
 }
 watch(
     () => searchForm.value.index,
@@ -279,7 +500,7 @@ watch(
     }
 )
 onMounted(() => {})
-defineExpose({ getHarmonicSpectrumParams })
+defineExpose({ getHarmonicSpectrumParams, setHarmonicSpectrumData })
 </script>
 <style lang="scss" scoped>
 .harmonic {

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

@@ -1,8 +1,6 @@
 <!-- 实时录波 -->
 <template>
-    <div class="record">
+    <div class="record">实时录波</div>
-实时录波
-    </div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
@@ -11,9 +9,9 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
-.record{
+.record {
-    width:100%;
+    width: 100%;
-    height:100%;
+    height: 100%;
     border: 2px solid red;
 }
 </style>

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

@@ -643,7 +643,7 @@ onMounted(() => {
     }
     .view_bot {
         min-height: 300px;
-        margin: 10px 0 20px 0;
+        margin: 10px 0 0 0;
         overflow: auto !important;
         flex: 1 !important;
         padding-bottom: 200px !important;

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

@@ -9,20 +9,43 @@
                         <DatePicker ref="datePickerRef"></DatePicker>
                     </el-form-item>
                     <el-form-item label="统计指标" label-width="80px">
-                        <el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
+                        <el-select
-                            v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
+                            multiple
-                            <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
+                            :multiple-limit="3"
-                                :value="item.id"></el-option>
+                            collapse-tags
+                            collapse-tags-tooltip
+                            v-model="searchForm.index"
+                            placeholder="请选择统计指标"
+                            @change="onIndexChange($event)"
+                        >
+                            <el-option
+                                v-for="item in indexOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            ></el-option>
                         </el-select>
                     </el-form-item>
                     <div v-for="(item, index) in countData" :key="index">
-                        <el-form-item :label="item.name + '谐波次数'" v-if="item.countOptions.length != 0"
+                        <el-form-item
-                            label-width="180px">
+                            :label="item.name + '谐波次数'"
-
+                            v-if="item.countOptions.length != 0"
-                            <el-select v-model="item.count" multiple collapse-tags collapse-tags-tooltip
+                            label-width="180px"
-                                @change="onCountChange($event, index)" placeholder="请选择谐波次数">
+                        >
-                                <el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
+                            <el-select
-                                    :value="vv"></el-option>
+                                v-model="item.count"
+                                multiple
+                                collapse-tags
+                                collapse-tags-tooltip
+                                @change="onCountChange($event, index)"
+                                placeholder="请选择谐波次数"
+                            >
+                                <el-option
+                                    v-for="vv in item.countOptions"
+                                    :key="vv"
+                                    :label="vv"
+                                    :value="vv"
+                                ></el-option>
                             </el-select>
                         </el-form-item>
                     </div>
@@ -32,7 +55,6 @@
                     <el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
                 </template>
             </TableHeader>
-
         </div>
         <div class="history_chart" :style="pageHeight" v-loading="loading">
             <MyEchart ref="historyChart" :options="echartsData" />
@@ -192,14 +214,14 @@ const init = async () => {
                         let unitList: any = []
 
                         let groupedData = chartsList.reduce((acc, item) => {
-                            let key = item.anotherName;
+                            let key = item.anotherName
                             if (!acc[key]) {
-                                acc[key] = [];
+                                acc[key] = []
                             }
-                            acc[key].push(item);
+                            acc[key].push(item)
-                            return acc;
+                            return acc
                         }, {})
-                        let result = Object.values(groupedData);
+                        let result = Object.values(groupedData)
                         if (chartsList.length > 0) {
                             unitList = result.map((item: any) => {
                                 return item[0].unit
@@ -208,7 +230,6 @@ const init = async () => {
 
                         echartsData.value = {
                             legend: {
-
                                 itemWidth: 20,
                                 itemHeight: 10,
                                 itemGap: 15,
@@ -236,18 +257,15 @@ const init = async () => {
                                 backgroundColor: 'rgba(0,0,0,0.35)',
                                 borderWidth: 0,
                                 formatter(params) {
-                                    const xname = params[0].value[0];
+                                    const xname = params[0].value[0]
-                                    let str = `${xname}<br>`;
+                                    let str = `${xname}<br>`
                                     params.forEach((el, index) => {
-                                        str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${el.value[2]}<br>`;
+                                        str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${
-                                    });
+                                            el.value[2]
-                                    return str;
+                                        }<br>`
-                                },
+                                    })
-
+                                    return str
-
+                                }
-
-
-
                             },
                             color: ['#FFCC00', '#009900', '#CC0000', ...color],
                             xAxis: {
@@ -260,14 +278,10 @@ const init = async () => {
                                     }
                                 }
                             },
-                            yAxis: [{
+                            yAxis: [{}],
-
-                            }],
 
                             options: {
-                                series: [
+                                series: []
-
-                                ]
                             }
                         }
                         if (chartsList.length > 0) {
@@ -275,7 +289,7 @@ const init = async () => {
                             unitList.forEach((item: any, index: any) => {
                                 let right = {
                                     position: 'right',
-                                    offset: (index - 1) * 80,
+                                    offset: (index - 1) * 80
                                 }
                                 echartsData.value.yAxis.push({
                                     name: item,
@@ -283,8 +297,7 @@ const init = async () => {
                                     splitNumber: 5,
                                     minInterval: 1,
                                     splitLine: {
-                                        show: false,
+                                        show: false
-
                                     },
                                     ...(index > 0 ? right : null)
                                 })
@@ -293,26 +306,26 @@ const init = async () => {
                             result.forEach((item: any, index: any) => {
                                 let yMethodList: any = []
 
-                                let ABCList = Object.values(item.reduce((acc, item) => {
+                                let ABCList = Object.values(
-                                    let key = item.phase;
+                                    item.reduce((acc, item) => {
-                                    if (!acc[key]) {
+                                        let key = item.phase
-                                        acc[key] = [];
+                                        if (!acc[key]) {
-                                    }
+                                            acc[key] = []
-                                    acc[key].push(item);
+                                        }
-                                    return acc;
+                                        acc[key].push(item)
-                                }, {}));
+                                        return acc
-                                ABCList.forEach((kk: any,) => {
+                                    }, {})
+                                )
+                                ABCList.forEach((kk: any) => {
                                     let seriesList: any = []
                                     kk.forEach((cc: any) => {
                                         if (cc.statisticalData) {
                                             yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
-
                                         }
 
-                                        seriesList.push([cc.time, cc.statisticalData?.toFixed(2),cc.unit])
+                                        seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
                                     })
 
-
                                     echartsData.value.options.series.push({
                                         name: kk[0].phase + '相' + item[0].anotherName,
                                         type: 'line',
@@ -320,17 +333,11 @@ const init = async () => {
                                         symbol: 'none',
                                         data: seriesList,
                                         yAxisIndex: index
-
                                     })
-
-
                                 })
                                 let [min, max] = yMethod(yMethodList)
                                 echartsData.value.yAxis[index].min = min
                                 echartsData.value.yAxis[index].max = max
-
-
-
                             })
                         }
                         loading.value = false
@@ -350,7 +357,6 @@ const selectChange = (flag: boolean) => {
     } else {
         pageHeight.value = mainHeight(290)
     }
-
 }
 //导出
 const historyChart = ref()
@@ -521,7 +527,7 @@ const onCountChange = (val: any, index: any) => {
         countData.value[index].count = [countData.value[index].countOptions[0]]
     }
 }
-const onIndexChange = (val: any,) => {
+const onIndexChange = (val: any) => {
     if (val.length == 0) {
         searchForm.value.index = [indexOptions.value[0].id]
     }
@@ -551,7 +557,7 @@ watch(
     }
 )
 // watch(
-//     () =>  trendRequestData.value,      
+//     () =>  trendRequestData.value,
 //     (val: any, oldval: any) => {
 //         if (val) {
 //             init()