From 59261ef4f17852eaebe3c0fe71f9b13a2d0243f9 Mon Sep 17 00:00:00 2001 From: fuguobin Date: Thu, 14 Sep 2023 17:36:57 +0800 Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/index.scss | 8 + src/types/auto-imports.d.ts | 2 + src/views/monitoring/components/header.vue | 9 +- src/views/monitoring/components/menu.vue | 209 +++++++++++------- src/views/monitoring/devicemanage/index.scss | 76 +++++-- .../monitoring/screen/components/main.vue | 75 ++++--- .../monitoring/screen/components/showTree.vue | 19 +- src/views/monitoring/screen/index.scss | 65 +++++- vite.config.ts | 4 +- 9 files changed, 319 insertions(+), 148 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 0b40bab..dcce559 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -164,4 +164,12 @@ .el-overlay{ z-index: 99999 !important; +} + +.el-notification{ + border: none !important; + background-color: #0f2856 !important; + .el-notification__content{ + color: #eee !important; + } } \ No newline at end of file diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index e21443a..5742656 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -5,6 +5,7 @@ declare global { const ElForm: typeof import('element-plus/es')['ElForm'] const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] + const ElNotification: typeof import('element-plus/es')['ElNotification'] const NEllipsis: typeof import('naive-ui')['NEllipsis'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] const autoResetRef: typeof import('@vueuse/core')['autoResetRef'] @@ -275,6 +276,7 @@ declare module 'vue' { readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef + readonly ElNotification: UnwrapRef readonly NEllipsis: UnwrapRef readonly asyncComputed: UnwrapRef readonly autoResetRef: UnwrapRef diff --git a/src/views/monitoring/components/header.vue b/src/views/monitoring/components/header.vue index 0eb97aa..c640890 100644 --- a/src/views/monitoring/components/header.vue +++ b/src/views/monitoring/components/header.vue @@ -187,7 +187,14 @@ function returnBack() { } function waringClick() { //点击报警按钮 - waringDrawer.value = true + if (waringData.value.length === 0) { + ElNotification({ + message: '暂没有报警信息！', + type: 'info', + }) + } else { + waringDrawer.value = true + } } // function getWeatherData() { diff --git a/src/views/monitoring/components/menu.vue b/src/views/monitoring/components/menu.vue index a310c5a..0151b7e 100644 --- a/src/views/monitoring/components/menu.vue +++ b/src/views/monitoring/components/menu.vue @@ -1,7 +1,9 @@ diff --git a/src/views/monitoring/screen/index.scss b/src/views/monitoring/screen/index.scss index a3ca302..fca08ed 100644 --- a/src/views/monitoring/screen/index.scss +++ b/src/views/monitoring/screen/index.scss @@ -7,7 +7,7 @@ background: url(@/assets/images/screen.png) no-repeat; // background-color: var(--tableBg); background-size: 100% 100%; - // background-color: rgba(0, 0, 0, 0.5); + // background-color: rgba(29,30,31,0.8); // background-blend-mode: multiply; padding: 0 25px; overflow: hidden; @@ -318,7 +318,8 @@ --vxe-table-header-background-color: none; --vxe-table-body-background-color: none; --vxe-table-footer-background-color: none; - --vxe-table-border-color: none; + --vxe-table-border-color: rgba(12, 80, 166, 0.3); + // --vxe-table-border-color: none; --vxe-font-color: #5beff9; --vxe-table-header-font-color: #ffffffb3; border: 1px solid #0D55B0; @@ -336,6 +337,10 @@ color: #eee; border: 1px solid rgba(12, 80, 166, 1) !important; border-left: none !important; + + .vxe-resizable.is--line:before { + content: none + } } // .headerCellClass:nth-child(1){ @@ -356,11 +361,12 @@ font-family: 'AlibabaPuHuiTiRegular'; color: #B1E3FF; - .title{ + .title { display: flex; align-items: center; text-align: left; - .svg-icon{ + + .svg-icon { flex-shrink: 0; } } @@ -377,6 +383,10 @@ color: red; } + .cellEdit { + cursor: pointer; + } + .iconfont { font-size: 18px; } @@ -392,6 +402,7 @@ .iconfont.icon-edit-icon { font-size: 16px; margin-left: 5px; + cursor: pointer; } } } @@ -537,14 +548,12 @@ } /*滚动条整体部分*/ - .sidebar::-webkit-scrollbar, .tableGrid ::-webkit-scrollbar { width: 8px; height: 8px; } /*滚动条的轨道*/ - .sidebar::-webkit-scrollbar-track, .tableGrid ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 8px; @@ -553,7 +562,6 @@ } /*滚动条里面的小方块，能向上向下移动*/ - .sidebar::-webkit-scrollbar-thumb, .tableGrid ::-webkit-scrollbar-thumb { background-color: rgb(147, 147, 153, 0.5); -webkit-border-radius: 8px; @@ -561,18 +569,15 @@ border-radius: 8px; } - .sidebar::-webkit-scrollbar-thumb:hover, .tableGrid ::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; } - .sidebar::-webkit-scrollbar-thumb:active, .tableGrid :-webkit-scrollbar-thumb:active { background-color: #787878; } /*边角，即两个滚动条的交汇处*/ - .sidebar::-webkit-scrollbar-corner, .tableGrid ::-webkit-scrollbar-corner { background-color: transparent; } @@ -601,4 +606,42 @@ } } -// } \ No newline at end of file +// } + +.dark { + .screen { + background-color: rgba(29, 30, 31, 0.8); + background-blend-mode: multiply; + + .layout { + + .sidebar { + background-color: rgba(29, 30, 31, 0.8); + } + + .main { + background-color: rgba(29, 30, 31, 0.8); + .mainTable { + .tableGrid { + :deep(.vxe-table) { + .vxe-table--fixed-left-wrapper.scrolling--middle { + background: -webkit-linear-gradient(top, rgba(21, 21, 25, 1) 0%, rgba(21, 21, 25, 1) 100%); + box-shadow: inset 0px 0px 10px rgb(36, 90, 124) !important; + } + } + } + } + } + + .infoPanel { + :deep(.swiper) { + .item { + .content { + background-color: rgba(29, 30, 31, 0.8); + } + } + } + } + } + } +} \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 362fce0..7d27a61 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -45,9 +45,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { hmr: true,//配置HMR proxy: { [env.VITE_APP_BASE_API]: { - target: 'http://172.1.2.106:9000/',//本地接口地址 + // target: 'http://172.1.2.106:9000/',//本地接口地址 // target: 'http://172.1.2.48:9000/',//本地接口地址 - // target: 'http://board.heatiot.cn:8001/prod-api/',//线上接口地址 + target: 'http://board.heatiot.cn:8001/prod-api/',//线上接口地址 changeOrigin: true, rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')