Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
a6db8573 by 蔡俊立
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/js-web-jianguan

2 parents 439e33a1 759cc9f3
Inline Side-by-side
Showing 10 changed files with 343 additions and 143 deletions
......@@ -170,18 +170,43 @@
cursor: pointer;
}
// element table 选中 颜色
// .el-table--enable-row-hover .el-table__body tr:hover>td {
// background-color: #FCFDFD;
// }
// .el-table__body .el-table__row.hover-row td {
// background-color: #FCFDFD;
// }
// .el-table tbody tr:hover>td {
// background-color: #FCFDFD;
// }
// element table 样式修改
//去掉表格内的线
table th {
border-bottom: 5px solid #000637 !important;
}
table td {
border-bottom: 5px solid #000637 !important;
}
//去掉最下面的那一条线
.el-table::before {
height: 5px !important;
background-color: #000637 !important;
}
.lb-table {
background-color: #000637 !important;
}
.el-table__body-wrapper {
background-color: #000637 !important;
}
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #103E99 !important;
}
.el-table__body .el-table__row.hover-row td {
background-color: #103E99 !important;
}
.el-table tbody tr:hover>td {
background-color: #103E99 !important;
}
// 表格样式
.el-table th {
height: 48px !important;
......
.tableClass {
/deep/.el-table {
border: none !important;
.cell {
color: #FFFFFF !important;
}
.el-table__row {
background-color: #00275F !important;
margin-top: 5px;
}
thead {
background: #103E99 !important;
& th {
//inherit：规定应该从父元素继承 background-color 属性的设置。
//transparent：默认。背景颜色为透明。
// background-color: inherit !important;
background-color: transparent;
}
& tr {
// background-color: inherit !important;
background-color: transparent;
}
}
}
}
//*****start*通用表单查询条件，列表样式******//
.from-clues {
min-width: 1280px;
......@@ -67,72 +98,9 @@
background: #FFFFFF;
margin-top: 10px;
//去掉表格内的线
/deep/ table th {
border-bottom: 5px solid #000637 !important;
}
/deep/ table td {
border-bottom: 5px solid #000637 !important;
}
//去掉最下面的那一条线
/deep/.el-table::before {
height: 5px !important;
background-color: #000637 !important;
}
/deep/.lb-table {
background-color: #000637 !important;
}
/deep/.el-table__body-wrapper {
background-color: #000637 !important;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #103E99 !important;
}
/deep/.el-table__body .el-table__row.hover-row td {
background-color: #103E99 !important;
}
/deep/.el-table tbody tr:hover>td {
background-color: #103E99 !important;
}
//修改表头的背景颜色横向渐变色
@extend .tableClass;
/deep/.el-table {
border: none !important;
.cell {
color: #FFFFFF !important;
}
.el-table__row {
background-color: #00275F !important;
margin-top: 5px;
}
thead {
background: #103E99 !important;
& th {
//inherit：规定应该从父元素继承 background-color 属性的设置。
//transparent：默认。背景颜色为透明。
// background-color: inherit !important;
background-color: transparent;
}
& tr {
// background-color: inherit !important;
background-color: transparent;
}
}
}
}
.el-form--inline .el-form-item {
......
......@@ -43,18 +43,6 @@ class data extends filter {
{
prop: "jrdf",
label: "接入得分",
},
{
prop: "jrdf",
label: "未上传登薄日志区县",
},
{
prop: "jrdf",
label: "登薄日志得分",
},
{
prop: "jrdf",
label: "总评分",
}
]
}
......
......@@ -6,16 +6,30 @@
justify-content: space-between;
&-left {
width: 40%;
width: 35%;
padding-top: 25px;
background-color: #000637;
color: #02D9FD;
}
&-right {
width: 59.5%;
width: 64.5%;
.jrgk {
background-color: #000637;
color: #02D9FD;
padding-bottom: 20px;
.header {
text-align: center;
line-height: 36px;
}
}
.gkList {
@include flex-center;
flex-direction: column;
position: relative;
li:nth-child(1) {
color: #409EFF;
......@@ -23,13 +37,96 @@
}
}
.gkList::before {
position: absolute;
right: 0;
top: 0;
content: '';
width: 1px;
height: 110px;
background: linear-gradient(180deg, #091B4C 0%, #47B5E0 56%, #091B4C 100%);
}
.zsl {
position: relative;
p {
background: url('../../image/zsl.png');
width: 200px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background-size: cover;
margin-left: -34px;
}
}
.jrl {
margin-top: 20px;
text-align: center;
color: #E3F1FF;
.jrlList {
p {
margin: 0 3px 10px 3px;
}
}
.jrllsit1 {
p {
background: url('../../image/jrl1.png');
}
}
.jrllsit2 {
p {
background: url('../../image/jrl2.png');
}
}
.jrllsit3 {
p {
background: url('../../image/jrl3.png');
}
}
li {
color: #E3F1FF;
}
}
// 日均接入量
.jrlList {
display: flex;
align-items: center;
justify-content: center;
p {
width: 24px;
height: 36px;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
}
.jrdgk {
display: flex;
margin-top: 5px;
justify-content: space-between;
.box-card {
width: 49.5%;
.sxsjr {
background-color: #000637;
width: 49%;
.header {
text-align: center;
color: #02D9FD;
line-height: 30px;
}
}
}
......@@ -39,46 +136,94 @@
flex-direction: column;
li:nth-child(1) {
color: #409EFF;
font-size: 24px;
font-size: 30px;
width: 50px;
height: 50px;
background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%);
border-radius: 2px;
color: #E3F1FF;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0;
}
li:nth-child(2) {
color: #FFFFFF;
font-size: 14px;
}
}
}
.jrdList:nth-of-type(2) {
li:nth-child(1) {
color: #67C23A;
background: linear-gradient(143deg, #9CB636 0%, #32BCB1 100%);
}
}
.jrdList:nth-of-type(3) {
li:nth-child(1) {
color: #F56C6C;
background: linear-gradient(143deg, #C97E6D 0%, #CA304D 100%);
}
}
}
// 上报情况概括
.sbqkgk {
text-align: center;
color: #02D9FD;
line-height: 30px;
width: 50%;
background-color: #000637;
}
.sbqkgs {
display: flex;
justify-content: space-between;
width: 100%;
li {
font-size: 24px;
.header {
text-align: center;
line-height: 36px;
}
li:nth-child(2) {
color: #409EFF;
margin-left: 25px;
.sbqkgsList {
display: flex;
justify-content: center;
font-size: 50px;
margin: 20px 0 10px 0;
color: #E3F1FF;
font-weight: 700;
}
.active {
width: 31px;
height: 46px;
background: #054AE9;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px 1px 3px 1px;
margin: 0 3px;
}
li {
font-size: 16px;
text-align: center;
color: #E3F1FF;
}
}
.jrxxlb {
margin-top: 5px;
background-color: #000637;
/deep/tbody tr:nth-child(odd) {
background: #000637 !important;
}
.title {
text-align: center;
line-height: 36px;
color: #02D9FD;
}
}
}
\ No newline at end of file
......
<template>
<div class="home">
<el-card class="home-left">
<div class="home-left">
<!-- 地图 -->
<wgsl></wgsl>
</el-card>
</div>
<div class="home-right">
<!-- 陕西省接入概括 -->
<el-card>
<div slot="header">
<div class="jrgk">
<div class="header">
陕西省接入概括
</div>
<!-- 陕西省接入概括列表 -->
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in gkList" :key="index">
<el-row>
<el-col :span="9">
<ul class="gkList">
<li>{{ item.value }}</li>
<li>{{ item.title }}</li>
<li>总数量</li>
<div class="zsl">
<dv-digital-flop :config="config" style="height:70px;" />
<p></p>
</div>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit1">
<p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit2">
<p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit3">
<p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
</div>
<li>总体质量</li>
</ul>
</el-col>
</el-row>
</el-card>
</div>
<div class="jrdgk">
<!-- 接入点概括 -->
<el-card class="box-card">
<div slot="header">
<div class="sxsjr">
<div class="header">
接入点概括
</div>
<el-row :gutter="20">
<el-row>
<el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
<ul>
<li>{{ item.value }}</li>
......@@ -34,25 +61,30 @@
</ul>
</el-col>
</el-row>
</el-card>
</div>
<!-- 上报情况概括 -->
<el-card class="box-card">
<div slot="header">
<div class="sbqkgk">
<div class="header">
上报情况概括
</div>
<ul class="sbqkgs">
<div class="sbqkgsList">
<p v-for="(item, index) in sbqkgsList" :key="index"
:class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
{{ item }}
</p>
</div>
<li>总数量</li>
<li>99999</li>
</ul>
</el-card>
</div>
</div>
<!-- 底部表格 -->
<el-card class="jrxxlb">
<div class="jrxxlb tableClass">
<div class="title">陕西省平台接入情况</div>
<!-- 陕西省平台接入情况table -->
<lb-table ref="table" :pagination="false" :heightNum="527" :column="tableData.columns" :data="tableData.data">
<lb-table ref="table" :pagination="false" :heightNum="428" :column="tableData.columns" :data="tableData.data">
</lb-table>
</el-card>
</div>
</div>
</div>
</template>
......@@ -66,26 +98,32 @@ export default {
name: "home",
components: { wgsl },
data () {
function formatter (number) {
const numbers = number.toString().split('').reverse()
const segs = []
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
return segs.join(',').split('').reverse().join('')
}
return {
// 陕西省接入概括
gkList: [
{
value: 6269,
title: '总数量'
},
{
value: 300,
title: '日均接入量'
},
{
value: 0,
title: '当天接入量'
},
{
value: 3620,
title: '总体质量'
// 总数量
config: {
number: [6523],
content: '{nt}',
formatter,
style: {
fontSize: 50,
fontWeight: 700,
fill: '#FFDD00'
}
],
},
// 日均接入量
jjrl: 300,
// 当天接入量
dtjrl: 100,
// 总体质量
ztzl: 3620,
// 上报情况概括
sbqkgs: 6296,
// 接入点概括
jrdList: [
{
......@@ -106,14 +144,50 @@ export default {
// 表格头部信息
columns: data.columns(),
// 表格列表数据
data: [{}]
data: [{
xzqmc: '咸阳市',
xzqzs: 100,
jrl: 300,
jscgl: 20,
dk: 60,
wjrqx: '长安县',
jrdf: 50
},
{
xzqmc: '咸阳市',
xzqzs: 100,
jrl: 300,
jscgl: 20,
dk: 60,
wjrqx: '长安县',
jrdf: 50
}]
}
}
},
methods: {}
computed: {
jrlList: function () {
return this.jjrl.toString().split('')
},
dtjrlList: function () {
return this.dtjrl.toString().split('')
},
ztzlList: function () {
return this.ztzl.toString().split('')
},
sbqkgsList: function () {
const numbers = this.sbqkgs.toString().split('').reverse()
const segs = []
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
return segs.join(',').split('').reverse().join('')
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
@import "./home.scss";
</style>
......