dev/dcp-web-gate/src_old/views/NationalregionalCommissions/NationalregionalCommissionsDevelopments.vue

<template>
    <div>
        <div class="autoBox box">
            <div style="margin-left: 20px;">
                <el-breadcrumb separator="/" style="float: left;margin-left:15px; ">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$t('common.NationalregionalCommissions')}}</el-breadcrumb-item>
                    <el-breadcrumb-item >{{Screens}}</el-breadcrumb-item>
                    <el-breadcrumb-item >{{$t('common.DynamicsInfo')}}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0" >
                  <span class="cursor" :class="screenIndex==index?'screen1':'screen2'" @click="realTimeInfoScreen(item,index)"
                   v-for="(item,index) in realTimeInfoScreens"> &nbsp;&nbsp;{{item.lable}} &nbsp;&nbsp;<span v-if="index+1!==realTimeInfoScreens.length">/</span></span>
                </el-breadcrumb>
            </div>
            <div style="margin-top: 30px;width: 100%;height: 260px;margin-left: 20px;">
                <div style="float: left;width: 55%;height: 100%;">
                   
                    <img :src="'api/file/pub/' " alt=""
                         style=" width:100%;height:260px;" >
                </div>
                <div style="float: left;width: 42%;height: 100%;position: relative;">
                    <!-- <span style="position: absolute;top: 0;right: 0;font-size: 14px;
                    color: #0000ff;cursor: pointer;">分享</span> -->
                    <div style="margin-top: 20px;width: 100%;">
                        <div style="line-height: 25px;text-align: left;margin-left: 50px;
                        font-weight: 700;">
                           2019全球能源互联网暨中-非能源电力大会
                        </div>
                        <div style="width: 100%;line-height: 45px;font-size: 14px;">
                            <span style="margin-left: 50px;margin-right: 15px;">
                                {{$t('common.place')}}：中国-北京 
                            </span>
                            <span>
                                {{$t('common.line')}}：
                                2020-07-21 至2020-07-23 
                            </span>
                            <span v-if="ifcommon"  @click="follow()"  style="margin-left: 30px; color: #66b1ff;cursor:pointer;" >
                                <i class = "el-icon-star-off"></i>
                               {{$t('common.Concerned')}}
                            </span>
                            <span v-else  @click="follow()" style="margin-left: 30px;cursor:pointer;" >
                                <i class = "el-icon-star-off"></i>
                               {{$t('common.follow')}}
                            </span>
                            
                            <div style="width: 80%;font-size: 14px;height: 75px;
                            -webkit-box-orient: vertical;
                            position:relative;
                            line-height:1.4em;
                            overflow: hidden;
                            height:3.9em;
                            color: #666666;margin-left: 50px;line-height: 25px;margin-top: -10px;" class="plateCountry">
                                为加快全球能源互联网发展，推动“中国倡议”落地非洲，深化中非能源电力合作，合作组织与有关方面联合举办2019全球能源互联网暨中-非能源电力大会，围绕“全球能源互联网——绿色低碳可持续发展之路”和“非洲能源互联网——非洲发展新动能”两大主题开展交流研讨，发布《刚果河流域水电开发与外送研究》《构建...
                            </div>
                            <div style="font-size: 14px;height: 40px;text-align: center;margin-top: 20px;">
                                <el-button type="primary"
                                           round
                                           style="width: 76px;height: 24px;line-height: 4px"
                                           @click="signUp">
                                    报名
                                </el-button>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin: 10px 20px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                活动概述
            </div>
            <div style="margin: 10px 20px;">
                asdsad
            </div>

            <div style="margin: 10px 20px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                活动专家介绍
            </div>
            <div style="margin: 10px 20px;">
                asdsad
            </div>

            <div style="margin: 10px 20px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                活动亮点
            </div>
            <div style="margin: 10px 20px;">
                asdsad
            </div>

            <div style="margin: 10px 20px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                活动议程
            </div>
            <div style="margin: 10px 20px;">
                asdsad
            </div>
            <div style="margin: 10px 20px;border-bottom: 1px solid #5eb2fe;height: 30px;">
                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" 
                style="height: 20px;vertical-align: middle;">
                附件
            </div>
            <div v-for="(item,index) in dataList" class="List">
                <img v-if="state==1" :src="'./api/file/pub/${item.attachmentSavePath}'"  alt="" style="width: 20%;height: 20%;" />
                <img v-if="state==2" src="@/assets/img/cooperationExchange/txt.png"  alt="" class="Messicon" />
                <img v-if="state==3" src="@/assets/img/cooperationExchange/excel.png"  alt="" class="Messicon" />
                <img v-if="state==6" src="@/assets/img/cooperationExchange/powerpoint.png"  alt="" class="Messicon"/>
                <img v-if="state==5" src="@/assets/img/cooperationExchange/pdf.png"  alt="" class="Messicon"/>
                <img v-if="state==4" src="@/assets/img/cooperationExchange/word.png"  alt="" class="Messicon"/>
                <p style="display: inline-block;margin-right:150px">{{item.attachmentName}}</p>
               
                    <a class="func example" @click="downloads(item.attachmentSavePath,item.attachmentName)">{{$t('common.download')}}</a>
                    <a class="func" @click="download(item.attachmentSavePath)">{{$t('common.preview')}}</a> 
              
                
            </div>
        </div>
    </div>
</template>

<script>
    import {countryZh, countryEn,getList} from '@/api/country'
    import {activityInfos, countryNationalSpace} from '@/api/cooperation/baseCooperationUnit'
    import GlobalRoaming from "@/components/GlobalRoaming";
    import { saveActivityOrUpdate, getApproverId } from "@/api/meeting/meetingApply";
    import {sysAttachmentInfos} from '@/api/cooperation/baseCooperationUnit'
    import {getToken, resetToken} from "@/utils/auth";
    import {saveFollowModel} from "@/api/operation/basePortalModelFollowInfo";
    import {getFollowModeNumlByModelIdAndUserId} from "@/api/operation/basePortalModelFollowInfo";

    import Base from "@/views/base/Base";
    export default {
        name: 'NationalregionalCommissionsDevelopments',
        extends: Base,

        data() {
            return {
                index: 1,
                projectList:[],
                i: '0',
                id: this.$route.query.key,
                language:'',
                Screens:"委员会简介",
                realTimeInfoScreens:[{
                    lable:"委员会简介",
                    value:'0'
                },{
                    lable:"委员会布局",
                    value:'1'
                },{
                    lable:"委员会活动",
                    value:'2'
                }],
                state:2,
                dataList:[{
                    attachmentName:'XXX研究院研究成果汇报.PDF'
                },{
                    attachmentName:'XXX研究院研究成果汇报.PDF'
                },{
                    attachmentName:'XXX研究院研究成果汇报.PDF'
                }]
            }
        },
        watch: {
            "$i18n.locale"() {
                this.getBaseList();// 获取企业报名信息
                this.getInitData();
            },
            "toViewLogin"(){
                if(this.toViewLogin==true){
                this.loginTipsChange()
                }
            },
        },
        computed:{
          
        },
        mounted() {
            
         

        },
        methods: {
            selectBlur(e) {
                
              
            },
            realTimeInfoScreen(i,index){
                this.toView('nationalregionalCommissions2',index)
            },
            follow() {
                if (this.ifcommon) {
                    this.followActivitie("unfollow");
                } else {
                    this.followActivitie("follow");
                }
            },
            followActivitie(followType){
                let user = window.localStorage.getItem("user");
                if (!this.$Cookies.get('token')) {
                    // this.$message.warning("请先登录");
                    // this.$confirm('检测到您未登录，是否登录')
                    // .then(_ => {
                    //  this.toView('login');
                    // })
                    // .catch(_ => {});
                    this.toViewLogin = true;
                } else {
                    var users = JSON.parse(user);
                    var token = "" + getToken();
                    var projectId = this.countryList.baseActivityEntityId;
                    var userId = users.userId;
                    // 接口逻辑
                    this.submitHandler((token) => {
                        saveFollowModel(projectId, "activity", userId, followType, token)
                            .then((result) => {
                                // console.log(result);
                                this.$message({
                                    message: result.data,
                                    type: "success",
                                });
                                this.ifcommon = !this.ifcommon;
                                this.resetToken();
                            })
                            .catch((error) => {
                                // 此处你的业务代码
                            });
                    });
                }
            },
             // 未登录跳转
            loginTipsChange(){
                const that=this;
                this.num =5;
                // clearInterval(timer_interval);

                this.timer = setInterval(function() {
                if (that.num > 0) {
                    that.num--;
                } else {
                    if(that.toViewLogin==true){
                    clearInterval(that.timer);
                    that.toView('login');
                    }else {
                    clearInterval(that.timer);
                    }
                }
                }, 1000)
            },
            // 判断未登录跳转是否关闭
            toViewLoginChange(done){
                this.toViewLogin=false;
                this.num=5;
                clearInterval(this.timer);
            },
            getPassAreaCode(code){
                this.select = code;
                this.formLabelAlign.selectCode = code;
            },
            getInitData() {
                const that =this;
                var users = localStorage.getItem('user');
                var user  = JSON.parse(users);
                if(user != null){
                    this.formLabelAlign.name = user.realName;
                }
                this.language = this.$i18n.locale.toUpperCase();
                countryNationalSpace({baseActivityEntityId: this.id,language: this.language}).then(res => {
                    this.formLabelAlign.meetingId = res.data.meetingId; 
                    this.meetingId = res.data.meetingId; 
                    if(res.data.activityInfos != undefined){
                        that.countryList = res.data.activityInfos[0]?res.data.activityInfos[0]:{};
                        that.activityApplyCount = res.data.activityApplyCount;
                        that.formLabelAlign.invitationCode = that.countryList.activityQrCode
                        that.formLabelAlign.meetingId = res.data.meetingId; 
                        if (users) {
                            var token = "" + getToken();
                            var projectId = this.countryList.baseActivityEntityId;
                            this.userId = user.userId;
                            getFollowModeNumlByModelIdAndUserId(
                                projectId,
                                "activity",
                                this.userId
                            ).then((res) => {
                                this.ifcommon = res.data;
                            });
                        }
                    }else{
                        that.countryList = {};
                        that.$message({
                                message: '无当前版本',
                                type: 'error'
                            });
                    }
                    let list = {
                        attachmentBusinessId:this.countryList.id,
                        attachmentBusinessType:'activityInfo'
                    };
                    sysAttachmentInfos(list).then(res=>{
                        if("3" == this.countryList.activityStatusDict){
                            if(JSON.stringify(res.data) =='{}'){
                                this.screen = [
                                    {
                                        value: '1',
                                        lable: 'common.ActivityIntroduction'
                                    }, {
                                        value: '1',
                                        lable: 'common.ActivityAgenda'
                                    }, {
                                        value: '1',
                                        lable: 'common.ActivityReview'
                                    }
                                ]
                            }else{
                                this.screen = [
                                    {
                                        value: '1',
                                        lable: 'common.ActivityIntroduction'
                                    }, {
                                        value: '1',
                                        lable: 'common.ActivityAgenda'
                                    }, {
                                        value: '1',
                                        lable: 'common.ActivityReview'
                                    }
                                    ,{
                                        value:'1',
                                        lable:'common.ActivityResults'
                                    }
                                ]
                            }
                        }else{
                            this.screen = [
                                {
                                    value: '1',
                                    lable: 'common.ActivityIntroduction'
                                }, {
                                    value: '1',
                                    lable: 'common.ActivityAgenda'
                                }
                            ]
                        }
                    })
                })
                this.activityStatusMap.set('活动中', 'Live');
                this.activityStatusMap.set('已结束', 'Closed');
                this.activityStatusMap.set('未开始', 'Upcoming');
                this.activityStatusMap.set('报名中', 'Registration open')
      
            },
            getBaseList(){
                const that =this;
                getList({language:this.$i18n.locale.toUpperCase()}).then(res=>{
                    if(JSON.stringify(res.data)!=='{}'){
                        that.projectList=res.data.baseUnitViews || [];
                    }
                })
            },
            // 报名弹窗
            signUp(num) {
                // 判断是否是报名结束
                let user = window.localStorage.getItem('user');
                if (!this.$Cookies.get('token')) {
                    // this.$message.warning("请先登录");
                    // this.$confirm('检测到您未登录，是否登录')
                    // .then(_ => {
                    //  this.toView('login');
                    // })
                    // .catch(_ => {});
                    this.toViewLogin=true;
                }else {
                    this.centerDialogVisible = true;
                }
               
                // if (this.countryList.registtrationFlag=='y') {
                //     
                // } else {
                //     this.$message({
                //         message: '当前会员活动无法加入',
                //         type: 'warning'
                //     });
                // }
            },
            save: function () {
                //流程改造6
                this.formLabelAlign.auditStatusDict = '4';
                this.submitHandler((token) => {
                    //流程改造7
                    getApproverId(this.formLabelAlign.invitationCode).then((result)=>{
                    result = result.data;    
                    //let id = result[0].userId;
                    var str = "";
                    for(var i = 0; i<result.length; i++){
                        str += result[i].userId + ",";
                    }
                    if (str.length > 0) {
                        str = str.substr(0, str.length - 1);
                    }
                    this.approverId = str;
                    saveActivityOrUpdate(
                        JSON.stringify(this.formLabelAlign),
                        this.approverId,
                        this.taskComment,
                        token
                    ).then((res) => {
                        let type = 'success';
                        if(res.msg == 'error'){
                            res.msg = '您已报名成功，请勿重复报名。';
                            type = 'warning';
                        }else{
                            res.msg = '报名成功';
                        }
                        this.$message({
                        message: res.msg,
                        type: type
                        });
                        this.resetToken();
                        // 此处关闭弹出层
                    }).catch((error) => {
                        // 此处你的业务代码
                        this.resetToken();
                    });
                    })
                });
            },
            getIconUrl(url) {
                return require("@/assets/img/cooperationExchange/" + url);
            },
            toView(router, json) {
                this.$router.push({name: router, params: {key: json}})
            },
            screenBack(data) {
                console.log(data, 'screenBackscreenBackscreenBackscreenBack')
            },
            screens(item, index) {
                this.i = index
            }
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    body {
        margin: 0;
    }

    .screen1 {
       color:#2c5589;
    }
    .screen2 {
        font-size: 14px;
          color:#bebebe;
    }

    .Introduction {
        margin-top: 20px;
    }
    .List {
        margin: 10px 20px;
    }
    .List img {
        width: 45px;
        height: 45px;
        vertical-align: middle;
    }
    .Introduction li {
        float: left;
        width: 31%;
        height: 400px;
        margin-right: 22px;
        background: skyblue;
    }

    .el-button.is-round {
        padding: 0
    }

    .el-input{
        width: 400px;
        /* line-height: 52px; */
    }
    .el-input>>>.el-input__inner{
        height: 50px;
        /* width: 200px; */
    }
    .el-select>>>.el-input__inner{
        height: 50px;
    }
    .el-form-item>>>.el-form-item__label {
        padding-top: 5px;
    }
    .dcp_input /deep/.el-input__inner {
        width: 150px;
    }
    .dcp_input /deep/.el-select {
        width: 150px;
    }
    
    .el-select-dropdown {
        width: 400px!important;
    }
    .func{
        color: rgb(10, 15, 255);
        margin-right: 20px;
        cursor: pointer;
        float: right;
        margin-right: 50px;
        line-height: 50px;
    }
</style>