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

<!-- 暂态事件-波形解析组件 -->
<template>
    <div class="waveFormAnalysis">
        <div class="waveFormAnalysis_header">
            <el-form-item label="值类型选择">
                <el-select @change="changeView" v-model="value" placeholder="请选择值类型">
                    <el-option
                        v-for="(item, index) in options"
                        :key="index"
                        :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="ssbx"
                :style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'"
            >
                <shushiboxi
                    v-if="isWp && wp && activeName == 'ssbx'"
                    :value="value"
                    :boxoList="boxoList"
                    :wp="wp"
                ></shushiboxi>
            </el-tab-pane>
            <el-tab-pane
                label="RMS波形"
                name="rmsbx"
                :style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'"
            >
                <rmsboxi
                    v-if="isWp && wp && activeName == 'rmsbx'"
                    :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>
                        瞬时波形
                    </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 { 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 tableList: any = ref([])
for (let i = 0; i < 300; i++) {
    tableList.value.push({
        name: i + 1,
        value: Math.floor(Math.random() * 101)
    })
}
interface RowVO {
    [key: string]: any
}
//谐波电压含有率
const gridOptions = ref<VxeGridProps<RowVO>>({
    border: true,
    showOverflow: true,
    showHeader: false,
    columns: [],
    data: [],
    columnConfig: {
        resizable: true
    },
    align: 'center'
})
gridOptions.value = { ...defaultAttribute, ...gridOptions.value }

const yAxisUnit: any = ref('')

const echartsData1: any = ref([]),
    echartsData2: any = ref([]),
    echartsData3: 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 wp = ref({})
const value = ref(2)
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 isWp = ref(false)
const boxoList: any = ref([])
const getWpData = (val: any, list: any) => {
    wp.value = val
    isWp.value = true
    boxoList.value = list
    console.log(wp.value, val, 'ggggghhhh')
}
const changeView = () => {
    showBoxi.value = false
    setTimeout(() => {
        showBoxi.value = true
    }, 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: '#00CC99'
                            // }e
                        },
                        data: yDataList1,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],

                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0]
                            // color: '#FF9900'
                            // }
                        },
                        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: '#00CC99'
                            // }e
                        },
                        data: yDataList1
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],
                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0]
                            // color: '#FF9900'
                            // }
                        },
                        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: '#00CC99'
                            // }e
                        },
                        data: yDataList1
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],

                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0]
                            // color: '#FF9900'
                            // }
                        },
                        data: yDataList3
                    }
                ]
            }
        }
        barCharts3.value.initChart()
    }
}

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>
.tab_info {
    width: 100%;
    height: calc(100vh - 450px);
    // overflow: auto;
    // padding-bottom: 20px;
    .charts {
        width: 100%;
        margin-top: 10px;
        height: calc(100vh - 450px);
    }
}
.custom-tabs-label {
    display: flex;
    align-items: center;
}
.waveFormAnalysis {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .waveFormAnalysis_header {
        position: absolute;
        top: -25px;
        left: 0;
        width: 80%;
        height: 40px;
        .el-select {
            width: 200px !important;
        }
    }
    .waveFormAnalysis_body {
        margin-top: 20px;
        flex: 1;
    }
}
</style>