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 344 additions and 144 deletions
...@@ -74,4 +74,4 @@ ...@@ -74,4 +74,4 @@
74 "type": "git", 74 "type": "git",
75 "url": "git+https://github.com/PanJiaChen/vue-element-admin.git" 75 "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
76 } 76 }
77 } 77 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -170,18 +170,43 @@ ...@@ -170,18 +170,43 @@
170 cursor: pointer; 170 cursor: pointer;
171 } 171 }
172 172
173 // element table 选中 颜色 173 // element table 样式修改
174 // .el-table--enable-row-hover .el-table__body tr:hover>td { 174 //去掉表格内的线
175 // background-color: #FCFDFD; 175 table th {
176 // } 176 border-bottom: 5px solid #000637 !important;
177 177 }
178 // .el-table__body .el-table__row.hover-row td { 178
179 // background-color: #FCFDFD; 179 table td {
180 // } 180 border-bottom: 5px solid #000637 !important;
181 181 }
182 // .el-table tbody tr:hover>td { 182
183 // background-color: #FCFDFD; 183 //去掉最下面的那一条线
184 // } 184 .el-table::before {
185 height: 5px !important;
186 background-color: #000637 !important;
187 }
188
189 .lb-table {
190 background-color: #000637 !important;
191 }
192
193 .el-table__body-wrapper {
194 background-color: #000637 !important;
195 }
196
197 .el-table--enable-row-hover .el-table__body tr:hover>td {
198 background-color: #103E99 !important;
199 }
200
201 .el-table__body .el-table__row.hover-row td {
202 background-color: #103E99 !important;
203 }
204
205 .el-table tbody tr:hover>td {
206 background-color: #103E99 !important;
207 }
208
209
185 // 表格样式 210 // 表格样式
186 .el-table th { 211 .el-table th {
187 height: 48px !important; 212 height: 48px !important;
......
1 .tableClass {
2 /deep/.el-table {
3 border: none !important;
4
5 .cell {
6 color: #FFFFFF !important;
7 }
8
9 .el-table__row {
10 background-color: #00275F !important;
11 margin-top: 5px;
12 }
13
14 thead {
15 background: #103E99 !important;
16
17 & th {
18 //inherit：规定应该从父元素继承 background-color 属性的设置。
19 //transparent：默认。背景颜色为透明。
20 // background-color: inherit !important;
21 background-color: transparent;
22 }
23
24 & tr {
25 // background-color: inherit !important;
26 background-color: transparent;
27 }
28 }
29 }
30 }
31
1 //*****start*通用表单查询条件，列表样式******// 32 //*****start*通用表单查询条件，列表样式******//
2 .from-clues { 33 .from-clues {
3 min-width: 1280px; 34 min-width: 1280px;
...@@ -67,72 +98,9 @@ ...@@ -67,72 +98,9 @@
67 background: #FFFFFF; 98 background: #FFFFFF;
68 margin-top: 10px; 99 margin-top: 10px;
69 100
70 //去掉表格内的线
71 /deep/ table th {
72 border-bottom: 5px solid #000637 !important;
73 }
74
75 /deep/ table td {
76 border-bottom: 5px solid #000637 !important;
77 }
78
79 //去掉最下面的那一条线
80 /deep/.el-table::before {
81 height: 5px !important;
82 background-color: #000637 !important;
83 }
84
85
86 /deep/.lb-table {
87 background-color: #000637 !important;
88 }
89
90 /deep/.el-table__body-wrapper {
91 background-color: #000637 !important;
92 }
93
94 /deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
95 background-color: #103E99 !important;
96 }
97
98 /deep/.el-table__body .el-table__row.hover-row td {
99 background-color: #103E99 !important;
100 }
101
102 /deep/.el-table tbody tr:hover>td {
103 background-color: #103E99 !important;
104 }
105
106 //修改表头的背景颜色横向渐变色 101 //修改表头的背景颜色横向渐变色
102 @extend .tableClass;
107 103
108 /deep/.el-table {
109 border: none !important;
110
111 .cell {
112 color: #FFFFFF !important;
113 }
114
115 .el-table__row {
116 background-color: #00275F !important;
117 margin-top: 5px;
118 }
119
120 thead {
121 background: #103E99 !important;
122
123 & th {
124 //inherit：规定应该从父元素继承 background-color 属性的设置。
125 //transparent：默认。背景颜色为透明。
126 // background-color: inherit !important;
127 background-color: transparent;
128 }
129
130 & tr {
131 // background-color: inherit !important;
132 background-color: transparent;
133 }
134 }
135 }
136 } 104 }
137 105
138 .el-form--inline .el-form-item { 106 .el-form--inline .el-form-item {
......
...@@ -43,18 +43,6 @@ class data extends filter { ...@@ -43,18 +43,6 @@ class data extends filter {
43 { 43 {
44 prop: "jrdf", 44 prop: "jrdf",
45 label: "接入得分", 45 label: "接入得分",
46 },
47 {
48 prop: "jrdf",
49 label: "未上传登薄日志区县",
50 },
51 {
52 prop: "jrdf",
53 label: "登薄日志得分",
54 },
55 {
56 prop: "jrdf",
57 label: "总评分",
58 } 46 }
59 ] 47 ]
60 } 48 }
......
...@@ -6,16 +6,30 @@ ...@@ -6,16 +6,30 @@
6 justify-content: space-between; 6 justify-content: space-between;
7 7
8 &-left { 8 &-left {
9 width: 40%; 9 width: 35%;
10 padding-top: 25px; 10 padding-top: 25px;
11 background-color: #000637;
12 color: #02D9FD;
11 } 13 }
12 14
13 &-right { 15 &-right {
14 width: 59.5%; 16 width: 64.5%;
17
18 .jrgk {
19 background-color: #000637;
20 color: #02D9FD;
21 padding-bottom: 20px;
22
23 .header {
24 text-align: center;
25 line-height: 36px;
26 }
27 }
15 28
16 .gkList { 29 .gkList {
17 @include flex-center; 30 @include flex-center;
18 flex-direction: column; 31 flex-direction: column;
32 position: relative;
19 33
20 li:nth-child(1) { 34 li:nth-child(1) {
21 color: #409EFF; 35 color: #409EFF;
...@@ -23,13 +37,96 @@ ...@@ -23,13 +37,96 @@
23 } 37 }
24 } 38 }
25 39
40 .gkList::before {
41 position: absolute;
42 right: 0;
43 top: 0;
44 content: '';
45 width: 1px;
46 height: 110px;
47 background: linear-gradient(180deg, #091B4C 0%, #47B5E0 56%, #091B4C 100%);
48 }
49
50 .zsl {
51 position: relative;
52
53 p {
54 background: url('../../image/zsl.png');
55 width: 200px;
56 height: 40px;
57 position: absolute;
58 left: 0;
59 bottom: 0;
60 background-size: cover;
61 margin-left: -34px;
62 }
63 }
64
65 .jrl {
66 margin-top: 20px;
67 text-align: center;
68 color: #E3F1FF;
69
70 .jrlList {
71 p {
72 margin: 0 3px 10px 3px;
73 }
74 }
75
76 .jrllsit1 {
77 p {
78 background: url('../../image/jrl1.png');
79 }
80 }
81
82 .jrllsit2 {
83 p {
84 background: url('../../image/jrl2.png');
85 }
86 }
87
88 .jrllsit3 {
89 p {
90 background: url('../../image/jrl3.png');
91 }
92 }
93
94 li {
95 color: #E3F1FF;
96 }
97 }
98
99 // 日均接入量
100 .jrlList {
101 display: flex;
102 align-items: center;
103 justify-content: center;
104
105 p {
106 width: 24px;
107 height: 36px;
108 font-size: 30px;
109 display: flex;
110 align-items: center;
111 justify-content: center;
112 font-weight: 700;
113 }
114 }
115
26 .jrdgk { 116 .jrdgk {
27 display: flex; 117 display: flex;
28 margin-top: 5px; 118 margin-top: 5px;
29 justify-content: space-between; 119 justify-content: space-between;
30 120
31 .box-card { 121 .sxsjr {
32 width: 49.5%; 122 background-color: #000637;
123 width: 49%;
124
125 .header {
126 text-align: center;
127 color: #02D9FD;
128 line-height: 30px;
129 }
33 } 130 }
34 } 131 }
35 132
...@@ -39,46 +136,94 @@ ...@@ -39,46 +136,94 @@
39 flex-direction: column; 136 flex-direction: column;
40 137
41 li:nth-child(1) { 138 li:nth-child(1) {
42 color: #409EFF; 139 font-size: 30px;
43 font-size: 24px; 140 width: 50px;
141 height: 50px;
142 background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%);
143 border-radius: 2px;
144 color: #E3F1FF;
145 display: flex;
146 align-items: center;
147 justify-content: center;
148 margin: 10px 0;
149 }
150
151 li:nth-child(2) {
152 color: #FFFFFF;
153 font-size: 14px;
44 } 154 }
45 } 155 }
46 } 156 }
47 157
48 .jrdList:nth-of-type(2) { 158 .jrdList:nth-of-type(2) {
49 li:nth-child(1) { 159 li:nth-child(1) {
50 color: #67C23A; 160 background: linear-gradient(143deg, #9CB636 0%, #32BCB1 100%);
51 } 161 }
52 } 162 }
53 163
54 .jrdList:nth-of-type(3) { 164 .jrdList:nth-of-type(3) {
55 li:nth-child(1) { 165 li:nth-child(1) {
56 color: #F56C6C; 166 background: linear-gradient(143deg, #C97E6D 0%, #CA304D 100%);
57 } 167 }
58 } 168 }
59 } 169 }
60 170
171 // 上报情况概括
172 .sbqkgk {
173 text-align: center;
174 color: #02D9FD;
175 line-height: 30px;
176 width: 50%;
177 background-color: #000637;
178 }
179
61 .sbqkgs { 180 .sbqkgs {
62 display: flex;
63 justify-content: space-between;
64 width: 100%; 181 width: 100%;
65 182
66 li { 183 .header {
67 font-size: 24px; 184 text-align: center;
185 line-height: 36px;
186 }
187
188 .sbqkgsList {
189 display: flex;
190 justify-content: center;
191 font-size: 50px;
192 margin: 20px 0 10px 0;
193 color: #E3F1FF;
194 font-weight: 700;
195 }
196
197 .active {
198 width: 31px;
199 height: 46px;
200 background: #054AE9;
201 display: flex;
202 align-items: center;
203 justify-content: center;
204 border-radius: 3px 1px 3px 1px;
205 margin: 0 3px;
68 } 206 }
69 207
70 li:nth-child(2) { 208 li {
71 color: #409EFF; 209 font-size: 16px;
72 margin-left: 25px; 210 text-align: center;
211 color: #E3F1FF;
73 } 212 }
74 } 213 }
75 214
76 .jrxxlb { 215 .jrxxlb {
77 margin-top: 5px; 216 margin-top: 5px;
217 background-color: #000637;
218
219 /deep/tbody tr:nth-child(odd) {
220 background: #000637 !important;
221 }
78 222
79 .title { 223 .title {
80 text-align: center; 224 text-align: center;
81 line-height: 36px; 225 line-height: 36px;
226 color: #02D9FD;
82 } 227 }
83 } 228 }
84 } 229 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="home"> 2 <div class="home">
3 <el-card class="home-left"> 3 <div class="home-left">
4 <!-- 地图 --> 4 <!-- 地图 -->
5 <wgsl></wgsl> 5 <wgsl></wgsl>
6 </el-card> 6 </div>
7 <div class="home-right"> 7 <div class="home-right">
8 <!-- 陕西省接入概括 --> 8 <!-- 陕西省接入概括 -->
9 <el-card> 9 <div class="jrgk">
10 <div slot="header"> 10 <div class="header">
11 陕西省接入概括 11 陕西省接入概括
12 </div> 12 </div>
13 <!-- 陕西省接入概括列表 --> 13 <!-- 陕西省接入概括列表 -->
14 <el-row :gutter="20"> 14 <el-row>
15 <el-col :span="6" v-for="(item, index) in gkList" :key="index"> 15 <el-col :span="9">
16 <ul class="gkList"> 16 <ul class="gkList">
17 <li>{{ item.value }}</li> 17 <li>总数量</li>
18 <li>{{ item.title }}</li> 18 <div class="zsl">
19 <dv-digital-flop :config="config" style="height:70px;" />
20 <p></p>
21 </div>
22 </ul>
23 </el-col>
24 <el-col :span="5">
25 <ul class="jrl">
26 <div class="jrlList jrllsit1">
27 <p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
28 </div>
29 <li>日均接入量</li>
30 </ul>
31 </el-col>
32 <el-col :span="5">
33 <ul class="jrl">
34 <div class="jrlList jrllsit2">
35 <p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
36 </div>
37 <li>日均接入量</li>
38 </ul>
39 </el-col>
40 <el-col :span="5">
41 <ul class="jrl">
42 <div class="jrlList jrllsit3">
43 <p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
44 </div>
45 <li>总体质量</li>
19 </ul> 46 </ul>
20 </el-col> 47 </el-col>
21 </el-row> 48 </el-row>
22 </el-card> 49 </div>
23 <div class="jrdgk"> 50 <div class="jrdgk">
24 <!-- 接入点概括 --> 51 <!-- 接入点概括 -->
25 <el-card class="box-card"> 52 <div class="sxsjr">
26 <div slot="header"> 53 <div class="header">
27 接入点概括 54 接入点概括
28 </div> 55 </div>
29 <el-row :gutter="20"> 56 <el-row>
30 <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index"> 57 <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
31 <ul> 58 <ul>
32 <li>{{ item.value }}</li> 59 <li>{{ item.value }}</li>
...@@ -34,25 +61,30 @@ ...@@ -34,25 +61,30 @@
34 </ul> 61 </ul>
35 </el-col> 62 </el-col>
36 </el-row> 63 </el-row>
37 </el-card> 64 </div>
38 <!-- 上报情况概括 --> 65 <!-- 上报情况概括 -->
39 <el-card class="box-card"> 66 <div class="sbqkgk">
40 <div slot="header"> 67 <div class="header">
41 上报情况概括 68 上报情况概括
42 </div> 69 </div>
43 <ul class="sbqkgs"> 70 <ul class="sbqkgs">
71 <div class="sbqkgsList">
72 <p v-for="(item, index) in sbqkgsList" :key="index"
73 :class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
74 {{ item }}
75 </p>
76 </div>
44 <li>总数量</li> 77 <li>总数量</li>
45 <li>99999</li>
46 </ul> 78 </ul>
47 </el-card> 79 </div>
48 </div> 80 </div>
49 <!-- 底部表格 --> 81 <!-- 底部表格 -->
50 <el-card class="jrxxlb"> 82 <div class="jrxxlb tableClass">
51 <div class="title">陕西省平台接入情况</div> 83 <div class="title">陕西省平台接入情况</div>
52 <!-- 陕西省平台接入情况table --> 84 <!-- 陕西省平台接入情况table -->
53 <lb-table ref="table" :pagination="false" :heightNum="527" :column="tableData.columns" :data="tableData.data"> 85 <lb-table ref="table" :pagination="false" :heightNum="428" :column="tableData.columns" :data="tableData.data">
54 </lb-table> 86 </lb-table>
55 </el-card> 87 </div>
56 </div> 88 </div>
57 </div> 89 </div>
58 </template> 90 </template>
...@@ -66,26 +98,32 @@ export default { ...@@ -66,26 +98,32 @@ export default {
66 name: "home", 98 name: "home",
67 components: { wgsl }, 99 components: { wgsl },
68 data () { 100 data () {
101 function formatter (number) {
102 const numbers = number.toString().split('').reverse()
103 const segs = []
104 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
105 return segs.join(',').split('').reverse().join('')
106 }
69 return { 107 return {
70 // 陕西省接入概括 108 // 总数量
71 gkList: [ 109 config: {
72 { 110 number: [6523],
73 value: 6269, 111 content: '{nt}',
74 title: '总数量' 112 formatter,
75 }, 113 style: {
76 { 114 fontSize: 50,
77 value: 300, 115 fontWeight: 700,
78 title: '日均接入量' 116 fill: '#FFDD00'
79 },
80 {
81 value: 0,
82 title: '当天接入量'
83 },
84 {
85 value: 3620,
86 title: '总体质量'
87 } 117 }
88 ], 118 },
119 // 日均接入量
120 jjrl: 300,
121 // 当天接入量
122 dtjrl: 100,
123 // 总体质量
124 ztzl: 3620,
125 // 上报情况概括
126 sbqkgs: 6296,
89 // 接入点概括 127 // 接入点概括
90 jrdList: [ 128 jrdList: [
91 { 129 {
...@@ -106,14 +144,50 @@ export default { ...@@ -106,14 +144,50 @@ export default {
106 // 表格头部信息 144 // 表格头部信息
107 columns: data.columns(), 145 columns: data.columns(),
108 // 表格列表数据 146 // 表格列表数据
109 data: [{}] 147 data: [{
148 xzqmc: '咸阳市',
149 xzqzs: 100,
150 jrl: 300,
151 jscgl: 20,
152 dk: 60,
153 wjrqx: '长安县',
154 jrdf: 50
155 },
156 {
157 xzqmc: '咸阳市',
158 xzqzs: 100,
159 jrl: 300,
160 jscgl: 20,
161 dk: 60,
162 wjrqx: '长安县',
163 jrdf: 50
164 }]
110 } 165 }
111 } 166 }
112 }, 167 },
113 methods: {} 168 computed: {
169 jrlList: function () {
170 return this.jjrl.toString().split('')
171 },
172 dtjrlList: function () {
173 return this.dtjrl.toString().split('')
174 },
175 ztzlList: function () {
176 return this.ztzl.toString().split('')
177 },
178 sbqkgsList: function () {
179 const numbers = this.sbqkgs.toString().split('').reverse()
180 const segs = []
181 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
182 return segs.join(',').split('').reverse().join('')
183 }
184 },
185 methods: {
186 }
114 } 187 }
115 </script> 188 </script>
116 <style scoped lang="scss"> 189 <style scoped lang="scss">
117 @import "~@/styles/mixin.scss"; 190 @import "~@/styles/mixin.scss";
191 @import "~@/styles/public.scss";
118 @import "./home.scss"; 192 @import "./home.scss";
119 </style> 193 </style>
......