@@ -3,11 +3,23 @@ | |||
<Container usage="Charts"> | |||
<SubContainer title="油流量" icon="oil" padding="24px 32px"> | |||
<div class="tables flex" style="height: 100%"> | |||
<LineChart key="1" id="line-chart-1" class="flex-1" unit="单位 kg/h" :legend="Object.keys(oilTable1)" | |||
:series="oilTable1" /> | |||
<LineChart | |||
key="1" | |||
id="line-chart-1" | |||
class="flex-1" | |||
unit="单位 kg/h" | |||
:legend="Object.keys(oilTable1)" | |||
:series="oilTable1" | |||
/> | |||
<div class="vertical-line"></div> | |||
<LineChart key="2" id="line-chart-2" class="flex-1" unit="单位 kg/h" :legend="Object.keys(oilTable2)" | |||
:series="oilTable2" /> | |||
<LineChart | |||
key="2" | |||
id="line-chart-2" | |||
class="flex-1" | |||
unit="单位 kg/h" | |||
:legend="Object.keys(oilTable2)" | |||
:series="oilTable2" | |||
/> | |||
</div> | |||
</SubContainer> | |||
</Container> | |||
@@ -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"]), | |||
}, | |||
}; | |||
</script> | |||
@@ -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 | |||
); | |||
} | |||
</style> |
@@ -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; | |||
} | |||
@@ -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); | |||
} | |||
} | |||
} | |||
@@ -8,7 +8,7 @@ | |||
// import { mapState } from "vuex"; | |||
export default { | |||
name: "MonitorGroup#2", | |||
name: "MonitorGroup-2", | |||
props: {}, | |||
components: {}, | |||
data() { | |||
@@ -8,7 +8,7 @@ | |||
// import { mapState } from "vuex"; | |||
export default { | |||
name: "MonitorGroup#3", | |||
name: "MonitorGroup-3", | |||
props: {}, | |||
components: {}, | |||
data() { | |||
@@ -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秒" }, | |||
], | |||
}; | |||
}, | |||
@@ -180,7 +180,7 @@ main { | |||
.area-one { | |||
position: absolute; | |||
top: adjust(150px); | |||
left: adjust(1340px); | |||
left: adjust(1310px); | |||
} | |||
.video-crash { | |||
@@ -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 | |||
} |