设备监控弹框修改

This commit is contained in:
仲么了
2024-02-01 16:19:28 +08:00
parent 5bc06899d7
commit a146bba7a1
13 changed files with 171 additions and 140 deletions

View File

@@ -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",

38
pnpm-lock.yaml generated
View File

@@ -29,8 +29,8 @@ dependencies:
specifier: npm:echarts@^4.9.0
version: /echarts@4.9.0
element-plus:
specifier: ^2.4.4
version: 2.4.4(vue@3.3.13)
specifier: ^2.5.3
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):
resolution: {integrity: sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz}
/element-plus@2.5.3(vue@3.3.13):
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:

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

@@ -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" />

View File

@@ -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"

View File

@@ -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"

View File

@@ -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" />

View File

@@ -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('')
const open = (text: string, data?: anyObj) => {
title.value = text
popupData.value = data
dialogVisible.value = true
nextTick(() => {
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;
.device-control-detail{
padding-bottom: 10px;
display: flex;
flex-direction: column;
}
}
</style>

View File

@@ -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

View File

@@ -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" />

View File

@@ -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>

View File

@@ -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' />