622 lines
18 KiB
Vue
622 lines
18 KiB
Vue
<template>
|
||
<div>
|
||
<headerView/>
|
||
<div class="weizhibox">
|
||
<div class="weizhi">
|
||
<span><img src="img/shouye.png" style="width: 16px;margin: 11px 4px 0 0;"></span>
|
||
<span>当前位置:</span>
|
||
<a href="javascript:void(0);" @click="$to('home')">首页 ></a>
|
||
<!-- <a href="javascript:void(0);" @click="$to('listPage',{pid:thisColumn.parent})">{{parentData.name}} > </a> -->
|
||
<a href="javascript:void(0);" >{{parentData.name}} > </a>
|
||
<a href="javascript:void(0);">{{thisColumn.name}}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="er_contant clearfloat">
|
||
<div class="er_contll left" style="width: 240px;">
|
||
<div class="hjk_item">
|
||
<h3>区域农业资源</h3>
|
||
<div class="" style="width: 60px;height: 3px;background-color: #1dcc6a;margin-top: -3px;"></div>
|
||
</div>
|
||
<div class="navTab-panel tabsPageContent layoutBox" style="width: 240px;">
|
||
<div class="page unitBox">
|
||
<div class="pageFormContent">
|
||
<div id="leftside">
|
||
<!-- jtree模板 -->
|
||
<div id="sidebar">
|
||
<a-tree
|
||
:show-line="true"
|
||
:default-expanded-keys="['10101', '10102', '10103', '10104']"
|
||
@select="onSelect"
|
||
>
|
||
<a-tree-node key="10101">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="typeFun('10101')">西部杂粮杂豆</span>
|
||
</span>
|
||
<a-tree-node key="1010101" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010101')">高粱</span>
|
||
</span>
|
||
<a-tree-node key="101010101">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010101')">育种</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="101010102">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010102')">栽培</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010102" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010102')">花生</span>
|
||
</span>
|
||
<a-tree-node key="101010201">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010201')">育种</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="101010202">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010202')">栽培</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010103" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010103')">绿豆</span>
|
||
</span>
|
||
<a-tree-node key="101010301">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010301')">育种</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="101010302">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010302')">栽培</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010104" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010104')">小豆</span>
|
||
</span>
|
||
<a-tree-node key="101010401">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010401')">育种</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="101010402">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010402')">栽培</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010105" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010105')">燕麦</span>
|
||
</span>
|
||
<a-tree-node key="101010501">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010501')">育种</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="101010502">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010502')">栽培</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010106" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010106')">谷子</span>
|
||
</span>
|
||
<a-tree-node key="101010601">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010601')">育种</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="101010602">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010602')">栽培</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010107" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010107')">向日葵</span>
|
||
</span>
|
||
<a-tree-node key="101010701">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010701')">育种</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="101010702">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('101010702')">栽培</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="10102">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="typeFun('10102')">东部经济资源</span>
|
||
</span>
|
||
<a-tree-node key="1010201" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010201')">大豆</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010202" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010202')">食用菌</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010203" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010203')">中药材</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010204" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010204')">林果资源</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="10103">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="typeFun('10103')">中部粮食资源</span>
|
||
</span>
|
||
<a-tree-node key="1010301" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010301')">水稻</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010302" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010302')">玉米</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
|
||
<a-tree-node key="10104">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="typeFun('10104')">适宜吉林省种植资源</span>
|
||
</span>
|
||
<a-tree-node key="1010401" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010401')">高粱</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010402" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010402')">花生</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010403" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010403')">绿豆</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010404" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010404')">小豆</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010405" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010405')">燕麦</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010406" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010406')">谷子</span>
|
||
</span>
|
||
</a-tree-node>
|
||
<a-tree-node key="1010407" >
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="nyzyFun('1010407')">向日癸</span>
|
||
</span>
|
||
</a-tree-node>
|
||
</a-tree-node>
|
||
<a-tree-node key="10105">
|
||
<span slot="title">
|
||
<img src="img/smiley_sleep.png" class="iconClass">
|
||
<span style="float:left;" @click="typeFun('10105')">其他</span>
|
||
</span>
|
||
</a-tree-node>
|
||
|
||
</a-tree>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="er_contr right" v-show="nyzyShow">
|
||
<ul>
|
||
<template v-for="(zyDataList ) in nyzyData" >
|
||
<template v-if="zyDataList.key == typeOption" >
|
||
<li v-for="(zyData , zyIndex) in zyDataList.content" :key="zyIndex">
|
||
<a href="javascript:void(0)" class="er_coa">
|
||
<div>
|
||
<div class="er_coaimg" @click="nyzyFun(zyData.code)">
|
||
<img :src="zyData.picPath" >
|
||
</div>
|
||
<div class="er_item" @click="nyzyFun(zyData.code)" v-text="zyData.title" ></div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</template>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
<div class="cyh_contr right" v-show="listShow">
|
||
<ul>
|
||
<li v-for="(art,artIndex) in articleList" :key="artIndex">
|
||
<a href="javascript:void(0);" class="cyh_coa clearfloat" @click="$to('detailedPage2',{id:art.id})">
|
||
<div class="cyhl left">
|
||
<h3 class="elli">{{art.title}}</h3>
|
||
<p class="over-line2">{{$tfnm(art,'content',104)}}</p>
|
||
</div>
|
||
<div class="cyhr right">
|
||
<div class="cyhr_date">{{getMonthAndDay(art.updateTime || art.createTime)}}</div>
|
||
<div class="jianttewr">→</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<footerView/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
|
||
import { getAction } from '@/api/manage'
|
||
import headerView from '@/views/gateway/common/header'
|
||
import footerView from '@/views/gateway/common/footer'
|
||
|
||
export default {
|
||
mixins:[getwayMixin],
|
||
components:{
|
||
headerView,
|
||
footerView
|
||
},
|
||
props:{
|
||
},
|
||
data(){
|
||
return {
|
||
parentData:{},
|
||
thisColumn:{},
|
||
columnList:[],
|
||
articleList: [],
|
||
nyzyShow: true,
|
||
listShow: false,
|
||
nyzyData: [
|
||
{
|
||
key:'10101',
|
||
content:[
|
||
{
|
||
title: '高粱',
|
||
code: '1010101',
|
||
picPath:'img/nyzy_gl.jpg'
|
||
},
|
||
{
|
||
title: '花生',
|
||
code: '1010102',
|
||
picPath:'img/nyzy_hs.jpg'
|
||
},
|
||
{
|
||
title: '绿豆',
|
||
code: '1010103',
|
||
picPath:'img/nyzy_ld.jpg'
|
||
},
|
||
{
|
||
title: '小豆',
|
||
code: '1010104',
|
||
picPath:'img/nyzy_xd.jpg'
|
||
},
|
||
{
|
||
title: '燕麦',
|
||
code: '1010105',
|
||
picPath:'img/nyzy_ym.jpg'
|
||
},
|
||
{
|
||
title: '谷子',
|
||
code: '1010106',
|
||
picPath:'img/nyzy_gz.jpg'
|
||
},
|
||
{
|
||
title: '向日葵',
|
||
code: '1010107',
|
||
picPath:'img/nyzy_xrk.jpg'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
key:'10102',
|
||
content:[
|
||
{
|
||
title: '大豆',
|
||
code: '1010201',
|
||
picPath:'img/nyzy_dd.jpg'
|
||
},
|
||
{
|
||
title: '食用菌',
|
||
code: '1010202',
|
||
picPath:'img/nyzy_syj.jpg'
|
||
},
|
||
{
|
||
title: '中药材',
|
||
code: '1010203',
|
||
picPath:'img/nyzy_zyc.jpg'
|
||
},
|
||
{
|
||
title: '林果资源',
|
||
code: '1010204',
|
||
picPath:'img/nyzy_lgzy.jpg'
|
||
},
|
||
]
|
||
},
|
||
{
|
||
key:'10103',
|
||
content:[
|
||
{
|
||
title: '水稻',
|
||
code: '1010301',
|
||
picPath:'img/nyzy_sd.jpg'
|
||
},
|
||
{
|
||
title: '玉米',
|
||
code: '1010302',
|
||
picPath:'img/nyzy_ym2.jpg'
|
||
},
|
||
]
|
||
},
|
||
{
|
||
key:'10104',
|
||
content:[
|
||
{
|
||
title: '高粱',
|
||
code: '1010401',
|
||
picPath:'img/nyzy_gl.jpg'
|
||
},
|
||
{
|
||
title: '花生',
|
||
code: '1010402',
|
||
picPath:'img/nyzy_hs.jpg'
|
||
},
|
||
{
|
||
title: '绿豆',
|
||
code: '1010403',
|
||
picPath:'img/nyzy_ld.jpg'
|
||
},
|
||
{
|
||
title: '小豆',
|
||
code: '1010404',
|
||
picPath:'img/nyzy_xd.jpg'
|
||
},
|
||
{
|
||
title: '燕麦',
|
||
code: '1010405',
|
||
picPath:'img/nyzy_ym.jpg'
|
||
},
|
||
{
|
||
title: '谷子',
|
||
code: '1010406',
|
||
picPath:'img/nyzy_gz.jpg'
|
||
},
|
||
{
|
||
title: '向日癸',
|
||
code: '1010407',
|
||
picPath:'img/nyzy_xrk.jpg'
|
||
},
|
||
]
|
||
}
|
||
],
|
||
treeData: [
|
||
{
|
||
title: 'parent 1',
|
||
key: '0-0',
|
||
slots: {
|
||
icon: 'smile',
|
||
},
|
||
children: [
|
||
{ title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },
|
||
{ title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } },
|
||
],
|
||
},
|
||
],
|
||
typeOption:'10101',
|
||
}
|
||
},
|
||
computed:{
|
||
pid(){
|
||
return this.$route.query.pid || '-1';
|
||
},
|
||
id(){
|
||
return this.$route.query.id;
|
||
},
|
||
findStr(){
|
||
if(this.$route.query.findStr){
|
||
return '*'+this.$route.query.findStr+'*';
|
||
}else{
|
||
return '';
|
||
}
|
||
},
|
||
},
|
||
mounted(){
|
||
this.loadData();
|
||
},
|
||
watch:{
|
||
pid(){
|
||
this.loadData();
|
||
},
|
||
id(){
|
||
this.loadData();
|
||
},
|
||
findStr(){
|
||
this.loadData();
|
||
}
|
||
},
|
||
updated(){
|
||
},
|
||
methods:{
|
||
nyzyFun(record){
|
||
this.nyzyShow= false
|
||
this.listShow= true
|
||
|
||
|
||
let columnId = record;
|
||
//查询文章列表
|
||
let findParam = {}
|
||
if(this.findStr){
|
||
if(this.utils.isCn()){
|
||
findParam.title = this.findStr;
|
||
}else if(this.utils.isEn()){
|
||
findParam.titleen = this.findStr;
|
||
}
|
||
}else{
|
||
//非搜索,还没有子id,差个锤子
|
||
columnId = (columnId || this.pid) || '-1'
|
||
}
|
||
getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId,...findParam,column: 'createTime',order: 'desc'}).then((res)=>{
|
||
if(res.success){
|
||
let list = res.result.records||res.result;
|
||
this.articleList = list;
|
||
}
|
||
});
|
||
},
|
||
typeFun(record){
|
||
this.typeOption = record
|
||
this.nyzyShow= true
|
||
this.listShow= false
|
||
},
|
||
onSelect(selectedKeys, info) {
|
||
console.log('selected', selectedKeys, info);
|
||
},
|
||
loadData(){
|
||
var typeOption = this.id
|
||
if(typeOption.length>5){
|
||
this.typeOption = typeOption.substring(0,5)
|
||
|
||
this.nyzyShow= false
|
||
this.listShow= true
|
||
|
||
let columnId = this.id;
|
||
//查询文章列表
|
||
let findParam = {}
|
||
if(this.findStr){
|
||
if(this.utils.isCn()){
|
||
findParam.title = this.findStr;
|
||
}else if(this.utils.isEn()){
|
||
findParam.titleen = this.findStr;
|
||
}
|
||
}else{
|
||
//非搜索,还没有子id,差个锤子
|
||
columnId = (columnId || this.pid) || '-1'
|
||
}
|
||
getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId,...findParam,column: 'createTime',order: 'desc'}).then((res)=>{
|
||
if(res.success){
|
||
let list = res.result.records||res.result;
|
||
this.articleList = list;
|
||
}
|
||
});
|
||
|
||
}else{
|
||
this.typeOption = this.id
|
||
this.nyzyShow= true
|
||
this.listShow= false
|
||
|
||
}
|
||
console.log('--->',this.typeOption);
|
||
|
||
//查询栏目(包含当前的和候选的)
|
||
// getAction('/gateway/gatewayColumn/list',{pageSize:-1,isEnable:'Y',fpid:this.pid,column: 'createTime',order: 'desc'}).then((res)=>{
|
||
// if(res.success){
|
||
// let list = res.result.records||res.result;
|
||
// // console.log('list===>',list);
|
||
// //查出根节点
|
||
// this.parentData = list.find(x => !x.parent);
|
||
// if(this.id){
|
||
// this.thisColumn = list.find(x => x.id == this.id);
|
||
// this.columnList = list.filter(x => x.parent);
|
||
// }else{
|
||
// this.thisColumn = list[0];
|
||
// this.columnList = [];
|
||
// this.columnList.push(list[0]);
|
||
// }
|
||
// }
|
||
// });
|
||
},
|
||
getDay(dateTime){
|
||
if(!dateTime) return '';
|
||
let d = new Date(dateTime);
|
||
return d.getDate()
|
||
},
|
||
getMonthAndDay(dateTime){
|
||
if(!dateTime) return '';
|
||
let d = new Date(dateTime);
|
||
return (d.getMonth()+1) + '-' + d.getDate();
|
||
},
|
||
getYearAndMonth(dateTime){
|
||
if(!dateTime) return '';
|
||
let d = new Date(dateTime);
|
||
return d.getFullYear() + '-' + (d.getMonth()+1)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.iconClass{
|
||
width:15px;
|
||
height:15px;
|
||
float:left;
|
||
margin:5px;
|
||
}
|
||
</style> |