From 95dc548e2133a3a99e2edc1bc025e22489a29823 Mon Sep 17 00:00:00 2001 From: gtz217 <535262213@qq.com> Date: Thu, 16 Dec 2021 20:18:52 +0800 Subject: [PATCH] update energy --- src/assets/scss/_base.scss | 127 ++++++++++++--- src/assets/scss/_variables.scss | 5 +- src/components/Charts/MixChart.vue | 172 ++++++++------------- src/components/Charts/RingChart.vue | 8 +- src/icons/svg/icon-丙烷.svg | 19 +++ src/icons/svg/icon-二氧化硫.svg | 16 ++ src/icons/svg/icon-氨气.svg | 16 ++ src/icons/svg/icon-氮气.svg | 16 ++ src/icons/svg/icon-甲醇.svg | 16 ++ src/icons/svg/icon-电压.svg | 16 ++ src/views/energy/ammonia-analysis.vue | 45 +++--- src/views/energy/ammonia.vue | 78 +++++----- src/views/energy/electric-acquisition.vue | 4 +- src/views/energy/electric.vue | 143 +++++++++-------- src/views/energy/kiln-electric.vue | 180 ++++++++++++---------- src/views/energy/kiln-speed.vue | 47 +++--- src/views/energy/nitrogen.vue | 74 +++++---- src/views/energy/process-temperature.vue | 45 +++--- src/views/energy/sulfur-dioxide.vue | 78 +++++----- src/views/energy/sump-temperature.vue | 41 +++-- src/views/main-navbar.vue | 8 +- src/views/main-sidebar.vue | 2 +- 22 files changed, 663 insertions(+), 493 deletions(-) create mode 100644 src/icons/svg/icon-丙烷.svg create mode 100644 src/icons/svg/icon-二氧化硫.svg create mode 100644 src/icons/svg/icon-氨气.svg create mode 100644 src/icons/svg/icon-氮气.svg create mode 100644 src/icons/svg/icon-甲醇.svg create mode 100644 src/icons/svg/icon-电压.svg diff --git a/src/assets/scss/_base.scss b/src/assets/scss/_base.scss index 6e3f351..63aea0d 100644 --- a/src/assets/scss/_base.scss +++ b/src/assets/scss/_base.scss @@ -122,9 +122,13 @@ img { right: 0; left: 0; z-index: 1030; - height: 50px; + height: 64px; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); background-color: $navbar--background-color; + + &-icon { + font-size: 18px; + } &--inverse { .site-navbar__body { @@ -158,17 +162,17 @@ img { &__header { position: relative; float: left; - width: 230px; - height: 50px; + width: 336px; + height: 64px; overflow: hidden; } &__brand { display: table-cell; vertical-align: middle; - width: 230px; - height: 50px; + width: 336px; + height: 64px; margin: 0; - line-height: 50px; + line-height: 64px; font-size: 20px; text-align: center; text-transform: uppercase; @@ -188,6 +192,13 @@ img { &-mini { display: none; } + &-lg { + text-align: left; + text-indent: 15px; + font-weight: normal; + font-size: 16px; + cursor: pointer; + } } &__switch { font-size: 18px; @@ -210,7 +221,7 @@ img { } &__body { position: relative; - margin-left: 230px; + margin-left: 336px; padding-right: 15px; background-color: #fff; } @@ -228,8 +239,8 @@ img { } .el-menu-item, .el-submenu > .el-submenu__title { - height: 50px; - line-height: 50px; + height: 64px; + line-height: 64px; } .el-submenu > .el-menu { top: 55px; @@ -249,13 +260,18 @@ img { ------------------------------ */ .site-sidebar { position: fixed; - top: 50px; + top: 64px; left: 0; bottom: 0; z-index: 1020; - width: 230px; + width: 336px; overflow: hidden; + .el-menu-item, .el-submenu__title { + height: 48px; + line-height: 48px; + } + &--dark, &--dark-popper { background-color: $sidebar--background-color-dark; @@ -264,33 +280,33 @@ img { background-color: $sidebar--background-color-dark; .el-menu-item, .el-submenu > .el-submenu__title { - color: $sidebar--color-text-dark; + color: #fff; &:focus, &:hover { - color: mix(#fff, $sidebar--color-text-dark, 50%); - background-color: mix(#fff, $sidebar--background-color-dark, 2.5%); + color: #fff; + background-color: #2863af; } } .el-menu, .el-submenu.is-opened { - background-color: mix(#000, $sidebar--background-color-dark, 15%); + background-color: #0b253f; } .el-menu-item.is-active, .el-submenu.is-active > .el-submenu__title { - color: mix(#fff, $sidebar--color-text-dark, 80%); + color: #fff; } } } &__inner { position: relative; z-index: 1; - width: 250px; + width: 356px; height: 100%; padding-bottom: 15px; overflow-y: scroll; } &__menu.el-menu { - width: 230px; + width: 336px; border-right: 0; } &__menu-icon { @@ -310,8 +326,8 @@ img { &__wrapper { position: relative; - padding-top: 50px; - margin-left: 230px; + padding-top: 64px; + margin-left: 336px; min-height: 100%; background: $content--background-color; } @@ -321,8 +337,8 @@ img { > .el-tabs { > .el-tabs__header { position: fixed; - top: 50px; - left: 230px; + top: 64px; + left: 336px; right: 0; z-index: 930; padding: 0 55px 0 15px; @@ -338,7 +354,7 @@ img { > .el-tabs__content { > .site-tabs__tools { position: fixed; - top: 50px; + top: 64px; right: 0; z-index: 931; height: 40px; @@ -365,5 +381,68 @@ img { background-color: #fff; border-radius: 15px; padding: 20px; - min-height: calc(100vh - 145px); + min-height: calc(100vh - 159px); +} + +.base-container{ + border-radius: 25px; + h3 { + margin: 0; + font-size: 16px; + } + .base-container-titleline{ + position: absolute; + width: 4px; + height: 16px; + background: #3E6AF7; + border-radius: 2px; + left: -8px; + top: 1px + } + .el-tabs--border-card{ + border: 0; + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + } + .el-tabs__header { + border-bottom: 0; + background: #fff; + } + .el-tabs__item{ + border: 0 !important; + } + .el-tabs__nav-prev, .el-tabs__nav-next{ + width: 56px; + font-size: 40px; + } + .el-tabs__nav-next{ + text-align: right; + } + .el-tabs__nav-wrap.is-scrollable{ + padding: 0 56px; + } + .el-tabs__nav-scroll{ + padding: 10px; + } + .el-tabs__nav{ + .el-tabs__item, .is-active { + color: #000000 !important; + } + .is-active{ + box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); + border-radius: 8px; + } + } +} + +.el-radio-group{ + border: 1px solid #dcdfe6; + border-radius: 4px; +} + +.el-radio-button__orig-radio:checked+.el-radio-button__inner{ + border-radius: 4px; +} + +.el-radio-button__inner{ + border: 0 !important; } diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 5a058b8..5fc8ca9 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -1,12 +1,13 @@ // 站点主色 // tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致 $--color-primary: #3E8EF7; +$--color-bar: #001529; // Navbar -$navbar--background-color: $--color-primary; +$navbar--background-color: $--color-bar; // Sidebar -$sidebar--background-color-dark: #263238; +$sidebar--background-color-dark: $--color-bar; $sidebar--color-text-dark: #8a979e; // Content diff --git a/src/components/Charts/MixChart.vue b/src/components/Charts/MixChart.vue index 7403379..68a259b 100644 --- a/src/components/Charts/MixChart.vue +++ b/src/components/Charts/MixChart.vue @@ -84,19 +84,12 @@ export default { type: 'bar', barMaxWidth: 35, barGap: '10%', - itemStyle: { - normal: { - color: 'rgba(255,144,128,1)', - label: { - show: true, - textStyle: { - color: '#fff' - }, - position: 'insideTop', - formatter (p) { - return p.value > 0 ? p.value : '' - } - } + color: '#5AD8A6', + label: { + show: true, + position: 'top', + formatter (p) { + return p.value > 0 ? p.value : '' } }, data: this.dataList.map(item => { @@ -108,19 +101,12 @@ export default { type: 'bar', barMaxWidth: 35, barGap: '10%', - itemStyle: { - normal: { - color: 'rgba(0,191,183,1)', - label: { - show: true, - textStyle: { - color: '#fff' - }, - position: 'insideTop', - formatter (p) { - return p.value > 0 ? p.value : '' - } - } + color: '#5B8FF9', + label: { + show: true, + position: 'top', + formatter (p) { + return p.value > 0 ? p.value : '' } }, data: this.lastDataList.map(item => { @@ -134,17 +120,12 @@ export default { type: 'line', symbolSize: 10, symbol: 'circle', - itemStyle: { - normal: { - color: 'rgba(255,144,128,1)', - barBorderRadius: 0, - label: { - show: true, - position: 'top', - formatter (p) { - return p.value > 0 ? p.value : '' - } - } + color: '#5B8FF9', + label: { + show: true, + position: 'top', + formatter (p) { + return p.value > 0 ? p.value : '' } }, data: this.dataList.map(item => { @@ -156,17 +137,12 @@ export default { type: 'line', symbolSize: 10, symbol: 'circle', - itemStyle: { - normal: { - color: 'rgba(0,191,183,1)', - barBorderRadius: 0, - label: { - show: true, - position: 'top', - formatter (p) { - return p.value > 0 ? p.value : '' - } - } + color: '#5AD8A6', + label: { + show: true, + position: 'top', + formatter (p) { + return p.value > 0 ? p.value : '' } }, data: this.lastDataList.map(item => { @@ -195,19 +171,12 @@ export default { type: 'bar', barMaxWidth: 35, barGap: '10%', - itemStyle: { - normal: { - color: 'rgba(255,144,128,1)', - label: { - show: true, - textStyle: { - color: '#fff' - }, - position: 'insideTop', - formatter (p) { - return p.value > 0 ? p.value : '' - } - } + color: '#5B8FF9', + label: { + show: true, + position: 'top', + formatter (p) { + return p.value > 0 ? p.value : '' } }, data: this.dataList.map(item => { @@ -219,19 +188,12 @@ export default { type: 'bar', barMaxWidth: 35, barGap: '10%', - itemStyle: { - normal: { - color: 'rgba(0,191,183,1)', - label: { - show: true, - textStyle: { - color: '#fff' - }, - position: 'insideTop', - formatter (p) { - return p.value > 0 ? p.value : '' - } - } + color: '#5AD8A6', + label: { + show: true, + position: 'top', + formatter (p) { + return p.value > 0 ? p.value : '' } }, data: this.lastDataList.map(item => { @@ -245,17 +207,13 @@ export default { type: 'line', symbolSize: 10, symbol: 'circle', - itemStyle: { - normal: { - color: 'rgba(255,144,128,1)', - barBorderRadius: 0, - label: { - show: true, - position: 'top', - formatter (p) { - return p.value > 0 ? p.value : '' - } - } + color: '#5B8FF9', + barBorderRadius: 0, + label: { + show: true, + position: 'top', + formatter (p) { + return p.value > 0 ? p.value : '' } }, data: this.dataList.map(item => { @@ -267,17 +225,13 @@ export default { type: 'line', symbolSize: 10, symbol: 'circle', - itemStyle: { - normal: { - color: 'rgba(0,191,183,1)', - barBorderRadius: 0, - label: { - show: true, - position: 'top', - formatter (p) { - return p.value > 0 ? p.value : '' - } - } + color: '#5AD8A6', + barBorderRadius: 0, + label: { + show: true, + position: 'top', + formatter (p) { + return p.value > 0 ? p.value : '' } }, data: this.lastDataList.map(item => { @@ -301,15 +255,11 @@ export default { return item.time }) this.chart.setOption({ - backgroundColor: '#344b58', title: { text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter, - x: '20', - top: '20', - textStyle: { - color: '#fff', - fontSize: '22' - }, + x: '10', + top: '10', + fontSize: '18', subtextStyle: { color: '#90979c', fontSize: '16' @@ -327,15 +277,15 @@ export default { left: '5%', right: '5%', borderWidth: 0, - top: 150, - bottom: 95, + top: 100, + bottom: 70, textStyle: { color: '#fff' } }, legend: { - x: '5%', - top: '10%', + x: 20, + top: 55, textStyle: { color: '#90979c' }, @@ -370,9 +320,9 @@ export default { yAxis: [ { type: 'value', - splitLine: { - show: false - }, + // splitLine: { + // show: false + // }, axisLine: { lineStyle: { color: '#90979c' @@ -394,7 +344,7 @@ export default { show: true, height: 30, xAxisIndex: [0], - bottom: 30, + bottom: 10, start: 0, end: 100, handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z', diff --git a/src/components/Charts/RingChart.vue b/src/components/Charts/RingChart.vue index 0d2c2f8..2b98ffc 100644 --- a/src/components/Charts/RingChart.vue +++ b/src/components/Charts/RingChart.vue @@ -2,9 +2,9 @@ * @Author: gtz * @Date: 2021-11-22 19:03:01 * @LastEditors: gtz - * @LastEditTime: 2021-11-30 10:36:52 + * @LastEditTime: 2021-12-16 19:25:02 * @Description: file content - * @FilePath: \mt-qj-wms-ui\src\components\Charts\ringChart.vue + * @FilePath: \mt-qj-wms-ui\src\components\Charts\RingChart.vue -->