dev/dcp-web-gate/src_old/views/ThinkTankConsulting/ThinkTankConsultingDetails1.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: 'thinkTankConsulting' }">{{$t('common.ThinkTankConsulting')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{thinkTankConsultingDetails}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="width: 100%;height: 450px;position: relative;margin-top:20px">
        <div style="width:96%;height:100%;margin:auto">
          <!-- 轮播图 -->
          <div style="width:50%;height:100%;float:left;">
            <div class="swipers">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(i,index) in img" v-if="img.length>0">
                    <img :src="'api/file/pub/'+ i" alt style="width: 100%;height: 100%;" />
                  </div>
                  <div class="swiper-slide"  v-if="img.length==0">
                    <img :src="'api/file/pub/'+'/def/def1.png'" alt style="width: 100%;height: 100%;" />
                  </div>
                </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(i,index) in img" v-if="img.length>0">
                    <img :src="'api/file/pub/'+ i" alt style="width: 100%;height: 100%;" />
                  </div>
                  <div class="swiper-slide"   v-if="img.length==0">
                    <img :src="'api/file/pub/'+'/def/def1.png'" alt style="width: 100%;height: 100%;" />
                  </div>
                </div>
              </div>
              <div style="float: right;color: #666;font-size: 14px;margin-right: 20px;"></div>
            </div>
          </div>
          <!-- 详情 -->
          <div style="width:49%;height:100%;float:left;">
            <div class="details">
              <div
                style="width: 100%; font-size: 16px;" @click="toView('thinkTankConsultingDetails',item.label)">
                  <div>
                    <span class="initData_label cursor">{{initData.unitName}}</span>
                    <span
                      style="margin-left: 150px;padding: 10px;background: #ff0033;color: #fff;font-weight: 700;"
                      v-if="initData.recommendFlag==1">{{$t('common.RecommendedEnterprise')}}
                    </span>
                  </div>
                  <div style="line-height: 40px;">
                      <div>
                        <span>
                          <i class="el-icon-location-outline"></i>
                          {{$i18n.locale === 'zh'?initData.unitCountry:initData.unitCountryDict.charAt(0).toUpperCase() + initData.unitCountryDict.slice(1)}}
                            <span v-show="initData.unitRegion">-</span>{{initData.unitRegion}}
                        </span>
                      </div>

                  </div>

                <div style="line-height: 40px;">
                  <span>
                    <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
                    {{$t('common.ProductInformation')}}
                    <span style="color: #0099FF;padding: 0 3px;">( <a href="#unitScope">{{UnitTypeNumber[1]?UnitTypeNumber[1]:'0'}}</a> )</span>
                    {{$t('common.CoreTechnology')}}
                    <span style="color: #0099FF;padding: 0 3px;">( <a href="#information02">{{UnitTypeNumber[2]?UnitTypeNumber[2]:'0'}}</a> )</span>
                    {{$t('common.ProjectPerformance')}}
                    <span style="color: #0099FF;padding: 0 3px;">( <a href="#information03">{{UnitTypeNumber[3]?UnitTypeNumber[3]:'0'}}</a> )</span>
                    {{$t('common.ScopeBusiness')}}
                    <span style="color: #0099FF;padding: 0 3px;">( <a href="#information04">{{UnitTypeNumber[4]?UnitTypeNumber[4]:'0'}}</a> )</span>
                  </span>
                </div>
                  <div style="
                  -webkit-box-orient: vertical;
                  position:relative;
                  line-height:1.4em;
                  overflow: hidden;
                  height:7.1em;"class="plate"  
                  @click="dialogVisibleChange" >
                  <span style="line-height:30px">
                    <i class="el-icon-tickets"></i>
                    {{$t('common.CompanyProfile')}}:
                    <span v-html="initData.unitIntrodutionMin"></span>
                  </span>
                </div>
                <div style="margin-top: 10px;">
                  <el-tag v-if="0 < initData.unitLabel.size"
                    style="margin: 10px 10px 0 0;"
                    v-for="unitLabel in initData.unitLabel"
                  >{{unitLabel}}</el-tag>
                </div>
                <div style="float: right;color: #666;font-size: 14px;margin-right: 20px;">
                  <div>
                    <span class="share cursor" :style="ifcommon?'color: #66b1ff;':'' "style="margin-right: 380px;" @click="shareChange()">
                      <i class="el-icon-star-off" :style="ifcommon?'color: #66b1ff;':''"></i>
                      {{ifcommon?$t('common.companyAttentioned'):$t('common.Focusonthecompany')}}
                    </span>
                  </div>
                
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div style="margin: 20px 20px;" v-for="(contentItem,index) in tankContent">
          <div class="tankthink_style">
            <span class="tankthink_style_span">{{contentItem.title}}</span>
          </div>
          <div class="tankthink_content">
            <div style="width: 75%;float:left;font-size:14px;color:#666666">
              <p v-html="contentItem.label"></p>
            </div>
            <div style="width: 20%;float:right; margin-left: 20px;">
              <img src="@/assets/img/ThinkTankConsulting/FundCooperation.png" alt="" style="width:100%">
            </div>
            <div style="clear:both"></div>
          </div>
      </div>
      <!-- 智库动态 -->
      <div style="width: 100%;height: 320px;border-bottom: 1px solid #ccc;padding:20px" id="information03" v-if="tankContent.length>0">
        <div class="tankthink_style">
          <span class="tankthink_style_span">智库动态</span>
        </div>
        
        <div style="float: left;;margin-top: 15px;width:25%;height: 230px;">
          <!-- <img :src="'api/file/pub/'+enterprise.label4.src" alt style="width: 100%;height: 100%;" v-if="enterprise.label4.src"/> -->
          <img :src="'api/file/pub/'+'/def/def4.png'" alt style="width: 100%;height: 100%;"/>
        </div>
        <div
          style="float: left;;margin-top: 15px;margin-left: 20px;width: 70%;"
          class="tankthink_style_product"
        >
          <tr v-for="(item,index) in enterprise3" v-if="index<5" class="cursor" @click="toViewDetail('enterpriseInformationDetails',item.baseEntityId,'common.ProjectPerformance')">
            <td style="float: left;width: 500px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.title}}</td>
            <td style="float: right;">{{formatDate(item.createDate)}}</td>
            <td style="clear:both"></td>

          </tr>
        </div>
      </div>

    </div>
    <el-dialog
      :title="$t('common.CompanyProfile')"
      :visible.sync="dialogVisible"
      width="60%">
      <span style="line-height: 29px;font-size: 18px;" v-html="initData.unitIntrodution"></span>
    </el-dialog>
    <el-dialog
            :title="$i18n.locale=='zh'?'提示':'Reminder'"
            :visible.sync="toViewLogin"
            :width="$i18n.locale=='zh'?'500px':'750px'"
            :height="$i18n.locale=='zh'?'300px':'386px'"
            :before-close="toViewLoginChange"
    >
      <div style="width: 100%;height: 100%;">
        <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
        <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
          <div style="font-size: 20px;font-weight: normal;color: #333333;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                line-height: 40px;">
            {{$t('common.ReminderFirst')}}
          </div>
          <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
            {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
          </div>
          <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
            {{$t('common.ReminderForth')}}
          </div>
          <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
                <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
                  {{$t('common.ReminderFifth')}}
                </span>
            <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">
                  {{$t('common.ReminderSixth')}}
                </span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    // import 'swiper/dist/css/swiper.css' 
    import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
    import Base from "@/views/base/Base";
    import { getBaseUnitViews, get, saveOrUpdate, del,cmsInformationViews,getUnit,gateGetUnitViewById} from "@/api/baseUnitView";
    import moment from "moment";
    import Clipboard from 'clipboard'
    import { formatDate } from "@/utils/formatUtils";
    import { saveFollowModel } from "@/api/operation/basePortalModelFollowInfo";
    import {getToken} from "@/utils/auth";
    import {getFollowModeNumlByModelIdAndUserId} from "@/api/operation/basePortalModelFollowInfo";
    export default {
      name: "thinkTankConsultingDetails",
      extends: Base,
      data() {
        return {
          num:5,
          toViewLogin:false,
          timer:'',
          dialogVisible:false,
          thinkTankConsultingDetails: "",
          img: [],
          key:this.$route.query.key,
          page:{
            businessType:"unitShow",
            businessId:'',
            // typeDict:1,

          },
          tankContent:[
            {
              id:1,
              title:'核心业务',
              label:'在信息通信及信息化与工业化融合领域牵头建设决策研究、标准化、知识产权、试验验证、应用示范、产业推进等公共服务平台，发挥了政产学研用连接纽带作用，有力推动了自主创新和产业发展。'
            },
            {
              id:2,
              title:'主要业绩',
              label:'在信息通信及信息化与工业化融合领域牵头建设决策研究、标准化、知识产权、试验验证、应用示范、产业推进等公共服务平台，发挥了政产学研用连接纽带作用，有力推动了自主创新和产业发展。'
            },
            
          ],
          ifcommon:false,
          initData: {},
          enterprise: {
            label1: {
              label: "",
              src: ""
            },
            label2: {
              src: "",
            },
            label3: {
              src: "",
            },
            label4: {
              src: "",
            },
            label5: {
              src: "",
            }
          },
          recommend: [],
        
          UnitTypeNumber:{},
        };
      },
      updated(){
        this.Swiper();
      },
      mounted() {
        this.page.businessId=this.key;
        this.$store.commit('modify', 'thinkTankConsultingDetails');
        window.localStorage.setItem('router', 'thinkTankConsultingDetails');
        this.getData();
        console.log(this.$store.state.routerItem)  
        // window.sessionStorage.setItem('routerItem', 'enterprise');
      },
      watch: {
        '$i18n.locale'(){
            this.getData();
        },
        "toViewLogin"(){
            if(this.toViewLogin==true){
              this.loginTipsChange()
            }
        }
      },

      methods: {
        
        // 未登录跳转
        loginTipsChange(){
            const that=this;
            this.num =5;
            // clearInterval(timer_interval);

            this.timer = setInterval(function() {
              if (that.num > 0) {
                that.num--;
              } else {
                if(that.toViewLogin==true){
                  clearInterval(that.timer);
                  that.toView('login');
                }else {
                  clearInterval(that.timer);
                }
              }
            }, 1000)
          },
          // 判断未登录跳转是否关闭
        toViewLoginChange(done){
          this.toViewLogin=false;
          this.num=5;
          clearInterval(this.timer);
        },
        dialogVisibleChange(){
          this.dialogVisible=true;
        },
        Swiper() {
          var galleryThumbs = new Swiper(".gallery-thumbs", {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            autoplay: {//自动播放
              delay: 4000,
              disableOnInteraction: false,//用户操作后是否停止 默认停止（true）
            },
          });

          var galleryTop = new Swiper(".gallery-top", {
            spaceBetween: 10,
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev"
            },
            autoplay: {//自动播放
                delay: 4000,
                disableOnInteraction: false,//用户操作后是否停止 默认停止（true）
              },
            thumbs: {
              swiper: galleryThumbs
            }
          });
        },
        getData() {
          const that =this;
          gateGetUnitViewById(this.key,this.$i18n.locale.toUpperCase()).then(res => {
            that.initData = res.data.baseUnitView;
            that.initData.unitIntrodutionMin=that.initData.unitIntrodution?that.initData.unitIntrodution.replace(/<[^>]+>/g,"").replace(/&nbsp;/ig,""):'';
            that.thinkTankConsultingDetails = that.initData.unitName;
            that.initData.unitLabel = that.initData.unitLabel?that.initData.unitLabel.split(","):'';
            that.enterprise.label1.label = res.data.baseUnitView.unitIntrodution;
            let user = window.localStorage.getItem("user");
            if(user){
                var users = JSON.parse(user);
                var token = "" + getToken();
                var projectId = this.initData.baseEntityId;
                let userId = users.userId;
                getFollowModeNumlByModelIdAndUserId(
                  projectId,
                  "thinkTankConsulting",
                  this.userId
                ).then((res) => {
                    this.ifcommon = res.data;
                    console.log(
                        res.data,
                        "---------------------------------------------------------------------------"
                    );
                });
            }
          });
        
        
          // // 获取企业信息数量
          getUnit(this.key,this.$i18n.locale.toUpperCase()).then(res=>{
              this.UnitTypeNumber=res.data;
          });
          // 获取企业详情信息
        this.getDataList(3);
          // 获取推荐企业
          // this.getRecommended();
        },
        getDataList(num){
          // this.page.typeDict=num;
          this.img=[];
          const that =this;
          this.page.language=this.$i18n.locale.toUpperCase();
          cmsInformationViews(this.page).then(res=>{
          
              if(res.data[1]){
                this.enterprise1=res.data[1] || [];
                let url=res.data[1].filter(item=>{
                  return item.pictureUrl!==undefined || item.pictureUrl!==null || item.pictureUrl!=='';
                })
                if(url.length>0){
                  that.enterprise.label2.src=url[0].pictureUrl;
                }else {
                  that.enterprise.label2.src="/def/def2.png";
                  
                }
              }else {
                this.enterprise1=[];
                that.$forceUpdate();
              }
              if(res.data[2]){
                that.enterprise2=res.data[2] || [];
                let url = res.data[2].filter((item,index)=>{
                  return item.pictureUrl!==undefined || item.pictureUrl!==null || item.pictureUrl !==''
                })
                if(url.length>0){
                  that.enterprise.label3.src=url[0].pictureUrl;
                }else {
                  that.enterprise.label3.src="/def/def3.png";
                  
                }
              }else {
                that.enterprise2=[];
                that.$forceUpdate();
                // that.enterprise.label3.src="/def/def3.png";
              }
              if(res.data[3]){
                that.enterprise3=res.data[3] || [];
                let url = res.data[3].filter((item,index)=>{
                  return item.pictureUrl!==undefined || item.pictureUrl!==null || item.pictureUrl !==''
                })
                if(url.length>0){
                  that.enterprise.label4.src=url[0].pictureUrl;
                }else {
                  that.enterprise.label4.src="/def/def4.png";
                  
                }
              
              }else {
                this.enterprise3=[];
                that.$forceUpdate();
              }
            if(res.data[4]){
              that.enterprise4=res.data[4] || [];
              let url = res.data[4].filter((item,index)=>{
                return item.pictureUrl!==undefined || item.pictureUrl!==null || item.pictureUrl !==''
              })
              if(url.length>0){
                that.enterprise.label5.src=url[0].pictureUrl;
              }else {
                that.enterprise.label5.src="/def/def2.png";

              }

            }else {
              this.enterprise4=[];
              that.$forceUpdate();
            }
            that.img=[];
            if(res.data[1]){
                res.data[1].forEach((item,index)=>{
                  if(item){
                    if(item.pictureUrl){
                        that.img.push(item.pictureUrl);
                    }
                  }
                })
            }
            if(res.data[2]){
              res.data[2].forEach((item,index)=>{
                if(item){
                  if(item.pictureUrl){
                    that.img.push(item.pictureUrl);
                  }
                  }
                })
            }
            if(res.data[3]){
              res.data[3].forEach((item,index)=>{
                if(item){
                  if(item.pictureUrl){
                    that.img.push(item.pictureUrl);
                  }
                  }
                })
            }
            if(res.data[4]){
              res.data[4].forEach((item,index)=>{
                if(item){
                  if(item.pictureUrl){
                    that.img.push(item.pictureUrl);
                  }
                }
              })
            }
          });
          this.getRecommended();
        },
        getRecommended(){
          this.page.recommendFlag='y';
          const that =this;
          getBaseUnitViews(this.page).then((res) => {
            if (res.data.baseUnitViews) {
              that.recommend =  res.data.baseUnitViews;
              console.log(res.data.baseUnitViews,that.init);
            }
            this.loading = false;
          });
        },
        
        getIconImg(url) {
          return require("@/assets/img/ThinkTankConsulting/" + url);
        },
        toView(router, json) {
          clearInterval(this.timer);
          this.$router.push({ name: router, params: {key:json} });
        },
        screenBack(data) {
          console.log(data, "screenBackscreenBackscreenBackscreenBack");
        },
        toViewDetail(router,json,name){
          this.$store.commit('modify', router);
          window.localStorage.setItem('router', router);
          const { href } = this.$router.resolve({
            name: 'routerItem',
            query: {
              key: json,
              name:name
            }
          });
          window.open(href, '_blank');
        },
        toViewMore(router,json,businessType){
          this.$store.commit('modify', router);
          window.localStorage.setItem('router', router);
          const { href } = this.$router.resolve({
            name: 'EnterPriseMoreInformationList',
            query: {
              key: json,
              businessType:businessType
            },
          });
          window.open(href, '_blank');
        },
        screen(i) {
          this.index = i;
        },
        // 项目收藏改变
        shareChange() {
            if (this.ifcommon) {
                this.saveFollowModelDo("unfollow");
            } else {
                this.saveFollowModelDo("follow");
            }
        },
        saveFollowModelDo: function(followType){
            let user = window.localStorage.getItem('user');
            if (!this.$Cookies.get('token')) {
                // this.$message.warning("请先登录");
                // this.$confirm('检测到您未登录，是否登录')
                // .then(_ => {
                //  this.toView('login');
                // })
                // .catch(_ => {});
                  this.toViewLogin=true;
            } else {
                var users = JSON.parse(user);
                var token = "" + getToken();
                var projectId = this.initData.baseEntityId;
                var userId = users.userId
                // 接口逻辑
                this.submitHandler(token => {
                    saveFollowModel(projectId,"enterprise", userId,followType,token).then(result => {
                        // console.log(result);
                        this.$message({
                            message: result.data,
                            type: 'success'
                        });
                        this.ifcommon=!this.ifcommon
                        this.resetToken();
                    }).catch(error => {
                        // 此处你的业务代码

                    });
                });
            }
        },
      
      }
      };
</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;
}
.swipers {
  position: absolute;
  top: 30px;
  left: 80px;
  width: 460px;
  height: 390px;
}
.details {
  position: absolute;
  top: 30px;
  left: 620px;
  width: 500px;
  height: 390px;
 
}
.swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 80%;
  width: 100%;
}
.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}
.initData_label {
  color: #2c558a;
  font-weight: 700;
  font-size: 18px;
  line-height: 42px;
}
.tankthink_style {
  line-height: 50px;
  color: #666666;
  font-size: 18px;
  font-weight: 700;
  margin-top: 5px;
}
.tankthink_style_span {
  display: inline-block;
  padding: 0 10px;
  text-align: center;
  height: 50px;
  border-bottom: 2px solid #6699ff;
}
.tankthink_style_product tr {
  line-height: 30px;
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  color: #666666;
  margin-bottom: 5px;
}
.recommend {
  margin-top: 15px;
  margin-left: 100px;
}
.recommend li {
  display: inline-block;
  width: 170px;
  /* height: 130px; */
  text-align: center;
  margin-right: 15px;
}
.share:hover {
        color: #2c558a;
}
>>>.el-dialog__body {
  word-break:normal;
  padding: 0px 20px 10px;
}
.tankthink_content{
  width: 100%;
}
</style>