Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备监控弹框修改

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

17
src/styles/app.scss
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;
}

122
src/styles/element.scss
View File

@@ -1,123 +1,131 @@
/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-s */
.el-input .el-input__inner {
height: 30px;
line-height: calc(var(--el-input-height, 40px) - 4px);
height: 30px;
line-height: calc(var(--el-input-height, 40px) - 4px);
}
/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-e */
.datetime-picker {
height: 32px;
padding-top: 0;
padding-bottom: 0;
height: 32px;
padding-top: 0;
padding-bottom: 0;
}
.el-divider__text.is-center {
transform: translateX(-50%) translateY(-62%);
transform: translateX(-50%) translateY(-62%);
}
.el-menu {
user-select: none;
user-select: none;
.el-menu-item:hover,
.el-sub-menu__title:hover {
background-color: var(--el-menu-hover-color) !important;
color: var(--el-menu-active-color) !important;
.el-menu-item:hover,
.el-sub-menu__title:hover {
background-color: var(--el-menu-hover-color) !important;
color: var(--el-menu-active-color) !important;
.icon {
color: var(--el-menu-active-color) !important;
.icon {
color: var(--el-menu-active-color) !important;
}
}
}
}
.el-dialog__header {
background: var(--el-color-primary);
margin-right: 0;
background: var(--el-color-primary);
margin-right: 0;
.el-dialog__headerbtn {
.el-icon {
color: var(--el-color-white);
.el-dialog__headerbtn {
.el-icon {
color: var(--el-color-white);
}
}
}
.el-dialog__title {
color: var(--el-color-white);
}
.el-dialog__title {
color: var(--el-color-white);
}
}
.el-table {
--el-table-border-color: var(--ba-border-color);
--el-table-border-color: var(--ba-border-color);
}
.el-card {
border: none;
border: none;
}
.el-card__header {
border-bottom: 1px solid var(--el-border-color-extra-light);
border-bottom: 1px solid var(--el-border-color-extra-light);
}
.el-textarea__inner {
padding: 5px 11px;
padding: 5px 11px;
}
.el-dialog__body {
padding: 10px;
padding: 10px;
}
/* dialog滚动条-s */
.el-overlay-dialog,
.el-tabs__content,
.ba-scroll-style {
scrollbar-width: none;
scrollbar-width: none;
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-thumb {
background: #eaeaea;
border-radius: var(--el-border-radius-base);
box-shadow: none;
-webkit-box-shadow: none;
}
&:hover {
&::-webkit-scrollbar-thumb:hover {
background: #c8c9cc;
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-thumb {
background: #eaeaea;
border-radius: var(--el-border-radius-base);
box-shadow: none;
-webkit-box-shadow: none;
}
&:hover {
&::-webkit-scrollbar-thumb:hover {
background: #c8c9cc;
}
}
}
}
/* dialog滚动条-e */
/* 小屏设备 el-radio-group 样式优化-s */
.ba-input-item-radio {
margin-bottom: 10px;
margin-bottom: 10px;
.el-radio-group {
.el-radio {
margin-bottom: 8px;
.el-radio-group {
.el-radio {
margin-bottom: 8px;
}
}
}
}
/* 小屏设备 el-radio-group 样式调整-e */
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
background: var(--el-color-primary);
color: var(--el-color-white);
background: var(--el-color-primary);
color: var(--el-color-white);
}
.el-tabs__header {
margin-bottom: 0;
margin-bottom: 0;
}
.el-form--inline .el-form-item {
margin-bottom: 10px;
margin-bottom: 10px;
}
.el-tabs--border-card>.el-tabs__content{
padding: 10px;
}
.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;
}
}

2
src/views/auth/audit/index.vue
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" />

2
src/views/auth/menu/api.vue
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"

2
src/views/auth/menu/menu.vue
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"

2
src/views/auth/role/index.vue
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" />

73
src/views/govern/device/control/popup.vue → src/views/govern/device/control/detail.vue
View File

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

23
src/views/govern/device/control/index.vue
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

2
src/views/govern/user/roleCode/index.vue
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" />

24
src/views/setting/dictionary/list/detail.vue
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">
<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>

2
src/views/setting/dictionary/tree/index.vue
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' />