From 133d2d6e23148dedf9155227fec1ae298469f13e Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 7 Jul 2023 11:00:24 +0800 Subject: [PATCH] update oil flow --- src/components/boxes/OilFlow.vue | 75 ++++++++++++++++++++++---- src/components/charts/LineChart.vue | 49 ++++++++--------- src/components/common/SmallBox2.vue | 6 +-- src/components/groups/monitor2.vue | 2 +- src/components/groups/monitor3.vue | 2 +- src/components/isolate-area-1/Area.vue | 2 +- src/components/layout/Main.vue | 2 +- src/utils/index.js | 11 ++++ 8 files changed, 106 insertions(+), 43 deletions(-) create mode 100644 src/utils/index.js diff --git a/src/components/boxes/OilFlow.vue b/src/components/boxes/OilFlow.vue index 62beeb9..3e148e3 100644 --- a/src/components/boxes/OilFlow.vue +++ b/src/components/boxes/OilFlow.vue @@ -3,11 +3,23 @@
- +
- +
@@ -18,6 +30,7 @@ import LineChart from "../charts/LineChart.vue"; import Container from "../layout/Container.vue"; import SubContainer from "../layout/SubContainer.vue"; import { mapState } from "vuex"; +import { randomInt } from "@/utils"; export default { name: "OilFlow", @@ -26,10 +39,50 @@ export default { data() { return { chartConfig: {}, + oilTable1: { + FT111: Array(24) + .fill(1) + .map((_) => randomInt()), + FT112: Array(24) + .fill(1) + .map((_) => randomInt()), + FT113: Array(24) + .fill(1) + .map((_) => randomInt()), + FT114: Array(24) + .fill(1) + .map((_) => randomInt()), + FT115: Array(24) + .fill(1) + .map((_) => randomInt()), + }, + oilTable2: { + OT001: Array(24) + .fill(1) + .map((_) => randomInt()), + OT002: Array(24) + .fill(1) + .map((_) => randomInt()), + OT004: Array(24) + .fill(1) + .map((_) => randomInt()), + OT003: Array(24) + .fill(1) + .map((_) => randomInt()), + OT005: Array(24) + .fill(1) + .map((_) => randomInt()), + OT006: Array(24) + .fill(1) + .map((_) => randomInt()), + OT007: Array(24) + .fill(1) + .map((_) => randomInt()), + }, }; }, computed: { - ...mapState(["oilTable1", "oilTable2"]), + // ...mapState(["oilTable1", "oilTable2"]), }, }; @@ -45,10 +98,12 @@ export default { .vertical-line { margin: 0 adjust(3px); width: adjust(3px); - background: radial-gradient(ellipse at center, - #3565ff, - #3565ff51, - transparent, - transparent); + background: radial-gradient( + ellipse at center, + #3565ff, + #3565ff51, + transparent, + transparent + ); } diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue index a5d3a9b..c8044ef 100644 --- a/src/components/charts/LineChart.vue +++ b/src/components/charts/LineChart.vue @@ -143,9 +143,9 @@ export default { this.chart = echarts.init(document.getElementById(this.id)); this.chart.setOption({ grid: { - top: adjust(16), - left: adjust(20), - bottom: adjust(16), + top: adjust(22), + left: adjust(22), + bottom: adjust(20), right: adjust(8), }, xAxis: { @@ -160,10 +160,10 @@ export default { }, axisLabel: { color: "#3C4E8Baa", - fontSize: adjust(7), + fontSize: adjust(6), lineHeight: adjust(0), - margin: adjust(5), - rotate: 30, + margin: adjust(4), + rotate: 45, }, }, yAxis: { @@ -172,7 +172,7 @@ export default { nameTextStyle: { color: "#3C4E8Baa", fontSize: adjust(8), - lineHeight: 1, + lineHeight: adjust(12), align: "center", }, axisLine: { @@ -278,48 +278,45 @@ li { } ul { - // padding: 0 adjust(8px); + width: 100%; display: flex; flex-wrap: wrap; - justify-content: flex-end; - align-items: center; - height: adjust(28px); + justify-content: space-between; + align-items: flex-end; + height: adjust(14px); white-space: pre-wrap; - padding-bottom: adjust(2px); + padding-bottom: 0; + padding-left: adjust(6px); + background: #0005; } li { text-align: right; position: relative; min-width: 40px; - margin-right: adjust(9px); - padding: 0 adjust(2px); -} - -li:not(:last-child) { - // margin-right: adjust(16px); + background: #f003; } .line-chart__custom-legend { position: absolute; - top: adjust(-32px); + top: adjust(-20px); right: 0; - font-size: adjust(9px); + font-size: adjust(6px); font-family: Ubuntu, sans-serif; padding: 0; // max-width: 100%; - width: 65%; - align-items: flex-start; + width: 75%; + align-items: flex-end; justify-content: flex-end; } li::before { content: ""; position: absolute; - top: adjust(2px); - left: adjust(-8px); - width: adjust(8px); - height: adjust(8px); + top: adjust(0px); + left: adjust(-6px); + width: adjust(6px); + height: adjust(6px); border-radius: adjust(1px); background: #eee6; } diff --git a/src/components/common/SmallBox2.vue b/src/components/common/SmallBox2.vue index a2ad990..8bb68de 100644 --- a/src/components/common/SmallBox2.vue +++ b/src/components/common/SmallBox2.vue @@ -59,7 +59,7 @@ export default { flex-shrink: 0; padding: 0; user-select: none; - width: adjust(w(744px)); + width: adjust(w(820px)); height: adjust(h(350px)); display: flex; background: url(../../assets/top-middle.png) no-repeat; @@ -89,8 +89,8 @@ export default { .value { color: #030609; - font-size: adjust(22px); - line-height: adjust(23px); + font-size: adjust(18px); + line-height: adjust(22px); } } } diff --git a/src/components/groups/monitor2.vue b/src/components/groups/monitor2.vue index 087bd33..8c3b7b5 100644 --- a/src/components/groups/monitor2.vue +++ b/src/components/groups/monitor2.vue @@ -8,7 +8,7 @@ // import { mapState } from "vuex"; export default { - name: "MonitorGroup#2", + name: "MonitorGroup-2", props: {}, components: {}, data() { diff --git a/src/components/groups/monitor3.vue b/src/components/groups/monitor3.vue index ce03f51..08e428d 100644 --- a/src/components/groups/monitor3.vue +++ b/src/components/groups/monitor3.vue @@ -8,7 +8,7 @@ // import { mapState } from "vuex"; export default { - name: "MonitorGroup#3", + name: "MonitorGroup-3", props: {}, components: {}, data() { diff --git a/src/components/isolate-area-1/Area.vue b/src/components/isolate-area-1/Area.vue index ae348cb..63ce0e5 100644 --- a/src/components/isolate-area-1/Area.vue +++ b/src/components/isolate-area-1/Area.vue @@ -36,7 +36,7 @@ export default { // { icon: "temp", title: "车间温度", value: "27℃" }, { icon: "fire", title: "当前火向", value: "" }, { icon: "clock", title: "换火时间", value: "20分" }, - { icon: "sand", title: "剩余时间", value: "0" }, + { icon: "sand", title: "剩余时间", value: "19分20秒" }, ], }; }, diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue index 6c42ecd..25cb82e 100644 --- a/src/components/layout/Main.vue +++ b/src/components/layout/Main.vue @@ -180,7 +180,7 @@ main { .area-one { position: absolute; top: adjust(150px); - left: adjust(1340px); + left: adjust(1310px); } .video-crash { diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..b44aee2 --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,11 @@ +export function randomInt(min, max, closeRight = false) { + min = min ?? 0 + max = max ?? 100 + if (min >= max) { min = max - 100 > 0 ? max - 100 : 0 } + const fn = closeRight ? Math.ceil : Math.floor + let val = fn(Math.random() * max) + while (val < min) { + val = fn(Math.random() * max) + } + return val +} \ No newline at end of file