admin-govern/src/views/govern/device/manage.vue

<template>
    <div class="default-main manage" :style="{ height: pageHeight.height }">
        <DeviceTree @node-click="nodeClick"></DeviceTree>
        <div class="manage-right" v-if="deviceData" v-loading="loading">
            <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
                <template #extra>
                    <el-button
                        type="primary"
                        icon="el-icon-Share"
                        @click="openGroup"
                        size="small"
                        :loading="getGroupLoading"
                    >
                        设备模版分组
                    </el-button>
                </template>
                <el-descriptions-item label="名称">
                    {{ deviceData.name }}
                </el-descriptions-item>
                <el-descriptions-item label="类型">
                    {{ echoName(deviceData.devType, devTypeOptions) }}
                </el-descriptions-item>

                <el-descriptions-item label="接入方式">
                    {{ deviceData.devAccessMethod }}
                </el-descriptions-item>
                <el-descriptions-item label="识别码">
                    {{ deviceData.ndid }}
                </el-descriptions-item>
                <el-descriptions-item label="型号">
                    {{ echoName(deviceData.devModel, devModelOptions) }}
                </el-descriptions-item>
                <el-descriptions-item label="接入时间">
                    {{ deviceData.time }}
                </el-descriptions-item>
            </el-descriptions>
            <el-tabs v-model="dataSet" type="card" class="device-manage-box-card" @tab-click="handleClick">
                <el-tab-pane
                    lazy
                    :label="item.name"
                    :name="item.id"
                    v-for="item in deviceData.dataSetList"
                    :key="item.id"
                ></el-tab-pane>
                <div :style="{ height: tableHeight }" v-loading="tableLoading">
                    <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
                        <vxe-column type="seq" title="序号" width="80"></vxe-column>
                        <vxe-column field="name" title="数据名称"></vxe-column>
                        <vxe-column field="phasic" title="相别"></vxe-column>
                        <vxe-column field="type" title="数据类型"></vxe-column>
                        <vxe-column field="unit" title="单位"></vxe-column>
                        <vxe-column field="startTimes" title="开始次数"></vxe-column>
                        <vxe-column field="endTimes" title="结束次数"></vxe-column>
                    </vxe-table>
                </div>
            </el-tabs>
        </div>
        <MangePopup ref="mangePopup" />
    </div>
</template>

<script setup lang="ts">
defineOptions({
    name: 'govern/device/manage'
})
import MangePopup from './managePopup.vue'
import DeviceTree from '@/components/tree/deviceTree.vue'
import { mainHeight } from '@/utils/layout'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
import { getTargetById } from '@/api/cs-device-boot/csDataArray'
import { getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const pageHeight = mainHeight(20)
const loading = ref(false)
const tableLoading = ref(false)
const getGroupLoading = ref(false)
const deviceData = ref<any>(null)
const dataSet = ref('')
const devTypeOptions = ref([])
const devModelOptions = ref([])
const tableData = ref([])
const tableHeight = mainHeight(230).height
const mangePopup = ref()
const nodeClick = (e: anyObj) => {
    if (e.level == 2) {
        loading.value = true
        getDeviceData(e.id, 'rt').then((res: any) => {
            deviceData.value = res.data
            loading.value = false
            if (res.data.dataSetList.length === 0) {
                dataSet.value = ''
                tableData.value = []
            } else {
                dataSet.value = res.data.dataSetList[0].id
                handleClick()
            }
        })
    }
}
const handleClick = () => {
    tableLoading.value = true
    tableData.value = []
    getTargetById(dataSet.value).then(res => {
        tableData.value = res.data
        tableLoading.value = false
    })
}
queryByCode('Device_Type').then(res => {
    queryCsDictTree(res.data.id).then(res => {
        devTypeOptions.value = res.data.map((item: any) => {
            return {
                value: item.id,
                label: item.name,
                ...item
            }
        })
    })
    queryByid(res.data.id).then(res => {
        devModelOptions.value = res.data.map((item: any) => {
            return {
                value: item.id,
                label: item.name,
                ...item
            }
        })
    })
})
const echoName = (value: any, arr: any[]) => {
    return arr.find(item => item.value == value).label
}
const openGroup = () => {
    if (!dataSet.value) {
        return ElMessage.warning('暂无数据')
    }
    getGroupLoading.value = true
    getGroup(dataSet.value).then((res: any) => {
        const call = (data: any[]) => {
            data.forEach(item => {
                item.label = item.name
                item.isShow = item.isShow == 1
                if (item.children && item.children.length > 0) {
                    call(item.children)
                }
            })
        }
        call(res.data)
        getGroupLoading.value = false
        mangePopup.value.open({
            deviceData: deviceData.value,
            dataSetName: deviceData.value.dataSetList.filter((item: any) => item.id == dataSet.value)[0]?.name,
            dataSet: dataSet.value,
            tree: res.data
        })
    })
}
</script>

<style lang="scss">
.manage {
    display: flex;

    &-right {
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 0;
        .el-descriptions__header {
            height: 36px;
            margin-bottom: 7px;
            display: flex;
            align-items: center;
        }
    }
}
</style>