mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update linechart oilflow

Browse Source
This commit is contained in:
lb 2023-07-07 11:30:10 +08:00
parent 133d2d6e23
commit de41e7e547
2 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/boxes/OilFlow.vue
View File

@ -78,6 +78,18 @@ export default {
OT007: Array(24) OT007: Array(24)
.fill(1) .fill(1)
.map((_) => randomInt()), .map((_) => randomInt()),
OT008: Array(24)
.fill(1)
.map((_) => randomInt()),
OT009: Array(24)
.fill(1)
.map((_) => randomInt()),
OT000: Array(24)
.fill(1)
.map((_) => randomInt()),
OT011: Array(24)
.fill(1)
.map((_) => randomInt()),
}, },
}; };
}, },

41
src/components/charts/LineChart.vue
View File

@ -3,7 +3,7 @@
<div class="line-chart__wrapper"> <div class="line-chart__wrapper">
<div class="line-chart__custom-legend flex" v-if="legend.length"> <div class="line-chart__custom-legend flex" v-if="legend.length">
<!-- <span>产线1 - 产线5</span> --> <!-- <span>产线1 - 产线5</span> -->
<ul style="" class="flex"> <ul style="" class="">
<li v-for="(v, i) in legend" :key="i">{{ v }}</li> <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
</ul> </ul>
</div> </div>
@ -96,9 +96,11 @@ export default {
"#7138FF", "#7138FF",
"#F318D8", "#F318D8",
"#C0F318", "#C0F318",
"#f77", "#ff7777",
"#19f", "#1199ff",
"#98f", "#9988ff",
"#3388ff",
"#337788",
], ],
data: [], data: [],
legendtext: [ legendtext: [
@ -278,30 +280,32 @@ li {
} }
ul { ul {
// background: #0005;
width: 100%; width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
height: adjust(14px); height: adjust(14px);
white-space: pre-wrap; white-space: pre-wrap;
padding-bottom: 0; padding-bottom: 0;
padding-left: adjust(6px); padding-left: adjust(6px);
background: #0005; display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 6px;
// column-span: none;
justify-items: end;
align-items: end;
} }
li { li {
text-align: right; padding-left: adjust(1px);
position: relative; position: relative;
min-width: 40px; // background: #f003;
background: #f003; user-select: none;
} }
.line-chart__custom-legend { .line-chart__custom-legend {
position: absolute; position: absolute;
top: adjust(-20px); top: adjust(-20px);
right: 0; right: 0;
font-size: adjust(6px); font-size: adjust(5px);
font-family: Ubuntu, sans-serif; font-family: Ubuntu, sans-serif;
padding: 0; padding: 0;
// max-width: 100%; // max-width: 100%;
@ -313,10 +317,10 @@ li {
li::before { li::before {
content: ""; content: "";
position: absolute; position: absolute;
top: adjust(0px); top: adjust(.5px);
left: adjust(-6px); left: adjust(-5px);
width: adjust(6px); width: adjust(5px);
height: adjust(6px); height: adjust(5px);
border-radius: adjust(1px); border-radius: adjust(1px);
background: #eee6; background: #eee6;
} }
@ -354,6 +358,9 @@ li:nth-child(10)::before {
li:nth-child(11)::before { li:nth-child(11)::before {
background: #98f; background: #98f;
} }
li:nth-child(12)::before {
background: #38f;
}
.line-chart__wrapper { .line-chart__wrapper {
position: relative; position: relative;