dev/dcp-app-gate/pages/information/InformationData/dom/dataExportToolBase.vue

<template>
	<view class="dataExportTool">
		<view class="relevant">
			<view class="relevantTitle">{{ $i18n.locale=='zh'?'已选择指标':'index of correlation' }}</view>
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper v-if="params.indicator.searchSelect.length>3" class="swiper" :interval="interval" :duration="duration" :display-multiple-items="4">
						<swiper-item v-for="(item,index) in params.indicator.searchSelect" :key="'iconitem'+index" @click="emitItem(item)">
							<view class="swiper-item">
								<view class="icon">
									<u-icon v-if="index == params.indicator.searchSelect.length-1" name="plus-circle-fill" color="#2979ff" size="28"></u-icon>
									<u-image :src="item.icon" mode="widthFix" alt="" width="100%"></u-image>
								</view>
								<view class="labeltext">{{item.label}}</view>
							</view>
						</swiper-item>
					</swiper>
					<view v-else class="swiper">
						<view style="width: 25%;height: 100%;display: inline-block;" v-for="(item,index) in params.indicator.searchSelect" :key="'iconitem'+index" @click="emitItem(item)">
							<view class="swiper-item">
								<view class="icon">
									<u-image :src="item.icon" mode="widthFix" alt="" width="100%"></u-image>
								</view>
								<view class="labeltext">{{item.label}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="relevant">
			<view class="relevantTitle">{{ $i18n.locale=='zh'?'已选择指标':'index of correlation' }}</view>
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper v-if="params.world.searchSelect.length>4" class="swiper" :interval="interval" :duration="duration" :display-multiple-items="4">
						<swiper-item v-for="(item,index) in params.indicator.searchSelect" :key="'iconitem'+index" @click="emitItem(item)">
							<view class="swiper-item">
								<view class="icon">
									<u-image :src="item.icon" mode="widthFix" alt="" width="100%"></u-image>
								</view>
								<view class="labeltext">{{item.label}}</view>
							</view>
						</swiper-item>
					</swiper>
					<view v-else class="swiper">
						<view style="width: 25%;height: 100%;display: inline-block;" v-for="(item,index) in params.world.searchSelect" :key="'iconitem'+index" @click="emitItem(item)">
							<view class="swiper-item">
								<view class="icon">
									<u-image :src="item.icon" mode="widthFix" alt="" width="100%"></u-image>
								</view>
								<view class="labeltext">{{item.label}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="relevant">
			<view class="relevantTitle">{{ $i18n.locale=='zh'?'已选择指标':'index of correlation' }}</view>
			<view class="page-section">

			</view>
		</view>
		<view class="btn">
			<button>{{i18n('export')}}EXCEL</button>
			<button>{{i18n('export')}}PDF</button>
			<button>{{i18n('reset')}}</button>
		</view>
	</view>
</template>

<script>

let _self;
let canvasColumnIns = null;
let canvasLineIns = null;
export default {
	name: "dataExportTool",
	data(){
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			params: {
				indicator:{
					searchSelect: [
						{
							icon:require('@/static/img/infomationdata/e1.png'),
							"label": this.$i18n.locale == 'zh'?'发电总量':'Total power generation',
							"item": {
								"indexName": "发电总量",
								"indexEnName": "Total power generation",
								"source": '{"IEA":{"index":{"发电总量":"132"}},"EIA":{"index":{"发电总量":"132"}}}'
							}
						},
						{
							icon:require('@/static/img/infomationdata/e1.png'),
							"label": this.$i18n.locale == 'zh'?'发电总量':'Total power generation',
							"item": {
								"indexName": "发电总量",
								"indexEnName": "Total power generation",
								"source": '{"IEA":{"index":{"发电总量":"132"}},"EIA":{"index":{"发电总量":"132"}}}'
							}
						},
					],
					searchList: [],
				},
				world:{
					countryId:['93BC2730ED0A402186F596F6A01C007E'],
					countryName:this.$i18n.locale == 'zh' ? ['世界'] : ['World'],
					countryList: [
						{
							label: this.$i18n.locale=='zh'?'亚洲':'ASIA',
							labelEn: 'ASIA',
							children: [],
						},
						{
							label: this.$i18n.locale=='zh'?'非洲':'AFRICA',
							labelEn: 'AFRICA',
							children: [],
						},
						{
							label: this.$i18n.locale=='zh'?'欧洲':'EUROPE',
							labelEn: 'EUROPE',
							children: [],
						},
						{
							label: this.$i18n.locale=='zh'?'北美洲':'NORTH AMERICA',
							labelEn: 'NORTH AMERICA',
							children: [],
						},
						{
							label: this.$i18n.locale=='zh'?'南美洲':'SOUTH AMERICA',
							labelEn: 'SOUTH AMERICA',
							children: [],
						},
						{
							label: this.$i18n.locale=='zh'?'大洋洲':'OCEANIA',
							labelEn: 'OCEANIA',
							children: [],
						},
					],
					originalCountryData:[],
					searchSelect: [
						{
							"label": this.$i18n.locale == 'zh'?'中国':'Total power generation',
							"item": {
								"indexName": "发电总量",
								"indexEnName": "Total power generation",
								"source": '{"IEA":{"index":{"发电总量":"132"}},"EIA":{"index":{"发电总量":"132"}}}'
							}
						},
						{
							"label": this.$i18n.locale == 'zh'?'韩国':'Total power generation',
							"item": {
								"indexName": "发电总量",
								"indexEnName": "Total power generation",
								"source": '{"IEA":{"index":{"发电总量":"132"}},"EIA":{"index":{"发电总量":"132"}}}'
							}
						}
					],
					searchList: [],
				},
				time:{
					title: this.$i18n.locale == 'zh' ? '时间' : 'Time',
					showDateFlag: true,
					time:['2013','2014','2015','2016','2017','2018','2019','2020'],
					timeScope:[],
					isHighlight:false
				},
			},
			correlationIconList: [
				{
					icon:require('@/static/img/infomationdata/shehuijingji/jingji.png'),
					label:'基础经济'
				},
				{
					icon:require('@/static/img/infomationdata/shehuijingji/maoyi.png'),
					label:'贸易'
				},
				{
					icon:require('@/static/img/infomationdata/shehuijingji/renkou.png'),
					label:'人口'
				},
				{
					icon:require('@/static/img/infomationdata/shehuijingji/guotu.png'),
					label:'国土'
				},
				{
					icon:require('@/static/img/infomationdata/nengyuan/shengcheng.png'),
					label:'能源生产'
				},
				{
					icon:require('@/static/img/infomationdata/nengyuan/xiaofei.png'),
					label:'能源消费'
				},
				{
					icon:require('@/static/img/infomationdata/nengyuan/zhuanhua.png'),
					label:'能源转化'
				},
				{
					icon:require('@/static/img/infomationdata/dianli/fadianzhuangzhi.png'),
					label:'发电装机'
				},
				{
					icon:require('@/static/img/infomationdata/dianli/fadian.png'),
					label:'发电'
				},
				{
					icon:require('@/static/img/infomationdata/dianli/yongdian.png'),
					label:'用电'
				},
				{
					icon:require('@/static/img/infomationdata/qihou/huanjing.png'),
					label:'排放量'
				},
			]
		}
	},
	created(){
		this.init()
	},
	async mounted(){
		_self = this;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
	},
	methods:{
		async init() {
			await this.getServerData()
			await this.getCountryList()
		},
		i18n(data) {
			return this.$t('common.' + data);
		},
		isJsonString(str) {
			try {
				if (typeof JSON.parse(str) == "object") {
					return true;
				}
			} catch(e) {
			}
			return false;
		},
		// 类别
		async getServerData() {
			const res = await this.$myRequest({
				url: '/op/geiIntegratedDataMenus/getMenu',
				data: {}
			});
			this.params.indicator.searchList = res.data;
			this.setIcon(this.params.indicator.searchList)
		},
		setIcon(data){
			data.forEach(item=>{
				this.correlationIconList.forEach(icon=>{
					if(item.indexName == icon.label){
						item.icon = icon.icon;
					}
				})
				if(item.child && item.child.length!=0){
					this.setIcon(item.child)
				}
			})
		},
		// 国家/地区
		async getCountryList() {
			this.params.world.originalCountryData = this.$i18n.locale === 'zh'?
					await this.$api.json('originalCountryDataZH'):
					await this.$api.json('originalCountryDataEN');
			this.params.world.countryList.forEach(originalItem=>{
				this.params.world.originalCountryData.forEach((item, j) => {
					if(item.COUNTRY_EN_NAME === originalItem.labelEn){
						originalItem.COUNTRY_ID = item.COUNTRY_ID;
						originalItem.COUNTRY_CN_NAME = item.COUNTRY_CN_NAME;
						originalItem.COUNTRY_EN_NAME = item.COUNTRY_EN_NAME;
						originalItem.ifClick = false;
					}
					if(item.CONTINENT_EN_NAME === originalItem.labelEn){
						item.value = item.COUNTRY_ID;
						item.label = this.$i18n.locale == 'zh' ? item.COUNTRY_CN_NAME : item.COUNTRY_EN_NAME;
						item.ifClick = false;
						originalItem.children.push(item);
					}
				})
			})
		},
		countryFilter(array,flag){
			return array.filter(item=>item.ifClick===flag)
		},
		emitItem(item){

		}
	}
}
</script>

<style scoped lang="scss">
.swiper-item{
	font-size:26upx;
	/*margin:20upx 20upx;*/
	text-align:center;
	cursor:pointer;
	width: 100%;
	height: 100%;
	padding: 0 20%;
	box-sizing: border-box;
	.icon{
		position:relative;
		overflow:hidden;
		max-width:100upx;
		margin:20upx auto 10upx;
		img{
			display:block;
			width:100%;
		}
	}
	.labeltext{
		width:100%;
		//overflow:hidden;
		//text-overflow:ellipsis;
		//white-space: nowrap;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}
.relevantTitle{
	padding:20upx;
	position:relative;
	overflow:hidden;
	text-indent:10upx;
}
.relevantTitle:after{
	content:"";
	width:6upx;
	height:30upx;
	background:#1777FE;
	position:absolute;
	left:10upx;
	top:50%;
	text-indent:8upx;
	margin-top:-18upx;
}
.dataExportTool /deep/.swiper {
	display: block;
	height: 120px;
}
.btn{
	.uni-button{
		display: inline-block;
	}
}
</style>