admin-govern/src/views/govern/device/planData/components/transient.vue

<template>
    <div>
        <Table ref="tableRef" v-if="!isWaveCharts" />
        <waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
            @handleHideCharts="isWaveCharts = false" :wp="wp" />
    </div>

    <!-- <TableHeader :showReset="false">
       
    </TableHeader> -->


</template>
<script setup lang='ts'>
import { ref, provide, onMounted, nextTick } from 'vue'
import { getEventByItem } from '@/api/cs-device-boot/planData'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage } from 'element-plus'
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue';
import { analyseWave } from '@/api/common'
import { mainHeight } from '@/utils/layout'
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
const props = defineProps({
    activeName: String,
    activeColName: [Object, String]
})
const loading = ref(false)
const waveFormAnalysisRef = ref()
const isWaveCharts = ref(false)
const boxoList: any = ref([])
const wp = ref({})
const tableStore = new TableStore({
    url: '/cs-harmonic-boot/data/getEventByItem',
    method: 'POST',
    paramsPOST: true,
    showPage: false,
    publicHeight: 355,
    column: [
        // { width: '60', type: 'checkbox', fixed: 'left' },
        {
            title: '序号', width: 80, formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'startTime', 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.toFixed(2) : '/'
                return row.cellValue
            }
        },
        {
            field: 'featureAmplitude',
            title: '暂降(聚升)幅值(%)',
            minWidth: 100,
            formatter: (row: any) => {
                row.cellValue = row.cellValue + '' ? row.cellValue.toFixed(2) : '/'
                if (String(row.cellValue).split('.')[1] == '00') {
                    row.cellValue = String(row.cellValue).split('.')[0]
                }
                return row.cellValue
            }
        },
        {
            title: '操作',
            width: 180,
            render: 'buttons',
            fixed: 'right',
            buttons: [
                {
                    name: 'edit',
                    title: '波形分析',
                    type: 'primary',
                    icon: 'el-icon-Check',
                    render: 'basicButton',
                    loading: 'loading1',
                    disabled: row => {
                        // && row.evtParamTm < 20
                        return !row.wavePath
                    },
                    click: async row => {
                        row.loading1 = true
                        loading.value = true
                        isWaveCharts.value = true
                        await analyseWave(row.id)
                            .then(res => {
                                row.loading1 = false
                                if (res != undefined) {
                                    boxoList.value = row
                                    boxoList.value.systemType = 'WX'
                                    wp.value = res.data


                                }
                                loading.value = false
                            })
                            .catch(() => {
                                row.loading1 = false
                                loading.value = false
                            })

                        nextTick(() => {
                            waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
                            setHeight()
                        })
                    }
                },
                {
                    name: 'edit',
                    text: '暂无波形',
                    type: 'info',
                    icon: 'el-icon-DataLine',
                    render: 'basicButton',
                    disabled: row => {
                        return row.wavePath
                    }
                },
                {
                    name: 'edit',
                    title: '波形下载',
                    type: 'primary',
                    loading: 'loading2',
                    icon: 'el-icon-Check',
                    render: 'basicButton',
                    disabled: row => {
                        // && row.evtParamTm < 20
                        return !row.wavePath
                    },
                    click: row => {
                        getFileZip({ eventId: row.id }).then(res => {
                            let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
                            const url = window.URL.createObjectURL(blob)
                            const link = document.createElement('a') // 创建a标签
                            link.href = url
                            link.download = row.wavePath.split('/')[2] || '波形文件' // 设置下载的文件名
                            document.body.appendChild(link)
                            link.click() //执行下载
                            document.body.removeChild(link) //释放标签

                        })

                    }
                }
            ]
        }
    ],

    loadCallback: () => {

    }
})
const setHeight = () => {
    if (props.activeColName == '0') {
        waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 485)
        tableStore.table.height = mainHeight(380).height

    } else {
        waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(350, 350)
        tableStore.table.height = mainHeight(240).height
    }
}
provide('tableStore', tableStore)
const init = () => {
    tableStore.table.params.id = props.activeName
    // getEventByItem({ id: props.activeName }).then(res => {

    // })
    tableStore.index()
}
onMounted(() => {

})
defineExpose({ init, setHeight })

</script>
<style lang="scss" scoped></style>