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

<template>
  <div class="ban">
    <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: 36px 0 0 10px;">
				<a href="">设为首页</a>
				<a href=""> | </a>
				<a href="">加入收藏</a>
			</div>
			<div class="sch_downbox right">
				<input v-model="searchText" placeholder="请输入要搜索的内容" />
				<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">
				<a class="mulgo" href="javascript:void(0);" title="首页" @click="$to('home')">
					<span class="mulgochie">首页</span>
				</a>
			</li>
			<li class="multiUlli" >
				<a class="mulgo" href="javascript:void(0);" title="关于本所" @click="$to('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><img src="img/dou.png" style="width: 26px;"></span>
									<span>西部杂粮杂豆</span>
								</a>
								<div class="xbcot right">
									<template v-for="(col,colIndex) in xbzlzdList" >
										<a href="javascript:void(0);" :key="colIndex" @click="$to('detailedPage2',{id:col.id})">{{col.title}}</a>
									</template>
								</div>
							</li>
							<li class="clearfloat">
								<a href="javascript:void(0);" class="xbzlzd left" @click="$to('listPage2',{pid:101,id:10102})">
									<span><img src="img/jingji.png" style="width: 26px;"></span>
									<span>东部经济资源</span>
								</a>
								<div class="xbcot right">
									<template v-for="(col,colIndex) in dbjjzyList" >
										<a href="javascript:void(0);" :key="colIndex" @click="$to('detailedPage2',{id:col.id})">{{col.title}}</a>
									</template>
								</div>
							</li>
							<li class="clearfloat">
								<a href="javascript:void(0);" class="xbzlzd left" @click="$to('listPage2',{pid:101,id:10103})">
									<span><img src="img/liangshi.png" style="width: 26px;"></span>
									<span>中部粮食资源</span>
								</a>
								<div class="xbcot right">
									<template v-for="(col,colIndex) in zblszyList" >
										<a href="javascript:void(0);" :key="colIndex" @click="$to('detailedPage2',{id:col.id})">{{col.title}}</a>
									</template>
								</div>
							</li>
							<li class="clearfloat">
								<a href="javascript:void(0);" class="xbzlzd left" @click="$to('listPage2',{pid:101,id:10104})">
									<span><img src="img/dou.png" style="width: 26px;"></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('detailedPage2',{id:col.id})">{{col.title}}</a>
									</template>
								</div>
							</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="fjsojg left"><img src="img/mune_1.jpg" ></div>
							<div class="vdas left">
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:102,id:10201})">
									<span><img src="img/mue_3.png" style="width: 32px;"></span>
									<span>特色农业产业化</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:102,id:10202})">
									<span><img src="img/mue_2.png" style="width: 32px;"></span>
									<span>粮食产业化</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:102,id:10203})">
									<span><img src="img/mue_1.png" style="width: 32px;"></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="fjsojg left"><img src="img/mune_1.jpg" ></div>
							<div class="vdas left">
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:103,id:10301})">
									<span><img src="img/mue_4.png" style="width: 32px;"></span>
									<span>吉林省农业资源规划</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:103,id:10302})">
									<span><img src="img/mue_6.png" style="width: 32px;"></span>
									<span>西部特色经济作物区域布局</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:103,id:10303})">
									<span><img src="img/mue_7.png" style="width: 32px;"></span>
									<span>中部粮食加工业区域布局</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:103,id:10304})">
									<span><img src="img/mue_5.png" style="width: 32px;"></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="fjsojg left"><img src="img/mune_1.jpg" ></div>
							<div class="vdas left">
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:104,id:10401})">
									<span><img src="img/mue_10.png" style="width: 32px;"></span>
									<span>保护性耕作</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:104,id:10402})">
									<span><img src="img/mue_8.png" style="width: 32px;"></span>
									<span>农业资源循环利用</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:104,id:10403})">
									<span><img src="img/mue_9.png" style="width: 32px;"></span>
									<span>农产品安全</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:104,id:10404})">
									<span><img src="img/mue_11.png" style="width: 32px;"></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="fjsojg left"><img src="img/mune_1.jpg" ></div>
							<div class="vdas left">
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:105,id:10501})">
									<span><img src="img/mue_12.png" style="width: 32px;"></span>
									<span>资源区划</span>
								</a>
								<a href="javascript:void(0);" class="fjsjkih left" @click="$to('listPage',{pid:105,id:10502})">
									<span><img src="img/mue_13.png" style="width: 32px;"></span>
									<span>农业产业化</span>
								</a>
							</div>
						</div>
					</div>
				</blockquote>
			</li>
			<li class="multiUlli" >
				<a class="mulgo" title="助力乡村振兴" href="javascript:void(0);"  @click="$to('listPage',{pid:106})">
					<span class="mulgochie">助力乡村振兴</span>
				</a>
			</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();
  },
  updated(){
  },
  methods:{
    loadData(){
    	if(this.$route.query.findStr){
        	this.searchText = this.$route.query.findStr;
      	}
		//查询区域农业资源--西部杂粮杂豆  内容列表
	  	getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId:10101}).then((res)=>{
			if(res.success){
				let list = res.result.records||res.result;
				this.xbzlzdList = list;
			}
		});
		//查询区域农业资源--东部经济资源  内容列表
	  	getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId:10102}).then((res)=>{
			if(res.success){
				let list = res.result.records||res.result;
				this.dbjjzyList = list;
			}
		});
		//查询区域农业资源--中部粮食资源  内容列表
	  	getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId:10103}).then((res)=>{
			if(res.success){
				let list = res.result.records||res.result;
				this.zblszyList = list;
			}
		});
		//查询区域农业资源--适宜吉林省  内容列表
	  	getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId: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 scoped>
</style>