dev/dcp-web-gate/src_old/views/introductionCooperation/IntroductionEquipmentAlliance.vue

<template>
    <div>
        <div>
            <IntroductionHeader style="position: absolute;left: 0;top: 0;width: 100%;z-index: 2;"></IntroductionHeader>
            <div style="width: 65%;z-index: 2;height: 60px;position: absolute;top: 90px;left: 25%;">
                <img src="@/assets/img/home/LOGO2020-12-22.png" alt="" style="height:100%" @click="toView('home')">
            </div>
            <div style="position: relative;width:100%">
                <img :src="getIconImg(img)" alt="" style="width: 100%;height: 600px;">
                
                <div style="width:65%;text-align:center;position:absolute;left:50%;top:62%;transform: translate(-50%,-89px);color: #fff;font-size: 35px;font-weight: 700;">
                    {{$t(title)}}
                </div>
                <el-button
                        type="success"
                        round
                        style="position:absolute;left:50%;top:85%;transform: translate(-50%,-89px);"
                        @click="nextChange('IntroductionApplicationMembership')">
                    {{$t('common.ApplyToJoin')}}
                </el-button>
            </div>
        </div>
        <div style="width: 100%;position: relative;">
            
            <div class="autoBox box">
                <!-- 面包屑导航 -->
                <div style="height: 30px;margin-left: 10px;" class="union">
                    <el-breadcrumb separator="/" style="line-height: 30px;color: #0079ef !important;">
                        <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">
                            {{$t('common.CooperationNetwork')}}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item><span @click="toView('IntroductionMemberProfile','union')"
                                                  style="font-weight: 700;cursor: pointer;">{{$t('common.IntroductionAlliances')}}</span>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>{{$t(title2)}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <!-- 成立背景 -->
                <div style="width:100%">
                    <div style="text-align:center;padding:30px 0">
                        <span style="color: #0E4891;font-weight: 700;font-size: 30px;">{{$t('common.Histroy')}}</span>
                    </div>
                    <div style="text-align:center;padding:0 103px;color: #333333;font-size: 16px;line-height: 24px;">
                        <p>{{$t(Details.label)}}</p>
                        <p>{{$t(Details.value)}}</p>
                    </div>
                    <div style="text-align:center;">
                          <img :src="getIconImg2(backgroundImg)" alt="" style="width:480px">
                    </div>
                </div>

                <!-- 宗旨构成功能 -->
                <div style="width:100%;height:230px;display:flex;justify-content: space-between;flex-wrap: nowrap;margin-top:44px">
                        <!-- 宗旨 -->
                        <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
                            <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;
                            background-color: #f4f9ff;padding: 10px 10px;">
                                <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
                                <div class="title">
                                    <span class="title-text"><span>{{$t('common.Aims')}}</span></span>
                                </div>
                                </div>
                                <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.establishment)}}</p>
                            </div>
                               
                        </div>
                        <!-- 构成 -->
                        <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
                            <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;background-color: #f4f9ff;padding: 10px 10px;">
                                <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
                                    <div class="title">
                                        <span class="title-text"><span>{{$t('common.Constitute')}}</span></span>
                                    </div>
                                </div>       
                                <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.purpose)}}</p>
                            </div>
                            
                        </div>
                        <!-- 功能 -->
                        <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
                            <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;background-color: #f4f9ff;padding: 10px 5px 0 10px;">
                                <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
                                    
                                    <div class="title">
                                        <span class="title-text"><span>{{$t('common.Function')}}</span></span>
                                    </div>
                                </div>     
                                <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.Alliance)}}</p>
                            </div>
                        </div>
                </div>
               <!-- 联盟活动 -->
               <div style="width:100%">
                    <div style="text-align:center;padding:30px 0">
                        <span style="color: #0E4891;font-weight: 700;font-size: 30px;">{{$t('common.Activities')}}</span>
                    </div>
                     <div style="padding-top: 10px;" class="AllianceActivities">

                        <div v-for="(item,index) in AllianceActivities" :key="index" class="Activities">
                            <div>
                                <img :src="getIconImg3('all' + (index+1)+ '.png')" alt="" style="width: 100%;height: 100%;">
                            </div>

                            <div class="Alliancetitle">
                                <div :style="detailBackColor" style="width:92px;height:92px;border-radius:50%;margin: auto;text-align:center">
                                    <img :src="getIconImg3('activity' + (index+1)+ '.png')" alt="" 
                                    style="height:40%;margin-top:30px">
                                </div>
                                <h3>{{$t(item.title)}}</h3>
                            </div>

                            <div class="AllianceDetail" :style="detailBackColor">                            
                                <fieldset style="width:80%;margin:auto;border: 2px solid #fff;font-size: 24px;font-weight: 700;">
                                    <legend>{{$t(item.title)}}</legend>
                                    <div style="border:1px solid #fff;margin:auto;width:58px;margin-top:12px"></div>
                                    <p style="font-size: 14px;">
                                        {{$t(item.label)}}
                                    </p>
                                </fieldset>
                            </div>
                        </div>
                    </div>

               </div>
                <!-- 联盟成员 -->
                <div style="margin-left: 10px;padding-top: 10px;margin-bottom: 30px;" v-if="this.title!=='common.GoalEquipmentAlliance'">
                    <span style="color: #3a6295;font-weight: 700;margin-left: 5px;">{{$t('common.Member')}}</span>
                </div>
                <div style="margin: 20px;color: #666;font-size: 14px;" class="continents" v-if="index!==3">
                    <ul>
                        <li class="cursor" v-for="(item,index) in list"
                            @click="toViewDetails('IntroductionLeagueMemberDetails',item)">
                            <img v-if="memberUnits[item.unitId]"src="@/assets/img/introductionCooperation/profile.png" alt="" style="vertical-align: middle;">
                            {{$i18n.locale=='zh'?item.unitZhName:item.unitEnName}}
                        </li>
                    </ul>
                </div>
                <div style="width: 100%;position: relative;height: 100px;" v-if="index!=3">
                    <el-pagination
                            style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                            background
                            layout="prev, pager, next"
                            :page-size=45
                            :total=total-0  
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>

        </div>
        <el-dialog
            :title="$i18n.locale=='zh'?'提示':'Reminder'"
            :visible.sync="toViewLogin"
            :width="$i18n.locale=='zh'?'500px':'750px'"
            :height="$i18n.locale=='zh'?'300px':'386px'"
            :before-close="toViewLoginChange">
            <div style="width: 100%;height: 100%;">
                <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
                <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
                    <div style="font-size: 20px;font-weight: normal;color: #333333;font-family: HiraginoSansGB-W3, HiraginoSansGB;line-height: 40px;">
                        {{$t('common.ReminderFirst')}}
                    </div>
                    <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;font-weight: normal;color: #666666;line-height: 30px;">
                        {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;font-weight: normal;color: #666666;line-height: 30px;">
                        {{$t('common.ReminderForth')}}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
                        <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
                        {{$t('common.ReminderFifth')}}
                        </span>
                        <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">{{$t('common.ReminderSixth')}}</span>
                    </div>
                </div>
            </div>
        </el-dialog>
        <footers></footers>
    </div>
</template>
<script>
    import Base from "@/views/base/Base";
    import IntroductionHeader from '@/views/introductionCooperation/IntroductionHeader.vue'
    import footers from '@/components/footers'
    import {getLeagueMemberByName} from '@/api/leagueMember/leagueMember'
    import {getMemberLeagueUnit} from '@/api/baseContactsInfo'
    import {gateGetUnitViewById} from "@/api/baseUnitView";
    import Screen from '@/components/screen'
    import { get } from '../../api/baseUnitView';

    export default {
        name: 'IntroductionEquipmentAlliance',
        components: {IntroductionHeader, footers},
        extends: Base,
        data() {
            return {
                index: this.$route.query.id,
                img: '',
                total:0,
                title: '',
                title2: '',
                Details: {},
                timer:'',
                num:5,
                detailBackColor:'',
                backgroundImg: "",
                page: {
                    pageSize: 45,
                    pageNo: 1,
                    unitZhName: null,
                    unitEnName:null,
                    leagueName: null,
                    language: null,
                },
                input: '',
                initData: {
                    label: ' 为发挥高校在科研、教育、学术交流等方面的优势和积极性，坚持资源共享、协同创新、互利共赢，为全球能源互联网发展提供技术创新、人才培养和理念传播等方面的支撑，服务全球能源互联网战略落地，服务世界能源变革转型，服务人类社会可持续发展。全球能源互联网发展合作组织（以下简称“合作组织”）发起成立全球能源互联网大学联盟（以下简称“大学联盟”）。',
                },
                AllianceActivities: [{
                    img: '@/assets/img/introductionCooperation/AllianceActivities.png',

                    title: 'common.ProfessionalActivities',
                    label: "common.ProfessionalLable"
                }, {
                    img: '@/assets/img/introductionCooperation/AllianceActivities2.png',
                    title: 'common.event',
                    label: "common.eventLable"
                }, {
                    img: '@/assets/img/introductionCooperation/AllianceActivities3.png',
                    title: 'common.OtherActivities',
                    label: "common.OtherLable"
                }],
                list: [],
                zhLeagueName:'',
                toViewLogin: false,
                memberUnits:{}
            }
        },
        created() {
        },
        props:{
            pageSize:{
                type:Number,
                default: 0,
            }
        },
        watch:{
            "$i18n.locale"() {
                this.initLeagueData();
                this.getInitData();
            },
            "toViewLogin"(){
                if(this.toViewLogin==true){
                    this.loginTipsChange();
                }
            }
        },
        mounted() {
            this.initLeagueData();
            this.getInitData();
            this.$nextTick(() => {
            });
        },
        methods: {
            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);
            },
            initLeagueData(){
                if (this.index == 0) {
                    this.title = 'common.GoalUniversityAlliance';
                    this.title2 = this.$i18n.locale ==='zh'?'大学联盟':'University Alliance';
                    this.zhLeagueName = '大学联盟';
                    this.Details = {
                        label: "common.GoalUniversitylabel",
                        value: 'common.GoalUniversityvalue',
                        establishment:'common.Universityestablishment',
                        purpose:'common.Universitypurpose',
                        Alliance:'common.UniversityAlliances',
                    }
                    this.backgroundImg = 'university.png';
                    this.img = 'IntroductionUniversity.png';
                    this.detailBackColor='background: rgb(22 111 228 / 0.7);';
                } else if (this.index == 1) {
                    this.title = 'common.GoalThinkTankAlliance';
                    this.title2 = this.$i18n.locale ==='zh'?'智库联盟':'Think Tank Alliance';
                    this.zhLeagueName = '智库联盟';
                    this.Details = {
                        label: "common.GoalThinkTanklabel",
                        value: 'common.GoalThinkTankvalue',
                        establishment:'common.ThinkTankestablishment',
                        purpose:'common.ThinkTankpurpose',
                        Alliance:'common.ThinkTankAlliances',
                    }
                    this.backgroundImg = 'Thinkanks.png'
                    this.img = 'IntroductionThinkTanks.png';
                    this.detailBackColor='background: rgb(81 158 1 / 0.7);';
                } else if (this.index == 2) {
                    this.title = 'common.GoalFinancialUnion';
                    this.title2 = this.$i18n.locale ==='zh'?'金融联盟':'Financial Alliance';
                    this.zhLeagueName = '金融联盟';
                    this.Details = {
                        label: "common.GoalFinanciallabel",
                        value: 'common.GoalFinancialvalue',
                        establishment:'common.Financialestablishment',
                        purpose:'common.Financialpurpose',
                        Alliance:'common.FinancialAlliances',
                    }
                    this.backgroundImg = 'finances.png'
                    this.img = 'IntroductionFinance.png';
                    this.detailBackColor='background: rgb(214 146 0 / 0.7);';
                } else if (this.index == 3) {
                    this.title = 'common.GoalEquipmentAlliance';
                    this.title2 = this.$i18n.locale ==='zh'?'装备联盟':'Equipment Alliance';
                    this.zhLeagueName = '装备联盟';
                    this.Details = {
                        label: "common.GoalEquipmentlabel",
                        value: 'common.GoalEquipmentvalue',
                        establishment:'common.Equipmentestablishment',
                        purpose:'common.Equipmentpurpose',
                        Alliance:'common.EquipmentAlliances',
                    }
                    this.backgroundImg = 'equipments.png'
                    this.img = 'IntroductioneEuipment.png';
                    this.detailBackColor='background: rgb(46 162 128 / 0.7);';
                }
            },
            getInitData() {
                this.getLeagueMemberByName();
            },
            getLeagueMemberByName: function () {
                this.page.language = this.$i18n.locale.toUpperCase();
                this.page.leagueName = this.zhLeagueName;
                if(this.title=='common.GoalEquipmentAlliance'){
                    return;
                }
                //this.page.leagueMemberName='';
                getLeagueMemberByName(this.page).then(result => {
                    var data = result.data;
                    if (data) {
                        this.list = data.baseLeagueMembers || [];
                        this.memberUnits = data.memberUnits
                        this.total=data.page.totalCount;
                        
                    }
                })
            },
            getData() {
                if(this.$i18n.locale ==='zh'){
                    this.page.unitZhName =  this.input
                }else {
                    this.page.unitEnName = this.input
                }
                getLeagueMemberByName(this.page).then(result => {
                    var data = result.data;
                    if (data) {
                        this.list = data.baseLeagueMembers || [];
                    }else {
                        this.list = []
                    }
                })
            },
            handleCurrentChange(val) {
                this.page.pageNo = val;
                this.getLeagueMemberByName();
            },
            getIconImg(url) {
                return require("@/assets/img/introductionCooperation/" + url);
            },
            getIconImg2(url) {
                return require("@/assets/img/introductionCooperation/" + this.backgroundImg);
            },
            getIconImg3(url) {
                return require("@/assets/img/introductionCooperation/" + url);
            },
            toViewDetails(router, json) {
                gateGetUnitViewById(json.unitId,this.$i18n.locale.toUpperCase()).then(res => {
                    var data =  res.data;
                    if(data){
                        var baseUnitView = res.data.baseUnitView;
                        if(baseUnitView.showable == '1'){
                            this.$store.commit('modify', 'enterpriseDetails');
                            window.localStorage.setItem('router', 'enterpriseDetails');
                            const { href } = this.$router.resolve({
                                name: 'enterpriseDetails',
                                query: {
                                    key: json.unitId
                                }
                            });
                            window.open(href, '_blank');
                        }else{
                            if(data.isMember != undefined ){
                                let member ={
                                    memberNameZh: data.isMember.memberNameZh,
                                    memberNameEn:data.isMember.memberNameEn,
                                    unitId:data.isMember.unitId,
                                }
                                this.$store.commit('modify', 'IntroductionPresentationDetails');
                                window.localStorage.setItem('router', 'IntroductionPresentationDetails');
                                const { href } = this.$router.resolve({
                                    name: 'IntroductionPresentationDetails',
                                    query: {
                                        key: data.isMember.id,
                                        member: JSON.stringify(member)
                                    }
                                });
                                window.open(href, '_blank');
                            }else{
                                if(json.showFlag === 'y'){
                                    this.$store.commit('modify', router);
                                    window.localStorage.setItem('router', router);
                                    const { href } = this.$router.resolve({
                                        name: router,
                                        query: {
                                            key: json.id,
                                        }
                                    });
                                    window.open(href, '_blank');
                                }else if(baseUnitView.officialWebsitePath){
                                    var url = baseUnitView.officialWebsitePath;
                                    if(url.indexOf('http') == -1){
                                        url = 'http://' + url
                                    }
                                    window.open(url,'_blank')
                                }else{
                                    return 
                                }
                            }
                        }
                    }
                })
            },
            nextChange(){
                if (!this.$Cookies.get('token')) {
                    // this.$message.warning("请先登录");
                    // this.$confirm('检测到您未登录，是否登录')
                    // .then(_ => {
                    //  this.toView('login');
                    // })
                    // .catch(_ => {});
                    this.toViewLogin=true;
                } else {
                    this.toView('IntroductionApplicationMembership')
                }

            },
            toView(router, json) {
                this.$store.commit('modify', router);
                this.$router.push({name: router, query: {key: json}});
            },
            mouseOver(index) {
                console.log(index)
                this.$refs[`mouse${index}`][0].style.display = 'block';

            },
            mouseLeave(index) {
                console.log(index)
                this.$refs[`mouse${index}`][0].style.display = 'none';

            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    body {
        margin: 0;
    }

    .box, .box2, .box3 {
        width: 1200px;
        /* height: 360px;
         */

        margin: auto;
        position: relative;
        border-bottom: 1px solid #fff;
        background-color: #fff;
        /* background-color: #000; */
    }

    .AllianceActivities {
        text-align: top;
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 30px 10px;
    }

    .AllianceActivities .Activities {
        width: 32%;
        position: relative;
      
    }

    .continents ul {
        text-align: top;
        /*display: flex;*/
        /*display: -webkit-flex; !* Safari *!*/
        /*flex-wrap: wrap;*/
        /*padding-left: 40px;*/
        

    }
    .continents ul li {
        border: 1px solid #f1f1f1;
        display: inline-block;
        box-shadow: 5px 5px 5px #f1f1f1;
        margin-bottom: 10px;
        color: #2c558a;
        border-radius: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 364px;
        margin-right: 10px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        padding-left: 10px;
    }

    /*.continents ul li {*/
    /*    border: 1px solid #f1f1f1;*/
    /*    box-shadow: 5px 5px 5px #f1f1f1;*/
    /*    margin-bottom: 10px;*/
    /*    color: #5878a2;*/
    /*    border-radius: 5px;*/
    /*    width: 364px;*/
    /*    height: 35px;*/
    /*    line-height: 35px;*/
    /*    text-align: left;*/
    /*    padding-left: 10px;*/
    /*}*/

    .continents ul li:hover {
        border: 1px solid #e36844;
    }

    .continents ul li:active {
        background: #e36844;
        color: #fff;
    }

    .union >>> .el-breadcrumb__inner.is-link, .union >>> .el-breadcrumb__inner {
        color: #606266;
    }
    .Alliancetitle{
        width:100%;
        position: absolute;
        top: 25%;
        text-align: center;
        color: #fff;
        opacity: 1;
    }
    .AllianceDetail{
        position: absolute;
        left:0;
        top: 0;
        width:100%;
        height:100%;
        color: #fff;
        text-align: center;
        opacity: 0;
        display: flex;
        align-items: center;
    }
   
    .Activities:hover .AllianceDetail{
         opacity: 1;
    }
    .Activities:hover .Alliancetitle{
         opacity: 0;
    }
    
</style>