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

<template>
    <div class="autoBox box">
        <div class="weeklyContent">
            <div>
                <img v-if="$i18n.locale == 'zh'" src="@/assets/img/realTimeInfo/weeklyzh.png" alt="" style="width: 100%;height: 110px">
                <img v-else src="@/assets/img/realTimeInfo/weeklyen.png" alt="" style="width: 100%;height: 110px">
            </div>
            <div class="pageTurn">
                <div class="pagequery">
                    <div class="pageQu">
                        <div style="float: left">{{$t('common.InfoClass')}}：</div>
                        <el-select v-model="classSelect" :placeholder="$t('common.PleaseSelect')">
                            <el-option
                                v-for="item in options"
                                :key="item.dictName"
                                :value="item.value"
                                :label="item.dictName"
                                >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="pageQu">
                        <div style="float: left">{{$t('common.SearchIssue')}}：</div>
                        <el-input v-model="issue" :placeholder="$t('common.Enterperiodnumber')"></el-input>
                    </div>
                    <el-button class="queryBtn" @click="queryData">{{$t('common.WeeklySerch')}}</el-button>
                </div>
                <div class="pageTitle" v-if="isShow">
                    <div style="display: inline-block;font-weight: 600">
                        <span>{{currentTitle}}</span>
<!--                        <span v-if="$i18n.locale == 'zh'">{{data[0]}}年{{data[1]}}月{{data[2]}}日</span>-->
<!--                        <span v-if="$i18n.locale == 'en'">{{data[1]}}/{{data[2]}}/{{data[0]}}</span>-->
<!--                        <div v-if="$i18n.locale == 'zh'" style="display: inline-block;margin: 0 10px">第<span style="color: red">{{currentPer}}</span>期</div>-->
<!--                        <div v-if="$i18n.locale == 'en'" style="display: inline-block;margin: 0 10px"> Order by <span style="color: red">{{currentPer}}</span></div>-->
<!--                        <div v-if="$i18n.locale == 'zh'" style="display: inline-block">总<span>{{totalPri}}</span>期</div>-->
<!--                        <div v-if="$i18n.locale == 'en'" style="display: inline-block">total of <span>{{totalPri}}</span> period</div>-->
                    </div>
                    <div class="upAndDownload" v-if="isShow">
                        <div class="pageBtn" @click="upPage">
                            {{$t('common.PreviousArticle')}}
                        </div>
                        <div class="pageBtn" @click="downPage">
                            {{$t('common.NextArticle')}}
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
            <div class="content">
                <div class="leftList">
                    <div class="weekgei" v-if="isweekly">
                        <div class="weeklyBox">
                            <i class="el-icon-document-copy"></i>
                            {{$t('common.GEIWeekly')}}
                        </div>
                        <div v-if="total1 == '0'" style="margin: 30px auto;text-align: center">
                            {{$t('common.NoData')}}
                        </div>
                        <div v-if="total1 != '0'">
                            <div class="GEIlist" v-for="(weeklyItem,weeklyIndex) in weeklyList" @click="showGEIdetail(weeklyItem)">
                                <img v-if="$i18n.locale == 'zh' && !weeklyItem.pictureUrl" src="@/assets/img/realTimeInfo/weeklyBackzh.png" alt="" style="width: 100%;height: 100%">
                                <img  v-if="$i18n.locale == 'en' && !weeklyItem.pictureUrl" src="@/assets/img/realTimeInfo/weeklyBacken.png" alt="" style="width: 100%;height: 100%">
                                <img v-if="weeklyItem.pictureUrl" :src="'api/file/pub/' + weeklyItem.pictureUrl" alt="" style="width: 100%;height: 100%">
                                <div class="newTip">
                                    <span>new</span>
                                </div>
                                <div class="GEItext">
                                    {{weeklyItem.name}}
                                </div>
                            </div>
                        </div>
                        <div class="pagination" v-if="total1 != '0'">
                            <el-pagination
                                    @current-change="handleCurrentChange1"
                                    :page-size="4"
                                    layout="prev, pager, next, jumper"
                                    :total="total1">
                            </el-pagination>
                        </div>

                    </div>
                    <div class="weekgei" v-if="isvision">
                        <div class="weeklyBox">
                            <i class="el-icon-document-copy"></i>
                           {{$t('common.GEIVision')}}
                        </div>
                        <div v-if="total2 == '0'" style="margin: 30px auto;text-align: center">
                            {{$t('common.NoData')}}
                        </div>
                        <div v-if="total2 != '0'">
                            <div class="GEIlist" v-for="(geiItem,geiIndex) in visionList" @click="showGEIdetail(geiItem)">
                                <img v-if="$i18n.locale == 'zh' && !geiItem.pictureUrl" src="@/assets/img/realTimeInfo/weeklyBackzh.png" alt="" style="width: 100%;height: 100%">
                                <img  v-if="$i18n.locale == 'en' && !geiItem.pictureUrl" src="@/assets/img/realTimeInfo/weeklyBacken.png" alt="" style="width: 100%;height: 100%">
                                <img v-if="geiItem.pictureUrl" :src="'api/file/pub/' + geiItem.pictureUrl" alt="" style="width: 100%;height: 100%">
                                <div class="newTip">
                                    <span>new</span>
                                </div>
                                <div class="GEItext">
                                    {{geiItem.name}}
                                </div>
                            </div>
                        </div>
                        <div class="pagination" v-if="total2 != '0'">
                            <el-pagination
                                    @current-change="handleCurrentChange2"
                                    :page-size="4"
                                    layout="prev, pager, next, jumper"
                                    :total="total2">
                            </el-pagination>
                        </div>
                    </div>
                </div>
                <div class="rightBox">
                    <iframe v-if="pdfSrc" id="iframe_id" width="100%"  height="100%" :src="pdfSrc + '#toolbar=0'" frameborder="0"></iframe>
                    <div v-if="!pdfSrc" style="text-align: center;margin: 50px 0">{{$t('common.NoData')}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {geiWeeklyReportViews, getGeiWeeklyReportByButton, weeklyClassificationEntitys} from '@/api/operation/baseAdvertisement'
    import {sysAttachmentInfos} from "../../api/cooperation/baseCooperationUnit";

    export default {
        name:'RealTimeInfoGEIWeekly',
        data(){
            return {
                data:'',
                options: [],
                classSelect: '',
                issue:'',
                GEIlist:[],
                currentPage:1,
                currentId:'',
                currentPic:'',
                inputPage:1,
                pageTotal:'',
                totalPri:'',
                currentPer:'',
                pdfSrc:null,
                showPdfDeta:{},
                isShow:true,
                currentTitle:'',
                currentDerails:{},
                weeklyList:[],
                visionList:[],
                isweekly:true,
                isvision:true,
                total1:'',
                total2:'',

            }
        },
        mounted() {
            // this.getGeiData();
            this.getDict()
        },
        watch:{
          '$i18n.locale'(){
              // this.getGeiData()
              this.getDict()
          }
        },
        methods:{
            iniTime(temTime){
                temTime = this.formatDate(temTime);
                temTime = temTime.split('-');
                this.data = temTime;
            },
            upPage(){
                let that = this;
                let list = that.currentDerails;
                console.log('that.currentDerails')
                console.log(that.currentDerails.typeDict)
                let params = {
                    periodNumber:list.period,
                    typeDict:list.typeDict,
                    buttonType:'previous',
                    languageDict:this.$i18n.locale.toUpperCase()
                }
                getGeiWeeklyReportByButton(params).then(res=>{
                    if( res.data.geiWeeklyReportViews){
                        let data = res.data.geiWeeklyReportViews[0];
                        that.currentDerails = data;
                        that.currentTitle = data.name;
                        that.getData(data.id)
                    }else{
                        if(this.$i18n.locale == 'zh'){
                            this.$message({
                                message: res.data,
                                type: "warring",
                            });
                        }else{
                            this.$message({
                                message:'NoData',
                                type: "warring",
                            });
                        }
                    }
                })
            },
            downPage(){
                let that = this;
                let list = that.currentDerails;
                console.log('that.currentDerails')
                console.log(that.currentDerails.typeDict)
                let params = {
                    periodNumber:list.period,
                    typeDict:list.typeDict,
                    buttonType:'next',
                    languageDict:this.$i18n.locale.toUpperCase()
                }
                getGeiWeeklyReportByButton(params).then(res=>{
                    if( res.data.geiWeeklyReportViews){
                        let data = res.data.geiWeeklyReportViews[0];
                        that.currentTitle = data.name;
                        that.currentDerails = data
                        that.getData(data.id)
                    }else{
                        if(this.$i18n.locale == 'zh'){
                            this.$message({
                                message: res.data,
                                type: "warring",
                            });
                        }else{
                            this.$message({
                                message:'NoData',
                                type: "warring",
                            });
                        }
                    }

                })
            },
            showGEIdetail(item){
                this.currentDerails = item;
                this.current = item.id;
                this.currentPer = item.period;
                this.currentTitle = item.name;
                this.iniTime(item.createDate);
                this.getData(item.id);
            },
            handleCurrentChangeLeft() {
                const that = this;
                if (that.currentPage>1){
                    --that.currentPage
                    --that.inputPage
                }
                this.getData(that.current)
            },
            inputPageChange(){
                if(0<this.inputPage-0<this.fileVisiblePages-0){
                    this.currentPage = this.inputPage-0;
                }else{
                    this.inputPage = this.currentPage+'';
                }
            },
            handleCurrentChangeRight(){
                const that = this;
                if (that.currentPage<that.pageTotal){
                    ++that.currentPage
                    ++that.inputPage
                }
                this.getData(that.current)
            },
            queryData(){
                let period = this.issue;
                if(this.classSelect == 'eef06c88a06d11ec99100894ef7fd169'){
                    this.isweekly = true;
                    this.isvision = false;
                }else if(this.classSelect == 'f6a6d6afa06d11ec99100894ef7fd169'){
                    this.isweekly = false;
                    this.isvision = true;
                }else{
                    this.isweekly = true;
                    this.isvision = true;
                }
                this.getDict(period)
            },
            getData(id){
                const that =this;
                let list={
                    attachmentBusinessId:id,
                    attachmentBusinessType:'gei_weekly_report'
                };
                sysAttachmentInfos(list).then((res)=>{
                    if(res.data.attachmentInfos){
                        that.showPdfDeta = res.data.attachmentInfos[0] || {};
                            that.pdfSrc = 'api/file/pub/' + that.showPdfDeta.attachmentSavePath;
                    }else{
                        that.pdfSrc = ''
                    }
                });

            },
            getDict(period,pageno1,pageno2){
                pageno1 = pageno1? pageno1 : '1';
                pageno2 = pageno2? pageno2 : '1';
                weeklyClassificationEntitys().then(res=>{
                    let data = res.data.weeklyClassificationEntitys || [];
                    if(data){
                        data.forEach(item=>{
                            if(item.categoryName === 'GEI周报'){
                                this.getweeklylist(item.id,period,pageno1)
                            }else if(item.categoryName === 'GEI视野'){
                                this.getVisionlist(item.id,period,pageno2)
                            }
                        })
                    }else{
                        if(this.$i18n.locale == 'zh'){
                            this.$message({
                                message: '暂无数据',
                                type: "warring",
                            });
                        }else{
                            this.$message({
                                message:'NoData',
                                type: "warring",
                            });
                        }
                    }
                })
            },
            getweeklylist(type,period,pageno){
                let that = this;
                this.options = [];
                let param = {};
                if(period){
                    param = {
                        typeDict:type,
                        typeLanguage:that.$i18n.locale.toUpperCase(),
                        pageNo:pageno,
                        pageSize:4,
                        period:period
                    }
                }else{
                    param = {
                        typeDict:type,
                        typeLanguage:that.$i18n.locale.toUpperCase(),
                        pageNo:pageno,
                        pageSize:4
                    }
                }
                geiWeeklyReportViews(param).then(res=>{
                    if(res.data.geiWeeklyReportViews){
                        that.isShow = true;
                        that.weeklyList = res.data.geiWeeklyReportViews;
                        if(that.isweekly){
                            let time = that.weeklyList[0].createDate;
                            that.iniTime(time);
                            that.currentDerails = that.weeklyList[0];
                            that.current = that.weeklyList[0].id;
                            that.currentTitle = that.weeklyList[0].name;
                            that.currentPer = that.weeklyList[0].period;
                            that.currentDerails = that.weeklyList[0];
                            that.totalPri = Number(res.data.total);
                            that.getData(that.current)
                        }
                    }else{
                        console.log(that.isweekly)
                        if(that.isweekly){
                            that.currentPic = '';
                            that.pdfSrc = '';
                            that.classSelect = '';
                            that.currentTitle = '';
                            that.isShow = false;
                            if(that.$i18n.locale == 'zh'){
                                that.$message({
                                    message: 'GEI周报暂无数据',
                                    type: "warring",
                                });
                            }else{
                                that.$message({
                                    message:'GEI Weekly No Data',
                                    type: "warring",
                                });
                            }
                        }
                        that.weeklyList = [];

                    }
                    if(that.isweekly){
                        if( res.data.dict){
                            let dictTem = res.data.dict;
                            dictTem.forEach(item=>{
                                if(item.dictName){
                                    that.options.push(item)
                                }
                            })
                        }else{
                            that.options = [];
                            that.classSelect = '';
                        }
                    }
                    if(res.data.page){
                        let page = res.data.page;
                        that.total1 = Number(page.totalCount)
                    }else{
                        that.total1 = '0'
                    }

                })
            },
            getVisionlist(type,period,pageno){
                let that = this;
                let param = {}
                if(period){
                    param = {
                        typeDict:type,
                        typeLanguage:that.$i18n.locale.toUpperCase(),
                        pageNo:pageno,
                        pageSize:4,
                        period:period
                    }
                }else{
                    param = {
                        typeDict:type,
                        typeLanguage:that.$i18n.locale.toUpperCase(),
                        pageNo:pageno,
                        pageSize:4
                    }
                }
                geiWeeklyReportViews(param).then(res=>{
                    if(res.data.geiWeeklyReportViews){
                        that.isShow = true;
                        that.visionList = res.data.geiWeeklyReportViews
                        if(!that.isweekly){
                            let time = that.visionList[0].createDate;
                            that.iniTime(time);
                            that.currentDerails = that.visionList[0];
                            that.current = that.visionList[0].id;
                            that.currentTitle = that.visionList[0].name;
                            that.currentPer = that.visionList[0].period;
                            that.currentDerails = that.visionList[0];
                            that.totalPri = Number(res.data.total);
                            that.getData(that.current)
                        }
                    }else{
                        console.log(that.isweekly)
                        if(!that.isweekly){
                            that.currentPic = '';
                            that.pdfSrc = '';
                            that.classSelect = '';
                            that.isShow = false;
                            that.currentTitle = '';
                            if(that.$i18n.locale == 'zh'){
                                that.$message({
                                    message: 'GEI视野报暂无数据',
                                    type: "warring",
                                });
                            }else{
                                that.$message({
                                    message:'GEI Vision No Data',
                                    type: "warring",
                                });
                            }
                        }
                        that.visionList = []

                    }
                    if(!that.isweekly){
                        if( res.data.dict){
                            let dictTem = res.data.dict;
                            dictTem.forEach(item=>{
                                if(item.dictName){
                                    that.options.push(item)
                                }
                            })
                        }else{
                            that.options = [];
                            that.classSelect = '';
                        }
                    }
                    if(res.data.page){
                        let page = res.data.page;
                        that.total2 = Number(page.totalCount)
                    }else{
                        that.total2 = '0'
                    }
                })
            },
            handleCurrentChange1(val) {
                console.log(`当前页: ${val}`);
                this.getDict('',val)
            },
            handleCurrentChange2(val) {
                console.log(`当前页: ${val}`);
                this.getDict('','',val)
            },
        }
    }
</script>

<style scoped>
    .weeklyContent{
        padding: 20px;
    }
    .pageTurn{
        padding: 0 10px;
        height: 62px;
        line-height: 62px;
        background: #e8eef5;
        margin: 20px 0;
    }
    .pageTitle{
        text-align: center;
    }
    .upAndDownload{
        float: right;
    }
    .pageBtn{
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }
    .pagequery{
       float: left;
    }
    .pageQu{
       float: left;
        margin-right: 20px;
    }
    >>>.el-input__inner{
        width: 100px!important;
        height: 30px;
    }
    >>>.el-input{
        width: 100px!important;
    }
    .content{
        padding: 0 10px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 50px;
    }
    .leftList{
        width: 33%;
        border-right: 1px solid #ccc;
        /*display: flex;*/
        /*justify-content: space-between;*/
        /*flex-wrap: wrap;*/
    }
    .GEIlist{
        width: 43%;
        border: 1px solid #ccc;
        height: 210px;
        margin: 0 10px;
        margin-top: 20px;
        cursor: pointer;
        position: relative;
        display: inline-block;
    }
    .newTip{
        position: absolute;
        top: 0;
        background-image: linear-gradient(#ff817b,#ff4443);
        color: #fff;
        padding: 2px 15px 5px 10px;
        border-bottom-right-radius: 50px;
    }
    .GEItext{
        position: absolute;
        bottom: 0;
        color: #fff;
       width: 100%;
        text-align: center;
    }
    .rightBox{
        width: 64%;
        /*height: 700px;*/
        border: 1px solid #ccc;
        position: relative;
    }
    /deep/::-webkit-scrollbar {
        width: 4px!important;
    }
    .bottomPage{
        display: inline-block;
        width:154px;
        height: 50px;
        text-align: center;
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translate(-50%,0);
    }
    .bottomPage .rightBtn{
        display: inline-block;
        width: 32px;
        height: 32px;
        background-color: white;
        border: 1px solid #ddd;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .bottomPage button:active{
        border-color: #0ab8ed;
        outline: 1px solid #0ab8ed;
    }
    .bottomPage button:focus{
        border-color: #0ab8ed;
        outline: 1px solid #0ab8ed;
    }
    .bottomPage input:focus{
        outline: none;
        border:none;
        box-shadow: none;
    }
    .queryBtn{
        height: 30px;
        margin-top: 18px;
        line-height: 5px;
        background: #0ab8ed;
        color: #fff;
        cursor: pointer;
    }
    .weekgei{
        width: 95%;
        margin: 0 auto 20px;

    }
    .weeklyBox{
        height: 30px;
        color: #fff;
        line-height: 30px;
        background: #134d96;
        font-size: 16px;
        padding-left: 10px;
    }
    .pagination{
        width: 100%;
        margin-top: 10px;
    }
    /deep/.el-pagination__editor.el-input {
        width: 50px!important;
    }
    /deep/.el-pagination__editor.el-input .el-input__inner {
        width: 50px!important;
    }
</style>