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

<template>
  <div>
    <div class="autoBox box" style="padding-top: 0;">
        <div class="crumbs">
          <el-breadcrumb separator="/" style="float: left;line-height: 40px;">
            <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: 'realTimeInfo' }">{{$t('common.InformationData')}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{$t('common.Journal')}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
    </div>
    <div class="journalDetail autoBox box">
        <div class="details">
            <div style="width:246px;height: 300px;display: inline;float: left;">
              <img :src="'api/file/pub/' + infojournal.photo" alt="" style="width: 100%;height: 100%;">
            </div>
            <div style="display: inline;height: 339px;float: left;width: 726px;padding-left: 46px;">
              <div class="detailList">
                <span>{{$t('common.Journalname')}}：</span>
                <p>{{infojournal.categoryName}}</p>
              </div>
              <div class="detailList">
                <span>{{$t('common.Organizer')}}：</span>
                <p>{{infojournal.hostUnit}}</p>
              </div>
              <div class="detailList">
                <span>{{$t('common.Numberofperiods')}}：</span>
                <p>{{infoJournalViews?infoJournalViews.length:0}}</p>
              </div>
              <div class="detailList">
                <span>{{$t('common.intro')}}:</span>
                <p style="cursor: pointer;-webkit-box-orient: vertical;
                                position:relative;
                                line-height:1.4em;
                                overflow: hidden;
                                height:5.6em;" class="plate"
                    @click="dialogVisibleChange"
                >{{infojournal.introduce}}</p>
              </div>
            </div>
        </div>
        <div style="width: 100%;margin-top: 20px;margin-left: 50px;">
          <div>
              <span v-for="(item,key) in eveYears" :class="i==item?'years2 cursor':'years1 cursor'"
                @click="years(item,index)">{{item}}
                <!-- <span v-for="(item,index) in value">{{item.name}}</span> -->
              </span>

          </div>
        </div>
        <div style="margin: 66px 50px 0px 50px">
            <div style="display: flex;justify-content: flex-start;flex-wrap:wrap;padding-bottom:40px;overflow: hidden;">
              <div style="width: 18%;margin-right: 20px;" v-for="(item,index) in recommend2[i]" @click="open(item.link)">
                <img :src="'api/file/pub/' + item.pictureUrl" alt="" style="width:100%;height:230px" >
                <div style="text-align: center;">
                  <div style="width: 8px;height: 8px;background: #12559c;display: inline-block;margin-left: 10px;"></div>
                  <span style="font-size:12px">{{item.name}} </span>
                </div>
              </div>
            </div>
        </div>
        <!-- <div style="width: 100%;position: relative;height: 100px;">
          <div style="position: absolute;left: 50%;top: 0;transform: translateX(-50%);">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    >
            </el-pagination>
          </div>
        </div> -->
        <el-dialog
          :title="$t('common.InformationDetails')"
          :visible.sync="dialogVisible"
          width="30%">
          <span style="line-height: 29px;font-size: 18px;">{{infojournal.introduce}}</span>
        </el-dialog>
    </div>
  </div>

  </template>

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

  export default {
      data(){
        return {
          index:1,
          i:null,
          id:this.$route.params.key,
          subscript:this.$route.params.index,
          eveYears:[],
          recommend2:[],
          dialogVisible:false,
          total:0,
          infoJournalViews:[],
          screen1:[],
          type:[],
          infojournal:{}
        }
      },
      mounted(){
        this.getList();
        this.getData(); // 获取字典值
      },
      watch:{
        '$i18n.locale'(){
          this.getList();
          this.getData();
        }
      },
      methods:{
        getData(){
          getDicts(this.$i18n.locale=='zh'?"JOURNAL_DICT,JOURNAL_LANGUAGE_DICT":"JOURNAL_DICT_EN,JOURNAL_LANGUAGE_DICT_EN").then(res=>{
              // this.$i18n.locale=='en'?"CMS_INFORMATION_TYPE_DICT_EN":"CMS_INFORMATION_TYPE_DICT"
              this.screen1=res.data[0];
              this.type=this.screen1.filter(item=>{
                return item.value==this.id
              })
          })
        },
        getList(){
          const that = this;
          let page={
            typeDict:this.id,
            languageDict:this.$i18n.locale.toUpperCase()
          }


          getJournalClassifications({languageDict:this.$i18n.locale.toUpperCase(),baseEntityId:this.id}).then(res =>{
              let data = res.data.journalClassifications;
              if(data){
                  that.infojournal = data[0]
              }

          });
          getInfoJournalViews(page).then(res=>{
            console.log(res)

            if( JSON.stringify(res.data) !=="{}"){
                if(res.data){
                    this.infoJournalViews=res.data.infoJournalViews;
                    this.recommend2=res.data.yearMap || [];
                    this.total=res.data.page?res.data.page.totalCount : 0;
                    this.eveYears=[];
                    for(let i in this.recommend2){
                        this.eveYears.push(i);
                    }
                    this.eveYears.reverse();
                    this.i=this.eveYears[0];
                }

                // this.getrecommendFlagList(page);// 获取推荐期刊
            }else {
                let language = this.$i18n.locale == 'zh'?'en':'zh';
                getInfoJournalViews({ typeDict:this.id,
                    languageDict:language.toUpperCase()}).then(res => {
                    if(res.data){
                        this.infoJournalViews=res.data.infoJournalViews;
                        this.recommend2=res.data.yearMap || [];
                        this.total=res.data.page?res.data.page.totalCount : 0;
                        this.eveYears=[];
                        for(let i in this.recommend2){
                            this.eveYears.push(i);
                        }
                        this.eveYears.reverse();
                        this.i=this.eveYears[0];
                    }
                })
                /*this.infoJournalViews=[];
                this.recommend2=[];
                this.total=0;
                this.eveYears=[];
                this.i=null;*/
            }
          })
        },
        dialogVisibleChange(){
          this.dialogVisible=true;
        },
        open(url){
          window.open(url);//在另外新建窗口中打开窗口
        },
        getIcon(id){
          if(id=='01'){
            return require("@/assets/img/realTimeInfo/"+'Member.png');
          }else if(id=='02'){
            return require("@/assets/img/realTimeInfo/"+'Journal.png');
          }else {
            return require("@/assets/img/realTimeInfo/"+'EnglishJournals.png');
          }
        },
        years(item,index){
         this.i=item
        },
        handleCurrentChange(val){

        }
      }

  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .box {
      margin-top: 10px;
      background: #fff;
      /* border-bottom: 1px solid rgb(158, 158, 158); */

        /* height: 500px; */
        /* padding: 20px 0; */
    }
    .crumbs {
      width: 100%;
      height: 40px;
      margin-left: 10px;

    }
   .journalDetail {
     mine-height: 600px;
     /* padding: 0 10px; */

   }
   .details{
     height: 340px;
    margin: 0 50px;
     padding: 60px 0px;

   }
   .detailList{
    margin-bottom: 30px;
    white-space: 1px;
   }
   .detailList span{
    display: inline-block;
    /* width: 80px; */
   }
   .detailList p{
    display: inline;
    margin-left: 20px;
   }
   .years1 {
      padding: 10px 18px;
      font-size: 14px;
      background-color: #e8e8e8;
      color: #8fa0b4;
  }
  .years2 {
      padding: 10px 18px;
      font-size: 14px;
      background-color: #12559c;
      color: #fff;
  }
</style>