dev/dcp-web-gate/src_old/views/countryInformation/countryNationalSpace.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: 'countryInformation' }"
						>{{ $t('common.CountryInformation') }}
					</el-breadcrumb-item>
					<el-breadcrumb-item
						>{{ initData ? initData.zhName : '' }}
					</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="width: 100%; height: 363px; position: relative">
				<div class="swipers">
					<el-carousel height="313px">
						<el-carousel-item v-for="(i, index) in initData.photo" :key="i">
							<img
								:src="'api/file/pub/' + i"
								alt=""
								style="width: 100%; height: 100%"
							/>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="details">
					<div style="width: 100%; font-size: 14px; line-height: 35px">
						<!--                        <div>-->
						<!--                            <span class="initData_label cursor">{{initData.zhName}}</span>-->
						<!--                            <span style="margin-left: 150px;color: #666;cursor: pointer;" :style="ifcommon?'color:#0079ef':''" @click="shareChange()">-->
						<!--                              <i class="fa fa-heart-o" aria-hidden="true" style="margin-right: 5px;"></i>-->
						<!--                              {{ifcommon?$t('common.Concerned'):$t('common.follow')}}-->
						<!--                            </span>-->
						<!--                            &lt;!&ndash; <span style="margin-left: 20px;color: #666;cursor: pointer;" class="btn" @click="copy">-->
						<!--                              <i class="el-icon-share" style="margin-right: 2px;"></i> {{$t('common.Share')}}-->
						<!--                            </span> &ndash;&gt;-->
						<!--                        </div>-->
						<div>
							<span
								>{{ $t('common.EnglishName') }}： {{ initData.enName }}</span
							>
						</div>
						<!-- <div>
														<span >{{$t('common.alias')}}： {{initData.otherName}}</span>
												</div> -->
						<div>
							<span>{{ $t('common.State') }}： {{ initData.are }}</span>
						</div>
						<div
							style="
								-webkit-box-orient: vertical;
								position: relative;
								line-height: 1.4em;
								overflow: hidden;
								height: 8em;
								cursor: pointer;
							"
							class="plateCountry"
							@click="dialogVisibleChange"
						>
							<!--                        <div style="-->
							<!--                            line-height:1.4em;-->
							<!--                            overflow: hidden;-->
							<!--                            -webkit-box-orient: vertical;-->
							<!--                            text-overflow: ellipsis;-->
							<!--                            display: -webkit-box;-->
							<!--                           -webkit-line-clamp:4;-->

							<!--                           cursor: pointer;" class="plateCountry"  @click="dialogVisibleChange">-->
							<span style="line-height: 30px">
								{{ $t('common.BasicSituation') }}： <br />
								<span class="threeLine">{{ initData.basicProfile }}</span>
							</span>
						</div>
						<div style="margin-top: 7px">
							<!--                <el-button type="" style="margin-left: 10px;margin-top: 10px;height: 40px;width: 170px;" icon="el-icon-star-off" :style="ifcommon?'color: #66b1ff;':''" @click="shareChange()">-->
							<span
								class="share cursor"
								:style="ifcommon ? 'color: #66b1ff;' : ''"
								style=""
								@click="shareChange()"
							>
								<i
									class="el-icon-star-off"
									:style="ifcommon ? 'color: #66b1ff;' : ''"
								></i>
								{{
									ifcommon
										? $t('common.CountryAttentioned')
										: $t('common.FocusontheCountry')
								}}
							</span>
							<span
								style="float: right; cursor: pointer"
								@click="dialogVisibleChange"
								>{{ $i18n.locale == 'zh' ? '更多信息' : 'More Info' }}</span
							>
							<!--                </el-button>-->
						</div>
						<el-dialog
							:class="{
								dialogZh: $i18n.locale == 'zh',
								dialogEn: $i18n.locale == 'en',
							}"
							:title="$t('common.IndividualProfiles')"
							:visible.sync="dialogVisible"
							:close-on-click-modal="false"
							width="50%"
						>
							<div style="height: 600px; overflow-y: scroll">
								<div
									style="margin: 0 30px"
									class="white"
									v-for="(item, index) in initData1"
								>
									<div class="enterprise_style">
										<span
											class="enterprise_style_span4"
											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>
											{{ item.title }}
										</span>
									</div>
									<p
										style="
											margin-top: 15px;
											color: #666;
											margin-left: 35px;
											min-height: 220px;
											margin-right: 35px;
										"
									>
										<span
											:class="{
												messageConZh: $i18n.locale == 'zh',
												messageConEn: $i18n.locale == 'en',
											}"
											style="color: #666666"
											v-html="item.contentHtml"
										></span>
										<span
											style="
												color: #02558a;
												margin-left: 25px;
												margin-right: 25px;
											"
											class="cursor"
										></span>
									</p>
								</div>
							</div>
						</el-dialog>
					</div>
				</div>
			</div>
			<div style="height: 50px; line-height: 50px; margin: 0px 0 20px 20px">
				<!-- <span
									:class="informationsClass==1?'information2':'information1'"
									@click="getInformation(1)" class="cursor">
								 {{$t('common.IndividualProfiles')}}
								</span> -->
				<span
					:class="informationsClass == 2 ? 'information2' : 'information1'"
					@click="getInformation(2)"
					class="cursor"
				>
					{{ $t('common.Resources') }}
				</span>
				<span
					:class="informationsClass == 3 ? 'information2' : 'information1'"
					@click="getInformation(3)"
					class="cursor"
				>
					{{ $t('common.EnergyDevelopmentPlanning') }}
				</span>
				<!-- <span
									:class="informationsClass==4?'information2':'information1'"
									@click="getInformation(4)" class="cursor">
									{{$t('common.ProjectStatus')}}
								</span> -->
				<span
					:class="informationsClass == 5 ? 'information2' : 'information1'"
					@click="getInformation(5)"
					class="cursor"
				>
					{{ $t('common.ProjectDevelopmentGuide') }}
				</span>

				<span
					:class="informationsClass == 8 ? 'information2' : 'information1'"
					@click="getInformation(8)"
					class="cursor"
				>
					{{ $t('common.LawsAndRegulations') }}
				</span>
			</div>

			<CountryIndividualProfiles
				v-if="informationsClass == 1"
				:id="id"
			></CountryIndividualProfiles>
			<countryResources
				v-if="informationsClass == 2"
				:id="id"
			></countryResources>
			<countryEnergyPowerPlanning
				v-if="informationsClass == 3"
				:id="id"
			></countryEnergyPowerPlanning>
			<countryProjectStatus
				v-if="informationsClass == 4"
				:id="id"
				:country="this.initData.otherName"
				:countryItem="this.initData"
			></countryProjectStatus>
			<countryDevelopmentGuidelines
				v-if="informationsClass == 5"
				:id="id"
			></countryDevelopmentGuidelines>
			<countryLawAndRegulations
				v-if="informationsClass == 8"
				:id="id"
			></countryLawAndRegulations>
			<LoginMusk :toViewLogin="toViewLogin" @LoginBack="LoginBack"></LoginMusk>
			<div
				style="margin: 0 20px; margin-top: 20px; min-height: 200px"
				class="continents2"
			>
				<div style="border-bottom: 1px solid #0079ef; padding-bottom: 5px">
					<img
						src="@/assets/img/cooperationExchange/20200608_03.gif"
						alt=""
						style="height: 20px; vertical-align: middle"
					/>
					<span style="margin-left: 5px">{{
						$t('common.RelatedProjects')
					}}</span>
					<span
						style="color: #333; font-size: 12px; float: right; cursor: pointer"
						@click="Changethebatch"
						>{{ $t('common.NextBatch') }}</span
					>
				</div>
				<ul>
					<li
						v-for="(item, index) in initData2"
						:key="index"
						@click="toView('projectPresentationDetails', item.projectId)"
						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: 100%; height: 160px"
										v-if="item.bannerList[0]"
									/>
									<img
										:src="'api/file/pub/' + '/def/projectdefault.png'"
										alt=""
										style="width: 100%; height: 160px"
										v-if="!item.bannerList[0]"
									/>
								</div>
								<div style="color: rgba(51, 51, 51, 1); font-weight: 700">
									{{ item.projectName }}
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
      <div
          style="margin: 0 20px; margin-top: 20px; min-height: 200px"
          class="continents2"
      >
        <div style="border-bottom: 1px solid #0079ef; padding-bottom: 5px">
          <img
              src="@/assets/img/cooperationExchange/20200608_03.gif"
              alt=""
              style="height: 20px; vertical-align: middle"
          />
          <span style="margin-left: 5px">{{
              $t('common.EnterpriseShow')
            }}</span>
          <span
              style="color: #333; font-size: 12px; float: right; cursor: pointer"
              @click="ChangeUnitBatch"
          >{{ $t('common.NextBatch') }}</span
          >
        </div>
        <ul>
          <li
              v-for="(item, index) in initData3"
              :key="index"
              @click="toViewTargtBack('enterpriseDetails',item)"
              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.photo"
                      alt=""
                      style="width: 100%; height: 160px"
                      v-if="item.photo"
                  />
                  <img
                      :src="'api/file/pub/' + '/def/projectdefault.png'"
                      alt=""
                      style="width: 100%; height: 160px"
                      v-if="!item.photo"
                  />
                </div>
                <div style="color: rgba(51, 51, 51, 1); font-weight: 700">
                  {{ item.unitName }}
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
		</div>
	</div>
</template>

<script>
import CountryIndividualProfiles from '@/views/countryInformation/CountryIndividualProfiles'
import countryResources from '@/views/countryInformation/countryResources'
import countryEnergyPowerPlanning from '@/views/countryInformation/countryEnergyPowerPlanning'
import countryProjectStatus from '@/views/countryInformation/countryProjectStatus'
import countryDevelopmentGuidelines from '@/views/countryInformation/countryDevelopmentGuidelines'
import countryLawAndRegulations from '@/views/countryInformation/countryLawsAndRegulations'
import { getCountry, getInformationList } from '@/api/country/countryList'
import {
	getFollowModeNumlByModelIdAndUserId,
	saveFollowModelLanguage,
} from '@/api/operation/basePortalModelFollowInfo'
import { getToken } from '@/utils/auth'
import Base from '@/views/base/Base'
import Clipboard from 'clipboard'
import LoginMusk from '@/components/LoginMusk'
import { getBaseProjectViews } from '@/api/project/baseProjectView'
import { getBaseUnitViews } from '@/api/baseUnitView'
// import {getCountry,getInformationList} from '@/api/country/countryList'
import { addIntegral } from '@/utils/toCompleteTask'
import { getUserPointPage } from '@/api/user'
import _ from 'lodash'

export default {
	name: 'countryNationalSpace',
	extends: Base,
	components: {
		CountryIndividualProfiles,
		LoginMusk,
		countryResources,
		countryEnergyPowerPlanning,
		countryProjectStatus,
		countryDevelopmentGuidelines,
		countryLawAndRegulations,
	},
	data() {
		return {
			dialogVisible: false,
			enterpriseDetails: '',
			informationsClass: '2',
			toViewLogin: false,
			id: this.$route.query.key
				? this.$route.query.key
				: this.$route.params.key
				? this.$route.params.key
				: '',
			language: '',
			img: [
				{
					src: 'u6668.png',
				},
				{
					src: 'u6676.png',
				},
				{
					src: 'u6720.png',
				},
				{
					src: 'u6763.png',
				},
				{
					src: 'u6668.png',
				},
				{
					src: 'u6720.png',
				},
			],
			initData: {},
			initData1: [],
			initData2: [],
      initData3: [],
			params: {
				pageNo: 1,
				pageSize: 4,
				language: '',
				phaseType: '',
				unitCountry: '',
				//0为默认排序，1为关注排序
				descStatus: 0,
				technicalCategories: '',
				status: 1,
			},
      unitPage: {
        pageSize: "4",
        pageNo: "1",
        areDict: '',
        language: '',
      },
			num: 0,
      uniNum: 0,
			enterprise: [],
			screen1s: {
				value: 'common.Category',
				item: [],
			},
			screen2s: {
				value: 'common.phaseType',
				item: [],
			},

			ifcommon: false, // 是否关注
			user: {
				umsUser: {},
			},
			pointStatus: null,
			isToken: null,
		}
	},
	created() {
		this.enterpriseDetails = this.$route.query.key
	},
	watch: {
		'$i18n.locale'() {
			this.getCountryIdList()
			this.language = this.$i18n.locale.toUpperCase()
			// this.getInfoList();
		},
	},
	mounted() {
		this.init()
		this.getCountryIdList() // 获取基本信息
		// this.getInfoList();
	},
	methods: {
		init() {
			this.isToken = getToken()
			if (this.isToken) {
				getUserPointPage().then((res) => {
					this.pointStatus = res.data.umsUserPoints[0].pointStatus
				})
			}
		},
		LoginBack(data) {
			this.toViewLogin = false
		},
		Changethebatch() {
      if (this.params.pageNo * 5 <= this.num) {
        //this.$message(this.$t('common.Nodataavailable'));
        this.params.pageNo++
        this.getInfoList()

      }

		},

    ChangeUnitBatch() {
      console.log("this.unitPage.pageNo",this.unitPage.pageNo)
      console.log("his.uniNum",this.uniNum)

      if (this.unitPage.pageNo * 5 <= this.uniNum) {
        //this.$message(this.$t('common.Nodataavailable'));
        this.unitPage.pageNo++
        this.getRecommended()
      }
    },
		dialogVisibleChange() {
			this.dialogVisible = true
		},
		getCommonList() {
			let user = window.localStorage.getItem('user')
			if (user) {
				var users = JSON.parse(user)
				var userId = users.userId

				getFollowModeNumlByModelIdAndUserId(
					this.initData.baseEntityId,
					'country',
					userId
				).then((res) => {
					this.ifcommon = res.data
				})
			}
		},
		getInfoList() {
			let that = this
			this.params.language = this.$i18n.locale.toUpperCase()
			this.params.unitCountry = that.country
			this.params.continentCountry = that.initData.areDict
			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
							? item.projectLabel.split(',')
							: ''
					})
				} else {
					this.initData2 = []
					this.num = ''
				}
			})
		},
    //获取企业展示信息
    getRecommended(){
      const that =this;
      console.log("这是进入的数据内容了")
    /*  let unitPage={
        recommendFlag:'y',
        pageSize: "4",
        pageNo: "1",
        areDict: that.initData.areDict,
        language:this.$i18n.locale.toUpperCase(),
        descStatus:'0',
      }*/
      this.unitPage.areDict = that.initData.areDict;
      this.unitPage.language = this.$i18n.locale.toUpperCase();
      getBaseUnitViews(this.unitPage).then((res) => {
        if (res.data.baseUnitViews) {
          this.uniNum = res.data.page.totalCount;
          that.initData3 =  res.data.baseUnitViews;
          console.log(res.data.baseUnitViews,that.init);
        } else {
          this.initData3 = []
          this.uniNum = ''
          // this.$message("当前推荐企业暂无信息");
        }
        this.loading = false;
      });
    },
    //跳转正常企业
    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');
    },
		getCountryIdList() {
			let page = {
				baseEntityId: this.id,
				language: this.$i18n.locale.toUpperCase(),
			}
			getCountry(page).then((res) => {
				console.log(res)
				if (res.data) {
					this.initData = res.data.baseCountryViews[0]
					if (this.initData.are == 'NorthAmerica') {
						this.initData.are = 'North America'
					}
					if (this.initData.are == 'SouthAmerica') {
						this.initData.are = 'South America'
					}
					this.initData.photo = this.initData.photo.split(',')
					this.getInfoList()
          this.getRecommended()
					this.getCommonList() // 查询是否关注
				}
			})
			let list = {
				pageSize: 5,
				pageNo: 1,
				businessType: 'countryShow',
				businessId: this.id,
				typeDict: 1,
				language: this.$i18n.locale.toUpperCase(),
			}
			getInformationList(list).then((res) => {
				this.initData1 = res.data.allDataList
			})
		},
		// shareChange() {
		//   if (this.ifcommon) {
		//     this.saveFollowModelDo("unfollow");
		//   } else {
		//     this.saveFollowModelDo("follow");
		//   }
		// },
		shareChange: _.throttle(function () {
			if (this.ifcommon) {
				this.saveFollowModelDo('unfollow')
			} else {
				this.saveFollowModelDo('follow')
			}
		}, 3000),
		saveFollowModelDo: function (followType) {
			let user = window.localStorage.getItem('user')
			let tokenDetaile = this.$Cookies.get('token')
			let that = this
			if (!tokenDetaile) {
				// this.$message.warning(this.$i18n.locale=='zh'?"请先登录":"Please login first");
				this.toViewLogin = true
			} else {
				var users = JSON.parse(user)
				var token = '' + getToken()
				var projectId = this.initData.baseEntityId
				var userId = users.userId
				// 接口逻辑
				this.submitHandler((token) => {
					saveFollowModelLanguage(
						that.language,
						projectId,
						'country',
						userId,
						followType,
						token
					)
						.then((result) => {
							if (
								this.user.umsUser.userUsertypeDict !== '2' &&
								this.pointStatus == 'y'
							) {
								addIntegral('point_task_attention', '3')
							}

							this.$message({
								message: result.data,
								type: 'success',
							})
							this.ifcommon = !this.ifcommon
							this.resetToken()
						})
						.catch((error) => {
							// 此处你的业务代码
						})
				})
			}
		},
		copy() {
			var _this = this
			var clipboard = new Clipboard('.btn')
			clipboard.on('success', (e) => {
				// 释放内存
				this.$message({
					message: '复制项目已成功',
					type: 'success',
				})
				// clipboard.destroy();
			})
			clipboard.on('error', (e) => {
				// 不支持复制
				this.$message({
					message: '该浏览器不支持自动复制',
					type: 'warning',
				})
				// 释放内存
				// clipboard.destroy();
			})
		},
		getIconUrl(url) {
			return require('@/assets/img/realTimeInfo/' + url)
		},
		toView(router, json) {
			this.$router.push({ name: router, query: { key: json } })
		},
		screenBack(data) {
			console.log(data, 'screenBackscreenBackscreenBackscreenBack')
		},
		screen(i) {
			this.index = i
		},
		getInformation(num) {
			this.informationsClass = num
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.plateCountry::after {
	content: '';
}

.threeLine {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.box {
	margin-top: 10px;
	background: #fff;
	/* height: 500px; */
	padding: 20px 0;
}

.crumbs {
	margin-left: 20px;
}

body {
	margin: 0;
}

.swipers {
	position: absolute;
	top: 30px;
	left: 10px;
	width: 49%;
	height: 313px;
}

.details {
	position: absolute;
	top: 30px;
	left: 624px;
	width: 47%;
	/* 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;
}

.enterprise_style {
	line-height: 50px;
	color: #6c819d;
	padding-left: 20px;
	font-size: 18px;
	font-weight: 700;
	margin-top: 5px;
	margin-left: 20px;
}

.enterprise_style_span {
	display: block;
	width: 85px;
	text-align: center;
	height: 100%;
	border-bottom: 2px solid #6699ff;
}

.enterprise_style_span4 {
	text-align: center;
	height: 100%;
	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: 20px;
}

.recommend li {
	display: inline-block;
	width: 170px;
	/* height: 130px; */
	text-align: center;
	margin-right: 15px;
}

.information1 {
	display: inline-block;
	/* padding: 0 10px;  */
	width: 190px;
	height: 100%;
	border: 1px solid rgba(228, 228, 228, 1);
	text-align: center;
	background: #f9f9f9;
	color: #999;
}

.information2 {
	display: inline-block;
	/* padding: 0 10px;  */
	width: 190px;
	height: 100%;
	/* border-top:3px solid #2c5589; */
	background: #2c5589;
	text-align: center;
	color: #fff;
}

.information1:hover {
	color: #ff0036;
}

.continents ul,
.continents2 ul {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

.continents2 ul li {
	width: 24%;
	/* 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;
}

.white p {
	/*width: 100%;*/
	/*word-break:break-all;*/
}

.messageConEn >>> p {
	word-wrap: break-word !important;
}

.messageConZh >>> p {
	/*word-break: ;*/
}
</style>
<style>
.el-dialog__body {
	/*word-wrap:break-word!important;*/
	word-break: normal;
}
</style>