设备监控弹框修改

src/views/govern/device/control/index.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading">
+    <div
+        class="default-main device-control"
+        :style="{ height: pageHeight.height }"
+        v-loading="loading"
+        style="position: relative"
+    >
         <PointTree @node-click="nodeClick" @init="nodeClick"></PointTree>
         <div class="device-control-right" v-if="deviceData">
             <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
@@ -128,16 +133,16 @@
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="formInline.total"
                 ></el-pagination>
-                <div v-else style="height: 42px;"></div>
+                <div v-else style="height: 42px"></div>
             </el-tabs>
         </div>
         <el-empty v-else description="请选择设备" class="device-control-right" />
-        <Popup ref="popupRef" />
+        <Detail ref="detailRef" :detail="detail" @close="detail = null" v-if="detail"></Detail>
     </div>
 </template>
 
 <script setup lang="ts">
-import Popup from './popup.vue'
+import Detail from './detail.vue'
 import PointTree from '@/components/tree/govern/pointTree.vue'
 import { mainHeight } from '@/utils/layout'
 import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
@@ -151,7 +156,6 @@ import DatePicker from '@/components/form/datePicker/index.vue'
 defineOptions({
     name: 'govern/device/control'
 })
-const popupRef = ref()
 const pageHeight = mainHeight(20)
 const loading = ref(true)
 const tableLoading = ref(false)
@@ -174,11 +178,12 @@ const formInline = reactive({
     id: '',
     lineId: ''
 })
+const detail = ref<any>(null)
 const getDeviceDataTrend = (e: any) => {
-    popupRef.value.open(e.name, {
-        ...e,
-        lineId: formInline.lineId
-    })
+    detail.value = {
+        lineId: formInline.lineId,
+        ...e
+    }
 }
 const pageChange = (e: number) => {
     formInline.pageNum = e