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 type="primary" @click="handleBack" :icon="ArrowLeft">返回</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;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-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, 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({
        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(195).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;

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

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