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"
                        :parentHeight="parentHeight"
                        :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"
                        :parentHeight="parentHeight"
                        :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 parentHeight = ref(0)
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 = ref(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) => {
    if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
    if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()

    loading.value = true
    if (tab.name == 'ssbx') {
        bxactiveName.value = 'ssbx'
    } else if (tab.name == 'rmsbx') {
        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 setHeight = (h: any, vh: any) => {
    if (h != false) {
        parentHeight.value = h
    }

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