From de1de0e73bd260cb1babe7b15c9e943a381009de Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期五, 21 三月 2025 17:22:26 +0800
Subject: [PATCH] feat:增加温度系统界面
---
src/assets/styles/index.scss | 9
src/views/screen/flow/report/index.vue | 37
src/assets/styles/element-ui.scss | 4
src/components/Table/index.vue | 26
src/layout/components/TagsView/index.vue | 2
src/views/screen/temperature/statics/index.vue | 273 +++++++++++
/dev/null | 1
src/views/system/user/index.vue | 2
index.html | 4
src/views/screen/flow/warning/index.vue | 155 +++++-
src/api/screen/warning/index.js | 27 +
src/components/TopNav/index.vue | 2
src/layout/components/AppMain.vue | 2
src/views/screen/temperature/monitor/index.vue | 360 ++++++++++++++
src/views/screen/temperature/shebei/index.vue | 350 ++++++++++++++
src/utils/index.js | 12
src/views/screen/temperature/report/index.vue | 112 ++++
src/views/screen/temperature/graphic/index.vue | 62 ++
18 files changed, 1,360 insertions(+), 80 deletions(-)
diff --git a/index.html b/index.html
index e6a3153..8fb942e 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,6 @@
height: 100%;
margin: 0;
padding: 0;
- //控制初始字体大小
- @media(min-width: 1921px) and (max-width: 3840px) {
- font-size: 32px;
- }
}
.chromeframe {
diff --git a/src/api/screen/warning/index.js b/src/api/screen/warning/index.js
new file mode 100644
index 0000000..ecc37d6
--- /dev/null
+++ b/src/api/screen/warning/index.js
@@ -0,0 +1,27 @@
+import {publicRequest} from '@/utils/request'
+
+
+/**
+ * 报警历史数据
+ * @param data 搜索分页数据
+ */
+export const warnHistory = (data) => {
+ return publicRequest({
+ url: '/alarmHistory/search',
+ method: 'post',
+ data
+ })
+}
+
+/**
+ * 报警历史数据导出
+ * @param data 搜索分页数据
+ */
+export const exportWarnHistory = (params) => {
+ return publicRequest({
+ url: '/alarmHistory/exportExcel',
+ method: 'get',
+ params,
+ responseType: 'blob'
+ })
+}
\ No newline at end of file
diff --git a/src/assets/styles/element-ui.css b/src/assets/styles/element-ui.css
deleted file mode 100644
index 85596a9..0000000
--- a/src/assets/styles/element-ui.css
+++ /dev/null
@@ -1,82 +0,0 @@
-.el-dialog {
- min-width: 45vw;
-}
-
-.el-dialog .el-form {
- margin-top: 20px;
-}
-
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
- font-weight: 400 !important;
-}
-
-.el-upload input[type="file"] {
- display: none !important;
-}
-
-.el-upload__input {
- display: none;
-}
-
-.cell .el-tag {
- margin-right: 0px;
-}
-
-.small-padding .cell {
- padding-left: 5px;
- padding-right: 5px;
-}
-
-.fixed-width .el-button--mini {
- padding: 7px 10px;
- width: 60px;
-}
-
-.status-col .cell {
- padding: 0 10px;
- text-align: center;
-}
-
-.status-col .cell .el-tag {
- margin-right: 0px;
-}
-
-.el-dialog {
- border-radius: 10px;
- background-color: #f4f7fa;
- min-height: 40vh;
-}
-
-.upload-container .el-upload {
- width: 100%;
-}
-
-.upload-container .el-upload .el-upload-dragger {
- width: 100%;
- height: 200px;
-}
-
-.el-dropdown-menu a {
- display: block;
-}
-
-.el-range-editor.el-input__inner {
- display: inline-flex !important;
-}
-
-.el-range-separator {
- box-sizing: content-box;
-}
-
-.el-menu--collapse
-> div
-> .el-submenu
-> .el-submenu__title
-.el-submenu__icon-arrow {
- display: none;
-}
-
-.el-dropdown .el-dropdown-link {
- color: var(--el-color-primary) !important;
-}
diff --git a/src/assets/styles/element-ui.min.css b/src/assets/styles/element-ui.min.css
deleted file mode 100644
index f9dabe8..0000000
--- a/src/assets/styles/element-ui.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.el-dialog{min-width:45vw}.el-dialog .el-form{margin-top:20px}.el-breadcrumb__inner,.el-breadcrumb__inner a{font-weight:400 !important}.el-upload input[type="file"]{display:none !important}.el-upload__input{display:none}.cell .el-tag{margin-right:0px}.small-padding .cell{padding-left:5px;padding-right:5px}.fixed-width .el-button--mini{padding:7px 10px;width:60px}.status-col .cell{padding:0 10px;text-align:center}.status-col .cell .el-tag{margin-right:0px}.el-dialog{border-radius:10px;background-color:#f4f7fa;min-height:40vh}.upload-container .el-upload{width:100%}.upload-container .el-upload .el-upload-dragger{width:100%;height:200px}.el-dropdown-menu a{display:block}.el-range-editor.el-input__inner{display:inline-flex !important}.el-range-separator{box-sizing:content-box}.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}.el-dropdown .el-dropdown-link{color:var(--el-color-primary) !important}
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index ba77f4e..996c04a 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -1,9 +1,6 @@
// cover some element-ui styles
-.el-dialog{
- min-width:45vw;
-}
.el-dialog__body{
overflow-y: auto;
max-height: 70vh;
@@ -58,7 +55,6 @@
.el-dialog {
border-radius: 10px;
background-color: rgb(244, 247, 250);
- min-height:40vh;
}
// refine element ui upload
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
deleted file mode 100644
index 3580123..0000000
--- a/src/assets/styles/index.css
+++ /dev/null
@@ -1,984 +0,0 @@
-@charset "UTF-8";
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
-:export {
- menuColor: #bfcbd9;
- menuLightColor: rgba(0, 0, 0, 0.7);
- menuColorActive: #f4f4f5;
- menuBackground: #2C3443;
- menuLightBackground: #ffffff;
- subMenuBackground: #1f2d3d;
- subMenuHover: #001528;
- sideBarWidth: 200px;
- logoTitleColor: #ffffff;
- logoLightTitleColor: #001529;
- primaryColor: #409EFF;
- successColor: #67C23A;
- dangerColor: #F56C6C;
- infoColor: #909399;
- warningColor: #E6A23C;
-}
-
-/* fade */
-.fade-enter-active,
-.fade-leave-active {
- transition: opacity 0.28s;
-}
-
-.fade-enter,
-.fade-leave-active {
- opacity: 0;
-}
-
-/* fade-transform */
-.fade-transform--move,
-.fade-transform-leave-active,
-.fade-transform-enter-active {
- transition: all .5s;
-}
-
-.fade-transform-enter {
- opacity: 0;
- transform: translateX(-30px);
-}
-
-.fade-transform-leave-to {
- opacity: 0;
- transform: translateX(30px);
-}
-
-/* breadcrumb transition */
-.breadcrumb-enter-active,
-.breadcrumb-leave-active {
- transition: all .5s;
-}
-
-.breadcrumb-enter,
-.breadcrumb-leave-active {
- opacity: 0;
- transform: translateX(20px);
-}
-
-.breadcrumb-move {
- transition: all .5s;
-}
-
-.breadcrumb-leave-active {
- position: absolute;
-}
-
-.el-dialog {
- min-width: 45vw;
-}
-
-.el-dialog .el-form {
- margin-top: 20px;
-}
-
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
- font-weight: 400 !important;
-}
-
-.el-upload input[type="file"] {
- display: none !important;
-}
-
-.el-upload__input {
- display: none;
-}
-
-.cell .el-tag {
- margin-right: 0px;
-}
-
-.small-padding .cell {
- padding-left: 5px;
- padding-right: 5px;
-}
-
-.fixed-width .el-button--mini {
- padding: 7px 10px;
- width: 60px;
-}
-
-.status-col .cell {
- padding: 0 10px;
- text-align: center;
-}
-
-.status-col .cell .el-tag {
- margin-right: 0px;
-}
-
-.el-dialog {
- border-radius: 10px;
- background-color: #f4f7fa;
- min-height: 40vh;
-}
-
-.upload-container .el-upload {
- width: 100%;
-}
-
-.upload-container .el-upload .el-upload-dragger {
- width: 100%;
- height: 200px;
-}
-
-.el-dropdown-menu a {
- display: block;
-}
-
-.el-range-editor.el-input__inner {
- display: inline-flex !important;
-}
-
-.el-range-separator {
- box-sizing: content-box;
-}
-
-.el-menu--collapse
-> div
-> .el-submenu
-> .el-submenu__title
-.el-submenu__icon-arrow {
- display: none;
-}
-
-.el-dropdown .el-dropdown-link {
- color: var(--el-color-primary) !important;
-}
-
-#app .main-container {
- height: 100%;
- transition: margin-left .28s;
- margin-left: 200px;
- position: relative;
-}
-
-#app .sidebarHide {
- margin-left: 0 !important;
-}
-
-#app .sidebar-container {
- -webkit-transition: width .28s;
- transition: width 0.28s;
- width: 200px !important;
- background-color: #2C3443;
- height: 100%;
- position: fixed;
- font-size: 0px;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 1001;
- overflow: hidden;
- -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
- box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-}
-
-#app .sidebar-container .horizontal-collapse-transition {
- transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-}
-
-#app .sidebar-container .scrollbar-wrapper {
- overflow-x: hidden !important;
-}
-
-#app .sidebar-container .el-scrollbar__bar.is-vertical {
- right: 0px;
-}
-
-#app .sidebar-container .el-scrollbar {
- height: 100%;
-}
-
-#app .sidebar-container.has-logo .el-scrollbar {
- height: calc(100% - 50px);
-}
-
-#app .sidebar-container .is-horizontal {
- display: none;
-}
-
-#app .sidebar-container a {
- display: inline-block;
- width: 100%;
- overflow: hidden;
-}
-
-#app .sidebar-container .svg-icon {
- margin-right: 16px;
-}
-
-#app .sidebar-container .el-menu {
- border: none;
- height: 100%;
- width: 100% !important;
-}
-
-#app .sidebar-container .el-menu-item, #app .sidebar-container .menu-title {
- overflow: hidden !important;
- text-overflow: ellipsis !important;
- white-space: nowrap !important;
-}
-
-#app .sidebar-container .el-menu-item .el-menu-tooltip__trigger {
- display: inline-block !important;
-}
-
-#app .sidebar-container .sub-menu-title-noDropdown:hover,
-#app .sidebar-container .el-sub-menu__title:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
-}
-
-#app .sidebar-container .theme-dark .is-active > .el-sub-menu__title {
- color: #f4f4f5 !important;
-}
-
-#app .sidebar-container .nest-menu .el-sub-menu > .el-sub-menu__title,
-#app .sidebar-container .el-sub-menu .el-menu-item {
- min-width: 200px !important;
-}
-
-#app .sidebar-container .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
-#app .sidebar-container .el-sub-menu .el-menu-item:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
-}
-
-#app .sidebar-container .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
-#app .sidebar-container .theme-dark .el-sub-menu .el-menu-item {
- background-color: #1f2d3d !important;
-}
-
-#app .sidebar-container .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
-#app .sidebar-container .theme-dark .el-sub-menu .el-menu-item:hover {
- background-color: #001528 !important;
-}
-
-#app .hideSidebar .sidebar-container {
- width: 54px !important;
-}
-
-#app .hideSidebar .main-container {
- margin-left: 54px;
-}
-
-#app .hideSidebar .sub-menu-title-noDropdown {
- padding: 0 !important;
- position: relative;
-}
-
-#app .hideSidebar .sub-menu-title-noDropdown .el-tooltip {
- padding: 0 !important;
-}
-
-#app .hideSidebar .sub-menu-title-noDropdown .el-tooltip .svg-icon {
- margin-left: 20px;
-}
-
-#app .hideSidebar .el-sub-menu {
- overflow: hidden;
-}
-
-#app .hideSidebar .el-sub-menu > .el-sub-menu__title {
- padding: 0 !important;
-}
-
-#app .hideSidebar .el-sub-menu > .el-sub-menu__title .svg-icon {
- margin-left: 20px;
-}
-
-#app .hideSidebar .el-menu--collapse .el-sub-menu > .el-sub-menu__title > span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
-}
-
-#app .hideSidebar .el-menu--collapse .el-sub-menu > .el-sub-menu__title > i {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
-}
-
-#app .el-menu--collapse .el-menu .el-sub-menu {
- min-width: 200px !important;
-}
-
-#app .mobile .main-container {
- margin-left: 0px;
-}
-
-#app .mobile .sidebar-container {
- transition: transform .28s;
- width: 200px !important;
-}
-
-#app .mobile.hideSidebar .sidebar-container {
- pointer-events: none;
- transition-duration: 0.3s;
- transform: translate3d(-200px, 0, 0);
-}
-
-#app .withoutAnimation .main-container,
-#app .withoutAnimation .sidebar-container {
- transition: none;
-}
-
-.el-menu--vertical > .el-menu .svg-icon {
- margin-right: 16px;
-}
-
-.el-menu--vertical .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
-.el-menu--vertical .el-menu-item:hover {
- background-color: rgba(0, 0, 0, 0.06) !important;
-}
-
-.el-menu--vertical > .el-menu--popup {
- max-height: 100vh;
- overflow-y: auto;
-}
-
-.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-track-piece {
- background: #d3dce6;
-}
-
-.el-menu--vertical > .el-menu--popup::-webkit-scrollbar {
- width: 6px;
-}
-
-.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-thumb {
- background: #99a9bf;
- border-radius: 20px;
-}
-
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
-:export {
- menuColor: #bfcbd9;
- menuLightColor: rgba(0, 0, 0, 0.7);
- menuColorActive: #f4f4f5;
- menuBackground: #2C3443;
- menuLightBackground: #ffffff;
- subMenuBackground: #1f2d3d;
- subMenuHover: #001528;
- sideBarWidth: 200px;
- logoTitleColor: #ffffff;
- logoLightTitleColor: #001529;
- primaryColor: #409EFF;
- successColor: #67C23A;
- dangerColor: #F56C6C;
- infoColor: #909399;
- warningColor: #E6A23C;
-}
-
-.blue-btn {
- background: #2C3443;
-}
-
-.blue-btn:hover {
- color: #2C3443;
-}
-
-.blue-btn:hover:before, .blue-btn:hover:after {
- background: #2C3443;
-}
-
-.light-blue-btn {
- background: #3A71A8;
-}
-
-.light-blue-btn:hover {
- color: #3A71A8;
-}
-
-.light-blue-btn:hover:before, .light-blue-btn:hover:after {
- background: #3A71A8;
-}
-
-.red-btn {
- background: #C03639;
-}
-
-.red-btn:hover {
- color: #C03639;
-}
-
-.red-btn:hover:before, .red-btn:hover:after {
- background: #C03639;
-}
-
-.pink-btn {
- background: #E65D6E;
-}
-
-.pink-btn:hover {
- color: #E65D6E;
-}
-
-.pink-btn:hover:before, .pink-btn:hover:after {
- background: #E65D6E;
-}
-
-.green-btn {
- background: #30B08F;
-}
-
-.green-btn:hover {
- color: #30B08F;
-}
-
-.green-btn:hover:before, .green-btn:hover:after {
- background: #30B08F;
-}
-
-.tiffany-btn {
- background: #4AB7BD;
-}
-
-.tiffany-btn:hover {
- color: #4AB7BD;
-}
-
-.tiffany-btn:hover:before, .tiffany-btn:hover:after {
- background: #4AB7BD;
-}
-
-.yellow-btn {
- background: #FEC171;
-}
-
-.yellow-btn:hover {
- color: #FEC171;
-}
-
-.yellow-btn:hover:before, .yellow-btn:hover:after {
- background: #FEC171;
-}
-
-.pan-btn {
- font-size: 14px;
- color: #fff;
- padding: 14px 36px;
- border-radius: 8px;
- border: none;
- outline: none;
- transition: 600ms ease all;
- position: relative;
- display: inline-block;
-}
-
-.pan-btn:hover {
- background: #fff;
-}
-
-.pan-btn:hover:before, .pan-btn:hover:after {
- width: 100%;
- transition: 600ms ease all;
-}
-
-.pan-btn:before, .pan-btn:after {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- height: 2px;
- width: 0;
- transition: 400ms ease all;
-}
-
-.pan-btn::after {
- right: inherit;
- top: inherit;
- left: 0;
- bottom: 0;
-}
-
-.custom-button {
- display: inline-block;
- line-height: 1;
- white-space: nowrap;
- cursor: pointer;
- background: #fff;
- color: #fff;
- -webkit-appearance: none;
- text-align: center;
- box-sizing: border-box;
- outline: 0;
- margin: 0;
- padding: 10px 15px;
- font-size: 14px;
- border-radius: 4px;
-}
-
-/**
- * 通用css样式布局处理
- * Copyright (c) 2019 ruoyi
- */
-/** 基础通用 **/
-.pt5 {
- padding-top: 5px;
-}
-
-.pr5 {
- padding-right: 5px;
-}
-
-.pb5 {
- padding-bottom: 5px;
-}
-
-.mt5 {
- margin-top: 5px;
-}
-
-.mr5 {
- margin-right: 5px;
-}
-
-.mb5 {
- margin-bottom: 5px;
-}
-
-.mb8 {
- margin-bottom: 8px;
-}
-
-.ml5 {
- margin-left: 5px;
-}
-
-.mt10 {
- margin-top: 10px;
-}
-
-.mr10 {
- margin-right: 10px;
-}
-
-.mb10 {
- margin-bottom: 10px;
-}
-
-.ml10 {
- margin-left: 10px;
-}
-
-.mt20 {
- margin-top: 20px;
-}
-
-.mr20 {
- margin-right: 20px;
-}
-
-.mb20 {
- margin-bottom: 20px;
-}
-
-.ml20 {
- margin-left: 20px;
-}
-
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
- font-family: inherit;
- font-weight: 500;
- line-height: 1.1;
- color: inherit;
-}
-
-.el-form .el-form-item__label {
- font-weight: 700;
-}
-
-.el-dialog.scrollbar .el-dialog__body {
- overflow: auto;
- overflow-x: hidden;
- max-height: 70vh;
- padding: 10px 20px 0;
-}
-
-.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
- word-break: break-word;
- background-color: #f8f8f9 !important;
- color: #515a6e;
- height: 40px !important;
- font-size: 13px;
-}
-
-.el-table .el-table__body-wrapper .el-button [class*="el-icon-"] + span {
- margin-left: 1px;
-}
-
-/** 表单布局 **/
-.form-header {
- font-size: 15px;
- color: #6379bb;
- border-bottom: 1px solid #ddd;
- margin: 8px 10px 25px 10px;
- padding-bottom: 5px;
-}
-
-/* tree border */
-.tree-border {
- margin-top: 5px;
- border: 1px solid #e5e6e7;
- background: #FFFFFF none;
- border-radius: 4px;
- width: 100%;
-}
-
-.el-table .fixed-width .el-button--small {
- padding-left: 0;
- padding-right: 0;
- width: inherit;
-}
-
-/** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link {
- cursor: pointer;
- color: #409EFF;
- margin-left: 10px;
-}
-
-.el-table .el-dropdown, .el-icon-arrow-down {
- font-size: 12px;
-}
-
-.el-tree-node__content > .el-checkbox {
- margin-right: 8px;
-}
-
-.list-group-striped > .list-group-item {
- border-left: 0;
- border-right: 0;
- border-radius: 0;
- padding-left: 0;
- padding-right: 0;
-}
-
-.list-group {
- padding-left: 0px;
- list-style: none;
-}
-
-.list-group-item {
- border-bottom: 1px solid #e7eaec;
- border-top: 1px solid #e7eaec;
- margin-bottom: -1px;
- padding: 11px 0px;
- font-size: 13px;
-}
-
-.pull-right {
- float: right !important;
-}
-
-.el-card__header {
- padding: 14px 15px 7px !important;
- min-height: 40px;
-}
-
-.el-card__body {
- padding: 15px 20px 20px 20px !important;
-}
-
-.card-box {
- padding-right: 15px;
- padding-left: 15px;
- margin-bottom: 10px;
-}
-
-/* button color */
-.el-button--cyan.is-active,
-.el-button--cyan:active {
- background: #20B2AA;
- border-color: #20B2AA;
- color: #FFFFFF;
-}
-
-.el-button--cyan:focus,
-.el-button--cyan:hover {
- background: #48D1CC;
- border-color: #48D1CC;
- color: #FFFFFF;
-}
-
-.el-button--cyan {
- background-color: #20B2AA;
- border-color: #20B2AA;
- color: #FFFFFF;
-}
-
-/* text color */
-.text-navy {
- color: #1ab394;
-}
-
-.text-primary {
- color: inherit;
-}
-
-.text-success {
- color: #1c84c6;
-}
-
-.text-info {
- color: #23c6c8;
-}
-
-.text-warning {
- color: #f8ac59;
-}
-
-.text-danger {
- color: #ed5565;
-}
-
-.text-muted {
- color: #888888;
-}
-
-/* image */
-.img-circle {
- border-radius: 50%;
-}
-
-.img-lg {
- width: 120px;
- height: 120px;
-}
-
-.avatar-upload-preview {
- position: absolute;
- top: 50%;
- transform: translate(50%, -50%);
- width: 200px;
- height: 200px;
- border-radius: 50%;
- box-shadow: 0 0 4px #ccc;
- overflow: hidden;
-}
-
-/* 拖拽列样式 */
-.sortable-ghost {
- opacity: .8;
- color: #fff !important;
- background: #42b983 !important;
-}
-
-/* 表格右侧工具栏样式 */
-.top-right-btn {
- margin-left: auto;
-}
-
-body {
- height: 100%;
- margin: 0;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-}
-
-label {
- font-weight: 700;
-}
-
-html {
- height: 100%;
- box-sizing: border-box;
-}
-
-#app {
- height: 100%;
-}
-
-*,
-*:before,
-*:after {
- box-sizing: inherit;
-}
-
-.no-padding {
- padding: 0px !important;
-}
-
-.padding-content {
- padding: 4px 0;
-}
-
-a:focus,
-a:active {
- outline: none;
-}
-
-a,
-a:focus,
-a:hover {
- cursor: pointer;
- color: inherit;
- text-decoration: none;
-}
-
-div:focus {
- outline: none;
-}
-
-.fr {
- float: right;
-}
-
-.fl {
- float: left;
-}
-
-.pr-5 {
- padding-right: 5px;
-}
-
-.pl-5 {
- padding-left: 5px;
-}
-
-.block {
- display: block;
-}
-
-.pointer {
- cursor: pointer;
-}
-
-.inlineBlock {
- display: block;
-}
-
-.clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
-}
-
-aside {
- background: #eef1f6;
- padding: 8px 24px;
- margin-bottom: 20px;
- border-radius: 2px;
- display: block;
- line-height: 32px;
- font-size: 16px;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
- color: #2c3e50;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-aside a {
- color: #337ab7;
- cursor: pointer;
-}
-
-aside a:hover {
- color: #20a0ff;
-}
-
-.app-container {
- padding: 20px;
-}
-
-.components-container {
- margin: 30px 50px;
- position: relative;
-}
-
-.text-center {
- text-align: center;
-}
-
-.sub-navbar {
- height: 50px;
- line-height: 50px;
- position: relative;
- width: 100%;
- text-align: right;
- padding-right: 20px;
- transition: 600ms ease position;
- background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
-}
-
-.sub-navbar .subtitle {
- font-size: 20px;
- color: #fff;
-}
-
-.sub-navbar.draft {
- background: #d0d0d0;
-}
-
-.sub-navbar.deleted {
- background: #d0d0d0;
-}
-
-.link-type,
-.link-type:focus {
- color: #337ab7;
- cursor: pointer;
-}
-
-.link-type:hover,
-.link-type:focus:hover {
- color: #20a0ff;
-}
-
-.filter-container {
- padding-bottom: 10px;
-}
-
-.filter-container .filter-item {
- display: inline-block;
- vertical-align: middle;
- margin-bottom: 10px;
-}
-
-.cursor-pointer {
- cursor: pointer;
-}
-
-.flex {
- display: flex;
-}
-
-.flex2 {
- display: flex;
- justify-content: space-between;
-}
diff --git a/src/assets/styles/index.min.css b/src/assets/styles/index.min.css
deleted file mode 100644
index 0e718a7..0000000
--- a/src/assets/styles/index.min.css
+++ /dev/null
@@ -1 +0,0 @@
-:export{menuColor:#bfcbd9;menuLightColor:rgba(0,0,0,0.7);menuColorActive:#f4f4f5;menuBackground:#2C3443;menuLightBackground:#fff;subMenuBackground:#1f2d3d;subMenuHover:#001528;sideBarWidth:200px;logoTitleColor:#fff;logoLightTitleColor:#001529;primaryColor:#409EFF;successColor:#67C23A;dangerColor:#F56C6C;infoColor:#909399;warningColor:#E6A23C}.fade-enter-active,.fade-leave-active{transition:opacity 0.28s}.fade-enter,.fade-leave-active{opacity:0}.fade-transform--move,.fade-transform-leave-active,.fade-transform-enter-active{transition:all .5s}.fade-transform-enter{opacity:0;transform:translateX(-30px)}.fade-transform-leave-to{opacity:0;transform:translateX(30px)}.breadcrumb-enter-active,.breadcrumb-leave-active{transition:all .5s}.breadcrumb-enter,.breadcrumb-leave-active{opacity:0;transform:translateX(20px)}.breadcrumb-move{transition:all .5s}.breadcrumb-leave-active{position:absolute}.el-dialog{min-width:45vw}.el-dialog .el-form{margin-top:20px}.el-breadcrumb__inner,.el-breadcrumb__inner a{font-weight:400 !important}.el-upload input[type="file"]{display:none !important}.el-upload__input{display:none}.cell .el-tag{margin-right:0px}.small-padding .cell{padding-left:5px;padding-right:5px}.fixed-width .el-button--mini{padding:7px 10px;width:60px}.status-col .cell{padding:0 10px;text-align:center}.status-col .cell .el-tag{margin-right:0px}.el-dialog{border-radius:10px;background-color:#f4f7fa;min-height:40vh}.upload-container .el-upload{width:100%}.upload-container .el-upload .el-upload-dragger{width:100%;height:200px}.el-dropdown-menu a{display:block}.el-range-editor.el-input__inner{display:inline-flex !important}.el-range-separator{box-sizing:content-box}.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}.el-dropdown .el-dropdown-link{color:var(--el-color-primary) !important}#app .main-container{height:100%;transition:margin-left .28s;margin-left:200px;position:relative}#app .sidebarHide{margin-left:0 !important}#app .sidebar-container{-webkit-transition:width .28s;transition:width 0.28s;width:200px !important;background-color:#2C3443;height:100%;position:fixed;font-size:0px;top:0;bottom:0;left:0;z-index:1001;overflow:hidden;-webkit-box-shadow:2px 0 6px rgba(0,21,41,0.35);box-shadow:2px 0 6px rgba(0,21,41,0.35)}#app .sidebar-container .horizontal-collapse-transition{transition:0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out}#app .sidebar-container .scrollbar-wrapper{overflow-x:hidden !important}#app .sidebar-container .el-scrollbar__bar.is-vertical{right:0px}#app .sidebar-container .el-scrollbar{height:100%}#app .sidebar-container.has-logo .el-scrollbar{height:calc(100% - 50px)}#app .sidebar-container .is-horizontal{display:none}#app .sidebar-container a{display:inline-block;width:100%;overflow:hidden}#app .sidebar-container .svg-icon{margin-right:16px}#app .sidebar-container .el-menu{border:none;height:100%;width:100% !important}#app .sidebar-container .el-menu-item,#app .sidebar-container .menu-title{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}#app .sidebar-container .el-menu-item .el-menu-tooltip__trigger{display:inline-block !important}#app .sidebar-container .sub-menu-title-noDropdown:hover,#app .sidebar-container .el-sub-menu__title:hover{background-color:rgba(0,0,0,0.06) !important}#app .sidebar-container .theme-dark .is-active>.el-sub-menu__title{color:#f4f4f5 !important}#app .sidebar-container .nest-menu .el-sub-menu>.el-sub-menu__title,#app .sidebar-container .el-sub-menu .el-menu-item{min-width:200px !important}#app .sidebar-container .nest-menu .el-sub-menu>.el-sub-menu__title:hover,#app .sidebar-container .el-sub-menu .el-menu-item:hover{background-color:rgba(0,0,0,0.06) !important}#app .sidebar-container .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,#app .sidebar-container .theme-dark .el-sub-menu .el-menu-item{background-color:#1f2d3d !important}#app .sidebar-container .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title:hover,#app .sidebar-container .theme-dark .el-sub-menu .el-menu-item:hover{background-color:#001528 !important}#app .hideSidebar .sidebar-container{width:54px !important}#app .hideSidebar .main-container{margin-left:54px}#app .hideSidebar .sub-menu-title-noDropdown{padding:0 !important;position:relative}#app .hideSidebar .sub-menu-title-noDropdown .el-tooltip{padding:0 !important}#app .hideSidebar .sub-menu-title-noDropdown .el-tooltip .svg-icon{margin-left:20px}#app .hideSidebar .el-sub-menu{overflow:hidden}#app .hideSidebar .el-sub-menu>.el-sub-menu__title{padding:0 !important}#app .hideSidebar .el-sub-menu>.el-sub-menu__title .svg-icon{margin-left:20px}#app .hideSidebar .el-menu--collapse .el-sub-menu>.el-sub-menu__title>span{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}#app .hideSidebar .el-menu--collapse .el-sub-menu>.el-sub-menu__title>i{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}#app .el-menu--collapse .el-menu .el-sub-menu{min-width:200px !important}#app .mobile .main-container{margin-left:0px}#app .mobile .sidebar-container{transition:transform .28s;width:200px !important}#app .mobile.hideSidebar .sidebar-container{pointer-events:none;transition-duration:0.3s;transform:translate3d(-200px, 0, 0)}#app .withoutAnimation .main-container,#app .withoutAnimation .sidebar-container{transition:none}.el-menu--vertical>.el-menu .svg-icon{margin-right:16px}.el-menu--vertical .nest-menu .el-sub-menu>.el-sub-menu__title:hover,.el-menu--vertical .el-menu-item:hover{background-color:rgba(0,0,0,0.06) !important}.el-menu--vertical>.el-menu--popup{max-height:100vh;overflow-y:auto}.el-menu--vertical>.el-menu--popup::-webkit-scrollbar-track-piece{background:#d3dce6}.el-menu--vertical>.el-menu--popup::-webkit-scrollbar{width:6px}.el-menu--vertical>.el-menu--popup::-webkit-scrollbar-thumb{background:#99a9bf;border-radius:20px}:export{menuColor:#bfcbd9;menuLightColor:rgba(0,0,0,0.7);menuColorActive:#f4f4f5;menuBackground:#2C3443;menuLightBackground:#fff;subMenuBackground:#1f2d3d;subMenuHover:#001528;sideBarWidth:200px;logoTitleColor:#fff;logoLightTitleColor:#001529;primaryColor:#409EFF;successColor:#67C23A;dangerColor:#F56C6C;infoColor:#909399;warningColor:#E6A23C}.blue-btn{background:#2C3443}.blue-btn:hover{color:#2C3443}.blue-btn:hover:before,.blue-btn:hover:after{background:#2C3443}.light-blue-btn{background:#3A71A8}.light-blue-btn:hover{color:#3A71A8}.light-blue-btn:hover:before,.light-blue-btn:hover:after{background:#3A71A8}.red-btn{background:#C03639}.red-btn:hover{color:#C03639}.red-btn:hover:before,.red-btn:hover:after{background:#C03639}.pink-btn{background:#E65D6E}.pink-btn:hover{color:#E65D6E}.pink-btn:hover:before,.pink-btn:hover:after{background:#E65D6E}.green-btn{background:#30B08F}.green-btn:hover{color:#30B08F}.green-btn:hover:before,.green-btn:hover:after{background:#30B08F}.tiffany-btn{background:#4AB7BD}.tiffany-btn:hover{color:#4AB7BD}.tiffany-btn:hover:before,.tiffany-btn:hover:after{background:#4AB7BD}.yellow-btn{background:#FEC171}.yellow-btn:hover{color:#FEC171}.yellow-btn:hover:before,.yellow-btn:hover:after{background:#FEC171}.pan-btn{font-size:14px;color:#fff;padding:14px 36px;border-radius:8px;border:none;outline:none;transition:600ms ease all;position:relative;display:inline-block}.pan-btn:hover{background:#fff}.pan-btn:hover:before,.pan-btn:hover:after{width:100%;transition:600ms ease all}.pan-btn:before,.pan-btn:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;transition:400ms ease all}.pan-btn::after{right:inherit;top:inherit;left:0;bottom:0}.custom-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;color:#fff;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:0;margin:0;padding:10px 15px;font-size:14px;border-radius:4px}.pt5{padding-top:5px}.pr5{padding-right:5px}.pb5{padding-bottom:5px}.mt5{margin-top:5px}.mr5{margin-right:5px}.mb5{margin-bottom:5px}.mb8{margin-bottom:8px}.ml5{margin-left:5px}.mt10{margin-top:10px}.mr10{margin-right:10px}.mb10{margin-bottom:10px}.ml10{margin-left:10px}.mt20{margin-top:20px}.mr20{margin-right:20px}.mb20{margin-bottom:20px}.ml20{margin-left:20px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.el-form .el-form-item__label{font-weight:700}.el-dialog.scrollbar .el-dialog__body{overflow:auto;overflow-x:hidden;max-height:70vh;padding:10px 20px 0}.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th{word-break:break-word;background-color:#f8f8f9 !important;color:#515a6e;height:40px !important;font-size:13px}.el-table .el-table__body-wrapper .el-button [class*="el-icon-"]+span{margin-left:1px}.form-header{font-size:15px;color:#6379bb;border-bottom:1px solid #ddd;margin:8px 10px 25px 10px;padding-bottom:5px}.pagination-container{position:relative;height:25px;margin-bottom:10px;margin-top:15px;padding:10px 20px !important}.el-dialog .pagination-container{position:static !important}.tree-border{margin-top:5px;border:1px solid #e5e6e7;background:#FFFFFF none;border-radius:4px;width:100%}.pagination-container .el-pagination{right:0;position:absolute}@media (max-width: 768px){.pagination-container .el-pagination>.el-pagination__jump{display:none !important}.pagination-container .el-pagination>.el-pagination__sizes{display:none !important}}.el-table .fixed-width .el-button--small{padding-left:0;padding-right:0;width:inherit}.el-table .el-dropdown-link{cursor:pointer;color:#409EFF;margin-left:10px}.el-table .el-dropdown,.el-icon-arrow-down{font-size:12px}.el-tree-node__content>.el-checkbox{margin-right:8px}.list-group-striped>.list-group-item{border-left:0;border-right:0;border-radius:0;padding-left:0;padding-right:0}.list-group{padding-left:0px;list-style:none}.list-group-item{border-bottom:1px solid #e7eaec;border-top:1px solid #e7eaec;margin-bottom:-1px;padding:11px 0px;font-size:13px}.pull-right{float:right !important}.el-card__header{padding:14px 15px 7px !important;min-height:40px}.el-card__body{padding:15px 20px 20px 20px !important}.card-box{padding-right:15px;padding-left:15px;margin-bottom:10px}.el-button--cyan.is-active,.el-button--cyan:active{background:#20B2AA;border-color:#20B2AA;color:#FFFFFF}.el-button--cyan:focus,.el-button--cyan:hover{background:#48D1CC;border-color:#48D1CC;color:#FFFFFF}.el-button--cyan{background-color:#20B2AA;border-color:#20B2AA;color:#FFFFFF}.text-navy{color:#1ab394}.text-primary{color:inherit}.text-success{color:#1c84c6}.text-info{color:#23c6c8}.text-warning{color:#f8ac59}.text-danger{color:#ed5565}.text-muted{color:#888888}.img-circle{border-radius:50%}.img-lg{width:120px;height:120px}.avatar-upload-preview{position:absolute;top:50%;transform:translate(50%, -50%);width:200px;height:200px;border-radius:50%;box-shadow:0 0 4px #ccc;overflow:hidden}.sortable-ghost{opacity:.8;color:#fff !important;background:#42b983 !important}.top-right-btn{margin-left:auto}body{height:100%;margin:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif}label{font-weight:700}html{height:100%;box-sizing:border-box}#app{height:100%}*,*:before,*:after{box-sizing:inherit}.no-padding{padding:0px !important}.padding-content{padding:4px 0}a:focus,a:active{outline:none}a,a:focus,a:hover{cursor:pointer;color:inherit;text-decoration:none}div:focus{outline:none}.fr{float:right}.fl{float:left}.pr-5{padding-right:5px}.pl-5{padding-left:5px}.block{display:block}.pointer{cursor:pointer}.inlineBlock{display:block}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}aside{background:#eef1f6;padding:8px 24px;margin-bottom:20px;border-radius:2px;display:block;line-height:32px;font-size:16px;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;color:#2c3e50;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}aside a{color:#337ab7;cursor:pointer}aside a:hover{color:#20a0ff}.app-container{padding:20px}.components-container{margin:30px 50px;position:relative}.pagination-container{margin-top:30px}.text-center{text-align:center}.sub-navbar{height:50px;line-height:50px;position:relative;width:100%;text-align:right;padding-right:20px;transition:600ms ease position;background:linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%)}.sub-navbar .subtitle{font-size:20px;color:#fff}.sub-navbar.draft{background:#d0d0d0}.sub-navbar.deleted{background:#d0d0d0}.link-type,.link-type:focus{color:#337ab7;cursor:pointer}.link-type:hover,.link-type:focus:hover{color:#20a0ff}.filter-container{padding-bottom:10px}.filter-container .filter-item{display:inline-block;vertical-align:middle;margin-bottom:10px}.cursor-pointer{cursor:pointer}.flex{display:flex}.flex2{display:flex;justify-content:space-between}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 50ba487..75d093f 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -6,6 +6,13 @@
@import './btn.scss';
@import './ruoyi.scss';
+html{
+ font-size: 16px;
+ //控制初始字体大小
+ @media(min-width: 1921px) and (max-width: 3840px) {
+ font-size: 32px;
+ }
+}
body {
height: 100%;
margin: 0;
@@ -202,4 +209,4 @@
.el-form-item{
width: 46%;
}
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/ruoyi.css b/src/assets/styles/ruoyi.css
deleted file mode 100644
index 2c6cb29..0000000
--- a/src/assets/styles/ruoyi.css
+++ /dev/null
@@ -1,261 +0,0 @@
-@charset "UTF-8";
-/**
- * 通用css样式布局处理
- * Copyright (c) 2019 ruoyi
- */
-/** 基础通用 **/
-.pt5 {
- padding-top: 5px;
-}
-
-.pr5 {
- padding-right: 5px;
-}
-
-.pb5 {
- padding-bottom: 5px;
-}
-
-.mt5 {
- margin-top: 5px;
-}
-
-.mr5 {
- margin-right: 5px;
-}
-
-.mb5 {
- margin-bottom: 5px;
-}
-
-.mb8 {
- margin-bottom: 8px;
-}
-
-.ml5 {
- margin-left: 5px;
-}
-
-.mt10 {
- margin-top: 10px;
-}
-
-.mr10 {
- margin-right: 10px;
-}
-
-.mb10 {
- margin-bottom: 10px;
-}
-
-.ml10 {
- margin-left: 10px;
-}
-
-.mt20 {
- margin-top: 20px;
-}
-
-.mr20 {
- margin-right: 20px;
-}
-
-.mb20 {
- margin-bottom: 20px;
-}
-
-.ml20 {
- margin-left: 20px;
-}
-
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
- font-family: inherit;
- font-weight: 500;
- line-height: 1.1;
- color: inherit;
-}
-
-.el-form .el-form-item__label {
- font-weight: 700;
-}
-
-.el-dialog.scrollbar .el-dialog__body {
- overflow: auto;
- overflow-x: hidden;
- max-height: 70vh;
- padding: 10px 20px 0;
-}
-
-.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
- word-break: break-word;
- background-color: #f8f8f9 !important;
- color: #515a6e;
- height: 40px !important;
- font-size: 13px;
-}
-
-.el-table .el-table__body-wrapper .el-button [class*="el-icon-"] + span {
- margin-left: 1px;
-}
-
-/** 表单布局 **/
-.form-header {
- font-size: 15px;
- color: #6379bb;
- border-bottom: 1px solid #ddd;
- margin: 8px 10px 25px 10px;
- padding-bottom: 5px;
-}
-
-/* tree border */
-.tree-border {
- margin-top: 5px;
- border: 1px solid #e5e6e7;
- background: #FFFFFF none;
- border-radius: 4px;
- width: 100%;
-}
-
-.el-table .fixed-width .el-button--small {
- padding-left: 0;
- padding-right: 0;
- width: inherit;
-}
-
-/** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link {
- cursor: pointer;
- color: #409EFF;
- margin-left: 10px;
-}
-
-.el-table .el-dropdown, .el-icon-arrow-down {
- font-size: 12px;
-}
-
-.el-tree-node__content > .el-checkbox {
- margin-right: 8px;
-}
-
-.list-group-striped > .list-group-item {
- border-left: 0;
- border-right: 0;
- border-radius: 0;
- padding-left: 0;
- padding-right: 0;
-}
-
-.list-group {
- padding-left: 0px;
- list-style: none;
-}
-
-.list-group-item {
- border-bottom: 1px solid #e7eaec;
- border-top: 1px solid #e7eaec;
- margin-bottom: -1px;
- padding: 11px 0px;
- font-size: 13px;
-}
-
-.pull-right {
- float: right !important;
-}
-
-.el-card__header {
- padding: 14px 15px 7px !important;
- min-height: 40px;
-}
-
-.el-card__body {
- padding: 15px 20px 20px 20px !important;
-}
-
-.card-box {
- padding-right: 15px;
- padding-left: 15px;
- margin-bottom: 10px;
-}
-
-/* button color */
-.el-button--cyan.is-active,
-.el-button--cyan:active {
- background: #20B2AA;
- border-color: #20B2AA;
- color: #FFFFFF;
-}
-
-.el-button--cyan:focus,
-.el-button--cyan:hover {
- background: #48D1CC;
- border-color: #48D1CC;
- color: #FFFFFF;
-}
-
-.el-button--cyan {
- background-color: #20B2AA;
- border-color: #20B2AA;
- color: #FFFFFF;
-}
-
-/* text color */
-.text-navy {
- color: #1ab394;
-}
-
-.text-primary {
- color: inherit;
-}
-
-.text-success {
- color: #1c84c6;
-}
-
-.text-info {
- color: #23c6c8;
-}
-
-.text-warning {
- color: #f8ac59;
-}
-
-.text-danger {
- color: #ed5565;
-}
-
-.text-muted {
- color: #888888;
-}
-
-/* image */
-.img-circle {
- border-radius: 50%;
-}
-
-.img-lg {
- width: 120px;
- height: 120px;
-}
-
-.avatar-upload-preview {
- position: absolute;
- top: 50%;
- transform: translate(50%, -50%);
- width: 200px;
- height: 200px;
- border-radius: 50%;
- box-shadow: 0 0 4px #ccc;
- overflow: hidden;
-}
-
-/* 拖拽列样式 */
-.sortable-ghost {
- opacity: .8;
- color: #fff !important;
- background: #42b983 !important;
-}
-
-/* 表格右侧工具栏样式 */
-.top-right-btn {
- margin-left: auto;
-}
diff --git a/src/assets/styles/ruoyi.min.css b/src/assets/styles/ruoyi.min.css
deleted file mode 100644
index 78c503d..0000000
--- a/src/assets/styles/ruoyi.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.pt5{padding-top:5px}.pr5{padding-right:5px}.pb5{padding-bottom:5px}.mt5{margin-top:5px}.mr5{margin-right:5px}.mb5{margin-bottom:5px}.mb8{margin-bottom:8px}.ml5{margin-left:5px}.mt10{margin-top:10px}.mr10{margin-right:10px}.mb10{margin-bottom:10px}.ml10{margin-left:10px}.mt20{margin-top:20px}.mr20{margin-right:20px}.mb20{margin-bottom:20px}.ml20{margin-left:20px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.el-form .el-form-item__label{font-weight:700}.el-dialog.scrollbar .el-dialog__body{overflow:auto;overflow-x:hidden;max-height:70vh;padding:10px 20px 0}.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th{word-break:break-word;background-color:#f8f8f9 !important;color:#515a6e;height:40px !important;font-size:13px}.el-table .el-table__body-wrapper .el-button [class*="el-icon-"]+span{margin-left:1px}.form-header{font-size:15px;color:#6379bb;border-bottom:1px solid #ddd;margin:8px 10px 25px 10px;padding-bottom:5px}.pagination-container{position:relative;height:25px;margin-bottom:10px;margin-top:15px;padding:10px 20px !important}.el-dialog .pagination-container{position:static !important}.tree-border{margin-top:5px;border:1px solid #e5e6e7;background:#FFFFFF none;border-radius:4px;width:100%}.pagination-container .el-pagination{right:0;position:absolute}@media (max-width: 768px){.pagination-container .el-pagination>.el-pagination__jump{display:none !important}.pagination-container .el-pagination>.el-pagination__sizes{display:none !important}}.el-table .fixed-width .el-button--small{padding-left:0;padding-right:0;width:inherit}.el-table .el-dropdown-link{cursor:pointer;color:#409EFF;margin-left:10px}.el-table .el-dropdown,.el-icon-arrow-down{font-size:12px}.el-tree-node__content>.el-checkbox{margin-right:8px}.list-group-striped>.list-group-item{border-left:0;border-right:0;border-radius:0;padding-left:0;padding-right:0}.list-group{padding-left:0px;list-style:none}.list-group-item{border-bottom:1px solid #e7eaec;border-top:1px solid #e7eaec;margin-bottom:-1px;padding:11px 0px;font-size:13px}.pull-right{float:right !important}.el-card__header{padding:14px 15px 7px !important;min-height:40px}.el-card__body{padding:15px 20px 20px 20px !important}.card-box{padding-right:15px;padding-left:15px;margin-bottom:10px}.el-button--cyan.is-active,.el-button--cyan:active{background:#20B2AA;border-color:#20B2AA;color:#FFFFFF}.el-button--cyan:focus,.el-button--cyan:hover{background:#48D1CC;border-color:#48D1CC;color:#FFFFFF}.el-button--cyan{background-color:#20B2AA;border-color:#20B2AA;color:#FFFFFF}.text-navy{color:#1ab394}.text-primary{color:inherit}.text-success{color:#1c84c6}.text-info{color:#23c6c8}.text-warning{color:#f8ac59}.text-danger{color:#ed5565}.text-muted{color:#888888}.img-circle{border-radius:50%}.img-lg{width:120px;height:120px}.avatar-upload-preview{position:absolute;top:50%;transform:translate(50%, -50%);width:200px;height:200px;border-radius:50%;box-shadow:0 0 4px #ccc;overflow:hidden}.sortable-ghost{opacity:.8;color:#fff !important;background:#42b983 !important}.top-right-btn{margin-left:auto}
diff --git a/src/assets/styles/variables.module.css b/src/assets/styles/variables.module.css
deleted file mode 100644
index 57642eb..0000000
--- a/src/assets/styles/variables.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
-:export {
- menuColor: #bfcbd9;
- menuLightColor: rgba(0, 0, 0, 0.7);
- menuColorActive: #f4f4f5;
- menuBackground: #2C3443;
- menuLightBackground: #ffffff;
- subMenuBackground: #1f2d3d;
- subMenuHover: #001528;
- sideBarWidth: 200px;
- logoTitleColor: #ffffff;
- logoLightTitleColor: #001529;
- primaryColor: #409EFF;
- successColor: #67C23A;
- dangerColor: #F56C6C;
- infoColor: #909399;
- warningColor: #E6A23C;
-}
diff --git a/src/assets/styles/variables.module.min.css b/src/assets/styles/variables.module.min.css
deleted file mode 100644
index 8054a37..0000000
--- a/src/assets/styles/variables.module.min.css
+++ /dev/null
@@ -1 +0,0 @@
-:export{menuColor:#bfcbd9;menuLightColor:rgba(0,0,0,0.7);menuColorActive:#f4f4f5;menuBackground:#2C3443;menuLightBackground:#fff;subMenuBackground:#1f2d3d;subMenuHover:#001528;sideBarWidth:200px;logoTitleColor:#fff;logoLightTitleColor:#001529;primaryColor:#409EFF;successColor:#67C23A;dangerColor:#F56C6C;infoColor:#909399;warningColor:#E6A23C}
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
index 1c3c1b5..7c01647 100644
--- a/src/components/Table/index.vue
+++ b/src/components/Table/index.vue
@@ -14,6 +14,10 @@
import {onMounted, ref} from "vue";
const props = defineProps({
+ searchData: {
+ type: Object,
+ default: () => {}
+ },
getList: {
type: Function,
default: () => {},
@@ -38,12 +42,13 @@
})
const loading = ref(false);
-const getData = (data) => {
- const pagedata = { limit: state.limit, page: data.page}
+// 默认第一页
+const getData = (data={page:1}) => {
+ const pagedata = { limit: state.limit, page: data.page, ...props.searchData }
loading.value = true;
props.getList(pagedata).then(res => {
- state.list = res.list
- state.total = res.total
+ state.list = res.data.list
+ state.total = res.data.total
}).finally(() => {
loading.value = false;
})
@@ -51,6 +56,11 @@
onMounted(() =>{
getData({ page: state.page })
+})
+
+// 将方法抛出去，外面可以调用
+defineExpose({
+ getData
})
</script>
@@ -94,17 +104,16 @@
</el-table-column>
</template>
</el-table>
- <div class="pagination">
+ <div class="pagination" v-show="state.total > 0">
<div class="pagination-total">共{{state.total}}条</div>
<pagination
- v-show="state.total > 0"
layout="prev, pager, next, jumper"
:total="state.total"
:page="state.current"
:limit="state.limit"
@pagination="getData"
/>
- <!-- 页面右侧自定义插槽，可以加自定义按钮 -->
+ <!-- 页码右侧自定义插槽，可以加自定义按钮 -->
<slot name="pagination"></slot>
</div>
</div>
@@ -119,6 +128,9 @@
color: #fff;
}
}
+:deep(.el-table--default .el-table__cell){
+ padding: 12px 0;
+}
:deep(.pagination-container){
background-color: transparent;
margin: 0;
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index 52b40ea..ed3b45c 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -169,7 +169,7 @@
})
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.topmenu-container.el-menu--horizontal > .el-menu-item {
float: left;
height: 50px !important;
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index ef7b361..9f10730 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -51,7 +51,7 @@
}
</style>
-<style lang="scss">
+<style lang="scss" scoped>
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index e9404f2..3d2991f 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -313,7 +313,7 @@
}
</style>
-<style lang="scss">
+<style lang="scss" scoped>
//reset element css of el-icon-close
.tags-view-wrapper {
.tags-view-item {
diff --git a/src/utils/index.js b/src/utils/index.js
index 35b043c..8994d62 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -472,4 +472,16 @@
export function isNumberStr(str) {
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
}
+
+/**
+ * blob文件流导出
+ */
+export function exportBlobFile(blob) {
+ const link = document.createElement('a')
+ const url = URL || window.webkitURL
+ const href = url.createObjectURL(blob)
+ link.href = href;
+ link.download = '报警记录.xlsx'
+ link.click()
+}
diff --git a/src/views/screen/flow/report/index.vue b/src/views/screen/flow/report/index.vue
index b33bbe8..061c394 100644
--- a/src/views/screen/flow/report/index.vue
+++ b/src/views/screen/flow/report/index.vue
@@ -9,28 +9,30 @@
])
const time = ref()
let tableHead = [
- { prop: 'code', label: '报警代码' },
- { prop: 'shebei', label: '报警设备', },
- { prop: 'content', label: '报警内容' },
- { prop: 'time', label: '报警时间' },
- { prop: 'sure', label: '报警确认', slot: true },
+ { prop: 'code', label: '流速 (m/s)' },
+ { prop: 'shebei', label: '瞬时流量 (m³/h)', },
+ { prop: 'content', label: '累计流量 (m³)' },
+ { prop: 'sure', label: '采集点' },
+ { prop: 'time', label: '采集时间' },
]
const getTableData = () => {
return new Promise(resolve => {
let arr = {
- list: [
- { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
- { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
- { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- ],
+ data:{
+ list: [
+ { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
+ { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
+ { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
+ { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
+ { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
+ ]
+ },
total: 30,
}
resolve(arr)
@@ -73,6 +75,7 @@
<el-date-picker
v-model="time"
type="datetimerange"
+ format="YYYY-MM-DD HH:mm:ss"
size="large"
style="width: 30rem"
range-separator="至"
diff --git a/src/views/screen/flow/warning/index.vue b/src/views/screen/flow/warning/index.vue
index 4ee3228..bfec15f 100644
--- a/src/views/screen/flow/warning/index.vue
+++ b/src/views/screen/flow/warning/index.vue
@@ -1,17 +1,28 @@
<script setup>
-import {onMounted, ref} from "vue";
+import {onMounted, ref, reactive} from "vue";
import * as echarts from 'echarts/core';
import Table from '@/components/Table/index.vue'
+import { warnHistory, exportWarnHistory } from '@/api/screen/warning/index.js'
+import { exportBlobFile } from '@/utils/index.js'
+const tableRef = ref(null)
const timeType = ref(0)
const warnChartRef = ref()
+const exportTime = ref()
+const searchData = reactive({
+ createTimeRange: ''
+})
+
+const openDialog = ref(false)
+const dialogInfo = ref()
+
let warnCharts = null;
let tableHead = [
{ prop: 'code', label: '报警代码' },
- { prop: 'shebei', label: '报警设备', },
- { prop: 'content', label: '报警内容' },
- { prop: 'time', label: '报警时间' },
- { prop: 'sure', label: '报警确认', slot: true },
+ { prop: 'facilityName', label: '报警设备', },
+ { prop: 'description', label: '报警内容' },
+ { prop: 'lastTimeView', label: '报警时间' },
+ { prop: 'isConfirm', label: '报警确认', slot: true },
]
const initWarnChart = () => {
@@ -61,26 +72,28 @@
}
}
-const getTableData = () => {
- return new Promise(resolve => {
- let arr = {
- list: [
- { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
- { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
- { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- ],
- total: 30,
- }
- resolve(arr)
+const searchTable = () => {
+ if(exportTime.value) {
+ searchData.createTimeRange = exportTime.value[0] + '~' + exportTime.value[1]
+ }
+ tableRef.value.getData()
+}
+
+// 导出报警报表
+const exportWarnTabl = () => {
+ exportWarnHistory({ createTimeRange: searchData.createTimeRange }).then(res => {
+ exportBlobFile(res)
})
}
+
+// 获取报警内容
+const getWarnInfi = (data) => {
+ dialogInfo.value = data
+ openDialog.value = true
+}
+
+// 处理报警内容
+const handleComfirm = () => {}
onMounted(() => {
initWarnChart()
@@ -105,20 +118,77 @@
<div class="warn-r item">
<div class="item-t">
<div class="name">报警记录</div>
+ <div>
+ <el-date-picker
+ v-model="exportTime"
+ type="datetimerange"
+ format="YYYY-MM-DD HH:mm:ss"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ style="width: 28rem"
+ range-separator="至"
+ start-placeholder="开始时间"
+ end-placeholder="结束时间"
+ />
+ <el-button type="primary" style="margin-left: 15px" @click="searchTable">搜索</el-button>
+ </div>
</div>
<div class="warn-table">
- <Table :getList="getTableData" :headList="tableHead">
- <template #sure="scope">
- <div v-if="scope.row.sure === 1" style="color: #1ab394">已处理</div>
- <div v-else-if="scope.row.sure === 2" style="color: #e8ab04">未处理</div>
- <div v-else style="color: #f30101">待确认</div>
+ <Table :getList="warnHistory" :searchData="searchData" :headList="tableHead" ref="tableRef">
+ <template #isConfirm="scope">
+ <div v-if="scope.row.isConfirm === 200" style="color: #1ab394">已处理</div>
+ <div v-else-if="scope.row.isConfirm === 20" style="color: #e8ab04" @click="getWarnInfi(scope.row)">未处理</div>
+ <div v-else style="color: #f30101" @click="getWarnInfi(scope.row)">待确认</div>
</template>
<template v-slot:pagination>
- <el-button type="success" style="width: 6rem">导出</el-button>
+ <el-button type="success" style="width: 6rem" @click="exportWarnTabl">导出</el-button>
</template>
</Table>
</div>
</div>
+ <el-dialog
+ v-model="openDialog"
+ title="报警确认框"
+ width="40rem"
+ show-close
+ class="warnDialog"
+ >
+ <div class="message">
+ <div class="message-item">
+ <div class="title">报警代码:</div>
+ <div class="val">{{dialogInfo.code}}</div>
+ </div>
+ <div class="message-item">
+ <div class="title">报警设备:</div>
+ <div class="val">{{dialogInfo.facilityName}}</div>
+ </div>
+ <div class="message-item">
+ <div class="title">报警内容:</div>
+ <div class="val">{{dialogInfo.description}}</div>
+ </div>
+ <div class="message-line">
+ <div class="title">报警时间:</div>
+ <div class="val">{{dialogInfo.lastTime}}</div>
+ </div>
+ <div class="message-line">
+ <div class="title">报警确认:</div>
+ <div class="val">
+ <el-radio-group v-model="timeType">
+ <el-radio :value="1">已处理</el-radio>
+ <el-radio :value="2">已证实</el-radio>
+ <el-radio :value="3">误 报</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="openDialog = false">取消</el-button>
+ <el-button type="primary" @click="handleComfirm">
+ 确定
+ </el-button>
+ </span>
+ </template>
+ </el-dialog>
</div>
</template>
@@ -146,6 +216,9 @@
font-size: 36px;
color: #fff;
}
+ :deep(.el-date-editor){
+ flex-grow: 0;
+ }
.select{
:deep(.el-radio){
color: #fff;
@@ -170,4 +243,28 @@
}
}
}
+.warnDialog{
+ .message{
+ display: flex;
+ flex-wrap: wrap;
+ .message-item{
+ width: 50%;
+ display: flex;
+ align-items: center;
+ padding: 10px 0;
+ .val{
+ margin-left: 10px;
+ }
+ }
+ .message-line{
+ width: 100%;
+ padding: 10px 0;
+ display: flex;
+ align-items: center;
+ .val{
+ margin-left: 10px;
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/screen/temperature/graphic/index.vue b/src/views/screen/temperature/graphic/index.vue
index 5efa2d0..fa5c4cb 100644
--- a/src/views/screen/temperature/graphic/index.vue
+++ b/src/views/screen/temperature/graphic/index.vue
@@ -3,11 +3,69 @@
</script>
<template>
- <div>
- 图形分析
+ <div class="graphic">
+ <div class="graphic-menu">
+ <div class="menu-t">监测点列表</div>
+ <el-menu class="el-menu">
+ <el-sub-menu index="1">
+ <template #title>
+ <span>可移动监测点</span>
+ </template>
+ <el-menu-item index="1-1">水电站流量监测点</el-menu-item>
+ </el-sub-menu>
+ <el-sub-menu index="2">
+ <template #title>
+ <span>固定位监测点</span>
+ </template>
+ <el-menu-item index="2-1">新扎口流量监测点</el-menu-item>
+ </el-sub-menu>
+ </el-menu>
+ </div>
</div>
</template>
<style scoped lang="scss">
+.graphic {
+ height: 100%;
+ display: flex;
+ &-menu {
+ flex-shrink: 0;
+ width: 20%;
+ height: 100%;
+ padding: 10px 0;
+ background: linear-gradient(135deg, #91BDDB 0%, #9EC2DB 99%);
+ overflow-y: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .menu-t {
+ height: 40px;
+ line-height: 40px;
+ padding-left: 20px;
+ font-size: 26px;
+ color: #fff;
+ background: url("@/assets/images/flow/monitor-title-bg.png") no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .el-menu {
+ background-color: transparent;
+ border-right: none;
+
+ :deep(.el-menu) {
+ background-color: transparent;
+ }
+
+ :deep(.el-sub-menu__title:hover) {
+ background-color: rgba(0, 0, 0, 0.06);
+ }
+
+ :deep(.el-menu-item.is-active) {
+ color: #fff;
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/screen/temperature/monitor/index.vue b/src/views/screen/temperature/monitor/index.vue
index 18de0f5..5ac61ee 100644
--- a/src/views/screen/temperature/monitor/index.vue
+++ b/src/views/screen/temperature/monitor/index.vue
@@ -1,13 +1,369 @@
<script setup>
+ import {ref} from "vue";
+ import {getUserType} from '@/utils/auth.js'
+ const userType = ref(getUserType())
+ const monitorRef = ref()
+ const searchVal = ref('')
+ const selectType = ref(1);
+ const typeOption = ref([
+ { label: '水电站流量监测点', value: 1 },
+ { label: '新扎口流量监测点', value: 2 },
+ ])
+ const video = ref()
+
+ // 全屏操作
+ const handleFullScreen = () => {
+ monitorRef.value.requestFullscreen()
+ }
</script>
<template>
- <div>
- 实时监测
+ <div class="monitor">
+ <div class="monitor-menu">
+ <div class="menu-t">监测点列表</div>
+ <el-menu class="el-menu">
+ <el-sub-menu index="1">
+ <template #title>
+ <span>可移动监测点</span>
+ </template>
+ <el-menu-item index="1-1">水电站流量监测点</el-menu-item>
+ </el-sub-menu>
+ <el-sub-menu index="2">
+ <template #title>
+ <span>固定位监测点</span>
+ </template>
+ <el-menu-item index="2-1">新扎口流量监测点</el-menu-item>
+ </el-sub-menu>
+ </el-menu>
+ </div>
+ <div class="monitor-info">
+ <div class="monitor-tool">
+ <div class="tool-l">
+ <div class="name">监测点区域</div>
+ <el-select
+ v-model="selectType"
+ class="tool-select"
+ placeholder="Select"
+ style="width: 15rem"
+ >
+ <el-option
+ v-for="item in typeOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-input v-model="searchVal" style="width: 20rem" placeholder="请输入监测点名称" />
+ <el-button><el-icon><Search /></el-icon>搜索</el-button>
+ <el-button style="margin-left: 0" v-if="userType === '1'"><el-icon><Plus /></el-icon>新增</el-button>
+ </div>
+ <div class="tool-r" @click="handleFullScreen">
+ <img src="@/assets/images/flow/fullscreen.png" />
+ 全屏
+ </div>
+ </div>
+ <div class="monitor-box" ref="monitorRef">
+ <div class="monitor-list">
+ <div class="item">
+ <div class="item-t">电站进水口水温监测点</div>
+ <div class="item-data">
+ <div class="data">
+ <div class="name">水温:</div>
+ <div class="val"><span>2</span>°C</div>
+ </div>
+ <div class="data">
+ <div class="name">水位:</div>
+ <div class="val"><span>2000</span>m</div>
+ </div>
+ </div>
+ <div class="item-status">
+ 压力式水位水温计工作状况：
+ <span >设备运作正常</span>
+ </div>
+ <div class="item-set">
+ <div class="setbox">
+ <div class="name">里程设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">投放度设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">高程设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">水位下限设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">水温下限设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">水位计采集间隔设置：</div>
+ <el-select>
+ <el-option>60s</el-option>
+ <el-option>120s</el-option>
+ <el-option>300s</el-option>
+ <el-option>600s</el-option>
+ </el-select>
+ </div>
+ <div class="setbox">
+ <div class="name">记录上报间隔设置：</div>
+ <el-select>
+ <el-option>60s</el-option>
+ <el-option>120s</el-option>
+ <el-option>300s</el-option>
+ <el-option>600s</el-option>
+ </el-select>
+ </div>
+ <div class="setbox">
+ <div class="name">实时数据上报间隔设置：</div>
+ <el-select>
+ <el-option>60s</el-option>
+ <el-option>120s</el-option>
+ <el-option>300s</el-option>
+ <el-option>600s</el-option>
+ </el-select>
+ </div>
+ </div>
+ <div class="item-btn"><el-button size="large" type="success">批量应用</el-button></div>
+ </div>
+ <div class="item">
+ <div class="item-t">电站进水口水温监测点</div>
+ <div class="item-data">
+ <div class="data">
+ <div class="name">水温:</div>
+ <div class="val"><span>2</span>°C</div>
+ </div>
+ <div class="data">
+ <div class="name">水位:</div>
+ <div class="val"><span>2000</span>m</div>
+ </div>
+ </div>
+ <div class="item-status">
+ 压力式水位水温计工作状况：
+ <span >设备运作正常</span>
+ </div>
+ <div class="item-set">
+ <div class="setbox">
+ <div class="name">里程设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">投放度设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">高程设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">水位下限设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">水温下限设置：</div>
+ <el-input />
+ </div>
+ <div class="setbox">
+ <div class="name">水位计采集间隔设置：</div>
+ <el-select>
+ <el-option>60s</el-option>
+ <el-option>120s</el-option>
+ <el-option>300s</el-option>
+ <el-option>600s</el-option>
+ </el-select>
+ </div>
+ <div class="setbox">
+ <div class="name">记录上报间隔设置：</div>
+ <el-select>
+ <el-option>60s</el-option>
+ <el-option>120s</el-option>
+ <el-option>300s</el-option>
+ <el-option>600s</el-option>
+ </el-select>
+ </div>
+ <div class="setbox">
+ <div class="name">实时数据上报间隔设置：</div>
+ <el-select>
+ <el-option>60s</el-option>
+ <el-option>120s</el-option>
+ <el-option>300s</el-option>
+ <el-option>600s</el-option>
+ </el-select>
+ </div>
+ </div>
+ <div class="item-btn"><el-button size="large" type="success">批量应用</el-button></div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
<style scoped lang="scss">
+.monitor {
+ height: 100%;
+ display: flex;
+ &-menu {
+ flex-shrink: 0;
+ width: 20%;
+ height: 100%;
+ padding: 10px 0;
+ background: linear-gradient(135deg, #91BDDB 0%, #9EC2DB 99%);
+ overflow-y: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .menu-t {
+ height: 40px;
+ line-height: 40px;
+ padding-left: 20px;
+ font-size: 26px;
+ color: #fff;
+ background: url("@/assets/images/flow/monitor-title-bg.png") no-repeat;
+ background-size: 100% 100%;
+ }
+
+ .el-menu {
+ background-color: transparent;
+ border-right: none;
+
+ :deep(.el-menu) {
+ background-color: transparent;
+ }
+
+ :deep(.el-sub-menu__title:hover) {
+ background-color: rgba(0, 0, 0, 0.06);
+ }
+
+ :deep(.el-menu-item.is-active) {
+ color: #fff;
+ }
+ }
+ }
+ .monitor-info{
+ flex-shrink: 0;
+ width: 80%;
+ height: 100%;
+ background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
+ .monitor-tool{
+ width: 100%;
+ height: 60px;
+ padding: 0 30px;
+ background: linear-gradient( 90deg, #91BDDB 0%, #DADFE3 100%);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .tool-l{
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ .name{
+ font-size: 1.1rem;
+ }
+ }
+ .tool-r{
+ display: flex;
+ align-items: center;
+ img{
+ width: 25px;
+ margin-right: 10px;
+ }
+ }
+ }
+ .monitor-box{
+ height: calc(100% - 60px);
+ .monitor-list{
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 30px;
+ .item{
+ width: 48%;
+ height: 96%;
+ background: rgba(23,108,229,0.3);
+ border: 1px solid #176CE5;
+ padding: 20px;
+ border-radius: 8px;
+ .item-t{
+ font-size: 36px;
+ color: #fff;
+ text-align: center;
+ }
+ .item-data{
+ height: 30%;
+ display: flex;
+ align-items: center;
+ .data{
+ width: 50%;
+ display: flex;
+ align-items: center;
+ color: #fff;
+ font-size: 22px;
+ .val{
+ span{
+ display: inline-block;
+ font-size: 30px;
+ padding: 0 30px;
+ }
+ }
+ }
+ }
+ .item-status{
+ height: 8%;
+ font-size: 22px;
+ color: #fff;
+ }
+ .item-set{
+ display: flex;
+ flex-wrap: wrap;
+ align-content: center;
+ .setbox{
+ width: 50%;
+ margin-top: 40px;
+ padding: 0 10px;
+ display: flex;
+ align-items: center;
+ .name{
+ flex-shrink: 0;
+ color: #fff;
+ }
+ :deep(.el-input__wrapper){
+ background-color: transparent;
+ border-bottom: 1px solid #fff;
+ box-shadow: none;
+ border-radius: 0;
+ }
+ :deep(.el-select__wrapper){
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 0;
+ .el-select__placeholder.is-transparent{
+ color: #FFF;
+ }
+ .el-select__suffix .el-select__caret{
+ color: #fff;
+ }
+ }
+ }
+ }
+ .item-btn{
+ height: 10%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ }
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/screen/temperature/report/index.vue b/src/views/screen/temperature/report/index.vue
index 678bffa..061c394 100644
--- a/src/views/screen/temperature/report/index.vue
+++ b/src/views/screen/temperature/report/index.vue
@@ -1,13 +1,119 @@
<script setup>
+import {ref} from "vue";
+import Table from '@/components/Table/index.vue'
+
+const selectType = ref(1);
+const typeOption = ref([
+ { label: '水电站流量监测点', value: 1 },
+ { label: '新扎口流量监测点', value: 2 },
+])
+const time = ref()
+let tableHead = [
+ { prop: 'code', label: '流速 (m/s)' },
+ { prop: 'shebei', label: '瞬时流量 (m³/h)', },
+ { prop: 'content', label: '累计流量 (m³)' },
+ { prop: 'sure', label: '采集点' },
+ { prop: 'time', label: '采集时间' },
+]
+
+const getTableData = () => {
+ return new Promise(resolve => {
+ let arr = {
+ data:{
+ list: [
+ { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
+ { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
+ { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
+ { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
+ { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
+ { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
+ ]
+ },
+ total: 30,
+ }
+ resolve(arr)
+ })
+}
</script>
<template>
- <div>
- 报表管理
+ <div class="report">
+ <div class="report-tool">
+ <el-select
+ v-model="selectType"
+ class="tool-select"
+ size="large"
+ placeholder="Select"
+ style="width: 20rem"
+ >
+ <el-option
+ v-for="item in typeOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-select
+ v-model="selectType"
+ class="tool-select"
+ size="large"
+ placeholder="Select"
+ style="width: 20rem"
+ >
+ <el-option
+ v-for="item in typeOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-date-picker
+ v-model="time"
+ type="datetimerange"
+ format="YYYY-MM-DD HH:mm:ss"
+ size="large"
+ style="width: 30rem"
+ range-separator="至"
+ start-placeholder="开始时间"
+ end-placeholder="结束时间"
+ />
+ <el-button type="success" size="large" style="width: 6rem">一键导出</el-button>
+ </div>
+ <div class="report-table">
+ <Table :getList="getTableData" :headList="tableHead"></Table>
+ </div>
</div>
</template>
<style scoped lang="scss">
-
+.report{
+ height: 100%;
+ background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ &-tool{
+ padding: 10px 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+ :deep(.el-date-editor){
+ flex-grow: 0;
+ }
+ }
+ &-table{
+ width: 96%;
+ height: 90%;
+ background: rgba(23,108,229,0.3);
+ border: 1px solid #176CE5;
+ border-radius: 8px;
+ padding: 20px;
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/screen/temperature/shebei/index.vue b/src/views/screen/temperature/shebei/index.vue
index 2ccc251..a588778 100644
--- a/src/views/screen/temperature/shebei/index.vue
+++ b/src/views/screen/temperature/shebei/index.vue
@@ -1,13 +1,357 @@
<script setup>
+import {ref} from "vue";
+import {getUserType} from '@/utils/auth.js'
+
+const userType = ref(getUserType())
+const monitorRef = ref()
+const searchVal = ref('')
+const selectNum = ref(6);
+const numOption = ref([
+ { label: '6个', value: 6 },
+ { label: '2个', value: 2 },
+ { label: '1个', value: 1 },
+])
+
+const shebeiData = ref([
+ { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
+ { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
+ { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
+ { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
+ { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
+ { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
+ { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
+ { name: '雷达水位计', code: 'SWY001', image: '', online: true, time: '2025-02-15', address: '上游灌木丛' },
+])
+
+// 全屏操作
+const handleFullScreen = () => {
+ monitorRef.value.requestFullscreen()
+}
</script>
<template>
- <div>
- 设备管理
+ <div class="shebei">
+ <div class="shebei-menu">
+ <div class="menu-t">设备列表</div>
+ <el-menu class="el-menu">
+ <el-sub-menu index="1">
+ <template #title>
+ <span>雷达水位计</span>
+ </template>
+ <el-menu-item index="1-1">SWY001</el-menu-item>
+ <el-menu-item index="1-2">SWY002</el-menu-item>
+ </el-sub-menu>
+ <el-sub-menu index="2">
+ <template #title>
+ <span>雷达测速仪</span>
+ </template>
+ <el-menu-item index="2-1">CY001</el-menu-item>
+ <el-menu-item index="2-2">CY002</el-menu-item>
+ </el-sub-menu>
+ <el-sub-menu index="3">
+ <template #title>
+ <span>雷达流量计</span>
+ </template>
+ <el-menu-item index="3-1">LJL001</el-menu-item>
+ <el-menu-item index="3-2">LJL002</el-menu-item>
+ </el-sub-menu>
+ </el-menu>
+ </div>
+ <div class="shebei-monitor">
+ <div class="monitor-tool">
+ <div class="tool-l">
+ <div class="name">展示数量</div>
+ <el-select
+ v-model="selectNum"
+ class="tool-select"
+ placeholder="Select"
+ style="width: 15rem"
+ >
+ <el-option
+ v-for="item in numOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-input v-model="searchVal" style="width: 20rem" placeholder="请输入监测点名称" />
+ <el-button><el-icon><Search /></el-icon>搜索</el-button>
+ <el-button style="margin-left: 0" v-if="userType === '1'"><el-icon><Plus /></el-icon>新增</el-button>
+ </div>
+ <div class="tool-r" @click="handleFullScreen">
+ <img src="@/assets/images/flow/fullscreen.png" />
+ 全屏
+ </div>
+ </div>
+ <div class="monitor-box" ref="monitorRef">
+ <div class="list-six list" v-if="selectNum === 6">
+ <div class="item" v-for="(item, index) in shebeiData" :key="index">
+ <div class="item-t">
+ <div>{{item.name}}</div>
+ <div>{{item.code}}</div>
+ </div>
+ <div class="item-img">
+ <img v-if="item.image" :src="item.image" />
+ </div>
+ <div class="item-info">
+ <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
+ <div class="time">安装时间： <span>{{item.time}}</span></div>
+ <div class="address">安装位置： <span>{{item.address}}</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="list-two list" v-else-if="selectNum === 2">
+ <div class="item" v-for="(item, index) in shebeiData" :key="index">
+ <div class="item-t">
+ <div>{{item.name}}</div>
+ <div>{{item.code}}</div>
+ </div>
+ <div class="item-img">
+ <img v-if="item.image" :src="item.image" />
+ </div>
+ <div class="item-info">
+ <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
+ <div class="time">安装时间： <span>{{item.time}}</span></div>
+ <div class="address">安装位置： <span>{{item.address}}</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="list-one list" v-else-if="selectNum === 1">
+ <div class="item" v-for="(item, index) in shebeiData" :key="index">
+ <div class="item-t">
+ <div>{{item.name}}</div>
+ <div>{{item.code}}</div>
+ </div>
+ <div class="item-img">
+ <img v-if="item.image" :src="item.image" />
+ </div>
+ <div class="item-info">
+ <div class="online">设备在线状态： <span :style="{color: item.online ? '#56d12c' : '#bababa'}">{{item.online ? '在线' : '掉线'}}</span></div>
+ <div class="time">安装时间： <span>{{item.time}}</span></div>
+ <div class="address">安装位置： <span>{{item.address}}</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="list-single" v-else></div>
+ </div>
+ </div>
</div>
</template>
<style scoped lang="scss">
-
+.shebei{
+ height: 100%;
+ display: flex;
+ &-menu{
+ flex-shrink: 0;
+ width: 20%;
+ height: 100%;
+ padding: 10px 0;
+ background: linear-gradient( 135deg, #91BDDB 0%, #9EC2DB 99%);
+ overflow-y: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ .menu-t{
+ height: 40px;
+ line-height: 40px;
+ padding-left: 20px;
+ font-size: 26px;
+ color: #fff;
+ background: url("@/assets/images/flow/monitor-title-bg.png") no-repeat;
+ background-size: 100% 100%;
+ }
+ .el-menu{
+ background-color: transparent;
+ border-right: none;
+ :deep(.el-menu){
+ background-color: transparent;
+ }
+ :deep(.el-sub-menu__title:hover) {
+ background-color: rgba(0, 0, 0, 0.06);
+ }
+ :deep(.el-menu-item.is-active) {
+ color: #fff;
+ }
+ }
+ }
+ &-monitor{
+ flex-shrink: 0;
+ width: 80%;
+ height: 100%;
+ background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
+ .monitor-tool{
+ width: 100%;
+ height: 60px;
+ padding: 0 30px;
+ background: linear-gradient( 90deg, #91BDDB 0%, #DADFE3 100%);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .tool-l{
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ .name{
+ font-size: 1.1rem;
+ }
+ }
+ .tool-r{
+ display: flex;
+ align-items: center;
+ img{
+ width: 25px;
+ margin-right: 10px;
+ }
+ }
+ }
+ .monitor-box{
+ height: calc(100% - 60px);
+ padding-top: 10px;
+ .list{
+ height: 100%;
+ padding: 0 30px;
+ overflow-y: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ .item{
+ flex-shrink: 0;
+ background: rgba(23,108,229,0.3);
+ border: 1px solid #176CE5;
+ border-radius: 8px;
+ }
+ }
+ .list-six{
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ .item{
+ width: 32%;
+ height: 48%;
+ padding: 10px 20px;
+ .item-t{
+ height: 10%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 28px;
+ color: #fff;
+ }
+ .item-img{
+ margin-top: 10px;
+ width: 100%;
+ height: 68%;
+ background-color: #000;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .item-info{
+ height: 18%;
+ display: flex;
+ flex-wrap: wrap;
+ color: #fff;
+ font-size: 1.2rem;
+ .online,
+ .time{
+ width: 50%;
+ padding: 6px 0;
+ }
+ .address{
+ width: 100%;
+ }
+ }
+ }
+ }
+ .list-two{
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ .item{
+ width: 49%;
+ height: 99%;
+ padding: 30px;
+ .item-t{
+ height: 10%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 36px;
+ color: #fff;
+ }
+ .item-img{
+ margin-top: 10px;
+ width: 100%;
+ height: 68%;
+ background-color: #000;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .item-info{
+ display: flex;
+ flex-wrap: wrap;
+ color: #fff;
+ font-size: 1.5rem;
+ .online,
+ .time{
+ width: 50%;
+ padding: 20px 0;
+ }
+ .address{
+ width: 100%;
+ }
+ }
+ }
+ }
+ .list-one{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .item{
+ width: 70%;
+ height: 99%;
+ padding: 30px;
+ margin-bottom: 30px;
+ .item-t{
+ height: 10%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 36px;
+ color: #fff;
+ }
+ .item-img{
+ margin-top: 10px;
+ width: 100%;
+ height: 75%;
+ background-color: #000;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .item-info{
+ display: flex;
+ flex-wrap: wrap;
+ color: #fff;
+ font-size: 1.5rem;
+ .online,
+ .time{
+ width: 50%;
+ padding: 20px 0;
+ }
+ .address{
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/screen/temperature/statics/index.vue b/src/views/screen/temperature/statics/index.vue
index 63edf7c..f9c8747 100644
--- a/src/views/screen/temperature/statics/index.vue
+++ b/src/views/screen/temperature/statics/index.vue
@@ -1,13 +1,280 @@
<script setup>
+import {onMounted, ref} from "vue";
+import * as echarts from 'echarts/core';
+const wenduType = ref(3)
+const wenduChartRef = ref()
+let wenduCharts = null;
+const wenduTimeValue = ref()
+const shuiweiType = ref(3)
+const shuiweiChartRef = ref()
+let shuiweiCharts = null
+const shuiweiTimeValue = ref()
+
+const handleSelectType = (type) => {
+ if(type === 'wendu') {
+ wenduTimeValue.value = 0
+ } else if (type === 'shuiwei') {
+ shuiweiTimeValue.value = 0
+ }
+}
+
+const initwenduChart = () => {
+ if(wenduChartRef.value) {
+ wenduCharts = echarts.init(wenduChartRef.value);
+ const options = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: 80,
+ left: 60,
+ right: 60,
+ bottom: 60
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: '℃',
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ series: [
+ {
+ data: [36, 44, 38, 24, 63],
+ type: 'line',
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#00FFFF' // 0% 处的颜色
+ }, {
+ offset: 1, color: 'rgba(0,255,255,0.2)' // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ }
+ }
+ ]
+ }
+ wenduCharts.setOption(options);
+ }
+}
+
+const initshuiweiChart = () => {
+ if(shuiweiChartRef.value) {
+ shuiweiCharts = echarts.init(shuiweiChartRef.value);
+ const options = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ top: 80,
+ left: 60,
+ right: 60,
+ bottom: 60
+ },
+ xAxis: {
+ type: 'category',
+ data: ['设备离线', '水位异常', '流量异常', '流速异常', '其他异常'],
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ name: 'm',
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: '1.2rem'
+ }
+ },
+ series: [
+ {
+ data: [36, 44, 38, 24, 63],
+ type: 'bar',
+ itemStyle: {
+ color: '#BBCFFF'
+ }
+ }
+ ]
+ }
+ shuiweiCharts.setOption(options);
+ }
+}
+
+onMounted(() => {
+ initwenduChart()
+ initshuiweiChart()
+})
</script>
<template>
- <div>
- 汇总统计
+ <div class="statis">
+ <div class="item">
+ <div class="item-t">
+ <div class="name">水温汇总统计</div>
+ <div class="select">
+ <el-radio-group v-model="wenduType" @change="handleSelectType('wendu')">
+ <el-radio :value="1">日</el-radio>
+ <el-radio :value="2">月</el-radio>
+ <el-radio :value="3">年</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="charts" ref="wenduChartRef"></div>
+ <div class="title">
+ <el-date-picker
+ v-if="wenduType === 1"
+ v-model="wenduTimeValue"
+ type="date"
+ placeholder="请选择时间"
+ />
+ <el-date-picker
+ v-else-if="wenduType === 2"
+ v-model="wenduTimeValue"
+ type="month"
+ placeholder="请选择时间"
+ />
+ <el-date-picker
+ v-else
+ v-model="wenduTimeValue"
+ type="year"
+ placeholder="请选择时间"
+ />
+ <div>电站平均水温汇总</div>
+ </div>
+ </div>
+ <div class="item">
+ <div class="item-t">
+ <div class="name">水位汇总统计</div>
+ <div class="select">
+ <el-radio-group v-model="shuiweiType" @change="handleSelectType('shuiwei')">
+ <el-radio :value="1">日</el-radio>
+ <el-radio :value="2">月</el-radio>
+ <el-radio :value="3">年</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="charts" ref="shuiweiChartRef"></div>
+ <div class="title">
+ <el-date-picker
+ v-if="wenduType === 1"
+ v-model="shuiweiTimeValue"
+ type="date"
+ placeholder="请选择时间"
+ />
+ <el-date-picker
+ v-else-if="wenduType === 2"
+ v-model="shuiweiTimeValue"
+ type="month"
+ placeholder="请选择时间"
+ />
+ <el-date-picker
+ v-else
+ v-model="shuiweiTimeValue"
+ type="year"
+ placeholder="请选择时间"
+ />
+ <div>电站平均水位汇总</div>
+ </div>
+ </div>
</div>
</template>
<style scoped lang="scss">
-
+.statis{
+ height: 100%;
+ background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+ .item{
+ width: 48%;
+ height: 96%;
+ background: rgba(23,108,229,0.3);
+ border: 1px solid #176CE5;
+ border-radius: 8px;
+ .item-t{
+ height: 10%;
+ padding: 0 30px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .name{
+ font-size: 36px;
+ color: #fff;
+ }
+ .select{
+ :deep(.el-radio){
+ color: #fff;
+ }
+ :deep(.el-radio__label){
+ font-size: 20px;
+ }
+ :deep(.el-radio__input.is-checked+.el-radio__label){
+ color: #00ff00;
+ }
+ :deep(.el-radio__input.is-checked .el-radio__inner){
+ background-color: #00ff00;
+ }
+ }
+ }
+ .charts{
+ height: 80%;
+ }
+ .title{
+ height: 10%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 26px;
+ color: #fff;
+ :deep(.el-date-editor){
+ width: 10rem;
+ }
+ :deep(.el-input__wrapper){
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 0;
+ .el-input__prefix{
+ color: #fff;
+ font-size: 1.2rem;
+ }
+ .el-input__inner{
+ color: #fff;
+ font-size: 1.2rem;
+ &::placeholder{
+ color: #fff;
+ font-size: 1.2rem;
+ }
+ }
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ffb2200..01d2789 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -341,7 +341,7 @@
getUserType()
getList();
</script>
- <style lang="scss">
+ <style lang="scss" scoped>
.table-headImg{
max-width: 100px;
height: 50px;
--
Gitblit v1.9.3