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="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-form-item label="">
                <el-button @click="handleBack" :icon="Back">返回</el-button>
            </el-form-item>
        </div>
        <el-tabs class="home_body" type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
                <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;'">
                <rmsboxi
                    v-if="isWp && wp && activeName == 'rmsbx'"
                    :value="value"
                    :boxoList="boxoList"
                    :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 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(1)
const options = ref([
    {
        value: 1,
        label: '一次值'
    },
    {
        value: 2,
        label: '二次值'
    }
])

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(345).height as any

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'
    }
}
const handleBack = () => {
    emit('handleHideCharts')
}
onMounted(() => {})
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);
    }
}

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

    .home_header {
        // position: absolute;
        // top: -25px;
        // left: 0;
        // width: 80%;
        // height: 40px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;

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

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