设备监控弹框修改

src/views/auth/audit/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="default-main">
         <div class="custom-table-header">
-            <div style="flex: 1; font-weight: 700">待审核用户</div>
+            <div class="title">待审核用户</div>
             <el-button :icon="Check" type="primary" @click="addRole" class="ml10">审核通过</el-button>
         </div>
         <Table ref="tableRef"  />

src/views/auth/menu/api.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="custom-table-header">
-            <div style="flex: 1; font-weight: 700">接口权限列表</div>
+            <div class="title">接口权限列表</div>
             <el-input
                 v-model="tableStore.table.params.searchValue"
                 style="width: 240px"

src/views/auth/menu/menu.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="custom-table-header">
-            <div style="flex: 1; font-weight: 700">菜单列表</div>
+            <div class="title">菜单列表</div>
             <el-input
                 v-model="tableStore.table.params.searchValue"
                 style="width: 240px"

src/views/auth/role/index.vue

@@ -2,7 +2,7 @@
     <div class="default-main" style="display: flex" :style="{ height: height }">
         <div style="flex: 1; overflow: hidden">
             <div class="custom-table-header">
-                <div style="flex: 1; font-weight: 700">角色列表</div>
+                <div class="title">角色列表</div>
                 <el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
             </div>
             <Table ref="tableRef" @currentChange="currentChange" />

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

@@ -1,24 +1,42 @@
 <template>
-    <el-dialog class="cn-operate-dialog control-popup" v-model="dialogVisible" :title="title">
-        <el-form :inline="true">
-            <el-form-item label="日期">
-                <DatePicker ref="datePickerRef" v-if="dialogVisible"></DatePicker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-Search" @click="init">查询</el-button>
-            </el-form-item>
-        </el-form>
-        <MyEchart :options="echartsData" v-if="echartsData" style="flex: 1" />
+    <div class="device-control-detail child-router">
+        <div class="custom-table-header">
+            <el-form :inline="true">
+                <el-form-item label="">
+                    <el-page-header @back="$emit('close')">
+                        <template #content>
+                            <span class="text-large font-600 mr-3">{{ props.detail.name }}</span>
+                        </template>
+                    </el-page-header>
+                </el-form-item>
+                <el-form-item label="日期">
+                    <DatePicker ref="datePickerRef"></DatePicker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-Search" @click="init">查询</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <MyEchart :options="echartsData" v-if="echartsData" style="flex: 1" class="mt10" />
         <el-empty description="暂无数据" v-else style="flex: 1" v-loading="loading"></el-empty>
-    </el-dialog>
+    </div>
 </template>
 <script lang="ts" setup>
-import { ref, inject, nextTick } from 'vue'
+import { ref, inject, nextTick, onMounted } from 'vue'
 import { reactive } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { install$5 } from 'echarts/types/dist/shared'
+
+interface Props {
+    detail: anyObj
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    detail: () => {
+        return {}
+    }
+})
 const datePickerRef = ref()
 const form: any = reactive({
     code: '',
@@ -33,26 +51,19 @@ const form: any = reactive({
     type: 0
 })
 const echartsData = ref<any>(null)
-const popupData = ref<any>(null)
 const dialogVisible = ref(false)
 const loading = ref(true)
-const title = ref('')
-const open = (text: string, data?: anyObj) => {
-    title.value = text
-    popupData.value = data
-    dialogVisible.value = true
-    nextTick(() => {
-        init()
-    })
-}
+onMounted(() => {
+    init()
+})
 const init = () => {
     echartsData.value = null
     loading.value = true
     getDeviceDataTrend({
         endTime: datePickerRef.value.timeValue[1],
-        lineId: popupData.value.lineId,
+        lineId: props.detail.lineId,
         startTime: datePickerRef.value.timeValue[0],
-        statisticalParams: popupData.value.children
+        statisticalParams: props.detail.children
     }).then(res => {
         if (res.data.length && res.data[0].length) {
             let arr: any[] = []
@@ -135,11 +146,9 @@ const init = () => {
 defineExpose({ open })
 </script>
 <style lang="scss">
-.control-popup {
-    .el-dialog__body {
-        padding-bottom: 20px;
-        display: flex;
-        flex-direction: column;
-    }
+.device-control-detail{
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
 }
-</style>
+</style>

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

src/views/govern/user/roleCode/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="default-main">
         <div class="custom-table-header">
-            <div style="flex: 1; font-weight: 700">角色推荐码</div>
+            <div class="title">角色推荐码</div>
             <el-button :icon="Refresh" type="primary" @click="refresh">刷新推荐码</el-button>
         </div>
         <Table ref="tableRef" />

src/views/setting/dictionary/list/detail.vue

@@ -1,12 +1,14 @@
 <template>
-    <div class="dictiontary-list-detail">
+    <div class="dictiontary-list-detail child-router">
         <TableHeader>
             <template #select>
-                <el-page-header @back="$emit('close')" style="display: flex; align-items: center; height: 32px">
-                    <template #content>
-                        <span class="text-large font-600 mr-3">{{ props.detail.name }}详情信息</span>
-                    </template>
-                </el-page-header>
+                <el-form-item label="">
+                    <el-page-header @back="$emit('close')">
+                        <template #content>
+                            <span class="text-large font-600 mr-3">{{ props.detail.name }}详情信息</span>
+                        </template>
+                    </el-page-header>
+                </el-form-item>
                 <el-form-item label="过滤筛选">
                     <el-input
                         style="width: 240px"
@@ -149,13 +151,3 @@ const add = () => {
     })
 }
 </script>
-<style lang="scss">
-.dictiontary-list-detail {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background: #fff;
-}
-</style>

src/views/setting/dictionary/tree/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class='default-main'>
         <div class='custom-table-header'>
-            <div style='flex: 1; font-weight: 700'>字典树列表</div>
+            <div class="title">字典树列表</div>
             <el-button :icon='Plus' type='primary' @click='addMenu'>新增字典类型</el-button>
         </div>
         <Table ref='tableRef' />