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

<template>
	<!-- 这是我的页面 -->
	<div>
		<div class="autoBox box countryBox">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: 'home' }">{{
						$t('common.Home')
					}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{
						$t('common.CountryInformation')
					}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!-- 查询 -->
			<div>
				<div style="float: left; margin-top: 35px; margin-left: 140px">
					<span
						style="
							font-family: Microsoft YaHei, Arial, helvetica, neue, sans-serif;
							color: rgb(58, 98, 149);
							font-size: 24px;
						"
						>{{ $t('common.CountrySearch') }}</span
					>
				</div>
				<div style="margin-top: 15px; margin-left: 270px">
					<el-select
						v-model="input3"
						:no-match-text="$i18n.locale == 'zh' ? '无匹配数据' : 'No Data'"
						filterable
						:placeholder="$t('common.PleaseEnter') + $t('common.Nameofcountry')"
						style="width: 800px; height: 60px; margin-top: 20px"
					>
						<el-option
							v-for="item in options"
							:key="item.baseEntityId"
							:label="$i18n.locale == 'en' ? item.enName : item.zhName"
							:value="item.baseEntityId"
							@click.native="toViewDetail('countryNationalSpace', input3)"
						>
						</el-option>
					</el-select>
				</div>
			</div>
			<!-- 地图区域 -->
			<!-- <div style="height: 620px;width:100%;margin-top: 40px;position: relative;" class="map">
                <div class='chart' id='chart'></div>

            </div> -->
			<div>
				<div class="countryTitle" style="position: relative">
					<div
						style="
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							color: #fafafa;
							font-weight: 600;
							font-size: 20px;
						"
					>
						<img
							:src="getIcons(screen1s[screen1sIndex].value, index)"
							alt=""
							style="margin-right: 10px; vertical-align: middle"
						/>
						{{ screen1s[screen1sIndex].label }}
					</div>
				</div>
				<div
					class="message"
					id="message"
					style="width: 100%; min-height: 420px"
				>
					<div
						style="
							display: inline-block;
							height: 355px;
							width: 258px;
							border-radius: 10px;
							overflow: hidden;
							vertical-align: top;
							margin-right: 20px;
							border: 1px solid #d8d8d8;
						"
					>
						<ul>
							<li
								style="
									background: #2c558a;
									color: #ffffff;
									height: 50px;
									line-height: 50px;
									font-size: 20px;
									text-align: center;
								"
								v-if="this.$i18n.locale == 'zh'"
							>
								国别总数 {{ options.length }}
							</li>
							<li
								style="
									background: #2c558a;
									color: #ffffff;
									height: 50px;
									line-height: 50px;
									font-size: 20px;
									text-align: center;
								"
								v-if="this.$i18n.locale == 'en'"
							>
								{{ options.length }} Countries
							</li>
							<li
								v-for="(item, index) in screen1s"
								class="li"
								:class="
									index == screen1sIndex ? 'color1 cursor' : 'color2 cursor'
								"
								@click="screen1sIndexChange(index)"
							>
								<img
									:src="getIcon(item.value, index)"
									alt=""
									style="width: 20px; height: 16px; margin-right: 10px"
								/>
								<span>{{ item.label }}</span>
							</li>
						</ul>
					</div>
					<div
						style="
							width: 920px;
							min-height: 400px;
							display: inline-block;
							background: #f6fbff;
							color: #333333;
						"
					>
						<span
							:class="
								$i18n.locale == 'zh' ? 'countryListItem1' : 'countryListItem2'
							"
							class="countryActive cursor"
							@click="toView('countryNationalSpace', item.baseEntityId)"
							v-for="(item, index) in initData[screen1s[screen1sIndex].value]"
						>
							<span>{{
								$i18n.locale == 'zh' ? item.zhName : item.enName
							}}</span>
						</span>
					</div>
				</div>
			</div>
			<!-- 项目信息展示-->
			<div
				style="
					display: flex;
					justify-content: space-between;
					border-bottom: 2px solid #c9c6c6;
					padding: 0 30px;
					margin-top: 20px;
				"
			>
				<!-- 左侧信息-->
				<div style="display: inline-block; width: 46%">
					<div
						style="
							width: 100%;
							padding: 10px 0;
							border-bottom: 2px solid #2c558a;
							line-height: 50px;
							margin-left: 20px;
						"
					>
						{{ $t('common.ProjectTrends') }}
						<span
							@click="changeBatchToInfoData()"
							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 infoData"
							@click="
								toViewDetail('projectPresentationDetails', item.projectId)
							"
							class="cursor list"
						>
							<div class="square"></div>
							<span class="title" v-text="item.projectName"></span>
							<span
								style="margin-left: 30px"
								v-text="formatDate(item.createDate)"
							></span>
						</li>
					</ul>
				</div>
				<!-- 右侧信息-->
				<div style="display: inline-block; width: 46%; 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 countryLastestInfos"
							@click="
								toViewDetail('countryInformationDetails', item.baseEntityId)
							"
							class="cursor list"
						>
							<div class="square"></div>
							<span class="title" v-text="item.title"></span>
							<span
								style="margin-left: 30px"
								v-text="formatDate(item.publishDate)"
							></span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 项目图片展示 -->
			<div
				style="
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-top: 30px;
				"
			>
				<div
					style="width: 22%; height: 150px"
					v-for="(item, index) in photo"
					:key="'img' + index"
				>
					<template v-if="index < 4">
						<img
							:src="'api/file/pub/' + item"
							alt=""
							style="width: 100%; height: 100%"
						/>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import HeaderItem from '@/components/headerItem'
import tabers from '@/components/taber'
import footers from '@/components/footers'
import Screen from '@/components/screen'
import {
	getCountryMap,
	getCountry,
	getCountryDynamicInfos,
} from '@/api/country/countryList'
import { getBaseProjectViews } from '@/api/project/baseProjectView'
import echarts from 'echarts'
import { getDicts } from '@/api/dict'
export default {
	name: 'countryInformation',
	components: { tabers, HeaderItem, footers, Screen },
	data() {
		return {
			allDataList: [],
			pageChangeInformation: 0,
			listInformation: {
				pageNo: 1,
				pageSize: 5,
				language: '',
			},
			pageChange: 1,
			list: {
				pageNo: 1,
				pageSize: 5,
				language: '',
				continentCountry: '',
				technicalCategories: '',
				//0为默认排序，1为关注排序
				descStatus: 0,
				status: 1,
			},
			index: 1,
			input3: '',
			infoData: [],
			screen1sIndex: 0,
			countryList: [],
			initData: [],
			options: [],
			photo: [],
			screen1s: [],
			world: {
				nameMap: {},
				dataArr: [],
			},
			countryLastestInfos: [],
			shouldGetBegin: false,
		}
	},
	mounted() {
		this.setCountry()
		this.getInformation(1)
		this.getCountryKey()
		this.getInfor()
		let page = {
			language: this.$i18n.locale.toUpperCase(),
		}
		this.getCountryList(page)
	},
	watch: {
		'$i18n.locale'() {
			this.setCountry()
			this.getInformation(1)
			this.getInfor()
			this.getCountryKey()
			let page = {
				language: this.$i18n.locale.toUpperCase(),
			}
			this.getCountryList(page)
		},
	},
	methods: {
		getCountryKey() {
			getDicts(
				this.$i18n.locale == 'zh'
					? 'CONTINENT_CODE_DICT,PROJECT_CATEGORIES_DICT,TECHNICAL_SCOPE_DICT'
					: 'CONTINENT_CODE_DICT_EN,PROJECT_CATEGORIES_DICT_EN,TECHNICAL_SCOPE_DICT_EN'
			).then((result) => {
				var data = result.data
				if (data) {
					this.screen1s = result.data[0] || []
				}
			})
		},
		screen1sIndexChange(index) {
			this.screen1sIndex = index
		},
		getCountryList(page) {
			getCountry(page).then((res) => {
				console.log(res, '__________________________________________')
				if (res.data) {
					this.initData = res.data.areMap
					this.options = res.data.baseCountryViews
				} else {
					this.initData = []
				}
			})
		},
		getInformation(pageNo) {
			this.listInformation.language = this.$i18n.locale.toUpperCase()
			if (this.shouldGetBegin) {
				pageNo = 1
			}
			this.listInformation.pageNo = pageNo
			getCountryDynamicInfos(this.listInformation).then((res) => {
				var data = res.data
				if (data) {
					this.countryLastestInfos = data || []
					this.shouldGetBegin =
						this.countryLastestInfos.length < 5 ? true : false
				}
			})
		},
		changeBatchToInfoData() {
			this.pageChange += 1
			this.list.pageNo = this.pageChange + ''
			this.getInfor()
		},
		getInfor() {
			this.list.language = this.$i18n.locale.toUpperCase()
			getBaseProjectViews(this.list).then((res) => {
				if (res.data) {
					this.infoData = res.data.baseProjectViews
					res.data.allDataList.forEach((item) => {
						if (item.pictureUrl) {
							this.photo.push(item.pictureUrl)
						}
					})
					if (res.data.baseProjectViews.length < 5) {
						this.pageChange = 0
					}
				}
			})
		},
		showCountry(continent) {
			this.countryList = this.initData[continent] || []
		},
		getIconUrl(url) {
			return require('@/assets/img/home/' + url + '.png')
		},
		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')
		},
		toView(router, json) {
			// this.$router.push({name:router,query:{key: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')
		},
		screenBack(data) {
			console.log(data, 'screenBackscreenBackscreenBackscreenBack')
		},
		screen(i) {
			this.index = i
		},
		setCountry() {
			let currentlang = this.$i18n.locale == 'zh' ? 'ZH' : 'EN'
			getCountryMap(currentlang).then((res) => {
				if (res.data) {
					this.world = res.data
					this.getWorldMap(res.data)
				}
			})
		},
		getWorldMap(data) {
			console.log(data, '地图数据')
			var namemap = data.nameMap
			var dataArr = data.dataArr
			console.log(namemap, dataArr, '自定义地图')
			for (let i = 0; i < dataArr.length; i++) {
				if (dataArr[i].id == '') {
					dataArr[i].value = 0
				} else {
					dataArr[i].value = 10
				}
			}
			this.drawChart(namemap, dataArr)
		},
		//获取对应的国家id
		getWorldByName(countryName) {
			for (let index in this.world.dataArr) {
				if (
					this.world.dataArr[index].name == countryName ||
					this.world.dataArr[index].countryNameEn == countryName
				) {
					return this.world.dataArr[index].id
				}
			}
		},
		getIcon(value, index) {
			// return require("@/assets/img/country/countryIcon/" + value +'1.png');
			if (index == this.screen1sIndex) {
				return require('@/assets/img/country/countryIcon/' + value + '.png')
			} else {
				return require('@/assets/img/country/countryIcon/' + value + '1.png')
			}
		},
		getIcons(value, index) {
			return require('@/assets/img/country/countryIcon/' + value + '1.png')
		},
		drawChart(namemap, dataa) {
			console.log(dataa, '所有的地图数据,对应当前语言')
			// 基于准备好的dom，初始化echarts实例
			let chart = echarts.init(document.getElementById('chart'))
			let _this = this
			// 监听屏幕变化自动缩放图表
			//   window.addEventListener('resize', function () {
			//     chart.resize()
			//   })
			// 绘制图表
			chart.setOption({
				// 提示框组件
				tooltip: {
					trigger: 'item',
					formatter: function (params) {
						if (_this.$i18n.locale == 'zh') {
							var res = params.name + '<br/>'
							for (var i = 0; i < 1; i++) {
								for (var j = 0; j < dataa.length; j++) {
									if (dataa[j].name == params.name) {
										res += '洲' + ': ' + dataa[j].continent
									}
								}
							}
						} else {
							var res = params.name + '<br/>'
							for (var i = 0; i < 1; i++) {
								for (var j = 0; j < dataa.length; j++) {
									if (dataa[j].name == params.name) {
										res += 'Continent' + ':' + dataa[j].continent
									}
								}
							}
						}
						return res
					},
				},
				visualMap: {
					min: 0,
					max: 10,
					text: ['min', 'max'],
					realtime: false,
					calculable: true,
					show: false,
					inRange: {
						color: ['#F0F0F0', '#318ed1'],
					},
					// data的值里有value时根据value有颜色变化,key只能是value,带不带引号都可以
				},
				series: [
					{
						// 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
						name: 'worldMap',
						// 类型
						type: 'map',
						// 地图类型
						mapType: 'world',
						// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
						roam: false,
						// 图形上的文本标签
						label: {
							show: false, // 是否显示对应地名
						},
						zoom: 1.2,
						// 地图区域的多边形 图形样式
						itemStyle: {
							areaColor: '#318ed1',
							borderWidth: 0.5, // 描边线宽 为 0 时无描边
							borderColor: '#005897', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
							borderType: 'solid', // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
						},
						// 高亮状态下的多边形和标签样式
						emphasis: {
							label: {
								show: true, // 是否显示标签
								color: '#fff', // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
							},
							itemStyle: {
								areaColor: '#FF6347', // 地图区域的颜色
							},
						},
						// 自定义地区的名称映射
						nameMap: namemap,
						// 地图系列中的数据内容数组 数组项可以为单个数值
						data: dataa,
					},
				],
			})
			chart.on('click', { seriesName: 'worldMap' }, function (even) {
				console.log(even.data, 'even.data当前一条地图数据')
				let countryId = ''
				let countryName = even.data.name
				let id = _this.getWorldByName(countryName)
				if (id) {
					countryId = id
				}
				if (countryId !== '') {
					_this.$router.push({
						name: 'countryNationalSpace',
						query: { key: countryId },
					})
				} else {
					if (_this.$i18n.locale == 'en') {
						alert('No data available.')
					} else {
						alert('当前暂无数据。')
					}
				}
			})
		},
	},
}
</script>
<style scoped>
.whiteBox {
	position: absolute;
	left: 121px;
	height: 200px;
	background: #fff;
	width: 80px;
	bottom: 23px;
}
.box {
	margin-top: 10px;
	background: #fff;
	/* height: 500px; */
	padding: 20px 0;
}
.crumbs {
	margin-left: 20px;
}
body {
	margin: 0;
}
.countryInformation {
	width: 100%;
	height: 524px;
	margin-top: 10px;
	background-image: linear-gradient(#396db1, #4586da, #2c558a);
	/* background: url('../../assets/img/country/newMap.png') no-repeat; */
	/* background-size: 100%,100%; */
	position: relative;
}
.text {
	line-height: 35px;
	cursor: pointer;
	background-color: transparent;
}
#el-popover-4638 {
	background: #fff0;
}
.countryBox >>> .el-input__inner {
	height: 60px;
}
.countryBox >>> .el-input-group__append,
.el-input-group__prepend {
	background: #2c558a;
	border-color: #2c558a;
	color: #fff;
}
.seamless-warp {
	height: 310px;
	overflow: hidden;
}
.el-button {
	background-color: transparent;
	border: 0;
	color: #fff;
}
.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;
}
.mapMessage {
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	position: relative;
}
.mapMessage::before {
	display: block;
	content: '【';
	font-size: 40px;
	position: absolute;
	left: -60px;
	top: -4px;
	opacity: 0;
	transition: all 0.8s;
}
.mapMessage::after {
	display: block;
	font-size: 40px;
	content: '】';
	position: absolute;
	right: -60px;
	top: -4px;
	opacity: 0;
	transition: all 0.8s;
}
.mapMessage:hover::before {
	left: -40px;
	opacity: 1;
}
.mapMessage:hover::after {
	right: -40px;
	opacity: 1;
}

.countryList {
	width: 200px;
	position: absolute;
	top: 20%;
	right: 0;
	border: 1px solid #ffffff6b;
}
.countryList ul > li {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	color: #fff;
	cursor: pointer;
}
.map {
	position: relative;
	font-weight: 600;
}
.map span {
	cursor: pointer;
}

.my-tooltip {
	border-radius: 50px;
	background-color: rgba(106, 237, 247, 0.7);
	border: none;
	padding: 15px;
	color: #fff;
	font-size: 16px;
}
.inner-tag {
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.5s;
}
.outer-tag:hover .inner-tag {
	width: 80px;
	height: 80px;
	opacity: 0;
}
/* 世界地图 */
/*.chart {*/
/* width: 80%;
      margin:0 auto;
      height: 600px;
      border: 1px solid #eeeeee; */
/* background: url(../../public/static/bg.png) no-repeat; 背景图设置*/
/* background-size: 100% 100%; */
/* background:#FDFEFF #E2F4FF; */
/* background:linear-gradient(top, #FDFEFF 0%, #E2F4FF 100%); */
/*}*/
.countryTitle {
	margin-top: 20px;
	width: 100%;
	height: 100px;
	background: #2d568a;
}
.countryListItem1 {
	width: 200px;
	height: 50px;
	float: left;
	text-align: center;
	margin: 20px 20px 0 0;
	/* overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis; */
	/* line-height: 50px; */
}
.countryListItem2 {
	width: 200px;
	height: 70px;
	float: left;
	text-align: center;
	margin: 20px 20px 0 0;
	/* overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis; */
	/* line-height: 50px; */
}
.message {
	width: 188px;
	float: left;
	margin-top: 10px;
}
.message .li {
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	padding-left: 60px;
	border-bottom: 1px solid #d8d8d8;
}
.color1 {
	color: #0091ff;
	letter-spacing: 1px;
}
.color2 {
	color: #333333;
	letter-spacing: 1px;
}
.countryActive:hover {
	color: #0091ff;
}
</style>