dev/dcp-web-gate/src_old/views/countryInformation/countryProjectStatus.vue

<template>
  <div>
    <div style="margin: 0 30px;"
         class="coutryProject">
      <div class="enterprise_style">
        <span class="enterprise_style_span" style="padding: 10px;text-align: center;height: 100%;color: #2C558A;border-bottom: 2px solid #6699ff;">
          <span style="display: inline-block;width: 10px;height: 10px;background: #0B82FF;border-radius: 50%;"></span>
          {{$i18n.locale=='zh'?countryItem.zhName:countryItem.enName}}-{{$t('common.ProjectSources')}}
        </span>
      </div>
      <div style="margin: 0 20px; margin-top: 20px;"  class="continents2">
          <ul>
              <li v-for="(item,index) in initData2" :key="index"
                  @click="toView('ToprojectPresentationDetails',item.unitId)" class="LiActive cursor">
                  <div style="position: relative;margin: 0 22px;" class="border">
                      <div style="width: 100%;text-align: center;padding-top: 30px;">
                          <div>
                              <img :src="'/api/file/pub/' + item.bannerList[0]" alt="" style="width: 120px;height: 80px;">
                          </div>
                          <div style="color: rgba(51,51,51,1);font-weight: 700;">{{item.projectName}}</div>
                      </div>
                  </div>
              </li>
          </ul>
      </div>
      <div class="enterprise_style">
        <span class="enterprise_style_span">
          <span style="display: inline-block;width: 10px;height: 10px;background: #0B82FF;border-radius: 50%;"></span>
          {{$t('common.Projectprogress')}}
        </span>
      </div>
      <div style="margin-left: 0px;">
        <div style="margin-top: 15px;margin-left: 20px;"
             class="enterprise_style_product">
          <tr v-for="(item,index) in enterprise" class="cursor" @click="toViewDetail('realTimeInfoItemdetails',item.baseEntityId)" >
            <td style="float: left;">{{item.title}}</td>
            <td style="float: right;margin-right: 100px;">{{formatDate(item.createDate)}}</td>
          </tr>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Base from '@/views/base/Base'
import { getDicts } from '@/api/dict'
import {
  gateGetProjectViewInfo,
  getBannerPath,
  getBaseProjectViews,
} from '@/api/project/baseProjectView'
import Screen from '@/components/screen'
import { getCountry, getInformationList } from '@/api/country/countryList'
export default {
    name: 'countryProjectStatus',
    props: ['id',"country","countryItem"],
    components: { Screen },
    extends: Base,
    data() {
        return {
        num: 0,
        enterpriseDetails: '',
        informationsClass: '1',
        enterprise: [],
        params: {
            pageNo: 1,
            pageSize: 3,
            language: '',
            phaseType: '',
            unitCountry: '',
            //0为默认排序，1为关注排序
            descStatus: 0,
            technicalCategories:'',
            status: 1,
        },
        screen1s: {
            value: 'common.Category',
            item: [],
        },
        screen2s: {
            value: 'common.phaseType',
            item: [],
        },
        initData2: [],
        recommend: [
            {
            img: 'u6029.png',
            num: '2934',
            },
            {
            img: 'u6029.png',
            num: '2934',
            },
            {
            img: 'u6029.png',
            num: '2934',
            },
            {
            img: 'u6029.png',
            num: '2934',
            },
            {
            img: 'u6029.png',
            num: '2934',
            },
        ],
        }
    },
    created() {
        this.enterpriseDetails = this.$route.params.key
    },
    watch: {
        '$i18n.locale'() {
          this.getCountryData()
        },
    },
    mounted() {
        this.getCountryData() // 获取项目状况
    },
    methods: {
      toViewDetail(router,json){
          this.$store.commit('modify', router);
          window.localStorage.setItem('router', router);
          const { href } = this.$router.resolve({
              name: router,
              query: {
                key: json
              }
          });
          window.open(href, '_blank');
      },
        getCountryData() {
          let list = {
              pageSize: 5,
              pageNo: 1,
              businessType: 'countryShow',
              businessId: this.id,
              typeDict: 4,
              language: this.$i18n.locale.toUpperCase(),
          }
         this.getInfoList();
          getInformationList(list).then((res) => {
              this.enterprise = res.data ? res.data.allDataList : []
          })
          if (this.$i18n.locale == 'en') {
              getDicts('PHASE_TYPE_DICT_EN,TECHNICAL_CATEGORIES_DICT_EN').then(
              (result) => {
                  var data = result.data
                  if (data) {
                  this.screen2s.item = result.data[0] || []
                  let both = {
                      label: 'all',
                      value: null,
                  }
                  this.screen2s.item.unshift(both)
                  this.screen1s.item = result.data[1] || []
                  this.screen1s.item.unshift(both)
                  }
              }
              )
          } else {
              getDicts('PHASE_TYPE_DICT,TECHNICAL_CATEGORIES_DICT').then((result) => {
              var data = result.data
              if (data) {
                  var data = result.data
                  if (data) {
                  this.screen2s.item = result.data[0] || []
                  let both = {
                      label: '全部',
                      value: null,
                  }
                  this.screen2s.item.unshift(both)
                  this.screen1s.item = result.data[1] || []
                  this.screen1s.item.unshift(both)
                  }
              }
              })
          }
        },
        getInfoList(){
          this.params.language = this.$i18n.locale.toUpperCase();
          this.params.unitCountry=this.country;
          getBaseProjectViews(this.params).then((result) => {
              // console.log(this.params);
              var data = result.data
              // console.log(data.baseProjectViews,'----------------------------------------------')
              if (data.baseProjectViews) {
              this.num = data.page.totalCount
              this.initData2 = data.baseProjectViews
              data.baseProjectViews.forEach((i) => {
                  i.setDownDate = this.formatDate(i.setDownDate, 'YYYY-MM-DD')
                  i.setUpDate = this.formatDate(i.setUpDate, 'YYYY-MM-DD')
              })

              data.baseProjectViews.forEach((item, index) => {
                  item.projectLabel = item.projectLabel.split(',')
              })
              } else {
              this.initData2 = []
              this.num = ''
              }
          })
        },
        screenBack(data){
          console.log(data);
          let phaseType=data.click1?data.click1:'';
          let technicalCategories=data.click2?data.click2:''
          this.params.technicalCategories=technicalCategories;
          this.params.phaseType=phaseType;
          this.getInfoList();
        },
        getIconUrl(url) {
          return require('@/assets/img/realTimeInfo/' + url)
        },
        toView(router, json) {
          this.$router.push({ name: router, params: json })
        },
        screen(i) {
          this.index = i
        },
        getInformation(num) {
          this.informationsClass = num
        },
        ToprojectPresentationDetails() {
          this.$store.commit('modify', 'projectPresentationDetails')
          this.$router.push({ name: 'projectPresentationDetails', params: '' })
        },
    },
}
</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: 100px;
  width: 460px;
  height: 390px;
}
.details {
  position: absolute;
  top: 30px;
  left: 600px;
  width: 460px;
  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: #6c8c9d;
  font-weight: 700;
  font-size: 18px;
  line-height: 42px;
}
.enterprise_style {
  line-height: 40px;
  color: #6c819d;
  /* padding-left: 100px; */
  font-size: 18px;
  /* font-weight: 700; */
  margin-top: 5px;
  margin-left: 20px;
  /* border-bottom: 1px solid #95d13e; */
}
.enterprise_style_span {
  padding: 10px;
  text-align: center;
  height: 100%;
  /* background: #95d13e; */
  color: #2c558a;
  /* border-bottom: 2px solid #6699ff; */
}
.enterprise_style_product tr {
  line-height: 30px;
  width: 100%;
  display: inline-block;
  /* border-bottom: 1px dashed #ccc; */
  font-size: 14px;
  color: #6c819d;
  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;
}
.information1 {
  display: inline-block;
  width: 123px;
  height: 100%;
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
  background: #f9f9f9;
  color: #999;
}
.information2 {
  display: inline-block;
  width: 123px;
  height: 100%;
  border-top: 3px solid #2c5589;
  text-align: center;
  color: #2c5589;
}
.information1:hover,
.getBoth:hover {
  color: #ff0036;
}
img.right {
  float: right;
}
.initData {
  margin-top: 20px;
  margin-left: 100px;
  font-size: 14px;
  color: #bcbcbc;
  height: 200px;
  width: 1000px;
  /* box-shadow: rgba(242, 242, 242, 1); */
  box-shadow: 10px 10px 10px -5px rgba(242, 242, 242, 1);
  position: relative;
  border: 1px solid rgba(242, 242, 242, 1);
}
 .LiActive:hover {
      border: 3px solid #ececec;
  }
  .continents ul,
  .continents2 ul {
      display: flex;
      flex-wrap: wrap; 
      text-align: center;

  }
  .continents2 ul li {
        width: 210px;
        padding: 18px 30px;
        background: #fff;
        margin-bottom: 20px;
        color: #999;
        /* height: 384px; */
        /* border-right: 1px solid #EAEAEA; */
        border: 3px solid transparent;
        box-shadow: 5px 5px 5px #fafafa;
    }
     .continents2 ul li:nth-of-type(5) {
        border-right: none;
    }
</style>