Added grid icons labels and mov grid import to the right (#1620)
This commit is contained in:
Michael Geers
GitHub
parent
5fbceba461
commit
9fca67b620
9 changed files with 98 additions and 24 deletions
64
assets/js/components/Energyflow/GridIcon.vue
Normal file
64
assets/js/components/Energyflow/GridIcon.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div :class="{ 'power-import': this.import, 'power-export': this.export }">
|
||||
<svg
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
class="grid svg-inline--fa fa-home fa-w-18"
|
||||
style="
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
stroke-linejoin: round;
|
||||
stroke-miterlimit: 2;
|
||||
"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M166.815 224.933h-64.054a11.55 11.55 0 0 0-.916-.037h-22.5c-6.209 0-11.25 5.041-11.25 11.25v4.14a16.22 16.22 0 0 0-.011.585v31.876c0 .197.004.392.011.586v33.406c0 6.209 5.041 11.25 11.25 11.25h22.5c6.209 0 11.25-5.041 11.25-11.25v-18.053h29.592C105.897 385.94 72.74 473.78 72.74 473.78c-3.4 8.328.46 17.901 8.61 21.375l29.51 12.578c8.15 3.474 17.52-.47 20.91-8.797l49.19-120.719h150.07l49.2 120.719c3.4 8.337 12.76 12.271 20.91 8.797l29.51-12.578c8.15-3.474 12-13.047 8.61-21.375 0 0-33.103-87.922-69.773-185.094H398.2v18.003c0 6.257 5.08 11.337 11.337 11.337h22.674c6.257 0 11.337-5.08 11.337-11.337V236.27c0-6.257-5.08-11.337-11.337-11.337h-86.794c-6.992-18.51-13.88-36.732-20.464-54.135H398.2v18.003c0 6.257 5.08 11.337 11.337 11.337h22.674c6.257 0 11.337-5.08 11.337-11.337v-70.419c0-6.257-5.08-11.337-11.337-11.337H300.803c-15.742-41.475-26.669-70.049-27.848-72.584-16.553-35.597-17.28-36.651-33.105-1.138-1.386 3.108-12.466 32.042-28.319 73.722h-108.77a11.55 11.55 0 0 0-.916-.037h-22.5c-6.209 0-11.25 5.041-11.25 11.25v4.14a16.22 16.22 0 0 0-.011.585v31.877c0 .196.004.391.011.585v33.406c0 6.209 5.041 11.25 11.25 11.25h22.5c6.209 0 11.25-5.041 11.25-11.25v-18.053h74.232a139451.94 139451.94 0 0 0-20.512 54.135Zm129.566 63.753 7.999 24.139h-96.76l8.189-24.139h80.572Zm-21.126-63.753h-37.817l18.366-54.135h1.512l17.939 54.135Z"
|
||||
style="fill-rule: nonzero"
|
||||
/>
|
||||
</svg>
|
||||
<fa-icon class="arrow" icon="angle-double-right"></fa-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "GridIcon",
|
||||
props: {
|
||||
import: { type: Boolean },
|
||||
export: { type: Boolean },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grid {
|
||||
transform: translateX(0.35rem);
|
||||
transition-property: transform;
|
||||
transition-duration: 250ms;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
.power-export .grid {
|
||||
transform: translateX(0.9rem);
|
||||
}
|
||||
.power-import .grid {
|
||||
transform: translateX(0rem);
|
||||
}
|
||||
.arrow {
|
||||
margin-left: -0.2rem;
|
||||
opacity: 0;
|
||||
transform: translateX(-0.5rem);
|
||||
transition-property: opacity, transform;
|
||||
transition-duration: 250ms;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
.power-export .arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(-1.1rem) scaleX(1);
|
||||
}
|
||||
.power-import .arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(-0.1rem) scaleX(1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +1,19 @@
|
|||
<template>
|
||||
<div class="visualization" :class="{ 'visualization--ready': visualizationReady }">
|
||||
<div class="label-scale">
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="d-flex justify-content-start">
|
||||
<LabelBar v-bind="labelBarProps('top', 'pvProduction')">
|
||||
<fa-icon icon="sun"></fa-icon>
|
||||
</LabelBar>
|
||||
<LabelBar v-bind="labelBarProps('top', 'batteryDischarge')">
|
||||
<BatteryIcon :soc="batterySoC" discharge />
|
||||
</LabelBar>
|
||||
<LabelBar v-bind="labelBarProps('top', 'pvProduction')">
|
||||
<fa-icon icon="sun"></fa-icon>
|
||||
<LabelBar v-bind="labelBarProps('top', 'gridImport')">
|
||||
<GridIcon import />
|
||||
</LabelBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-progress" ref="site_progress">
|
||||
<div
|
||||
class="site-progress-bar grid-import"
|
||||
:style="{ width: widthTotal(gridImportAdjusted) }"
|
||||
>
|
||||
<span class="power" v-if="powerLabelEnoughSpace(gridImport)">
|
||||
{{ kw(gridImport) }}
|
||||
</span>
|
||||
<span class="power" v-else-if="powerLabelSomeSpace(gridImport)">
|
||||
{{ kwNoUnit(gridImport) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="site-progress-bar self-consumption"
|
||||
:style="{ width: widthTotal(selfConsumptionAdjusted) }"
|
||||
|
|
@ -33,6 +25,17 @@
|
|||
{{ kwNoUnit(selfConsumption) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="site-progress-bar grid-import"
|
||||
:style="{ width: widthTotal(gridImportAdjusted) }"
|
||||
>
|
||||
<span class="power" v-if="powerLabelEnoughSpace(gridImport)">
|
||||
{{ kw(gridImport) }}
|
||||
</span>
|
||||
<span class="power" v-else-if="powerLabelSomeSpace(gridImport)">
|
||||
{{ kwNoUnit(gridImport) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="site-progress-bar pv-export"
|
||||
:style="{ width: widthTotal(pvExportAdjusted) }"
|
||||
|
|
@ -59,6 +62,9 @@
|
|||
<LabelBar v-bind="labelBarProps('bottom', 'batteryCharge')">
|
||||
<BatteryIcon :soc="batterySoC" charge />
|
||||
</LabelBar>
|
||||
<LabelBar v-bind="labelBarProps('bottom', 'gridExport')">
|
||||
<GridIcon export />
|
||||
</LabelBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,11 +74,12 @@
|
|||
import "../../icons";
|
||||
import formatter from "../../mixins/formatter";
|
||||
import BatteryIcon from "./BatteryIcon.vue";
|
||||
import GridIcon from "./GridIcon.vue";
|
||||
import LabelBar from "./LabelBar.vue";
|
||||
|
||||
export default {
|
||||
name: "Visualization",
|
||||
components: { BatteryIcon, LabelBar },
|
||||
components: { BatteryIcon, LabelBar, GridIcon },
|
||||
props: {
|
||||
showDetails: Boolean,
|
||||
gridImport: { type: Number, default: 0 },
|
||||
|
|
@ -100,6 +107,9 @@ export default {
|
|||
},
|
||||
mixins: [formatter],
|
||||
computed: {
|
||||
gridExport: function () {
|
||||
return this.pvExport;
|
||||
},
|
||||
totalRaw: function () {
|
||||
return this.gridImport + this.selfConsumption + this.pvExport;
|
||||
},
|
||||
|
|
@ -169,8 +179,8 @@ export default {
|
|||
},
|
||||
isLabel(position, name, last) {
|
||||
const labels = {
|
||||
top: ["batteryDischarge", "pvProduction"],
|
||||
bottom: ["houseConsumption", "loadpoints", "batteryCharge"],
|
||||
top: ["pvProduction", "batteryDischarge", "gridImport"],
|
||||
bottom: ["houseConsumption", "loadpoints", "batteryCharge", "gridExport"],
|
||||
};
|
||||
const entries = [...labels[position]];
|
||||
if (last) {
|
||||
|
|
@ -186,7 +196,7 @@ export default {
|
|||
},
|
||||
labelBarProps(position, name) {
|
||||
const value = this[name];
|
||||
const minWidth = name.startsWith("battery") ? 44 : 32;
|
||||
const minWidth = name.startsWith("battery") || name.startsWith("grid") ? 44 : 32;
|
||||
return {
|
||||
value,
|
||||
hideIcon: this.hideLabelIcon(value, minWidth),
|
||||
|
|
|
|||
1
dist/css/index.7916d96a.css
vendored
1
dist/css/index.7916d96a.css
vendored
File diff suppressed because one or more lines are too long
1
dist/css/index.c4286c47.css
vendored
Normal file
1
dist/css/index.c4286c47.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.63c5e34a.css" rel="preload" as="style"><link href="css/index.7916d96a.css" rel="preload" as="style"><link href="js/chunk-vendors.0dc6e0ff.js" rel="preload" as="script"><link href="js/index.c0c67f42.js" rel="preload" as="script"><link href="css/chunk-vendors.63c5e34a.css" rel="stylesheet"><link href="css/index.7916d96a.css" rel="stylesheet"></head><body><script>window.evcc = {
|
||||
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.63c5e34a.css" rel="preload" as="style"><link href="css/index.c4286c47.css" rel="preload" as="style"><link href="js/chunk-vendors.0dc6e0ff.js" rel="preload" as="script"><link href="js/index.d79696c8.js" rel="preload" as="script"><link href="css/chunk-vendors.63c5e34a.css" rel="stylesheet"><link href="css/index.c4286c47.css" rel="stylesheet"></head><body><script>window.evcc = {
|
||||
version: "[[.Version]]",
|
||||
configured: "[[.Configured]]",
|
||||
};</script><div id="app"></div><script src="js/chunk-vendors.0dc6e0ff.js"></script><script src="js/index.c0c67f42.js"></script></body></html>
|
||||
};</script><div id="app"></div><script src="js/chunk-vendors.0dc6e0ff.js"></script><script src="js/index.d79696c8.js"></script></body></html>
|
||||
2
dist/js/index.c0c67f42.js
vendored
2
dist/js/index.c0c67f42.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/index.c0c67f42.js.map
vendored
1
dist/js/index.c0c67f42.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/js/index.d79696c8.js
vendored
Normal file
2
dist/js/index.d79696c8.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/index.d79696c8.js.map
vendored
Normal file
1
dist/js/index.d79696c8.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue