admin-govern/src/views/govern/alarm/Transient.vue

<template>
    <div ref="refheader" v-show="view">
        <TableHeader datePicker>
            <template v-slot:select>
                <el-form-item label="数据来源">
                    <el-cascader
                        placeholder="请选择数据来源"
                        @change="sourceChange"
                        :options="props.deviceTree"
                        :show-all-levels="false"
                        :props="{ checkStrictly: true }"
                        clearable
                    ></el-cascader>
                    <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
                </el-form-item>
                <el-form-item label="级别">
                    <el-select v-model="tableStore.table.params.level" placeholder="请选择级别" clearable>
                        <el-option
                            v-for="item in rankOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>
        </TableHeader>
        <!-- <div style="height: 300px;"> -->
        <Table :isGroup="true">
            <template v-slot:columns>
                <vxe-column title="操作" min-width="15px">
                    <template v-slot:default="scoped">
                        <!-- {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }} -->
                        <el-button
                            :icon="Tickets"
                            size="small"
                            type="primary"
                            v-if="scoped.row.wavePath && scoped.row.evtParamTm < 20"
                            @click="getboxin(scoped.row)"
                        >
                            波形分析
                        </el-button>
                        <el-button v-else size="small" :icon="Tickets" type="info" :disabled="true">暂无波形</el-button>
                    </template>
                </vxe-column>
            </template>
            >
        </Table>
    </div>
    <div style="padding: 10px" 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"
                    style="float: right"
                >
                    返回
                </el-button>
            </el-col>
        </el-row>
        <el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
            <el-tab-pane
                label="瞬时波形"
                name="ssbx"
                class="boxbx"
                :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波形" 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>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { Tickets } from '@element-plus/icons-vue'
import TableHeader from '@/components/table/header/index.vue'
import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue'

import { mainHeight } from '@/utils/layout'

const props = defineProps(['deviceTree'])

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 options = ref([
    {
        value: 1,
        label: '一次值'
    },
    {
        value: 2,
        label: '二次值'
    }
])
const rankOptions = ref([
    {
        value: '1',
        label: '1级'
    },
    {
        value: '2',
        label: '2级'
    },
    {
        value: '3',
        label: '3级'
    }
])

const tableStore = new TableStore({
    url: '/cs-harmonic-boot/eventUser/queryEventpage',
    method: 'POST',
    column: [
        { title: '工程名称', field: 'engineeringName', align: 'center' },
        { title: '项目名称', field: 'projectName', align: 'center' },
        { title: '设备名称', field: 'equipmentName', align: 'center' },
        { title: '事件描述', field: 'showName', align: 'center' },
        { title: '事件发生位置', field: 'evtParamPosition', align: 'center' },
        { title: '相别', field: 'evtParamPhase', align: 'center' },
        { title: '持续时间(s)', field: 'evtParamTm', align: 'center' },
        { title: '暂降深度', field: 'evtParamVVaDepth', align: 'center' },
        { title: '发生时刻', field: 'startTime', align: 'center' }
    ],
    loadCallback: () => {
        tableStore.table.data.forEach((item: any) => {
            item.evtParamTm = item.evtParamTm.split('s')[0]
        })
    }
})

provide('tableStore', tableStore)
//   "target": [],
//   "type": "",
//   "userId": ""
tableStore.table.params.engineeringid = ''
tableStore.table.params.projectId = ''
tableStore.table.params.deviceId = ''
tableStore.table.params.type = 0
tableStore.table.params.eventIds = []
tableStore.table.params.status = ''
tableStore.table.params.target = []
tableStore.table.params.userId = ''
import { analyseWave } from '@/api/common'
const sourceChange = (e: any) => {
    tableStore.table.params.engineeringid = e[0] || ''
    tableStore.table.params.projectId = e[1] || ''
    tableStore.table.params.deviceId = e[2] || ''
}
const getboxin = async (row: any) => {
    boxoList.value = row
    await analyseWave(row.id).then(res => {
        if (res != undefined) {
            wp.value = res.data
            view.value = false
            view2.value = true
        }
    })
}
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
    setTimeout(() => {
    tableStore.table.height = mainHeight(190).height as any
}, 0)
}
onMounted(() => {
    tableStore.index()
})
const bxecharts = mainHeight(175).height as any
setTimeout(() => {
    tableStore.table.height = mainHeight(190).height as any
}, 0)

const addMenu = () => {}
</script>
<style scoped lang="scss"></style>