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

<template>
    <div>
        <div  class="autoBox box">
            <div class="crumbs">
                <el-breadcrumb separator="/" style="float: left">
                    <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.ProjectAppraisal')}}</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="toViewMenu(menuItem.id,menuItem)">-->
<!--                      &nbsp;&nbsp;{{$t(menuItem.title)}}&nbsp; <span v-if="(index+1)!==menuItem.length">/</span>-->
<!--                    </span>-->
<!--                </el-breadcrumb>-->
                <div style="clear:both;"></div>
            </div>
            <div style="width: 100%;height:50px;color: #fff;background: #2C558A;text-align: center;font-size: 30px;line-height: 50px;margin-top: 14px;border-radius: 6px;border-radius: 6px;">{{$t('common.ProjectAppraisal')}}</div>
            <div style="width: 100%;margin-top: 20px;">
                <div style="width:316px;height: 236px;float: left">
                    <img src="@/assets/img/financialService/titleContent.png" alt="" width="100%;height:100%">
                </div>
                <div  style="width: 70%;float: right;margin:0 10px;color: #666666">
                        <p style="text-indent:2em;font-size: 16px;line-height: 32px">
                           {{$t('common.ProjectEaluationService')}}
                        </p>
                        <div style="width: 100%" class="projectList">
                            <ul>
                                <li>
                                    <div style="float: left">
                                        <img src="@/assets/img/financialService/projectIcon1.png" alt="" style="width: 27px;height: 27px;margin-top: 4px;">
                                    </div>
                                    <span style="margin-left: 5px;">{{$t('common.Quantitative')}}</span>

                                </li>
                                <li>
                                    <div style="float: left">
                                        <img src="@/assets/img/financialService/projectIcon2.png" alt="" style="width: 27px;height: 27px;margin-top: 4px;">
                                    </div>
                                    <span style="margin-left: 5px;"> {{$t('common.MicroBenefitAnalysis')}}</span>

                                </li>
                            </ul>
                        </div>
                </div>
                <div style="clear: both"></div>
                <div style="width: 100%;margin-top: 30px;display: flex;flex-wrap: wrap;justify-content: space-between;">
                    <div class="EvaList" v-for="(item,index) in Analysis">
                        <div style="width:50px;height:50px;position:absolute;right: 23px;top:23px;background: #fff;">
                            <img :src="getImg('icon'+(++index)+'.png')" alt=""  style="width: 60px;height: 65px">
                        </div>
                        <div class="analy">
                            <div>
                                <div class="rectangleOne"></div>
                                <span style="font-size: 20px;color: #666666;font-weight: 700;width: 90%;margin-left: 6px;float: left">{{$t(item.title)}}</span>
                                <div style="clear: both"></div>
                            </div>
                            <p v-html="$t(item.label)" class="analyLabel" :class="$i18n.locale=='zh'?'analyLabelZh':'analyLabelEn'"></p>
                        </div>
                    </div>
                </div>
            </div>
            <!--评估概要报告实例-->
            <div style="width: 100%;margin: 30px 0" class="reportList">
                <div style="font-size: 20px;color:#2C558A;font-weight: 700;height: 35px;border-bottom: 1px solid #2C558A">
                    <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="width: 6px;height:18px">
                    {{$t('common.ExamplesOfProject')}}
                </div>
                <div style="width:100%;margin-top: 20px;border-top: 1px dashed rgba(204, 204, 204,0.5)">
                    <ul class="ulOne">
                        <li v-if="Listitem.projectName&&Listitem.pdfToPictureFileIds" v-for="(Listitem,index) in progectReport"  style="cursor: pointer;padding: 20px 0;border-bottom: 1px dashed rgba(204, 204, 204,0.5);" @click="toView('projectPresentationDetails',Listitem.projectId)">
                            <div>
                                <img v-if="Listitem.technicalCategories=='ZNDW'" src="@/assets/img/financialService/reportIcon/smart1.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
                                <img v-if="Listitem.technicalCategories=='DKYGM'" src="@/assets/img/financialService/reportIcon/electnicity2.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
                                <img v-if="Listitem.technicalCategories=='DWGZ'" src="@/assets/img/financialService/reportIcon/transformation3.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
                                <img v-if="Listitem.technicalCategories=='DWHL'" src="@/assets/img/financialService/reportIcon/interconnection4.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
                                <img v-if="Listitem.technicalCategories=='DYGZ'" src="@/assets/img/financialService/reportIcon/supply5.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
                                <img v-if="Listitem.technicalCategories=='QJNY'" src="@/assets/img/financialService/reportIcon/cleanEnergy6.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
                                <img v-if="Listitem.technicalCategories=='LCAR'" src="@/assets/img/financialService/reportIcon/lcar7.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
                                <img v-if="!Listitem.technicalCategories" src="@/assets/img/financialService/reportIcon/u20188.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
<!--                                <p style="height: 86px">{{Listitem.projectName}}</p>-->
                                 <div style="height: 86px;width: 80%;border: none;background: none;float: right">
                                     <span style="display: inline-block;margin-top:20px">{{Listitem.projectName}}</span>
                                 </div>
                                <p style="clear: both"></p>
                            </div>

                        </li>
                    </ul>
                    <ul class="ulTwo">
                        <li v-if="Listitem.pdfToPictureFileIds"  v-for="(Listitem,index) in progectReport"  style="cursor: pointer;padding: 20px 0;border-bottom: 1px dashed rgba(204, 204, 204,0.5); " @click="Listitem.pdfToPictureFileIds?toView('FinancialServiceEvaluationPdfDetails',Listitem):''">
                            <div>
                                <img src="@/assets/img/financialService/pdf.png" alt="" style="width:50px;height: 50px;float: left;margin: 22px 40px 0 20px;">
                                <div style="height: 86px;width: 80%;border: none;background: none;float: right">
                                    <span style="display: inline-block;margin-top:20px">{{Listitem.projectReportName}}</span>
                                </div>
                                <p style="clear: both"></p>

                            </div>

                        </li>
                        <div style="width: 100%;margin: 20px 0;"></div>

                    </ul>
                    <div style="clear: both"></div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {getBaseProjectEvaluationReportInfos} from "@/api/financialService/baseProjectEvaluationReportInfo";
    import {sysAttachmentInfos} from '@/api/cooperation/baseCooperationUnit';
    export default{
        name:'FinancialServiceProjectEvaluation',
        data(){
            return{
                progectReport:[],
                menuIndex:this.$route.query.key,
                num:1,
                Analysis:[
                    {
                        id:1,
                        title:'common.AnalysisOfEconomic',
                        label:'common.SocialEnvironment'
                    },
                    {
                        id:2,
                        title:'common.EnergyAndElectricity',
                        label:'common.EnergyProduct'
                    },
                    {
                        id:3,
                        title:'common.economicBenefitAnalysis',
                        label:'common.EnergyAndPower'
                    },
                    {
                        id:4,
                        title:'common.socialBenefitAnalysis',
                        label:'common.SocialBenefit'
                    }

                ],
                menuList: [
                    {
                        id:1,
                        title:'common.FinancialInstitutions',
                        value:'FinancialInstitutions',

                    },
                    {
                        id:2,
                        title:'common.InvestmentGuide',
                        value:'FinancialServiceInvestmentGuide',
                    },
                    {
                        id:3,
                        title:'common.ProjectAppraisal',
                        // value:'FinancialServiceProjectEvaluation',
                    },
                    {
                        id:4,
                        title:'common.FundIdeas',
                        value:'FinancialServicesFundIdeas',
                    },


                ],
                params:{
                    // pageSize:"5",
                    // pageNo:"1",
                    language:'',
                    statusDict:'2'
                },

            }
        },
        mounted() {
            this.getData();

        },
        watch: {
            '$i18n.locale'(){
                this.getData();

            },
        },
        methods:{
            getData(){
                const that = this;
                this.params.language = this.$i18n.locale.toUpperCase();
                getBaseProjectEvaluationReportInfos(this.params).then((res)=>{
                    this.progectReport = res.data.baseProjectEvaluationReportInfos;
                })
            },
            toView(router,json){
                console.log(router,json)
                this.$router.push(
                    {
                        name:router,
                        query:{
                            key:json
                        }
                    }
                )
            },
            getImg(url){
                return require("@/assets/img/financialService/" + url);
            },
        }

    }
</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;
    }
   .projectList{
       margin-top: 34px;
   }
    .projectList ul li{
        font-size: 20px;
        /*margin-left: 20px;*/
        line-height: 32px;
        font-weight:400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .reportList{
        color: #666666;

    }
    .reportList .ulOne{
        width: 48%;
        font-size: 16px;
        color: #4F81BD;
        float: left;
        margin-bottom: 20px;

    }

   .reportList .ulTwo{
       width: 48%;
       font-size: 16px;
       color: #4F81BD;
       float: right;
       margin-bottom: 20px;
   }
    .ulOne li:nth-child(n) div{
        border: 1px solid #0091FF;
        border-radius: 10px;
        background: rgba(0, 145, 255, 0.05);

    }
    .ulOne li:nth-child(2n) div{
        border: 1px solid #57AC22;
        border-radius: 10px;
        background: rgba(89, 175, 34, 0.05);


    }
    .ulTwo li:nth-child(n) div{
        border: 1px solid  #0091FF;
        border-radius: 10px;
        background: rgba(0, 145, 255, 0.05);

    }
    .ulTwo li:nth-child(2n) div{
        border: 1px solid #57AC22;
        border-radius: 10px;
        background: rgba(89, 175, 34, 0.05);

    }
    .reportList ul li{
        height: 86px;
        font-size: 16px;
        /*line-height: 86px;*/
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
        /*white-space: nowrap;*/
    }
    .EvaList{
        width:48%;
        height: 328px;
        margin-bottom: 40px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .EvaList:nth-child(1),.EvaList:nth-child(4){
         border: 1px solid #57AC22;
         background: rgba(89, 175, 34, 0.05);
     }
    .EvaList:nth-child(2),.EvaList:nth-child(3){
        border: 1px solid #0091FF;
        background: rgba(0, 145, 255, 0.05);
    }
    .analy{
        padding:50px 50px;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .analyLabel{
        margin-top: 10px;
        font-size: 16px;
    }
    .analyLabelZh{
        line-height: 30px;

    }
    .analyLabelEn{
        line-height: 20px;

    }
    .rectangleOne{
        width: 20px;
        height: 20px;
        background: #92CB74;
        float: left;

    }


</style>