http://nachuan.com/templates/js/about.js

1'use strict'
2
3var aboutVue = new Vue({
4	el: '#about-cont',
5	data: {
6		topMsg: {
7			nav: "关于纳川"
8		},
9		initChart:false,
10		hoverNav: "",
11		province:{},
12		nowprovice:[],
13		nowcity:{},
14		currNav: "01",
15		currItemNav: "01",
16		currImg: "",
17		structureBig: "hide"
18	},
19	computed: {
20		hoverSubNav: function () {
21			return getNav(this.hoverNav);
22		},
23		mobileNav: function () {
24			var mobileNav = [];
25			mobileNav.push(getNav('01'));
26			mobileNav.push(getNav('02'));
27			mobileNav.push(getNav('04'));
28			mobileNav.push({
29				h: "新闻动态",
30				href: "news.html",
31				nav: []
32			});
33			mobileNav.push(getNav('05'));
34			mobileNav.push(getNav('06'));
35			console.log(mobileNav);
36			return mobileNav;
37		}
38	},
39	methods: {
40		showStructure: function () {
41			this.structureBig = "";
42		},
43		hideStructure: function () {
44			this.structureBig = "hide";
45		},
46		changeNav: function(id) {
47			this.currNav = id;
48			if (id === "01") {
49//				$(".title-cont h2").html("海纳百川·广容万物");
50			} else if (id === "02") {
51				setTimeout(this.initCountUp, 0);
52			} else if (id === "03") {
53				if(!this.initChart){
54					this.initChart=!this.initChart;
55					setTimeout(this.initEchart,0);
56				}
57			}
58			setTimeout(function () {
59				window.scrollReveal.init();
60			},0);
61		},
62		changeItem: function(id) {
63			this.currItemNav = id;
64			setTimeout(function () {
65				window.scrollReveal.init();
66			},0);
67		},
68		initCountUp: function () {
69			$(".brand-num").countUp({
70		    delay: 10,
71		    time: 2000
72			});
73		},
74		initEchart: function() {
75			var myChart = echarts.init(document.getElementById('echarts-div'));
76			var provinceAll;
77			var $this=this;
78			var points={
79						'北京': [116.405285, 39.904989],
80		                '天津': [117.190182, 39.125596],
81		                '河北': [114.502461, 38.045474],
82		                '山西': [112.549248, 37.857014],
83		                '内蒙古': [111.670801, 40.818311],
84		                '辽宁': [123.429096, 41.796767],
85		                '吉林': [125.3245, 43.886841],	
86		                '黑龙江': [126.642464, 45.756967],	                
87		                '上海': [121.472644, 31.231706],
88		                '江苏': [118.767413, 32.041544],
89		                '浙江': [120.153576, 30.287459],
90		                '安徽': [117.283042, 31.86119],
91		                '福建': [119.306239, 26.075302],
92		                '江西': [115.892151, 28.676493],
93		                '山东': [117.000923, 36.675807],
94		                '河南': [113.665412, 34.757975],
95		                '湖北': [114.298572, 30.584355],
96		                '湖南': [112.982279, 28.19409],
97		                '广东': [113.280637, 23.125178],
98		                '广西': [108.320004, 22.82402],
99		                '海南': [110.33119, 20.031971],
100		                '重庆': [106.504962, 29.533155],
101		                '四川': [104.065735, 30.659462],
102		                '贵州': [106.713478, 26.578343],
103		                '云南': [102.712251, 25.040609],
104		                '西藏': [91.132212, 29.660361],
105		                '陕西': [108.948024, 34.263161],
106		                '甘肃': [103.823557, 36.058039],
107		                '青海': [101.778916, 36.623178],
108		                '宁夏': [106.278179, 38.46637],
109		                '新疆': [87.617733, 43.792818],
110		                '台湾': [121.509062, 25.044332],
111		                '香港': [114.173355, 22.320048],
112		                '澳门': [113.54909, 22.198951]
113		            };
114		    var dataList= [];			
115			var option = {
116				tooltip: {
117					trigger: 'item',
118					formatter: '{b}',
119				},
120				series: [{
121					name: '中国',
122					type: 'map',
123					mapType: 'china',
124					selectedMode: 'single',
125					itemStyle: {
126						normal: {
127							borderWidth:1,
128                            borderColor:'#fff',
129							areaStyle: {
130								color: '#eee'								
131							},
132							label: {
133								show: false
134							}
135						},
136						emphasis: {
137							areaStyle: {
138								color: '#1fd96d'
139							},
140							label: {
141								show: true,
142								textStyle: {
143									fontWeight: 'bold',
144									color: "#fff"
145								}
146							}
147						}
148					},
149					data: dataList,
150		            markPoint : {
151		                itemStyle : {
152		                    normal:{
153		                        color:'skyblue'
154		                    }
155		                },
156		                data : dataList
157		            },
158		            geoCoord: points
159				}]
160			};      
161			$.post('about.php', {get_map:1}, function(data, textStatus){
162				provinceAll = JSON.parse(data);
163				$.each(provinceAll,function(i,item){
164					var provinceList={}
165					if(item.province_name=='福建'){
166						provinceList.symbolSize=[16,18];
167						provinceList.selected=true;
168						provinceList.symbol='image://templates/img/point1.png';
169						$this.nowprovice=item.post;
170						$this.nowcity=item.post[0];
171					}else{
172						provinceList.symbolSize=[10,12];
173						provinceList.symbol='image://templates/img/point.png'
174					}
175					provinceList.name=item.province_name
176					dataList.push(provinceList);
177				});
178				myChart.setOption(option);
179			});			
180
181			function ifexitPro(selName){
182				var exitPro=false;
183				$.each(provinceAll,function(i,item){
184					if(selName==item.province_name){
185						exitPro=true;
186					}
187				});
188				return exitPro;
189			}
190
191			myChart.on("click", function(param) {
192				var selName=param.data.name;
193				var options = myChart.getOption(); 
194				if(!ifexitPro(selName)){

195					myChart.restore();
196				}else{
197					$.each(dataList,function(i,item){
198						if(item.name==selName){
199							item.selected=true;
200						}else{
201							item.selected=false;
202						}
203					});
204					$.each(provinceAll,function(i,item){
205						if(selName==item.province_name){
206							$this.nowprovice=item.post;
207							$this.nowcity=item.post[0];
208							setTimeout(function () {
209								window.scrollReveal.init();
210							},0);
211						}
212					});
213					$(".subcompany-con-t .con-t-btns").eq(0).trigger("click");
214					var newArr = $.extend(true, [], dataList);
215					$.each(newArr,function(i,item){
216						if(item.name==selName){
217							item.symbol="image://templates/img/point1.png";
218							item.symbolSize=[16,18];
219						}else{
220							item.symbol="image://templates/img/point.png";
221						}
222					});
223				}
224				options.series[0].markPoint.data=newArr; 
225				options.series[0].data=newArr;
226				myChart.setOption(options);    
227			});
228			$(".subcompany-con-t").on("click",".con-t-btns",function(){
229				$(this).addClass("active").siblings().removeClass("active");
230				var $that=$(this),index=$(this).index();
231				$.each($this.nowprovice,function(i,item){
232					if($.trim($that.text())==item.city_name&&index==i){
233						$this.nowcity=item;
234						setTimeout(function () {
235							window.scrollReveal.init();
236						},0);
237					}
238				});
239			});
240		},
241		getUrlParam: function (name) {
242			var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
243			var r = window.location.search.substr(1).match(reg); //匹配目标参数
244			if (r!=null) return unescape(r[2]); return null; //返回参数值
245		},
246		mEnter: function (id, $event) {
247			this.hoverNav = id;
248			$(".nav-detail").addClass("showSub");
249			this.mouseOver = "bar";
250			$(".public-top .top-title").addClass("blur");
251			$(".hover-li").removeClass("hover-li");
252			$event.target.className = "hover-li";
253		},
254		mLeave: function ($event) {
255			this.mouseOver = "";
256			setTimeout(this.checkLeave, 100);
257		},
258		detailEnter: function ($event) {
259			this.mouseOver = "detail";
260		},
261		detaileLeave: function ($event) {
262			this.mouseOver = "";
263			setTimeout(this.checkLeave, 100);
264		},
265		checkLeave: function () {
266			if (this.mouseOver.length === 0) {
267				this.hoverNav = "";
268				$(".nav-detail").removeClass("showSub");
269				$(".public-top .width-1200").removeClass("blur");
270				$(".hover-li").removeClass("hover-li");
271			}
272		},
273		showText: function (str) {
274			var len = str.length,
275					i = 0,
276					strHtml = "";
277			for (; i < len; i++) {
278				var x = str[i];
279				if (x === " ") x = "&nbsp;";
280				strHtml += "<font data-scroll-reveal='enter from the bottom wait " + (i + 1)/10 + "s, move 40px, over 1.5s'>" + x + "</font>";
281			}
282			return strHtml;
283		},
284		scrollFun: function () {
285			this.hoverNav = "";
286			$(".nav-detail").removeClass("showSub");
287			$(".public-top .width-1200").removeClass("blur");
288			$(".hover-li").removeClass("hover-li");
289		}
290	},
291	created: function () {
292		var nav = this.getUrlParam('nav');
293		switch (nav) {
294			case "1-1":
295				this.currNav = "01";
296				this.currItemNav = "01";
297				break;
298			case "1-2":
299				this.currNav = "01";
300				this.currItemNav = "02";
301				break;
302			case "1-3":
303				this.currNav = "01";
304				this.currItemNav = "03";
305				break;
306			case "1-4":
307				this.currNav = "01";
308				this.currItemNav = "04";
309				break;
310			case "2":
311				this.currNav = "02";
312				setTimeout(this.initCountUp, 0);
313				break;
314			case "3":
315				this.currNav = "03";
316				if(!this.initChart){
317					this.initChart=!this.initChart;
318					setTimeout(this.initEchart,0);
319				}
320				break;
321		}
322		$(".title-cont h2").eq(0).html(this.showText($(".title-cont h2").eq(0).html()));
323		$(".title-cont p").eq(0).html(this.showText($(".title-cont p").eq(0).html()));
324		$(".title-cont h2").eq(1).html(this.showText($(".title-cont h2").eq(1).html()));
325		$(".title-cont p").eq(1).html(this.showText($(".title-cont p").eq(1).html()));
326		$(".title-cont h2").eq(2).html(this.showText($(".title-cont h2").eq(2).html()));
327		$(".title-cont p").eq(2).html(this.showText($(".title-cont p").eq(2).html()));
328		$(".top-title h1").html(this.showText($(".top-title h1").html()));
329		$(".top-title p").html(this.showText($(".top-title p").html()));
330	},
331	mounted: function () {
332		if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
333				(function(){
334				window.scrollReveal = new scrollReveal({reset: true});
335			})();
336		};
337
338		window.addEventListener('scroll', this.scrollFun);
339	}
340})
341
342function showBig(t) {
343	aboutVue.currImg = $(t).next().attr("src");
344	$(".big-show").removeClass("hide").find("img").addClass("animated bounceInUp");
345}
346
347function hideShow() {
348	$(".big-show").addClass("hide").find("img").removeClass("animated bounceInUp");
349}