ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some modify

This commit is contained in:
jiaming 2018-12-05 18:31:50 +08:00
parent 750c037aaf
commit 0625b5a113
1 changed files with 290 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
src/views/electronicFile/index.vue
View File

@ -4,28 +4,120 @@
<border-box-1 class="content">
<border-box-3 class="left">
this is left
<div class="left-title">豫皖省界站</div>
<div class="left-device-num"><div>设备运行总数</div><div>310</div></div>
<capsule-chart class="left-chart" />
<decoration-2 class="left-d2" />
<div class="station-name">纸店收费站</div>
<div class="left-device-num"><div>设备运行总数</div><div>120</div></div>
<ring-chart class="left-chart" />
<div class="station-name">沈丘收费站</div>
<div class="left-device-num"><div>设备运行总数</div><div>188</div></div>
<capsule-chart class="left-chart" />
</border-box-3>
<div class="right">
<div class="right-top">
<border-box-3 class="right-top-left">
this is right top left
<div class="rtl-header">
<decoration-1 class="dl" />
<div class="rtl-title">机电设备总数</div>
<decoration-1 class="dr" />
</div>
<div class="rtl-device-num">
<div class="device-num-container">
设备总数<number-show :number="2137" />
</div>
</div>
<div class="rtl-chart-container">
<div class="device-num-container">
<div class="num-item">
<div>1315</div>
<div>收费站</div>
</div>
<div class="num-item">
<div>415</div>
<div>监控中心</div>
</div>
</div>
<capsule-chart />
<div class="device-num-container">
<div class="num-item">
<div>90</div>
<div>道路外场</div>
</div>
<div class="num-item">
<div>317</div>
<div>其他</div>
</div>
</div>
</div>
</border-box-3>
<div class="right-top-right">
<border-box-3 class="right-top-right-one">
this is right top right one
<div class="rtr-title">漯周界高速监控中心</div>
<div class="rtr-chart-container">
<div class="device-num">
<div>415</div>
<div>设备运行总数</div>
</div>
<capsule-chart class="rtr-chart" />
</div>
</border-box-3>
<border-box-4 class="right-top-right-two">
this is right top right two
<border-box-4 class="right-top-right-two" :reverse="true">
<div class="rtr-title">漯周界高速服务区</div>
<div class="rtr-chart-container">
<div class="device-num">
<div>70</div>
<div>设备运行总数</div>
</div>
<ring-chart class="rtr-chart" />
</div>
</border-box-4>
</div>
</div>
<border-box-4 class="right-bottom">
this is right bottom
<div class="rb-item">
<div class="station-name">项城收费站</div>
<capsule-chart />
</div>
<decoration-2 class="rb-d2" :reverse="true"/>
<div class="rb-item">
<div class="station-name">周口收费站</div>
<capsule-chart />
</div>
<decoration-2 class="rb-d2" :reverse="true"/>
<div class="rb-item">
<div class="station-name">谭庄收费站南</div>
<capsule-chart />
</div>
<decoration-2 class="rb-d2" :reverse="true"/>
<div class="rb-item">
<div class="station-name">谭庄收费站北</div>
<capsule-chart />
</div>
</border-box-4>
</div>
@ -45,7 +137,9 @@ export default {
}
</script>
<style lang="less">
<style lang="less" scoped>
@import url('../../assets/style/index.less');
#electronic-file {
width: 100%;
height: 100%;
@ -58,6 +152,55 @@ export default {
.left {
width: 22%;
.left-title {
height: 35px;
font-size: @EFLTFS;
text-align: center;
line-height: 35px;
margin-bottom: 30px;
}
.left-device-num {
height: 35px;
div {
height: 35px;
float: left;
line-height: 35px;
}
:nth-child(1) {
font-size: @EFDNTFS;
text-indent: 20px;
}
:nth-child(2) {
font-size: @EFDNNFS;
color: @EFNC;
font-weight: bold;
margin-left: 30px;
}
}
.station-name {
height: 30px;
line-height: 30px;
text-indent: 20px;
font-size: @EFLSFS;
}
.left-chart {
width: 100%;
height: calc(~"(100% - 252px) / 3");
}
.left-d2 {
width: 90%;
height: 2px;
margin-top: 10px;
margin-bottom: 10px;
}
}
.right {
@ -75,15 +218,130 @@ export default {
.right-top-left {
width: 65%;
.rtl-header {
position: relative;
height: 50px;
font-size: @EFRTLHFS;
line-height: 50px;
text-align: center;
overflow: hidden;
.decoration-1 {
position: absolute;
top: -20px;
width: 250px;
&.dl {
left: 0px;
}
&.dr {
right: 0px;
}
}
}
.rtl-device-num {
display: flex;
height: 70px;
justify-content: space-around;
line-height: 70px;
margin-top: 50px;
.device-num-container {
font-size: @EFRTLDNFS;
.number-show {
margin-left: 20px;
}
}
}
.rtl-chart-container {
height: calc(~"100% - 170px");
display: flex;
flex-direction: row;
.device-num-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
padding: 120px 0px;
.num-item {
height: 50px;
line-height: 50px;
display: flex;
flex-direction: row;
:nth-child(1) {
font-size: 34px;
text-indent: 35px;
}
:nth-child(2) {
font-size: 34px;
margin-left: 20px;
}
}
}
.capsule-chart {
width: 330px;
}
}
}
.right-top-right {
flex: 1;
margin-left: 10px;
.rtr-title {
height: 25px;
line-height: 25px;
font-size: @EFRTRTFS;
font-weight: bold;
}
.rtr-chart-container {
flex: 1;
height: calc(~"100% - 25px");
display: flex;
flex-direction: row;
.device-num {
width: 30%;
div {
text-align: center;
}
:nth-child(1) {
color: @EFNC;
font-weight: bold;
font-size: @EFDNNFS;
height: 100px;
line-height: 100px;
margin-top: 30px;
}
:nth-child(2) {
font-size: @EFDNTFS;
}
}
.rtr-chart {
flex: 1;
height: 100%;
}
}
}
.right-top-right-one, .right-top-right-two {
height: 50%;
height: calc(~"50% - 5px");
}
.right-top-right-one {
@ -96,6 +354,30 @@ export default {
.right-bottom {
flex: 1;
display: flex;
flex-direction: row;
.rb-item {
flex: 1;
.station-name {
font-size: @EFBSNFS;
text-align: center;
margin-top: 20px;
height: 30px;
line-height: 30px;
}
.capsule-chart {
height: calc(~"100% - 50px");
}
}
.rb-d2 {
width: 2px;
height: 100%;
margin-top: 10px;
}
}
}
</style>