实时数据-实时趋势

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

@@ -263,7 +263,11 @@
                     <!-- 实时数据-实时录波组件 -->
                     <recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
                     <!-- 实时数据-实时趋势组件 -->
-                    <realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></realTrend>
+                    <realTrend
+                        v-show="!realTimeFlag && sonTab == 1"
+                        ref="realTrendRef"
+                        @changeTrendType="changeTrendType"
+                    ></realTrend>
                     <!-- 实时数据-谐波频谱组件 -->
                     <harmonicSpectrum
                         v-show="!realTimeFlag && sonTab == 2"
@@ -372,26 +376,38 @@ const handleRecordWaves = () => {
 const realTrendRef = ref()
 //谐波频谱
 const harmonicSpectrumRef = ref()
+const changeTrendType = (val: any) => {
+    activeTrendName.value = val * 1
+    handleTrend()
+}
 //实时趋势
-const handleTrend = () => {
+const activeTrendName: any = ref(0)
+const handleTrend = async () => {
     realTimeFlag.value = false
     sonTab.value = 1
     clearInterval(timer.value)
     clearInterval(realDataTimer.value)
-    getHarmRealData(lineId.value, 0).then((res: any) => {
+    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)))))
-                let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
+                let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
                 realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
             })
+        } else {
+            ElMessage.success('装置应答失败')
         }
     })
-    getOverLimitData(lineId.value).then((res: any) => {
+    await getOverLimitData(lineId.value).then((res: any) => {
         console.log(res, '获取国标限制')
+        if(res.code=='A0000'){
+            realTrendRef.value && realTrendRef.value.setOverLimitData(res.data)
+        }
     })
-    realTrendRef.value && realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value })
+    realTrendRef.value &&
+        realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value, activeTrendName: activeTrendName.value })
 }
 //谐波频谱
 const handleHarmonicSpectrum = () => {
@@ -607,14 +623,18 @@ const handleClick = async (tab?: any) => {
         //新的实时数据
         //1.调用接口 mqtt推送数据
         await getBasicRealData(lineId.value).then((res: any) => {
-            console.log(res, '获取基础实时数据')
+            if (res.code == 'A0000') {
+                ElMessage.success('装置应答成功')
+            } else {
+                ElMessage.success('装置应答失败')
+            }
         })
         //2.建立mqtt通讯
 
         const mqttMessage = ref<any>({})
 
         //每隔30s调用一下接口，通知后台推送mqtt消息
-        realDataTimer.value =  setInterval(() => {
+        realDataTimer.value = setInterval(() => {
             getBasicRealData(lineId.value).then((res: any) => {
                 console.log(res, '获取基础实时数据')
             })
@@ -629,6 +649,7 @@ const handleClick = async (tab?: any) => {
         })
 
         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))))

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

@@ -1,9 +1,9 @@
 <!-- 实时数据 - 实时趋势 -->
 <template>
-    <div class="realtrend">
+    <div class="realtrend" v-loading="loading">
         <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
             <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
-                <div v-loading="loading">
+                <div>
                     <div class="realtrend_top">
                         <!-- <div class="thead">
                             <ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
@@ -17,30 +17,27 @@
                                 <span v-for="(key, keys) in table">
                                     <li v-if="keys != 0">
                                         {{ key?.value }}
-                                    </li>
+                                    </li> 
                                 </span>
                             </ul>
                         </div> -->
-                        <div class="realtrend_table">
+                        <div class="realtrend_table" v-if="Object.keys(tableData).length != 0">
                             <div class="thead_left">
                                 <p>次数</p>
                                 <p>{{ item.groupName }}</p>
                             </div>
                             <div class="thead_right">
                                 <div class="right_cell" v-for="(value, key, index) in tableData" :key="index">
-                                    <p style="color: red; margin: 0 10px">
+                                    <p>
-                                        <span style="color: green">
+                                        <span>{{ String(key).replace('data', ' ') }}次</span>
-                                            {{ String(key).replace('data', ' ') }}
-                                        </span>
                                     </p>
-                                    <p style="color: red; margin: 0 10px">
+                                    <p>
                                         <span
                                             v-if="
                                                 String(key).includes('data') &&
                                                 String(key) != 'dataLevel' &&
                                                 String(key) != 'dataTime'
                                             "
-                                            style="color: green"
                                         >
                                             {{ value }}
                                         </span>
@@ -49,18 +46,19 @@
                             </div>
                         </div>
                     </div>
-                    <div class="tab_info">
+                    <div class="tab_info" v-if="Object.keys(tableData).length != 0">
                         <div class="charts">
                             <MyEchart ref="barCharts" :options="echartsData"></MyEchart>
                         </div>
                     </div>
+                    <el-empty v-else style="margin: 0 auto" />
                 </div>
             </el-tab-pane>
         </el-tabs>
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, reactive, nextTick } from 'vue'
+import { ref, onMounted, reactive, nextTick, defineEmits } from 'vue'
 import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import MyEchart from '@/components/echarts/MyEchart.vue'
@@ -68,7 +66,7 @@ import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
 import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
 import Index from '@/components/wangEditor/index.vue'
 const activeName = ref(0)
-
+const emit = defineEmits(['changeTrendType'])
 const tableList: any = []
 interface RowVO {
     [key: string]: any
@@ -91,23 +89,23 @@ const myColumns: any = ref([
     // { field: 'value', title: '谐波电压含有率(%)' }
 ])
 
-const yAxisUnit: any = ref('')
-
 const myData = tableList
 const tabsList = ref([])
 //接收参数
 const params = ref({})
 const open = (val: any) => {
     //获取指标tab
+    loading.value = true
     getDeviceTrendDataGroup().then(res => {
         tabsList.value = res.data
         if (tabsList.value.length != 0) {
             // activeName.value = tabsList.value[0]?.id
-            activeName.value = 0
+            activeName.value = val.activeTrendName || 0
         }
         params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
-        findRealTrendDataByGroupId(params.value)
+        loading.value = false
     })
+    init()
     return
 }
 const newTableList: any = ref([])
@@ -117,7 +115,7 @@ const loading: any = ref(false)
 const chartsData: any = ref([])
 const chartsYxiasData: any = ref([])
 const findRealTrendDataByGroupId = (obj: any) => {
-    loading.value = true
+    return
     chartsData.value = []
     chartsYxiasData.value = []
     getDeviceTrendData(obj).then(res => {
@@ -161,7 +159,6 @@ const findRealTrendDataByGroupId = (obj: any) => {
             if (item.list.length != 0) {
                 const maxCount1 = Math.max(...countList.map((item: any) => item.count))
                 const maxCount2 = Math.max(...item.list.map((item: any) => item.count))
-                console.log(maxCount2, maxCount1)
                 if (maxCount2 < maxCount1) {
                     for (let i = 0; i < maxCount1 - maxCount2; i++) {
                         item.list.push({
@@ -215,6 +212,24 @@ const barCharts = ref()
 
 //加载echarts
 const init = () => {
+    console.log(tableData.value, '++++++++')
+    let trendData: any = []
+    for (let key in tableData.value) {
+        console.log(key, ',,,,,')
+        trendData.push({
+            name: key,
+            value: tableData.value[key],
+            count: String(key).replace('data', '')
+        })
+    }
+    let gbData: any = []
+    for (let key in limitData.value) {
+        gbData.push({
+            name: key,
+            value: limitData.value[key]
+        })
+    }
+    console.log(trendData, 'mmmmm', gbData)
     let xAxisList: any = []
     chartsData.value.map((item: any, index: any) => {
         chartsYxiasData.value.map((vv: any, vvs: any) => {
@@ -274,7 +289,9 @@ const init = () => {
             },
             xAxis: {
                 name: '次数',
-                data: xAxisList,
+                data: trendData.map((item: any) => {
+                    return item.count+'次'
+                }),
                 axisLine: {
                     show: true, //隐藏X轴轴线
                     lineStyle: {
@@ -297,7 +314,7 @@ const init = () => {
             yAxis: [
                 {
                     type: 'value',
-                    name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit + ')' : '',
+                    name: '',
                     splitLine: {
                         show: false
                     },
@@ -315,22 +332,19 @@ const init = () => {
             series: []
         }
     }
-    let list: any = []
+    let list: any = [
-    list = []
+        gbData.map((item: any) => {
-    chartsYxiasData.value.map((item: any) => {
+            return item.value
-        // console.log(item.gbList, 'guobialist340')
+        }),
-        if (item.gbList.length != 0) {
+        trendData.map((item: any) => {
-            list.push({ phase: item.phase, title: '国标限值', list: item.gbList })
+            return item.value
-        }
+        })
-        if (item.phaseList.length != 0) {
+    ]
-            list.push({ phase: item.phase, title: item.title, list: item.phaseList })
+    let legendList = ['国标限值', tabsList.value[activeName.value]?.groupName]
-        }
+    echartsData.value.options.legend.data = legendList
-    })
-    const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000']
     list.map((item: any, index: any) => {
-        echartsData.value.options.legend.data.push(item.title)
         echartsData.value.options.series.push({
-            name: item.title,
+            name: legendList[index],
             type: 'bar',
             barMaxWidth: 16, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
             itemStyle: {
@@ -340,39 +354,50 @@ const init = () => {
                 // }e
                 color: colorList[index]
             },
-            data: item.list
+            data: item
         })
     })
-    // nextTick(() => {
     if (barCharts.value) {
-        console.log(barCharts.value, '+++++++++++++++++++#@!')
         barCharts.value[activeName.value]?.initChart()
     }
-    // })
     return
 }
 
 const handleClick = (tab: any, event: any) => {
     params.value.groupId = tabsList.value[tab.index].id
-    findRealTrendDataByGroupId(params.value)
+    emit('changeTrendType', tab.index)
+    activeName.value = tab.index
     init()
 }
 //获取mqtt传送的实时数据
 const mqttMessage: any = ref()
 const tableData: any = ref({})
+const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000']
 const setRealTrendData = (val: any) => {
-    console.log(val, '7777777777773555')
+    tableData.value = {}
     mqttMessage.value = val
+    loading.value = true
     for (let key in val) {
         if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
-            console.log(val[key], '0000000')
             tableData.value[key] = val[key]
+            delete tableData.value.data1
+        }
+    }
+    loading.value = false
+    init()
+}
+//获取国标限值
+const limitData: any = ref()
+const setOverLimitData = (val: any) => {
+    limitData.value = {}
+    for (let key in val) {
+        if (String(key).includes('uharm')) {
+            limitData.value[key] = val[key]
         }
     }
-    console.log(tableData.value, 'kkkkjjjjjsssslllmmmmmssdddd')
 }
 onMounted(() => {})
-defineExpose({ open, setRealTrendData })
+defineExpose({ open, setRealTrendData, setOverLimitData })
 </script>
 <style lang="scss" scoped>
 .realtrend {
@@ -462,23 +487,34 @@ defineExpose({ open, setRealTrendData })
 
         .realtrend_table {
             width: 100%;
-            height: 100px;
+            height: auto;
+            max-height: 150px;
             display: flex;
-            border: 2px solid green;
+            border: 2px solid #eee;
+            cursor: pointer;
             .thead_left {
-                width: 120px;
+                width: 150px;
                 height: 100%;
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;
                 align-items: center;
                 line-height: 50px;
+                font-weight: 800;
+                p {
+                    width: 100%;
+                    height: 100%;
+                    text-align: center;
+                    border: 1px solid #eee;
+                    line-height: 50px;
+                    margin: 0 !important;
+                }
             }
             .thead_right {
                 flex: 1;
                 align-items: center;
                 overflow-x: auto;
-                border: 2px solid yellowgreen;
+                overflow-y: hidden;
                 display: flex;
                 .right_cell {
                     width: 100%;
@@ -486,9 +522,15 @@ defineExpose({ open, setRealTrendData })
                     flex-direction: column;
                     p {
                         flex: none;
-                        width: 40px;
+                        width: 90px;
                         height: 100%;
+                        text-align: center;
+                        border: 1px solid #eee;
                         line-height: 50px;
+                        margin: 0 !important;
+                    }
+                    p:nth-child(1) {
+                        font-weight: 800;
                     }
                 }
             }

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

@@ -500,7 +500,7 @@ const init = () => {
                     startAngle: 180,
                     endAngle: 0,
                     min: 0,
-                    max: 300,
+                    max: 450,
                     radius: '150%',
                     center: ['55%', '76%'],
                     splitNumber: 3, //刻度数量