Skip to content

bdc / bdcjg-web

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

style;首页样式修改

1 parent e4a5d48e
Inline Side-by-side
Showing 2 changed files with 216 additions and 223 deletions
1 <template> 1 <template>
2 <!-- 地图 --> 2 <!-- 地图 -->
3 <Echart 3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" :key="key" ref="centreLeft2ChartRef" width="100%" height="100%"
4 id="centreLeft2Chart"
5 class="centreLeft2Chart"
6 :key="key"
7 ref="centreLeft2ChartRef"
8 width="100%"
9 height="100%"
10 :options="options"></Echart> 4 :options="options"></Echart>
11 </template> 5 </template>
12 6
13 <script> 7 <script>
14 import Echart from "@/common/echart"; 8 import Echart from "@/common/echart";
15 import { mapGetters } from "vuex"; 9 import { mapGetters } from "vuex";
16 export default { 10 export default {
17 data () { 11 data () {
18 return { 12 return {
19 options: {}, 13 options: {},
20 max: "5000", //最大value值 14 max: "5000", //最大value值
21 min: "1", // 最小value值 15 min: "1", // 最小value值
22 key: 0, 16 key: 0,
23 mapjson: "", 17 mapjson: "",
24 }; 18 };
19 },
20 components: {
21 Echart,
22 },
23 created () { },
24 props: {
25 cdata: {
26 type: Array,
27 default: () => [],
25 }, 28 },
26 components: { 29 },
27 Echart, 30 mounted () {
28 }, 31 window.addEventListener("resize", () => {
29 created () { }, 32 this.key++;
30 props: { 33 });
31 cdata: { 34 this.getDistrictcode();
32 type: Array, 35 },
33 default: () => [], 36 watch: {
34 }, 37 cdata: {
35 }, 38 handler (newData) {
36 mounted () { 39 let _this = this;
37 40 // 设置点的位置(经纬度)
38 window.addEventListener("resize", () => { 41 const geoCoordMap = {
39 this.key++; 42 汉台区: [107.03187, 33.06774, 20],
40 }); 43 南郑区: [106.94024, 33.00299, 20],
41 this.getDistrictcode(); 44 城固县: [107.33367, 33.15661, 20],
42 }, 45 洋县: [107.545837, 33.222739, 20],
43 watch: { 46 西乡县: [107.76867, 32.98411, 20],
44 cdata: { 47 镇巴县: [107.89648, 32.53487, 20],
45 handler (newData) { 48 勉县: [106.673221, 33.153553, 20],
46 let _this = this; 49 留坝县: [106.92233, 33.61606, 20],
47 // 设置点的位置(经纬度) 50 佛坪县: [107.98974, 33.52496, 20],
48 const geoCoordMap = { 51 宁强县: [106.25958, 32.82881, 20],
49 汉台区: [107.03187, 33.06774, 20], 52 略阳县: [106.15399, 33.33009, 20],
50 南郑区: [106.94024, 33.00299, 20], 53 };
51 城固县: [107.33367, 33.15661, 20], 54 this.options = {
52 洋县: [107.545837, 33.222739, 20], 55 showLegendSymbol: true,
53 西乡县: [107.76867, 32.98411, 20], 56 tooltip: {
54 镇巴县: [107.89648, 32.53487, 20], 57 trigger: "item",
55 勉县: [106.673221, 33.153553, 20], 58 textStyle: {
56 留坝县: [106.92233, 33.61606, 20], 59 fontSize: 14,
57 佛坪县: [107.98974, 33.52496, 20], 60 lineHeight: 22,
58 宁强县: [106.25958, 32.82881, 20], 61 },
59 略阳县: [106.15399, 33.33009, 20], 62 position: (point) => {
60 }; 63 // 固定在顶部
61 this.options = { 64 return [point[0] + 50, point[1] - 20];
62 showLegendSymbol: true, 65 },
63 tooltip: { 66 // 如果需要自定义 tooltip样式，需要使用formatter
64 trigger: "item", 67 formatter: (params) => {
65 textStyle: { 68 return `<div style="">${params.name}:${params.value + "个"
66 fontSize: 14, 69 }</div>`;
67 lineHeight: 22,
68 },
69 position: (point) => {
70 // 固定在顶部
71 return [point[0] + 50, point[1] - 20];
72 },
73 // 如果需要自定义 tooltip样式，需要使用formatter
74 formatter: (params) => {
75 return `<div style="">${params.name}:${params.value + "个"
76 }</div>`;
77 },
78 }, 70 },
79 visualMap: { 71 },
80 min: 0, 72 visualMap: {
81 max: _this.max, 73 min: 0,
82 bottom: "13%", 74 max: _this.max,
83 left: 50, 75 bottom: "12%",
84 splitNumber: 6, 76 left: 50,
85 seriesIndex: [0], 77 splitNumber: 6,
86 itemWidth: 20, // 每个图元的宽度 78 seriesIndex: [0],
87 itemGap: 2, // 每两个图元之间的间隔距离，单位为px 79 itemWidth: 20, // 每个图元的宽度
88 pieces: [ 80 itemGap: 2, // 每两个图元之间的间隔距离，单位为px
89 // 自定义每一段的范围，以及每一段的文字 81 pieces: [
90 { gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。 82 // 自定义每一段的范围，以及每一段的文字
91 { gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" }, 83 { gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
92 { gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" }, 84 { gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" },
93 { gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" }, 85 { gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" },
94 ], 86 { gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" },
95 textStyle: { 87 ],
96 color: "#737373", 88 textStyle: {
89 color: "#737373",
90 },
91 },
92 geo: {
93 aspectScale: 1, //长宽比
94 zoom: 1.1,
95 mapType: "", // 自定义扩展图表类型
96 top: "15%",
97 left: "10%",
98 map: "汉中市",
99 itemStyle: {
100 normal: {
101 //阴影
102 areaColor: "#5689FD ",
103 shadowColor: "#21371d",
104 borderWidth: 0,
105 shadowOffsetX: 2,
106 shadowOffsetY: 25,
97 }, 107 },
98 }, 108 },
99 geo: { 109 },
110 series: [
111 {
112 type: "map",
100 aspectScale: 1, //长宽比 113 aspectScale: 1, //长宽比
101 zoom: 1.1, 114 zoom: 1.1,
102 mapType: "", // 自定义扩展图表类型 115 mapType: "汉中市", // 自定义扩展图表类型
103 top: "15%", 116 top: "15%",
104 left: "10%", 117 left: "10%",
105 map: "汉中市",
106 itemStyle: { 118 itemStyle: {
107 normal: { 119 normal: {
108 //阴影 120 areaColor: "rgba(19,54,162,.5)",
109 areaColor: "#5689FD ", 121 borderColor: "rgba(0,242,252,.5)",
110 shadowColor: "#21371d", 122 borderWidth: 2,
111 borderWidth: 0, 123 shadowBlur: 1,
112 shadowOffsetX: 2, 124 borderColor: "rgb(155, 200, 200)",
113 shadowOffsetY: 25, 125 shadowColor: "#44f2fc",
114 }, 126 },
115 }, 127 },
116 }, 128 label: {
117 series: [ 129 formatter: (params) => {
118 { 130 return `${params.name}\n${params.value + "个"}`;
119 type: "map",
120 aspectScale: 1, //长宽比
121 zoom: 1.1,
122 mapType: "汉中市", // 自定义扩展图表类型
123 top: "15%",
124 left: "10%",
125 itemStyle: {
126 normal: {
127 areaColor: "rgba(19,54,162,.5)",
128 borderColor: "rgba(0,242,252,.5)",
129 borderWidth: 2,
130 shadowBlur: 1,
131 borderColor: "rgb(155, 200, 200)",
132 shadowColor: "#44f2fc",
133 },
134 }, 131 },
135 label: { 132 show: true,
136 formatter: (params) => { 133 position: "insideRight",
137 return `${params.name}\n${params.value + "个"}`; 134 textStyle: {
138 }, 135 fontSize: 14,
139 show: true, 136 color: "#efefef",
140 position: "insideRight", 137 },
138 emphasis: {
141 textStyle: { 139 textStyle: {
142 fontSize: 14, 140 color: "#fff",
143 color: "#efefef",
144 },
145 emphasis: {
146 textStyle: {
147 color: "#fff",
148 },
149 }, 141 },
150 }, 142 },
151 data: newData,
152 }, 143 },
153 ], 144 data: newData,
154 }; 145 },
155 // 重新选择区域 146 ],
156 this.handleMapRandomSelect(); 147 };
157 }, 148 // 重新选择区域
158 149 this.handleMapRandomSelect();
159 immediate: true,
160 deep: true,
161 }, 150 },
151
152 immediate: true,
153 deep: true,
162 }, 154 },
163 computed: { 155 },
164 ...mapGetters(["sidebar", "dicData"]), 156 computed: {
165 logoName () { 157 ...mapGetters(["sidebar", "dicData"]),
166 return ( 158 logoName () {
167 this.dicData["sysCode"].filter((item) => { return item.DCODE == "areaMap" }) 159 return (
168 ); 160 this.dicData["sysCode"].filter((item) => { return item.DCODE == "areaMap" })
169 }, 161 );
170 }, 162 },
171 methods: { 163 },
172 // 根据行政区代码匹配行政区 164 methods: {
173 getDistrictcode () { 165 // 根据行政区代码匹配行政区
174 this.mapjson = "" 166 getDistrictcode () {
175 if (this.logoName[0].DNAME) { 167 this.mapjson = ""
176 this.mapjson = this.logoName[0].DNAME; 168 if (this.logoName[0].DNAME) {
177 require(`@/common/map/${this.mapjson}.js`); 169 this.mapjson = this.logoName[0].DNAME;
178 } 170 require(`@/common/map/${this.mapjson}.js`);
179 }, 171 }
180 // 开启定时器 172 },
181 startInterval () { 173 // 开启定时器
182 const _self = this; 174 startInterval () {
183 // 应通过接口获取配置时间，暂时写死5s 175 const _self = this;
184 const time = 2000; 176 // 应通过接口获取配置时间，暂时写死5s
185 if (this.intervalId !== null) { 177 const time = 2000;
186 clearInterval(this.intervalId); 178 if (this.intervalId !== null) {
179 clearInterval(this.intervalId);
180 }
181 this.intervalId = setInterval(() => {
182 this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
183 }, time);
184 },
185 // 重新随机选中地图区域
186 reSelectMapRandomArea () {
187 const length = 9;
188 this.$nextTick(() => {
189 try {
190 const map = this.$refs.centreLeft2ChartRef.chart;
191 let index = Math.floor(Math.random() * length);
192 while (index === this.preSelectMapIndex || index >= length) {
193 index = Math.floor(Math.random() * length);
194 }
195 map.dispatchAction({
196 type: "mapUnSelect",
197 seriesIndex: 0,
198 dataIndex: this.preSelectMapIndex,
199 });
200 map.dispatchAction({
201 type: "showTip",
202 seriesIndex: 0,
203 dataIndex: index,
204 });
205 map.dispatchAction({
206 type: "mapSelect",
207 seriesIndex: 0,
208 dataIndex: index,
209 });
210 this.preSelectMapIndex = index;
211 } catch (error) {
212 console.log(error);
187 } 213 }
188 this.intervalId = setInterval(() => { 214 });
189 this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea(); 215 },
190 }, time); 216 handleMapRandomSelect () {
191 }, 217 this.$nextTick(() => {
192 // 重新随机选中地图区域 218 try {
193 reSelectMapRandomArea () { 219 const map = this.$refs.centreLeft2ChartRef.chart;
194 const length = 9; 220 const _self = this;
195 this.$nextTick(() => { 221 setTimeout(() => {
196 try { 222 _self.reSelectMapRandomArea();
197 const map = this.$refs.centreLeft2ChartRef.chart; 223 }, 0);
198 let index = Math.floor(Math.random() * length); 224 // 移入区域，清除定时器、取消之前选中并选中当前
199 while (index === this.preSelectMapIndex || index >= length) { 225 map.on("mouseover", function (params) {
200 index = Math.floor(Math.random() * length); 226 clearInterval(_self.intervalId);
201 }
202 map.dispatchAction({ 227 map.dispatchAction({
203 type: "mapUnSelect", 228 type: "mapUnSelect",
204 seriesIndex: 0, 229 seriesIndex: 0,
205 dataIndex: this.preSelectMapIndex, 230 dataIndex: _self.preSelectMapIndex,
206 });
207 map.dispatchAction({
208 type: "showTip",
209 seriesIndex: 0,
210 dataIndex: index,
211 }); 231 });
212 map.dispatchAction({ 232 map.dispatchAction({
213 type: "mapSelect", 233 type: "mapSelect",
214 seriesIndex: 0, 234 seriesIndex: 0,
215 dataIndex: index, 235 dataIndex: params.dataIndex,
216 });
217 this.preSelectMapIndex = index;
218 } catch (error) {
219 console.log(error);
220 }
221 });
222 },
223 handleMapRandomSelect () {
224 this.$nextTick(() => {
225 try {
226 const map = this.$refs.centreLeft2ChartRef.chart;
227 const _self = this;
228 setTimeout(() => {
229 _self.reSelectMapRandomArea();
230 }, 0);
231 // 移入区域，清除定时器、取消之前选中并选中当前
232 map.on("mouseover", function (params) {
233 clearInterval(_self.intervalId);
234 map.dispatchAction({
235 type: "mapUnSelect",
236 seriesIndex: 0,
237 dataIndex: _self.preSelectMapIndex,
238 });
239 map.dispatchAction({
240 type: "mapSelect",
241 seriesIndex: 0,
242 dataIndex: params.dataIndex,
243 });
244 _self.preSelectMapIndex = params.dataIndex;
245 }); 236 });
246 // 移出区域重新随机选中地图区域，并开启定时器 237 _self.preSelectMapIndex = params.dataIndex;
247 map.on("globalout", function () { 238 });
248 _self.reSelectMapRandomArea(); 239 // 移出区域重新随机选中地图区域，并开启定时器
249 _self.startInterval(); 240 map.on("globalout", function () {
250 }); 241 _self.reSelectMapRandomArea();
251 this.startInterval(); 242 _self.startInterval();
252 } catch (error) { 243 });
253 console.log(error); 244 this.startInterval();
254 } 245 } catch (error) {
255 }); 246 console.log(error);
256 }, 247 }
248 });
257 }, 249 },
258 }; 250 },
251 };
259 </script> 252 </script>
260 <style></style> 253 <style></style>
......
...@@ -78,7 +78,7 @@ export default { ...@@ -78,7 +78,7 @@ export default {
78 } 78 }
79 79
80 .rightcard { 80 .rightcard {
81 width: 30%; 81 width: 32%;
82 display: flex; 82 display: flex;
83 height: calc(100vh - 114px); 83 height: calc(100vh - 114px);
84 flex-direction: column; 84 flex-direction: column;
......