Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
44cfc292 by 任超
Options

style:首页地图

1 parent 235283e5
Expand all
Inline Side-by-side
Showing 10 changed files with 115 additions and 642 deletions
1 <template>
2 <div class="fzqk">
3 <div class="home-title">
4 <span class="title-name">发证情况</span>
5 <span class="title-more">更多＞＞</span>
6 </div>
7 <div class="home-content">
8 <div class="top">
9 <div class="img">
10 <img :src="imgSrc" alt="" />
11 </div>
12 <div class="word">
13 <div class="name">发证总量</div>
14 <div class="num">{{ fzzl }}</div>
15 <div class="unit">本</div>
16 </div>
17 </div>
18 <div class="bottom">
19 <div class="name">证书</div>
20 <div class="smallnum">{{ zs }}</div>
21 <div class="unit">本</div>
22 </div>
23 <div class="bottom">
24 <div class="name">证明</div>
25 <div class="smallnum">{{ zm }}</div>
26 <div class="unit">本</div>
27 </div>
28 </div>
29 </div>
30 </template>
31
32 <script>
33 export default {
34 name: "fzqk",
35 components: {},
36 data () {
37 return {
38 fzzl: 132176,
39 zs: 54237,
40 zm: 77939,
41 imgSrc: require("./images/zs.png"),
42 };
43 },
44 methods: {},
45 };
46 </script>
47 <style scoped lang="scss">
48 @import "./home.scss";
49
50 .fzqk {
51 width: 100%;
52 height: 100%;
53
54 .top {
55 width: 100%;
56 height: 50%;
57 display: flex;
58 align-items: center;
59
60 .img {
61 width: 100px;
62 height: 100px;
63
64 img {
65 width: 80px;
66 height: 80px;
67 border-radius: 50%;
68 background: #0f93f6;
69 margin: 10px;
70 }
71 }
72
73 .word {
74 width: calc(100% - 100px);
75 height: 80px;
76 padding-left: 20px;
77 }
78 }
79
80 .bottom {
81 width: 50%;
82 height: 50%;
83 float: left;
84 }
85
86 .name {
87 font-size: 16px;
88 color: #606266;
89 width: 100%;
90 height: 40px;
91 line-height: 40px;
92 }
93
94 .num,
95 .smallnum {
96 display: inline-block;
97 font-size: 30px;
98 color: #0f93f6;
99 height: 40px;
100 line-height: 40px;
101 }
102
103 .smallnum {
104 font-size: 20px;
105 }
106
107 .unit {
108 display: inline-block;
109 font-size: 14px;
110 color: #606266;
111 height: 40px;
112 line-height: 40px;
113 }
114 }
115 </style>
...\ No newline at end of file ...\ No newline at end of file
1 .home { 1 .home {
2 background: #dfe7f3; 2 background: #fff;
3 height: 100%; 3 height: 100%;
4 width: 100%; 4 width: 100%;
5 box-sizing: border-box; 5 box-sizing: border-box;
6 padding: 10px;
7 display: flex;
8 justify-content: space-between;
9 overflow-y: hidden;
10
11 &-left,
12 &-center,
13 &-right {
14 width: 32%;
15 height: 100%;
16 border-radius: 4px;
17 }
18 6
19 &-left { 7 &-left {
20 width: 25%; 8 width: 50%;
21 display: flex; 9 padding-top: 25px;
22 justify-content: space-between;
23 flex-wrap: wrap;
24
25 &-top {
26 width: 100%;
27 height: 35%;
28 background: #fff;
29 margin-bottom: 15px;
30 border-radius: 4px;
31 }
32
33 &-bottom {
34 width: 100%;
35 height: calc(65% - 15px);
36 background: #fff;
37 border-radius: 4px;
38 }
39 }
40
41 &-center {
42 width: calc(40% - 30px);
43 background: #fff;
44 margin: 0 15px;
45 }
46
47 &-right {
48 width: 35%;
49 display: flex;
50 justify-content: space-between;
51 flex-wrap: wrap;
52
53 &-top {
54 width: 100%;
55 height: 35%;
56 background: #fff;
57 margin-bottom: 15px;
58 border-radius: 4px;
59 }
60
61 &-bottom {
62 width: 100%;
63 height: calc(65% - 15px);
64 background: #fff;
65 border-radius: 4px;
66 }
67 }
68
69 &-title {
70 width: 100%;
71 height: 40px;
72 line-height: 40px;
73 border-bottom: 1px solid #dfe7f3;
74 font-size: 16px;
75
76 .title-name,
77 .title-more {
78 display: inline-block;
79 height: 24px;
80 line-height: 24px;
81 margin-top: 8px;
82 }
83
84 .title-name {
85 float: left;
86 margin-left: 20px;
87 padding-left: 10px;
88 border-left: 4px solid #0F93F6;
89 }
90
91 .title-more {
92 display: inline-block;
93 float: right;
94 margin-right: 20px;
95 color: #97a8be;
96 cursor: pointer;
97 }
98 }
99
100 &-content {
101 width: 100%;
102 height: calc(100% - 41px);
103 padding: 0 20px 20px 20px;
104 } 10 }
105 } 11 }
...\ 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 <div class="home-left">
4 <div class="home-left-top">
5 <fzqk></fzqk>
6 </div>
7 <div class="home-left-bottom">
8 <wlqk></wlqk>
9 </div>
10 </div>
11 <div class="home-center">
12 <wgsl></wgsl> 4 <wgsl></wgsl>
13 </div> 5 </div>
14 <div class="home-right">
15 <div class="home-right-top">
16 <jgfl></jgfl>
17 </div>
18 <div class="home-right-bottom">
19 <wgzj></wgzj>
20 </div>
21 </div>
22 </div> 6 </div>
23 </template> 7 </template>
24 8
25 <script> 9 <script>
26 // 监管首页 10 // 监管首页
27 import fzqk from "./fzqk.vue";
28 import wlqk from "./wlqk.vue";
29 import wgsl from "./wgsl.vue"; 11 import wgsl from "./wgsl.vue";
30 import jgfl from "./jgfl.vue";
31 import wgzj from "./wgzj.vue";
32
33 export default { 12 export default {
34 name: "home", 13 name: "home",
35 components: { fzqk, wlqk, wgsl, jgfl, wgzj }, 14 components: { wgsl },
36 data () { 15 data () {
37 return {}; 16 return {};
38 }, 17 },
......
1 <template>
2 <div class="jgfl">
3 <div class="home-title">
4 <span class="title-name">监管分类</span>
5 <span class="title-more">更多＞＞</span>
6 </div>
7 <div class="home-content">
8 <div id="jgfl-myChart" class="chart"></div>
9 </div>
10 </div>
11 </template>
12
13 <script>
14 export default {
15 name: "jgfl",
16 components: {},
17 data () {
18 return {
19 data: [20118, 416232, 224447, 32, 48842],
20 };
21 },
22 mounted () {
23 this.echartInit();
24 },
25 methods: {
26 echartInit () {
27 let _this = this;
28 // 基于准备好的dom，初始化echarts实例
29 let myChart = this.$echarts.init(
30 document.getElementById("jgfl-myChart")
31 );
32 // 绘制图表
33 myChart.setOption({
34 title: {
35 text: "(单位: 件)",
36 textStyle: {
37 fontSize: 16,
38 color: "#606266",
39 fontWeight: "normal",
40 },
41 },
42 color: "red",
43 radar: {
44 indicator: [
45 { name: "原则监管", max: 22000 },
46 { name: "时效监管", max: 420000 },
47 { name: "证书监管", max: 230000 },
48 { name: "年限监管", max: 38000 },
49 { name: "内容监管", max: 50000 },
50 ],
51 name: {
52 color: "#606266",
53 formatter: function (value, indicator) {
54 if (value == "原则监管") {
55 return value + " " + _this.data[0];
56 } else if (value == "时效监管") {
57 return value + " " + _this.data[1];
58 } else if (value == "证书监管") {
59 return value + " " + _this.data[2];
60 } else if (value == "年限监管") {
61 return value + " " + _this.data[3];
62 } else if (value == "内容监管") {
63 return value + " " + _this.data[4];
64 }
65 },
66 },
67 splitLine: {
68 lineStyle: {
69 color: "#0F93F6",
70 },
71 },
72 splitArea: {
73 show: false
74 }
75 },
76 series: [
77 {
78 type: "radar",
79 data: [
80 {
81 value: _this.data,
82 },
83 ],
84 },
85 ],
86 });
87 },
88 },
89 };
90 </script>
91 <style scoped lang="scss">
92 @import "./home.scss";
93
94 .jgfl {
95 width: 100%;
96 height: 100%;
97
98 .chart {
99 width: 100%;
100 height: calc(100% - 10px);
101 margin-top: 10px;
102 }
103 }
104 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="wgsl"> 2 <div class="wgsl">
3 <div id="wgsl-myChart" class="chart"></div> 3 <div class="title">陕西省不动产信息接入</div>
4 <div class="map-box" ref="mapContainProvince" />
4 </div> 5 </div>
5 </template> 6 </template>
6 7
7 <script> 8 <script>
8 // 网络情况 9 import echarts from "echarts";
9 export default { 10 export default {
10 name: "wgsl",
11 components: {},
12 data () { 11 data () {
13 return {}; 12 return {
13 provinceName: "shanxi1",
14 mapName: "陕西",
15 listArr: [{
16 name: '西安市',
17 value: '6000'
14 }, 18 },
15 mounted () { 19 {
20 name: '宝鸡市',
21 value: '8000'
22 },
23 {
24 name: '咸阳市',
25 value: '3000'
26 },
27 {
28 name: '铜川市',
29 value: '7000'
30 },
31 {
32 name: '渭南市',
33 value: '1000'
34 },
35 {
36 name: '延安市',
37 value: '2000'
38 },
39 {
40 name: '榆林市',
41 value: '600'
42 },
43 {
44 name: '汉中市',
45 value: '3000'
46 },
47 {
48 name: '安康市',
49 value: '1000'
50 },
51 {
52 name: '商洛市',
53 value: '1000'
54 }], //城市json
55 max: "9000", //最大value值
56 min: "500", // 最小value值
57 };
16 }, 58 },
17 methods: { 59 methods: {
18 60 drawProvinceMap (provinceName, mapName) {
61 this.provinceName = provinceName;
62 this.mapName = mapName;
63 require(`./map/${this.provinceName}.js`);
64 let _this = this;
65 let myChart8 = echarts.init(this.$refs.mapContainProvince);
66 const option = {
67 visualMap: {
68 min: _this.min,
69 max: _this.max,
70 show: false,
71 inRange: {
72 color: ["lightskyblue"],
73 },
74 },
75 tooltip: {
76 trigger: "item",
77 formatter: function (params) {
78 return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
79 },
80 borderColor: "#CB000C",
81 borderWidth: "1",
82 },
83 series: [
84 {
85 type: "map",
86 map: this.mapName,
87 itemStyle: {
88 // normal: { label: { show: true } },
89 normal: { //正常状态
90 label: {
91 show: true,
92 formatter: '{b}', //地图上显示的数据，分别对应data中的name和value
93 color: '#fff',
19 }, 94 },
20 }; 95 areaColor: '#409EFF' //地图区域的颜色
96 },
97 emphasis: {
98 label: { show: true },
99 areaColor: "#67C23A", //鼠标进入时的颜色
100 },
101 },
102 data: _this.listArr,
103 },
104 ],
105 };
106 myChart8.setOption(option);
107 },
108 },
109 mounted () {
110 this.drawProvinceMap("shanxi1", "陕西");
111 }
112 }
21 </script> 113 </script>
22 <style scoped lang="scss"> 114 <style scoped>
23 @import "./home.scss";
24
25 .wgsl { 115 .wgsl {
26 width: 100%; 116 width: 100%;
27 height: 100%; 117 }
28 118
29 .chart { 119 .title {
120 text-align: center;
121 line-height: 36px;
122 font-size: 26px;
123 }
124
125 .map-box {
126 display: inline-block;
30 width: 100%; 127 width: 100%;
31 height: 100%; 128 height: 80vh;
32 background: url("./images/map.png") 50% 50% no-repeat;
33 }
34 } 129 }
35 </style> 130 </style>
......
1 <template>
2 <div class="wgzj">
3 <div class="home-title">
4 <span class="title-name">违规总计</span>
5 <span class="title-more">更多＞＞</span>
6 </div>
7 <div class="home-content">
8 <div class="table-box">
9 <paging-table v-loading="loading" :data="data" :column="column" :pagination="false"></paging-table>
10 </div>
11 </div>
12 </div>
13 </template>
14
15 <script>
16 import pagingTable from "@/components/pagingTable/pagingTable.vue";
17 export default {
18 name: "wgzj",
19 components: { pagingTable },
20 data () {
21 return {
22 loading: false,
23 data: [
24 {
25 xzq: "汉台区",
26 yzjg: "4818",
27 sxjg: "367575",
28 zsjg: "72920",
29 nxjg: "3",
30 nrjg: "3082",
31 zj: "448398",
32 },
33 {
34 xzq: "南郑区",
35 yzjg: "4818",
36 sxjg: "367575",
37 zsjg: "72920",
38 nxjg: "3",
39 nrjg: "3082",
40 zj: "448398",
41 },
42 {
43 xzq: "汉台区",
44 yzjg: "4818",
45 sxjg: "367575",
46 zsjg: "72920",
47 nxjg: "3",
48 nrjg: "3082",
49 zj: "448398",
50 },
51 {
52 xzq: "汉台区",
53 yzjg: "4818",
54 sxjg: "367575",
55 zsjg: "72920",
56 nxjg: "3",
57 nrjg: "3082",
58 zj: "448398",
59 },
60 {
61 xzq: "汉台区",
62 yzjg: "4818",
63 sxjg: "367575",
64 zsjg: "72920",
65 nxjg: "3",
66 nrjg: "3082",
67 zj: "448398",
68 },
69 {
70 xzq: "汉台区",
71 yzjg: "4818",
72 sxjg: "367575",
73 zsjg: "72920",
74 nxjg: "3",
75 nrjg: "3082",
76 zj: "448398",
77 },
78 {
79 xzq: "南郑区",
80 yzjg: "4818",
81 sxjg: "367575",
82 zsjg: "72920",
83 nxjg: "3",
84 nrjg: "3082",
85 zj: "448398",
86 },
87 {
88 xzq: "汉台区",
89 yzjg: "4818",
90 sxjg: "367575",
91 zsjg: "72920",
92 nxjg: "3",
93 nrjg: "3082",
94 zj: "448398",
95 },
96 {
97 xzq: "汉台区",
98 yzjg: "4818",
99 sxjg: "367575",
100 zsjg: "72920",
101 nxjg: "3",
102 nrjg: "3082",
103 zj: "448398",
104 },
105 {
106 xzq: "汉台区",
107 yzjg: "4818",
108 sxjg: "367575",
109 zsjg: "72920",
110 nxjg: "3",
111 nrjg: "3082",
112 zj: "448398",
113 },
114 {
115 xzq: "汉台区",
116 yzjg: "4818",
117 sxjg: "367575",
118 zsjg: "72920",
119 nxjg: "3",
120 nrjg: "3082",
121 zj: "448398",
122 },
123 {
124 xzq: "南郑区",
125 yzjg: "4818",
126 sxjg: "367575",
127 zsjg: "72920",
128 nxjg: "3",
129 nrjg: "3082",
130 zj: "448398",
131 },
132 {
133 xzq: "汉台区",
134 yzjg: "4818",
135 sxjg: "367575",
136 zsjg: "72920",
137 nxjg: "3",
138 nrjg: "3082",
139 zj: "448398",
140 },
141 {
142 xzq: "汉台区",
143 yzjg: "4818",
144 sxjg: "367575",
145 zsjg: "72920",
146 nxjg: "3",
147 nrjg: "3082",
148 zj: "448398",
149 },
150 {
151 xzq: "汉台区",
152 yzjg: "4818",
153 sxjg: "367575",
154 zsjg: "72920",
155 nxjg: "3",
156 nrjg: "3082",
157 zj: "448398",
158 },
159 ],
160 column: [
161 {
162 prop: "xzq",
163 label: "行政区/监管(件)",
164 },
165 {
166 prop: "yzjg",
167 label: "原则监管",
168 width: 60,
169 },
170 {
171 prop: "sxjg",
172 label: "时效监管",
173 },
174 {
175 prop: "zsjg",
176 label: "证书监管",
177 width: 60,
178 },
179 {
180 prop: "nxjg",
181 label: "年限监管",
182 width: 60,
183 },
184 {
185 prop: "nrjg",
186 label: "内容监管",
187 width: 60,
188 },
189 {
190 prop: "zj",
191 label: "总计",
192 },
193 ],
194 };
195 },
196 methods: {},
197 };
198 </script>
199 <style scoped lang="scss">
200 @import "./home.scss";
201
202 .wgzj {
203 width: 100%;
204 height: 100%;
205
206 .table-box {
207 height: calc(100% - 20px);
208 overflow-y: scroll;
209 margin-top: 20px;
210 }
211 }
212 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="wlqk">
3 <div id="wlqk-myChart" class="chart"></div>
4 </div>
5 </template>
6
7 <script>
8 // 网络情况
9 export default {
10 name: "wlqk",
11 components: {},
12 data () {
13 return {
14 xAxisData: [],
15 wldkData: [],
16 wlzcData: [],
17 };
18 },
19 mounted () {
20 this.echartInit();
21 },
22 methods: {
23 echartInit () {
24 let _this = this;
25 // 基于准备好的dom，初始化echarts实例
26 let myChart = this.$echarts.init(
27 document.getElementById("wlqk-myChart")
28 );
29 // 绘制图表
30 myChart.setOption({
31 color: ["#ee9096", "#8fb657"],
32 legend: {
33 data: ["网络断开", "网络正常"],
34 top: 20,
35 },
36 xAxis: [
37 {
38 type: "category",
39 data: _this.xAxisData,
40 },
41 ],
42 yAxis: [
43 {
44 type: "value",
45 },
46 ],
47 series: [
48 {
49 name: "网络断开",
50 type: "bar",
51 data: _this.wldkData,
52 },
53 {
54 name: "网络正常",
55 type: "bar",
56 data: _this.wlzcData,
57 },
58 ],
59 });
60 },
61 },
62 };
63 </script>
64 <style scoped lang="scss">
65 @import "./home.scss";
66
67 .wlqk {
68 width: 100%;
69 height: 100%;
70
71 .chart {
72 width: 100%;
73 height: 100%;
74 }
75 }
76 </style>
...\ No newline at end of file ...\ No newline at end of file