实时数据-实时趋势页面调试

src/api/cs-device-boot/EquipmentDelivery.ts

@@ -25,24 +25,56 @@ export function getTabsDataByType(data: any) {
     })
 }
 
-
 //获取实时数据列表数据
 export function getRealTimeTableList() {
+    return createAxios({
+        url: '/cs-device-boot/csGroup/getGroupPortableStatistical',
+        method: 'GET'
+    })
+}
+
+//离线数据导入
+export function uploadOffLineDataFile(data: any) {
+    return createAxios({
+        headers: {
+            'Content-Type': 'multipart/form-data'
+        },
+        url: '/cs-device-boot/portableOfflLog/importEquipment',
+        method: 'POST',
+        data
+    })
+}
+
+//查询实时数据中实时趋势中指标分组
+export function getDeviceTrendDataGroup() {
+    return createAxios({
+        url: '/cs-device-boot/csGroup/getDeviceTrendDataGroup',
+        method: 'GET',
+    })
+}
+
+//根据指标分组查询实时数据中实时趋势
+export function getDeviceTrendData(query: any) {
+    return createAxios({
+        url: '/cs-device-boot/csGroup/getDeviceTrendData',
+        method: 'GET',
+        params: query
+    })
+}
+
+//查询实时数据-谐波频谱-稳态指标
+export function getGroupPortableStatistical() {
     return createAxios({
         url: '/cs-device-boot/csGroup/getGroupPortableStatistical',
         method: 'GET',
     })
 }
 
-
+//查询实时数据-谐波频谱
-//离线数据导入
+export function getDeviceHarmonicSpectrumData(data: any) {
-export function uploadOffLineDataFile(data: any) {
     return createAxios({
-        headers: {
+        url: '/cs-device-boot/csGroup/getDeviceHarmonicSpectrumData',
-            'Content-Type': 'multipart/form-data',
-        },
-        url: '/cs-device-boot/portableOfflLog/importEquipment',
         method: 'POST',
-        data,
+        data:data
     })
 }

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

@@ -207,9 +207,9 @@
                 <!-- 实时数据 -->
                 <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
                     <div class="view_top_btn" v-if="realTimeFlag">
-                        <el-button type="primary" size="small" :icon="Platform" @click="handleRecordWaves">
+                        <!-- <el-button type="primary" size="small" :icon="Platform" @click="handleRecordWaves">
                             实时录波
-                        </el-button>
+                        </el-button> -->
                         <el-button type="primary" size="small" :icon="TrendCharts" @click="handleTrend">
                             实时趋势
                         </el-button>
@@ -225,9 +225,9 @@
                     <!-- 实时数据-实时录波组件 -->
                     <recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
                     <!-- 实时数据-实时趋势组件 -->
-                    <realTrend v-if="!realTimeFlag && sonTab == 1"></realTrend>
+                    <realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></realTrend>
                     <!-- 实时数据-谐波频谱组件 -->
-                    <harmonicSpectrum v-if="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef"></harmonicSpectrum>
+                    <harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef"></harmonicSpectrum>
                 </div>
                 <!-- 暂态事件 -->
                 <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1">
@@ -244,7 +244,6 @@
         <analysisList ref="analysisListRef"></analysisList>
     </div>
 </template>
-
 <script setup lang="ts">
 import Detail from './detail.vue'
 import PointTree from '@/components/tree/govern/pointTree.vue'
@@ -338,18 +337,24 @@ const sonTab = ref()
 const handleRecordWaves = () => {
     realTimeFlag.value = false
     sonTab.value = 0
+    window.clearInterval(timer.value)
 }
 //实时趋势
+const realTrendRef = ref()
 const handleTrend = () => {
     realTimeFlag.value = false
     sonTab.value = 1
+    console.log(realTrendRef.value, '++++++')
+    realTrendRef.value && realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value })
+    window.clearInterval(timer.value)
 }
 //谐波频谱
 const harmonicSpectrumRef = ref()
 const handleHarmonicSpectrum = () => {
     realTimeFlag.value = false
     sonTab.value = 2
-    harmonicSpectrumRef.value && harmonicSpectrumRef.value.init()
+    harmonicSpectrumRef.value && harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
+    window.clearInterval(timer.value)
 }
 //返回
 const handleReturn = () => {
@@ -430,14 +435,21 @@ const nodeClick = async (e: anyObj) => {
 }
 const realTimeRef: any = ref()
 const intRealTime = async (val: any) => {
-    await getTabsDataByType(val).then(res => {
+    getTabsDataByType(val).then(res => {
         realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
     })
+    timer.value = window.setInterval(() => {
+        getTabsDataByType(val).then(res => {
+            realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
+        })
+        console.log(timer.value, '定时器时间666666 ')
+    }, 20000)
 }
 //趋势数据组件
 const trendRef: any = ref()
 //暂态事件组件
 const eventRef: any = ref()
+const timer: any = ref()
 //tab点击事件
 const handleClick = async (tab?: any) => {
     tableLoading.value = true
@@ -449,10 +461,13 @@ const handleClick = async (tab?: any) => {
         tableData.value = []
         formInline.pageNum = 1
     }
+    if (timer.value) {
+        window.clearInterval(timer.value)
+    }
+
     // setTimeout(async () => {
     //查询历史指标
     if (dataSet.value.includes('_history')) {
-        console.log('执行次数55555')
         formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
         formInline.endTime = datePickerRef.value && datePickerRef.value.timeValue[1]
         formInline.id = dataSet.value.replace('_history', '')
@@ -461,7 +476,6 @@ const handleClick = async (tab?: any) => {
             formInline.total = res.data.total
             tableLoading.value = false
         })
-        console.log(tableData.value, '++++++++++++')
     }
     //查询趋势数据
     if (dataSet.value.includes('_trenddata')) {
@@ -492,9 +506,12 @@ const handleClick = async (tab?: any) => {
             lineId: lineId.value //e.pid
         }
         intRealTime(obj)
-        await setTimeout(() => {
+    }
-            intRealTime(obj)
+    if (!dataSet.value.includes('_realtimedata')) {
-        }, 20000)
+        // console.log(timer.value, '=====定时球带哦用时间=====')
+        // if(timer.value){
+        //      window.clearInterval(timer.value)
+        // }
     }
     //查询暂态事件
     if (dataSet.value.includes('_event')) {
@@ -517,7 +534,6 @@ const handleClick = async (tab?: any) => {
         // })
     }
     //查询当前指标
-    console.log(dataSet.value.indexOf('_'), '查询当前指标')
     if (!dataSet.value.includes('_')) {
         formInline.id = dataSet.value
         await deviceRtData(formInline).then((res: any) => {
@@ -526,6 +542,7 @@ const handleClick = async (tab?: any) => {
             tableLoading.value = false
         })
     }
+
     // }, 100)
 }
 //模版下载

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

@@ -42,6 +42,7 @@ 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'
 const searchForm = ref({})
 searchForm.value = {
     index: []
@@ -59,10 +60,11 @@ queryByCode('portable-harmonic').then(res => {
     })
 })
 const tableList: any = ref([])
-for (let i = 0; i < 100; i++) {
+for (let i = 0; i < 10000; i++) {
     tableList.value.push({
         name: i + 1,
-        value: Math.floor(Math.random() * 101)
+        // value: Math.floor(Math.random() * 101)
+        value: i + 2
     })
 }
 const echartsData1: any = ref([]),
@@ -75,6 +77,21 @@ const echartsData1: any = ref([]),
 const chartsTitle1 = ref('')
 const chartsTitle2 = ref('')
 const chartsTitle3 = ref('')
+//谐波频谱参数
+const params = ref({})
+const getHarmonicSpectrumParams = (val: any) => {
+    params.value = val
+    params.value.list = []
+    console.log(params.value, '+++++++++++++')
+    //查询稳态指标
+    getRealTimeTableList().then(res => {
+        console.log('稳态指标', res)
+    })
+    //查询谐波频谱
+    getDeviceHarmonicSpectrumData(params.value).then(res => {
+        console.log('谐波频谱')
+    })
+}
 const init = () => {
     const xDataList: any = [],
         yDataList1: any = [],
@@ -83,22 +100,22 @@ const init = () => {
     tableList.value.map((item: any) => {
         xDataList.push(item.name)
         yDataList1.push(item.value)
-        yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
+        yDataList2.push(item.value + 1000)
-        yDataList3.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
+        yDataList3.push(item.value + 2000)
     })
 
-                              indexOptions.value.map((item:any)=>{
+    indexOptions.value.map((item: any) => {
-                                if(item.id==searchForm.value.index[0]){
+        if (item.id == searchForm.value.index[0]) {
-                                    chartsTitle1.value=item.name
+            chartsTitle1.value = item.name
-                                }
+        }
-                                if(item.id==searchForm.value.index[1]){
+        if (item.id == searchForm.value.index[1]) {
-                                    chartsTitle2.value=item.name
+            chartsTitle2.value = item.name
-                                }
+        }
-                                if(item.id==searchForm.value.index[2]){
+        if (item.id == searchForm.value.index[2]) {
-                                    chartsTitle3.value=item.name
+            chartsTitle3.value = item.name
-                                }
+        }
-                              })
+    })
-                              console.log(  chartsTitle1.value,  chartsTitle2.value,  chartsTitle3.value,"666677777");
+    console.log(chartsTitle1.value, chartsTitle2.value, chartsTitle3.value, '666677777')
     if (searchForm.value.index[0]) {
         echartsData1.value = {
             options: {
@@ -107,7 +124,7 @@ const init = () => {
                     {
                         left: '10%',
                         top: 0,
-                        text:chartsTitle1.value
+                        text: chartsTitle1.value
                     }
                 ],
                 grid: {
@@ -163,7 +180,8 @@ const init = () => {
                         textStyle: {
                             color: '#000' //X轴文字颜色
                         }
-                    }
+                    },
+                    boundaryGap: false
                 },
                 yAxis: [
                     {
@@ -180,8 +198,7 @@ const init = () => {
                             lineStyle: {
                                 color: '#000'
                             }
-                        },
+                        }
-                        smooth: true
                     }
                 ],
                 series: [
@@ -196,6 +213,7 @@ const init = () => {
                             // }e
                         },
                         data: yDataList1,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     },
                     {
@@ -210,6 +228,7 @@ const init = () => {
                             // }
                         },
                         data: yDataList2,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     },
                     {
@@ -223,6 +242,7 @@ const init = () => {
                             // }
                         },
                         data: yDataList3,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     }
                 ]
@@ -238,7 +258,7 @@ const init = () => {
                     {
                         left: '10%',
                         top: 0,
-                        text:chartsTitle2.value
+                        text: chartsTitle2.value
                     }
                 ],
                 grid: {
@@ -294,7 +314,8 @@ const init = () => {
                         textStyle: {
                             color: '#000' //X轴文字颜色
                         }
-                    }
+                    },
+                    boundaryGap: false
                 },
                 yAxis: [
                     {
@@ -326,6 +347,7 @@ const init = () => {
                             // }e
                         },
                         data: yDataList1,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     },
                     {
@@ -340,6 +362,7 @@ const init = () => {
                             // }
                         },
                         data: yDataList2,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     },
                     {
@@ -353,6 +376,7 @@ const init = () => {
                             // }
                         },
                         data: yDataList3,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     }
                 ]
@@ -424,7 +448,8 @@ const init = () => {
                         textStyle: {
                             color: '#000' //X轴文字颜色
                         }
-                    }
+                    },
+                    boundaryGap: false
                 },
                 yAxis: [
                     {
@@ -456,6 +481,7 @@ const init = () => {
                             // }e
                         },
                         data: yDataList1,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     },
                     {
@@ -470,6 +496,7 @@ const init = () => {
                             // }
                         },
                         data: yDataList2,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     },
                     {
@@ -483,6 +510,7 @@ const init = () => {
                             // }
                         },
                         data: yDataList3,
+                        smooth: true, // 这里设置平滑曲线
                         symbol: 'none' // 设置为 'none' 去掉折点小圆
                     }
                 ]
@@ -507,7 +535,7 @@ onMounted(() => {
     console.log()
     // init()
 })
-defineExpose({ init })
+defineExpose({ getHarmonicSpectrumParams })
 </script>
 <style lang="scss" scoped>
 .harmonic {
@@ -535,6 +563,7 @@ defineExpose({ init })
         .harmonic_body_charts {
             height: 200px;
             margin: 15px 0;
+            border: 1px solid #eee;
         }
     }
 }

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

@@ -1,8 +1,35 @@
-<!-- 实时趋势 -->
+<!-- 实时数据 - 实时趋势 -->
 <template>
     <div class="realtrend">
         <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="谐波电压含有率" name="0">
+            <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="item.id" :key="index">
+                <div v-loading="loading">
+                    <div class="realtrend_top">
+                        <div class="thead">
+                            <ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
+                                <li>
+                                    {{ table[0].value }}
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="table">
+                            <ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
+                                <span v-for="(key, keys) in table">
+                                    <li v-if="keys != 0">
+                                        {{ key?.value }}
+                                    </li>
+                                </span>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="tab_info">
+                        <div class="charts">
+                            <MyEchart ref="barCharts" :options="echartsData"></MyEchart>
+                        </div>
+                    </div>
+                </div>
+            </el-tab-pane>
+            <!-- <el-tab-pane label="谐波电压含有率" name="0">
                 <template #label>
                     <span class="custom-tabs-label">
                         <el-icon><TrendCharts /></el-icon>
@@ -43,7 +70,7 @@
                         <MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
                     </div>
                 </div>
-            </el-tab-pane>
+            </el-tab-pane> -->
         </el-tabs>
     </div>
 </template>
@@ -53,69 +80,11 @@ import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
-const activeName = ref('0')
+import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
-const tableList = [
+import Index from '@/components/wangEditor/index.vue'
-    {
+const activeName = ref('')
-        name: '2次',
+
-        value: Math.floor(Math.random() * 101)
+const tableList: any = []
-    },
-    {
-        name: '3次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '4次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '5次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '6次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '7次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '8次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '9次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '10次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '11次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '12次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '13次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '14次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '15次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '16次',
-        value: Math.floor(Math.random() * 101)
-    }
-]
 interface RowVO {
     [key: string]: any
 }
@@ -132,26 +101,101 @@ const gridOptions = ref<VxeGridProps<RowVO>>({
     align: 'center'
 })
 gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
-const myColumns = ref([
+const myColumns: any = ref([
-    { field: 'name', title: '次数' },
+    // { field: 'name', title: '次数' }
-    { field: 'value', title: '谐波电压含有率(%)' }
+    // { field: 'value', title: '谐波电压含有率(%)' }
 ])
+
 const yAxisUnit: any = ref('')
-myColumns.value.map(item => {
+// myColumns.value.map(item => {
-    if (item.field == 'value') {
+//     if (item.field == 'value') {
-        item.title =
+//         item.title =
-            activeName.value == '0'
+//             activeName.value == '0'
-                ? '谐波电压含有率(%)'
+//                 ? '谐波电压含有率(%)'
-                : activeName.value == '1'
+//                 : activeName.value == '1'
-                ? '间谐波电压含有率(%)'
+//                 ? '间谐波电压含有率(%)'
-                : activeName.value == '2'
+//                 : activeName.value == '2'
-                ? '谐波电流幅值(A)'
+//                 ? '谐波电流幅值(A)'
-                : ''
+//                 : ''
-        yAxisUnit.value = item.title.split('(')[0]
+//         yAxisUnit.value = item.title.split('(')[0]
-    }
+//     }
-})
+// })
 
 const myData = tableList
+const tabsList = ref([])
+//接收参数
+const params = ref({})
+const open = (val: any) => {
+    //获取指标tab
+    getDeviceTrendDataGroup().then(res => {
+        tabsList.value = res.data
+        if (tabsList.value.length != 0) {
+            activeName.value = tabsList.value[0]?.id
+        }
+        params.value = { groupId: activeName.value, ...val }
+        findRealTrendDataByGroupId(params.value)
+    })
+    return
+}
+const newTableList: any = ref([])
+//根据指标tab查询实时趋势
+const loading: any = ref(false)
+//echarts数据
+const chartsData: any = ref([])
+const chartsYxiasData: any = ref([])
+const findRealTrendDataByGroupId = (obj: any) => {
+    loading.value = true
+    chartsData.value=[]
+    chartsYxiasData.value=[]
+    let list = []
+    let countList = []
+    for (let i = 2; i <= 50; i++) {
+        countList.push({ value: i + '次', count: i })
+    }
+    list[0] = countList
+    getDeviceTrendData(obj).then(res => {
+        myColumns.value = [{ field: 'name', title: '次数' }]
+        chartsData.value = res.data[0].thdDataTdVODatas
+        //处理实时趋势表格
+        let arr = res.data[0].thdDataVOS
+        arr.map((item: any, index: any) => {
+            myColumns.value.push({ field: item.phase, title: item.name })
+            chartsYxiasData.value.push({ phase: item.phase, title: item.name, phaseList: [], gbList: [] })
+            //循环第二层数据
+            item.list = []
+            item.data.map((vv: any, vvs: any) => {
+                if (!(vv.statisticalData + '')) {
+                    vv.statisticalData = '/'
+                }
+                item.list.push({ value: vv.statisticalData, count: vv.frequency })
+            })
+            list[index + 1] = item.list
+            if (item.list.length == 0) {
+                for (let i = 0; i < countList.length; i++) {
+                    item.list.push({
+                        value: '/',
+                        count: index
+                    })
+                }
+            }
+            if (item.list.length != 0 && item.list.length < countList.length) {
+                for (let i = 0; i < countList.length - item.list.length; i++) {
+                    item.list.push({
+                        value: '/',
+                        count: index
+                    })
+                }
+            }
+        })
+        // 转换为对象数组
+        list.map((item: any, index: any) => {
+            item.unshift({ value: myColumns.value[index].title, count: '' })
+        })
+        newTableList.value = list
+        loading.value = false
+        init()
+    })
+}
 
 //反转表格
 const reverseTable = () => {
@@ -181,14 +225,145 @@ const reverseTable = () => {
 
 reverseTable()
 
-const echartsData1: any = ref([]),
+const echartsData: any = ref([]),
+    echartsData1: any = ref([]),
     echartsData2: any = ref([]),
     echartsData3: any = ref([]),
+    barCharts = ref(),
     barCharts1 = ref(),
     barCharts2 = ref(),
     barCharts3 = ref()
+
 //加载echarts
 const init = () => {
+    // let list: any = []
+    let timeList: any = []
+    let xAxisList: any = []
+    chartsData.value.map((item: any, index: any) => {
+        chartsYxiasData.value.map((vv: any) => {
+            if (item.phase == vv.phase) {
+                vv.phaseList.push(item.statisticalData)
+                vv.gbList.push(item.internationalValue)
+            }
+        })
+        xAxisList.push(item.frequency + '次')
+    })
+    xAxisList = [...new Set(xAxisList)]
+    echartsData.value = {
+        options: {
+            // backgroundColor: '#0f375f',
+            grid: {
+                top: '22%',
+                bottom: '18%', //也可设置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
+                // icon: 'icon'
+                //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
+                // itemWidth: 14,
+                // itemHeight: 14,
+                // textStyle: {
+                //     inside: true,
+                //     color: '#000',
+                //     padding: [11, 0, 10, 0],
+                //     align: 'left',
+                //     verticalAlign: 'center',
+                //     fontSize: 14,
+                //     rich: {}
+                // }
+            },
+            xAxis: {
+                name: '次数',
+                data: xAxisList,
+                axisLine: {
+                    show: true, //隐藏X轴轴线
+                    lineStyle: {
+                        color: '#000'
+                    }
+                },
+                axisTick: {
+                    show: true //隐藏X轴刻度
+                },
+                axisPointer: {
+                    type: 'shadow'
+                },
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: '#000' //X轴文字颜色
+                    }
+                }
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    name: '单位(' + chartsData?.value[0]?.unit?chartsData?.value[0]?.unit:'' + ')',
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: true
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    }
+                }
+            ],
+            series: []
+        }
+    }
+    let list: any = []
+    list = []
+    chartsYxiasData.value.map((item: any) => {
+        if (item.phaseList.length != 0) {
+            list.push({ phase: item.phase, title: item.title, list: item.phaseList })
+        }
+        if (item.gbList.length != 0) {
+            list.push({ phase: item.phase, title: item.title + '国标限值', list: item.gbList })
+        }
+    })
+    const colorList = ['#DAA521', 'aqua', '#d81e06', 'coral', '#1DD0CE', 'cadetblue']
+    list.map((item: any, index: any) => {
+        echartsData.value.options.legend.data.push(item.title)
+        echartsData.value.options.series.push({
+            name: item.title,
+            type: 'bar',
+            barMaxWidth: 16, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            itemStyle: {
+                // normal: {
+                barBorderRadius: [3, 3, 0, 0],
+                // color: '#00CC99'
+                // }e
+                color: colorList[index]
+            },
+            data: item.list
+        })
+    })
+
+    barCharts.value && barCharts.value.initChart()
+    return
     const xDataList: any = [],
         yDataList1: any = [],
         yDataList2: any = []
@@ -522,96 +697,91 @@ const init = () => {
 }
 
 const handleClick = (tab: any, event: any) => {
-    activeName.value = tab.index
+    activeName.value = tabsList.value[tab.index].id
-    myColumns.value.map(item => {
+    params.value.groupId = activeName.value
-        if (item.field == 'value') {
+    findRealTrendDataByGroupId(params.value)
-            item.title =
-                activeName.value == '0'
-                    ? '谐波电压含有率(%)'
-                    : activeName.value == '1'
-                    ? '间谐波电压含有率(%)'
-                    : activeName.value == '2'
-                    ? '谐波电流幅值(A)'
-                    : ''
-            yAxisUnit.value = item.title.split('(')[0]
-        }
-    })
     reverseTable()
     init()
 }
 onMounted(() => {
     init()
 })
+defineExpose({ open })
 </script>
 <style lang="scss" scoped>
 .realtrend {
     width: 100%;
     height: 100%;
-    .table_info {
+    .realtrend_top {
         width: 100%;
         height: auto;
-        overflow-x: auto;
+        display: flex;
-        .table {
+        justify-content: space-between;
-            width: auto;
+        align-items: center;
-            height: auto;
+        .thead {
-            border: 2px solid #eee;
+            height: 100%;
-            display: flex;
+            overflow-y: hidden;
-            flex-direction: column;
+            border: 1px solid #eee;
-            .thead {
+            border-right: 0;
-                width: 100%;
+            ul {
+                width: auto;
                 height: 40px;
                 display: flex;
-                border-bottom: 2px solid #eee;
+                li {
-                .thead_left {
+                    flex: none;
-                    width: 200px !important;
+                    width: 100px;
-                    height: 100%;
                     line-height: 40px;
+                    border: 1px solid #eee;
                     text-align: center;
-                    font-size: 14px;
+                    list-style: none;
-                    font-weight: 800;
                 }
-                .thead_right {
+                li:nth-child(1) {
-                    flex: 1;
+                    flex: none;
-                    display: flex;
+                    width: 200px;
-                    .thead_right_item {
-                        flex: none;
-                        width: 100px;
-                        text-align: center;
-                        line-height: 40px;
-                        border-left: 1px solid #eee;
-                    }
                 }
             }
-            .tbody {
+            ul:nth-child(1) {
-                width: 100%;
+                li {
-                height: 40px;
-                display: flex;
-                .tbody_left {
-                    width: 200px !important;
-                    height: 100%;
-                    line-height: 40px;
-                    text-align: center;
-                    font-size: 14px;
                     font-weight: 800;
-                }
+                    background: #f4f6f9;
-                .tbody_right {
-                    flex: 1;
-                    display: flex;
-                    .tbody_right_item {
-                        flex: none;
-                        width: 100px;
-                        text-align: center;
-                        line-height: 40px;
-                        border-left: 1px solid #eee;
-                    }
                 }
             }
         }
+        .table {
+            flex: 1;
+            // min-height: 80px;
+            cursor: pointer;
+            min-height: 90px;
+            max-height: 170px;
+            border: 1px solid #eee;
+            overflow-x: auto;
+            overflow-y: hidden;
+            position: relative;
+            ul {
+                width: auto;
+                height: 40px;
+                display: flex;
+                li {
+                    flex: none;
+                    width: 100px;
+                    line-height: 40px;
+                    border: 1px solid #eee;
+                    text-align: center;
+                    list-style: none;
+                }
+            }
+            ul:nth-child(1) {
+                li {
+                    font-weight: 800;
+                    background: #f4f6f9;
+                }
+            }
+        }
+        .table::-webkit-scrollbar {
+            display: none;
+        }
     }
 }
-.reverse-table {
-    // max-height:120px !important;
-}
 .reverse-table .vxe-body--row .vxe-body--column:first-child {
     background-color: #f8f8f9;
 }

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

@@ -1,15 +1,36 @@
-<!-- 波形解析组件 -->
+<!-- 暂态事件-波形解析组件 -->
 <template>
     <div class="waveFormAnalysis">
         <div class="waveFormAnalysis_header">
             <el-form-item label="值类型选择">
-                <el-select v-model="searchForm.type" style="width: 200px">
+                <el-select @change="changeView" v-model="value" placeholder="请选择值类型">
-                    <el-option label="一次值" :value="0"></el-option>
+                    <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
                 </el-select>
             </el-form-item>
         </div>
         <el-tabs class="waveFormAnalysis_body" type="border-card" v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="瞬时波形" name="0">
+            <el-tab-pane
+                label="瞬时波形"
+                name="ssbx"
+                class="boxbx pt10 pb10"
+                :style="'height:' + bxecharts + ';overflow-y: scroll;'"
+            >
+                <shushiboxi v-if="wp" :value="value" :boxoList="boxoList" :wp="wp"></shushiboxi>
+            </el-tab-pane>
+            <el-tab-pane
+                label="RMS波形"
+                class="boxbx pt10 pb10"
+                name="rmsbx"
+                :style="'height:' + bxecharts + ';overflow-y: scroll;'"
+            >
+                <rmsboxi v-if="wp" :value="value" :boxoList="boxoList" :wp="wp"></rmsboxi>
+            </el-tab-pane>
+            <!-- <el-tab-pane label="瞬时波形" name="0">
                 <template #label>
                     <span class="custom-tabs-label">
                         <el-icon><TrendCharts /></el-icon>
@@ -34,22 +55,25 @@
                         <MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
                     </div>
                 </div>
-            </el-tab-pane>
+            </el-tab-pane> -->
         </el-tabs>
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, defineExpose, watch } from 'vue'
 import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
+import shushiboxi from '@/components/echarts/shushiboxi.vue'
+import rmsboxi from '@/components/echarts/rmsboxi.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
+import { mainHeight } from '@/utils/layout'
+const props = defineProps(['wp'])
 const searchForm = ref({
     type: 0
 })
-const activeName = ref('0')
 const tableList: any = ref([])
-for (let i = 0; i < 500; i++) {
+for (let i = 0; i < 300; i++) {
     tableList.value.push({
         name: i + 1,
         value: Math.floor(Math.random() * 101)
@@ -80,8 +104,50 @@ const echartsData1: any = ref([]),
     barCharts1 = ref(),
     barCharts2 = ref(),
     barCharts3 = ref()
+
+const view = ref(true)
+const view2 = ref(false)
+const showBoxi = ref(true)
+const activeName = ref('ssbx')
+const boxoList = ref({})
+const wp = ref({})
+const value = ref(1)
+const options = ref([
+    {
+        value: 1,
+        label: '一次值'
+    },
+    {
+        value: 2,
+        label: '二次值'
+    }
+])
+watch(
+    () => props.wp,
+    (val, oldVal) => {
+        if (val) {
+            console.log(val, '+++++++++++++++wp')
+            wp.value == val
+        }
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+)
+const getWpData = (val: any) => {
+    wp.value = val
+}
+const changeView = () => {
+    // showBoxi.value = false
+    // setTimeout(() => {
+    //     showBoxi.value = true
+    // }, 0)
+}
+const bxecharts = mainHeight(155).height as any
 //加载echarts
 const init = () => {
+    return
     const xDataList: any = [],
         yDataList1: any = [],
         yDataList2: any = [],
@@ -180,7 +246,9 @@ const init = () => {
                             color: '#00CC99'
                             // }e
                         },
-                        data: yDataList1
+                        data: yDataList1,
+                        smooth: true, // 这里设置平滑曲线
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                     },
                     {
                         name: 'B相',
@@ -193,7 +261,9 @@ const init = () => {
                             color: '#FF9900'
                             // }
                         },
-                        data: yDataList2
+                        data: yDataList2,
+                        smooth: true, // 这里设置平滑曲线
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                     },
                     {
                         name: 'C相',
@@ -205,7 +275,9 @@ const init = () => {
                             // color: '#FF9900'
                             // }
                         },
-                        data: yDataList3
+                        data: yDataList3,
+                        smooth: true, // 这里设置平滑曲线
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                     }
                 ]
             }
@@ -308,7 +380,6 @@ const init = () => {
                         itemStyle: {
                             // normal: {
                             barBorderRadius: [3, 3, 0, 0],
-
                             color: '#FF9900'
                             // }
                         },
@@ -454,95 +525,19 @@ const init = () => {
 
 const handleClick = (tab: any, event: any) => {
     activeName.value = tab.index
+    if (tab.name == 'ssbx') {
+        activeName.value = 'ssbx'
+    } else if (tab.name == 'rmsbx') {
+        activeName.value = 'rmsbx'
+    }
     init()
 }
 onMounted(() => {
     init()
 })
+defineExpose({ getWpData })
 </script>
 <style lang="scss" scoped>
-.realtrend {
-    width: 100%;
-    height: 100%;
-    .table_info {
-        width: 100%;
-        height: auto;
-        overflow-x: auto;
-        .table {
-            width: auto;
-            height: auto;
-            border: 2px solid #eee;
-            display: flex;
-            flex-direction: column;
-            .thead {
-                width: 100%;
-                height: 40px;
-                display: flex;
-                border-bottom: 2px solid #eee;
-                .thead_left {
-                    width: 200px !important;
-                    height: 100%;
-                    line-height: 40px;
-                    text-align: center;
-                    font-size: 14px;
-                    font-weight: 800;
-                }
-                .thead_right {
-                    flex: 1;
-                    display: flex;
-                    .thead_right_item {
-                        flex: none;
-                        width: 100px;
-                        text-align: center;
-                        line-height: 40px;
-                        border-left: 1px solid #eee;
-                    }
-                }
-            }
-            .tbody {
-                width: 100%;
-                height: 40px;
-                display: flex;
-                .tbody_left {
-                    width: 200px !important;
-                    height: 100%;
-                    line-height: 40px;
-                    text-align: center;
-                    font-size: 14px;
-                    font-weight: 800;
-                }
-                .tbody_right {
-                    flex: 1;
-                    display: flex;
-                    .tbody_right_item {
-                        flex: none;
-                        width: 100px;
-                        text-align: center;
-                        line-height: 40px;
-                        border-left: 1px solid #eee;
-                    }
-                }
-            }
-        }
-    }
-}
-.reverse-table {
-    // max-height:120px !important;
-}
-.reverse-table .vxe-body--row .vxe-body--column:first-child {
-    background-color: #f8f8f9;
-}
-::v-deep .vxe-table--render-wrapper {
-    height: 90px !important;
-    max-height: 90px !important;
-    overflow-x: auto !important;
-    min-height: 0 !important;
-}
-::v-deep .body--wrapper {
-    height: 90px !important;
-    max-height: 90px !important;
-    min-height: 0 !important;
-}
 .tab_info {
     width: 100%;
     height: calc(100vh - 450px);
@@ -567,9 +562,9 @@ onMounted(() => {
     .waveFormAnalysis_header {
         position: absolute;
         top: -30px;
-        left:0;
+        left: 0;
     }
-    .waveFormAnalysis_body{
+    .waveFormAnalysis_body {
         margin-top: 15px;
     }
 }

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

@@ -1,15 +1,15 @@
 <template>
     <div class="header_btn">
-        <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">
+        <!-- <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">
             波形解析
-        </el-button>
+        </el-button> -->
         <el-button type="primary" size="small" @click="handleBack" v-if="isWaveCharts" :icon="ArrowLeft">
             返回
         </el-button>
     </div>
     <div class="view">
         <Table ref="tableRef" v-if="!isWaveCharts" />
-        <waveFormAnalysis ref="waveFormAnalysisRef" v-if="isWaveCharts" />
+        <waveFormAnalysis ref="waveFormAnalysisRef" v-if="isWaveCharts" :wp="wp" />
     </div>
 </template>
 <script lang="ts" setup>
@@ -19,7 +19,16 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import waveFormAnalysis from './components/waveFormAnalysis.vue'
 import { ArrowLeft } from '@element-plus/icons-vue'
+import { analyseWave } from '@/api/common'
 const tableParams: any = ref({})
+const refheader = ref()
+const view = ref(true)
+const view2 = ref(false)
+const showBoxi = ref(true)
+const bxactiveName = ref('ssbx')
+const boxoList = ref({})
+const wp = ref({})
+const value = ref(1)
 const tableStore: any = new TableStore({
     url: '/cs-device-boot/csGroup/deviceDataByType',
     publicHeight: 210,
@@ -79,8 +88,25 @@ const tableStore: any = new TableStore({
                     type: 'primary',
                     icon: 'el-icon-Check',
                     render: 'basicButton',
-                    click: row => {
+                    // disabled: row => {
-                        handleWaveFormAnalysis(row)
+                    //     return !row.wavePath && row.evtParamTm < 20
+                    // },
+                    click: async row => {
+                        row.loading = true
+                        boxoList.value = row
+                        await analyseWave(row.eventId)
+                            .then(res => {
+                                row.loading = false
+                                if (res != undefined) {
+                                    wp.value = res.data
+                                    view.value = false
+                                    view2.value = true
+                                }
+                            })
+                            .catch(() => {
+                                row.loading = false
+                            })
+                        handleWaveFormAnalysis(wp.value)
                     }
                 }
             ]
@@ -105,9 +131,11 @@ const getTableParams = (val: any) => {
     tableStore.index()
 }
 //波形解析组件
+const waveFormAnalysisRef = ref()
 const handleWaveFormAnalysis = (val: any) => {
     console.log(val, '波形解析')
     isWaveCharts.value = true
+    waveFormAnalysisRef.value.getWpData(val)
 }
 //返回
 const handleBack = () => {

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

@@ -53,6 +53,9 @@
                         </div>
                     </div>
                 </div>
+                <div v-else style="border: 1px solid #eee" v-loading="loading">
+                    <el-empty description="暂无数据" />
+                </div>
             </div>
         </div>
     </div>
@@ -381,7 +384,6 @@ const getColumns = () => {
 //处理表格数据
 const getTableData = (list: any) => {
     tableData.value = list
-    loading.value = false
     columnsData.value.map((item: any) => {
         item.map((vv: any) => {
             vv.statisticalData = list.find((kk: any) => {
@@ -389,93 +391,98 @@ const getTableData = (list: any) => {
             })?.statisticalData
         })
     })
+    loading.value = false
 }
 //获取实时数据
 const getRealTimeData = (val: any) => {
-    dataList.value = val
+    if (val.length != 0) {
-    dataList.value.map((item: any, index: any) => {
+        dataList.value = val
-        if (item.anotherName == '相电压总有效值') {
+        dataList.value.map((item: any, index: any) => {
-            listV.value.push(item)
+            if (item.anotherName == '相电压总有效值') {
-        }
+                listV.value.push(item)
-        if (item.anotherName == '线电压总有效值') {
+            }
-            listA.value.push(item)
+            if (item.anotherName == '线电压总有效值') {
-        }
+                listA.value.push(item)
-    })
+            }
+        })
 
-    echartsDataV1.value.options.series[0].data = [
+        echartsDataV1.value.options.series[0].data = [
-        {
+            {
-            name:
+                name:
-                listV.value.find((item: any) => {
+                    listV.value.find((item: any) => {
+                        return item.phase == 'A'
+                    })?.phase + '相',
+                value: listV.value.find((item: any) => {
                     return item.phase == 'A'
-                })?.phase + '相',
+                })?.statisticalData
-            value: listV.value.find((item: any) => {
+            }
-                return item.phase == 'A'
+        ]
-            })?.statisticalData
+        pieChart1.value.initChart()
-        }
+        echartsDataV2.value.options.series[0].data = [
-    ]
+            {
-    pieChart1.value.initChart()
+                name:
-    echartsDataV2.value.options.series[0].data = [
+                    listV.value.find((item: any) => {
-        {
+                        return item.phase == 'B'
-            name:
+                    })?.phase + '相',
-                listV.value.find((item: any) => {
+                value: listV.value.find((item: any) => {
                     return item.phase == 'B'
-                })?.phase + '相',
+                })?.statisticalData
-            value: listV.value.find((item: any) => {
+            }
-                return item.phase == 'B'
+        ]
-            })?.statisticalData
+        pieChart2.value.initChart()
-        }
+        echartsDataV3.value.options.series[0].data = [
-    ]
+            {
-    pieChart2.value.initChart()
+                name:
-    echartsDataV3.value.options.series[0].data = [
+                    listV.value.find((item: any) => {
-        {
+                        return item.phase == 'C'
-            name:
+                    })?.phase + '相',
-                listV.value.find((item: any) => {
+                value: listV.value.find((item: any) => {
                     return item.phase == 'C'
-                })?.phase + '相',
+                })?.statisticalData
-            value: listV.value.find((item: any) => {
+            }
-                return item.phase == 'C'
+        ]
-            })?.statisticalData
+        pieChart3.value.initChart()
-        }
+        echartsDataA1.value.options.series[0].data = [
-    ]
+            {
-    pieChart3.value.initChart()
+                name:
-    echartsDataA1.value.options.series[0].data = [
+                    listA.value.find((item: any) => {
-        {
+                        return item.phase == 'AB'
-            name:
+                    })?.phase + '相',
-                listA.value.find((item: any) => {
+                value: listA.value.find((item: any) => {
                     return item.phase == 'AB'
-                })?.phase + '相',
+                })?.statisticalData
-            value: listA.value.find((item: any) => {
+            }
-                return item.phase == 'AB'
+        ]
-            })?.statisticalData
+        pieChart4.value.initChart()
-        }
+        echartsDataA2.value.options.series[0].data = [
-    ]
+            {
-    pieChart4.value.initChart()
+                name:
-    echartsDataA2.value.options.series[0].data = [
+                    listA.value.find((item: any) => {
-        {
+                        return item.phase == 'BC'
-            name:
+                    })?.phase + '相',
-                listA.value.find((item: any) => {
+                value: listA.value.find((item: any) => {
                     return item.phase == 'BC'
-                })?.phase + '相',
+                })?.statisticalData
-            value: listA.value.find((item: any) => {
+            }
-                return item.phase == 'BC'
+        ]
-            })?.statisticalData
+        pieChart5.value.initChart()
-        }
+        echartsDataA3.value.options.series[0].data = [
-    ]
+            {
-    pieChart5.value.initChart()
+                name:
-    echartsDataA3.value.options.series[0].data = [
+                    listA.value.find((item: any) => {
-        {
+                        return item.phase == 'CA'
-            name:
+                    })?.phase + '相',
-                listA.value.find((item: any) => {
+                value: listA.value.find((item: any) => {
                     return item.phase == 'CA'
-                })?.phase + '相',
+                })?.statisticalData
-            value: listA.value.find((item: any) => {
+            }
-                return item.phase == 'CA'
+        ]
-            })?.statisticalData
+        pieChart6.value.initChart()
-        }
+        getColumns()
-    ]
+        getTableData(val)
-    pieChart6.value.initChart()
+    } else {
-    getColumns()
+        init()
-    getTableData(val)
+    }
 }
 defineExpose({ getRealTimeData })
 onMounted(() => {

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

@@ -52,7 +52,7 @@
             </div>
         </div>
         <div class="history_chart" v-loading="loading">
-            <MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
+            <MyEchart ref="historyChart" :options="echartsData" />
         </div>
     </div>
 </template>
@@ -144,6 +144,7 @@ const getTrendRequest = async (val: any) => {
 }
 //初始化趋势图
 const init = async () => {
+    loading.value = true
     // 选择指标的时候切换legend内容和data数据
     let list: any = []
     legendDictList.value?.selectedList?.map((item: any) => {
@@ -173,8 +174,7 @@ const init = async () => {
     initSearchFormIndexAndCount(searchForm.value.index)
     //查询历史趋势
     historyDataList.value = []
-    loading.value = true
+    chartTitle.value = ''
-    chartTitle.value=''
 
     searchForm.value.index.map((item: any, indexs: any) => {
         indexOptions.value.map((vv: any) => {
@@ -287,15 +287,15 @@ const init = async () => {
                                 },
                                 grid: {
                                     left: '3%',
-                                    right: '3%',
+                                    right: '4%',
-                                    bottom: '10%',
+                                    bottom: '5%',
                                     top: '5%',
                                     containLabel: true
                                 },
                                 xAxis: [
                                     {
                                         type: 'category',
-                                        name: '\n\n\n\n\n时间',
+                                        name: '时间',
                                         axisLabel: {
                                             color: '#A9AEB2',
                                             fontSize: 12,

src/views/govern/reportCore/statistics/index.vue

@@ -160,7 +160,7 @@ const exportEvent = () => {
 </script>
 <style lang="scss" scoped>
 .splitpanes.default-theme .splitpanes__pane {
-    background: #eaeef1;
+    background: #fff;
 }
 
 .box {