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

<!-- 暂态事件-波形分析组件 -->
<template>
    <div class="home">
        <div class="home_header">
            <!-- <el-form-item label="值类型选择">
                <el-select @change="changeView" v-model.trim="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> -->

            <el-radio-group v-model.trim="theTypeOfValue" @change="changeView">
                <el-radio-button label="一次值" :value="1" />
                <el-radio-button label="二次值" :value="2" />
            </el-radio-group>

            <el-button @click="handleBack" :icon="Back">返回</el-button>
        </div>
        <el-tabs
            class="home_body"
            type="border-card"
            v-model.trim="activeName1"
            @tab-click="handleClick"
            v-loading="loading"
        >
            <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
                <shushiboxi
                    v-if="isWp && wp && activeName == 'ssbx' && showBoxi"
                    :value="value"
                    :boxoList="boxoList"
                    :parentHeight="parentHeight"
                    :wp="wp"
                ></shushiboxi>
            </el-tab-pane>
            <el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: auto;'">
                <rmsboxi
                    v-if="isWp && wp && activeName == 'rmsbx' && showBoxi"
                    :value="value"
                    :boxoList="boxoList"
                    :parentHeight="parentHeight"
                    :wp="wp"
                ></rmsboxi>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts" setup>
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, Back } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout'
const props = defineProps(['wp'])
const searchForm = ref({
    type: 0
})
const emit = defineEmits(['handleHideCharts'])
const parentHeight = ref(0)
const loading = ref(false)
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 activeName1 = ref('ssbx')
const activeName = ref('ssbx')
const wp = ref({})
const theTypeOfValue = ref(1)
const value = ref(1)

const isWp = ref(false)
const boxoList: any = ref([])
const getWpData = (val: any, list: any) => {
    wp.value = val
    isWp.value = true
    boxoList.value = list
}
const changeView = () => {
    showBoxi.value = false
    loading.value = true
    setTimeout(() => {
        value.value = theTypeOfValue.value
        showBoxi.value = true
    }, 500)
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const bxecharts: any = ref(mainHeight(190).height as any)

const handleClick = (tab: any, event: any) => {
    loading.value = true
    setTimeout(() => {
        activeName.value = tab.paneName
    }, 500)
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const handleBack = () => {
    emit('handleHideCharts')
}
const setHeight = (h: any, vh: any, num = 1) => {
    if (h != false) {
        parentHeight.value = h
    }

    setTimeout(() => {
        bxecharts.value = mainHeight(vh,num).height
    }, 100)
}
onMounted(() => {})
defineExpose({ getWpData, setHeight })
</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);
//     }
// }

.home {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    .home_header {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-select {
            width: 200px !important;
        }
    }

    .home_body {
        // margin-top: 20px;
        flex: 1;
    }
}
</style>