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

<template>
    <div >
        <div class="autoBox box" style="position: relative;">
            <el-breadcrumb separator="/" style="float: left;margin-left:15px; ">
                <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: 'nationalregionalCommittees', name:'nationalregionalCommittees', params: { key: 'introduc',lable: 'common.Committeeactivities' }}">{{$t('common.NationalregionalCommissions')}}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: 'nationalregionalCommittees', name:'nationalregionalCommittees', params: { key: 'layout',lable: 'common.Committeeactivities' }}">{{$t('common.Committeelayout')}}</el-breadcrumb-item>
                <el-breadcrumb-item >{{committeeShowMessageInfo.correlationType == 'P'?$t('common.PersonnelProfile'):
                    $t('common.OrganizationProfile')}}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-breadcrumb separator="/" style="float: right;margin:0px 15px 15px 0" >
                <span class="cursor" :class="screenIndex == item.value?'screen1':'screen2'" @click="realTimeInfoScreen(item,index)"
                    v-for="(item,index) in realTimeInfoScreens">
                    &nbsp;&nbsp;{{$t(item.lable)}} &nbsp;&nbsp;

                </span>
            </el-breadcrumb>
            <div style="margin-top: 40px" :style="committeeShowMessageInfo.correlationType =='P'?'':'min-height:400px'">
                <div style="height: 310px;" v-if="committeeShowMessageInfo.correlationType =='P'">
                    <img v-show="!committeeShowMessageInfo.spareTwo" src="@/assets/img/projectPresentation/user.png" alt="" class="introduceItemImg">
                    <img v-show="committeeShowMessageInfo.spareTwo" :src="'/api/file/pub/' + committeeShowMessageInfo.spareTwo" alt="" class="introduceItemImg">
                    <!--人物详情-->
                    <div class="introduceItemTitle">
                        <div>{{committeeShowMessageInfo.name}}</div>
<!--                        <div style="margin-top: 50px;">{{committeeShowMessageInfo.spareOne}}</div>-->
                        <div class="introPositionone">
                            <div style="line-height:30px" v-for="(item,sparindex) in newSpareOne">
                                {{item}}
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 310px;position: relative; margin-top: 35px;" v-if="committeeShowMessageInfo.correlationType =='C'">
                    <!-- <img :src="'api/file/pub/'+'/def/projectdefault.png'" alt="" class="introduceItemImg"> -->

                        <div class="swipers">
                            <div class="swiper-container gallery-top">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(i,index) in ifFlog" v-if="ifFlog.length>0">
                                        <img v-if="i.pictureUrl" :src="'api/file/pub/'+ i.pictureUrl" alt style="width: 100%;height: 100%;" />
                                    </div>
                                    <div class="swiper-slide"  v-if="ifFlog.length==0">
                                        <img :src="'api/file/pub/'+'/def/def1.png'" alt style="width: 100%;height: 100%;" />
                                    </div>
                                </div>
                                <div class="swiper-button-next swiper-button-white"></div>
                                <div class="swiper-button-prev swiper-button-white"></div>
                            </div>
                            <div class="swiper-container gallery-thumbs">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(i,index) in ifFlog" v-if="ifFlog.length>0">
                                        <img  v-if="i.pictureUrl" :src="'api/file/pub/'+ i.pictureUrl" alt style="width: 100%;height: 100%;" />
                                    </div>
                                    <div class="swiper-slide"   v-if="ifFlog.length==0">
                                        <img :src="'api/file/pub/'+'/def/def1.png'" alt style="width: 100%;height: 100%;" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div style="float: right;color: #666;font-size: 16px;margin-right: 20px;">
                        </div>
                        </div>
                        <div class="details" v-if="committeeShowMessageInfo.correlationType =='C'">
                            <div style="width: 100%; font-size: 15px;color: #333;" >
                                <div>
                                    <span class="initData_label cursor" style="color: #2c558a;width:100%;font-weight: 700;font-size: 20px;">{{$i18n.locale=='zh'?committeeShowMessageInfo.name:this.committeeShowMessageInfo.nameEn}}</span>
                                </div>
                                <div style="line-height: 35px;">
                                    <div>
                                        <span>
                                            <i class="el-icon-location-outline"></i>
                                            {{$t('common.place')}}：{{countryDictsMap[committeeShowMessageInfo.countryDict]}}
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            <i class="fa fa-star-o"></i>
                                            {{$t('common.DateOfEstablishment')}}：{{committeeShowMessageInfo.registeredTime?committeeShowMessageInfo.registeredTime:''}}
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            <i class="el-icon-time"></i>
                                            {{$t('common.LegalRepresentative')}}：{{committeeShowMessageInfo.corporateName?committeeShowMessageInfo.corporateName:''}}
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            <i class="el-icon-message"></i>
                                            {{$t('common.OfficialEmail')}}：{{committeeShowMessageInfo.officialEmail?committeeShowMessageInfo.officialEmail:''}}
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            <i class="el-icon-office-building"></i> {{$t('common.OfficialWebsite')}}：
                                            <a href="javaScript:;" class="a-style" @click="toOffcial(committeeShowMessageInfo.officialWebsitePath)">
                                                {{committeeShowMessageInfo.officialWebsitePath?committeeShowMessageInfo.officialWebsitePath:''}}
                                            </a>
                                        </span>
                                    </div>
                                    <div>
                                        <el-dialog
                                        :title="$t('common.OrganizationProfile')"
                                        :visible.sync="dialogVisible"
                                        width="60%">
                                        <span style="line-height: 29px;font-size: 18px;" v-html="committeeShowMessageInfo.unitProfile"></span>
                                    </el-dialog>
                                    <div>
                                        <div style="color: #666;">{{$t('common.intro')}}：</div>
                                        <div style="height: 72px;line-height: 24px;color: #333;font-size: 14px;
                                        -webkit-box-orient: vertical;
                                        position:relative;
                                        line-height:1.4em;
                                        overflow: hidden;
                                        height:4.2em;" class="plate  cursor"
                                            @click="dialogVisibleChange" >{{committeeShowMessageInfo.unitProfile}}</div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
                 <div style="margin: 20px;" class="jianjie"  v-if="committeeShowMessageInfo.correlationType =='P'">
                    <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;" v-if="committeeShowMessageInfo.correlationType =='P'">
                    {{$t('common.Profile')}}
                </div>
                <div style="margin: 20px;" v-html="committeeShowMessageInfo.personalProfileUe" v-if="committeeShowMessageInfo.correlationType =='P'"></div>
               <!-- <div style="margin: 20px;" class="jianjie">
                   <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                   人物贡献
               </div> -->
<!--                <div style="margin: 20px;">-->
<!--                    胡安·卡洛斯·阿拉内达1983年毕业于圣玛丽亚科技大学（UTFSM）电气工程专业，拥有英国曼彻斯特大学电气工程硕士学位，拥有35年电力技术及市场有关经验，曾在IEEE、CIGRE等顶级学术期刊及会议上发表论文30余篇，美国电子电气工程师协会高级会员，智利大学客座教授、兼职博导，英国帝国理工学院客座访问学者。1984-2014年期间，曾任智利Colbún发电公司运行分析主任，智利Transelec输电公司战略规划部主任及智利Chilquinta配电公司主管电网规划的总工程师。2015-2019年间任国家大电网组织智利分会主席，2015年至今在智利国家电气协调委员会最高执行秘书，主管输电网规划，主持制定了智利国家电力互联系统的发展规划。领导国际大电网委员会智利分会，积极研究智利电网与能源发展战略，与国际大电网协会拉美地区各国分会联合开展区域电气一体化研究。-->
<!--                </div>-->
                <div style="margin: 30px 0" v-for="(item,index) in initList">
                    <div class="enterprise_style">
                        <div style="margin: 20px;" class="jianjie" >
                            <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;" v-if="initList">
                            {{item.title}}
                        </div>
                    </div>
                    <div v-if="((item.havePicture != 'y') ||(item.havePicture == 'y' && item.pictureUrl=='') )">
                        <div style="margin: 20px;" v-html="item.contentHtml"></div>
                    </div>
                    <div v-else>
                        <div :style="item.picturePosition == 'L'?'text-indent: 30px;float:right':'float:left'" class="nomale" style="margin-top: 15px;width: 773px !important;word-break : break-all;margin-left: 30px;font-size: 16px;"
                             v-html="item.contentHtml">
                        </div>
                        <div  style="margin-left: 20px;width: 250px;height: 140px;padding-right:55px;padding-top:17px;"
                              :style="item.picturePosition == 'L'?'float:left':'float:right'" alt="" >
                            <img :src="'/api/file/pub/' + item.pictureUrl" alt="" style="width: 100%;height: 100%;">
                        </div>
                    </div>
                    <div style="clear:both"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
 import{getShowMessageInfoDetail } from "@/api/committee/committeeShowMessageInfo";
import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
 import {getInformationList} from '@/api/financialService/cmsInformationViews';
 import{formatDate } from "@/utils/formatUtils";
 import {getDicts} from '@/api/dict';
 import Base from "@/views/base/Base";
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  export default {
    name: "NationalPersonnelProfile",
    data () {
        return {
            params:{
                entityId : this.$route.query.key,
                language : this.$i18n.locale.toUpperCase(),
            },
            initList:[],
            screenIndex:1,
            committeeShowMessageInfo:{},
            countryDicts:[],
            history:[],
            cooperationUnitDynamicList:[],
            realTimeInfoScreens:[{
                lable:"common.BriefintroductiontotheCommittee",
                value:'introduc'
                },{
                lable:"common.Committeelayout",
                value:'layout'
                },{
                lable:"common.Committeeactivities",
                value:'activities'
            }],
            dialogVisible:false,
            ifFlog:[],
            newSpareOne:[],
        }
    },
    updated(){
        this.Swiper();
    },
    mounted() {

        this.initData();
        this.getCountry();// 获取国家字典
        this.getInformationList();
        // let posi = document.querySelector("#introPosition");
        // // let posi = this.$refs.introPosition;
        // console.log('posi')
        // console.log(posi)

    },
    watch: {
        "$i18n.locale"(){
            this.initData();
            this.getCountry();// 获取国家字典
            this.getInformationList();
        }
    },
    computed: {
        countryDictsMap() {
            return this.countryDicts.array2Obj('value', 'label');
        },

    },
    methods:{
        dialogVisibleChange(){
            this.dialogVisible=true;
        },
        Swiper() {
            var galleryThumbs = new Swiper(".gallery-thumbs", {
                spaceBetween: 10,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
                autoplay: {//自动播放
                delay: 4000,
                disableOnInteraction: false,//用户操作后是否停止 默认停止（true）
                },
            });

            var galleryTop = new Swiper(".gallery-top", {
                spaceBetween: 10,
                navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
                },
                autoplay: {//自动播放
                    delay: 4000,
                    disableOnInteraction: false,//用户操作后是否停止 默认停止（true）
                },
                thumbs: {
                swiper: galleryThumbs
                }
            });
        },
        toOffcial(url){
            if(url.indexOf('http') == -1){
                url = 'http://' + url
            }
            window.open(url,'_blank')
        },
        getCountry(){
                getDicts(this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT':'unit_country_dict_en').then(res=>{
                    this.countryDicts=res.data[0];
                })
            },
        getInformationList(){
            let query={
                businessType:"organizational_structure",
                businessId: this.$route.query.key,
                language:this.$i18n.locale.toUpperCase()
            }
            getInformationList(query).then(res => {
                var data = res.data;
                console.log(res,'--------------------------------------任务贡献详情')
                if(data){
                    // this.initList = data.allDataList || [];
                    this.initList = data.allDataList;
                    this.ifFlog = this.initList.filter(item=>{
                        return item.pictureUrl
                    })
                }
            })

        },
        initData(){
            var params = {
                entityId : this.$route.query.key,
                language : this.$i18n.locale.toUpperCase(),
            }
            getShowMessageInfoDetail(params).then(res => {
                var data = res.data;
                this.newSpareOne = [];
                if(data){
                    this.committeeShowMessageInfo = res.data.committeeShowMessageInfo || {}
                    this.committeeShowMessageInfo.unitProfile=this.committeeShowMessageInfo.unitProfile?this.committeeShowMessageInfo.unitProfile.replace(/<[^>]+>/g,"").replace(/&nbsp;/ig,""):'';

                    this.newSpareOne =  this.committeeShowMessageInfo.spareOne ? this.committeeShowMessageInfo.spareOne.split('#') : [];
                    this.committeeShowMessageInfo.registeredTime = formatDate(this.committeeShowMessageInfo.registeredTime,'YYYY');
                }
            })

        },
        realTimeInfoScreen(i,index){
            this.screenIndex=i.value;
            this.Screens=i.lable;
            this.toView('nationalregionalCommittees',this.screenIndex)
        },
        toView(router,json){
            this.$router.push({
                name: 'nationalregionalCommittees',
                params: {
                    key: json
                }
            })
        }
    }
  }
  </script>
  <style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
        position: absolute;
    }
    .crumbs {
        margin-left: 20px;
    }
    .screen1 {
        background: linear-gradient(180deg, #3280E2 0%, #144E97 100%);
        border-radius: 20px 20px 20px 20px;
        padding: 8px 12px;
        color: #F0F3F8;
        margin-left: 10px;
    }
    .screen2 {
        font-size: 14px;
        background: linear-gradient(180deg, #B4D5FF 0%, #4F81BF 100%);
        border-radius: 20px;
        padding: 8px 12px;
        color: #165099;
        margin-left: 10px;
    }
    .introduceItemImg {
      width: 201px;
      height: 274px;
      position: relative;
      top: 0px;
      left: 20px;
    }
    .introduceItemTitle {
      /*width: 269px;*/
      position: absolute;
      top: 63px;
      left:250px;
    }
    .introPositionone{
        margin-top: 30px;
    }
    .introPositiontwo{
        margin-top: 30px;
        max-height: 200px;
        overflow-y: scroll;
    }
    .jianjie {
      font-size: 20px;
      color: #1890FF;
    }
    .a-style {
        color: #0500ee;
        cursor: pointer;
        text-decoration: underline;
    }

    .details {
        position: absolute;
        top: 15px;
        left: 600px;
        width: 460px;
        height: 390px;
    }
    .swipers {
    position: absolute;
    top: 0px;
    left: 30px;
    width: 460px;
    height: 390px;
    }
    .details {
    position: absolute;
    top: 70px;
    left: 520px;
    width: 490px;
    height: 390px;
    }
    .swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    }
    .swiper-slide {
    background-size: cover;
    background-position: center;
    }
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
  </style>