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

<template>
    <div class="default-main analyze-dvr" :style="{ height: pageHeight.height }" v-loading="loading">
        <DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
        <div class="analyze-dvr-right">
            <Table ref="tableRef" />
        </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'

defineOptions({
    name: 'govern/analyze/DVR'
})
const pageHeight = mainHeight(20)
const loading = ref(false)
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',
                    title: '波形分析',
                    type: 'primary',
                    icon: 'el-icon-DataLine',
                    render: 'tipButton',
                    click: row => {
                    }
                },
            ]
        }
    ]
})
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()
    }
}
</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>