Skip to content

bdc / bdcjg-web

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

style:地图

1 parent bb68563a
Expand all
Inline Side-by-side
Showing 13 changed files with 127 additions and 145 deletions
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 4
5 <script> 5 <script>
6 import tdTheme from './theme.json' // 引入默认主题 6 import tdTheme from './theme.json' // 引入默认主题
7 import '../map/fujian.js' 7 import '../map/hanzhong.js'
8 8
9 export default { 9 export default {
10 name: 'echart', 10 name: 'echart',
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
27 }, 27 },
28 options: { 28 options: {
29 type: Object, 29 type: Object,
30 default: ()=>({}) 30 default: () => ({})
31 } 31 }
32 }, 32 },
33 data () { 33 data () {
...@@ -61,6 +61,3 @@ export default { ...@@ -61,6 +61,3 @@ export default {
61 } 61 }
62 } 62 }
63 </script> 63 </script>
...\ No newline at end of file ...\ No newline at end of file
64
65 <style>
66 </style>
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <Echart 3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="500px"
4 id="centreLeft2Chart" 4 :options="options"></Echart>
5 ref="centreLeft2ChartRef"
6 :options="options"
7 height="360px"
8 width="330px"
9 ></Echart>
10 </div> 5 </div>
11 </template> 6 </template>
12 7
13 <script> 8 <script>
14 import Echart from '@/common/echart'; 9 import Echart from '@/common/echart';
15 export default { 10 export default {
16 data() { 11 data () {
17 return { 12 return {
18 options: {}, 13 options: {},
14 max: "9000", //最大value值
15 min: "500", // 最小value值
19 }; 16 };
20 }, 17 },
21 components: { 18 components: {
...@@ -29,47 +26,56 @@ export default { ...@@ -29,47 +26,56 @@ export default {
29 }, 26 },
30 watch: { 27 watch: {
31 cdata: { 28 cdata: {
32 handler(newData) { 29 handler (newData) {
30 let _this = this;
33 // 设置点的位置(经纬度) 31 // 设置点的位置(经纬度)
34 const geoCoordMap = { 32 const geoCoordMap = {
35 厦门市: [118.11022, 24.490474, 20], 33 汉台区: [107.03187, 33.06774, 20],
36 福州市: [119.206239, 26.275302, 20], 34 南郑区: [106.94024, 33.00299, 20],
37 泉州市: [118.589421, 24.908853, 20], 35 城固县: [107.33367, 33.15661, 20],
38 漳州市: [117.561801, 24.510897, 20], 36 洋县: [107.545837, 33.222739, 20],
39 龙岩市: [116.82978, 25.391603, 20], 37 西乡县: [107.76867, 32.98411, 20],
40 莆田市: [119.007558, 25.591011, 20], 38 镇巴县: [107.89648, 32.53487, 20],
41 三明市: [117.435001, 26.465444, 20], 39 勉县: [106.673221, 33.153553, 20],
42 南平市: [118.178459, 27.535627, 20], 40 留坝县: [106.92233, 33.61606, 20],
43 宁德市: [119.527082, 27.15924, 20], 41 佛坪县: [107.98974, 33.52496, 20],
42 宁强县: [106.25958, 32.82881, 20],
43 略阳县: [106.15399, 33.33009, 20],
44 }; 44 };
45 let seriesData = [ 45 let seriesData = [
46 { 46 {
47 name: '厦门市', 47 name: '汉台区',
48 }, 48 },
49 { 49 {
50 name: '福州市', 50 name: '南郑区',
51 }, 51 },
52 { 52 {
53 name: '泉州市', 53 name: '城固县',
54 }, 54 },
55 { 55 {
56 name: '漳州市', 56 name: '洋县',
57 }, 57 },
58 { 58 {
59 name: '龙岩市', 59 name: '西乡县',
60 }, 60 },
61 { 61 {
62 name: '莆田市', 62 name: '镇巴县',
63 }, 63 },
64 { 64 {
65 name: '三明市', 65 name: '勉县',
66 }, 66 },
67 { 67 {
68 name: '南平市', 68 name: '留坝县',
69 }, 69 },
70 { 70 {
71 name: '宁德市', 71 name: '佛坪县',
72 }, 72 },
73 {
74 name: '宁强县',
75 },
76 {
77 name: '略阳县'
78 }
73 ]; 79 ];
74 let convertData = function (data) { 80 let convertData = function (data) {
75 let scatterData = []; 81 let scatterData = [];
...@@ -97,55 +103,39 @@ export default { ...@@ -97,55 +103,39 @@ export default {
97 return [point[0] + 50, point[1] - 20]; 103 return [point[0] + 50, point[1] - 20];
98 }, 104 },
99 // 如果需要自定义 tooltip样式，需要使用formatter 105 // 如果需要自定义 tooltip样式，需要使用formatter
100 /*
101 formatter: params => { 106 formatter: params => {
102 return `<div style=""> ... </div>` 107 return `<div style="">${params.name}:${params.value}</div>`
103 } 108 }
104 */
105 }, 109 },
106 visualMap: { 110 visualMap: {
107 min: 0, 111 min: 0,
108 max: 10, 112 max: _this.max,
109 show: false, 113 top: "bottom",
110 seriesIndex: 0, 114 right: 10,
111 // 颜色 115 splitNumber: 6,
112 inRange: { 116 seriesIndex: [0],
113 color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'], 117 itemWidth: 20, // 每个图元的宽度
114 }, 118 itemGap: 2, // 每两个图元之间的间隔距离，单位为px
115 }, 119 pieces: [ // 自定义每一段的范围，以及每一段的文字
116 // 底部背景 120 { gte: 6000, label: '6000以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
117 geo: { 121 { gte: 2000, lte: 6000, label: '2000-6000', color: '#3375e4' },
118 show: true, 122 { gte: 1000, lte: 2000, label: '1000-2000', color: '#6797ef' },
119 aspectScale: 0.85, //长宽比 123 { gte: 500, lte: 1000, label: '500-1000', color: '#96b5ef' },
120 zoom: 1.2, 124 ],
121 top: '10%', 125 textStyle: {
122 left: '16%', 126 color: '#737373'
123 map: '福建', 127 }
124 roam: false,
125 itemStyle: {
126 normal: {
127 areaColor: 'rgba(0,0,0,0)',
128 shadowColor: 'rgba(7,114,204, .8)',
129 shadowOffsetX: 5,
130 shadowOffsetY: 5,
131 },
132 emphasis: {
133 areaColor: '#00aeef',
134 },
135 },
136 }, 128 },
137 series: [ 129 series: [
138 { 130 {
139 name: '相关指数',
140 type: 'map', 131 type: 'map',
141 aspectScale: 0.85, //长宽比 132 aspectScale: 1, //长宽比
142 zoom: 1.2, 133 zoom: 1.1,
143 mapType: '福建', // 自定义扩展图表类型 134 mapType: '汉中市', // 自定义扩展图表类型
144 top: '10%', 135 top: '20%',
145 left: '16%', 136 left: '10%',
146 itemStyle: { 137 itemStyle: {
147 normal: { 138 normal: {
148 color: 'red',
149 areaColor: 'rgba(19,54,162, .5)', 139 areaColor: 'rgba(19,54,162, .5)',
150 borderColor: 'rgba(0,242,252,.3)', 140 borderColor: 'rgba(0,242,252,.3)',
151 borderWidth: 1, 141 borderWidth: 1,
...@@ -171,8 +161,8 @@ export default { ...@@ -171,8 +161,8 @@ export default {
171 emphasis: { 161 emphasis: {
172 textStyle: { 162 textStyle: {
173 color: '#fff', 163 color: '#fff',
174 }, 164 }
175 }, 165 }
176 }, 166 },
177 data: newData, 167 data: newData,
178 }, 168 },
...@@ -209,7 +199,7 @@ export default { ...@@ -209,7 +199,7 @@ export default {
209 }, 199 },
210 methods: { 200 methods: {
211 // 开启定时器 201 // 开启定时器
212 startInterval() { 202 startInterval () {
213 const _self = this; 203 const _self = this;
214 // 应通过接口获取配置时间，暂时写死5s 204 // 应通过接口获取配置时间，暂时写死5s
215 const time = 2000; 205 const time = 2000;
...@@ -221,7 +211,7 @@ export default { ...@@ -221,7 +211,7 @@ export default {
221 }, time); 211 }, time);
222 }, 212 },
223 // 重新随机选中地图区域 213 // 重新随机选中地图区域
224 reSelectMapRandomArea() { 214 reSelectMapRandomArea () {
225 const length = 9; 215 const length = 9;
226 this.$nextTick(() => { 216 this.$nextTick(() => {
227 try { 217 try {
...@@ -251,7 +241,7 @@ export default { ...@@ -251,7 +241,7 @@ export default {
251 } 241 }
252 }); 242 });
253 }, 243 },
254 handleMapRandomSelect() { 244 handleMapRandomSelect () {
255 this.$nextTick(() => { 245 this.$nextTick(() => {
256 try { 246 try {
257 const map = this.$refs.centreLeft2ChartRef.chart; 247 const map = this.$refs.centreLeft2ChartRef.chart;
...@@ -288,3 +278,6 @@ export default { ...@@ -288,3 +278,6 @@ export default {
288 }, 278 },
289 }; 279 };
290 </script> 280 </script>
281 <style>
282
283 </style>
......
...@@ -9,59 +9,57 @@ import Chart from './chart.vue'; ...@@ -9,59 +9,57 @@ import Chart from './chart.vue';
9 export default { 9 export default {
10 data () { 10 data () {
11 return { 11 return {
12 cdata: [ 12 cdata: [{
13 { 13 name: '汉台区',
14 // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写 14 value: '6000',
15 name: '福州市', 15 elseData: {
16 value: 10,
17 elseData:{
18 // 这里放置地图 tooltip 里想显示的数据 16 // 这里放置地图 tooltip 里想显示的数据
19 } 17 }
20 }, 18 },
21 { 19 {
22 name: '厦门市', 20 name: '南郑区',
23 value: 9, 21 value: '8000'
24 }, 22 },
25 { 23 {
26 name: '漳州市', 24 name: '城固县',
27 value: 8, 25 value: '3000'
28 }, 26 },
29 { 27 {
30 name: '泉州市', 28 name: '洋县',
31 value: 7, 29 value: '7000'
32 }, 30 },
33 { 31 {
34 name: '三明市', 32 name: '西乡县',
35 value: 6, 33 value: '1000'
36 }, 34 },
37 { 35 {
38 name: '莆田市', 36 name: '镇巴县',
39 value: 5, 37 value: '2000'
40 }, 38 },
41 { 39 {
42 name: '南平市', 40 name: '勉县',
43 value: 4, 41 value: '600'
44 }, 42 },
45 { 43 {
46 name: '龙岩市', 44 name: '留坝县',
47 value: 3, 45 value: '3000'
48 }, 46 },
49 { 47 {
50 name: '宁德市', 48 name: '佛坪县',
51 value: 2, 49 value: '1000'
52 }
53 ]
54 }
55 }, 50 },
56 components: { 51 {
57 Chart, 52 name: '宁强县',
53 value: '1000'
58 }, 54 },
59 mounted () { 55 {
56 name: '略阳县',
57 value: '1000'
58 }]
59 }
60 }, 60 },
61 methods: { 61 components: {
62 Chart
62 } 63 }
63 } 64 }
64 </script> 65 </script>
65
66 <style lang="scss" scoped>
67 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668671631108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1959" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M992 255.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h960c17.7 0 32 14.3 32 32 0 17.6-14.3 32-32 32zM992 544H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h960c17.7 0 32 14.3 32 32s-14.3 32-32 32zM992 832.3H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h960c17.7 0 32 14.3 32 32 0 17.6-14.3 32-32 32z" p-id="1960" fill="#ffffff"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="navbar-con"> 2 <div class="navbar-con">
3 <div class="navbar"> 3 <div class="navbar">
4 <div class="logo"> 4 <!-- <div class="backdrop">
5 {{ title }}
6 </div>
7 <div class="backdrop">
8 <sidebar /> 5 <sidebar />
9 </div> 6 </div> -->
10 <div class="right-menu"> 7 <div class="right-menu">
11 <div class="dataView pointer" @click="handleDataView">大屏展示</div> 8 <div class="dataView pointer" @click="handleDataView">大屏展示</div>
12 <svg-icon class="function" icon-class='function' />
13 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> 9 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
14 <div class="avatar-wrapper"> 10 <div class="avatar-wrapper">
15 <span style="padding-right:10px">{{ name }}</span> 11 <span style="padding-right:10px">{{ name }}</span>
...@@ -58,16 +54,6 @@ export default { ...@@ -58,16 +54,6 @@ export default {
58 } 54 }
59 </script> 55 </script>
60 <style lang="scss" scoped> 56 <style lang="scss" scoped>
61 .navbar-con {
62 position: relative;
63
64 .logo {
65 color: #fff;
66 font-size: 26px;
67 font-weight: 700;
68 }
69 }
70
71 .dataView { 57 .dataView {
72 color: #fff; 58 color: #fff;
73 } 59 }
...@@ -116,8 +102,7 @@ export default { ...@@ -116,8 +102,7 @@ export default {
116 height: $headerHeight; 102 height: $headerHeight;
117 overflow: hidden; 103 overflow: hidden;
118 position: relative; 104 position: relative;
119 background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色 105 background: linear-gradient(180deg, #0D3DC9 0%, #3476E1 100%);
120 box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
121 display: flex; 106 display: flex;
122 align-items: center; 107 align-items: center;
123 padding: 0 20px; 108 padding: 0 20px;
...@@ -127,17 +112,6 @@ export default { ...@@ -127,17 +112,6 @@ export default {
127 width: 300px; 112 width: 300px;
128 } 113 }
129 114
130 .backdrop {
131 flex: 1;
132 width: 60%;
133 background: url('../../image/backdrop.png');
134 background-size: 100% 100%;
135 height: $headerHeight;
136 display: flex;
137 align-items: center;
138 padding-left: 20px;
139 }
140
141 .hamburger-container { 115 .hamburger-container {
142 line-height: 43px; 116 line-height: 43px;
143 height: 100%; 117 height: 100%;
......
...@@ -45,13 +45,13 @@ export default { ...@@ -45,13 +45,13 @@ export default {
45 } 45 }
46 46
47 .appMain { 47 .appMain {
48 height: calc(100vh - 80px); 48 height: calc(100vh - 65px);
49 width: 80%; 49 background-color: $containerbg;
50 margin: 0 auto;
51 background-color: #fff;
52 50
53 .app-main { 51 .app-main {
54 height: 100%; 52 height: 100%;
53 padding: 10px;
54 box-sizing: border-box;
55 } 55 }
56 } 56 }
57 </style> 57 </style>
......
...@@ -298,6 +298,20 @@ export const asyncRoutes = [ ...@@ -298,6 +298,20 @@ export const asyncRoutes = [
298 298
299 export const asyncRoutes1 = [ 299 export const asyncRoutes1 = [
300 // 监管首页 300 // 监管首页
301 // {
302 // path: '/',
303 // component: Layout1,
304 // redirect: '/jgHome',
305 // meta: { title: '首页' },
306 // children: [
307 // {
308 // path: 'jgHome',
309 // component: () => import('@/views/jgHome/index'),
310 // name: 'jgHome',
311 // meta: { title: '首页', icon: 'workbench', affix: true }
312 // }
313 // ]
314 // },
301 { 315 {
302 path: '/', 316 path: '/',
303 component: Layout1, 317 component: Layout1,
...@@ -306,7 +320,7 @@ export const asyncRoutes1 = [ ...@@ -306,7 +320,7 @@ export const asyncRoutes1 = [
306 children: [ 320 children: [
307 { 321 {
308 path: 'jgHome', 322 path: 'jgHome',
309 component: () => import('@/views/jgHome/index'), 323 component: () => import('@/views/home/index'),
310 name: 'jgHome', 324 name: 'jgHome',
311 meta: { title: '首页', icon: 'workbench', affix: true } 325 meta: { title: '首页', icon: 'workbench', affix: true }
312 } 326 }
......
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
6 justify-content: space-between; 6 justify-content: space-between;
7 padding-top: 15px; 7 padding-top: 15px;
8 8
9 .map {
10 margin-left: -20px;
11 }
12
9 &-left { 13 &-left {
10 width: 35%; 14 width: 35%;
11 padding-top: 25px; 15 padding-top: 25px;
......
1 <template> 1 <template>
2 <div class="home"> 2 <div class="home">
3 <div class="home-left bgbk"> 3 <div class="home-left bgbk">
4 <div class="header titlebg">
5 汉中市接入概括
6 </div>
4 <!-- 地图 --> 7 <!-- 地图 -->
5 <wgsl></wgsl> 8 <CenterLeft2Chart class="map" />
6 </div> 9 </div>
7 <div class="home-right"> 10 <div class="home-right">
8 <!-- 陕西省接入概括 --> 11 <!-- 陕西省接入概括 -->
...@@ -92,11 +95,12 @@ ...@@ -92,11 +95,12 @@
92 <script> 95 <script>
93 // 上报首页 96 // 上报首页
94 import wgsl from "./wgsl.vue"; 97 import wgsl from "./wgsl.vue";
98 import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
95 // 引入表格数据 99 // 引入表格数据
96 import data from "./data" 100 import data from "./data"
97 export default { 101 export default {
98 name: "home", 102 name: "home",
99 components: { wgsl }, 103 components: { wgsl, CenterLeft2Chart },
100 data () { 104 data () {
101 function formatter (number) { 105 function formatter (number) {
102 const numbers = number.toString().split('').reverse() 106 const numbers = number.toString().split('').reverse()
......
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
3 <div class="map-box" ref="mapContain" /> 3 <div class="map-box" ref="mapContain" />
4 </div> 4 </div>
5 </template> 5 </template>
6
7 <script> 6 <script>
8 export default { 7 export default {
9 data () { 8 data () {
......