dev/dcp-web-gate/src_old/views/enterprise/Enterprise.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>{{$t('common.EnterpriseShow')}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="margin-top: 20px;">
                <Screen v-bind:screen1="screen1" :screen2="screen2" :screen3="screen3" @screenBack="screenBack">
                </Screen>
            </div>
            <div
                style="margin-top: 20px;margin-left: 20px;margin-right: 20px; padding-bottom: 10px;border-bottom: 1px solid #CCCCCC;">
                <!-- 关注排序 -->
                <div :class="index==0?'projectSlot1':'projectSlot2'" class="cursor">
                    <span style="padding:0 13px;height: 35px;display: inline-block;width: 120px;" @click="screen(0)"
                        :class="index==0?'screen1':'screen2'">{{$t('common.LatestRelease')}}</span>
                    <span id="attention2" style="padding:0 13px;height: 35px;display: inline-block;width: 120px;"
                        @click="screen(1)" :class="index==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>
            <!-- <div style="width: 1100px;height: 2px;color: #000;"></div> -->
            <!-- 项目个数 -->
            <div style="margin-top: 20px;margin-left: 20px;;display: inline-block; font-size:14px;color: #bcbcbc;">
                {{$t('common.Total')}}
                <span style="color: #1251A7;font-size: 14px;font-weight: 600;"> {{totalPage}}</span>
                {{$t('common.enterprise')}}
            </div>
            <div style="margin-top: 10px;float: right; font-size:14px;color: #bcbcbc;margin-right: 20px;">
                <el-input v-model="page.unitName" @keyup.enter.native="getBase"
                    :placeholder="$i18n.locale=='zh'?'请输入搜索':'Please enter search'" maxlength="10" show-word-limit
                    style="width: 250px;margin-right: 28px;">
                    <i class="el-icon-search"></i>
                    <el-button slot="append" icon="el-icon-search" @click="getBase"
                        style="background: #fff;border-left: 0;"></el-button>
                </el-input>
            </div>
            <div v-show="projectFaIcon==1" class="initListBox" v-for="(item,index) in init" :key="item.id">
                <div>
                    <div style="position: absolute;left: 0;width: 182px;height: 158px;">
                        <img :src="item.photo" alt
                            style="width: 224px;height: 182px;border: 1px solid rgba(221,221,221,.5);" />
                    </div>
                    <div style="margin-left: 250px;margin-top: 20px;width: 700px; font-size: 12px;"
                        @click="toViewTargtBack('enterpriseDetails',item)">
                        <div>
                            <span class="initData_label cursor">{{item.unitName}}</span>
                            <!-- 推荐企业 -->
                            <span
                                style="margin-left: 34px;padding: 10px;background:rgb(51, 208, 255);color: #fff;font-weight: 700;"
                                v-if="item.recommendFlag=='y'">
                                {{$t('common.RecommendedEnterprise')}}
                            </span>
                        </div>
                        <div style="line-height: 25px;">
                            <span style="margin-right: 100px;">
                                <i class="el-icon-location-outline"></i>
                                {{$i18n.locale === 'zh'?
                                item.unitCountry:item.unitCountryDict?
                                item.unitCountryDict.charAt(0).toUpperCase() +
                                item.unitCountryDict.slice(1):''}} - {{item.unitRegion}}
                            </span>
                            <i class="el-icon-time"></i>
                            <span>{{$t('common.DateOfEstablishment')}}: {{formatDate(item.setUpDate)}}</span>
                        </div>
                        <div style="line-height: 25px;">
                            <span>
                                <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
                                {{$t('common.ProductInformation')}}
                                <span style="color: #0099FF;padding: 0 10px;">{{informationNumMap[item.baseEntityId]
                                ?'('+informationNumMap[item.baseEntityId][1]+')':'(0)'}}</span>
                                {{$t('common.CoreTechnology')}}
                                <span style="color: #0099FF;padding: 0 10px;">{{informationNumMap[item.baseEntityId]
                                ?'('+informationNumMap[item.baseEntityId][2]+')':'(0)'}}</span>
                                {{$t('common.ProjectPerformance')}}
                                <span style="color: #0099FF;padding: 0 10px;">{{informationNumMap[item.baseEntityId]
                                ?'('+informationNumMap[item.baseEntityId][3]+')':'(0)'}}</span>
                            </span>
                        </div>
                        <div class="plate" style="line-height: 25px; -webkit-box-orient: vertical;
            position:relative;
            line-height:1.4em;
            overflow: hidden;
            height:7em;height: 75px;margin-top: 5px;width: 810px;">
                            <span style="line-height: 25px;height: 50px;display: block;">
                                <i class="el-icon-tickets"></i>
                                {{item.unitIntrodution}}
                            </span>
                        </div>
                        <div>
                            <el-tag style="margin: 10px 10px 0 0;" v-for="unitLabel in item.unitLabel">
                                {{unitLabel}}
                            </el-tag>
                        </div>
                    </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="toEnterpriseView('enterpriseDetailss',item,item.showable)">
                    <img :src="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>
            <div style="clear: both;"></div>
            <div style="width: 100%;position: relative;height: 100px;">
                <el-pagination v-if="totalPage !==0"
                    style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                    background layout="prev, pager, next" :page-size=12 :total=totalPage
                    :current-page.sync="currentPage" @current-change="handleCurrentChange"></el-pagination>
                <div style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                    v-else>
                    {{$i18n.locale=='en'? 'Sorry no data !':'暂无数据'}}
                </div>
            </div>
            <!-- 项目信息展示-->
            <div style="display: flex;justify-content: space-between;border-bottom: 2px solid #c9c6c6;padding: 0 30px;">
                <!-- 右侧信息-->
                <div style="display: inline-block;width: 97%;margin-right: 35px;">

                    <div
                        style="padding: 10px 0;width:100%; border-bottom: 2px solid #2c558a;line-height: 50px;margin-left: 20px;">
                        {{$t('common.LatestDevelopment')}}
                        <span @click="getInformation(listInformation.pageNo + 1)" style="float: right;cursor: pointer;">
                            <div style="width: 12px;height: 12px;float: left;">
                                <img src="@/assets/img/helpCenter/change1.png" alt="" style="width:100%;">
                            </div>
                            <div style="float:left;margin-left:5px;font-size:16px;color:#778AA4">
                                {{$t('common.ChangeTheBatch')}}
                            </div>
                        </span>
                    </div>

                    <ul class="item messageList">
                        <li v-for="item in unitDynamicInfos"
                            @click="toViewDetail('enterpriseInformationDetails',item.baseEntityId,'common.LatestDevelopment')"
                            class="cursor list">
                            <div class="square"></div>
                            <span class="title" v-text="item.title"></span>
                            <span style="margin-left: auto;" v-text="formatDate(item.createDate)"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Base from "@/views/base/Base";
import HeaderItem from "@/components/headerItem";
import tabers from "@/components/taber";
import footers from "@/components/footers";
import Screen from "@/components/screen";
import { getBaseUnitViews, get, saveOrUpdate, del,getUnit,getInformationCountByIds,getUnitDynamicInfos} from "@/api/baseUnitView";
import { getDicts } from "@/api/dict";
import moment from "moment";
import {gateGetUnitViewById} from "@/api/baseUnitView";
export default {
  name: "enterprise",
  components: { tabers, HeaderItem, footers, Screen, moment },
  extends: Base,
  data() {
    return {
      index: 0,
      loading: true,
      totalPage: "",
      projectFaIcon:2,
      page: {
        pageSize: "12",
        pageNo: "1",
        language:'',
        descStatus:'0',
        unitName:null,
      },
      currentPage:1,
      screen1: {
        value: "common.Region",
        item: [],
      },
      screen2: {
        value: "common.Type",
        item: [],
      },
      screen3:{
          value:'common.Byletter',
          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'
          }],
      },
      init: [],
      dict: {},
      recommend: [

      ],
      Initials:'',
      informationNumMap:{},
      listInformation : {
          pageNo: 1,
          pageSize: 5,
          language: '',
      },
      shouldGetBegin:false,
        flag:true,
      unitDynamicInfos:[],
        photoNum:'0',
    };
  },

  mounted() {
    this.getData();// 请求字典值
    this.getBase();// 请求数据
    this.getInformation(1);
    this.$store.commit('modify', 'enterprise');
    window.localStorage.setItem('router', 'enterprise');

  },
  watch: {
    '$i18n.locale'(){
          this.getBase();
          this.getData();
          this.getInformation(1);
    },
    "page.unitName"(){
      this.page.pageNo = '1'
    }
   
  },
  methods: {
    closeMask () {
        let path=this.$route.path.substr(1);
        this.$store.state.router=path;
        window.onload()
    },
    getInformation(pageNo){
        this.listInformation.language = this.$i18n.locale.toUpperCase();
        if(this.shouldGetBegin){
            pageNo = 1;
        }
        this.listInformation.pageNo = pageNo;
        getUnitDynamicInfos(this.listInformation).then(res=>{
            var data = res.data;
            if(data){
                this.unitDynamicInfos = data||[];
                this.shouldGetBegin = this.unitDynamicInfos.length < 5 ? true : false;
            }
        })
    },
    toViewDetail(router,json,name){
        this.$store.commit('modify', router);
        window.localStorage.setItem('router', router);
        const { href } = this.$router.resolve({
            name: router,
            query: {
                key: json,
                name:name?name:''
            }
        });
        window.open(href, '_blank');
    },
    getData() {
      if(this.$i18n.locale=='zh'){
        getDicts(
          "CONTINENT_CODE_DICT,INDUSTRY_DICTS,BUSINESS_APPROVAL_STATUS,RELEASE_STATUS_DICT"
        ).then((res) => {
          this.screen1.item = res.data[0];
          this.loading = false;
          this.screen1.item.unshift({
            label: "common.All",
            value: null,
          });
          // this.screen2.item = res.data[1];
          this.screen2.item=[];
          // this.screen2.item =  this.screen2.item.slice(0,4)


          res.data[1].forEach(item=>{
            if( item.value=='06' || item.value=='09' || item.value=='11' || item.value=='01' || item.value=='02' || item.value=='04' || item.value=='05' ){
              this.screen2.item.push(item)
            }
          })
          //  2020-10-20 团体组织跟科研机构 放最后
          let ky = this.screen2.item[0];
          let tt = this.screen2.item[1];
          this.screen2.item.remove(ky);
          this.screen2.item.remove(tt);
          this.screen2.item.push(ky);
          this.screen2.item.push(tt);
          this.screen2.item.unshift({
            label: "common.All",
            value: null,
          });
          console.log(this.screen1, this.screen2);
        });
      }else if(this.$i18n.locale=='en'){
        getDicts(
          "CONTINENT_CODE_DICT_EN,INDUSTRY_DICTS_EN,BUSINESS_APPROVAL_STATUS,RELEASE_STATUS_DICT"
        ).then((res) => {
          this.screen1.item = res.data[0];
          this.loading = false;
          this.screen1.item.unshift({
            label: "common.All",
            value: null,
          });
          // this.screen2.item = res.data[1];
          // this.screen2.item =  this.screen2.item.slice(0,4)
          // let screen2Leave=[]
          this.screen2.item=[];
          // this.screen2.item.unshift({
          //   label: "common.All",
          //   value: null,
          // });
          this.$forceUpdate();
          this.screen2.item=[{
            label: "common.All",
            value: null,
          }];
          res.data[1].forEach(item=>{
            if(item.value=='06' || item.value=='09' || item.value=='11' || item.value=='01' || item.value=='02' || item.value=='04' || item.value=='05' ){
              this.screen2.item.push(item);
            }

          })

          //  2020-10-20 团体组织跟科研机构 放最后
          let ky = this.screen2.item[1];
          let tt = this.screen2.item[2];
          this.screen2.item.remove(ky);
          this.screen2.item.remove(tt);
          this.screen2.item.push(ky);
          this.screen2.item.push(tt);

          console.log(this.screen1, this.screen2);
        });
      }


    },
    getBase(dict) {
      const that =this;
      this.page.language=this.$i18n.locale.toUpperCase();
      getBaseUnitViews(this.page).then((res) => {
         var businessIds = [];
        if (res.data.baseUnitViews) {
           that.init =  res.data.baseUnitViews;

           this.init.forEach(item=>{
             businessIds.push(item.baseEntityId);
             item.unitIntrodution=item.unitIntrodution?item.unitIntrodution.replace(/<[^>]+>|&[^>]+;/g, ""):'';
           })
          getInformationCountByIds(businessIds,this.$i18n.locale.toUpperCase()).then(result=>{
              var data = result.data;
              if(data){
                 this.informationNumMap = data||{};
              }
          })
           this.getRecommended();
           that.init.forEach((element) => {
                if (element.unitLabel) {
                  element.unitLabel = element.unitLabel.split(",");
                }
               element.createDate=this.formatDate(element.createDate,'YYYY-MM-DD');
               element.createDate=this.formatDate(element.createDate,'YYYY-MM-DD');
               if(!element.photo || element.photo == 'null'){
                   this.getRandomNum()
                   const context = require.context("@/assets/img/", true, /\.(png|jpg)$/);
                   element.photo = context("./enterprise/" + this.photoNum + ".png");
               }else{
                   element.photo = '/api/file/pub/'+element.photo;
               }
          });
          that.totalPage = res.data.page.totalCount - 0;
        } else {
          this.init=[];
          this.totalPage=0
        }
        this.loading = false;
      });
    },
      getRandomNum(){
          this.photoNum = Math.ceil(Math.random()*3);

      },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`, val);
      this.page.pageNo = val;
      this.loading = true;
      this.getBase();
    },
    getRecommended(){
      let page={
        recommendFlag:'y',
        pageSize: "5",
        pageNo: "1",
        language:this.$i18n.locale.toUpperCase(),
        descStatus:'0',
      }
      const that =this;
      getBaseUnitViews(page).then((res) => {
        if (res.data.baseUnitViews) {
           that.recommend =  res.data.baseUnitViews;
           console.log(res.data.baseUnitViews,that.init);
        } else {
          // this.$message("当前推荐企业暂无信息");
        }
        this.loading = false;
      });
    },
    // getIconUrl(url){
    //     return require("@/assets/img/home/"+url+".png");
    // },
    getIconUrl(url) {
      return require("@/assets/img/realTimeInfo/" + url);
    },
    //条件处理判断是跳转到企业详情还是会员详情
    toEnterpriseView(router,json,type){
      if(type=='2'){
        gateGetUnitViewById(json.baseEntityId,this.$i18n.locale.toUpperCase()).then(res => {
          var data =  res.data;
          if(data && data.isMember!='') {
            this.toViewIntroduction("IntroductionPresentationDetails",data.isMember);
          }
        })
      }else if(type=='1'){
        this.toViewTargtBack("enterpriseDetails",json);
      }
    },
    //跳转会员
    toViewIntroduction(router,json){
      this.$store.commit('modify', router);
      window.localStorage.setItem('router', router);
      let member ={
          memberNameZh: json.memberNameZh,
          memberNameEn:json.memberNameEn,
          unitId:json.unitId,
      }
      const { href } = this.$router.resolve({
        name: router,
        query: {
            key: json.id,
            member:JSON.stringify(member)
        }
      });
      window.open(href, '_blank');
    },
    //跳转正常企业
    toViewTargtBack(router,json){
      this.$store.commit('modify', router);
      window.localStorage.setItem('router', router);
      const { href } = this.$router.resolve({
          name: router,
          query: {
            key: json.baseEntityId
          }
      });
      window.open(href, '_blank');
    },
    screenBack(data) {
      this.page.pageNo = '1';
      this.currentPage=1;
      this.dict.areDict = data.click1;
      this.dict.industryDict = data.click2;
      let obj = Object.assign(this.page, this.dict);
      this.page = obj;
      this.page.Initials=data.click3?data.click3.toString():'';
      if(!data.click5){
        this.getBase(this.page);
      }
      this.getBase(this.page);
      this.loading = true;
    },
    screen(i) {
      this.index = i;
      this.page.descStatus=i+'';
      this.getBase();
    },

  },
};
</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;
  margin-left: 6px;
  padding: 0 2px;
  color: #1251a7;
}
.initData_label {
  color: #2c558a;
  font-weight: 700;
  font-size: 18px;
  line-height: 42px;
}
.initData_label2 {
  color: #666;
  font-weight: 700;
  font-size: 18px;
  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;
  background: url("~@/assets/img/projectPresentation/project-front.png") no-repeat;
}
.projectSlot2{
  height: 35px;width: 100%;line-height: 35px;
  background: url("~@/assets/img/projectPresentation/project-behind.png") no-repeat;
}
.screen1 {
  /* background: url("~@/assets/img/projectPresentation/project-front.png") no-repeat; */
  color: rgb(0, 0, 0);
  font-size: 14px;
  text-align: center;

}
.screen2 {
  /* background: url("~@/assets/img/projectPresentation/project-behind.png") no-repeat; */
  text-align: center;
  font-size: 14px;
  color: #979292;
}
.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;
  /* border-bottom: 1px solid #E4E4E4; */
}
.list{
        line-height: 45px;
        font-size: 14px;
        border-bottom: 2px dotted #d4d4d4;
        display: flex;
        align-items: center;
    }
    .list:hover {
        color:#FF0036;
    }
    .messageList{
        padding:30px 20px;
        width: 100%;

    }
    .square{
        width: 8px;
        height: 8px;
        background: rgb(5, 91, 219);
        display: inline-block;
        margin-right: 10px;
    }
    .title{
        width: 390px;
        display: inline-block;
        height: 100%;
        overflow: hidden;
        white-space:nowrap; 
        text-overflow:ellipsis;
    }
.el-button{
  padding: 10px 20px!important;
}
</style>