admin-govern/src/views/govern/device/control/tabs/event.vue

<template>
    <div class="header_btn">
        <!-- <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">
            波形解析
        </el-button> -->
        <el-button type="primary" size="small" @click="handleBack" v-if="isWaveCharts" :icon="ArrowLeft">
            返回
        </el-button>
    </div>
    <div class="view">
        <Table ref="tableRef" v-if="!isWaveCharts" />
        <waveFormAnalysis ref="waveFormAnalysisRef" v-if="isWaveCharts" :wp="wp" />
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, provide } from 'vue'
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import waveFormAnalysis from './components/waveFormAnalysis.vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { analyseWave } from '@/api/common'
const tableParams: any = ref({})
const refheader = ref()
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 tableStore: any = new TableStore({
    url: '/cs-device-boot/csGroup/deviceDataByType',
    publicHeight: 210,
    method: 'POST',
    column: [
        // { width: '60', type: 'checkbox', fixed: 'left' },
        { title: '序号', type: 'seq', width: 80 },
        { field: 'startTime', title: '发生时刻', minWidth: 170 },
        {
            field: 'gcName',
            title: '工程名称',
            minWidth: 170,
            formatter: (row: any) => {
                row.cellValue = row.cellValue ? row.cellValue : '/'
                return row.cellValue
            }
        },
        { field: 'projectName', title: '项目名称', minWidth: 170 },
        { field: 'itemName', title: '测试项名称', minWidth: 170 },
        { field: 'showName', title: '事件描述', minWidth: 170 },
        {
            field: 'phaseType',
            title: '相别',
            minWidth: 100,
            formatter: (row: any) => {
                row.cellValue = row.cellValue ? row.cellValue : '/'
                return row.cellValue
            }
        },
        {
            field: 'persistTime',
            title: '持续时间(s)',
            minWidth: 100,
            formatter: (row: any) => {
                row.cellValue = row.cellValue ? row.cellValue : '/'
                return row.cellValue
            }
        },
        {
            field: 'amplitude',
            title: '暂降幅值(%)',
            minWidth: 100,
            formatter: (row: any) => {
                row.cellValue = row.cellValue ? row.cellValue : '/'
                return row.cellValue
            }
        },
        {
            title: '操作',
            width: 180,
            render: 'buttons',
            fixed: 'right',
            buttons: [
                {
                    name: 'edit',
                    title: '波形解析',
                    type: 'primary',
                    icon: 'el-icon-Check',
                    render: 'basicButton',
                    // disabled: row => {
                    //     return !row.wavePath && row.evtParamTm < 20
                    // },
                    click: async row => {
                        row.loading = true
                        boxoList.value = row
                        await analyseWave(row.eventId)
                            .then(res => {
                                row.loading = false
                                if (res != undefined) {
                                    wp.value = res.data
                                    view.value = false
                                    view2.value = true
                                }
                            })
                            .catch(() => {
                                row.loading = false
                            })
                        handleWaveFormAnalysis(wp.value)
                    }
                }
            ]
        }
    ],

    beforeSearchFun: () => {
        tableStore.table.params.devId = tableParams.value.devId
        tableStore.table.params.lineId = tableParams.value.lineId
        tableStore.table.params.list = tableParams.value.list
        tableStore.table.params.type = 3
    },
    loadCallback: () => {}
})
provide('tableStore', tableStore)
const isWaveCharts = ref(false)
//获取请求参数
const getTableParams = (val: any) => {
    tableParams.value = val
    console.log(tableParams.value, '暂态时间表格请求参数')
    isWaveCharts.value = false
    tableStore.index()
}
//波形解析组件
const waveFormAnalysisRef = ref()
const handleWaveFormAnalysis = (val: any) => {
    console.log(val, '波形解析')
    isWaveCharts.value = true
    waveFormAnalysisRef.value.getWpData(val)
}
//返回
const handleBack = () => {
    isWaveCharts.value = false
    tableStore.index()
}
defineExpose({ getTableParams })
onMounted(() => {
    tableStore.index()
})
</script>
<style lang="scss" scoped>
.header_btn {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>