mt-ck/mt-qj-wms-ui
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update energy

Browse Source
This commit is contained in:
gtz217 2021-12-16 20:18:52 +08:00
parent 6064bd1961
commit 95dc548e21
22 changed files with 663 additions and 493 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/assets/scss/_base.scss
View File

@ -122,10 +122,14 @@ img {
right: 0; right: 0;
left: 0; left: 0;
z-index: 1030; z-index: 1030;
height: 50px; height: 64px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .08); box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
background-color: $navbar--background-color; background-color: $navbar--background-color;
&-icon {
font-size: 18px;
}
&--inverse { &--inverse {
.site-navbar__body { .site-navbar__body {
background-color: transparent; background-color: transparent;
@ -158,17 +162,17 @@ img {
&__header { &__header {
position: relative; position: relative;
float: left; float: left;
width: 230px; width: 336px;
height: 50px; height: 64px;
overflow: hidden; overflow: hidden;
} }
&__brand { &__brand {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
width: 230px; width: 336px;
height: 50px; height: 64px;
margin: 0; margin: 0;
line-height: 50px; line-height: 64px;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@ -188,6 +192,13 @@ img {
&-mini { &-mini {
display: none; display: none;
} }
&-lg {
text-align: left;
text-indent: 15px;
font-weight: normal;
font-size: 16px;
cursor: pointer;
}
} }
&__switch { &__switch {
font-size: 18px; font-size: 18px;
@ -210,7 +221,7 @@ img {
} }
&__body { &__body {
position: relative; position: relative;
margin-left: 230px; margin-left: 336px;
padding-right: 15px; padding-right: 15px;
background-color: #fff; background-color: #fff;
} }
@ -228,8 +239,8 @@ img {
} }
.el-menu-item, .el-menu-item,
.el-submenu > .el-submenu__title { .el-submenu > .el-submenu__title {
height: 50px; height: 64px;
line-height: 50px; line-height: 64px;
} }
.el-submenu > .el-menu { .el-submenu > .el-menu {
top: 55px; top: 55px;
@ -249,13 +260,18 @@ img {
------------------------------ */ ------------------------------ */
.site-sidebar { .site-sidebar {
position: fixed; position: fixed;
top: 50px; top: 64px;
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 1020; z-index: 1020;
width: 230px; width: 336px;
overflow: hidden; overflow: hidden;
.el-menu-item, .el-submenu__title {
height: 48px;
line-height: 48px;
}
&--dark, &--dark,
&--dark-popper { &--dark-popper {
background-color: $sidebar--background-color-dark; background-color: $sidebar--background-color-dark;
@ -264,33 +280,33 @@ img {
background-color: $sidebar--background-color-dark; background-color: $sidebar--background-color-dark;
.el-menu-item, .el-menu-item,
.el-submenu > .el-submenu__title { .el-submenu > .el-submenu__title {
color: $sidebar--color-text-dark; color: #fff;
&:focus, &:focus,
&:hover { &:hover {
color: mix(#fff, $sidebar--color-text-dark, 50%); color: #fff;
background-color: mix(#fff, $sidebar--background-color-dark, 2.5%); background-color: #2863af;
} }
} }
.el-menu, .el-menu,
.el-submenu.is-opened { .el-submenu.is-opened {
background-color: mix(#000, $sidebar--background-color-dark, 15%); background-color: #0b253f;
} }
.el-menu-item.is-active, .el-menu-item.is-active,
.el-submenu.is-active > .el-submenu__title { .el-submenu.is-active > .el-submenu__title {
color: mix(#fff, $sidebar--color-text-dark, 80%); color: #fff;
} }
} }
} }
&__inner { &__inner {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 250px; width: 356px;
height: 100%; height: 100%;
padding-bottom: 15px; padding-bottom: 15px;
overflow-y: scroll; overflow-y: scroll;
} }
&__menu.el-menu { &__menu.el-menu {
width: 230px; width: 336px;
border-right: 0; border-right: 0;
} }
&__menu-icon { &__menu-icon {
@ -310,8 +326,8 @@ img {
&__wrapper { &__wrapper {
position: relative; position: relative;
padding-top: 50px; padding-top: 64px;
margin-left: 230px; margin-left: 336px;
min-height: 100%; min-height: 100%;
background: $content--background-color; background: $content--background-color;
} }
@ -321,8 +337,8 @@ img {
> .el-tabs { > .el-tabs {
> .el-tabs__header { > .el-tabs__header {
position: fixed; position: fixed;
top: 50px; top: 64px;
left: 230px; left: 336px;
right: 0; right: 0;
z-index: 930; z-index: 930;
padding: 0 55px 0 15px; padding: 0 55px 0 15px;
@ -338,7 +354,7 @@ img {
> .el-tabs__content { > .el-tabs__content {
> .site-tabs__tools { > .site-tabs__tools {
position: fixed; position: fixed;
top: 50px; top: 64px;
right: 0; right: 0;
z-index: 931; z-index: 931;
height: 40px; height: 40px;
@ -365,5 +381,68 @@ img {
background-color: #fff; background-color: #fff;
border-radius: 15px; border-radius: 15px;
padding: 20px; 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;
} }

5
src/assets/scss/_variables.scss
View File

@ -1,12 +1,13 @@
// 站点主色 // 站点主色
// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致 // tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致
$--color-primary: #3E8EF7; $--color-primary: #3E8EF7;
$--color-bar: #001529;
// Navbar // Navbar
$navbar--background-color: $--color-primary; $navbar--background-color: $--color-bar;
// Sidebar // Sidebar
$sidebar--background-color-dark: #263238; $sidebar--background-color-dark: $--color-bar;
$sidebar--color-text-dark: #8a979e; $sidebar--color-text-dark: #8a979e;
// Content // Content

96
src/components/Charts/MixChart.vue
View File

@ -84,20 +84,13 @@ export default {
type: 'bar', type: 'bar',
barMaxWidth: 35, barMaxWidth: 35,
barGap: '10%', barGap: '10%',
itemStyle: { color: '#5AD8A6',
normal: {
color: 'rgba(255,144,128,1)',
label: { label: {
show: true, show: true,
textStyle: { position: 'top',
color: '#fff'
},
position: 'insideTop',
formatter (p) { formatter (p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} }
}
}
}, },
data: this.dataList.map(item => { data: this.dataList.map(item => {
return item.value return item.value
@ -108,20 +101,13 @@ export default {
type: 'bar', type: 'bar',
barMaxWidth: 35, barMaxWidth: 35,
barGap: '10%', barGap: '10%',
itemStyle: { color: '#5B8FF9',
normal: {
color: 'rgba(0,191,183,1)',
label: { label: {
show: true, show: true,
textStyle: { position: 'top',
color: '#fff'
},
position: 'insideTop',
formatter (p) { formatter (p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} }
}
}
}, },
data: this.lastDataList.map(item => { data: this.lastDataList.map(item => {
return item.value return item.value
@ -134,18 +120,13 @@ export default {
type: 'line', type: 'line',
symbolSize: 10, symbolSize: 10,
symbol: 'circle', symbol: 'circle',
itemStyle: { color: '#5B8FF9',
normal: {
color: 'rgba(255,144,128,1)',
barBorderRadius: 0,
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
formatter (p) { formatter (p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} }
}
}
}, },
data: this.dataList.map(item => { data: this.dataList.map(item => {
return item.value return item.value
@ -156,18 +137,13 @@ export default {
type: 'line', type: 'line',
symbolSize: 10, symbolSize: 10,
symbol: 'circle', symbol: 'circle',
itemStyle: { color: '#5AD8A6',
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0,
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
formatter (p) { formatter (p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} }
}
}
}, },
data: this.lastDataList.map(item => { data: this.lastDataList.map(item => {
return item.value return item.value
@ -195,20 +171,13 @@ export default {
type: 'bar', type: 'bar',
barMaxWidth: 35, barMaxWidth: 35,
barGap: '10%', barGap: '10%',
itemStyle: { color: '#5B8FF9',
normal: {
color: 'rgba(255,144,128,1)',
label: { label: {
show: true, show: true,
textStyle: { position: 'top',
color: '#fff'
},
position: 'insideTop',
formatter (p) { formatter (p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} }
}
}
}, },
data: this.dataList.map(item => { data: this.dataList.map(item => {
return item.value return item.value
@ -219,20 +188,13 @@ export default {
type: 'bar', type: 'bar',
barMaxWidth: 35, barMaxWidth: 35,
barGap: '10%', barGap: '10%',
itemStyle: { color: '#5AD8A6',
normal: {
color: 'rgba(0,191,183,1)',
label: { label: {
show: true, show: true,
textStyle: { position: 'top',
color: '#fff'
},
position: 'insideTop',
formatter (p) { formatter (p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} }
}
}
}, },
data: this.lastDataList.map(item => { data: this.lastDataList.map(item => {
return item.value return item.value
@ -245,9 +207,7 @@ export default {
type: 'line', type: 'line',
symbolSize: 10, symbolSize: 10,
symbol: 'circle', symbol: 'circle',
itemStyle: { color: '#5B8FF9',
normal: {
color: 'rgba(255,144,128,1)',
barBorderRadius: 0, barBorderRadius: 0,
label: { label: {
show: true, show: true,
@ -255,8 +215,6 @@ export default {
formatter (p) { formatter (p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} }
}
}
}, },
data: this.dataList.map(item => { data: this.dataList.map(item => {
return item.value return item.value
@ -267,9 +225,7 @@ export default {
type: 'line', type: 'line',
symbolSize: 10, symbolSize: 10,
symbol: 'circle', symbol: 'circle',
itemStyle: { color: '#5AD8A6',
normal: {
color: 'rgba(0,191,183,1)',
barBorderRadius: 0, barBorderRadius: 0,
label: { label: {
show: true, show: true,
@ -277,8 +233,6 @@ export default {
formatter (p) { formatter (p) {
return p.value > 0 ? p.value : '' return p.value > 0 ? p.value : ''
} }
}
}
}, },
data: this.lastDataList.map(item => { data: this.lastDataList.map(item => {
return item.value return item.value
@ -301,15 +255,11 @@ export default {
return item.time return item.time
}) })
this.chart.setOption({ this.chart.setOption({
backgroundColor: '#344b58',
title: { title: {
text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter, text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
x: '20', x: '10',
top: '20', top: '10',
textStyle: { fontSize: '18',
color: '#fff',
fontSize: '22'
},
subtextStyle: { subtextStyle: {
color: '#90979c', color: '#90979c',
fontSize: '16' fontSize: '16'
@ -327,15 +277,15 @@ export default {
left: '5%', left: '5%',
right: '5%', right: '5%',
borderWidth: 0, borderWidth: 0,
top: 150, top: 100,
bottom: 95, bottom: 70,
textStyle: { textStyle: {
color: '#fff' color: '#fff'
} }
}, },
legend: { legend: {
x: '5%', x: 20,
top: '10%', top: 55,
textStyle: { textStyle: {
color: '#90979c' color: '#90979c'
}, },
@ -370,9 +320,9 @@ export default {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
splitLine: { // splitLine: {
show: false // show: false
}, // },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#90979c' color: '#90979c'
@ -394,7 +344,7 @@ export default {
show: true, show: true,
height: 30, height: 30,
xAxisIndex: [0], xAxisIndex: [0],
bottom: 30, bottom: 10,
start: 0, start: 0,
end: 100, 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', 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',

8
src/components/Charts/RingChart.vue
View File

@ -2,9 +2,9 @@
* @Author: gtz * @Author: gtz
* @Date: 2021-11-22 19:03:01 * @Date: 2021-11-22 19:03:01
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-30 10:36:52 * @LastEditTime: 2021-12-16 19:25:02
* @Description: file content * @Description: file content
* @FilePath: \mt-qj-wms-ui\src\components\Charts\ringChart.vue * @FilePath: \mt-qj-wms-ui\src\components\Charts\RingChart.vue
--> -->
<template> <template>
<div class="mod-demo-echarts"> <div class="mod-demo-echarts">
@ -54,7 +54,7 @@
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['55%', '90%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
@ -77,7 +77,7 @@
name: this.name, name: this.name,
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(0, 191, 183, 1)' color: '#5A55D8'
} }
} }
}, },

19
src/icons/svg/icon-丙烷.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60 (88103) - https://sketch.com -->
<title>丙烷</title>
<desc>Created with Sketch.</desc>
<g id="丙烷" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-7" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
<g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#1EECE3" opacity="0.103932">
<path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
</g>
</g>
<g id="量杯,测验,化学" transform="translate(6.000000, 6.857687)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="11.1619524" height="11.1619524"></rect>
<path d="M11.118351,0 L0.378241942,0 C0.273598638,0 0.179855679,0.0425113422 0.11118351,0.110093476 C0.0425113422,0.178765644 0,0.273598638 0,0.378241942 C0,0.548287311 0.122083855,0.694351923 0.28885912,0.721602783 C1.11510521,0.858947119 1.74405506,1.5772798 1.74405506,2.44167709 L1.74405506,9.76670836 C1.74405506,10.5373627 2.36864478,11.1619524 3.13929912,11.1619524 L9.41789735,11.1619524 C10.1885517,11.1619524 10.8131414,10.5373627 10.8131414,9.76670836 L10.8131414,0.741223402 C10.8131414,0.717242645 10.832762,0.697622026 10.8567428,0.697622026 L11.118351,0.697622026 C11.1423318,0.697622026 11.1619524,0.678001406 11.1619524,0.654020649 L11.1619524,0.0436013766 C11.1619524,0.0196206195 11.1423318,0 11.118351,0 Z M9.06908634,9.72310698 C9.06908634,9.74708774 9.04946572,9.76670836 9.02548496,9.76670836 L6.32219961,9.76670836 C6.29821885,9.76670836 6.27859823,9.74708774 6.27859823,9.72310698 L6.27859823,9.11268771 C6.27859823,9.08870696 6.29821885,9.06908634 6.32219961,9.06908634 L9.02548496,9.06908634 C9.04946572,9.06908634 9.06908634,9.08870696 9.06908634,9.11268771 L9.06908634,9.72310698 Z M9.06908634,8.32786293 C9.06908634,8.35184369 9.04946572,8.37146431 9.02548496,8.37146431 L6.32219961,8.37146431 C6.29821885,8.37146431 6.27859823,8.35184369 6.27859823,8.32786293 L6.27859823,7.71744366 C6.27859823,7.6934629 6.29821885,7.67384228 6.32219961,7.67384228 L9.02548496,7.67384228 C9.04946572,7.67384228 9.06908634,7.6934629 9.06908634,7.71744366 L9.06908634,8.32786293 Z M9.06908634,6.93261888 C9.06908634,6.95659964 9.04946572,6.97622026 9.02548496,6.97622026 L6.32219961,6.97622026 C6.29821885,6.97622026 6.27859823,6.95659964 6.27859823,6.93261888 L6.27859823,6.32219961 C6.27859823,6.29821885 6.29821885,6.27859823 6.32219961,6.27859823 L9.02548496,6.27859823 C9.04946572,6.27859823 9.06908634,6.29821885 9.06908634,6.32219961 L9.06908634,6.93261888 Z M9.06908634,5.53737483 C9.06908634,5.56135559 9.04946572,5.58097621 9.02548496,5.58097621 L6.32219961,5.58097621 C6.29821885,5.58097621 6.27859823,5.56135559 6.27859823,5.53737483 L6.27859823,4.92695556 C6.27859823,4.9029748 6.29821885,4.88335418 6.32219961,4.88335418 L9.02548496,4.88335418 C9.04946572,4.88335418 9.06908634,4.9029748 9.06908634,4.92695556 L9.06908634,5.53737483 Z M9.06908634,4.14213078 C9.06908634,4.16611154 9.04946572,4.18573215 9.02548496,4.18573215 L6.32219961,4.18573215 C6.29821885,4.18573215 6.27859823,4.16611154 6.27859823,4.14213078 L6.27859823,3.53171151 C6.27859823,3.50773075 6.29821885,3.48811013 6.32219961,3.48811013 L9.02548496,3.48811013 C9.04946572,3.48811013 9.06908634,3.50773075 9.06908634,3.53171151 L9.06908634,4.14213078 Z M9.06908634,2.74688673 C9.06908634,2.77086748 9.04946572,2.7904881 9.02548496,2.7904881 L6.32219961,2.7904881 C6.29821885,2.7904881 6.27859823,2.77086748 6.27859823,2.74688673 L6.27859823,2.13646745 C6.27859823,2.1124867 6.29821885,2.09286608 6.32219961,2.09286608 L9.02548496,2.09286608 C9.04946572,2.09286608 9.06908634,2.1124867 9.06908634,2.13646745 L9.06908634,2.74688673 Z" id="形状" fill="#1EECE3"></path>
</g>
<rect id="矩形备份-5" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

16
src/icons/svg/icon-二氧化硫.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

16
src/icons/svg/icon-氨气.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60 (88103) - https://sketch.com -->
<title>氨气</title>
<desc>Created with Sketch.</desc>
<g id="氨气" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-7" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
<g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#F78C3E" opacity="0.103932">
<path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
</g>
</g>
<path d="M8.47864897,13.2624837 L8.47864897,8.27462828 L9.82447696,8.27462828 L9.82447696,15.5586831 L8.15335406,15.5586831 L6.35466452,10.4560177 L6.35466452,15.5586831 L5.00883654,15.5586831 L5.00883654,8.27462828 L6.6927161,8.27462828 L8.47864897,13.2624837 L8.47864897,13.2624837 Z M12.3375396,8.27462828 L12.3375396,11.0619592 L14.0533109,11.0619592 L14.0533109,8.27462828 L15.5203272,8.27462828 L15.5203272,15.5586831 L14.0533109,15.5586831 L14.0533109,12.3248689 L12.3375396,12.3248689 L12.3375396,15.5586831 L10.8705234,15.5586831 L10.8705234,8.27462828 L12.3375396,8.27462828 Z M17.1468017,14.8443099 C17.2231917,14.9919573 17.383765,15.0760671 17.5486366,15.0547949 C17.6414477,15.059803 17.7339169,15.0399882 17.8165266,14.9973899 C17.8805964,14.9613281 17.9335448,14.9083798 17.9696065,14.8443099 C18.0080986,14.770947 18.0319297,14.6907878 18.0397682,14.6083116 C18.0452758,14.5148438 18.0452758,14.4211328 18.0397682,14.327665 C18.0477582,14.2300271 18.0477582,14.1318997 18.0397682,14.0342618 C18.0270964,13.9490998 17.9989971,13.8669634 17.9568499,13.7918852 C17.9139897,13.7193845 17.8522673,13.6598666 17.7782566,13.6196702 C17.6830775,13.5733322 17.5778617,13.5514123 17.4720966,13.5558869 L17.1659367,13.5558869 L17.1659367,12.9563237 L17.4657183,12.9563237 C17.6299477,12.9591253 17.7831692,12.8740022 17.8675532,12.7330821 C17.9092916,12.6640348 17.9394553,12.5886254 17.9568499,12.5098405 C17.9666461,12.4208125 17.9666461,12.3309786 17.9568499,12.2419506 C17.9713278,12.0811721 17.9332812,11.9200337 17.8484182,11.7827107 C17.764924,11.6886038 17.6421748,11.639032 17.516745,11.6487657 C17.4349853,11.6450257 17.3536582,11.6626099 17.2807467,11.6997924 C17.2179579,11.7354128 17.1669626,11.7886253 17.1340451,11.8528724 C17.0994817,11.9250792 17.0778915,12.0028039 17.0702617,12.0824923 C17.0645331,12.1802095 17.0645331,12.2781784 17.0702617,12.3758955 L16.228322,12.3758955 C16.1989795,12.0098702 16.3211906,11.6478487 16.5663735,11.3744975 C16.8390373,11.1374533 17.1945595,11.0181814 17.555015,11.0428242 C17.8968552,11.0223443 18.2351536,11.1215785 18.5117647,11.3234708 C18.7566926,11.5473503 18.8842593,11.8726452 18.8561946,12.2036806 C18.8598804,12.4300282 18.7954342,12.6522563 18.671223,12.8415138 C18.5515295,13.0109051 18.370981,13.1274617 18.1673348,13.1668087 C18.4224681,13.184668 18.6565528,13.3154238 18.805168,13.5239953 C18.9358564,13.7386968 19.0002065,13.9872213 18.9901396,14.2383684 C18.9894581,14.3973997 18.9701924,14.5558064 18.9327346,14.7103649 C18.8942531,14.8726863 18.8177358,15.0235346 18.709493,15.1504698 C18.5845102,15.2924102 18.4269091,15.4018554 18.2502531,15.4693864 C18.0074026,15.5582526 17.7496802,15.5994016 17.4912316,15.5905747 C17.1278237,15.6172659 16.7703482,15.4872748 16.5089686,15.2333881 C16.276196,14.9486332 16.1599621,14.5862569 16.1836736,14.2192334 L17.0638834,14.2192334 C17.0468888,14.4311146 17.0751536,14.6441874 17.1468017,14.8443099 L17.1468017,14.8443099 Z" id="形状" fill="#F78C3E" fill-rule="nonzero"></path>
<rect id="矩形备份-2" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

16
src/icons/svg/icon-氮气.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60 (88103) - https://sketch.com -->
<title>氮气</title>
<desc>Created with Sketch.</desc>
<g id="氮气" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-7" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
<g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#F74D3E" opacity="0.103932">
<path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
</g>
</g>
<path d="M11.1315545,7.41029124 L12.7765769,7.41029124 L12.7765769,16.3136828 L10.7339424,16.3136828 L8.53538163,10.0766309 L8.53538163,16.3136828 L6.89035919,16.3136828 L6.89035919,7.41029124 L8.94858632,7.41029124 L11.1315545,13.5070095 L11.1315545,7.41029124 Z M13.6253742,16.5897088 C13.6253742,16.3497576 13.6521255,16.1114278 13.7064388,15.8763406 C13.7566759,15.6561581 13.8357193,15.4435589 13.9415261,15.244037 C14.0533476,15.0362427 14.1864686,14.8406363 14.3387424,14.6603721 C14.512298,14.4538586 14.6991434,14.2588895 14.8980879,14.0767072 L15.3682624,13.6389585 C15.4797402,13.5425181 15.582795,13.4367514 15.6763078,13.3228067 C15.7484553,13.2336357 15.808443,13.1363582 15.8546498,13.0309743 C15.9003471,12.9307635 15.9304197,12.8241424 15.9438209,12.7148225 C15.9519273,12.5851192 15.9519273,12.4554158 15.9438209,12.3257125 C15.9865668,12.1524649 15.946538,11.9691889 15.8354529,11.8295391 C15.7243679,11.6898893 15.5547919,11.6096621 15.3763689,11.6123443 C15.1412866,11.5888427 14.9192968,11.7246872 14.8332363,11.9447091 C14.7845947,12.0580584 14.7544871,12.1784889 14.7440653,12.3013932 L14.7440653,12.7310354 L13.6253742,12.7310354 L13.6253742,12.5364804 C13.5955408,12.084481 13.75061,11.6397543 14.0550164,11.304299 C14.4310414,10.9864937 14.9183231,10.8318474 15.4087947,10.8746568 C15.8773033,10.8368024 16.3422378,10.9820944 16.7058278,11.2799796 C17.0016873,11.5907953 17.1544691,12.0109454 17.1273635,12.4392029 C17.1281724,12.6106323 17.1118788,12.7817149 17.0787248,12.9499097 C17.0464558,13.1070449 16.9947156,13.2595423 16.9247021,13.4038713 C16.8502985,13.5575683 16.7577673,13.7018081 16.6490826,13.8335135 C16.5214749,13.9836804 16.3833143,14.1245501 16.2356533,14.2550492 L15.5871368,14.854927 C15.4335539,14.988679 15.2973803,15.1411934 15.1818139,15.3088886 C15.0991397,15.427719 15.0361811,15.5591109 14.9953654,15.6979985 L17.1597894,15.6979985 L17.1597894,16.5897088 L13.6253742,16.5897088 L13.6253742,16.5897088 Z" id="形状" fill="#F74D3E" fill-rule="nonzero"></path>
<rect id="矩形备份-3" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

16
src/icons/svg/icon-甲醇.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60 (88103) - https://sketch.com -->
<title>甲醇</title>
<desc>Created with Sketch.</desc>
<g id="甲醇" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-7" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
<g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#403EF7" opacity="0.103932">
<path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
</g>
</g>
<path d="M15.8788756,7.64322117 L8.09994157,7.64322117 C7.76411233,7.64322117 7.48266603,7.92465454 7.48266603,8.26049671 L7.48266603,10.1471005 L7.01407272,10.1471005 L7.01407272,10.7179209 L7.48266603,10.7179209 L7.48266603,13.7275278 L7.01407272,13.7275278 L7.01407272,14.2852217 L7.48266603,14.2852217 L7.48266603,17.2827245 C7.48266603,17.6185796 7.76411233,17.9 8.09994157,17.9 L15.8788756,17.9 C16.2237837,17.9 16.5052171,17.6185666 16.5052171,17.2827245 L16.5052171,14.3103776 L16.9859273,14.3103776 L16.9859273,13.7275278 L16.5052171,13.7275278 L16.5052171,10.7179209 L16.9859273,10.7179209 L16.9859273,10.1898278 L16.5052171,10.1898278 L16.5052171,8.26049671 C16.5052171,7.92462867 16.2237708,7.64322117 15.8788756,7.64322117 Z M7.48266603,10.7221735 L16.5052171,10.7221735 L16.5052171,11.2864268 L7.48266603,11.2864268 L7.48266603,10.7221735 Z M7.48266603,14.3064604 L16.5052171,14.3064604 L16.5052171,14.8707137 L7.48266603,14.8707137 L7.48266603,14.3064604 Z M8.65345779,6.1 L11.0043918,6.1 L11.0043918,7.08939456 L8.65345779,7.08939456 L8.65345779,6.1 Z" id="形状" fill="#403EF7" fill-rule="nonzero"></path>
<rect id="矩形备份-4" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

16
src/icons/svg/icon-电压.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 60 (88103) - https://sketch.com -->
<title>电压</title>
<desc>Created with Sketch.</desc>
<g id="电压" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-7" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
<g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#AD3EF7" opacity="0.103932">
<path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
</g>
</g>
<path d="M13.8144243,17.0071735 L17.6684529,6.79683636 C17.7417306,6.60270457 17.6437589,6.38592638 17.4496271,6.31264873 C17.3921764,6.29096319 17.3302861,6.28368982 17.2693731,6.29146524 L17.1656733,6.3047023 C16.8422285,6.346038 16.5592242,6.54244031 16.4073797,6.83100291 C13.5269108,12.3049943 11.997501,15.2202924 11.8191502,15.5768973 C11.6358627,15.9433728 11.9086355,15.530083 12.6374685,14.3370278 L12.6374685,14.3370278 C9.96162253,9.69646748 8.35052735,7.0886171 7.80418295,6.5134767 C7.80418295,6.5134767 7.80418295,6.5134767 7.80418295,6.5134767 C7.51163552,6.20551007 7.0248227,6.19301034 6.71685607,6.48555776 C6.49255614,6.69862749 6.41775315,7.02535035 6.52704811,7.31477009 L10.1855757,17.0071735 C10.470523,17.762074 11.1931111,18.2616747 12,18.2616747 C12.8068889,18.2616747 13.529477,17.762074 13.8144243,17.0071735 Z" id="V" fill="#F73EE2" fill-rule="nonzero"></path>
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

21
src/views/energy/ammonia-analysis.vue
View File

@ -2,43 +2,42 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-16 10:45:24 * @LastEditTime: 2021-12-16 15:39:28
* @Description: * @Description:
--> -->
<template> <template>
<div class="chart-container"> <div class="chart-container">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="2">
<div class="kiln-electric-treebox"> <div class="kiln-electric-treebox">
<el-tree :data="yaoluList" @node-click="handleNode" /> <el-tree :data="yaoluList" @node-click="handleNode" />
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="22">
<el-row style="margin: 20px 0" :gutter="20"> <el-card class="base-container" style="min-height: 540px">
<el-col style="margin: 20px 0"> <el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="氮气用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="氮气用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -699,7 +698,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
.kiln-electric-treebox { .kiln-electric-treebox {
width: 100%; width: 100%;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;

44
src/views/energy/ammonia.vue
View File

@ -2,58 +2,64 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-16 10:28:34 * @LastEditTime: 2021-12-16 20:13:35
* @Description: * @Description:
--> -->
<template> <template>
<div class="chart-container"> <div class="chart-container">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="2">
<div class="kiln-electric-treebox"> <div class="kiln-electric-treebox">
<el-tree :data="yaoluList" @node-click="handleNode" /> <el-tree :data="yaoluList" @node-click="handleNode" />
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="22">
<el-row> <el-row>
<el-row style="margin: 20px 0" :gutter="20"> <el-col :span="8">
<el-col> <el-card class="base-container" style="height: 214px">
<el-row style="position: relative;">
<div class="base-container-titleline"></div>
<h3>氨气流量分析</h3> <h3>氨气流量分析</h3>
</el-row>
<el-row>
<el-col style="padding: 24px 0">
<p
:title="'氨气流量（立方米）：123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="氨气"></icon-svg>
氨气流量（立方米）：<strong style="font-size: 32px; color: #f78c3e">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日氨气流量(立方米)：1145</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 400px">
<el-card>
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日氨气流量(立方米)：1145</p>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</el-row> <el-card class="base-container" style="margin-top: 20px; min-height: 540px">
<el-row style="margin: 20px 0" :gutter="20"> <el-row style="position: absolute; z-index: 10; right: 20px">
<el-col style="margin: 20px 0"> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="氨气使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="氨气使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -714,7 +720,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
.kiln-electric-treebox { .kiln-electric-treebox {
width: 100%; width: 100%;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;

4
src/views/energy/electric-acquisition.vue
View File

@ -2,14 +2,14 @@
<div class="mod-config"> <div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item> <el-form-item>
<el-radio-group v-model="dataForm.type" @change="changeType"> <el-radio-group size="small" v-model="dataForm.type" @change="changeType">
<el-radio-button label="日" /> <el-radio-button label="日" />
<el-radio-button label="周" /> <el-radio-button label="周" />
<el-radio-button label="月" /> <el-radio-button label="月" />
<el-radio-button label="年" /> <el-radio-button label="年" />
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="选择时间"> <el-form-item size="small" label="选择时间">
<el-date-picker <el-date-picker
v-model="dataForm.date" v-model="dataForm.date"
:type="datePickerType[dataForm.type].type" :type="datePickerType[dataForm.type].type"

77
src/views/energy/electric.vue
View File

@ -2,60 +2,74 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-16 10:15:35 * @LastEditTime: 2021-12-16 19:57:51
* @Description: * @Description:
--> -->
<template> <template>
<div class="chart-container"> <div class="chart-container">
<el-row> <el-row :gutter="20">
<el-row style="margin: 20px 0" :gutter="20"> <el-col :span="8">
<el-col> <el-card class="base-container" style="height: 344px">
<el-row style="position: relative;">
<div class="base-container-titleline"></div>
<h3>用电分析</h3> <h3>用电分析</h3>
</el-row>
<el-row>
<el-col style="padding: 24px 0;border-bottom: 1px solid #EBEEF5">
<p
:title="'总电量（KW）：123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="总电量"></icon-svg>
总电量（KW）：<strong style="font-size: 32px; color: #3E6AF7">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日用电量(KW)：1145</p>
</el-col>
<el-col style="padding: 24px 0;">
<p
:title="'总电流（A）：123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="总电流"></icon-svg>
总电流（A）：<strong style="font-size: 32px; color: #73DEB3">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日用电流（A）：1145</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 300px">
<el-card>
<p style="font-size: 18px">总电量（KW）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日用电量(KW)：1145</p>
</el-card> </el-card>
</el-col> </el-col>
<el-col style="width: 300px"> <el-col :span="16">
<el-card> <el-card class="base-container" style="height: 344px; position: relative;">
<p style="font-size: 18px">总电流（A）：<strong style="font-size: 22px">123,109</strong></p> <el-row style="position: absolute; z-index: 10; right: 20px">
<p>昨日用电流（A）：1145</p> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
</el-card>
</el-col>
</el-row>
</el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="margin: 20px 0">
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col> <el-row style="height: 300px">
<el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-row>
</el-card>
</el-col> </el-col>
</el-row>
<el-card class="base-container" style="margin-top: 20px; min-height: 540px">
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane v-for="item in yaoluList" :key="item.id"> <el-tab-pane v-for="item in yaoluList" :key="item.id">
<el-row style="width: 200px; height: 120px" slot="label" @click.native="handleTab(item.id)"> <el-row style="width: 174px; height: 110px; text-align: right" slot="label" @click.native="handleTab(item.id)">
<el-col :span="12"> <el-col :span="12">
<el-row style="margin-top: 24px; line-height: 24px; height: 24px; font-size: 16px; font-weight: bold"> <el-row style="margin-top: 24px; line-height: 24px; height: 24px; font-size: 16px; font-weight: bold">
{{ item.name }}(KW) {{ item.name }}(KW)
@ -72,26 +86,25 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row style="height: 300px"> <el-row style="height: 300px">
<el-col style="margin: 20px 0"> <el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :id="item.id" :showId="showId" :title="eleType" :titleHeader="item.name" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :id="item.id" :showId="showId" :title="eleType" :titleHeader="item.name" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
@ -99,7 +112,7 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
</el-row> </el-card>
</div> </div>
</template> </template>
@ -752,7 +765,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
} }
</style> </style>

90
src/views/energy/kiln-electric.vue
View File

@ -2,110 +2,124 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-01 09:16:16 * @LastEditTime: 2021-12-16 19:58:14
* @Description: * @Description:
--> -->
<template> <template>
<div class="chart-container"> <div class="chart-container">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="2">
<div class="kiln-electric-treebox"> <div class="kiln-electric-treebox">
<el-tree :data="yaoluList" @node-click="handleNode" /> <el-tree :data="yaoluList" @node-click="handleNode" />
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="22">
<el-row> <el-row :gutter="20">
<el-row style="margin: 20px 0" :gutter="20"> <el-col :span="8">
<el-col> <el-card class="base-container" style="height: 344px">
<el-row style="position: relative;">
<div class="base-container-titleline"></div>
<h3>用电分析</h3> <h3>用电分析</h3>
</el-row>
<el-row>
<el-col style="padding: 24px 0;border-bottom: 1px solid #EBEEF5">
<p
:title="'总电量（KW）：123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="总电量"></icon-svg>
总电量（KW）：<strong style="font-size: 32px; color: #3E6AF7">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日用电量(KW)：1145</p>
</el-col>
<el-col style="padding: 24px 0;">
<p
:title="'总电流（A）：123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="总电流"></icon-svg>
总电流（A）：<strong style="font-size: 32px; color: #73DEB3">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日用电流（A）：1145</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 300px">
<el-card>
<p style="font-size: 18px">总电量（KW）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日用电量(KW)：1145</p>
</el-card> </el-card>
</el-col> </el-col>
<el-col style="width: 300px"> <el-col :span="16">
<el-card> <el-card class="base-container" style="height: 344px; position: relative;">
<p style="font-size: 18px">总电流（A）：<strong style="font-size: 22px">123,109</strong></p> <el-row style="position: absolute; z-index: 10; right: 20px">
<p>昨日用电流（A）：1145</p> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
</el-card>
</el-col>
</el-row>
</el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="margin: 20px 0">
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col> <el-col style="height: 300px">
<el-col style="height: 500px">
<chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
<el-col style="margin: 20px 0"> </el-card>
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> </el-col>
</el-row>
<el-card class="base-container" style="margin-top: 20px; min-height: 540px">
<el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :id="1" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="电流趋势（A）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :id="1" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="电流趋势（A）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
<el-col style="margin: 20px 0"> </el-card>
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-card class="base-container" style="margin-top: 20px; min-height: 540px">
<el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :id="2" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="电压趋势（V）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :id="2" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="电压趋势（V）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -771,7 +785,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
.kiln-electric-treebox { .kiln-electric-treebox {
width: 100%; width: 100%;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;

23
src/views/energy/kiln-speed.vue
View File

@ -2,50 +2,49 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-01 10:54:45 * @LastEditTime: 2021-12-16 15:41:00
* @Description: * @Description:
--> -->
<template> <template>
<div class="chart-container"> <div class="chart-container">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="2">
<div class="kiln-electric-treebox"> <div class="kiln-electric-treebox">
<el-tree :data="yaoluList" @node-click="handleNode" /> <el-tree :data="yaoluList" @node-click="handleNode" />
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="22">
<el-row style="margin: 20px 0" :gutter="20"> <el-card class="base-container" style="min-height: 540px">
<el-col style="margin: 20px 0"> <el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="速度参数（转/s）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="速度参数（转/s）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import Chart from '@/components/Charts/MixChart.1' import Chart from '@/components/Charts/MixChart'
import ringChart from '@/components/Charts/RingChart' import ringChart from '@/components/Charts/RingChart'
import lineChart from '@/components/Charts/LineChart.1' import lineChart from '@/components/Charts/LineChart.1'
@ -699,7 +698,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
.kiln-electric-treebox { .kiln-electric-treebox {
width: 100%; width: 100%;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;

40
src/views/energy/nitrogen.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-01 09:17:20 * @LastEditTime: 2021-12-16 20:13:55
* @Description: * @Description:
--> -->
<template> <template>
@ -15,45 +15,51 @@
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<el-row> <el-row>
<el-row style="margin: 20px 0" :gutter="20"> <el-col :span="8">
<el-col> <el-card class="base-container" style="height: 214px">
<el-row style="position: relative;">
<div class="base-container-titleline"></div>
<h3>氮气流量分析</h3> <h3>氮气流量分析</h3>
</el-row>
<el-row>
<el-col style="padding: 24px 0">
<p
:title="'氮气流量（立方米）：123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="氮气"></icon-svg>
氮气流量（立方米）：<strong style="font-size: 32px; color: #f74d3e">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日氮气流量(立方米)：1145</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 400px">
<el-card>
<p style="font-size: 18px">氮气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日氮气流量(立方米)：1145</p>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</el-row> <el-card class="base-container" style="margin-top: 20px; min-height: 540px">
<el-row style="margin: 20px 0" :gutter="20"> <el-row style="position: absolute; z-index: 10; right: 20px">
<el-col style="margin: 20px 0"> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="氮气使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="氮气使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -714,7 +720,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
.kiln-electric-treebox { .kiln-electric-treebox {
width: 100%; width: 100%;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;

21
src/views/energy/process-temperature.vue
View File

@ -2,43 +2,42 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-01 09:18:17 * @LastEditTime: 2021-12-16 20:15:11
* @Description: * @Description:
--> -->
<template> <template>
<div class="chart-container"> <div class="chart-container">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="2">
<div class="kiln-electric-treebox"> <div class="kiln-electric-treebox">
<el-tree :data="yaoluList" @node-click="handleNode" /> <el-tree :data="yaoluList" @node-click="handleNode" />
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="22">
<el-row style="margin: 20px 0" :gutter="20"> <el-card class="base-container" style="min-height: 540px">
<el-col style="margin: 20px 0"> <el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="加工温度（℃）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="加工温度（℃）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -699,7 +698,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
.kiln-electric-treebox { .kiln-electric-treebox {
width: 100%; width: 100%;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;

44
src/views/energy/sulfur-dioxide.vue
View File

@ -2,58 +2,64 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-01 09:17:03 * @LastEditTime: 2021-12-16 20:14:17
* @Description: * @Description:
--> -->
<template> <template>
<div class="chart-container"> <div class="chart-container">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="2">
<div class="kiln-electric-treebox"> <div class="kiln-electric-treebox">
<el-tree :data="yaoluList" @node-click="handleNode" /> <el-tree :data="yaoluList" @node-click="handleNode" />
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="22">
<el-row> <el-row>
<el-row style="margin: 20px 0" :gutter="20"> <el-col :span="8">
<el-col> <el-card class="base-container" style="height: 214px">
<el-row style="position: relative;">
<div class="base-container-titleline"></div>
<h3>二氧化硫流量分析</h3> <h3>二氧化硫流量分析</h3>
</el-row>
<el-row>
<el-col style="padding: 24px 0">
<p
:title="'二氧化硫流量（立方米）：123,109'"
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
>
<icon-svg style="position: relative; top: 2px" class="iconClass" name="二氧化硫"></icon-svg>
二氧化硫流量（立方米）：<strong style="font-size: 32px; color: #f73e98">123,109</strong>
</p>
<p style="font-size: 14px; text-indent: 20px;">昨日二氧化硫流量(立方米)：1145</p>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin: 20px 0" :gutter="20">
<el-col style="width: 400px">
<el-card>
<p style="font-size: 18px">二氧化硫流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
<p>昨日二氧化硫流量(立方米)：1145</p>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</el-row> <el-card class="base-container" style="margin-top: 20px; min-height: 540px">
<el-row style="margin: 20px 0" :gutter="20"> <el-row style="position: absolute; z-index: 10; right: 20px">
<el-col style="margin: 20px 0"> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="二氧化硫使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="二氧化硫使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -714,7 +720,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
.kiln-electric-treebox { .kiln-electric-treebox {
width: 100%; width: 100%;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;

17
src/views/energy/sump-temperature.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-12-01 09:18:38 * @LastEditTime: 2021-12-16 20:15:35
* @Description: * @Description:
--> -->
<template> <template>
@ -14,31 +14,30 @@
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="20">
<el-row style="margin: 20px 0" :gutter="20"> <el-card class="base-container" style="min-height: 540px">
<el-col style="margin: 20px 0"> <el-row style="position: absolute; z-index: 10; right: 20px">
<el-checkbox-group :min="1" v-model="chartType" style="float: left"> <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
<el-checkbox-button label="折线" /> <el-checkbox-button label="折线" />
<el-checkbox-button label="柱状" /> <el-checkbox-button label="柱状" />
</el-checkbox-group> </el-checkbox-group>
<el-row style="float: right"> <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
<el-radio-group v-model="eleType" @change="changeEleType">
<el-radio-button label="日"></el-radio-button> <el-radio-button label="日"></el-radio-button>
<el-radio-button label="周"></el-radio-button> <el-radio-button label="周"></el-radio-button>
<el-radio-button label="月"></el-radio-button> <el-radio-button label="月"></el-radio-button>
<el-radio-button label="年"></el-radio-button> <el-radio-button label="年"></el-radio-button>
</el-radio-group> </el-radio-group>
<el-date-picker <el-date-picker
size="small"
v-model="date" v-model="date"
:type="datePickerType[eleType].type" :type="datePickerType[eleType].type"
:format="datePickerType[eleType].format" :format="datePickerType[eleType].format"
:placeholder="'选择' + datePickerType[eleType].placeholder" :placeholder="'选择' + datePickerType[eleType].placeholder"
/> />
</el-row> </el-row>
</el-col>
<el-col style="height: 500px"> <el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="油槽温度（℃）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" /> <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="油槽温度（℃）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col> </el-col>
</el-row> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -699,7 +698,7 @@ export default {
.chart-container { .chart-container {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: calc(100vh - 124px); min-height: calc(100vh - 138px);
.kiln-electric-treebox { .kiln-electric-treebox {
width: 100%; width: 100%;
border: 1px solid #eeeeee; border: 1px solid #eeeeee;

8
src/views/main-navbar.vue
View File

@ -2,7 +2,7 @@
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType"> <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
<div class="site-navbar__header"> <div class="site-navbar__header">
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })"> <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
<a class="site-navbar__brand-lg" href="javascript:;">求精WMS调度管理系统</a> <p class="site-navbar__brand-lg">求精WMS调度管理系统</p>
<a class="site-navbar__brand-mini" href="javascript:;">求精</a> <a class="site-navbar__brand-mini" href="javascript:;">求精</a>
</h1> </h1>
</div> </div>
@ -11,7 +11,7 @@
class="site-navbar__menu" class="site-navbar__menu"
mode="horizontal"> mode="horizontal">
<el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold"> <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
<icon-svg name="zhedie"></icon-svg> <icon-svg name="侧边收纳" class="site-navbar-icon"></icon-svg>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
<el-menu <el-menu
@ -19,8 +19,8 @@
mode="horizontal"> mode="horizontal">
<el-menu-item index="1" @click="$router.push({ name: 'theme' })"> <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
<template slot="title"> <template slot="title">
<el-badge value="new"> <el-badge>
<icon-svg name="shezhi" class="el-icon-setting"></icon-svg> <icon-svg name="shezhi" class="site-navbar-icon"></icon-svg>
</el-badge> </el-badge>
</template> </template>
</el-menu-item> </el-menu-item>

2
src/views/main-sidebar.vue
View File

@ -11,7 +11,7 @@
<icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg> <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">首页</span> <span slot="title">首页</span>
</el-menu-item> </el-menu-item>
<el-submenu index="home"> <el-submenu index="task">
<template slot="title"> <template slot="title">
<icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg> <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title" <span slot="title"