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

<!-- 设备管理 -->
<template>
    <div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
        <DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
        <div class="device-manage-right" v-if="deviceData">
            <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
                <template #extra>
                    <el-button
                        type="primary"
                        icon="el-icon-Share"
                        @click="openGroup"
                        :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-item label="应用程序版本号">
                    {{ deviceData.appVersion }}
                </el-descriptions-item>
                <el-descriptions-item label="应用程序发布日期">
                    {{ deviceData.appDate }}
                </el-descriptions-item>
                <el-descriptions-item label="应用程序校验码">
                    {{ deviceData.appCheck }}
                </el-descriptions-item>
            </el-descriptions>
            <el-tabs v-model="dataSet" type="border-card" class="device-manage-box-card" @tab-click="handleClick">
                <el-tab-pane
                    lazy
                    :label="item.name"
                    :name="item.id"
                    v-for="(item, index) in deviceData.dataSetList"
                    :key="index"
                ></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>
        <el-empty v-else description="请选择设备" class="device-manage-right" />
        <MangePopup ref="mangePopup" />
    </div>
</template>

<script setup lang="ts">
defineOptions({
    name: 'govern/device/manage'
})
import MangePopup from './popup.vue'
import DeviceTree from '@/components/tree/govern/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(true)
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(260).height
const mangePopup = ref()
const activeName = ref(0)
// 树节点点击
const nodeClick = (e: anyObj) => {
    if (!e) {
        loading.value = false
        return
    }
    console.log(e.level);
    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) {
                dataSet.value = ''
                tableData.value = []
            } else {
                if (res.data.dataSetList && res.data.dataSetList[0]?.id) {
                    dataSet.value = res.data.dataSetList[0]?.id
                } else {
                    dataSet.value = ''
                    tableData.value = []
                }
                handleClick()
            }
        })
    }
}
//tab点击事件
const handleClick = () => {
    tableLoading.value = true
    tableData.value = []
    setTimeout(() => {
        getTargetById(dataSet.value).then(res => {
            tableData.value = res.data
            tableLoading.value = false
        })
    }, 100)
}
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">
.device-manage {
    display: flex;
    &-left {
        width: 280px;
    }
    &-right {
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 0;
        .el-descriptions__header {
            height: 36px;
            margin-bottom: 7px;
            display: flex;
            align-items: center;
        }
    }
}
</style>