nyzy_vue/src/views/gateway/common/header.vue

<template>
  <div :class="banClass">
    <div class="header">
		<div class="h_down clearfloat">
			<div class="logo left"><img src="img/logo.png" ></div>
			<div class="h_home right" style="padding: 30px 0 0 10px;">
				<a href="javascript:void(0)" @click="addShow">设为首页</a>
				<a href="javascript:void(0)"> | </a>
				<a href="javascript:void(0)" @click="addFavo">加入收藏</a>
			</div>
			<div class="sch_downbox right">
				<input v-model="searchText" placeholder="请输入要搜索的内容" @keyup.enter="() => {searchText?$to('listPageSearch',{findStr:searchText}):''}"/>
				<span class="sch_img right" @click="() => {searchText?$to('listPageSearch',{findStr:searchText}):''}"><img src="img/search.png" ></span>
			</div>
		</div>
	</div>
	<div id="MutiNav">
		<ul class="multiUl">
			<li class="multiUlli" @mouseenter="openMenu" @mouseleave="closeMenu">
				<a class="mulgo" href="javascript:void(0);" title="首页" @click="$to('home',{pid:'home'})">
					<span class="mulgochie">首页</span>
				</a>
				<blockquote>
					<div class="ChildNavIn">
						<div class="gersawd clearfloat">
							<div class="vdas">
								<a href="javascript:void(0);"  @click="$to('listPage3',{pid:1,id:301})" class="fjsjkih2 left">
									<span><i class="iconfont">&#xe672;</i></span>
									<span>工作动态</span>
								</a>
								<a href="javascript:void(0);"  @click="$to('listPage3',{pid:1,id:302})" class="fjsjkih2 left">
									<span><i class="iconfont">&#xe67e;</i></span>
									<span>行业要闻</span>
								</a>
								<a href="javascript:void(0);"  @click="$to('listPage3',{pid:1,id:401})" class="fjsjkih2 left">
									<span><i class="iconfont">&#xe854;</i></span>
									<span>数据中心</span>
								</a>
								<a href="javascript:void(0);"  @click="$to('listPage3',{pid:1,id:304})" class="fjsjkih2 left">
									<span><i class="iconfont">&#xe627;</i></span>
									<span>科研成果</span>
								</a>
								<a href="javascript:void(0);"  @click="$to('listPage3',{pid:1,id:305})" class="fjsjkih2 left">
									<span><i class="iconfont">&#xe748;</i></span>
									<span>政策文件</span>
								</a>
								<a href="javascript:void(0);"  @click="$to('listPage3',{pid:1,id:306})" class="fjsjkih2 left">
									<span><i class="iconfont">&#xe7c2;</i></span>
									<span>最新动态</span>
								</a>
								<a href="javascript:void(0);"  @click="$to('listPage3',{pid:1,id:303})" class="fjsjkih2 left">
									<span><i class="iconfont">&#xe777;</i></span>
									<span>合作交流</span>
								</a>
								<a href="javascript:void(0);"  @click="$to('listPage3',{pid:1,id:501})" class="fjsjkih2 left" style="border: 0;">
									<span><i class="iconfont">&#xe71e;</i></span>
									<span>专题专栏</span>
								</a>
							</div>
						</div>
					</div>
				</blockquote>
			</li>
			<li class="multiUlli" >
				<a class="mulgo" href="javascript:void(0);" title="关于本所" @click="$to('gybs',{pid:'gybs'})">
					<span class="mulgochie">关于本所</span>
				</a>
			</li>
			<li class="multiUlli" @mouseenter="openMenu" @mouseleave="closeMenu">
				<a class="mulgo" href="javascript:void(0);" title="区域农业资源" @click="$to('listPage2',{pid:101,id:10101})">
					<span class="mulgochie">区域农业资源</span>
				</a>
				<blockquote>
					<div class="ChildNavIn">
						<ul>
							<li class="clearfloat">
								<a href="javascript:void(0);" class="xbzlzd left" @click="$to('listPage2',{pid:101,id:10101})">
									<span><i class="iconfont">&#xe855;</i></span>
									<span>西部杂粮杂豆</span>
								</a>
								<div class="xbcot right">
									<template v-for="(col,colIndex) in xbzlzdList" >
										<a href="javascript:void(0);" :key="colIndex" @click="$to('listPage2',{id:col.id})">{{col.name}}</a>
									</template>
								</div>
							</li>
							<li class="clearfloat">
								<a href="javascript:void(0);" class="xbzlzd left" @click="$to('listPage2',{pid:101,id:10102})">
									<span><i class="iconfont">&#xe611;</i></span>
									<span>东部经济资源</span>
								</a>
								<div class="xbcot right">
									<template v-for="(col,colIndex) in dbjjzyList" >
										<a href="javascript:void(0);" :key="colIndex" @click="$to('listPage2',{id:col.id})">{{col.name}}</a>
									</template>
								</div>
							</li>
							<li class="clearfloat">
								<a href="javascript:void(0);" class="xbzlzd left" @click="$to('listPage2',{pid:101,id:10103})">
									<span><i class="iconfont">&#xe622;</i></span>
									<span>中部粮食资源</span>
								</a>
								<div class="xbcot right">
									<template v-for="(col,colIndex) in zblszyList" >
										<a href="javascript:void(0);" :key="colIndex" @click="$to('listPage2',{id:col.id})">{{col.name}}</a>
									</template>
								</div>
							</li>
							<li class="clearfloat">
								<a href="javascript:void(0);" class="xbzlzd left" @click="$to('listPage2',{pid:101,id:10104})">
									<span><i class="iconfont">&#xe607;</i></span>
									<span>适宜吉林省<br>种质资源</span>
								</a>
								<div class="xbcot right">
									<template v-for="(col,colIndex) in syjlsList" >
										<a href="javascript:void(0);" :key="colIndex" @click="$to('listPage2',{id:col.id})">{{col.name}}</a>
									</template>
								</div>
							</li>
							<li class="clearfloat">
								<a href="javascript:void(0)" class="xbzlzd" style="width: 100%;" @click="$to('listPage2',{pid:101,id:10105})">
									<span><i class="iconfont">&#xe646;</i></span>
									<span>其他</span>
								</a>
							</li>
						</ul>
					</div>
				</blockquote>
			</li>
			<li class="multiUlli" @mouseenter="openMenu" @mouseleave="closeMenu">
				<a class="mulgo" href="javascript:void(0);" title="农业产业化" @click="$to('listPage',{pid:102,id:10201})">
					<span class="mulgochie">农业产业化</span>
				</a>
				<blockquote>
					<div class="ChildNavIn">
						<div class="gersawd clearfloat">
							<div class="vdas">
								<a href="javascript:void(0);" @click="$to('listPage',{pid:102,id:10201})" class="fjsjkih left">
									<span><i class="iconfont">&#xe601;</i></span>
									<span>特色农业产业化</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:102,id:10202})" class="fjsjkih left">
									<span><i class="iconfont">&#xe632;</i></span>
									<span>粮食产业化</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:102,id:10203})" class="fjsjkih left">
									<span><i class="iconfont">&#xe841;</i></span>
									<span>畜牧业产业化</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:102,id:10204})" class="fjsjkih left" style="border: 0;">
									<span><i class="iconfont">&#xe646;</i></span>
									<span>其他</span>
								</a>
							</div>
						</div>
					</div>
				</blockquote>
			</li>
			<li class="multiUlli" @mouseenter="openMenu" @mouseleave="closeMenu">
				<a class="mulgo"  title="布局规划" href="javascript:void(0);"  @click="$to('listPage',{pid:103,id:10301})">
					<span class="mulgochie">布局规划</span>
				</a>
				<blockquote>
					<div class="ChildNavIn">
						<div class="gersawd clearfloat">
							<div class="vdas">
								<a href="javascript:void(0);" @click="$to('listPage',{pid:103,id:10301})" class="fjsjkih left">
									<span><i class="iconfont">&#xe7e4;</i></span>
									<span>吉林省农业资源规划</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:103,id:10302})" class="fjsjkih left">
									<span><i class="iconfont">&#xe856;</i></span>
									<span>西部特色经济作物区域布局</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:103,id:10306})" class="fjsjkih left">
									<span><i class="iconfont">&#xe8f9;</i></span>
									<span>东部特色资源区域布局</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:103,id:10303})" class="fjsjkih left">
									<span><i class="iconfont">&#xe615;</i></span>
									<span>中部粮食加工业区域布局</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:103,id:10304})" class="fjsjkih left">
									<span><i class="iconfont">&#xe61b;</i></span>
									<span>历史区划数据</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:103,id:10305})" class="fjsjkih left" style="border: 0;">
									<span><i class="iconfont">&#xe646;</i></span>
									<span>其他</span>
								</a>
							</div>
						</div>
					</div>
				</blockquote>
			</li>
			<li class="multiUlli" @mouseenter="openMenu" @mouseleave="closeMenu">
				<a class="mulgo" title="绿色农业" href="javascript:void(0);"  @click="$to('listPage',{pid:104,id:10401})">
					<span class="mulgochie">绿色农业</span>
				</a>
				<blockquote>
					<div class="ChildNavIn">
						<div class="gersawd clearfloat">
							<div class="vdas">
								<a href="javascript:void(0);" @click="$to('listPage',{pid:104,id:10401})" class="fjsjkih left">
									<span><i class="iconfont">&#xe63a;</i></span>
									<span>保护性耕作</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:104,id:10402})" class="fjsjkih left">
									<span><i class="iconfont">&#xe636;</i></span>
									<span>农业资源循环利用</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:104,id:10403})" class="fjsjkih left">
									<span><i class="iconfont">&#xec4d;</i></span>
									<span>农产品安全</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:104,id:10404})" class="fjsjkih left">
									<span><i class="iconfont">&#xe9e7;</i></span>
									<span>棚膜经济</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:104,id:10405})" class="fjsjkih left" style="border: 0;">
									<span><i class="iconfont">&#xe646;</i></span>
									<span>其他</span>
								</a>
							</div>
						</div>
					</div>
				</blockquote>
			</li>
			<li class="multiUlli" @mouseenter="openMenu" @mouseleave="closeMenu">
				<a class="mulgo" title="科研动态" href="javascript:void(0);"  @click="$to('listPage',{pid:105,id:10501})">
					<span class="mulgochie">科研动态</span>
				</a>
				<blockquote>
					<div class="ChildNavIn">
						<div class="gersawd clearfloat">
							<div class="vdas">
								<a href="javascript:void(0);" @click="$to('listPage',{pid:105,id:10501})" class="fjsjkih left">
									<span><i class="iconfont">&#xe60e;</i></span>
									<span>资源区划</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:105,id:10502})" class="fjsjkih left">
									<span><i class="iconfont">&#xe604;</i></span>
									<span>农业产业化</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:105,id:10503})" class="fjsjkih left" style="border: 0;">
									<span><i class="iconfont">&#xe646;</i></span>
									<span>其他</span>
								</a>
							</div>
						</div>
					</div>
				</blockquote>
			</li>
			<li class="multiUlli" @mouseenter="openMenu" @mouseleave="closeMenu" >
				<a class="mulgo" title="助力乡村振兴" href="javascript:void(0);"  @click="$to('listPage',{pid:106,id:10601})">
					<span class="mulgochie">助力乡村振兴</span>
				</a>
				<blockquote>
					<div class="ChildNavIn">
						<div class="gersawd clearfloat">
							<div class="vdas">
								<a href="javascript:void(0);" @click="$to('listPage',{pid:106,id:10601})" class="fjsjkih left">
									<span><i class="iconfont">&#xe6a1;</i></span>
									<span>助力乡村振兴</span>
								</a>
								<a href="javascript:void(0);" @click="$to('listPage',{pid:106,id:10602})" class="fjsjkih left" style="border: 0;">
									<span><i class="iconfont">&#xe646;</i></span>
									<span>其他</span>
								</a>
							</div>
						</div>
					</div>
				</blockquote>
			</li>
			<li class="multiUlli">
				<a class="mulgo" title="其他" href="javascript:void(0);"  @click="$to('listPage',{pid:107})">
					<span class="mulgochie">其他</span>
				</a>
			</li>
		</ul>
	</div>
  </div>
</template>

<script>
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
import { getAction } from '@/api/manage'

let mst;

export default {
  mixins:[getwayMixin],
  props:{
  },
  computed:{
  },
  data(){
    return {
      window,
      searchText: '',
      columnList: [],
	  xbzlzdList:[],
	  dbjjzyList:[],
	  zblszyList:[],
	  syjlsList:[],
    }
  },
  mounted(){
    this.loadData();
  },
  computed:{
	  banClass(){
		  let r = 'detailHtml';
		  var pid = this.$route.query.pid
        var fullPath = this.$route.fullPath
		console.log('fullPath--->',fullPath,pid);
		//   if(!pid){
		// 	r = 'ban';
		//   }
		  switch (pid) {
			  case 101: r =  'baner8'; break;
			  case 102: r =  'baner4'; break;
			  case 103: r =  'baner'; break;
			  case 104: r =  'baner5'; break;
			  case 105: r =  'baner3'; break;
			  case 106: r =  'baner7'; break;
			  case 107: r =  'baner6'; break;
			  case 'gybs': r =  'baner2'; break;
			  case 'home': r =  'ban'; break;
			  case 501: r =  'detailHtml'; break;
			  case 306: r =  'detailHtml'; break; 
			  case 305: r =  'detailHtml'; break; 
			  case 304: r =  'detailHtml'; break; 
			  case 303: r =  'detailHtml'; break; 
			  case 302: r =  'detailHtml'; break; 
			  case 301: r =  'baner9'; break;  
			  case 1: r =  'baner9'; break;  
			  default:
				  break;
		  }
		  
		  if(fullPath.indexOf('detailedPage')>-1){
			r = "detailHtml";
		  }else if(fullPath.indexOf('home')>-1){
			r = "ban";
		  }
		  return r;
	  }
  },
  updated(){
  },
  methods:{
	addFavo() {
		alert("您的浏览器不支持加入收藏功能，请使用Ctrl+D进行添加！")
	},
	addShow() {
		alert("您的浏览器不支持设为首页，请按照下面步骤进行操作：1.打开浏览器设置。2.点击设置网页。3.复制本网址，然后进行粘贴点击确定！")
	},
    loadData(){
    	if(this.$route.query.findStr){
        	this.searchText = this.$route.query.findStr;
      	}
		//查询区域农业资源--西部杂粮杂豆  内容列表
	  	getAction('/gateway/gatewayColumn/list',{pageSize:-1,isRelease:'Y',parent:10101}).then((res)=>{
			if(res.success){
				let list = res.result.records||res.result;
				this.xbzlzdList = list;
			}
		});
		//查询区域农业资源--东部经济资源  内容列表
	  	getAction('/gateway/gatewayColumn/list',{pageSize:-1,isRelease:'Y',parent:10102}).then((res)=>{
			if(res.success){
				let list = res.result.records||res.result;
				this.dbjjzyList = list;
			}
		});
		//查询区域农业资源--中部粮食资源  内容列表
	  	getAction('/gateway/gatewayColumn/list',{pageSize:-1,isRelease:'Y',parent:10103}).then((res)=>{
			if(res.success){
				let list = res.result.records||res.result;
				this.zblszyList = list;
			}
		});
		//查询区域农业资源--适宜吉林省  内容列表
	  	getAction('/gateway/gatewayColumn/list',{pageSize:-1,isRelease:'Y',parent:10104}).then((res)=>{
			if(res.success){
				let list = res.result.records||res.result;
				this.syjlsList = list;
			}
		});
      //查询栏目
    //   getAction('/gateway/gatewayColumn/list',{pageSize:-1,isEnable:'Y',type:'!!BLANK'}).then((res)=>{
    //     if(res.success){
    //       let list = res.result.records||res.result;
    //       let map = {};
    //       //转成，map
    //       let parentList = list.filter(x => {
    //         if(x.parent){
    //           return false;
    //         }else{
    //           map[x.id] = x;
    //           return true;
    //         }
    //       });
    //       //孩子找父亲
    //       list.forEach(x => {
    //         let parent = map[x.parent] || {};
    //         if(!parent.list) parent.list = [];
    //         parent.list.push(x);
    //       });
    //       this.columnList = parentList;
    //     }
    //   });
    },
    //鼠标移入菜单上，显示其下菜单
    openMenu(e){
      var curItem = jQuery(e.target);
      mst = setTimeout(function(){//延时触发
        curItem.find("blockquote").slideDown('fast');
        mst = null;
      });
    },
    //鼠标移出菜单时，隐藏其下菜单
    closeMenu(e){
      if(mst)clearTimeout(mst);
      jQuery(e.target).find("blockquote").slideUp('fast');
    }
  },
}
</script>

<style lang="less" scoped>
#MutiNav .multiUl .multiUlli a.mulgo{
	line-height: 50px;
}
</style>