@@ -1,22 +1,29 @@ | |||
<template> | |||
<!-- 油流量 --> | |||
<Container usage="Charts"> | |||
<SubContainer title="油流量" icon="docs" padding="17px"> | |||
kk | |||
<SubContainer title="油流量" icon="oil" padding="17px"> | |||
<div class="tables flex" style="height: 100%"> | |||
<LineChart class="flex-1" :config="chartConfig" /> | |||
<div class="vertical-line"></div> | |||
<LineChart class="flex-1" :config="chartConfig" /> | |||
</div> | |||
</SubContainer> | |||
</Container> | |||
</template> | |||
<script> | |||
import LineChart from "../charts/LineChart.vue"; | |||
import Container from "../layout/Container.vue"; | |||
import SubContainer from "../layout/SubContainer.vue"; | |||
export default { | |||
name: "OilFlow", | |||
props: {}, | |||
components: { Container, SubContainer }, | |||
components: { Container, SubContainer, LineChart }, | |||
data() { | |||
return {}; | |||
return { | |||
chartConfig: {}, | |||
}; | |||
}, | |||
}; | |||
</script> | |||
@@ -24,4 +31,20 @@ export default { | |||
<style scoped lang="scss"> | |||
@import "../../assets/styles/functions"; | |||
.flex-1 { | |||
flex: 1; | |||
// background: #eee; | |||
} | |||
.vertical-line { | |||
margin: 0 3px; | |||
width: 3px; | |||
background: radial-gradient( | |||
ellipse at center, | |||
#6fe2ff, | |||
#52cbef80, | |||
transparent, | |||
transparent | |||
); | |||
} | |||
</style> |
@@ -0,0 +1,128 @@ | |||
<template> | |||
<!-- line chart --> | |||
<div class="line-chart__wrapper"> | |||
<div class="line-chart__custom-legend flex"> | |||
<span>产线1 - 产线5</span> | |||
<ul style="margin-left: 8px; padding-left: 8px;" class="flex"> | |||
<li>产线1</li> | |||
<li>产线2</li> | |||
<li>产线3</li> | |||
<li>产线4</li> | |||
<li>产线5</li> | |||
</ul> | |||
</div> | |||
<div id="line-chart"></div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: "LineChart", | |||
props: { | |||
config: { | |||
type: Object, | |||
default: () => ({ | |||
title: { text: "default chart" }, | |||
}), | |||
}, | |||
}, | |||
data() { | |||
return { | |||
colors: [ | |||
"#18c7f3", | |||
"#FFD160", | |||
"#F31868", | |||
"#30E89A", | |||
"#2760FF", | |||
"#2f0fff", | |||
"#ee3fff", | |||
"#800f77", | |||
"#f77", | |||
"#19f", | |||
"#98f", | |||
], | |||
}; | |||
}, | |||
created() {}, | |||
mounted() {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
@import "../../assets/styles/functions"; | |||
::-webkit-scrollbar { | |||
// display: none; | |||
height: 2px; | |||
} | |||
::-webkit-scrollbar-thumb { | |||
height: 2px; | |||
border-radius: 2px; | |||
background: #ccc3; | |||
} | |||
// ::-webkit-scrollbar-track { | |||
// height: 1px; | |||
// background: blue; | |||
// } | |||
ul, | |||
li { | |||
margin: 0; | |||
padding: 0; | |||
list-style: none; | |||
min-width: 20px; | |||
} | |||
li { | |||
position: relative; | |||
} | |||
li::before { | |||
content: ''; | |||
position: absolute; | |||
top: 1px; | |||
left: -7px; | |||
width: 6px; | |||
height: 6px; | |||
border-radius: 1px; | |||
background: #eee6; | |||
} | |||
ul { | |||
flex: 1; | |||
width: 144px; | |||
display: flex; | |||
overflow-x: auto; | |||
padding-bottom: 2px; | |||
} | |||
li:not(:last-child) { | |||
margin-right: 8px; | |||
} | |||
.line-chart__wrapper { | |||
position: relative; | |||
background: #7771; | |||
border-radius: 3px; | |||
backdrop-filter: blur(2px); | |||
box-shadow: inset 0 0 10px 2px rgba($color: #fff, $alpha: 0.1); | |||
height: 100%; | |||
width: 1px; | |||
} | |||
.line-chart__custom-legend { | |||
position: absolute; | |||
top: -13px; | |||
right: 0; | |||
font-size: 7px; | |||
font-family: Ubuntu, sans-serif; | |||
// background: #fff2; | |||
padding: 0; | |||
max-width: 100%; | |||
align-items: flex-start; | |||
justify-content: flex-end; | |||
} | |||
</style> |
@@ -1,19 +0,0 @@ | |||
<template> | |||
<!-- line chart --> | |||
<div></div> | |||
</template> | |||
<script> | |||
export default { | |||
name: "LineChart", | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
created() {}, | |||
mounted() {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped></style> |
@@ -32,7 +32,8 @@ export default { | |||
return { | |||
iconClass: { | |||
clock: 'icon-clock', | |||
docs: 'icon-docs' | |||
docs: 'icon-docs', | |||
oil: 'icon-oil' | |||
} | |||
}; | |||
} | |||
@@ -62,6 +63,11 @@ export default { | |||
background-size: 100% 100%; | |||
} | |||
.icon-oil { | |||
background: url(../../assets/oil.png); | |||
background-size: 100% 100%; | |||
} | |||
.title { | |||
/* margin: 12px 0; */ | |||
margin-bottom: 12px; | |||