dev/dcp-web-gate/src_old/views/realTimeInfo/RealTimeInfoMoreInfo1.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" :key="index"
                    :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,'MM-DD')}}</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-else :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,'MM-DD')}}</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" :key="index" @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;border-bottom: 1px solid #869bb6;font-weight: 700;padding-bottom: 10px">
                    <div class="newsTitle title1" @click="changeTitle(0)">{{$t('common.LatestDevelopment')}}</div>
                </div>
                <!--最新动态-->
                <div style="padding: 5px 0 0 0;" class="cursor" v-for="(item,index) in newsActiveList" :key="index"
                    @click="toView('realTimeInfoLatetDevelopment',item.id)">
                    <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;">
                    <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" :key="index"
                    @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" :key="index" @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" :key="index" 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 { 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 {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
                    this.getHotList();
                this.getHitsList();
                this.getList();
                this.getNewRecommed();
                this.getNewsActive();
                this.$nextTick(() => {
                    this.getScrollList()
                });
                this.getRelevantList(1, this.page.value, this.$i18n.locale.toUpperCase())
                }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] || [];
                      if (this.realTimeInfo_scree.length >= 10){
                        this.realTimeInfo_scree.pop();
                      }
                        // console.log("realTimeInfo_scree长度是：：：：：{}",this.realTimeInfo_scree.length)
                        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] || [];
                        if (this.realTimeInfo_scree_zh.length >= 10){
                          this.realTimeInfo_scree_zh.pop();
                        }
                    //   console.log("realTimeInfo_scree_zhdededededed长度是：：：：：{}",this.realTimeInfo_scree_zh.length)
                        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] || [];
                      if (this.realTimeInfo_scree_en.length >= 10){
                        this.realTimeInfo_scree_en.pop();
                      }
                    //   console.log("realTimeInfo_scree_endsadsadasdsadasdasdsadad：：：：：{}",this.realTimeInfo_scree_en.length)
                        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",
                }
                // console.log("hotNews")
                getHotInformationList(list).then(res => {
                    // console.log(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)
                    } 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) {
                console.log('-------->父页面',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');
                window.open(href);
            },
            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(),

                };
                getNewInternationalInformationList(params).then(res=>{
                    this.newsActiveList = res.data.InternationalInformationInfo || []
                    // console.log(this.)
                })
            },
        }
    }
</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>