设备监控弹框修改

package.json

@@ -18,7 +18,7 @@
     "crypto-js": "^4.2.0",
     "echarts": "^5.4.3",
     "echarts4": "npm:echarts@^4.9.0",
-    "element-plus": "^2.4.4",
+    "element-plus": "^2.5.3",
     "html2canvas": "^1.4.1",
     "jquery": "^3.7.1",
     "lodash-es": "^4.17.21",

pnpm-lock.yaml

@@ -29,8 +29,8 @@ dependencies:
     specifier: npm:echarts@^4.9.0
     version: /echarts@4.9.0
   element-plus:
-    specifier: ^2.4.4
+    specifier: ^2.5.3
-    version: 2.4.4(vue@3.3.13)
+    version: 2.5.3(vue@3.3.13)
   html2canvas:
     specifier: ^1.4.1
     version: 1.4.1
@@ -401,7 +401,7 @@ packages:
       to-fast-properties: 2.0.0
 
   /@ctrl/tinycolor@3.6.1:
-    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==, tarball: https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz}
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
     engines: {node: '>=10'}
     dev: false
 
@@ -598,20 +598,20 @@ packages:
     optional: true
 
   /@floating-ui/core@1.5.2:
-    resolution: {integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==, tarball: https://registry.npmmirror.com/@floating-ui/core/-/core-1.5.2.tgz}
+    resolution: {integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==}
     dependencies:
       '@floating-ui/utils': 0.1.6
     dev: false
 
   /@floating-ui/dom@1.5.3:
-    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==, tarball: https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.5.3.tgz}
+    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
     dependencies:
       '@floating-ui/core': 1.5.2
       '@floating-ui/utils': 0.1.6
     dev: false
 
   /@floating-ui/utils@0.1.6:
-    resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==, tarball: https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.1.6.tgz}
+    resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: false
 
   /@fortawesome/fontawesome-free@6.5.1:
@@ -870,7 +870,7 @@ packages:
       undici-types: 5.26.5
 
   /@types/web-bluetooth@0.0.16:
-    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==, tarball: https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz}
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
     dev: false
 
   /@types/web-bluetooth@0.0.20:
@@ -1093,7 +1093,7 @@ packages:
     dev: false
 
   /@vueuse/core@9.13.0(vue@3.3.13):
-    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==, tarball: https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz}
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
@@ -1109,7 +1109,7 @@ packages:
     dev: false
 
   /@vueuse/metadata@9.13.0:
-    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==, tarball: https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz}
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
     dev: false
 
   /@vueuse/shared@10.7.0(vue@3.3.13):
@@ -1122,7 +1122,7 @@ packages:
     dev: false
 
   /@vueuse/shared@9.13.0(vue@3.3.13):
-    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==, tarball: https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz}
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
     dependencies:
       vue-demi: 0.14.6(vue@3.3.13)
     transitivePeerDependencies:
@@ -1346,7 +1346,7 @@ packages:
     dev: false
 
   /async-validator@4.2.5:
-    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==, tarball: https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz}
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
     dev: false
 
   /asynckit@0.4.0:
@@ -1490,7 +1490,7 @@ packages:
     dev: false
 
   /dayjs@1.11.10:
-    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==, tarball: https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz}
+    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
     dev: false
 
   /de-indent@1.0.2:
@@ -1539,8 +1539,8 @@ packages:
     resolution: {integrity: sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==}
     dev: true
 
-  /element-plus@2.4.4(vue@3.3.13):
+  /element-plus@2.5.3(vue@3.3.13):
-    resolution: {integrity: sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz}
+    resolution: {integrity: sha512-wmtstxaMkD6UinIgD+45CjrhbRh4u0vt+/GgxfPeMLt5pDpIVwZFjkUaVcWqqxcxd5a80HP3XlDF74fW7wim9A==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
@@ -1625,7 +1625,7 @@ packages:
     dev: true
 
   /escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==, tarball: https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz}
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
     dev: false
 
   /escape-string-regexp@1.0.5:
@@ -1855,7 +1855,7 @@ packages:
     dev: false
 
   /lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
-    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==, tarball: https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz}
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
     peerDependencies:
       '@types/lodash-es': '*'
       lodash: '*'
@@ -1921,7 +1921,7 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
 
   /memoize-one@6.0.0:
-    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==, tarball: https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz}
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
     dev: false
 
   /mime-db@1.52.0:
@@ -1980,7 +1980,7 @@ packages:
     engines: {node: '>=0.10.0'}
 
   /normalize-wheel-es@1.2.0:
-    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==, tarball: https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz}
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
     dev: false
 
   /nprogress@0.2.0:
@@ -2261,7 +2261,7 @@ packages:
   /use-element-plus-theme@0.0.5(@types/node@20.10.5)(typescript@5.3.3)(vite@5.0.10):
     resolution: {integrity: sha512-YktH5VbVqsT/lYTxx60KeqS5AZgDMEdDChsI2NxxcVkCOOgmkrM/yQVxxItWYhTJti3YxodM5SM89Vv1timIsA==}
     dependencies:
-      element-plus: 2.4.4(vue@3.3.13)
+      element-plus: 2.5.3(vue@3.3.13)
       vite-plugin-dts: 3.7.0(@types/node@20.10.5)(typescript@5.3.3)(vite@5.0.10)
       vue: 3.3.13(typescript@5.3.3)
     transitivePeerDependencies:

src/styles/app.scss

@@ -312,4 +312,21 @@ body,
     padding: 13px 15px;
     align-items: center;
     border: 1px solid var(--el-border-color);
+    .title {
+        flex: 1;
+        font-weight: 700;
+    }
+    .el-form-item {
+        margin-bottom: 0 !important;
+    }
+}
+
+.child-router {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: #fff;
+    z-index: 2;
 }

src/styles/element.scss

@@ -121,3 +121,11 @@
 .el-tabs--border-card > .el-tabs__content {
     padding: 10px;
 }
+
+.el-page-header__header {
+    line-height: 32px;
+    .el-page-header__content {
+        font-size: 14px;
+        font-weight: 700;
+    }
+}

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">
+    <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" v-if="dialogVisible"></DatePicker>
+                    <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>
-        <MyEchart :options="echartsData" v-if="echartsData" style="flex: 1" />
+        </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('')
+onMounted(() => {
-const open = (text: string, data?: anyObj) => {
-    title.value = text
-    popupData.value = data
-    dialogVisible.value = true
-    nextTick(() => {
     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 {
+.device-control-detail{
-    .el-dialog__body {
+    padding-bottom: 10px;
-        padding-bottom: 20px;
     display: flex;
     flex-direction: column;
 }
-}
 </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, {
+    detail.value = {
-        ...e,
+        lineId: formInline.lineId,
-        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">
+                <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' />