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

<template>
  <div class="autoBox box"
       style="min-height: 600px">
    <div class="message"
         id="message">
      <ul class="realTimeInfo_scree"
          :class="messageBarFixed ? 'isFixed' :''">
        <li style="display: block;"
            :class="index==realTimeInfoScreenItem?'span1 cursor':'span2 cursor'"
            v-for="(i,index) in realTimeInfo_scree"
            :style="$i18n.locale=='zh' || index==0 ?'text-align:center;':''"
            @click="realTimeInfoScreensChange(i,index)">
          <span style="margin-right: 5px;"
                :style="$i18n.locale=='zh' || index==0 ?'text-align:center;':'margin-left:15px'">
            <img :src="getIconUrl(index)"
                 alt=""
                 v-if="index!==0"
                 style="vertical-align: middle;width: 28px;height:28px;">
          </span>
          {{i.label=='common.LatestNews'?$t('common.LatestNews'):i.label}}
        </li>
      </ul>
    </div>
    <div style="width: 690px;float: left;padding-left: 10px;">
      <div class="serch">
        <div style="color: #2C558A;margin-right: 20px;padding-bottom: 10px;
                        border-bottom: 1px solid #869bb6;font-weight: 700;height: 100px;position: relative;">
          <span style="position: absolute;bottom: 9px;left: 0;">
            {{label==null?$t('common.LatestNews'):realTimeInfoScreeMap[label]?realTimeInfoScreeMap[label]:$t('common.AllNews')}}
          </span>
          <!--滚动快讯-->
          <div class="ScrollExpress" v-if="isZh" :key="'zh'">
            <div class="express">{{$t('common.ScrolltoExpress')}}</div>
            <!-- 滚动快讯-->
            <div class="scrollBox1" v-if="scrollNewsList.length>0" ref="goodSwiper">
              <div class="swiper-banner swiper_vertical" id="swiper_vertical">
                <div class="swiper-wrapper swiper-wrapper-vertical swiper_vertical">
                  <div class="swiper-slide swiper_vertical" v-for="(item,index1) in scrollNewsList" :key="index1">
                    <div>
                      <div class="type">
                        <span> {{realTimeInfo_scree_zh[item.typeDict].label}}</span>
                      </div>
                      <div style="float: left;margin-left: 10px">
                        <span>{{formatDate(item.publishDate,'HH:mm')}}</span>

                      </div>
                      <p class="text1">
                        <span class="scrollName small red">{{item.title}}</span>
                      </p>
                    </div>
                    <div style="clear:both;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ScrollExpress" v-if="isZh == false" :key="'en'">
            <div class="express">{{$t('common.ScrolltoExpress')}}</div>
            <!-- 滚动快讯-->
            <div class="scrollBox2" v-if="scrollNewsList.length>0" ref="goodSwiper">
              <div class="swiper-banner swiper_vertical" id="swiper_vertical">
                <div class="swiper-wrapper swiper-wrapper-vertical swiper_vertical">
                  <div class="swiper-slide swiper_vertical" v-for="(item,index2) in scrollNewsList" :key="index2">
                    <div>
                      <div class="type">
                        <span> {{realTimeInfo_scree_en[item.typeDict].label}}</span>
                      </div>
                      <div style="float: left;margin-left: 10px">
                        <span>{{formatDate(item.publishDate,'HH:mm')}}</span>
                      </div>
                      <p class="text2">
                        <span class="scrollName small red">{{item.title}}</span>
                      </p>
                    </div>
                    <div style="clear:both;"></div>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-input :placeholder="$t('common.EnterContent')"
                    v-model="title"
                    maxlength="50"
                    show-word-limit
                    class="input-with-select"
                    style="width: 650px;margin-left: 85px;">
            <el-button class="cursor"
                       slot="append"
                       type="primary"
                       @click="getData(title)">{{$t('common.Search')}}</el-button>
          </el-input>
        </div>
        <!--全部资讯-->
        <div class="cursor"
             style="padding: 10px 0 0 0px;border-bottom: 1px solid #eee;"
             v-for="(item,index) in initList"
             @click="toView('realTimeInfoItemdetails',item.baseEntityId)">
          <div v-if="item.pictureUrl"
               style="width: 126px;float:left;overflow: hidden;">
            <img :src="'api/file/pub/' + item.pictureUrl"
                 alt=""
                 style="width: 126px;height: 82px;"
                 class="mouseItemImg">
          </div>
          <div v-if="item.pictureUrl"
               style="float: right;width: 540px;overflow: hidden;margin: 0 10px;">
            <div style="color: #333;font-weight: 700;font-size: 18px;margin-bottom: 10px;">
              {{item.title}}
              <div class="isnewdata newLine1" v-if="nowDate == formatDate(item.publishDate) && $i18n.locale == 'zh'">new</div>
              <div class="isnewdata newLine2" v-if="nowDate == formatDate(item.publishDate) && $i18n.locale == 'en'">new</div>
              <div style="clear: both"></div>
            </div>
            <div style="color: #333;font-size: 14px;
                                -webkit-box-orient: vertical;
                                position:relative;
                                line-height:1.4em;
                                overflow: hidden;
                                height:2.8em;"
                 class="plate">{{item.content}}</div>
            <div style="color: #999999;;line-height: 38px;font-size: 12px;">
              <span>{{item.auther?item.auther:''}}</span>
              <span style="float: right;margin-right: 10px;">{{formatDate(item.publishDate)}}</span>
            </div>
          </div>
          <div v-else
               style="overflow: hidden;margin: 0px 10px;">
            <div style="color: #333;font-weight: 700;font-size: 18px;margin-bottom: 10px;">
              {{item.title}}
              <div class="isnewdata newLine1" v-if="nowDate == formatDate(item.publishDate) && $i18n.locale == 'zh'">new</div>
              <div class="isnewdata newLine2" v-if="nowDate == formatDate(item.publishDate) && $i18n.locale == 'en'">new</div>
              <div style="clear: both"></div>
            </div>

            <div style="color: #333;font-size: 14px;
                                -webkit-box-orient: vertical;
                                position:relative;
                                line-height:1.4em;
                                overflow: hidden;
                                height:2.8em;"
                 class="plate"
                 v-html="item.content"></div>
            <div style="color: #999999;;line-height: 38px;font-size: 12px;">
              <span>{{item.auther?item.auther:''}}</span>
              <span style="float: right;margin-right: 10px;">{{formatDate(item.publishDate)}}</span>
            </div>
          </div>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div>

    <div style="width: 300px;float: left;margin-top: 59px;">
      <!-- 最新动态 -->
<!--      <div style="padding-top: 35px;">-->
<!--        <div style="color: #2C558A;margin-top: 20px;padding-bottom: 10px;-->
<!--              border-bottom: 1px solid #869bb6;font-weight: 700;">-->
<!--          <div class="newsTitle title1" @click="changeTitle(0)">{{$t('common.LatestDevelopment')}}</div>-->
<!--        </div>-->
<!--        &lt;!&ndash;最新动态&ndash;&gt;-->
<!--        <div style="padding: 5px 0 0 0;"-->
<!--             class="cursor"-->
<!--             v-for="(item,index) in newsActiveList"-->
<!--             @click="toView('realTimeInfoLatetDevelopment',item.businessId)">-->
<!--          <div style="width: 100%;">-->
<!--            <div style="color: #333;font-size: 16px;margin-bottom: 10px;line-height: 29px;">-->
<!--              <span class="hotInfoIndex">{{index+1}}</span> {{item.title}}-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

      <!-- 热点新闻和最新推荐 -->
      <div style="padding-top: 35px;">
        <div style="color: #2C558A;margin-top: 20px;padding-bottom: 10px;
              border-bottom: 1px solid #869bb6;font-weight: 700;">
          <div class="newsTitle" :class="titleIndex == 0?'title1':'title2'" @click="changeTitle(0)" v-if="islogin">{{$t('common.IntelligentRecommendation')}}</div>
          <div class="newsTitle" :class="islogin?titleIndex == 1?'title1':'title2':'title1'" @click="changeTitle(1)">{{$t('common.hotnews')}}</div>
        </div>
        <!--         最新推荐-->
        <div style="padding: 5px 0 0 0;"
             class="cursor"
             v-show="islogin && titleIndex == 0 "
             v-for="(item,index) in newRecommonList"
             @click="toView('realTimeInfoItemdetails',item.baseEntityId)">

          <div style="width: 100%;">
            <div style="color: #333;font-size: 16px;margin-bottom: 10px;line-height: 29px;">
              <span class="hotInfoIndex">{{index+1}}</span> {{item.title}}
            </div>
          </div>
        </div>

        <!--热点新闻-->
        <div style="padding: 5px 0 0 0;"
             class="cursor"
             v-show="!islogin || titleIndex == 1 "
             v-for="(item,index) in hotNews"
             @click="toView('realTimeInfoItemdetails',item.baseEntityId)">
          <div style="width: 100%;">
            <div style="color: #333;font-size: 16px;margin-bottom: 10px;line-height: 29px;">
              <span class="hotInfoIndex">{{index+1}}</span> {{item.title}}
            </div>
          </div>
        </div>
      </div>
      <!-- 点击排行 -->
      <div>
        <div style="color: #2C558A;margin-top: 20px;padding-bottom: 10px;
              border-bottom: 1px solid #869bb6;font-weight: 700;">
          <span class="title1 newsTitle" v-if="$i18n.locale == 'zh'">{{$t('common.ClickRank')}}</span>
          <span class="title1 newsTitle" v-if="$i18n.locale == 'en'" style="width:30%!important;">{{$t('common.ClickRank')}}</span>
          <div style="float: right;font-weight: 500;margin-top: 5px">
            <span @click="changeClikRange('1')"
                  :style="curClickType =='1'?'background-color: #0079ef;color:#fff':'background-color: white;'"
                  style="cursor: pointer;padding: 5px 8px;border-radius: 8px;">{{$t('common.infoDay')}}</span>
            <span> • </span>
            <span @click="changeClikRange('2')"
                  :style="curClickType =='2'?'background-color: #0079ef;color:#fff':'background-color: white;'"
                  style="cursor: pointer;padding: 5px 8px;border-radius: 8px;">{{$t('common.infoWeek')}}</span>
            <span> • </span>
            <span @click="changeClikRange('3')"
                  :style="curClickType =='3'?'background-color: #0079ef;color:#fff':'background-color: white;'"
                  style="cursor: pointer;padding: 5px 8px;border-radius: 8px;">{{$t('common.infoMonth')}}</span>
          </div>
        </div>
        <div style="padding: 5px 0 0 0;"
             class="cursor"
             v-for="(item,index) in hitsList"
             v-if="informationMap[item]"
             @click="toView('realTimeInfoItemdetails',informationMap[item].baseEntityId)">
          <div style="width: 100%;">
            <div style="color: #333;font-size: 16px;margin-bottom: 10px;line-height: 29px;"
                 v-if="!showMoreFlag && index < 5">
              <span class="hotInfoIndex">{{index+1}}</span> {{informationMap[item]?informationMap[item].title:''}}
            </div>
            <div style="color: #333;font-size: 16px;margin-bottom: 10px;line-height: 29px;"
                 v-if="showMoreFlag">
              <span class="hotInfoIndex">{{index+1}}</span> {{informationMap[item]?informationMap[item].title:''}}
            </div>
          </div>
        </div>
        <span style="display: block;text-align: right;color: #7d7de1;"
              class="cursor show-more dept-btn zk"
              @click="showMore()">{{!showMoreFlag?$t('common.More'):$t('common.pickUp')}}
          <i :class="!showMoreFlag?'fa fa-angle-down':'fa fa-angle-up'"></i>
        </span>
      </div>
      <!-- 资讯 -->
      <!-- <div style="position: relative;height:331px "
           v-show="$i18n.locale=='zh'">
        <img src="@/assets/img/realTimeInfo/zixun.png"
             width="100%"
             height="300px"
             style="position: absolute;left: 0;top: 0;"
             alt="">
        <div style="color: #0091FF;margin-top: 20px;padding-bottom: 10px;position: absolute;left: 0;top: 0;
              font-weight: 700;padding-left: 15px;">{{$t('common.News')}}
        </div>
        <div style="padding: 5px 0 0 15px;font-weight: normal;color: #333333;
            line-height: 26px;font-size: 14px; position: absolute;left: 0;top: 50px;"
             class="cursor">
          基于智能爬虫和自动化翻译技术，以联合国环境署、环球时报、中华人民共和国商务部等
          <span style="color: #0091FF;font-weight: 700;">1700</span>
          余个全球主要新闻资讯
          网站为数据来源，采集政治外交、经济社会、能源电力、气候环境等新闻资讯
          <span style="color: #0091FF;font-weight: 700;">150</span>
          万余条。
        </div>
        <div style="color: #0091FF;margin-top: 20px;padding-bottom: 1px;position: absolute;left: 0;top: 180px;
            margin-left: 15px;font-size: 14px;border-bottom: 1px solid #0091FF;"
             class="cursor"
             @click="openPDF(1)">
          资讯网站采集列表
        </div>
        <div style="color: #0091FF;margin-top: 20px;padding-bottom: 1px;position: absolute;left: 0;top: 210px;
            margin-left: 15px;font-size: 14px;border-bottom: 1px solid #0091FF;"
             class="cursor"
             @click="openPDF(2)">
          资讯分类
        </div>
      </div>
      <div style="position: relative;height:279px "
           v-show="$i18n.locale=='zh'">
        <img src="@/assets/img/realTimeInfo/shuju.png"
             width="100%"
             height="300px"
             style="position: absolute;left: 0;top: 0;"
             alt="">
        <div style="color: #0091FF;margin-top: 20px;padding-bottom: 10px;position: absolute;left: 0;top: 0;
              font-weight: 700;padding-left: 15px;">{{$t('common.DataInformation')}}
        </div>
        <div style="padding: 5px 0 0 15px;font-weight: normal;color: #333333;
            line-height: 26px;font-size: 14px; position: absolute;left: 0;top: 50px;"
             class="cursor">
          拓展经济社会、能源电力、气候环境、科技创新等数据采集范围，涵盖国际能源署、世界银行、非洲能源数据库、美国能源信息署等
          <span style="color: #0091FF;font-weight: 700;">13</span>
          个主要结构化数据源，采集与数据源同步更新的统计指标数据多达
          <span style="color: #0091FF;font-weight: 700;">900</span>
          余类、
          <span style="color: #0091FF;font-weight: 700;">230</span>
          亿余项。
        </div>
        <div style="color: #0091FF;margin-top: 20px;padding-bottom: 1px;position: absolute;left: 0;top: 200px;
            margin-left: 15px;font-size: 14px;border-bottom: 1px solid #0091FF;"
             class="cursor"
             @click="openPDF(3)">
          指标数据种类
        </div>
        <div style="color: #0091FF;margin-top: 20px;padding-bottom: 1px;position: absolute;left: 0;top: 230px;
            margin-left: 15px;font-size: 14px;border-bottom: 1px solid #0091FF;"
             class="cursor"
             @click="openPDF(4)">
          数据来源单位
        </div>
      </div> -->


    </div>
    <div style="clear: both;"></div>
    <!-- 分页 -->
    <div style="width: 100%;position: relative;height: 100px;">
      <el-pagination style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                     background
                     layout="prev, pager, next"
                     :total=total
                     :page-size=13
                     @current-change="handleCurrentChange"></el-pagination>
    </div>
    <el-dialog width="60%"
               :visible.sync="innerVisible1"
               append-to-body>
      <iframe v-if="$i18n.locale=='zh'"
              width="100%"
              id="embed"
              name="main"
              ref="embed1"
              height="600px"
              :src="srcPdf+'#toolbar=0'"
              frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
  import { getInformationById } from "@/api/baseUnitView";
  import { getDicts } from "@/api/dict";
  import { cmsInformationViews, getHotInformationList, topClickList, getRecommendInformationList} from "@/api/baseUnitView";
  import 'swiper/dist/idangerous.swiper.css'
  import Swiper from  'swiper/dist/idangerous.swiper.min.js'
  import {formatDate} from "@/utils/formatUtils";
  import {getLatestRecommendInfomation} from "@/api/realTimeInfo/infoJournalView";
  import {getInformationList} from "@/api/cooperation/baseCooperationUnit";

  import {getNewInternationalInformationList} from "@/api/operation/baseAdvertisement";
  export default {
    name: 'RealTimeInfoMoreInfo',
    // components:[
    //   rfSwiperSlide
    // ],
    data () {
      return {
        title: '',
        initList: [],
        hotNews: [],
        srcPdf: null,
        innerVisible1: false,
        realTimeInfo_scree: [],
        realTimeInfo_scree_zh: [],
        realTimeInfo_scree_en: [],
        messageBarFixed: false,
        initData: [],
        realTimeInfoScreenItem: 0,
        page: {
        },
        list: '',
        total: 0,
        label: '',
        hitsList: [],
        //最新推荐
        newRecommonList:[],
        scrollNewsList:[],
        curClickType: '1',
        informationMap: {},
        showMoreFlag: false,
        topClickList: {},
        titleIndex:0,
        scrollArr:[],
        isNew:[],
        scrollData:[],
        isZh:true,
        newStu:{
          stu:false
        },
        nowDate:'',
        islogin:'',
        newsActiveList:[],

      }
    },
    created () {
      this.enterpriseDetails = this.$route.params.key;
      this.getScrollList()
      if(this.$i18n.locale == 'zh'){
        this.isZh = true
      }else{
        this.isZh = false
      }

    },
    computed: {
      realTimeInfoScreeMap: function () {
        return this.realTimeInfo_scree.array2Obj('value', 'label');
      },

    },
    watch: {
      '$i18n.locale' () {
        if(this.$i18n.locale == 'zh'){
          this.isZh = true
        }else{
          this.isZh = false
        }
        this.getHotList();
        this.getHitsList();
        this.getList();
        this.getNewRecommed();
        this.getNewsActive();
        this.$nextTick(() => {
          this.getScrollList()
        });
        this.getRelevantList(1, this.page.value, this.$i18n.locale.toUpperCase())
      }
    },
    mounted () {
      this.getList1()
      this.cofLogin()
      this.$store.commit('modify', 'realTimeInfo');
      window.localStorage.setItem('router', 'realTimeInfo');
      // this.getData();
      this.getHotList();
      this.getHitsList();
      this.getList();
      this.getNewRecommed();
      this.getNewsActive();
      this.$nextTick(() => {
        this.getScrollList()
      });
      // this.getNewRecommed()
      this.getRelevantList(1, this.page.value, this.$i18n.locale.toUpperCase());
      window.addEventListener('scroll', this.handleScroll)
    },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
      openPDF (num) {
        this.innerVisible1 = true;
        if (num == 1) {
          // 资讯网站采集列表
          this.srcPdf = '/api/file/pub/def/news/news2.pdf';
        } else if (num == 2) {
          // 资讯分类
          this.srcPdf = '/api/file/pub/def/news/news3.pdf';
        } else if (num == 3) {
          // 指标数据种类
          this.srcPdf = '/api/file/pub/def/news/news1.pdf';
        } else if (num == 4) {
          // 数据来源单位
          this.srcPdf = '/api/file/pub/def/news/news4.pdf';
        }
      },
      showMore () {
        this.showMoreFlag = !this.showMoreFlag;
      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        var offsetTop = document.querySelector('.realTimeInfo_scree').offsetTop
        if (scrollTop > 400) {
          this.messageBarFixed = true;
        } else if (scrollTop < 400) {
          this.messageBarFixed = false;
        }
      },
      changeClikRange (clickType) {
        this.curClickType = clickType;
        this.hitsList = this.topClickList[this.curClickType];
      },
      async getList () {
        await getDicts(this.$i18n.locale == 'en' ? "CMS_INFORMATION_TYPE_DICT_EN" : "CMS_INFORMATION_TYPE_DICT").then((result) => {
          if (result.data) {
            this.realTimeInfo_scree = result.data[0] || [];
            let both = {
              label: 'common.LatestNews',
              value: null
            };
            this.realTimeInfo_scree.unshift(both);
            this.$forceUpdate();
          }
        });
      },
      async getList1 () {
        await getDicts('CMS_INFORMATION_TYPE_DICT','CMS_INFORMATION_TYPE_DICT_EN').then((result) => {
          if (result.data) {
            this.realTimeInfo_scree_zh = result.data[0] || [];
            let both = {
              label: 'common.LatestNews',
              value: null
            };
            this.realTimeInfo_scree_zh.unshift(both);
            this.$forceUpdate();
          }
        });
        await getDicts('CMS_INFORMATION_TYPE_DICT_EN').then((result) => {
          if (result.data) {
            this.realTimeInfo_scree_en = result.data[0] || [];
            let both = {
              label: 'common.LatestNews',
              value: null
            };
            this.realTimeInfo_scree_en.unshift(both);
            this.$forceUpdate();
          }
        });
      },
      getHotList () {
        let list = {
          pageSize: this.$i18n.locale == 'zh' ? 5 : 10,
          language: this.$i18n.locale.toUpperCase(),
          businessType: "information",
        }
        getHotInformationList(list).then(res => {
          this.hotNews = res.data.cmsInformationView;
        })
      },
      //获取最新推荐
      getNewRecommed(type){
        let list = {
          typeDict: type ? type : '',
          pageSize: this.$i18n.locale == 'zh' ? 5 : 10,
          language: this.$i18n.locale.toUpperCase(),
          businessType: "information",
        }
        if(type == 0){
          let list = {
            pageSize: this.$i18n.locale == 'zh' ? 5 : 10,
            language: this.$i18n.locale.toUpperCase(),
            businessType: "information",
          }
        }else{

        }
        getRecommendInformationList(list).then((res)=>{
          this.newRecommonList = res.data.cmsInformationView;
        })
      },
      getHitsList () {
        let list = {
          language: this.$i18n.locale.toUpperCase(),
        }
        topClickList(list).then(res => {
          var data = res.data;
          if (data) {
            this.topClickList = data.topClickList;
            this.hitsList = this.topClickList[this.curClickType];
            this.informationMap = data.informationMap;
          }
        })
      },
      getRelevantList (num, type, language, title) {
        let page = {
          typeDict: type,
          language: language,
          pageSize: 13,
          pageNo: num,
          businessType: "information",
          title: title ? title : ''
        }
        cmsInformationViews(page).then(res => {
          // this.initList= res.data.allDataList;
          if (res.data && res.data.page) {
            this.initList = res.data.page.list || [];
            this.total = res.data.page.totalCount - 0;

            var myDate = new Date();
            this.nowDate = formatDate(myDate, 'YYYY-MM-DD')
            this.initList.forEach(element => {
              element.content = element.content.replace(/<[^>]+>|&[^>]+;/g, "");
              // element.publishDate = formatDate(element.publishDate, 'YYYY-MM-DD')
              // let wtWork=this.wtWorkTaskInfo.workTaskDesc.replace(/<[^>]+>|&[^>]+;/g, "")
            });
            console.log('this.initList')
            console.log(this.initList)
          } else {
            this.initList = []
          }
        });
      },
      getData (title) {
        this.getRelevantList(1, this.page.value, this.$i18n.locale.toUpperCase(), title)
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`, val);
        this.getRelevantList(val, this.page.value, this.$i18n.locale.toUpperCase())

      },
      getImg (url) {
        return require("@/assets/img/realTimeInfo/" + url)
      },
      realTimeInfoScreensChange (i, index) {
        this.realTimeInfoScreenItem = index;
        this.page = i;
        this.label = i.value;
        // this.title='';
        // this.getRelevantList(1,i.value,this.$i18n.locale.toUpperCase())
        this.getData(this.title);
        this.getNewRecommed(this.realTimeInfoScreenItem)
      },
      getIconUrl (url) {
        if (url == this.realTimeInfoScreenItem) {
          return require("@/assets/img/realTimeInfo/tag/" + 'mouse' + url + 'Click.png')
        } else {
          return require("@/assets/img/realTimeInfo/tag/" + 'mouse' + url + '.png');
        }
      },
      toView (router, json) {
        this.$store.commit('modify', router);
        window.localStorage.setItem('router', router);
        // this.$router.push({name:router,query:json})
        const { href } = this.$router.resolve({
          name: router,
          query: {
            key: json
          }
        });
        window.open(href, '_blank');
      },
      screenBack (data) {
        console.log(data, 'screenBackscreenBackscreenBackscreenBack')
      },
      screen (i) {
        this.index = i
      },
      getInformation (num) {
        this.informationsClass = num
      },
      //切换推荐和热点新闻
      changeTitle(i){
        this.titleIndex =i;
      },

      // //获取滚动快讯数据
      // getScrollData(){
      //   let page = {
      //     typeDict: type,
      //     language: language,
      //     pageSize: 13,
      //     pageNo: num,
      //     businessType: "information",
      //     title: title ? title : ''
      //   }
      //   cmsInformationViews(page).then(res => {
      //     this.scrollData = res.data.data.allDataList;
      //   })
      // },
      //滚动快讯
      async getScrollList(){ //created中调用
        let _this = this;

        let params = {
          language: this.$i18n.locale.toLocaleUpperCase(),
          pageSize: 5,
          pageNo: 1,
          businessType: "information",
          title:''
        }
        await cmsInformationViews(params).then(res => {
          this.scrollNewsList = res.data.allDataList;
          this.scrollLength = this.scrollNewsList.length;
        })

        this.$nextTick(function () {
          if (this.scrollLength > 0) {
            if (this.scrollLength == 1) {
              this.isAutoplay = 0;
              this.isLoop = false;
            } else {
              this.isAutoplay = 1;
              this.isLoop = true;
            }

            var mySwiper = new Swiper('.swiper-banner', {
              //滚动方向
              mode: 'vertical',
              autoplay: 5000,
              loop: this.isLoop,
              speed: 300,
              autoplayDisableOnInteraction: false,
              preventLinksPropagation: true,
              observer: true,
              observeParents: false,
              eventTarget: 'container',
              preventLinks: false,
              updateOnImagesReady: true,

            })

            //点击swiper跳转到详情
            $('.swiper-slide').click(function () {
              let dataindex1 = mySwiper.activeLoopIndex;
              let dataindex2 = mySwiper.activeIndex;
              let str = mySwiper.slides[dataindex2].innerText;
              var index=str.lastIndexOf("\n");
              str=str.substring(index+1,str.length);
              let id = '';
              _this.scrollNewsList.forEach(item =>{
                if(item.title == str){
                  id = item.baseEntityId
                }
              });
              _this.toView('realTimeInfoItemdetails', id)
            })
          }
        })


      },
      cofLogin(){
        if (!this.$Cookies.get('token')){
          this.islogin = false;

        }else {
          this.islogin = true;
        }
      },

      getNewsActive(){
        let params = {
          pageSize:5,
          language:this.$i18n.locale.toUpperCase(),
          businessType:'information',
        };
        getNewInternationalInformationList(params).then(res=>{
          this.newsActiveList = res.data.InternationalInformationInfo || []
        })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box {
    margin-top: 10px;
    background: #fff;
    /* height: 500px; */
    padding: 20px 0;
  }
  .crumbs {
    margin-left: 20px;
  }
  .message {
    width: 188px;
    float: left;
    margin-top: 108px;
  }
  body {
    margin: 0;
  }
  .swipers {
    position: absolute;
    top: 30px;
    left: 100px;
    width: 460px;
    height: 390px;
  }
  .isFixed {
    width: 188px;
    position: fixed;
    top: 0;
    z-index: 999;
  }
  /* .notFixed{
        position: absolute;

      } */
  .details {
    position: absolute;
    top: 30px;
    left: 600px;
    width: 460px;
    height: 390px;
  }
  .swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .swiper-slide {
    background-size: cover;
    background-position: center;
  }
  .gallery-top {
    height: 80%;
    width: 100%;
  }
  .gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
  }
  .gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
  }
  .initData_label {
    color: #6c8c9d;
    font-weight: 700;
    font-size: 18px;
    line-height: 42px;
  }
  .enterprise_style {
    line-height: 40px;
    color: #6c819d;
    /* padding-left: 100px; */
    font-size: 18px;
    /* font-weight: 700; */
    margin-top: 5px;
    margin-left: 100px;
    border-bottom: 1px solid #95d13e;
  }
  .enterprise_style_span {
    padding: 10px;
    text-align: center;
    height: 100%;
    background: #95d13e;
    color: #fff;
    /* border-bottom: 2px solid #6699ff; */
  }
  .enterprise_style_product tr {
    line-height: 30px;
    width: 100%;
    display: inline-block;
    border-bottom: 1px dashed #ccc;
    font-size: 14px;
    color: #6c819d;
    margin-bottom: 5px;
  }
  .recommend {
    margin-top: 15px;
    margin-left: 100px;
  }
  .recommend li {
    display: inline-block;
    width: 170px;
    /* height: 130px; */
    text-align: center;
    margin-right: 15px;
  }
  .information1 {
    display: inline-block;
    width: 123px;
    height: 100%;
    border: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
    background: #f9f9f9;
    color: #999;
  }
  .information2 {
    display: inline-block;
    width: 123px;
    height: 100%;
    border-top: 3px solid #2c5589;
    text-align: center;
    color: #2c5589;
  }
  .information1:hover {
    color: #ff0036;
  }
  .realTimeInfo_scree .span1,
  .realTimeInfo_scree .span2 {
    /* padding: 0 10px; */
    font-size: 20px;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    /* background: #385386; */
    /* margin-right: 30px; */
    width: 100%;
    /* text-align: center;*/
    color: #0079ef;
    border: 1px solid #d8d8d8;
  }
  .realTimeInfo_scree li:nth-of-type(1) {
    background: #385386;
    color: #fff;
  }
  .realTimeInfo_scree .span2 {
    background: #fff;
    color: #666;
  }
  .realTimeInfo_scree .span1 {
    border-radius: 6px !important;
  }
  .serch >>> .el-input__inner {
    border: 1px solid #4f84ba;
  }
  .serch >>> .el-button {
    background: #4f84ba;
    border: 1px solid #4f84ba;
    border-left: none;
    border-radius: 0;
    color: #fff;
  }
  .mouseItemImg:hover {
    transform: scale(1.5);
    /* transition-timing-function:cubic-bezier(0.75,0,0.125,1); */
    transition: all 0.5s;
  }
  .hotInfoIndex {
    width: 20px;
    height: 19px;
    background: #d00;
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    color: #fff;
    line-height: 19px;
    position: relative;
    font-style: normal;
  }
  .ScrollExpress{
    position: absolute;
    bottom: 5px;
    left: 90px;
    width: 80%;
    height: 30px;
    line-height: 30px;
    background: #F5F5F6;
    border-radius: 15px;
    font-size: 15px;

  }

  .newsScroll{
    width: 80%;
    height: 100%;
    display: inline-block;
    overflow-y: scroll;
    /*overflow: scroll;*/
  }

  .express{
    margin-left: 24px;
    display: inline-block;
  }
  .type{
    /*display: inline-block;*/
    margin-left: 20px;
    border: 1px solid #286FCF;
    box-sizing: border-box;
    line-height: 16px;
    text-align: center;
    color: #286FCF;
    padding: 1px 2px;
    font-size: 16px;
    float: left;
    margin-top: 5px;
  }
  .news{
    display: inline-block;
    margin-left: 20px;
    color: #666;
  }
  .newsTitle{
    display: inline-block;
    width: 46%;
    padding: 0 5px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .title1{
    background: #286FCF;
    color: #fff;
  }
  .title2{
    background: #E9EEF2;
    color:#286FCF;
  }
  .red {
    　　color: red;
  }

  .scrollBox2 {
    width: 88%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background:  #F5F5F6;
    color: #666;
    /*border-radius: 50px;*/
    font-size: 18px;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.80);
    overflow: hidden;
    position: absolute;
    left: 150px;
    top:0;
    /*text-align: left;*/
    z-index: 1;
  }
  .scrollBox1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background:  #F5F5F6;
    color: #666;
    /*border-radius: 50px;*/
    font-size: 18px;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.80);
    overflow: hidden;
    position: absolute;
    left: 95px;
    top:0;
    /*text-align: left;*/
    z-index: 1;
  }


  .text1{
    width: 75%;
    height: 20px;
    /*display: inline-block;*/
    margin: 5px 0 0 10px;
    overflow: hidden;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    float: left;
  }
  .text2{
    width: 60%;
    height: 20px;
    /*display: inline-block;*/
    margin: 5px 0 0 10px;
    overflow: hidden;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    float: left;
  }

  .srollHead {
    width: 18px;
    height:18px;
    border-radius: 50%;
  }

  .scrollName {
    width:100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 .05rem;
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: all 1.5s linear;
  }

  .slide-enter {
    transform: translateY(42px);
  }

  .slide-leave-to {
    transform: translateY(-42px);
  }

  .swiper-wrapper {
    font-size:16px;
  }

  .swiper-container-autoheight,
  .swiper-container-autoheight .swiper-slide {
    font-size: 0;
    position: relative;
  }

  .swiper_vertical {
    width: 100% !important;
    height: 100%;
    /*display: flex;*/
  }
  .swiper-wrapper-vertical {
    /*transition-timing-function: linear !important;*/
    transition-timing-function:cubic-bezier(0, 0.77, 0.58, 1) !important;;

  }
  .isnewdata{
    display: inline-block;
    margin-right: 10px;
    border: 1px solid red;
    padding: 0 5px;
    border-radius: 10px;
    color: red;
    font-size: 13px;
    text-align: center;
    height: 15px;
    float: right;

  }
  .newLine1{
    line-height: 13px;
  }
  .newLine2{
    line-height: 14px;
  }
</style>