admin-govern/src/views/govern/analyze/DVR/index.vue

<template>
    <div class="default-main">
        <div class="analyze-dvr" v-show="view" :style="{ height: pageHeight.height }" v-loading="loading">
            <DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
            <div class="analyze-dvr-right" v-if="tableStore.table.params.deviceId">
                <Table v-if="view" ref="tableRef"></Table>
            </div>
            <el-empty v-else description="请选择设备" class="analyze-dvr-right" />
        </div>
        <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
            <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" @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-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="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
                        v-if="bxactiveName == 'rmsbx' && showBoxi"
                        :value="value"
                        :boxoList="boxoList"
                        :wp="wp"
                    ></rmsboxi>
                </el-tab-pane>
            </el-tabs>
            <!-- <xiebofenxi  ref="child"  :bxshuju="bxshuju" @backfh="back"></xiebofenxi>  -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, provide, onMounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { analyseWave } from '@/api/common'
import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue'
defineOptions({
    name: 'govern/analyze/DVR'
})
const pageHeight = mainHeight(20)
const loading = ref(false)
const view = ref(true)
const view2 = ref(false)
const showBoxi = ref(true)

const bxactiveName = ref('ssbx')
const boxoList = ref({})
const wp = ref({})
const value = ref(1)
const options = ref([
    {
        value: 1,
        label: '一次值'
    },
    {
        value: 2,
        label: '二次值'
    }
])
const tableStore = new TableStore({
    url: '/cs-harmonic-boot/eventUser/queryEventpage',
    method: 'POST',
    column: [
        { title: '事件描述', field: 'evtParamPosition' },
        { title: '持续时间(s)', field: 'evtParamTm' },
        { title: '暂降深度', field: 'evtParamVVaDepth' },
        { title: '发生时刻', field: 'startTime' },
        {
            title: '操作',
            align: 'center',
            width: '130',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    text: '波形分析',
                    type: 'primary',
                    icon: 'el-icon-DataLine',
                    render: 'basicButton',
                    disabled: row => {
                        return !row.wavePath && row.evtParamTm < 20
                    },

                    click: async row => {
                        row.loading = true
                        boxoList.value = row
                        await analyseWave(row.id)
                            .then(res => {
                                row.loading = false
                                if (res != undefined) {
                                    wp.value = res.data
                                    view.value = false
                                    view2.value = true
                                }
                            })
                            .catch(() => {
                                row.loading = false
                            })
                    }
                }
            ]
        }
    ],
    loadCallback: () => {
        tableStore.table.data.forEach((item: any) => {
            item.loading = false
            item.evtParamTm = item.evtParamTm.split('s')[0]
        })
    }
})
tableStore.table.params.type = 0
provide('tableStore', tableStore)
const nodeClick = async (e: anyObj) => {
    if (e.level == 2) {
        loading.value = false
        tableStore.table.params.deviceId = e.id
        tableStore.index()
    }
}

const changeView = () => {
    showBoxi.value = false
    setTimeout(() => {
        showBoxi.value = true
    }, 0)
}
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 = () => {
    view.value = true
    view2.value = false
}
const bxecharts = mainHeight(95).height as any
</script>

<style lang="scss">
.analyze-dvr {
    display: flex;

    &-right {
        height: 100%;
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 0;
        display: flex;
        flex-direction: column;
    }
}
</style>