dev/dcp-web-gate/src_old/views/realTimeInfo/RealTimeInfoPeriodical.vue

<template>
    <div>
        <div class="autoBox box " style="padding-top: 0;">
             <!-- 主体部分 -->
                <Screen v-bind:screen1="screen1" :screen1def="screen1def" :screen2Item="screen2Item" :screen2="screen2" :screen6="screen6" @screenBack="screenBack"></Screen>
        </div>
        <div class="autoBox box" style="padding-top: 0;margin-top: 10px;height: 700px;">
            <div style="float: left;width: 18%;height: 100%;">
                <div style="width: 90%;height: 33px;line-height: 33px;text-align: center;background: #2c558a;font-size: 14px;color: #fff;margin:20px 0 0 10px">{{$t('common.JournalRecommendation')}}</div>
                <div>
                    <div v-for="(item,index) in recommend" style="text-align: left;padding: 10px 0 0 15px;" @click="toView('RealTimeInfoJournaldetails',item.baseEntityId,index)">
                        <img :src="'api/file/pub/'+ item.photo" alt="" style="width: 90%;height:170px;">
                        <div style="font-size: 12px;color: #666;text-align:center">{{item.categoryName}}</div>
                    </div>
                </div>
            </div>
            <div style="float: right;width: 81%;">
                <div style="width: 100%;height: 110px;border-bottom: 1px solid #ccc; position: relative;" class="select-input">
                    <div  class="select-input-position">
                        <el-input :placeholder="$t('common.EnterContent')" v-model="title" class="input-with-select" maxlength="50" show-word-limit>
                            <template slot="prepend">{{$t('common.Nameofpublication')}}</template>
                          <!-- <el-select v-model="select" slot="prepend" :placeholder="$t('common.PleaseSelect')">
                            <el-option :label="$t('common.Nameofpublication')" value="name"></el-option>
                            <el-option label="$t('common.theme')" value="topic"></el-option>
                            <el-option label="$t('common.Keywords')" value="label"></el-option>
                            <el-option label="$t('common.Author')" value="author"></el-option>
                            <el-option label="$t('common.Abstract')" value="abstractPoint"></el-option>
                            <el-option label="$t('common.Source')" value="source"></el-option>

                          </el-select> -->
                          <el-button slot="append" @click="search">{{$t('common.Search')}}</el-button>
                        </el-input>
                    </div>
                    <div  class="select-input-realTime">
                        {{$t('common.PeriodicalTotil')}}  <span style="color: #2c558a;"> {{total}}</span> {{$t('common.PeriodicalJournal')}}
                    </div>
                </div>
                <div style="width: 100%;margin-top: 10px;" class="select-input-realTime2">
                    <ul>
                        <li v-for="(i,index) in recommend2" @click="open(i.link)">
                            <img :src="'api/file/pub/' + i.pictureUrl" alt="" style="height: 200px;width: 100%;"  class="cursor" :title=i.name>
                            <div style="font-size: 12px;color: #666;float: left;width: 160px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; ">
<!--                                <span style="width: 10px;height: 10px;background: #2c558a;display: inline-block;margin-right: 5px;"></span>-->
                                {{i.name}}
                            </div>
                        </li>
                    </ul>
                </div>
                <div v-if="total <=0" style="text-align: center;height: 60px;border-bottom: 1px solid #eee;border-top: 1px solid #eee;">
                    <span v-if="$i18n.locale=='en'" style="line-height: 60px;">No data</span>
                    <span v-else="$i18n.locale=='zh'" style="line-height: 60px;">暂无数据</span>
                </div>
                <div v-if="total >0"  style="width: 100%;position: relative;height: 100px;">
                    <div style="position: absolute;left: 50%;top: 30px;transform: translateX(-50%);">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="handleCurrentChange"
                                :total=total-0>
                        </el-pagination>
                    </div>
                </div>

            </div>
        </div>
    </div>
  </template>

  <script>
    import Screen from '@/components/screen'
    import { getDicts } from "@/api/dict";
    import {getInfoJournalViews,get,saveOrUpdate} from '@/api/realTimeInfo/infoJournalView'
    import {getJournalClassifications} from '@/api/realTimeInfo/journalClassification'

  export default {
    name: 'RealTimeInfoPeriodical',
    components:{Screen},
    data () {
      return {
        select:'name',
        title:'',
        total:0,
        screen2Item:null,
        screen1def:'',
        screen1:{
            value:'common.Journal',
            item:[]
        },
        screen2:{
            value:'common.Language',
            item:[]
        },
        screen6:{
            value:'common.Years',
            item:[{
                value:null,
                label:'common.All'
            },{
                value:'2021',
                label:'2021'
            },{
                value:'2020',
                label:'2020'
            },{
                value:'2019',
                label:'2019'
            },{
                value:'2018',
                label:'2018'
            }]
        },
        recommend:[],// 推荐期刊
        recommend2:[],
        screenData:{}
      }
    },
    mounted(){

        this.initData();


    },
    watch:{
        '$i18n.locale'(){
            this.initData();
            this.screenBack(this.screenData);
        },
    },
    methods:{
        initData(){
            getJournalClassifications({languageDict:this.$i18n.locale.toUpperCase()}).then(res =>{
                let data = res.data;
                let that = this;
                if(data){
                    var typeDictValue = null;
                    var screen1def = null;
                    res.data.options.forEach(function (item) {
                        if(that.$i18n.locale == 'zh'){
                            if(item.label == '全球能源互联网（中文）' || item.label == 'Global Energy Interconnection(Chinese)'){
                                typeDictValue = item.value;
                                screen1def = item.value;
                                that.screenData = {
                                    click1:item.value
                                }
                            }
                        }
                        if(that.$i18n.locale == 'en'){
                            if(item.label == '全球能源互联网（英文）' || item.label == 'Global Energy Interconnection(English)'){
                                typeDictValue = item.value;
                                screen1def = item.value;
                                that.screenData = {
                                    click1:item.value
                                }
                            }
                        }


                    })
                    this.screen1def = screen1def;
                    this.screen1.item=res.data.options;
                    if(res.data.journalClassifications){
                        this.recommend = res.data.journalClassifications.slice(0,3);
                    }
                    //2020-09-15 15:48:00要求英文版页面中英文放最上面
                    if(this.$i18n.locale=='en'){
                        var recommendLocal = this.recommend[0];
                        this.recommend[0] = this.recommend[1];
                        this.recommend[1] = recommendLocal;
                    }
                    this.screen1.item.unshift({
                        label: "common.All",
                        value: null,
                    });
                    let page={
                        pageNo:1,
                        pageSize:'10',
                        typeDict:typeDictValue
                        // language:this.$i18n.locale.toUpperCase()
                    }
                    this.getInitData(page);
                    // this.getrecommendFlagList(page);// 获取推荐期刊
                }
            });
            getDicts(this.$i18n.locale=='zh'?"JOURNAL_DICT,JOURNAL_LANGUAGE_DICT":"JOURNAL_DICT_EN,JOURNAL_LANGUAGE_DICT_EN").then(res=>{
                console.log(res);
                // this.$i18n.locale=='en'?"CMS_INFORMATION_TYPE_DICT_EN":"CMS_INFORMATION_TYPE_DICT"
                //this.screen1.item=res.data[0];
                // this.recommend[0].label=res.data[0][0].label;
                // this.recommend[1].label=res.data[0][1].label;
                // this.recommend[2].label=res.data[0][2].label;
                this.screen2.item=res.data[1];

                this.screen2.item.unshift({
                    label: "common.All",
                    value: null,
                });
            });

        },
    // 字典值
    getList(){
        getJournalClassifications({languageDict:this.$i18n.locale.toUpperCase()}).then(res =>{
            let data = res.data;
            if(data){
                this.screen1.item=res.data.options;
                this.recommend = res.data.journalClassifications;
                this.screen1.item.unshift({
                    label: "common.All",
                    value: null,
                });
            }
        });
        getDicts(this.$i18n.locale=='zh'?"JOURNAL_DICT,JOURNAL_LANGUAGE_DICT":"JOURNAL_DICT_EN,JOURNAL_LANGUAGE_DICT_EN").then(res=>{
            console.log(res);
            // this.$i18n.locale=='en'?"CMS_INFORMATION_TYPE_DICT_EN":"CMS_INFORMATION_TYPE_DICT"
            //this.screen1.item=res.data[0];
            // this.recommend[0].label=res.data[0][0].label;
            // this.recommend[1].label=res.data[0][1].label;
            // this.recommend[2].label=res.data[0][2].label;
            this.screen2.item=res.data[1];

            this.screen2.item.unshift({
                label: "common.All",
                value: null,
            });
        })
    },
    // 展示数据
    getInitData(page){
        page.languageDict = this.$i18n.locale.toUpperCase()
        getInfoJournalViews(page).then(res=>{
            console.log(res)
            if(res.data){
                this.recommend2=res.data.infoJournalViews || [];
                this.total=res.data.page?res.data.page.totalCount : 0;
                // this.getrecommendFlagList(page);// 获取推荐期刊
            }
        })

    },
    // 获取推荐期刊
    // getrecommendFlagList(page){
    //     page.recommendFlag='y';
    //     page.pageSize=3;
    //     //page.language=this.$i18n.locale.toUpperCase();
    //     getInfoJournalViews(page).then(res=>{
    //         if(res.data){
    //             this.recommend=res.data.infoJournalViews || [];
    //         }
    //     })
    // },
    search(){
        if(!this.title){
            this.$message(this.$t("common.Pleasefillinthecontentfirst"));
        }
        let select=this.select;
        console.log(select)
        let list={
            pageNo:1,
            pageSize:'10'
        }
        list[select] = this.title
        this.getInitData(list);
    },
    open(url){
        window.open(url);//在另外新建窗口中打开窗口
    },
    handleCurrentChange(val){
        let data=this.screenData;
        let select=this.select;
        let page={
            pageNo:val,
            pageSize:'10',
            typeDict:data.click1?data.click1:'',
            languageDict:data.click2,
            // year:data.click3.click?data.click3.click:data.click3.input?data.click3.input:'',

        }
        page[select] = this.title;
        this.getInitData(page);
    },
    getIconUrl(url){
      return require("@/assets/img/realTimeInfo/"+url);
    },
    toView(router,json,index){
       this.$router.push({name:router,params:{key:json,index:index}})
     },
     screenBack(data){
         let page={
             pageNo:1,
             pageSize:'10',
             typeDict:data.click1?data.click1:'',
             languageDict:data.click2,
             year:data.click6.click?data.click6.click:data.click6.input?data.click6.input:''
         }
         this.screenData=data;
         this.getInitData(page);
         this.dataClick(data);
         console.log(data,'screenBackscreenBackscreenBackscreenBack',this.screen1.item);
     },
     dataClick(data){
        if(data.click1 && data.click1 == this.screen1.item[this.screen1.item.length-1].value){
             if(this.$i18n.locale=='zh'){
                this.screen2Item=this.screen2.item[1].value;
             }else {
                this.screen2Item=this.screen2.item[2].value;
             }
         }else {
            this.screen2Item=null;
         }
     },
     realTimeInfoScreensChange(i,index){
       this.realTimeInfoScreenItem=index
     },
    }
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      ul{
          margin: 0;
          padding: 0;
      }
    .box,.boxs {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding-bottom: 10px;
    }
    .boxs {
        padding-bottom:30px;
    }
    body {
        margin: 0;
    }
   .screen1 {
       color:#2c5589;
   }
   .screen2 {
       font-size: 14px;
        color:#bebebe;
   }
   li {
       display: inline-block;
       margin-left: 6px;
       padding: 0 2px;
       color: #1251A7;
   }
   .el-select-dropdown__wrap {
       max-height: 500px;
   }
   .realTimeInfo_scree .span1,
   .realTimeInfo_scree .span2{
       color: #fff;
       padding: 0 10px;
       font-size: 13px;
       display: inline-block;
       height: 100%;
       background: #2c5589;
       /* margin-right: 30px; */
       width: 70px;
       text-align: center;
   }
   .realTimeInfo_scree .span2 {
       background: #fff;
       color: #1251A7;
   }
   .select-input >>>.el-input__inner {
        height: 50px !important;
    }
    .select-input-position {
        width: 80%;
        position: absolute;
        left: 20px;top: 35%;
        transform: translate(0,-50%);
    }
    .select-input-realTime {
        width: 70%;
        position: absolute;
        left: 10px;
        top: 75%;
        font-size: 14px;
        color:#ccc;
    }
    /* .select-input-realTime2{
        display: -webkit-flex;
        display: flex;
        justify-content:space-between;
    } */
    .select-input-realTime2 li {
        width: 160px;
        height: 210px;
        margin-right: 10px;
        margin-bottom: 16px;
    }
    .select-input >>>.el-input-group__prepend {
        background-color: #fff;
        color: #000;
    }
    /* .el-input-group {
        width: 80%;
    } */
    .el-input-group__append {
        color: #fff;
        border: 1px solid #2c5589;
        background: #2c5589;
    }
    .Information {
        border-bottom: 1px solid #bebebe;
    }
    .Information span {
        font-size: 14px;
        display: inline-block;
        padding: 6px 0;

    }
    .Information .dcp_infor {
        margin-right: 500px;
        color: #2c5589;
        font-weight: 700;
        font-size: 15px;
        padding-left: 20px;
    }
    .Information .dcp_infor2 {
        margin-right: 30px;
    }
    .lableStyle li {
        display: block;
    }
    .lableStyle1,
    .lableStyle2 {
        color: #666;
        font-size: 14px;
        line-height: 29px;
        padding-left: 10px;
    }
    .lableStyle1 {
        font-size: 16px;
        font-weight: 600;
    }
    .spot {
     display: inline-block;
     width: 6px;
     height: 6px;
     background-color: #999;
     margin-right: 5px;
     margin-bottom:2px;
   }
   .el-select{
    width: 110px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-scrollbar__wrap li {
      display: block;
      color: #666;
      margin-left: 0;padding: 0 0;
      text-align: center;
      line-height: 48px;
  }
  .el-scrollbar__wrap li:hover{
      background: #0079ef;
      color: #fff;

  }
  .el-select-dropdown__item {
      height: 48px;
  }

</style>