From 1e08891b105a3ef1a5ade6a12d13e96cf9cf6f15 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Fri, 27 Sep 2024 10:27:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E6=80=81=E4=BA=8B=E4=BB=B6-=E6=B3=A2?=
 =?UTF-8?q?=E5=BD=A2=E8=A7=A3=E6=9E=90=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tabs/components/waveFormAnalysis.vue      | 462 +-----------------
 .../govern/device/control/tabs/event.vue      |  26 +-
 2 files changed, 39 insertions(+), 449 deletions(-)

diff --git a/src/views/govern/device/control/tabs/components/waveFormAnalysis.vue b/src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
index 12899a3..3f7fa03 100644
--- a/src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
+++ b/src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
@@ -1,7 +1,7 @@
 <!-- 暂态事件-波形解析组件 -->
 <template>
-    <div class="waveFormAnalysis">
-        <div class="waveFormAnalysis_header">
+    <div class="home">
+        <div class="home_header">
             <el-form-item label="值类型选择">
                 <el-select @change="changeView" v-model="value" placeholder="请选择值类型">
                     <el-option
@@ -12,8 +12,11 @@
                     ></el-option>
                 </el-select>
             </el-form-item>
+            <el-form-item label="">
+                <el-button type="primary" @click="handleBack" :icon="ArrowLeft">返回</el-button>
+            </el-form-item>
         </div>
-        <el-tabs class="waveFormAnalysis_body" type="border-card" v-model="activeName" @tab-click="handleClick">
+        <el-tabs class="home_body" type="border-card" v-model="activeName" @tab-click="handleClick">
             <el-tab-pane
                 label="瞬时波形"
                 name="ssbx"
@@ -38,48 +41,23 @@
                     :wp="wp"
                 ></rmsboxi>
             </el-tab-pane>
-            <!-- <el-tab-pane label="瞬时波形" name="0">
-                <template #label>
-                    <span class="custom-tabs-label">
-                        <el-icon><TrendCharts /></el-icon>
-                        瞬时波形
-                    </span>
-                </template>
-                <div class="tab_info">
-                    <div class="charts">
-                        <MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
-                    </div>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane label="RMS波形" name="1">
-                <template #label>
-                    <span class="custom-tabs-label">
-                        <el-icon><TrendCharts /></el-icon>
-                        RMS波形
-                    </span>
-                </template>
-                <div class="tab_info">
-                    <div class="charts">
-                        <MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
-                    </div>
-                </div>
-            </el-tab-pane> -->
         </el-tabs>
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, reactive, defineExpose, watch } from 'vue'
+import { ref, onMounted, reactive, defineExpose, watch, defineEmits } 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 { Platform, TrendCharts, DataLine, ArrowLeft } from '@element-plus/icons-vue'
 import { mainHeight } from '@/utils/layout'
 const props = defineProps(['wp'])
 const searchForm = ref({
     type: 0
 })
+const emit = defineEmits(['handleHideCharts'])
 const tableList: any = ref([])
 for (let i = 0; i < 300; i++) {
     tableList.value.push({
@@ -118,7 +96,7 @@ const view2 = ref(false)
 const showBoxi = ref(true)
 const activeName = ref('ssbx')
 const wp = ref({})
-const value = ref(2)
+const value = ref(1)
 const options = ref([
     {
         value: 1,
@@ -129,19 +107,7 @@ const options = ref([
         label: '二次值'
     }
 ])
-// watch(
-//     () => props.wp,
-//     (val, oldVal) => {
-//         if (val) {
-//             console.log(val,"+++++++++++++++wp");
-//             wp.value == val
-//         }
-//     },
-//     {
-//         immediate: true,
-//         deep: true
-//     }
-// )
+
 const isWp = ref(false)
 const boxoList: any = ref([])
 const getWpData = (val: any, list: any) => {
@@ -157,383 +123,6 @@ const changeView = () => {
     }, 0)
 }
 const bxecharts = mainHeight(195).height as any
-//加载echarts
-const init = () => {
-    return
-    const xDataList: any = [],
-        yDataList1: any = [],
-        yDataList2: any = [],
-        yDataList3: any = []
-    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))
-        yDataList3.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
-    })
-    if (activeName.value == '0') {
-        echartsData1.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                grid: {
-                    top: '8%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['A相', 'B相', 'C相'],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    name: '时间(ms)',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    }
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: 'kv',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: 'A相',
-                        type: 'line',
-                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#FFCC00'
-                            // }e
-                        },
-                        data: yDataList1,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    },
-                    {
-                        name: 'B相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-
-                            color: '#009900'
-                            // }
-                        },
-                        data: yDataList2,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    },
-                    {
-                        name: 'C相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0]
-                            // color: '#CC0000'
-                            // }
-                        },
-                        data: yDataList3,
-                        smooth: true, // 这里设置平滑曲线
-                        symbol: 'none' // 设置为 'none' 去掉折点小圆
-                    }
-                ]
-            }
-        }
-        barCharts1.value.initChart()
-    } else if (activeName.value == '1') {
-        echartsData2.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                grid: {
-                    top: '8%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['A相', 'B相', 'C相'],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    name: '时间(ms)',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    }
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: 'kv',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: 'A相',
-                        type: 'line',
-                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#FFCC00'
-                            // }e
-                        },
-                        data: yDataList1
-                    },
-                    {
-                        name: 'B相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#009900'
-                            // }
-                        },
-                        data: yDataList2
-                    },
-                    {
-                        name: 'C相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0]
-                            // color: '#CC0000'
-                            // }
-                        },
-                        data: yDataList3
-                    }
-                ]
-            }
-        }
-        barCharts2.value.initChart()
-    } else if (activeName.value == '2') {
-        echartsData3.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                grid: {
-                    top: '8%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['A相', 'B相', 'C相'],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    name: '时间(ms)',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    }
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: 'kv',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: 'A相',
-                        type: 'line',
-                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#FFCC00'
-                            // }e
-                        },
-                        data: yDataList1
-                    },
-                    {
-                        name: 'B相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-
-                            color: '#009900'
-                            // }
-                        },
-                        data: yDataList2
-                    },
-                    {
-                        name: 'C相',
-                        type: 'line',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0]
-                            // color: '#CC0000'
-                            // }
-                        },
-                        data: yDataList3
-                    }
-                ]
-            }
-        }
-        barCharts3.value.initChart()
-    }
-}
 
 const handleClick = (tab: any, event: any) => {
     // activeName.value = tab.index
@@ -542,11 +131,11 @@ const handleClick = (tab: any, event: any) => {
     } else if (tab.name == 'rmsbx') {
         activeName.value = 'rmsbx'
     }
-    init()
 }
-onMounted(() => {
-    init()
-})
+const handleBack = () => {
+    emit('handleHideCharts')
+}
+onMounted(() => {})
 defineExpose({ getWpData })
 </script>
 <style lang="scss" scoped>
@@ -562,24 +151,27 @@ defineExpose({ getWpData })
     }
 }
 
-.waveFormAnalysis {
+.home {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     position: relative;
-    .waveFormAnalysis_header {
-        position: absolute;
-        top: -25px;
-        left: 0;
-        width: 80%;
-        height: 40px;
+    .home_header {
+        // position: absolute;
+        // top: -25px;
+        // left: 0;
+        // width: 80%;
+        // height: 40px;
+        height: 50px;
+        display: flex;
+        align-items: center;
         .el-select {
             width: 200px !important;
         }
     }
-    .waveFormAnalysis_body {
-        margin-top: 20px;
+    .home_body {
+        // margin-top: 20px;
         flex: 1;
     }
 }
diff --git a/src/views/govern/device/control/tabs/event.vue b/src/views/govern/device/control/tabs/event.vue
index 38b45c7..50f3444 100644
--- a/src/views/govern/device/control/tabs/event.vue
+++ b/src/views/govern/device/control/tabs/event.vue
@@ -1,22 +1,18 @@
 <template>
-    <div class="header_btn" style="display: none">
-        <!-- <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">
-            波形解析
-        </el-button> -->
-    </div>
-
-    <div class="view" >
-        <TableHeader datePicker ref="headerRef">
-            <template #operation>
-                <el-button v-if="isWaveCharts" type="primary" @click="handleBack" :icon="ArrowLeft">返回</el-button>
-            </template>
-        </TableHeader>
+    <div class="view">
+        <TableHeader datePicker ref="headerRef" v-if="!isWaveCharts"></TableHeader>
         <Table ref="tableRef" v-if="!isWaveCharts" />
-        <waveFormAnalysis v-if="isWaveCharts" ref="waveFormAnalysisRef" :wp="wp" />
+        <waveFormAnalysis
+            v-if="isWaveCharts"
+            ref="waveFormAnalysisRef"
+            @handleHideCharts="isWaveCharts = false"
+            :wp="wp"
+        />
+        <el-button v-if="isWaveCharts" type="primary" @click="handleBack" :icon="ArrowLeft">返回</el-button>
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, provide, nextTick } from 'vue'
+import { ref, onMounted, provide, nextTick, defineEmits } from 'vue'
 import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
@@ -88,6 +84,7 @@ const tableStore: any = new TableStore({
                     // },
                     click: async row => {
                         row.loading = true
+
                         await analyseWave(row.id)
                             .then(res => {
                                 row.loading = false
@@ -132,6 +129,7 @@ const getTableParams = (val: any) => {
 const handleBack = async () => {
     isWaveCharts.value = false
     console.log(6666666, isWaveCharts.value)
+    emit('activeTabsType', '')
     await tableStore.index()
 }
 defineExpose({ getTableParams })