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

<template>
    <div>
        <div v-if="introduce[0]" :class="introduce[0].length>0?'introduceBorder':''">
            <div class="introduce" v-for="(item,index) in introduce[0]">
              <div class="introduceItem">
                <!-- title -->
                <div :class="$i18n.locale=='zh'?'introduceItemTitle':'introduceItemTitleEn'"
                 v-if="index==0">{{type=='region'?committeePostDictsMap[item.regionDutyDict]:committeeUnitPostDictsMap[item.countryDutyDict]}}</div>
                <!-- 头像 -->
               <div class="introduce_F5FAFF" style="position: relative;">
               <div style="min-height: 100px;float: left">
                  <img v-if = "!item.spareTwo" src="@/assets/img/projectPresentation/user.png" alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'">
                  <img v-else  :src="'/api/file/pub/' + item.spareTwo"  alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'">
                <!-- 名字国家 -->
                  <div class="introduceItemName">
                    <div class="introduceItemPersonnel" @click="toView('NationalPersonnelProfile',item.entityId)">
                          {{$i18n.locale == 'zh'?item.name:item.nameEn}}
                    </div>
                    <div class="introduceItemCountry">
                        <span v-if="item.countryDict">(</span>{{countryDictsMap[item.countryDict]}} <span v-if="item.countryDict">)</span>
                    </div>
                  </div>
                </div>
                <div style="clear: both;"></div>
                <div class="regionalIntroduce"  v-html="item.correlationType =='C'?item.unitProfile:item.personalProfileUe">
                </div>
                <i class="el-icon-d-arrow-right cursor" @click="toView('NationalPersonnelProfile',item.entityId)" v-if="item.unitProfile" 
                style="position: absolute;bottom: 56px;right: 30px;color: #66b1ff;font-weight: 700;"></i>

               </div>
              </div>
            </div>
          </div>
        <div v-if="introduce[1]" :class="introduce[1].length>0?'introduceBorder':''">
            <div class="introduce" v-for="(item,index) in introduce[1]">
              <div class="introduceItem">
                <!-- title -->
                <div :class="$i18n.locale=='zh'?'introduceItemTitle':'introduceItemTitleEn'" v-if="index==0">{{type=='region'?committeePostDictsMap[item.regionDutyDict]:committeePostDictsMap[item.countryDutyDict]}}</div>
                <!-- 头像 -->
               <div class="introduce_F5FAFF" style="position: relative;">
               <div style="min-height: 100px;float: left">
                  <img v-if = "!item.spareTwo" src="@/assets/img/projectPresentation/user.png" alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'">
                  <img v-else  :src="'/api/file/pub/' + item.spareTwo"  alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'">
                <!-- 名字国家 -->
                  <div class="introduceItemName">
                    <div class="introduceItemPersonnel" @click="toView('NationalPersonnelProfile',item.entityId)">
                          {{$i18n.locale == 'zh'?item.name:item.nameEn}}
                    </div>
                    <div class="introduceItemCountry">
                        <span v-if="item.countryDict">(</span>{{countryDictsMap[item.countryDict]}} <span v-if="item.countryDict">)</span>
                    </div>
                  </div>
                </div>
                <div style="clear: both;"></div>
                <div class="regionalIntroduce"   v-html="item.correlationType =='C'?item.unitProfile:item.personalProfileUe">
                </div>
                <i class="el-icon-d-arrow-right cursor" @click="toView('NationalPersonnelProfile',item.entityId)" v-if="item.correlationType =='C' && item.unitProfile || item.correlationType !=='C' && item.personalProfileUe"  
                style="position: absolute;bottom: 56px;right: 30px;color: #66b1ff;font-weight: 700;"></i>
               
               </div>
              </div>
            </div>
          </div>
          <div v-if="introduce[2]" :class="introduce[2].length>0?'introduceBorder':''">
            <div class="introduce" v-for="(item,index) in introduce[2]">
              <div class="introduceItem" >
                <!-- title -->
                <div :class="$i18n.locale=='zh'?'introduceItemTitle':'introduceItemTitleEn'" v-if="index==0">{{type=='region'?committeePostDictsMap[item.regionDutyDict]:committeePostDictsMap[item.countryDutyDict]}}</div>
                <!-- 头像 -->
                <div class="introduce_F5FAFF" style="position: relative;">
                  <div style="min-height: 100px;float: left">
                    <img v-if = "!item.spareTwo" src="@/assets/img/projectPresentation/user.png" alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'">
                    <img v-else  :src="'/api/file/pub/' + item.spareTwo"  alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'">
                  </div>
                  <!-- 名字国家 -->
                  <div class="introduceItemName">
                    <div class="introduceItemPersonnel" @click="toView('NationalPersonnelProfile',item.entityId)">
                       {{$i18n.locale == 'zh'?item.name:item.nameEn}}
                    </div>
                    <div class="introduceItemCountry">
                        <span v-if="item.countryDict">(</span>{{countryDictsMap[item.countryDict]}} <span v-if="item.countryDict">)</span> 
                    </div>
                  </div>
                <div style="clear: both;"></div>

                  <div class="regionalIntroduce" v-html="item.personalProfileUe">
                  </div>
                  <i class="el-icon-d-arrow-right cursor" v-if="item.correlationType =='C' && item.unitProfile || item.correlationType !=='C' && item.personalProfileUe"
                    style="position: absolute;bottom: 56px;right: 30px;
                    color: #66b1ff;font-weight: 700;" @click="toView('NationalPersonnelProfile',item.entityId)">
                  </i>
                </div>
              </div>
            </div>
          </div>
          <!--  -->
          <div v-if="introduce[3]"  :class="introduce[3].length>0?'introduceBorder':''">
            <!-- -->
            <div class="introduce" v-for="(item,index) in introduce[3]" >
              <div class="introduceItem" >
                <!-- title -->
                <div :class="$i18n.locale=='zh'?'introduceItemTitle':'introduceItemTitleEn'" v-if="index == 0">{{type=='region'?committeePostDictsMap[item.regionDutyDict]:committeePostDictsMap[item.countryDutyDict]}}</div>
                <!-- 头像 -->
                <div class="introduce_F5FAFF" style="position: relative;">
                  <!--  -->
                  <div style="min-height: 100px;float: left">
                    <img v-if = "!item.spareTwo" src="@/assets/img/projectPresentation/user.png" alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'">
                    <img v-else  :src="'/api/file/pub/' + item.spareTwo"  alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'"> 
                  </div>
                  <!-- 名字国家 -->
                  <div class="introduceItemName">
                    <div class="introduceItemPersonnel" @click="toView('NationalPersonnelProfile',item.entityId)">
                         {{$i18n.locale == 'zh'?item.name:item.nameEn}}
                    </div>
                    <div class="introduceItemCountry">
                      <span v-if="item.countryDict">(</span>{{countryDictsMap[item.countryDict]}} <span v-if="item.countryDict">)</span>
                    </div>
                  </div>
                <div style="clear: both;"></div>

                  <div class="regionalIntroduce" v-html="item.correlationType =='C'?item.unitProfile:item.personalProfileUe"></div>

                  <i class="el-icon-d-arrow-right cursor" @click="toView('NationalPersonnelProfile',item.entityId)" v-if="item.correlationType =='C' && item.unitProfile || item.correlationType !=='C' && item.personalProfileUe"  
                    style="position: absolute;bottom: 56px;right: 30px;color: #66b1ff;font-weight: 700;"></i>


                </div>
              </div>
            </div>
          </div>
          <div v-if="introduce[4]" :class="introduce[4].length>0?'introduceBorder':''">
            <div class="introduce" v-for="(item,index) in introduce[4]">
              <div class="introduceItem">
                <!-- title -->
                <div :class="$i18n.locale=='zh'?'introduceItemTitle':'introduceItemTitleEn'" 
                v-if="index==0">{{type=='region'?committeePostDictsMap[item.regionDutyDict]:committeePostDictsMap[item.countryDutyDict]}}</div>
                <!-- 头像 -->
                <div class="introduce_F5FAFF" style="position: relative;">
                  <div style="min-height: 100px;float: left">
                    <img v-if = "!item.spareTwo" src="@/assets/img/projectPresentation/user.png" alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'">
                    <img v-else  :src="'/api/file/pub/' + item.spareTwo"  alt="" :class="$i18n.locale=='zh'?'introduceItemImg':'introduceItemImgEn'"> 
                  </div>
              
                  <!-- 名字国家 -->
                  <div class="introduceItemName">
                    <div class="introduceItemPersonnel" @click="toView('NationalPersonnelProfile',item.entityId)">
                        {{$i18n.locale == 'zh'?item.name:item.nameEn}}
                    </div>
                    <div class="introduceItemCountry">
                      <span v-if="item.countryDict">
                        ({{countryDictsMap[item.countryDict]}})
                      </span>
                     
                    </div>
                  </div>
                <div style="clear: both;"></div>

                  <div class="regionalIntroduce" v-html="item.correlationType =='C'?item.unitProfile:item.personalProfileUe"></div>
                    <i class="el-icon-d-arrow-right cursor"   style="position: absolute;bottom: 56px;right: 30px;
                    color: #66b1ff;font-weight: 700;" v-if=" item.correlationType=='C' && item.unitProfile" @click="toView('NationalPersonnelProfile',item.entityId)"></i>
                    <i class="el-icon-d-arrow-right cursor"   style="position: absolute;bottom: 56px;right: 30px;
                    color: #66b1ff;font-weight: 700;" v-if=" item.correlationType!=='C' && item.personalProfileUe" @click="toView('NationalPersonnelProfile',item.entityId)"></i>
                </div>
              </div>
            </div>
            
          </div>
    </div>
</template>
<script>
    import { getDicts } from "@/api/dict";
     export default {
        name: "NationalregionalCommissions",
        props:[ 'introduce','type'],
        components: {Screen},
        data () {
            return {
                committeePostDicts:[],
                committeeUnitPostDicts:[],
                countryDicts:[],
            }

        },
        mounted(){
         
            this.getDict();
        },
        watch: {
            "$i18n.locale"() {
                this.getDict();
            },
            "introduce"(){
                this.$forceUpdate();
            }
        },
        computed: {
            committeePostDictsMap(){
                return  this.committeePostDicts.array2Obj("value","label");
            },
            committeeUnitPostDictsMap(){
                return  this.committeeUnitPostDicts.array2Obj("value","label");
            },
            countryDictsMap(){
                return  this.countryDicts.array2Obj("value","label");
            },
        },
        methods:{
            getDict() {
                getDicts("COMMITTEE_POST_DICT,COMMITTEE_POST_DICT_EN,COMMITTEE_UNIT_POST_DICT,COMMITTEE_UNIT_POST_DICT_EN,UNIT_COUNTRY_DICT,UNIT_COUNTRY_DICT_EN").then(res => {
                    var data = res.data;
                    if(data){
                        if(this.$i18n.locale == 'zh'){
                            this.committeePostDicts = res.data[0] ||[];
                            this.committeeUnitPostDicts = res.data[2] ||[];
                            this.countryDicts = res.data[4] || [];
                        }else  if(this.$i18n.locale == 'en'){
                            this.committeePostDicts = res.data[1] ||[];
                            this.committeeUnitPostDicts = res.data[3] ||[];
                            this.countryDicts = res.data[5] || [];
                        }
                    }
                });
            },
            toView(router,json){
                this.$store.commit('modify', router);
                window.localStorage.setItem('router', router);
                const { href } = this.$router.resolve({
                    name: router,
                    query: {
                        key: json
                    },
                });
                window.open(href, '_blank');
            },
        }
     }
</script>
<style scoped>
    .marginTop {
      margin-top: 20px;
    }
    .title {
      width: 100%;
      height: 60px;
      background-color: #EBF5FF;
      text-align: center;
      color: #1890FF; 
      line-height: 60px;  
      font-size: 25px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
    }
    .missions {
      margin-top: 30px;
    }
    .missionsLeft {
      float: left;
      width: 258px;
      height: 430px;
    }
    .missionsLeft li {
      width: 100%;
      height: 50px;
      text-align: center;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      line-height: 50px;
      letter-spacing: 1px;
      border-radius: 5px;
      cursor: pointer;
      overflow: hidden;
      margin-bottom: 3px;
    }
    .missionsLeft .liTager {
      background-color: #1890FF;  
      color: #FFFFFF;
    }
    .missionsLeft .liNoTager {
      background-color: #EBF5FF;  
      color: #333333;
    }
    .missionsRight {
      float: right;
      width: 900px;
    }
    .missionsRightTitle {
      font-size: 23px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 500;
      color: #1890FF;
      line-height: 32px;
    }
    .briefIntroduction {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      margin: 20px 0 12px 0;
      text-indent: 2em;
    }
    .email {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-bottom: 20px;
      line-height: 22px;
    }
    .introduce {
      margin-top: 10px;
     
    }
    .introduceBorder {
      border-top: 1px solid rgba(0,121,239,.5);
    }
    .introduceItem {
      margin: 10px 0;
      position: relative;
    }
    .introduceItem :hover .iconRight{
      color: #0091FF;
    }
    .introduceItemTitle {
      width: 100px;
      height: 34px;
      line-height: 34px;
      z-index: 99;
      border: 1px solid #0091FF;
      text-align: center;
      color:  #0091FF;
      position: absolute;
      top: 25px;
      left: 0px;
    }
    .introduceItemTitleEn {
      width: 117px;
      line-height: 34px;
      border: 1px solid #0091FF;
      text-align: center;
      color:  #0091FF;
      position: absolute;
      z-index: 99;
      top: 25px;
      left: 0px;
    }
    .borderBottom {
      /* border-bottom: 1px solid #0091FF; */
    }
    .introduceItemImg {
      width: 80px;height: 80px;
      position: absolute;
      border-radius: 45px;
      overflow: hidden;
      top: 10px;
      left: 10px;
    }
    .introduceItemImgEn {
      width: 80px;height: 80px;
      position: absolute;
      border-radius: 45px;
      overflow: hidden;
      top: 10px;
      left: 10px;
    }
    .introduceItemName {
      width: 625px;
      position: absolute;
      top: 10px;
      left: 100px;
      padding: 10px 0;
    }
   
    .introduceItemPersonnel {
      width: 100%;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      text-align: center;
      color: #333333;
      line-height: 20px;/*原值28 临时处理*/
      max-height: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      cursor: pointer;
      }
    .introduceItemPersonnel:hover {
        color: #0091FF;
        
    }
    .introduceItemCountry {
      font-size: 14px;
      text-align: center;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }
    .regionalIntroduce {
      width: 620px;
      /* height: 66px;   */
      color: #333333;
      line-height: 22px;
      overflow: hidden;
      margin-left: 110px;
      font-size: 16px;
        max-height: 66px;
      /*margin-top: -20px;*/
        position: relative;
        top: -20px;
      /* text-indent: 2em; */
     
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .dynamic {
      padding: 20px 0 10px 0;
      font-size: 16px;
      font-family: HiraginoSansGB-W6, HiraginoSansGB;
      font-weight: normal;
      color: #1890FF;
      line-height: 30px;
    }
    .dynamicLeft {
      float: left;
      margin-top: 15px;
      width: 280px;
    }
    .dynamicImg {
      width: 100%;
      height: 200px;
    }
    .dynamicRight {
      float: right;
      margin-top: 15px;
      margin-right: 10px;
      width: 590px;
      color: #979797;
    }
    .dynamicTitle {
      float: left;
      width: 500px;
      color: #333333;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 40px;
      position: relative;
      text-indent: 1em;
    }
    .dynamicTitle::before{
      content: '';
      display: block;
      width: 8px;
      height: 8px;
      background: #0B82FF;
      position: absolute;
      top: 17px;
      left: 0;
    }
    .dynamicTime {
      line-height: 40px;
    }
    .map ul {
      padding: 20px 0px 20px 20px;
    }
    .map ul li {
      float: left;
      width: 130px;
      margin-right: 17px;
    }
    .mapImg {
      width: 130px;
      height: 100px;
    }
    .mapName {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #2C558A;
      text-align: center;
      height: 50px;
      margin-top: 10px;
    }
    .position {
      height: 80px;
      position: absolute;
      left: 50%;
      top: 100px;
      transform: translate(-50%,-50%);
    }
    .countryMapTitle {
      margin-top: 10px;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1890FF;
      line-height: 32px;
    }
    .countryMapMiss {
        margin-top: 20px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 40px;
        padding-bottom: 30px ;
        border-bottom: 1px solid #0B82FF;
    }
    .introduce_F5FAFF {
      background-color:#F5FAFF;
      margin-left: 125px;
      min-height: 200px;
    }
    .iconRight {
      float: right;
      margin-top: 5px;
    }
    .regionalIntroduce >>> p{
        margin: 0;
    }
</style>