dev/dcp-web-gate/src_old/views/FinancialServices/FinancialServiceInvestmentGuide.vue

<template>
    <div>
        <div  class="autoBox box">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'financialServices' }">{{$t('common.FinancialServices')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$t('common.InvestmentGuide')}}</el-breadcrumb-item>
                </el-breadcrumb>

            </div>
            <div style="padding: 0 20px">
                <div style="background:#fff;margin-top: 14px;">
                    <div style="width: 100%;height:50px;color: #fff;background: #2C558A;text-align: center;font-size: 28px;font-weight: 700;line-height: 50px;border-radius: 6px;">{{$t('common.InvestmentGuidelines')}}</div>
                </div>
                <div style="margin-top: 20px;">
                    <div style="width: 100%;padding:20px 0;border-bottom: 2px solid rgba(151,151,151,.5);color: #666666" v-for="(item,index) in initData">
                        <div style="width: 180px;height:254px;float: left;" v-if="item.photo && item.photo != null"  @click="toView('FinancialServicesGuideDetails',item.baseEntityId)">
                            <img :src="'api/file/pub/'+ item.photo" alt="" style="width: 100%;height: 100%;">
                        </div>
                        <div style="width: 180px;height:254px;float: left;position: relative;text-align: center" v-if="!item.photo || item.photo==null" >
                            <img src="@/assets/img/financialService/investmentlogo.png" alt="" style="width: 100%;height: 100%;">
                            <div style="position: absolute;top: 50px;color: #fff; padding: 0 10px;font-size: 10px;width: 89%">
                                {{item.name}}
                            </div>
                            <div style="color: #173F79;font-size: 12px;position: absolute;bottom: 50px;padding: 0 10px;font-size: 10px;width: 89%">
                                {{$t('common.TitleBottom')}}
                            </div>
                        </div>
                        <div style="width:79.5%;height:254px;float: right;margin-left: 10px;position: relative">
                            <span style="font-size: 20px;font-weight: 700;cursor: pointer;" >{{item.name}}</span>
                            <div v-html="item.introduction" style="width: 100%;font-size:16px;text-align: justify;line-height: 20px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;"></div>
                            <div v-if="item.countries" style="width: 100%;font-size: 16px;position: absolute;bottom: 30px">{{$t('common.FocusCountry')}}：
                              <span v-for="count in changeStr(item.countries).split('、')">
                                <el-button type="text" @click="unitCountryFour(count)">  {{count}}</el-button>
                              </span>
<!--                              <span style="color: #0091FF">{{changeStr(item.countries)}}</span>-->
                            </div>
                            <!--语言版本-->
                            <div style="margin-top: 54px;font-size: 16px;position:absolute;bottom: 0" v-if="languageList[item.baseEntityId]">
                                <span>
                                    <span  v-show="languageList[item.baseEntityId].entityZh == 1">{{$t('common.Chinese')}}</span>

                                    <span  v-show="languageList[item.baseEntityId].entityEn == 1"> | {{$t('common.English')}}</span>

                                    <span v-show="languageList[item.baseEntityId].entityFr == 1"> | {{$t('common.French')}}</span>

                                    <span  v-show="languageList[item.baseEntityId].entityDe == 1"> | {{$t('common.German')}}</span>

                                    <span  v-show="languageList[item.baseEntityId].entityEs == 1"> | {{$t('common.Spanish')}}</span>

                                     <span  v-show="languageList[item.baseEntityId].entityJa == 1"> | {{$t('common.Japanese')}}</span>

                                    <span  v-show="languageList[item.baseEntityId].entityAr == 1"> | {{$t('common.Arabic')}}</span>

                                    <span  v-show="languageList[item.baseEntityId].entityRu == 1"> | {{$t('common.Russian')}}</span>
                                </span>
                                <span style="margin-left: 95px">{{formatDate(item.publishDate)}}</span>
                            </div>
                        </div>

                        <div style="clear: both"></div>
                    </div>
                    <div style="width: 100%;position: relative;height: 100px;">
                        <el-pagination
                                type="index"
                                style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                                background
                                :index="indexMethod"
                                layout="prev, pager, next"
                                :page-size="5"
                                :total="num-0"
                                @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
<!--                <div style="clear: both"></div>-->
                <!--            <div style="width:28%;height:100px;float: right;margin: 40px 0;">-->
                <!--其他机构相关研究报告-->
                <!--                <div class="relevanInformation">-->
                <!--                    <div class="informationTitle">{{$t('common.RelatedResearch')}}</div>-->
                <!--                    <div class="informationList">-->
                <!--                        <ul>-->
                <!--                            <li style="list-style: disc;margin-left: 20px;" v-for="reportIltem in reportList" @click="toInformationList1(reportIltem)">-->
                <!--                                <div class="list">-->
                <!--                                    {{reportIltem.name}}-->
                <!--                                </div>-->
                <!--                            </li>-->
                <!--                        </ul>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--投融资会议及活动-->
                <!--                <div class="relevanInformation">-->
                <!--                    <div class="informationTitle">{{$t('common.InvestmentAndFinancing')}}</div>-->
                <!--                    <div class="informationList">-->
                <!--                        <ul>-->
                <!--                            <li style="list-style: disc;margin-left: 20px" v-for="(InvestItem,index) in InvestmentList" @click="toDetails('ConferenceResult',InvestItem.id)">-->
                <!--                                <div class="list">-->
                <!--                                    {{$i18n.locale=='en'?InvestItem.meetingNameEn: InvestItem.meetingName}}-->
                <!--                                </div>-->
                <!--                            </li>-->
                <!--                            <li style="list-style: disc;margin-left: 20px" v-for="(activeItem,index) in activityList" @click="toDetails('cooperationExchangeListDetails',activeItem.baseActivityEntityId)">-->
                <!--                                <div class="list">-->
                <!--                                    {{activeItem.activityName}}-->
                <!--                                </div>-->
                <!--                            </li>-->
                <!--                        </ul>-->
                <!--                    </div>-->
                <!--                </div>-->

            </div>


          <div
              style="margin: 0 20px; margin-top: 20px; min-height: 200px"
              class="continents2"
          >
            <div style="border-bottom: 1px solid #0079ef; padding-bottom: 5px">
              <img
                  src="@/assets/img/cooperationExchange/20200608_03.gif"
                  alt=""
                  style="height: 20px; vertical-align: middle"
              />
              <span style="margin-left: 5px">{{
                  $t('common.EnterpriseShow')
                }}</span>
              <span
                  style="color: #333; font-size: 12px; float: right; cursor: pointer"
                  @click="ChangeUnitBatch"
              >{{ $t('common.NextBatch') }}</span
              >
            </div>
            <ul>
              <li
                  v-for="(item, index) in initData3"
                  :key="index"
                  @click="toViewTargtBack('enterpriseDetails',item)"
                  class="LiActive cursor"
              >
                <div style="position: relative; margin: 0 22px" class="border">
                  <div style="width: 100%; text-align: center; padding-top: 30px">
                    <div>
                      <img
                          :src="'/api/file/pub/' + item.photo"
                          alt=""
                          style="width: 100%; height: 160px"
                          v-if="item.photo"
                      />
                      <img
                          :src="'api/file/pub/' + '/def/projectdefault.png'"
                          alt=""
                          style="width: 100%; height: 160px"
                          v-if="!item.photo"
                      />
                    </div>
                    <div style="color: rgba(51, 51, 51, 1); font-weight: 700">
                      {{ item.unitName }}
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>




        </div>
    </div>
</template>

<script>
    import {getBaseInvestmentGuidelinesInfos} from '@/api/financialService/baseInvestmentGuidelinesInfo';
    import { getDicts } from "@/api/dict";
    import {getConfrences} from "../../api/meeting/meetingOutInfo";
    import {activityInfos} from "../../api/cooperation/baseCooperationUnit";
    import {getBaseResearchResultViews} from "../../api/research/baseResearchResultView";
    import {getCountryByName} from '@/api/country/countryList';
    import { getBaseUnitViews } from '@/api/baseUnitView';
    export default{
        name:'FinancialServiceInvestmentGuide',
        data(){
            return{
                initData:[],
                num:0,
                params:{
                    pageSize:"5",
                    pageNo:"1",
                    language:'',
                    statusDict:'2'
                },
                unitPage: {
                  pageSize: "4",
                  pageNo: "1",
                  areDict: '',
                  language: '',
                },
                unitNum: 0,
                initData3: [],
                reportList:[],
                InvestmentList:[],
                activityList:[],
                dictList:[],
                languageList:'',
            }
        },
        computed:{
            countryDictsMap: function () {
                return this.dictList.array2Obj('value', 'label');
            },
            changeStr(){
                return function (str) {
                    let newStr = '';
                    str.split(',').forEach(item =>{
                        newStr = newStr + this.countryDictsMap[item] + '、'
                    });
                    newStr = newStr.substring(0, newStr.lastIndexOf("、"));
                    return newStr ;
                }
            }
        },
        mounted() {
            this.getData();
            this.getDict();
            this.getMeetingAndActive();
            this.getactivityStatusDict();
            this.getreportList();
            this.getRecommended();
        },
        watch: {
            '$i18n.locale'(){
                this.getData();
                this.getDict();
                this.getMeetingAndActive();
                this.getactivityStatusDict();
                this.getreportList()

            },
        },
        methods:{
            getDict() {
                const that = this;
                if(this.$i18n.locale=='zh'){
                    getDicts(
                        "UNIT_COUNTRY_DICT"
                    ).then((res) => {
                        this.dictList = res.data[0];
                    });
                }else if(this.$i18n.locale=='en'){
                    getDicts(
                        "unit_country_dict_en"
                    ).then((res) => {
                        this.dictList = res.data[0];

                    });
                }
            },
            getData(dict){
                const that =this;
                this.params.language = this.$i18n.locale.toUpperCase();
                getBaseInvestmentGuidelinesInfos(this.params).then((res)=>{
                    this.initData = res.data.baseInvestmentGuidelinesInfos;
                    this.languageList = res.data.investmentGuidelinesEntitiesMap;
                    console.log(this.languageList)
                    if (this.initData){
                        this.num = res.data.page.totalCount;
                    }else{
                        this.num = '';
                    }
                    this.loading = false;

                })

            },
            toInformationList1(ele){
                let params = {
                    entityId:ele.entityId,
                    // researchResultFileId:ele.researchResultFileId,
                }
                this.toViewInformationList('resourceSharingDetails',params)
            },
            toViewInformationList(router, json) {
                clearInterval(this.timer);
                const {href} = this.$router.resolve({
                    name: router,
                    query: {
                        key:JSON.stringify(json),
                    }
                });
                window.open(href, '_blank');

            },
            toView(router,json){
                this.$router.push({
                    name:router,
                    query:{key:json}
                })
            },
            toDetails(router,json){
                // this.$store.commit('modify', router);
                window.localStorage.setItem('router', router);
                localStorage.setItem('conferenceId', json);
                const {href} = this.$router.resolve({
                    name: router,
                    query: {
                        key: json
                    }
                });
                window.open(href, '_blank');
            },
            getMeetingAndActive(){
                // 获取会议
                getConfrences().then((res)=>{
                    if(res.data.meetingBasicInfos){
                        let meetingLength = res.data.meetingBasicInfos.length;
                        this.InvestmentList = [];
                        for(let i=0;i<meetingLength;i++){
                            if(i<3){
                                this.InvestmentList.push(res.data.meetingBasicInfos[i])
                            }
                        }
                    }
                });
            },
            getactivityStatusDict(){
                let list={
                    pageSize:9,
                    pageNo:1,
                    language:this.$i18n.locale.toUpperCase(),
                    activityStatusDict:1, // 活动类型

                    activityArea:"",// 大洲

                }
                activityInfos(list).then(res=>{
                    if(JSON.stringify(res.data)!=='{}'){
                        let activityLength = res.data.activityInfos.length;
                        this.activityList = [];
                        for(let i=0;i<activityLength;i++){
                            if(i<2){
                                this.activityList.push(res.data.activityInfos[i])
                            }
                        }
                    }
                })
            },
            getreportList(){
                const that = this;
                let reportParams = {
                    pageSize: 5,
                    pageNo: 1,
                    language:this.$i18n.locale.toUpperCase(),
                    totalPage:'',
                    descStatus:'0'
                };
                getBaseResearchResultViews(reportParams).then((res)=>{
                    this.reportList = res.data.baseResearchResultViews;
                    console.log(this.reportList,'-----------------------------研究报告')
                })
            },
            //分页索引接着上一页的索引
            indexMethod(index){
                return (this.page-1)*10+index+1;
            },
            handleCurrentChange(val) {
                this.params.pageNo = val;
                this.loading = true;
                this.getData();
            },
          unitCountryFour:function (unitCountry){

            getCountryByName(unitCountry).then(res=>{
              console.log("请求返回的值",res.data)
              if (res.data.countryById != null ){
                this.$store.commit('modify', 'countryNationalSpace')
                window.localStorage.setItem('router', 'countryNationalSpace')
                const { href } = this.$router.resolve({
                  name: 'countryNationalSpace',
                  query: {
                    key: res.data.countryById,
                  },
                })
                window.open(href, '_blank')
              }else{
                alert("国别信息库中未维护该国别");
              }
            })
            console.log("当前语言版本",this.language);
            console.log("显示选中的国别信息",unitCountry);
          },
          //获取企业展示信息
          getRecommended(){
            const that =this;
            console.log("这是进入的数据内容了")
            /*  let unitPage={
                recommendFlag:'y',
                pageSize: "4",
                pageNo: "1",
                areDict: that.initData.areDict,
                language:this.$i18n.locale.toUpperCase(),
                descStatus:'0',
              }*/
           /* this.unitPage.areDict = that.initData.areDict;*/
            this.unitPage.language = this.$i18n.locale.toUpperCase();
            getBaseUnitViews(this.unitPage).then((res) => {
              if (res.data.baseUnitViews) {
                this.uniNum = res.data.page.totalCount;
                that.initData3 =  res.data.baseUnitViews;
                console.log(res.data.baseUnitViews,that.init);
              } else {
                this.initData3 = []
                this.uniNum = ''
                // this.$message("当前推荐企业暂无信息");
              }
              this.loading = false;
            });
          },
          ChangeUnitBatch() {
            if (this.unitPage.pageNo * 5 <= this.uniNum) {
              //this.$message(this.$t('common.Nodataavailable'));
              this.unitPage.pageNo++
              this.getRecommended()
            }
          },
        }

    }
</script>

<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
    p{
        margin: 0;
        padding: 0;
    }
    .relevanInformation{
        min-height: 200px;
        padding: 0 0 0 20px;
        overflow: hidden;
    }
    .informationTitle{
        border-bottom: 1px solid  #2C558A;
        padding: 0 0 10px 0;
        font-weight: 600;
        font-size: 20px;
        color: #666666;
        opacity: 0.9;
        color: #2C558A;
    }
    .informationList ul{
        margin-top: 14px;
        font-size: 14px;
        list-style-type:disc;
        padding: 0 30px 0 0;
        box-sizing: border-box;
    }
    .informationList ul li{
        width: 100%;
        /*height: 34px;*/
        line-height: 34px;
        margin-bottom: 12px;
        color: #666666;
        cursor: pointer;
        list-style-type: disc;
    }
    .informationList ul li .list{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;

    }
    .continents2 ul {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
    }

    .continents2 ul li {
      width: 24%;
      /* padding: 18px 30px; */
      background: #fff;
      margin-bottom: 20px;
      color: #999;
      /* height: 384px; */
      /* border-right: 1px solid #EAEAEA; */
      border: 3px solid transparent;
      box-shadow: 5px 5px 5px #fafafa;
    }

    .continents2 ul li:nth-of-type(5) {
      border-right: none;
    }

</style>