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

<template>
    <div v-if="view2">
        <el-row>
            <el-col :span="12">
                <span v-if="view2" style="font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
                <el-select
                    v-if="view2"
                    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
                    v-if="view2"
                    @click="backbxlb"
                    type="primary"
                    class="el-icon-refresh-right"
                    icon="el-icon-CloseBold"
                    style="float: right"
                >
                    返回
                </el-button>
            </el-col>
        </el-row>

        <el-tabs v-if="view2" 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
                    v-if="bxactiveName == 'ssbx' && showBoxi"
                    :value="value"
                    :boxoList="props.boxoList"
                    :wp="props.wp"
                ></shushiboxi>
            </el-tab-pane>
            <el-tab-pane
                label="RMS波形"
                class="boxbx pt10 pb10"
                name="rmsbx"
                :style="'height:' + bxecharts + ';overflow-y: scroll;'"
            >
                <rmsboxi
                    v-if="bxactiveName == 'rmsbx' && showBoxi"
                    :value="value"
                    :boxoList="props.boxoList"
                    :wp="props.wp"
                ></rmsboxi>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div v-if="view3" class="pd10">
        <span style="font-weight: 500; font-size: 22px">高级分析</span>
        <el-button type="primary" icon="el-icon-ArrowLeftBold" @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'

const emit = defineEmits(['backbxlb'])
interface Props {
    boxoList: any
    wp: any,
    senior?:boolean
}

const props = withDefaults(defineProps<Props>(), {
    senior:false
})

const bxactiveName = ref('ssbx')
const value = ref(1)
const options = ref([
    {
        value: 1,
        label: '一次值'
    },
    {
        value: 2,
        label: '二次值'
    }
])
const bxecharts = mainHeight(95).height as any
const view2 = ref(true)
const showBoxi = ref(true)
const view3 = ref(false)
const GJList = ref([])

const bxhandleClick = (tab: any) => {
    if (tab.name == 'ssbx') {
        bxactiveName.value = 'ssbx'
    } else if (tab.name == 'rmsbx') {
        bxactiveName.value = 'rmsbx'
    }
    //  console.log(tab, event);
}
const backbxlb = () => {
    emit('backbxlb')
}
// 高级分析
const AdvancedAnalytics = () => {
    analysis({
        eventIndex: props.boxoList.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
}
</script>
<style lang="scss" scoped></style>