admin-sjzx/src/components/echarts/waveForm.vue

<template>
    <div v-if="view2">
        <el-row>
            <el-col :span="12">
                <span style="font-size: 14px;  line-height: 30px">值类型选择:</span>
                <el-select style="min-width: 200px; width: 200px" @change="changeView" v-model="value"
                    placeholder="请选择值类型">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
                    @click="AdvancedAnalytics">高级分析</el-button> -->
            </el-col>
            <el-col :span="12">
                <el-button @click="backbxlb" class="el-icon-refresh-right" icon="el-icon-CloseBold"
                    style="float: right">
                    返回
                </el-button>
            </el-col>
        </el-row>
        <div v-loading="loading" style="height: calc(100vh - 190px)">
            <el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
                <el-tab-pane label="瞬时波形" name="ssbx" class="boxbx pt10 pb10"
                    :style="'height:' + bxecharts + ';overflow-y: scroll;'">
                    <shushiboxi ref="shushiboxiRef" v-if="bxactiveName == 'ssbx' && showBoxi" :value="value"
                        :boxoList="boxoList" :wp="wp">
                    </shushiboxi>
                </el-tab-pane>
                <el-tab-pane label="RMS波形" class="boxbx pt10 pb10" name="rmsbx"
                    :style="'height:' + bxecharts + ';overflow-y: scroll;'">
                    <rmsboxi ref="rmsboxiRef" v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value"
                        :boxoList="boxoList" :wp="wp">
                    </rmsboxi>
                </el-tab-pane>
            </el-tabs>
            <el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
        </div>
    </div>
    <div v-if="view3" class="pd10">
        <span style="font-weight: 500; font-size: 22px">高级分析</span>
        <el-button icon="el-icon-Back" @click="gaoBack" style="float: right">返回</el-button>
        <analytics :flag="true" :GJList="GJList" :boxoList="boxoList"></analytics>
    </div>
</template>
<script setup lang="ts">
import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue'
import analytics from '@/components/echarts/analytics.vue'
import { ref, reactive } from 'vue'
import { analysis } from '@/api/advance-boot/analyse'
import { mainHeight } from '@/utils/layout'
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
const emit = defineEmits(['backbxlb'])
interface Props {
    // boxoList: any
    // wp: any,
    senior?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    senior: false
})
const loading = ref(true)
const bxactiveName = ref('ssbx')
const rmsboxiRef = ref()
const value = ref(1)
const options = ref([
    {
        value: 1,
        label: '一次值'
    },
    {
        value: 2,
        label: '二次值'
    }
])
const shushiboxiRef = ref()
const bxecharts = mainHeight(95).height as any
const view2 = ref(true)
const boxoList = ref(null)
const wp = ref(null)
const showBoxi = ref(true)
const view3 = ref(false)
const view4 = ref(false)
const GJList = ref([])

const open = async (row: any) => {
    loading.value = true
    await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
        .then(res => {

            row.loading = false
            if (res != undefined) {
                boxoList.value = row
                wp.value = res.data
                loading.value = false
                view4.value = true
            }
        })
        .catch(() => {
            loading.value = false
        })
}
const bxhandleClick = (tab: any) => {
    loading.value = true
    if (tab.name == 'ssbx') {
        if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
        bxactiveName.value = 'ssbx'
       
    } else if (tab.name == 'rmsbx') {
        if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
        bxactiveName.value = 'rmsbx'
        
    }
    setTimeout(() => {
        loading.value = false 
    },0)
    //  console.log(tab, event);
}
const backbxlb = () => {
    boxoList.value = null
    wp.value = null
    if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
    if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()

    emit('backbxlb')
}
// 高级分析
const AdvancedAnalytics = () => {
    analysis({
        eventIndex: boxoList.value.eventId
    }).then(res => {
        GJList.value = res.data
        view3.value = true
        view2.value = false
    })
}
const changeView = () => {
    showBoxi.value = false
    setTimeout(() => {
        showBoxi.value = true
    }, 0)
}
const gaoBack = () => {
    view2.value = true
    view3.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>