dev/dcp-web-gate/src_old/views/projectPresentation/projectPresentationDetails2.vue

<template>
  <div>
    <div class="autoBox boxs">
      <div>
        <el-breadcrumb separator="/" style="float: left;margin:15px ">
          <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('common.ProjectResources')}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="autoBox boxs search" >
      <!-- 搜索框位置 -->
      <!-- <el-input :placeholder="$t('common.EnterContent')"
            v-model="params.fuzzySearch"
            class="input-with-select"
            maxlength="50"
            show-word-limit
            style="width: 650px;margin-left: 20px;padding: 20px 0;">
      <el-button class="cursor"
              slot="append"
              type="primary"
              @click="getData">{{$t('common.Search')}}</el-button>
      </el-input> -->
      <!-- 条件选择位置 -->
      <div class="area">
        <Screen v-bind:screen1="screen1s" :screen2="screen2s" :screen1def="screen1def" :screen2Item="screen2Item" @screenBack="screenBack"></Screen>
      </div>
      <!-- 最近发布和最多关注 -->
      <div>
        <div style="margin:30px 20px 0 20px;height:100px;border-bottom:1px solid #aaaaaa;">
          <div style="margin: 20px 0;width: 1200px;font-size:14px;color: #000;">
            <i class="fa fa-ioxhost" aria-hidden="true"></i>
            {{$t('common.totalFind')}}
            <span style="color: #000;font-size: 14px;font-weight: 600;">{{num}}</span>  {{$t('common.Projects')}}
          </div>

          <!--          :class=" index==0?'projectSlot2': index==1?'projectSlot3':'projectSlot1'"-->

          <div
              :class="islogin?index==0?'projectSlot2': index==1?'projectSlot3':'projectSlot1':index==0?'projectSlot4':'projectSlot5'"
              class="cursor"
          >
            <span
                style="padding:0 13px;height: 35px;display: inline-block;width: 120px;"
                v-show="islogin"
                @click="screen(3)"
                :class="index==3?'screen2':'screen1'"
            >{{$t('common.IntelligentRecommendation')}}</span>
            <span
                style="padding:0 13px;height: 35px;display: inline-block;width: 120px;"
                @click="screen(0)"
                :class="index==0?'screen2':'screen1'"
            >{{$t('common.LatestRelease')}}</span>
            <span
                id="attention2"
                style="padding:0 13px;height: 35px;display: inline-block;width: 120px;"
                @click="screen(1)"
                :class="index==1?'screen2':'screen1'"
            >{{$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>

      </div>
      <!-- 项目列表 -->
      <div v-show="projectFaIcon==1" class="projectList" v-for="(item,index) in initData" :key="index">
        <div style="color:#333">

          <!-- 项目图片 -->
          <div style="position: absolute;left: 0;top: 0px;width: 224px;height: 182px;" class="newtip">
            <img :src="'api/fileextend/pub/'+ item.bannerList[0] + '?custom=224_182'" alt style="width: 224px;height: 182px;"/>
            <!-- 最新发布标志 -->
            <!-- <img src="@/assets/img/projectPresentation/newTip.png" alt="" v-if="ifnew(index)" style="position: absolute;top: 0;left: 0;"> -->
            <!-- 最新发布标志 -->
            <!--            <img src="@/assets/img/projectPresentation/newTip.png" alt="" v-if="ifnew(index) && $i18n.locale=='zh'" style="position: absolute;top: 0;left: 0;width:44px;">-->
            <!--            <img src="@/assets/img/projectPresentation/NEW.png" alt="" v-if="ifnew(index) && $i18n.locale=='en'" style="position: absolute;top: 0;left:0;width:44px;">-->
            <!-- 推荐项目标志 -->
            <span style="float:right;position: absolute;right: 0;top: 0;width: 55px;"
                  v-if="item.recommendFlag=='y'&& $i18n.locale=='zh'">
                  <img src="@/assets/img/projectPresentation/recommendzh.png" alt="" style="width: 100%;">
              <!-- {{$t('common.RecommendedProject')}} -->
          </span>

            <span style="float:right;position: absolute;right: 0;top: 0;width:55px;"
                  v-if="item.recommendFlag=='y'&& $i18n.locale=='en'">
                  <img src="@/assets/img/projectPresentation/recommenden.png" alt="" style="width: 100%;">
              <!-- {{$t('common.RecommendedProject')}} -->
          </span>
          </div>

          <div style="margin-left: 240px;margin-top: 30px;width: 700px; font-size: 12px;position: relative;"
               @click="toView('projectPresentationDetails',item.projectId,index)">
            <div style="width: 100%;">
              <!-- 项目名称 -->
              <span class="initData_label cursor" >{{item.projectName}}</span>
              <div class="newTitle2" v-if="ifnew(index)">new</div>

            </div>
            <div style="line-height: 25px;width: 810px;">
              <span style="margin-right: 100px;">
                <i class="el-icon-location-outline"></i>
                {{$t('common.ProjectArea')}}:  {{item.bannerFour}}
              </span>
            </div>
            <div style="line-height: 25px;width: 810px;">
              <span>
                <i class="el-icon-office-building" aria-hidden="true"></i>
                   {{$t('common.ProjectCategory')}}:  {{screen2sMap[item.technicalCategories]}}
              </span>
            </div>
            <div style="line-height: 25px;width: 810px;">
              <span>
<!--                <i class="fa fa-star-o"></i>-->
                <!--                {{item.num == 'null' || item.num == undefined? 0:item.num}}{{$t('common.HasAttentiond')}}/{{handlePublishTimeDesc(toDate,item.createDate,$i18n.locale)}}  {{$t('common.release')}}-->
                 <i class="el-icon-c-scale-to-original" style="color: rgb(51, 51, 51);margin-top: 2px;"></i>
                   {{$t('common.CurrentStage')}}:  {{item.phaseType}}
              </span>
            </div>
            <div style="-webkit-box-orient: vertical;
              position:relative;
              line-height:1.4em;
              overflow: hidden;
              height:4.2em;margin-top: 5px;width: 810px;" class="plate">
              <span>
                    <i class=" el-icon-date" style="color: #999;"></i>
                     {{$t('common.ProjectDescription')}}:  {{item.bannerThree}}
              </span>
            </div>
          </div>
          <!--          <div style="margin-left: 200px;">-->
          <!--            <el-tag style="margin: 10px 10px 0 0;" v-for="(tag,j) in item.projectLabel">{{tag}}</el-tag>-->
          <!--          </div>-->

        </div>
      </div>
      <!--项目列表 ul布局 -->
      <ul
          v-show="projectFaIcon==2"
          class="initListBox2">
        <li v-for="(item,index) in initData" :key="index" @click="toView('projectPresentationDetails',item.projectId,index)"
            class="cursor" style="width: 370px;height: 530px;float: left;box-shadow:5px 5px 5px #f1f1f1 ;position: relative;border: 1px solid #ccc;margin-top: 20px;">
          <!-- 项目图片 -->
          <div class="newtip">
            <img
                :src="'api/fileextend/pub/'+ item.bannerList[0] +'?custom=370_220'" alt style="width:100%;height: 220px;"
            />
            <!-- 最新发布标志 -->
            <!--            <img src="@/assets/img/projectPresentation/newTip.png" alt="" v-if="ifnew(index) && $i18n.locale=='zh'" style="position: absolute;top: 0;left: 0;width:44px;">-->
            <!--            <img src="@/assets/img/projectPresentation/NEW.png" alt="" v-if="ifnew(index) && $i18n.locale=='en'" style="position: absolute;top: 0;left: 0;width:44px;">-->

          </div>
          <!-- 推荐项目标志 -->
          <span style="float:right;position: absolute;right: 0;top: 0;width: 55px;"
                v-if="item.recommendFlag=='y'&& $i18n.locale=='zh'">
                  <img src="@/assets/img/projectPresentation/recommendzh.png" alt="" style="width: 100%;">
          </span>
          <span style="float:right;position: absolute;right:0;top: 0;width: 55px;"
                v-if="item.recommendFlag=='y'&& $i18n.locale=='en'">
                  <img src="@/assets/img/projectPresentation/recommenden.png" alt="" style="width: 100%;">
          </span>

          <!-- <img :src="'/api/file/pub/'+item.photo" alt="" style="width: 100%;height: 340px;"> -->
          <div style=" color: #bcbcbc;padding: 0 10px;margin-left: 15px;">
            <div>
              <span class="ul_initData_label cursor" style="color: #666;">{{item.projectName}}</span>
              <span class="newTitle" v-if="ifnew(index)">new</span>

            </div>
            <div style="line-height: 25px;color:#666;margin-top: 2px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" >
                <span style="margin-right: 20px;" >
                  <i class="el-icon-location-outline"></i>
                    {{$t('common.ProjectArea')}}:  {{item.bannerFour}}
                </span>
            </div>
            <div style="line-height: 25px;color:#666;margin-top: 2px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                <span >
                  <i class="el-icon-office-building" aria-hidden="true"></i>
                   {{$t('common.ProjectCategory')}}:  {{screen2sMap[item.technicalCategories]}}
                </span>
            </div>
            <!--              <div style="color:#666;line-height: 25px;margin-top: 2px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">-->
            <!--                <span>-->
            <!--                  <i class="fa fa-database"></i>-->
            <!--                     {{$t('common.TechnicalScope')}}:  {{screen3sMap[item.technicalScope]}}-->
            <!--                </span>-->
            <!--              </div>-->
            <!-- <div style="color:#333">
              <span>
                <i class="fa fa-star-o"></i>
                {{item.num == 'null' || item.num == undefined? 0:item.num}}{{$t('common.HasAttentiond')}}/{{handlePublishTimeDesc(toDate,item.createDate,$i18n.locale)}}  {{$t('common.release')}}
              </span>
            </div> -->
            <div style="color:#666;line-height: 25px;">
                <span>
                  <i class="el-icon-c-scale-to-original" style="color: rgb(51, 51, 51);margin-top: 2px;"></i>
                   {{$t('common.CurrentStage')}}:  {{item.phaseType}}
                </span>
            </div>
            <div style="color:#666;margin-top: 5px;-webkit-box-orient: vertical;
              position:relative;
              line-height:1.4em;
              overflow: hidden;
              height:4.2em;" class="plate">
                <span>
                  <i class=" el-icon-date" style="color: #999;"></i>
                     {{$t('common.ProjectDescription')}}:  {{item.bannerThree}}
                </span>
            </div>
            <div  style="color:#666;line-height: 25px;margin-top: 15px;background: #F8F8F8;position: absolute;
              bottom: 0;left: 0;width: 100%;height: 47px;line-height: 47px;">
               <span style="float: right;margin-right: 20px;">
<!--                 <div>-->
                    <i class="el-icon-location-outline"></i>{{item.unitCountry}} |<i class="fa fa-database" style="margin-left:10px;">
                    </i>{{screen3sMap[item.technicalScope]}}
                 <!--                 </div>-->
               </span>
            </div>
          </div>

          <!-- <div style="margin-left: 10px;">
            <el-tag v-if="item.projectLabel != ''" style="margin: 10px 10px 0 0;" v-for="(tag,j) in item.projectLabel">{{tag}}</el-tag>
          </div> -->
        </li>
        <li v-if="initDataOther.length!=0" v-for="(item,index) in initDataOther" :key="'other'+index" class="cursor" style="width: 370px;height: 530px;float: left;box-shadow:5px 5px 5px #f1f1f1 ;position: relative;border: 1px solid #ccc;margin-top: 20px; visibility: hidden">
        </li>
      </ul>
      <div style="clear: both;"></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="6"
            :total="num-0"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>

    </div>
  </div>

</template>

<script>
import Base from "@/views/base/Base";
import {getDicts} from '@/api/dict';
import Screen from "@/components/screen";
import { gateGetProjectViewInfo, getBannerPath,getBaseProjectPortalsViews,getRecommendByPortals} from "@/api/project/baseProjectView";
import { getBaseProjectInfos } from "@/api/project/baseProjectInfo";
import Bus from "@/api/bus";   //注意引入
export default {
  name: "projectPresentation",
  components: { Screen },
  extends: Base,

  data() {
    return {
      initDataOther:[],
      attaments: [],
      toDate:0,
      attamentParams: {
        attachmentBusinessId: "",
        attachmentBusinessType: "base_project_archives_file",
      },
      num: 0,
      params: {
        pageNo: 1,
        pageSize: 6,
        language: '',
        continentCountry: "",
        technicalCategories: "",
        //0为默认排序，1为关注排序
        descStatus:0,
        messageOpenType:"Y",
        status:1,
        fuzzySearch:null,
      },
      screenIndex: 0,
      index: 0,
      projectFaIcon:2,
      screen1s: {
        value: "common.Region",
        item: [

        ],
      },
      screen2s: {
        value: "common.Category",
        item: [

        ],
      },
      screen3s: {
        value: "common.cope",
        item: [

        ],
      },
      screen4s: {
        value: "common.cope",
        item: [

        ],
      },

      recommend: [],
      initData: [],
      IntelligentRecommendation:[],
      islogin:'',
      screen1def:null,
      screen2Item:null,
      banner:null,
    };
  },
  watch:{
    '$i18n.locale'(){

      this.toInitData();
      // this.cofLogin()
      // this.getRcommoendTip()
      // this.getBaseProject();
    },

  },
  computed: {
    // screen1sMap: function () {
    //   return this.screen1s.item.array2Obj("value", "label");
    // },
    screen2sMap: function () {
      return this.screen2s.item.array2Obj("value", "label");
    },
    screen3sMap: function () {
      return this.screen3s.item.array2Obj("value", "label");
    },
  },
  mounted() {
    this.cofLogin()
    this.$store.commit('modify', 'projectPresentation');
    window.localStorage.setItem('router', 'projectPresentation');

    this.toInitData();
    // this.getRcommoendTip()
    // this.getRecommended();
    this.toDate=Date.parse(new Date());
    this.ifnew();
    /* this.bannerFourClick();
     this.screenBack(this.screen1def);*/
  },
  methods: {
    cofLogin(){
      if (!this.$Cookies.get('token')){
        this.index = 0;
        this.islogin = false;

      }else {
        this.index = 3;
        this.params.descStatus = 3;
        this.islogin = true;
        // this.getRcommoendTip()
      }
    },
    toInitData: function () {
      console.log('this.index')
      console.log(this.index)
      if(this.index == 3){
        this.getRcommoendTip();
      }else{
        this.getBaseProject();

      }
      if(this.$i18n.locale=='en'){
        getDicts("CONTINENT_CODE_DICT_EN,PROJECT_CATEGORIES_DICT_EN,TECHNICAL_SCOPE_DICT_EN").then(
            (result) => {
              var data = result.data;
              if (data) {
                this.screen1s.item = result.data[0] || [];
                let both={
                  label:'all',
                  value:null
                };
                this.screen1s.item.unshift(both);
                this.screen2s.item = result.data[1] || [];
                this.screen3s.item = result.data[2] || [];
                this.screen2s.item.unshift(both);
              }
            }
        );
      }else {
        getDicts("CONTINENT_CODE_DICT,PROJECT_CATEGORIES_DICT,TECHNICAL_SCOPE_DICT").then((result) => {
          var data = result.data;
          if (data) {
            this.screen1s.item = result.data[0] || [];
            let both={
              label:'全部',
              value:null
            };
            this.screen1s.item.unshift(both);
            this.screen2s.item = result.data[1] || [];
            this.screen3s.item = result.data[2] || [];
            this.screen2s.item.unshift(both);
          }
        });
      }
    },
    getBaseProject(){
      this.params.language=this.$i18n.locale.toUpperCase();
      // this.index = 0;
      getBaseProjectPortalsViews(this.params).then((result) => {
        var data = result.data;
        // console.log(data.baseProjectViews,'----------------------------------------------')
        if (data.baseProjectViews) {
          data.page.totalCount = data.page.totalCount-0;
          this.num = data.page.totalCount;
          this.initData = data.baseProjectViews;
          this.getphaseType(this.initData);
          this.initDataOther = [];
          var initDataNum = this.initData.length%3
          initDataNum = 3-initDataNum;
          if(initDataNum!=3){
            for (var i=0;i<(initDataNum);i++){
              this.initDataOther[i] = {}
            }
          }
          data.baseProjectViews.forEach((item,index)=>{
            if(item.projectLabel == undefined){
              item.projectLabel = []
            }else{
              item.projectLabel=item.projectLabel.split(',');
            }
            if(item.unitCountry != undefined){
              var unitCountryin = item.unitCountry.split(",")
              var unitCountryout = '';
              if(unitCountryin.length>2){
                for(var i=0;i<2;i++){
                  unitCountryout = unitCountryout+unitCountryin[i]+",";
                }
                unitCountryout = unitCountryout.substr(0,unitCountryout.length-1)+",..."
                item.unitCountry = unitCountryout;
              }
            }
            // var technicalCategoriesin = item.technicalCategories.split(',');
            // var technicalCategoriesout = '';
            // technicalCategoriesin.forEach((item,index)=>{
            //   technicalCategoriesout=technicalCategoriesout+
            // });
            if('' == item.bannerList[0])
            {
              item.bannerList[0]="/def/projectdefault.png"
            }
          })
        }else {
          this.initData = [];
          this.num = 0
        }
      })
    },
    //获取推荐内容
    getRcommoendTip(){
      // this.index = 3;
      let params1 =  {
        pageNo:this.params.pageNo,
        pageSize: 6,
        language: this.$i18n.locale.toUpperCase(),

        //0为默认排序，1为关注排序
        descStatus:0,
        messageOpenType:"Y",
        status:1,
        fuzzySearch:null,
      };
      getRecommendByPortals(params1).then((result) => {
        var data = result.data;
        if (data.baseProjectViews) {
          data.page.totalCount = data.page.totalCount-0;
          this.num = data.page.totalCount;
          this.initData = data.baseProjectViews;
          this.getphaseType(this.initData);
          this.initDataOther = [];
          var initDataNum = this.initData.length%3
          initDataNum = 3-initDataNum;
          if(initDataNum!=3){
            for (var i=0;i<(initDataNum);i++){
              this.initDataOther[i] = {}
            }
          }
          data.baseProjectViews.forEach((item,index)=>{
            if(item.projectLabel == undefined){
              item.projectLabel = []
            }else{
              item.projectLabel=item.projectLabel.split(',');
            }
            if(item.unitCountry != undefined){
              var unitCountryin = item.unitCountry.split(",")
              var unitCountryout = '';
              if(unitCountryin.length>2){
                for(var i=0;i<2;i++){
                  unitCountryout = unitCountryout+unitCountryin[i]+",";
                }
                unitCountryout = unitCountryout.substr(0,unitCountryout.length-1)+",..."
                item.unitCountry = unitCountryout;
              }
            }
            // var technicalCategoriesin = item.technicalCategories.split(',');
            // var technicalCategoriesout = '';
            // technicalCategoriesin.forEach((item,index)=>{
            //   technicalCategoriesout=technicalCategoriesout+
            // });
            if('' == item.bannerList[0])
            {
              item.bannerList[0]="/def/projectdefault.png"
            }
          })
        }else {
          this.initData = [];
          this.num = 0
        }
      })
    },

    getphaseType(data){
      getDicts(this.$i18n.locale=='zh'?"PHASE_TYPE_DICT":"PHASE_TYPE_DICT_EN").then((resulet) => {
        // console.log('类型字典')
        // console.log(resulet)
        resulet.data[0].forEach((i) => {
          data.forEach((j)=>{
            if (i.value == j.phaseType) {
              j.phaseType = i.label;
            }
          })
        });
      });
    },
    getRecommended(){
      let params= {
        pageSize: 5,
        language: this.$i18n.locale.toUpperCase(),
        recommendFlag:'y',
        descStatus:0
      }
      const that =this;
      that.recommend=[];
      getBaseProjectPortalsViews(params).then((res) => {
        if (res.data.baseProjectViews) {
          res.data.baseProjectViews.forEach(item=>{
            if(item.bannerOne){
              let commendImg={
                img:item.bannerOne[0],
                num:22,
                id:item.id
              }
              that.recommend.push(commendImg);
            }
            // else{
            //   let commendImg={
            //     img:'/def/enterpriseDefault.png',
            //     num:22,
            //     id:item.id
            //   }
            //   that.recommend.push(commendImg);
            // }
          })
          console.log(res.data.baseUnitViews,that.init,that.recommend);
        } else {
          //   this.$message("当前推荐企业暂无信息");
        }
      });
    },
    getIconUrl(url) {
      return require("@/assets/img/realTimeInfo/" + url);
    },
    toView(router, json,index) {
      console.log(router, json,index,'---------- ----')
      this.index = this.params.descStatus;
      this.dataIndex = this.params;
      this.cruPage = this.params.pageNo;
      window.localStorage.setItem('router', router);
      this.$store.commit('modify', router);
      Bus.$emit("router", router);    //存 Bus.$emit
      const { href } =this.$router.resolve({
        name: router,
        query: {
          key: json,
          screenId:this.index,
          dataIndex:index,
          cruPage:this.cruPage
        }
      });
      window.open(href, '_blank');
      // this.$store.commit('modify', router);
      // window.localStorage.setItem('router', router);
      // const { href } = this.$router.resolve({
      //     name: 'routerItem',
      //     params: {
      //       key: json,
      //       screenId:this.index,
      //       dataIndex:index,
      //       cruPage:this.cruPage
      //     }
      // });
      // window.open(href, '_blank');
    },
    getData () {
      this.params.pageNo=0;
      this.getBaseProject();
    },
    screenBack(data) {
      //判断banner是否存在值
      /* if (this.banner != null){
         data.click1 = this.banner;
       }*/
      console.log("data.click1",data.click1);
      this.params.continentCountry = data.click1;
      this.params.technicalCategories = data.click2;
      this.params.pageNo=0;

      if(this.index == 3){
        if(data.click1 !== null || data.click2 !== null){
          this.index = 0;
          this.params.descStatus = 0;
          this.screen1def = data.click1;
          this.screen2Item = data.click2;
          this.getBaseProject();
        }else{
          this.params.continentCountry = data.click1;
          this.params.technicalCategories = data.click2;
          this.index = 3;
          this.params.descStatus = 3;
          this.screen1def = null;
          this.screen2Item = null;
          this.getRcommoendTip()
        }
      }else{
        this.screen1def = data.click1;
        this.screen2Item = data.click2;
        this.getBaseProject();
      }

    },
    //判断区域数据
    bannerFourClick(){
      console.log("this.$route.params.banner",this.$route.params.banner);
      if (this.$route.params.banner === 'undefined' || this.$route.params.banner === undefined){
        this.banner = null;
      }else {
        if (this.$route.params.banner === '亚洲'){
          this.banner = 'asia';
        }else if (this.$route.params.banner === '非洲'){
          this.banner = 'africa';
        }else if (this.$route.params.banner === '欧洲'){
          this.banner = 'europe';
        }else if (this.$route.params.banner === '北美洲'){
          this.banner = 'northamerica';
        }else if (this.$route.params.banner === '南美洲'){
          this.banner = 'southamerica';
        }else if (this.$route.params.banner === '大洋洲'){
          this.banner = 'oceania';
        }else {
          this.banner = this.$route.params.banner;
        }
      }
    },
    // 分页
    handleCurrentChange(val){

      this.params.pageNo=val
      if(this.index == 3){
        this.getRcommoendTip()
      }else{
        this.getBaseProject();
      }
    },
    realTimeInfoScreen(i, index) {
      this.screenIndex = index;
      this.Screens = i;

    },
    realTimeInfoScreensChange(i, index) {
      this.realTimeInfoScreenItem = index;
    },
    screen(i) {
      let _this = this
      if(i!==this.params.descStatus){
        this.index=i;
        this.params.descStatus = i;
        if(i == 3){
          this.index = 3;
          this.params.descStatus = 3;


          setTimeout(()=>{
            _this.screen1def = '1';
            _this.screen1def = null;
          },100)
          setTimeout(()=>{
            _this.screen2Item = '1';
            _this.screen2Item = null;
          },200)
          this.getRcommoendTip();
        }else{

          this.getBaseProject();
        }

      }
    },
    ifnew: function(i){

      if(i<5 && this.index ==0 && this.params.pageNo==1){
        return true
      }else{
        return false
      }
    },
    //分页索引接着上一页的索引
    indexMethod(index){
      return (this.page-1)*10+index+1;
    },


  },

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  margin: 0;
  padding: 0;
}
.box,
.boxs {
  margin-top: 10px;
  background: #fff;
  /* height: 500px; */
  padding-bottom: 10px;
}
.boxs {
  padding-bottom: 40px;
}
/* .area{
  margin-left: 30px;
  background-color: #faf2f2;
} */
body {
  margin: 0;
}
.projectSlot1{
  height: 35px;width: 50%;line-height: 35px;
  background: url("~@/assets/img/projectPresentation/1.png") no-repeat;
}
.projectSlot2{
  height: 35px;width: 50%;line-height: 35px;
  background: url("~@/assets/img/projectPresentation/2.png") no-repeat;
}
.projectSlot3{
  height: 35px;width: 50%;line-height: 35px;
  background: url("~@/assets/img/projectPresentation/3.png") no-repeat;
}
.projectSlot4{
  height: 35px;width: 50%;line-height: 35px;
  background: url("~@/assets/img/projectPresentation/project-front.png") no-repeat;
}
.projectSlot5{
  height: 35px;width: 50%;line-height: 35px;
  background: url("~@/assets/img/projectPresentation/project-behind.png") no-repeat;
}

.screen1 {
  /* color: rgb(0, 0, 0); */
  height: 35px;width: 100%;line-height: 35px;
  font-size: 14px;
  text-align: center;
  color: #979292;
  /*background: #ced7e3;*/

}
.screen2 {
  height: 35px;width: 100%;line-height: 35px;
  text-align: center;
  color: rgb(0, 0, 0);
  font-size: 14px;
  /*background: #eceff3;*/

}
.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;
}
.initListBox2{
  /* margin-top: 20px; */
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  margin: 0 20px;
  font-size:14px;
  color: #bcbcbc;
  position: relative;

  /* border-bottom: 1px solid #E4E4E4; */
}

li {
  display: inline-block;
  /* margin-right: 20px; */
  /* padding: 0 2px; */
  color: #1251a7;
}
.initData_label {
  color: #2c558a;
  font-weight: 700;
  font-size: 18px;
  line-height: 42px;
  max-width: 500px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ul_initData_label {
  color: #2c558a;
  font-weight: 700;
  font-size: 18px;
  line-height: 42px;
  width: 88%;
  display: inline-block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.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;
}
.search >>> .el-button {
  background: #4f84ba;
  border: 1px solid #4f84ba;
  border-left: none;
  border-radius: 0;
  color: #fff;
}
.newTitle{
  float: right;
  color: red;
  width: 35px;
  border: 1px solid red;
  border-radius: 12px;
  margin-top: 10px;
  text-align: center;
  box-sizing: border-box;
}
.newTitle2{
  color: red;
  display: inline-block;
  width: 35px;
  border: 1px solid red;
  border-radius: 12px;

  margin-left: 20px;
  padding: 0 0 3px 0;
  text-align: center;
  box-sizing: border-box;
}

</style>