Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
fc9ef39c by 任超
Options

feat:首页

1 parent bbe0b961
Inline Side-by-side
Showing 4 changed files with 243 additions and 9 deletions
1 import filter from '@/utils/filter.js'
2 class data extends filter {
3 constructor() {
4 super()
5 }
6 columns () {
7 return [
8 {
9 type: 'index',
10 label: "序号",
11 },
12 {
13 prop: "xzqmc",
14 label: "行政区名称",
15 },
16 {
17 prop: "xzqzs",
18 label: "行政区总数",
19 },
20 {
21 prop: "jrl",
22 label: "接入量",
23 },
24 {
25 prop: 'jscgl',
26 label: '接收成功率',
27 render: (h, scope) => {
28 return (
29 <div>
30 {scope.row.jscgl} %
31 </div>
32 )
33 }
34 },
35 {
36 prop: "dk",
37 label: "成功率得分",
38 },
39 {
40 prop: "wjrqx",
41 label: "未接入区县",
42 },
43 {
44 prop: "jrdf",
45 label: "接入得分",
46 },
47 {
48 prop: "jrdf",
49 label: "未上传登薄日志区县",
50 },
51 {
52 prop: "jrdf",
53 label: "登薄日志得分",
54 },
55 {
56 prop: "jrdf",
57 label: "总评分",
58 }
59 ]
60 }
61 }
62 export default new data()
1 .home { 1 .home {
2 background: #fff;
3 height: 100%; 2 height: 100%;
4 width: 100%; 3 width: 100%;
5 box-sizing: border-box; 4 box-sizing: border-box;
5 display: flex;
6 justify-content: space-between;
6 7
7 &-left { 8 &-left {
8 width: 50%; 9 width: 40%;
9 padding-top: 25px; 10 padding-top: 25px;
10 } 11 }
12
13 &-right {
14 width: 59.5%;
15
16 .gkList {
17 @include flex-center;
18 flex-direction: column;
19
20 li:nth-child(1) {
21 color: #409EFF;
22 font-size: 24px;
23 }
24 }
25
26 .jrdgk {
27 display: flex;
28 margin-top: 5px;
29 justify-content: space-between;
30
31 .box-card {
32 width: 49.5%;
33 }
34 }
35
36 .jrdList {
37 ul {
38 @include flex-center;
39 flex-direction: column;
40
41 li:nth-child(1) {
42 color: #409EFF;
43 font-size: 24px;
44 }
45 }
46 }
47
48 .jrdList:nth-of-type(2) {
49 li:nth-child(1) {
50 color: #67C23A;
51 }
52 }
53
54 .jrdList:nth-of-type(3) {
55 li:nth-child(1) {
56 color: #F56C6C;
57 }
58 }
59 }
60
61 .sbqkgs {
62 display: flex;
63 justify-content: space-between;
64 width: 100%;
65
66 li {
67 font-size: 24px;
68 }
69
70 li:nth-child(2) {
71 color: #409EFF;
72 margin-left: 25px;
73 }
74 }
75
76 .jrxxlb {
77 margin-top: 5px;
78
79 .title {
80 text-align: center;
81 line-height: 36px;
82 }
83 }
11 } 84 }
...\ 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 <div class="home-left"> 3 <el-card class="home-left">
4 <!-- 地图 -->
4 <wgsl></wgsl> 5 <wgsl></wgsl>
6 </el-card>
7 <div class="home-right">
8 <!-- 陕西省接入概括 -->
9 <el-card>
10 <div slot="header">
11 陕西省接入概括
12 </div>
13 <!-- 陕西省接入概括列表 -->
14 <el-row :gutter="20">
15 <el-col :span="6" v-for="(item, index) in gkList" :key="index">
16 <ul class="gkList">
17 <li>{{ item.value }}</li>
18 <li>{{ item.title }}</li>
19 </ul>
20 </el-col>
21 </el-row>
22 </el-card>
23 <div class="jrdgk">
24 <!-- 接入点概括 -->
25 <el-card class="box-card">
26 <div slot="header">
27 接入点概括
28 </div>
29 <el-row :gutter="20">
30 <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
31 <ul>
32 <li>{{ item.value }}</li>
33 <li>{{ item.title }}</li>
34 </ul>
35 </el-col>
36 </el-row>
37 </el-card>
38 <!-- 上报情况概括 -->
39 <el-card class="box-card">
40 <div slot="header">
41 上报情况概括
42 </div>
43 <ul class="sbqkgs">
44 <li>总数量</li>
45 <li>99999</li>
46 </ul>
47 </el-card>
48 </div>
49 <!-- 底部表格 -->
50 <el-card class="jrxxlb">
51 <div class="title">陕西省平台接入情况</div>
52 <!-- 陕西省平台接入情况table -->
53 <lb-table ref="table" :pagination="false" :heightNum="527" :column="tableData.columns" :data="tableData.data">
54 </lb-table>
55 </el-card>
5 </div> 56 </div>
6 </div> 57 </div>
7 </template> 58 </template>
...@@ -9,15 +60,60 @@ ...@@ -9,15 +60,60 @@
9 <script> 60 <script>
10 // 监管首页 61 // 监管首页
11 import wgsl from "./wgsl.vue"; 62 import wgsl from "./wgsl.vue";
63 // 引入表格数据
64 import data from "./data"
12 export default { 65 export default {
13 name: "home", 66 name: "home",
14 components: { wgsl }, 67 components: { wgsl },
15 data () { 68 data () {
16 return {}; 69 return {
70 // 陕西省接入概括
71 gkList: [
72 {
73 value: 6269,
74 title: '总数量'
75 },
76 {
77 value: 300,
78 title: '日均接入量'
79 },
80 {
81 value: 0,
82 title: '当天接入量'
83 },
84 {
85 value: 3620,
86 title: '总体质量'
87 }
88 ],
89 // 接入点概括
90 jrdList: [
91 {
92 value: 60,
93 title: '总数量'
94 },
95 {
96 value: 60,
97 title: '正常'
98 },
99 {
100 value: 60,
101 title: '异常'
102 }
103 ],
104 // 表格数据
105 tableData: {
106 // 表格头部信息
107 columns: data.columns(),
108 // 表格列表数据
109 data: [{}]
110 }
111 }
17 }, 112 },
18 methods: {}, 113 methods: {}
19 }; 114 }
20 </script> 115 </script>
21 <style scoped lang="scss"> 116 <style scoped lang="scss">
117 @import "~@/styles/mixin.scss";
22 @import "./home.scss"; 118 @import "./home.scss";
23 </style> 119 </style>
......
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
6 </template> 6 </template>
7 7
8 <script> 8 <script>
9 import echarts from "echarts";
10 export default { 9 export default {
11 data () { 10 data () {
12 return { 11 return {
...@@ -60,9 +59,10 @@ export default { ...@@ -60,9 +59,10 @@ export default {
60 drawProvinceMap (provinceName, mapName) { 59 drawProvinceMap (provinceName, mapName) {
61 this.provinceName = provinceName; 60 this.provinceName = provinceName;
62 this.mapName = mapName; 61 this.mapName = mapName;
62 // 引入区域数据
63 require(`./map/${this.provinceName}.js`); 63 require(`./map/${this.provinceName}.js`);
64 let _this = this; 64 let _this = this;
65 let myChart8 = echarts.init(this.$refs.mapContainProvince); 65 let myChart8 = this.$echarts.init(this.$refs.mapContainProvince);
66 const option = { 66 const option = {
67 visualMap: { 67 visualMap: {
68 min: _this.min, 68 min: _this.min,
...@@ -72,12 +72,15 @@ export default { ...@@ -72,12 +72,15 @@ export default {
72 color: ["lightskyblue"], 72 color: ["lightskyblue"],
73 }, 73 },
74 }, 74 },
75 // 数据移入显示
75 tooltip: { 76 tooltip: {
76 trigger: "item", 77 trigger: "item",
77 formatter: function (params) { 78 formatter: function (params) {
78 return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件' 79 return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
79 }, 80 },
81 // 边框颜色
80 borderColor: "#CB000C", 82 borderColor: "#CB000C",
83 // 边框宽度
81 borderWidth: "1", 84 borderWidth: "1",
82 }, 85 },
83 series: [ 86 series: [
...@@ -85,7 +88,6 @@ export default { ...@@ -85,7 +88,6 @@ export default {
85 type: "map", 88 type: "map",
86 map: this.mapName, 89 map: this.mapName,
87 itemStyle: { 90 itemStyle: {
88 // normal: { label: { show: true } },
89 normal: { //正常状态 91 normal: { //正常状态
90 label: { 92 label: {
91 show: true, 93 show: true,
...@@ -107,6 +109,7 @@ export default { ...@@ -107,6 +109,7 @@ export default {
107 }, 109 },
108 }, 110 },
109 mounted () { 111 mounted () {
112 // 初始化数据
110 this.drawProvinceMap("shanxi1", "陕西"); 113 this.drawProvinceMap("shanxi1", "陕西");
111 } 114 }
112 } 115 }
......