dev/dcp-web-gate/src_old/views/FinancialServices/FinancialServicesAgency.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.FinancialInstitutions')}}</el-breadcrumb-item>
                </el-breadcrumb>
<!--                <el-breadcrumb separator="/" style="float: right;margin:0px 15px 0 0">-->
<!--                    <span class="cursor"-->
<!--                          v-for="(menuItem,index) in menuList"-->
<!--                          :class="menuIndex==menuItem.id?'menu1':'menu2'"-->
<!--                         @click="toView(menuItem.id,menuItem)">-->
<!--                      &nbsp;&nbsp;{{$t(menuItem.title)}}&nbsp; <span v-if="(index+1)!==menuItem.length">/</span>-->
<!--                    </span>-->
<!--                </el-breadcrumb>-->
            </div>
            <div style="margin-top: 20px;">
                <Screen v-bind:screen2="screen2" :screen1="screen1" :screen3="screen3" @screenBack="screenBack"></Screen>
            </div>

            <!-- 项目个数 -->
            <div style="margin-top: 20px;margin-left: 20px;;width: 1200px;font-size:14px;color: #666666;">
                {{$t('common.totalFind')}}<span style="color: #666666;font-size: 14px;font-weight: 600;"> {{totalnum}}</span> {{$t('common.institutions')}}
            </div>
            <div :class="page.sortType==0?'projectSlot1':'projectSlot2'"  class="cursor">
                <span
                        style="padding:0 13px;height: 35px;display: inline-block;width: 120px;"
                        @click="changeList(0)"
                        :class="page.sortType==0?'screen1':'screen2'"
                >{{$t('common.LatestUpdate')}}</span>
                <span
                        id="attention2"
                        style="padding:0 13px;height: 35px;display: inline-block;width: 120px;"
                        @click="changeList(1)"
                        :class="page.sortType==1?'screen1':'screen2'"
                >{{$t('common.MostAttention')}}</span>

                <div style="float: right;margin-right: 50px;font-size: 20px;" class="menu">
                    <i class="fa fa-bars" aria-hidden="true" :style="projectFaIcon==1?'color:#000':'color:#bcbcbc'" style="margin-right: 20px;" @click="projectFaIcon=1"></i>
                    <i class="el-icon-menu" @click="projectFaIcon=2" :style="projectFaIcon==2?'color:#000':'color:#bcbcbc'"></i>
                </div>
            </div>
            <div style="margin: 0 20px;border-top: 1px solid #cccccc "></div>
            <!-- 项目列表 -->
            <div v-show="projectFaIcon==1" class="projectList" v-for="(item,index) in init" :key="item.id">
                <div style="width: 100%;" @click="toViewTargtBack('FinancialServicesDetails',item.baseEntityId)">
                    <div style="width: 25%;height:206px;float: left;border: 1px solid rgba(221, 221, 221, 0.5)">
                        <img :src="'api/file/pub/'+ item.photo" alt="" style="width: 100%;height: 100%">
                    </div>
                    <div style="width:70%;margin-left: 20px;float:left;font-size: 14px;line-height: 25px;">

                        <!-- 项目名称 -->
                        <span class="initData_label cursor">{{item.unitName}}</span>
                        <div style="height: 20px">
                            <span style="margin-right: 90px" v-show="item.unitRegion">{{areaDictsMap[item.areaDict]}}-{{countryDictsMap[item.unitCountryDict]}}-{{item.unitRegion}}</span>
                            <span :style="item.unitRegion?'position: absolute;left: 550px':'float:left'">{{$t('common.DateOfEstablishment')}}：{{formatDate(item.setUpDate)}}</span>
                            <span style="clear: both"></span>
                        </div>
                        <div style="margin-top: 5px">
                            <!--产品与服务数量-->
                             <span>
                                {{$t('common.ProductAndService')}}
                              (<span style="color: blue">{{informationNumMap[item.baseEntityId] ?informationNumMap[item.baseEntityId][1]:'0'}}</span>)
                            </span>
                             <span style="position: absolute;left: 550px">
                                {{$t('common.InvestmentAndCases')}}
                                (<span style="color: blue">{{informationNumMap[item.baseEntityId] ?informationNumMap[item.baseEntityId][2]:'0'}}</span>)
                            </span>
                        </div>
                        <div style="height: 65px;overflow: hidden;text-overflow: ellipsis;" v-show="item.unitScope">
                            {{$t('common.BusinessScope')}}{{item.unitScope}}
                        </div>
                        <div v-show="item.unitIntroduction">
                            {{$t('common.Introduce')}}：
                            <p style="width:100%;overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;margin-top: -10px" v-html="item.unitIntroduction"></p>
                        </div>
<!--                        <div v-show="item.unitLabel" v-for="labelItem in unitMark">-->
<!--                            <div style="width: 50px;height: 20px;border: 1px solid #ff9966;margin-right: 10px;text-align: center;line-height: 20px">{{labelItem}}</div>-->
<!--                        </div>-->

                    </div>
                    <div style="clear: both"></div>
                </div>
            </div>
            <!--项目列表 ul布局 -->
            <ul
                v-show="projectFaIcon==2"
                class="initListBox2">
                <li v-for="(item,index) in init" :key="item.id" class="cursor"
                    style="width: 24%;position: relative;"
                    @click="toViewTargtBack('FinancialServicesDetails',item.baseEntityId)">
                    <img :src="'/api/file/pub/'+item.photo" alt="" style="width: 100%;height: 240px;border: 1px solid rgba(221,221,221,.5);">
                    <div style=" color: #666;height: 90px;overflow: hidden;">
                        <div style="line-height: 1.4em;">
                            <span class="initData_label2 cursor">{{item.unitName}}</span>
                        </div>
                        <div style="height: 20px;">
                        </div>
                    </div>
                </li>
            </ul>
<!--            <ul v-show="projectFaIcon==2" class="initListBox2">-->
<!--                <li  v-for="(item,index) in init" :key="item.id"-->
<!--                     @click="toViewTargtBack('FinancialServicesDetails',item.baseEntityId)"-->
<!--                     class="cursor" style="width:275px;height:210px;position: relative;margin-top: 20px;text-align: center">-->
<!--&lt;!&ndash;                    <div style="width:100%;height: 200px;border: 1px solid rgba(221, 221, 221, 0.5)">&ndash;&gt;-->
<!--&lt;!&ndash;                        <img :src="'api/file/pub/'+ item.photo" alt="" style="width: 100%;height: 100%">&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--                    <div style="margin-top: 10px">-->
<!--&lt;!&ndash;                        &lt;!&ndash; 是否推荐&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                        <span style="float:right;position: absolute;right: 2px;top: 0;" v-if="item.recommendFlag=='y'&& $i18n.locale=='zh'">&ndash;&gt;-->
<!--&lt;!&ndash;                            <img src="@/assets/img/projectPresentation/project-recommended.png" alt="">&ndash;&gt;-->
<!--&lt;!&ndash;                        </span>&ndash;&gt;-->
<!--&lt;!&ndash;                        <span style="float:right;position: absolute;right: 2px;top: 0;" v-if="item.recommendFlag=='y'&& $i18n.locale=='en'">&ndash;&gt;-->
<!--&lt;!&ndash;                            <img src="@/assets/img/projectPresentation/project-recommendedEn.png" alt="" style="height: 24px">&ndash;&gt;-->
<!--&lt;!&ndash;                        </span>&ndash;&gt;-->
<!--                        <span class="ul_initData_label cursor" style="color: #666;">{{item.unitName}}</span>-->
<!--                    </div>-->
<!--                </li>-->
<!--                <li style="clear: both"></li>-->
<!--            </ul>-->
            <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="12"
                        :total="num-0"
                        @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    import Base from "@/views/base/Base";
    import Screen from "@/components/screen";
    import { getBaseFinancialInstitutionInfos,getTotalCount} from "@/api/financialService/baseFinancialInstitutionInfo";
    import { getDicts } from "@/api/dict";
    import {getInformationList,getFinancialInformationCountByIds} from "../../api/financialService/cmsInformationViews";
    export default {
        name: "FinancialServicesAgency",
        components: { Screen},
        extends: Base,

        data() {
            return {
                index: 0,
                loading: true,
                totalnum: '',
                navRouter:"FinancialServicesAgency",
                projectFaIcon:2,
                unitCountryDicts:[],
                unitAreaDicts:[],
                informationNumMap:{},
                unitMark:'',
                page: {
                    pageSize: "12",
                    pageNo: "1",
                    language:'',
                    sortType:'0',
                    region: ''
                },
                num:0,
                screen1: {
                    value:'common.Region',
                    item: [
                        {
                            value:null,
                            ifValue:true,
                            label:'common.All'
                        },{
                            ifValue:false,
                            value:'0',
                            label:'国内'
                        },{
                            ifValue:false,
                            value:'1',
                            label:'国际'
                        },
                    ],
                },
                screen1ZH: {
                    value:'common.Region',
                    item: [
                        {
                            value:null,
                            ifValue:true,
                            label:'common.All'
                        },{
                            ifValue:false,
                            value:'0',
                            label:'国内'
                        },{
                            ifValue:false,
                            value:'1',
                            label:'国际'
                        },
                    ],
                },
                screen1EN: {
                    value: "common.Region",
                    item: [
                        {
                            value:null,
                            ifValue:true,
                            label:'common.All'
                        },{
                            ifValue:false,
                            value:'0',
                            label:'Domestic'
                        },{
                            ifValue:false,
                            value:'1',
                            label:'International'
                        },
                    ],
                },
                screen2: {
                    value:'common.Type',
                    item: [],
                },
                screen3:{
                    value:'common.Letter',
                    item:[
                        {
                            value:null,
                            ifValue:true,
                            label:'common.All'
                        },{
                            ifValue:false,
                            value:'A',
                            label:'A'
                        },{
                            ifValue:false,
                            value:'B',
                            label:'B'
                        },{
                            ifValue:false,
                            value:'C',
                            label:'C'
                        },{
                            ifValue:false,
                            value:'D',
                            label:'D'
                        },{
                            ifValue:false,
                            value:'E',
                            label:'E'
                        },{
                            ifValue:false,
                            value:'F',
                            label:'F'
                        },{
                            ifValue:false,
                            value:'G',
                            label:'G'
                        },{
                            ifValue:false,
                            value:'H',
                            label:'H'
                        },{
                            ifValue:false,
                            value:'I',
                            label:'I'
                        },{
                            ifValue:false,
                            value:'J',
                            label:'J'
                        },{
                            ifValue:false,
                            value:'K',
                            label:'K'
                        },{
                            ifValue:false,
                            value:'L',
                            label:'L'
                        },{
                            ifValue:false,
                            value:'M',
                            label:'M'
                        },{
                            ifValue:false,
                            value:'N',
                            label:'N'
                        },{
                            ifValue:false,
                            value:'O',
                            label:'O'
                        },{
                            ifValue:false,
                            value:'P',
                            label:'P'
                        },{
                            ifValue:false,
                            value:'Q',
                            label:'Q'
                        },{
                            ifValue:false,
                            value:'R',
                            label:'R'
                        },{
                            ifValue:false,
                            value:'S',
                            label:'S'
                        },{
                            ifValue:false,
                            value:'T',
                            label:'T'
                        },{
                            ifValue:false,
                            value:'U',
                            label:'U'
                        },{
                            ifValue:false,
                            value:'V',
                            label:'V'
                        },{
                            ifValue:false,
                            value:'W',
                            label:'W'
                        },{
                            ifValue:false,
                            value:'X',
                            label:'X'
                        },{
                            ifValue:false,
                            value:'Y',
                            label:'Y'
                        },{
                            ifValue:false,
                            value:'Z',
                            label:'Z'
                        }],
                },
                menuList: [
                    {
                        id:1,
                        title:'common.FinancialInstitutions',
                    },
                    {
                        id:2,
                        title:'common.InvestmentGuide',
                        value:'FinancialServiceInvestmentGuide',
                    },
                    {
                        id:3,
                        title:'common.ProjectAppraisal',
                        value:'FinancialServiceProjectEvaluation',
                    },
                    {
                        id:4,
                        title:'common.FundIdeas',
                        value:'FinancialServicesFundIdeas',
                    },


                ],
                menuIndex:this.$route.query.key,
                init: [],
                dict: {},
                recommend: [],
                Initials:'',
                informationNumMap:{},
                screenIndex: 0,
            };
        },

        computed:{
            countryDictsMap: function () {
                return this.unitCountryDicts.array2Obj('value', 'label');
            },
            areaDictsMap: function () {
                return this.unitAreaDicts.array2Obj('value', 'label');
            },
        },
        mounted() {
            this.getData();
            this.getCountry();
            this.$store.commit('modify', 'enterprise');
            window.localStorage.setItem('router', 'enterprise');
        },
        watch: {
            '$i18n.locale'(){
                this.getData();
                this.getCountry();
                this.getBase()

            },
        },
        methods: {

            getData: function (){
                if(this.$i18n.locale=='zh'){
                    // this.menuList = this.menuListZH
                    getDicts(
                        "FINANCIAL_INSTITUTIONS_TYPE_DICT"
                    ).then((res) => {
                        this.screen2.item = res.data[0];
                        let both={
                            label:'全部',
                            value:null
                        };
                        this.screen2.item.unshift(both);
                        this.loading = false;
                        this.screen1 = this.screen1ZH;

                    });
                }else if(this.$i18n.locale=='en'){
                    // this.menuList = this.menuListEN
                    getDicts(
                        "FINANCIAL_INSTITUTIONS_TYPE_DICT_EN"
                    ).then((res) => {
                        this.screen2.item = res.data[0];
                        let both={
                            label:'All',
                            value:null
                        };
                        this.screen2.item.unshift(both);
                        this.loading = false;
                        this.screen1 = this.screen1EN;
                    });
                };
                this.getBase()
            },
            getBase(dict) {
                const that =this;

                this.page.language = this.$i18n.locale.toUpperCase(),
                    this.page.region =  this.dict.region;
                getBaseFinancialInstitutionInfos(this.page).then((res) => {
                    this.init = res.data.baseFinancialInstitutionInfos;
                    this.unitMark=[];
                    // this.init.unitLabel = [];
                    if(this.init){
                        let baseEntityIds = [];
                        for(let i=0;i<this.init.length;i++){
                            baseEntityIds.push(this.init[i].baseEntityId);
                            if (this.init[i].unitLabel){
                                this.unitMark.push(this.init[i].unitLabel.split('","'));
                            }
                            if(this.init[i].photo == null || this.init[i].photo == false){
                                this.init[i].photo = '/def/def1.png';
                            }
                            // this.getServiceList(i)
                        };

                        getFinancialInformationCountByIds(baseEntityIds,this.$i18n.locale.toUpperCase()).then((res)=>{
                            this.informationNumMap = res.data;
                        })

                    }
                    this.totalnum=0;
                    if (res.data.page){
                        this.totalnum = res.data.page.totalCount;
                        this.num = res.data.page.totalCount;
                    }else{
                        this.totalnum = '0';
                        this.num = '';
                    }
                    this.loading = false;
                });

            },

            // getServiceList(i) {
            //     const that =this;
            //
            //     const params1={
            //         pageSize:'5',
            //         pageNo:'1',
            //         businessType:'financial_institutions',
            //         businessId:that.init[i].baseEntityId,
            //         language:this.$i18n.locale.toUpperCase(),
            //         typeDict:'1'
            //     };
            //     getInformationList(params1).then(res => {
            //         that.serveceNum.push(res.data.page.totalCount);
            //     });
            //     const params2={
            //         pageSize:'5',
            //         pageNo:'1',
            //         businessType:'financial_institutions',
            //         businessId:that.init[i].baseEntityId,
            //         language:this.$i18n.locale.toUpperCase(),
            //         typeDict:'2'
            //     };
            //     getInformationList(params2).then(res => {
            //         that.exampleNum.push(res.data.page.totalCount);
            //
            //     });
            //
            // },
            handleCurrentChange(val) {
                this.page.pageNo = val;
                this.loading = true;
                this.getBase();
            },
            //跳转详情
            toViewTargtBack(router,json){
                this.$router.push({
                    name: router,
                    query:{
                        key:json,
                    }
                })
            },
            toView(routerId, json) {
                console.log(routerId,json)
                if(routerId===1){
                    this.$router.push({
                        name: 'FinancialServicesAgency',
                        id:routerId,
                        query:{
                            key:json.id,
                        }
                    })
                } else {
                    this.$router.push({
                        name:json.value,
                        id:routerId,
                        value:this.init.value,
                        query:{
                            key:json.id,
                        }
                    })

                }

            },
            screenBack(data) {
                this.dict.region = data.click1;
                this.dict.institutionTypeDict = data.click2;
                this.dict.initial = data.click3;
                let obj = Object.assign(this.page, this.dict);
                this.page = obj;
                this.page.Initials=data.click3?data.click3.toString():'';
                this.getBase(this.page);
                this.loading = true;
            },
            changeList(i) {
                this.page.sortType=i;
                this.getBase();
            },
            //分页索引接着上一页的索引
            indexMethod(index){
                return (this.page-1)*10+index+1;
            },
            getCountry(){
                getDicts(this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT,CONTINENT_CODE_DICT':'unit_country_dict_en,CONTINENT_CODE_DICT_EN').then((res)=>{
                    this.unitCountryDicts = res.data[0];
                    this.unitAreaDicts = res.data[1]
                })
            },


        },
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin-left: 20px;
    }
    body {
        margin: 0;
    }
    li {
        display: inline-block;
        color: #1251a7;
        margin-right: 13px;
    }
    .initData_label {
        color: #666666;
        font-weight: 700;
        font-size: 16px;
        line-height: 42px;
    }
    .ul_initData_label{
        color: #666;
        font-size: 16px;
        line-height: 42px;
    }
    .initData_label2 {
        color: #666666;
        font-weight: 700;
        font-size: 16px;
        line-height: 42px;
    }
    .initData_label:hover {
        color: #2c558a;
    }
    .recommend {
        margin-top: 15px;
        margin-left: 100px;
    }
    .recommend li {
        display: inline-block;
        width: 170px;
        /* height: 130px; */
        text-align: center;
        margin-right: 15px;
    }
    .enterprise_style_span {
        display: block;
        width: 85px;
        text-align: center;
        /* height: 50px; */
        border-bottom: 2px solid #6699ff;
        margin-left: 10px;
        line-height: 50px;
        color:#6c819d;
        font-size: 18px;
        font-weight: 700;
    }
    .Initials1 {
        color: red;
    }
    .projectSlot1{
        height: 35px;width: 100%;line-height: 35px;
        margin: 30px 20px;
        background: url("~@/assets/img/projectPresentation/project-front.png") no-repeat;
    }
    .projectSlot2{
        height: 35px;width: 100%;line-height: 35px;
        margin: 30px 20px;
        background: url("~@/assets/img/projectPresentation/project-behind.png") no-repeat;
    }
    .screen1 {
        color: rgb(0, 0, 0);
        font-size: 14px;
        text-align: center;
    }
    .screen2 {
        text-align: center;
        font-size: 14px;
        color: #979292;
    }
    .projectList{
        margin: 20px 50px 0 50px;
        padding-bottom: 10px;
        /* margin-left:50px; */
        font-size:14px;
        color: #333;
        /*height: 200px;*/
        position: relative;
        border-bottom: 1px solid #bcbcbc;
    }
    .menu i:hover{
        color: #0079ef;
    }
    .initListBox {
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        font-size:14px;
        color: #333;
        min-height: 200px;
        position: relative;
        border-bottom: 1px solid #E4E4E4;
    }
    .initListBox2{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        font-size:14px;
        color: #666;
        position: relative;

    }
    .initListBox2 li{
        margin-right:0;
        margin-left: 9px;
    }
    .projectBox{
        width: 100%;
    }
    .relevan{
        width:22%;
        float:right;
    }
    .relevanInformation{
        height: 300px;
        padding: 0 20px;
        overflow: hidden;
    }
    .informationList{
        width: 100%;
        font-size: 14px;
    }
    .informationTitle{
        font-size: 14px;
        height: 30px;
        border-bottom: 1px solid #2C558A;
    }
    .informationList ul{
        margin-top: 14px;
    }
    .informationList ul li{
        width: 100%;
        margin-bottom: 24px;
        color: #666666;
        cursor: pointer;
        font-size: 12px;
    }
    .informationList ul li span{
        width: 90%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .meetingImg{
        width: 100%;
        height: 150px;
    }
    .menu1 {
        color:#666666;
    }
    .menu2 {
        font-size: 14px;
        color:#bebebe;
    }
</style>