parent
e5c5186118
commit
0e9aeb842c
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div id="cards">
|
||||
<div
|
||||
class="card-item"
|
||||
v-for="(card, i) in cards"
|
||||
:key="card.title"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="card-header-left">{{ card.title }}</div>
|
||||
<div class="card-header-right">{{ '0' + (i + 1) }}</div>
|
||||
</div>
|
||||
<dv-charts class="ring-charts" :option="card.ring" />
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">数量</div>
|
||||
<div class="footer-detail">
|
||||
<dv-digital-flop :config="card.total" style="width:70%;height:35px;" />张
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">重量</div>
|
||||
<div class="footer-detail">
|
||||
<dv-digital-flop :config="card.num" style="width:70%;height:35px;" />吨
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Cards',
|
||||
data () {
|
||||
return {
|
||||
cards: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData () {
|
||||
const { randomExtend } = this
|
||||
|
||||
const arr=['上料','抛丸','理料','划线','切割']
|
||||
this.cards = new Array(5).fill(0).map((foo, i) => ({
|
||||
title: arr[i],
|
||||
total: {
|
||||
number: [randomExtend(100, 400)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#ea6027',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
num: {
|
||||
number: [randomExtend(300, 600)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#26fcd8',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
ring: {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: -Math.PI / 2,
|
||||
endAngle: Math.PI * 1.5,
|
||||
arcLineWidth: 13,
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ name: '重量占比', value: randomExtend(40, 60) }
|
||||
],
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
backgroundArc: {
|
||||
style: {
|
||||
stroke: '#224590'
|
||||
}
|
||||
},
|
||||
details: {
|
||||
show: true,
|
||||
formatter: '重量占比{value}%',
|
||||
style: {
|
||||
fill: '#1ed3e5',
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: ['#03d3ec']
|
||||
}
|
||||
}))
|
||||
},
|
||||
randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
setInterval(this.createData, 30000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 45%;
|
||||
|
||||
.card-item {
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
width: 19%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
height: 20%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-header-left {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.card-header-right {
|
||||
padding-right: 20px;
|
||||
font-size: 40px;
|
||||
color: #03d3ec;
|
||||
}
|
||||
}
|
||||
|
||||
.ring-charts {
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.card-footer-item {
|
||||
padding: 5px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
background-color: rgba(6, 30, 93, 0.7);
|
||||
border-radius: 3px;
|
||||
|
||||
.footer-title {
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer-detail {
|
||||
font-size: 20px;
|
||||
color: #1294fb;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
|
||||
.dv-digital-flop {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div id="digital-flop">
|
||||
<div
|
||||
class="digital-flop-item"
|
||||
v-for="item in digitalFlopData"
|
||||
:key="item.title"
|
||||
>
|
||||
<div class="digital-flop-title">{{ item.title }}</div>
|
||||
<div class="digital-flop">
|
||||
<dv-digital-flop
|
||||
:config="item.number"
|
||||
style="width:100px;height:50px;"
|
||||
/>
|
||||
<div class="unit">{{ item.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-decoration-10 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
digitalFlopData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData () {
|
||||
const { randomExtend } = this
|
||||
|
||||
this.digitalFlopData = [
|
||||
{
|
||||
title: '上料',
|
||||
number: {
|
||||
number: [randomExtend(20000, 30000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '张'
|
||||
},
|
||||
{
|
||||
title: '抛丸',
|
||||
number: {
|
||||
number: [randomExtend(20000, 30000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#f46827',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '张'
|
||||
},
|
||||
{
|
||||
title: '理料',
|
||||
number: {
|
||||
number: [randomExtend(20000, 30000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#40faee',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '张'
|
||||
},
|
||||
{
|
||||
title: '划线',
|
||||
number: {
|
||||
number: [randomExtend(30000, 50000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '米'
|
||||
},
|
||||
{
|
||||
title: '切割',
|
||||
number: {
|
||||
number: [randomExtend(30000, 50000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#f46827',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '米'
|
||||
},
|
||||
{
|
||||
title: '坡口',
|
||||
number: {
|
||||
number: [randomExtend(5000, 10000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#40faee',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '件'
|
||||
},
|
||||
{
|
||||
title: '打磨',
|
||||
number: {
|
||||
number: [randomExtend(5000, 10000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '件'
|
||||
},
|
||||
{
|
||||
title: '曲加工',
|
||||
number: {
|
||||
number: [randomExtend(5000, 10000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#f46827',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '件'
|
||||
},
|
||||
{
|
||||
title: '预配盘',
|
||||
number: {
|
||||
number: [randomExtend(10000, 20000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#40faee',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '件'
|
||||
},
|
||||
{
|
||||
title: '配送',
|
||||
number: {
|
||||
number: [randomExtend(500, 1000)],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#40faee',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '批'
|
||||
}
|
||||
]
|
||||
},
|
||||
randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
setInterval(createData, 30000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#digital-flop {
|
||||
position: relative;
|
||||
height: 15%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
|
||||
.dv-decoration-10 {
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
left: 2.5%;
|
||||
height: 5px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.digital-flop-item {
|
||||
width: 11%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-left: 3px solid rgb(6, 30, 93);
|
||||
border-right: 3px solid rgb(6, 30, 93);
|
||||
}
|
||||
|
||||
.digital-flop-title {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.digital-flop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div id="ranking-board">
|
||||
<div class="ranking-board-title">本月完工数量</div>
|
||||
<dv-scroll-ranking-board :config="config" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RankingBoard',
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
{
|
||||
name: '上料',
|
||||
value: 120
|
||||
},
|
||||
{
|
||||
name: '切割',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '理料',
|
||||
value: 78
|
||||
},
|
||||
{
|
||||
name: '划线',
|
||||
value: 66
|
||||
},
|
||||
{
|
||||
name: '抛丸',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '坡口',
|
||||
value: 45
|
||||
},
|
||||
{
|
||||
name: '打磨',
|
||||
value: 29
|
||||
},
|
||||
{
|
||||
name: '曲加工',
|
||||
value: 29
|
||||
},
|
||||
{
|
||||
name: '预配盘',
|
||||
value: 29
|
||||
}
|
||||
],
|
||||
rowNum: 9
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#ranking-board {
|
||||
width: 20%;
|
||||
box-shadow: 0 0 3px blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
box-sizing: border-box;
|
||||
padding: 0px 30px;
|
||||
|
||||
.ranking-board-title {
|
||||
font-weight: bold;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.dv-scroll-ranking-board {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div id="rose-chart">
|
||||
<div class="rose-chart-title">累计计量产量分布(吨)</div>
|
||||
<dv-charts :option="option" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
data () {
|
||||
return {
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData () {
|
||||
const { randomExtend } = this
|
||||
|
||||
this.option = {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
roseSort: false,
|
||||
data: [
|
||||
{ name: '上料', value: randomExtend(40, 70) },
|
||||
{ name: '抛丸', value: randomExtend(20, 30) },
|
||||
{ name: '理料', value: randomExtend(10, 50) },
|
||||
{ name: '划线', value: randomExtend(5, 20) },
|
||||
{ name: '切割', value: randomExtend(40, 50) },
|
||||
{ name: '坡口', value: randomExtend(20, 30) },
|
||||
{ name: '打磨', value: randomExtend(5, 10) },
|
||||
{ name: '曲加工', value: randomExtend(20, 35) },
|
||||
{ name: '预配盘', value: randomExtend(5, 10) }
|
||||
],
|
||||
insideLabel: {
|
||||
show: false
|
||||
},
|
||||
outsideLabel: {
|
||||
formatter: '{name} {percent}%',
|
||||
labelLineEndLength: 20,
|
||||
style: {
|
||||
fill: '#fff'
|
||||
},
|
||||
labelLineStyle: {
|
||||
stroke: '#fff'
|
||||
}
|
||||
},
|
||||
roseType: true
|
||||
}
|
||||
],
|
||||
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
|
||||
}
|
||||
},
|
||||
randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
setInterval(createData, 30000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#rose-chart {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
box-sizing: border-box;
|
||||
|
||||
.rose-chart-title {
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
text-indent: 20px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dv-charts-container {
|
||||
height: calc(~"100% - 50px");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div id="scroll-board">
|
||||
<dv-scroll-board :config="config" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ScrollBoard',
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
header: ['日期', '船只','批次','工序', '数量', '完成'],
|
||||
data: [
|
||||
['2024/07/21', 'G175K-6', '004','上料', '5', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','抛丸', '13', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','理料', '6', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','划线', '2', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','切割', '1', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','坡口', '3', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','打磨', '4', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','曲加工', '2', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','预配盘', '5', '0'],
|
||||
['2024/07/21', 'G175K-6', '004','配送', '3', '0']
|
||||
],
|
||||
index: true,
|
||||
// columnWidth: [50, 100, 120,50,50,50],
|
||||
align: ['center'],
|
||||
rowNum: 7,
|
||||
headerBGC: '#1981f6',
|
||||
headerHeight: 45,
|
||||
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
|
||||
evenRowBGC: 'rgba(10, 29, 50, 0.8)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#scroll-board {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div id="top-header">
|
||||
<dv-decoration-8 class="header-left-decoration" />
|
||||
<dv-decoration-5 class="header-center-decoration" />
|
||||
<dv-decoration-8 class="header-right-decoration" :reverse="true" />
|
||||
<div class="center-title">生产管控综合数据</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopHeader'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#top-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-center-decoration {
|
||||
width: 40%;
|
||||
height: 60px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.header-left-decoration, .header-right-decoration {
|
||||
width: 25%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.center-title {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
top: 15px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div id="water-level-chart">
|
||||
<div class="water-level-chart-title">计划完成情况</div>
|
||||
<div class="water-level-chart-details">
|
||||
累计完成<span>2,356,800</span>吨
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<dv-water-level-pond :config="config" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WaterLevelChart',
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
data: [45],
|
||||
shape: 'round',
|
||||
waveHeight: 25,
|
||||
waveNum: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#water-level-chart {
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20px;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.water-level-chart-title {
|
||||
font-weight: bold;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.water-level-chart-details {
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
align-items: flex-end;
|
||||
|
||||
span {
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
color: #58a1ff;
|
||||
margin: 0 5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dv-water-pond-level {
|
||||
max-width: 90%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 10px solid #19c3eb;
|
||||
border-radius: 50%;
|
||||
|
||||
ellipse {
|
||||
stroke: transparent !important;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 195 KiB |
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div id="data-view">
|
||||
<dv-full-screen-container>
|
||||
<top-header />
|
||||
<div class="main-content">
|
||||
<digital-flop />
|
||||
<div class="block-left-right-content">
|
||||
<ranking-board />
|
||||
<div class="block-top-bottom-content">
|
||||
<div class="block-top-content">
|
||||
<rose-chart />
|
||||
<water-level-chart />
|
||||
<scroll-board />
|
||||
</div>
|
||||
<cards />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topHeader from './comps/topHeader'
|
||||
import digitalFlop from './comps/digitalFlop'
|
||||
import rankingBoard from './comps/rankingBoard'
|
||||
import roseChart from './comps/roseChart'
|
||||
import waterLevelChart from './comps/waterLevelChart'
|
||||
import scrollBoard from './comps/scrollBoard'
|
||||
import cards from './comps/cards'
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
components: {
|
||||
topHeader,
|
||||
digitalFlop,
|
||||
rankingBoard,
|
||||
roseChart,
|
||||
waterLevelChart,
|
||||
scrollBoard,
|
||||
cards
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#data-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #030409;
|
||||
color: #fff;
|
||||
|
||||
#dv-full-screen-container {
|
||||
background-image: url('img/bg.png');
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 3px blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.block-left-right-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.block-top-bottom-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.block-top-content {
|
||||
height: 55%;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue