设备监控

src/api/cs-device-boot/csGroup.ts

@@ -13,3 +13,40 @@ export function getGroup(dataSet: string) {
         data: form
     })
 }
+
+// 装置分组实时数据
+export function deviceHisData(data: any) {
+    return createAxios({
+        url: '/cs-device-boot/csGroup/deviceHistoryData',
+        method: 'POST',
+        data: Object.assign(
+            {
+                endTime: '',
+                id: '',
+                lineId: '',
+                pageNum: 1,
+                pageSize: 20,
+                startTime: ''
+            },
+            data
+        )
+    })
+}
+
+// 装置分组历史数据
+export function deviceRtData(data: any) {
+    let form = new FormData()
+    form.append('id', data.id)
+    form.append('lineId', data.lineId)
+    form.append('pageNum', data.pageNum)
+    form.append('pageSize', data.pageSize)
+    form.append('searchValue', data.searchValue)
+    return createAxios({
+        url: '/cs-device-boot/csGroup/deviceRtData',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}

src/api/cs-device-boot/csLedger.ts

@@ -7,3 +7,11 @@ export function getDeviceTree() {
         method: 'POST'
     })
 }
+
+// 监测点列表
+export function getLineTree() {
+    return createAxios({
+        url: '/cs-device-boot/csLedger/lineTree',
+        method: 'POST'
+    })
+}

src/components/form/datePicker/index.vue

@@ -182,7 +182,7 @@ const next = () => {
     var presentM = now.getMonth() + 1
     // 获取当前日期
     var presentD = now.getDate()
-    if (interval == 3) {
+    if (interval.value == 3) {
         if (month == 12) {
             year = year + 1
             // 年份进位后，大于当前的年份，是不科学的
@@ -255,7 +255,7 @@ const next = () => {
                 }
             }
         }
-    } else if (interval == 2) {
+    } else if (interval.value == 2) {
         // 前进需要年份进位
         if (month == 10) {
             year = year + 1
@@ -351,8 +351,8 @@ const next = () => {
                 }
             }
         }
-    } else if (interval == 5) {
+    } else if (interval.value == 5) {
-    } else if (interval == 4) {
+    } else if (interval.value == 4) {
         //根据开始时间推
         var start = new Date(year, month - 1, date)
         start.setDate(start.getDate() + 7)

src/components/table/header/index.vue

@@ -16,7 +16,7 @@
                     :label-width="90"
                 >
                     <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
-                        <DatePicker ref="Picker"></DatePicker>
+                        <DatePicker ref="datePickerRef"></DatePicker>
                     </el-form-item>
                     <slot name="select"></slot>
                 </el-form>
@@ -43,11 +43,7 @@ import { mainHeight } from '@/utils/layout'
 
 const tableStore = inject('tableStore') as TableStore
 const tableHeader = ref()
-const Picker = ref()
+const datePickerRef = ref()
-const date = ref([
-    window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),
-    window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
-])
 
 interface Props {
     datePicker?: boolean
@@ -56,10 +52,6 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
     datePicker: false
 })
-if (props.datePicker) {
-    // tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
-    // tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
-}
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
     for (const entry of entries) {
@@ -69,9 +61,9 @@ const resizeObserver = new ResizeObserver(entries => {
 const showUnfoldButton = ref(false)
 onMounted(() => {
     if (props.datePicker) {
-        tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
+        tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
-        tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
+        tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
-        tableStore.table.params.timeFlag = Picker.value.timeFlag
+        tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
     }
     nextTick(() => {
         resizeObserver.observe(tableHeader.value)
@@ -105,9 +97,9 @@ const showSelectChange = () => {
 }
 const onComSearch = async () => {
     if (props.datePicker) {
-        tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
+        tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
-        tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
+        tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
-        tableStore.table.params.timeFlag = Picker.value.timeFlag
+        tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
     }
 
     await tableStore.onTableAction('search', {})

src/components/tree/govern/deviceTree.vue

@@ -1,17 +1,19 @@
 <template>
-    <Tree :data="tree" />
+    <Tree ref="treRef" :data="tree" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
-import Tree from './index.vue'
+import Tree from '../index.vue'
 import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
 import { useConfig } from '@/stores/config'
 defineOptions({
     name: 'govern/deviceTree'
 })
+const emit = defineEmits(['init'])
 const config = useConfig()
 const tree = ref()
+const treRef = ref()
 getDeviceTree().then(res => {
     let arr: any[] = []
     res.data.forEach((item: any) => {
@@ -31,5 +33,13 @@ getDeviceTree().then(res => {
         })
     })
     tree.value = res.data
+    nextTick(() => {
+        treRef.value.treeRef.setCurrentKey(arr[0].id)
+        // 注册父组件事件
+        emit('init', {
+            level: 2,
+            ...arr[0]
+        })
+    })
 })
 </script>

src/components/tree/govern/pointTree.vue

@@ -0,0 +1,48 @@
+<template>
+    <Tree ref="treRef" :data="tree" />
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick } from 'vue'
+import Tree from '../index.vue'
+import { getLineTree } from '@/api/cs-device-boot/csLedger'
+import { useConfig } from '@/stores/config'
+defineOptions({
+    name: 'govern/deviceTree'
+})
+const emit = defineEmits(['init'])
+const config = useConfig()
+const tree = ref()
+const treRef = ref()
+getLineTree().then(res => {
+    let arr: any[] = []
+    res.data.forEach((item: any) => {
+        item.icon = 'el-icon-HomeFilled'
+        item.color = config.getColorVal('elementUiPrimary')
+        item.children.forEach((item2: any) => {
+            item2.icon = 'el-icon-List'
+            item.color = config.getColorVal('elementUiPrimary')
+            item2.children.forEach((item3: any) => {
+                item3.icon = 'el-icon-Platform'
+                item3.color = config.getColorVal('elementUiPrimary')
+                if (item3.comFlag === 1) {
+                    item3.color = '#e26257 !important'
+                }
+                item3.children.forEach((item4: any) => {
+                    item4.icon = 'el-icon-LocationFilled'
+                    arr.push(item4)
+                })
+            })
+        })
+    })
+    tree.value = res.data
+    nextTick(() => {
+        treRef.value.treeRef.setCurrentKey(arr[0].id)
+        // 注册父组件事件
+        emit('init', {
+            level: 2,
+            ...arr[0]
+        })
+    })
+})
+</script>

src/components/tree/index.vue

@@ -6,13 +6,14 @@
             </template>
         </el-input>
         <el-tree
-            style="flex: 1"
+            style="flex: 1;overflow: auto;"
             ref="treeRef"
             :props="defaultProps"
             v-bind="$attrs"
             highlight-current
             default-expand-all
             :filter-node-method="filterNode"
+            node-key="id"
         >
             <template #default="{ node, data }">
                 <span class="custom-tree-node">
@@ -43,6 +44,7 @@ const filterNode = (value: string, data: any) => {
     if (!value) return true
     return data.name.includes(value)
 }
+defineExpose({ treeRef })
 </script>
 <style lang="scss" scoped>
 .cn-tree {

src/layouts/admin/index.vue

@@ -98,7 +98,7 @@ const init = async () => {
                         icon: 'el-icon-List',
                         menu_type: 'tab',
                         url: '',
-                        component: '/src/views/govern/device/manage.vue',
+                        component: '/src/views/govern/device/control.vue',
                         keepalive: 'auth/role',
                         extend: 'none',
                         children: []
@@ -291,6 +291,7 @@ const init = async () => {
             data.forEach((item: any) => {
                 item.path = item.routePath
                 item.name = item.title
+                item.keepalive = item.routePath
                 item.component = item.routeName || '/src/views/Event-boot/Region/overview.vue'
                 item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
                 item.menu_type = item.children && item.children.length > 0 ? null : 'tab'

src/style.css

@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/styles/element.scss

@@ -87,8 +87,10 @@
 }
 /* 小屏设备 el-radio-group 样式调整-e */
 
-.vxe-header--row {
+.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
     background: var(--el-color-primary);
     color: var(--el-color-white);
 }
-
+.el-tabs__header{
+    margin-bottom: 10px;
+}

src/styles/vxeTable.scss

@@ -9,3 +9,8 @@
     background-color: var(--el-color-primary) !important;
     border-radius: 30px !important;
 }
+
+.vxe-header--row {
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
+}

src/views/govern/device/control.vue

@@ -0,0 +1,343 @@
+<template>
+    <div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading">
+        <PointTree @node-click="nodeClick" @init="nodeClick"></PointTree>
+        <div class="device-control-right" v-if="deviceData">
+            <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
+                <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-control-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>
+                <el-form :inline="true" style="white-space: nowrap">
+                    <el-form-item label="指标">
+                        <el-input
+                            v-model="formInline.searchValue"
+                            autocomplete="off"
+                            clearable
+                            placeholder="请输入关键词"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="日期" v-if="dataSet.indexOf('_history') > -1">
+                        <DatePicker ref="datePickerRef"></DatePicker>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search" @click="handleClick">查询</el-button>
+                    </el-form-item>
+                </el-form>
+                <div style="overflow: auto" :style="{ height: tableHeight }" v-loading="tableLoading">
+                    <div class="content">
+                        <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
+                            <template #header>
+                                <div class="clearfix">
+                                    <span style="flex: 1">{{ item.name }}</span>
+                                    <Icon
+                                        name="el-icon-TrendCharts"
+                                        class="ml10"
+                                        @click="getDeviceDataTrend(item)"
+                                        style="font-size: 26px; cursor: pointer; color: #fff"
+                                    ></Icon>
+                                </div>
+                            </template>
+                            <div class="box-card-content" v-if="dataSet.indexOf('_history') == -1">
+                                <div v-for="(child, childIndex) in item.children" :key="childIndex">
+                                    {{ child.anotherName }}:
+                                    {{ child.dataValue === 3.1415926 ? '暂无数据' : child.dataValue }}
+                                </div>
+                                <div class="mt10">
+                                    统计时间：{{ item.children.length ? item.children[0].time : '' }}
+                                </div>
+                            </div>
+                            <div v-else-if="item.children.length">
+                                <div style="display: flex; align-items: center">
+                                    <el-tag
+                                        effect="dark"
+                                        type="danger"
+                                        style="width: 40px; text-align: center"
+                                        class="mr10"
+                                    >
+                                        MAX
+                                    </el-tag>
+                                    {{
+                                        item.children[0].maxValue === 3.1415956 ? '暂无数据' : item.children[0].maxValue
+                                    }}
+                                </div>
+                                <div style="display: flex; align-items: center" class="mt10">
+                                    <el-tag
+                                        effect="dark"
+                                        type="success"
+                                        style="width: 40px; text-align: center"
+                                        class="mr10"
+                                    >
+                                        AVG
+                                    </el-tag>
+                                    {{
+                                        item.children[0].avgValue === 3.1415956 ? '暂无数据' : item.children[0].avgValue
+                                    }}
+                                </div>
+                                <div style="display: flex; align-items: center" class="mt10">
+                                    <el-tag
+                                        effect="dark"
+                                        type="warning"
+                                        style="width: 40px; text-align: center"
+                                        class="mr10"
+                                    >
+                                        MIN
+                                    </el-tag>
+                                    {{
+                                        item.children[0].minValue === 3.1415956 ? '暂无数据' : item.children[0].minValue
+                                    }}
+                                </div>
+                            </div>
+                        </el-card>
+                        <el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
+                    </div>
+                </div>
+                <el-pagination
+                    v-if="tableData.length"
+                    background
+                    class="mr2 mt10"
+                    style="float: right"
+                    @size-change="handleSizeChange"
+                    @current-change="pageChange"
+                    :current-page="formInline.pageNum"
+                    :page-sizes="[20, 30, 40, 50, 100]"
+                    :page-size="formInline.pageSize"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="formInline.total"
+                ></el-pagination>
+            </el-tabs>
+        </div>
+        <!-- <MangePopup ref="mangePopup" /> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+// import MangePopup from './controlPopup.vue'
+import PointTree from '@/components/tree/govern/pointTree.vue'
+import { mainHeight } from '@/utils/layout'
+import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
+import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
+import { getGroup } from '@/api/cs-device-boot/csGroup'
+import { ref, reactive, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import DatePicker from '@/components/form/datePicker/index.vue'
+
+defineOptions({
+    name: 'govern/device/control'
+})
+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<any[]>([])
+const tableHeight = mainHeight(320).height
+const mangePopup = ref()
+const datePickerRef = ref()
+const formInline = reactive({
+    searchValue: '',
+    pageNum: 1,
+    pageSize: 30,
+    total: 0,
+    startTime: '',
+    endTime: '',
+    id: '',
+    lineId: ''
+})
+const getDeviceDataTrend = (e: any) => {}
+const pageChange = (e: number) => {
+    formInline.pageNum = e
+    handleClick()
+}
+const handleSizeChange = (val: number) => {
+    formInline.pageNum = 1
+    formInline.pageSize = val
+    handleClick()
+}
+const nodeClick = (e: anyObj) => {
+    if (e.level == 3) {
+        loading.value = true
+        getDeviceData(e.pid, 'history', e.id).then((res: any) => {
+            res.data.dataSetList.forEach((item: any) => {
+                if (item.type === 'history') {
+                    item.id = item.id + '_history'
+                }
+            })
+            deviceData.value = res.data
+            if (res.data.dataSetList.length === 0) {
+                dataSet.value = ''
+                tableData.value = []
+            } else {
+                dataSet.value = res.data.dataSetList[0].id
+                handleClick()
+            }
+            loading.value = false
+        })
+        formInline.lineId = e.id
+    }
+}
+const handleClick = (tab?: any) => {
+    tableLoading.value = true
+    if (tab) {
+        tableData.value = []
+        formInline.pageNum = 1
+    }
+    setTimeout(() => {
+        if (dataSet.value.indexOf('_history') > -1) {
+            formInline.startTime = datePickerRef.value.timeValue[0]
+            formInline.endTime = datePickerRef.value.timeValue[1]
+            formInline.id = dataSet.value.replace('_history', '')
+            deviceHisData(formInline).then((res: any) => {
+                console.log(res)
+                tableData.value = res.data.records
+                formInline.total = res.data.total
+                tableLoading.value = false
+            })
+        } else {
+            formInline.id = dataSet.value
+            deviceRtData(formInline).then((res: any) => {
+                tableData.value = res.data.records
+                formInline.total = res.data.total
+                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-control {
+    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;
+        }
+        .content {
+            box-sizing: border-box;
+            overflow: auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            grid-template-rows: max-content;
+            grid-gap: 10px;
+            justify-content: center;
+
+            .box-card {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                color: var(--el-color-white);
+                min-height: 150px;
+                font-size: 13px;
+
+                .el-card__header {
+                    padding: 0;
+                    .clearfix {
+                        box-sizing: border-box;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        height: 35px;
+                        padding: 0 10px;
+                        background: var(--el-color-primary);
+                    }
+                }
+
+                .el-card__body {
+                    flex: 1;
+                    padding: 10px;
+                    margin-bottom: 0;
+                    background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
+                    .box-card-content {
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/govern/device/manage.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="default-main manage" :style="{ height: pageHeight.height }">
+    <div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
-        <DeviceTree @node-click="nodeClick"></DeviceTree>
+        <DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
-        <div class="manage-right" v-if="deviceData" v-loading="loading">
+        <div class="device-manage-right" v-if="deviceData" >
             <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
                 <template #extra>
                     <el-button
@@ -39,8 +39,8 @@
                     lazy
                     :label="item.name"
                     :name="item.id"
-                    v-for="item in deviceData.dataSetList"
+                    v-for="(item,index) in deviceData.dataSetList"
-                    :key="item.id"
+                    :key="index"
                 ></el-tab-pane>
                 <div :style="{ height: tableHeight }" v-loading="tableLoading">
                     <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
@@ -64,7 +64,7 @@ defineOptions({
     name: 'govern/device/manage'
 })
 import MangePopup from './managePopup.vue'
-import DeviceTree from '@/components/tree/deviceTree.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'
@@ -74,7 +74,7 @@ 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 loading = ref(true)
 const tableLoading = ref(false)
 const getGroupLoading = ref(false)
 const deviceData = ref<any>(null)
@@ -82,7 +82,7 @@ const dataSet = ref('')
 const devTypeOptions = ref([])
 const devModelOptions = ref([])
 const tableData = ref([])
-const tableHeight = mainHeight(230).height
+const tableHeight = mainHeight(225).height
 const mangePopup = ref()
 const nodeClick = (e: anyObj) => {
     if (e.level == 2) {
@@ -103,10 +103,12 @@ const nodeClick = (e: anyObj) => {
 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 => {
@@ -159,7 +161,7 @@ const openGroup = () => {
 </script>
 
 <style lang="scss">
-.manage {
+.device-manage {
     display: flex;
 
     &-right {

src/views/govern/device/managePopup.vue

@@ -10,13 +10,11 @@
         </el-descriptions>
         <el-descriptions :title="'数据集名称: ' + popupData.dataSetName" size="small" :column="2" border>
             <template #extra>
-                <template v-if="newGroupVisible">
+                <div v-if="newGroupVisible" style="display: flex; align-items: center">
                     <el-input v-model="groupName" autocomplete="off" clearable placeholder="请输入分组名称"></el-input>
-                    <el-button class="mt10" type="primary" size="small" @click="newGroupVisible = false">
+                    <el-button class="ml10"  ctype="primary" size="small" @click="newGroupVisible = false">取消</el-button>
-                        取消
+                    <el-button class="ml10" type="primary" size="small" @click="addNewGroup">完成</el-button>
-                    </el-button>
+                </div>
-                    <el-button class="mt10 ml10" type="primary" size="small" @click="addNewGroup">完成</el-button>
-                </template>
                 <template v-else>
                     <el-button type="primary" size="small" @click="selectGroup">
                         {{ selectAll ? '取消全选' : '全选' }}
@@ -30,7 +28,7 @@
                 <template #default="{ node, data }">
                     <div class="group-tree-node">
                         <span>{{ node.label }}</span>
-                        <div v-if="node.level == 1" style="display: flex;align-items: center;">
+                        <div v-if="node.level == 1" style="display: flex; align-items: center">
                             <el-popconfirm :title="'确定删除' + node.label + '吗?'" @confirm="deleteGroup(node)">
                                 <template #reference>
                                     <Icon name="el-icon-Delete"></Icon>