console
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://localhost:8085/lib/theme-chalk/index.css">
<style>
body {
margin: 0;
padding: 0;
}
#app {
height: 100vh;
}
</style>
</head>
<body>
<div id="app">
<bv-template1 title="xx市施工养护综合数据" background-image="radial-gradient(ellipse farthest-corner at center center,#033958 0,#080542 70%)" :width="1920">
<template slot="overview">
<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">
<bv-digital-flop :num="item.number" />
<div class="unit">{{ item.unit }}</div>
</div>
</div>
<bv-decoration-10 />
</div>
</template>
<template slot="left">
<div id="ranking-board">
<div class="ranking-board-title">巡查上报记录数量</div>
<bv-scroll-ranking-board :config="config" />
</div>
</template>
<template slot="right">
<div id="rose-chart">
<div class="rose-chart-title">累计计量资金分布</div>
<bv-chart :chart-config="option" width="100%" />
</div>
<div id="water-level-chart">
<div class="water-level-chart-title">计划资金累计完成情况</div>
<div class="water-level-chart-details">
累计完成<span>235,680</span>元
</div>
<div class="chart-container">
<bv-water-level-pond :config="waterConfig" />
</div>
</div>
<div id="scroll-board">
<bv-scroll-board :config="scrollConfig" />
</div>
</template>
<template slot="bottom">
<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>
<bv-chart
class="ring-charts"
:chart-config="card.ring"
width="100%"
height="90%"
:resize="true"
/>
<div class="card-footer">
<div class="card-footer-item">
<div class="footer-title">累计金额</div>
<div class="footer-detail"><bv-number :num="card.total" />元</div>
</div>
<div class="card-footer-item">
<div class="footer-title">巡查病害</div>
<div class="footer-detail"><bv-number :num="card.num" />处</div>
</div>
</div>
</div>
</template>
</bv-template1>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script crossorigin="anonymous" integrity="sha512-bXGnoMY1ck7BEj+ZWZGHCKzfhAPv+hR6vFeEuPhOgD7fbBm9L7gt5RX57rgv2lrDqBMpdVXQ4r0nNyh67OhFLA=="
src="https://lib.baomitu.com/echarts/5.1.2/echarts.common.min.js">
</script>
<script src="http://localhost:8085/lib/index.js">
</script>
<script>
new Vue({
el: '#app',
data: function() {
return {
cards: [],
option: null,
scrollConfig: {
header: ['时间', '病害信息', '数量', '标段'],
data: [
['2019-07-01 19:25:00', '路面危害-松散', '5', 'xxxxxxx'],
['2019-07-02 17:25:00', '路面危害-路面油污清理', '13', 'xxxxxxx'],
['2019-07-03 16:25:00', '交安设施-交通标志牌结构', '6', 'xxxxxxx'],
['2019-07-04 15:25:00', '路基危害-防尘网', '2', 'xxxxxxx'],
['2019-07-05 14:25:00', '交安设施-交通标志牌结构', '1', 'xxxxxxx'],
['2019-07-06 13:25:00', '路面危害-松散', '3', 'xxxxxxx'],
['2019-07-07 12:25:00', '路基危害-防尘网', '4', 'xxxxxxx'],
['2019-07-08 11:25:00', '路面危害-路面油污清理', '2', 'xxxxxxx'],
['2019-07-09 10:25:00', '交安设施-交通标志牌结构', '5', 'xxxxxxx'],
['2019-07-10 09:25:00', '路基危害-防尘网', '3', 'xxxxxxx'],
],
index: true,
columnWidth: [50, 170, 300],
align: ['center'],
rowNum: 7,
headerBGC: '#1981f6',
headerHeight: 45,
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
evenRowBGC: 'rgba(10, 29, 50, 0.8)',
},
waterConfig: {
data: [45],
shape: 'round',
waveHeight: 25,
waveNum: 2,
},
config: {
data: [
{
name: '日常养护',
value: 55,
},
{
name: '交通事故',
value: 120,
},
{
name: '路面',
value: 78,
},
{
name: '桥通',
value: 66,
},
{
name: '计日工',
value: 80,
},
{
name: '路基',
value: 45,
},
{
name: '交安设施',
value: 29,
},
{
name: '除雪',
value: 29,
},
{
name: '绿化',
value: 29,
},
],
rowNum: 9,
},
digitalFlopData: [],
}
},
methods: {
createData() {
const { randomExtend } = this;
this.cards = new Array(5).fill(0).map((foo, i) => {
const val = randomExtend(40, 60);
return {
title: '测试路段' + (i + i),
total: randomExtend(9000, 10000),
num: randomExtend(30, 60),
ring: {
legend: {
show: false,
},
tooltip: {
show: false,
},
color: ['#03d3ec', '#224590'],
title: [
{
text: '资金占比' + val + '%',
top: 'center',
left: 'center',
textStyle: {
fontSize: 20,
color: '#1ed3e5',
},
},
],
series: [
{
type: 'pie',
radius: ['75%', '90%'],
center: ['50%', '50%'],
data: [
{ name: '资金占比', value: val },
{ name: '', value: 100 - val },
],
hoverAnimation: false,
label: {
show: false,
},
},
],
},
};
});
this.option = {
title: {
show: false,
},
legend: {
show: false,
},
series: [
{
type: 'pie',
center: ['50%', '50%'],
radius: '80%',
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) },
],
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
color: '#fff',
formatter: '{b} {c}%',
},
},
},
roseType: true,
},
],
color: [
'#da2f00',
'#fa3600',
'#ff4411',
'#ff724c',
'#541200',
'#801b00',
'#a02200',
'#5d1400',
'#b72700',
],
};
this.digitalFlopData = [
{
title: '管养里程',
number: randomExtend(200, 300),
unit: '公里',
},
{
title: '桥梁',
number: randomExtend(200, 300),
unit: '座',
},
{
title: '涵洞隧道',
number: randomExtend(20, 30),
unit: '个',
},
{
title: '匝道',
number: randomExtend(10, 20),
unit: '个',
},
{
title: '隧道',
number: randomExtend(5, 10),
unit: '个',
},
{
title: '服务区',
number: randomExtend(5, 10),
unit: '个',
},
{
title: '收费站',
number: randomExtend(5, 10),
unit: '个',
},
{
title: '超限站',
number: randomExtend(5, 10),
unit: '个',
},
{
title: '停车区',
number: randomExtend(5, 10),
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>
</html>
#digital-flop {
position: relative;
height: 100%;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(6, 30, 93, 0.5);
}
#digital-flop .bv-decoration-10 {
position: absolute;
width: 95%;
left: 2.5%;
height: 5px;
bottom: 0px;
}
#digital-flop .digital-flop-item {
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);
flex: 1;
}
#digital-flop .digital-flop-title {
font-size: 20px;
margin-bottom: 20px;
}
#digital-flop .digital-flop {
display: flex;
}
#digital-flop .unit {
margin-left: 10px;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding-bottom: 13px;
white-space: nowrap;
}
#ranking-board {
width: 100%;
height: 100%;
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, 0.5);
box-sizing: border-box;
padding: 0px 30px;
}
#ranking-board .ranking-board-title {
font-weight: bold;
height: 50px;
display: flex;
align-items: center;
font-size: 20px;
}
#ranking-board .dv-scroll-ranking-board {
flex: 1;
}
#rose-chart {
width: 30%;
height: 100%;
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, 0.5);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#rose-chart .rose-chart-title {
height: 50px;
font-weight: bold;
text-indent: 20px;
font-size: 20px;
display: flex;
align-items: center;
}
#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, 0.5);
display: flex;
flex-direction: column;
}
#water-level-chart .water-level-chart-title {
font-weight: bold;
height: 50px;
display: flex;
align-items: center;
font-size: 20px;
justify-content: center;
}
#water-level-chart .water-level-chart-details {
height: 15%;
display: flex;
justify-content: center;
font-size: 17px;
align-items: flex-end;
}
#water-level-chart .water-level-chart-details span {
font-size: 35px;
font-weight: bold;
color: #58a1ff;
margin: 0 5px;
margin-bottom: -5px;
}
#rose-chart .bv-chart-container, #water-level-chart .chart-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
#scroll-board {
width: 50%;
box-sizing: border-box;
margin-left: 20px;
height: 100%;
overflow: hidden;
}
.card-item {
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, 0.5);
width: 19%;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
height: 20%;
align-items: center;
justify-content: space-between;
}
.card-header .card-header-left {
font-size: 18px;
font-weight: bold;
padding-left: 20px;
}
.card-header .card-header-right {
padding-right: 20px;
font-size: 40px;
color: #03d3ec;
}