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

<template>
	<view class="indicatorDataQuery">
		<!-- 下拉菜单 -->
		<view class="selectCondition">
			<u-dropdown ref="uDropdown" @open="open" @close="close">
				<!-- 指标 -->
				<u-dropdown-item :title="dropdown.indicator.title">
					<view class="slot-content">
						<view style="height:1000upx;position: relative;">
							<scroll-view scroll-y="true" class="left">
								<view v-for="(fItem, fIndex) in dropdown.indicator.searchList" :key="fItem+fIndex"
									class="row" :class="[fIndex===dropdown.indicator.showCategoryIndex ?'on':'']"
									@tap="dropdown.indicator.showCategoryIndex = fIndex">
									<view class="text">
										{{ $i18n.locale == 'zh' ? fItem['indexName'] : fItem['indexEnName'] }}
									</view>
								</view>
							</scroll-view>
							<block v-for="(fItem, fIndex) in dropdown.indicator.searchList" :key="fItem+fIndex+'1'">
								<scroll-view scroll-y class="right"
									v-if="fIndex === dropdown.indicator.showCategoryIndex">
									<view v-for="(item,index) in fItem['child']" :key="'c'+index"
										:class="(item['child']&&item['child'].length>0)?'':'cate'">
										<view v-if="item['child'] && item['child'].length>0">
											<view :class="{'getCategory':item['child'].length>0}">
												{{ $i18n.locale == 'zh' ? item['indexName'] : item['indexEnName'] }}
											</view>
											<view class="threemenu">
												<view v-for="(i,j) in item['child']" :key="j" class="cateText"
													@click="getCategory1({item:i,index:j})"
													:class="{'cateTextActive':i.ifClick}">
													{{ $i18n.locale == 'zh' ? i['indexName'] : i['indexEnName'] }}
												</view>
											</view>
										</view>
										<view v-else>
											<view class="cateText" @click="getCategory1({item,index})"
												:class="{'cateTextActive':item.ifClick}">
												{{ $i18n.locale == 'zh' ? item['indexName'] : item['indexEnName'] }}
											</view>
										</view>
									</view>
								</scroll-view>
							</block>
						</view>
					</view>
				</u-dropdown-item>
				<!-- 世界 -->
				<u-dropdown-item :title="dropdown.world.title">
					<view class="slot-content">
						<view
							style="height:80upx;position: relative;background-color: #fff;padding: 10upx;box-sizing: border-box;">
							<u-button type="primary" @click="empty" class="contry-btn" style="float: right;">{{
									$i18n.locale == 'zh' ? '清空' : 'Clear'
								}}
							</u-button>
							<u-button type="primary" @click="submit" class="contry-btn"
								style="float: right;margin-right: 40upx;">{{
									i18n('submit')
								}}
							</u-button>
						</view>
						<view style="height:920upx;position: relative;">
							<scroll-view scroll-y="true" class="left">
								<view v-for="(fItem, fIndex) in dropdown.world.countryList" :key="fItem+fIndex"
									class="row" :class="[fIndex===dropdown.world.showCategoryIndex ?'on':'']"
									@tap="dropdown.world.showCategoryIndex = fIndex">
									<view class="text">
										{{ $i18n.locale == 'zh' ? fItem['label'] : fItem['label'] }}
									</view>
								</view>
							</scroll-view>
							<block v-for="(fItem, fIndex) in dropdown.world.countryList" :key="fItem+fIndex+'1'">
								<scroll-view scroll-y class="right" v-if="fIndex === dropdown.world.showCategoryIndex">
									<!-- 已选 -->
									<view v-for="(item,index) in countryFilter(fItem['children'],true)"
										:key="'c1'+index"
										:class="(item['children']&&item['children'].length>0)?'':'cate'">
										<view>
											<view class="cateText"
												@click="getCategory2({item:item,index:index,ifClick:false})"
												:class="{'cateTextActive':item.ifClick}">
												{{ $i18n.locale == 'zh' ? item['label'] : item['label'] }}
											</view>
										</view>
									</view>
									<hr style="border: 1upx solid #bbb;" />
									<!-- 大洲 -->
									<view class="cate">
										<view>
											<view class="cateText"
												@click="getCategory2({item:fItem,index:null,ifClick:!fItem.ifClick})"
												:class="{'cateTextActive':fItem.ifClick}">
												{{ fItem['label'] }}
											</view>
										</view>
									</view>
									<hr style="border: 1upx solid #bbb;" />
									<!-- 未选 -->
									<view v-for="(item,index) in countryFilter(fItem['children'],false)"
										:key="'c2'+index"
										:class="(item['children']&&item['children'].length>0)?'':'cate'">
										<view>
											<view class="cateText"
												@click="getCategory2({item:item,index:index,ifClick:true})"
												:class="{'cateTextActive':item.ifClick}">
												{{ $i18n.locale == 'zh' ? item['label'] : item['label'] }}
											</view>
										</view>
									</view>
								</scroll-view>
							</block>
						</view>
					</view>
				</u-dropdown-item>
				<!-- 时间 -->
				<u-dropdown-item :title="dropdown.time.title">
					<view class="slot-content">
						<!-- 时间选择 -->
						<view style="height:1000upx;position:absolute;bottom: 0;">
							<yearSelector :show="dropdown.time.showDateFlag" :defaultTimeValue="[2013,2020]"
								@getTimeValue="getTimeValue" @cancel="timeCancel"></yearSelector>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 内容 -->
		<view style="height: calc(100% - 80upx);background: #fff;">
			<!-- 图表 -->
			<view class="chart-columns">
				<!-- 按钮区 -->
				<view class="chart-bg-white chart-title-bar chart-common-mt">
					<!-- 标题 -->
					<view class="chart-title-dot-light">{{ charts.chartsTitle }}</view>
					<!-- 切换线/柱图 -->
					<view class="changeChart">
						<text :class="canvasType===1?'uCharts2':'uCharts1'"
							@click="canvasTypeChange(1)">{{ i18n('ColumnChart') }}</text>
						<text :class="canvasType===2?'uCharts2':'uCharts1'"
							@click="canvasTypeChange(2)">{{ i18n('LineChart') }}</text>
						<view class="export" :class="[loading?'loading':'']">
							<u-loading v-if="loading"></u-loading>
							<easy-select v-else ref="easySelect" size="medium"
								:value="$i18n.locale == 'zh' ? '导出' : 'Export'" :options="exportDocument"
								@selectOne="selectExportType"></easy-select>
						</view>
					</view>
				</view>
				<!-- 图表 -->
				<view class="chart-charts">
					<canvas v-if="canvasType===1" canvas-id="canvasColumn1" id="canvasColumn1" class="charts"
						@touchstart="touchColumn1" @touchmove="moveColumn1" @touchend="touchEndColumn1"></canvas>
					<canvas v-else-if="canvasType===2" canvas-id="canvasLine1" id="canvasLine1" class="charts"
						@touchstart="touchLine1" @touchmove="moveLine1" @touchend="touchEndLine1"></canvas>
				</view>
				<view style="height: 36upx;margin: 0 0 20upx 0;">
					<p class="dataSourcep">
						<span style="margin-left: 50upx">{{ $t('common.Datasources') }}</span>：{{ submitSource }}
					</p>
				</view>
				<!-- 重置按钮 -->
				<view class="reset">
					<u-button type="primary" @click="Reset">{{ i18n('Reset') }}</u-button>
				</view>
			</view>
			<!-- 相关指标 -->
			<RelevantIndicators :dataList="correlationList" @showRelevant="showRelevant"></RelevantIndicators>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uCharts from '@/static/js/u-charts.js';
	import easySelect from '@/components/easy-select/easy-select';
	import yearSelector from "./yearSelector";
	import RelevantIndicators from "./RelevantIndicators";

	let _self;
	let canvasColumnIns = null;
	let canvasLineIns = null;
	export default {
		name: "indicatorDataQuery",
		components: {
			yearSelector,
			easySelect,
			RelevantIndicators
		},
		props: {
			searchItem: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				loading: false,
				cWidth: '',
				cHeight: '',
				/**
				 * 下拉菜单
				 */
				dropdown: {
					indicator: {
						title: this.$i18n.locale == 'zh' ? '人均GDP' : 'GDP per capita',
						searchSelect: {},
						searchList: [],
						showCategoryIndex: 0,
					},
					world: {
						title: this.$i18n.locale == 'zh' ? '中国' : 'CHINA',
						countryId: ['F57CE016EB194C9C84AC11E79000F1E2'],
						countryName: this.$i18n.locale == 'zh' ? ['中国'] : ['CHINA'],
						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: [],
						showCategoryIndex: 0,
						temp: {
							country: [],
							countryId: [],
							countryName: []
						}
					},
					time: {
						title: this.$i18n.locale == 'zh' ? '时间' : 'Time',
						showDateFlag: true,
						time: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
						timeScope: [],
						isHighlight: false
					},
				},
				/**
				 * 图表
				 */
				canvasType: 1,
				pixelRatio: 1,
				charts: {
					chartsTitle: null, // 头部展示的单位
					activeTitle: null, // 选择的类型
					activeType: {
						indexName: '人均GDP',
						indexEnName: 'GDP per capita',
						source: {
							"世界银行": {
								"index": {
									"人均GDP": "28"
								}
							}
						}
					},
				},
				submitSource: this.$i18n.locale == 'zh' ? '世界银行' : 'World Bank',
				exportDocument: [{
					value: 'EXCEL',
					label: 'Excel'
				}, {
					value: 'PDF',
					label: 'PDF'
				}, ],
				/**
				 * 相关指标
				 */
				correlationList: [{
					icon: require('@/static/img/infomationdata/e1.png'),
					"label": this.$i18n.locale == 'zh' ? '人均GDP' : 'GDP per capita',
					"item": {
						"indexName": "人均GDP",
						"indexEnName": "GDP per capita",
						"source": '{"世界银行":{"index":{"人均GDP":"28"}}}'
					}
				}],
				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: '排放量'
					},
					// 临时添加
					// {
					// 	icon: require('@/static/img/infomationdata/dianli/yongdian.png'),
					// 	label: '总储备'
					// },
					// {
					// 	icon: require('@/static/img/infomationdata/dianli/yongdian.png'),
					// 	label: '广义货币增长'
					// },
					// {
					// 	icon: require('@/static/img/infomationdata/dianli/yongdian.png'),
					// 	label: '贷款利率'
					// },
					// {
					// 	icon: require('@/static/img/infomationdata/dianli/yongdian.png'),
					// 	label: '存款利率'
					// },
					// {
					// 	icon: require('@/static/img/infomationdata/dianli/yongdian.png'),
					// 	label: '实际利率'
					// },
					// {
					// 	icon: require('@/static/img/infomationdata/dianli/yongdian.png'),
					// 	label: '征信信息胜读'
					// },
					// {
					// 	icon: require('@/static/img/infomationdata/dianli/yongdian.png'),
					// 	label: '官'
					// },
				],
				exportId: [],
				exportPoll: ''
			}
		},
		computed: {
			countryNameObject() {
				let country = [];
				this.dropdown.world.countryId.forEach(item => {
					country.push(this.dropdown.world.originalCountryData.filter(it => it.COUNTRY_ID == item)[0])
				})
				return country
				// let country = this.dropdown.world.originalCountryData.filter(item=>{return this.dropdown.world.countryId.includes(item)?item:})
			}
		},
		watch: {
			exportId(n, o) {
				let _this = this;
				if (_this.exportId.length > 0) {

				} else {
					this.loading = false
				}
				clearInterval(this.exportPoll)
				this.exportPoll = setInterval(() => {
					_this.exportId.forEach(item => {
						_this.getTime(item)
					})
				}, 2000)
			},
			searchItem(n, o) {
				let nodeId = n.item.nodeId.split('_')
				let item = this.dropdown.indicator.searchList
				let index = ''
				nodeId.forEach(it => {
					item = item[Number(it)]
					if (item.child && item.child.length && item.child.length !== 0) {
						item = item.child
					}
					index = Number(it)
				})
				this.getCategory1({
					item,
					index
				})
			}
		},
		created() {
			this.init()
		},
		async mounted() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			await this.getInitialCategory({
				"Source": {
					"世界银行": {
						"index": {
							"人均GDP": "28"
						}
					}
				},
				"country": ["F57CE016EB194C9C84AC11E79000F1E2"],
				"time": this.dropdown.time.time,
				"language": this.$i18n.locale,
			});
		},
		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;
			},
			/**
			 * 下拉菜单
			 */
			open(index) {
				if (this.dropdown.world.temp.countryId.length != 0) {
					this.dropdown.world.countryId = JSON.parse(JSON.stringify(this.dropdown.world.temp.countryId))
					this.dropdown.world.countryName = JSON.parse(JSON.stringify(this.dropdown.world.temp.countryName))
				}
				this.dropdown.world.temp.country.forEach(item => {
					item.ifClick = !item.ifClick
				})
				this.dropdown.world.temp = {
					country: [],
					countryId: [],
					countryName: []
				}
				this.$forceUpdate()
			},
			close(index) {

			},
			// 类别
			async getServerData() {
				const res = await this.$myRequest({
					url: '/op/geiIntegratedDataMenus/getMenu',
					data: {}
				});
				this.dropdown.indicator.searchList = res.data;
				this.setIcon(this.dropdown.indicator.searchList)
				this.dropdown.indicator.showCategoryIndex = 0
				this.dropdown.indicator.searchSelect = res.data[0].child[0].child[2]
				this.dropdown.indicator.searchSelect.ifClick = true;
			},
			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.dropdown.world.originalCountryData = this.$i18n.locale === 'zh' ?
					await this.$api.json('originalCountryDataZH') :
					await this.$api.json('originalCountryDataEN');
				this.dropdown.world.countryList.forEach(originalItem => {
					this.dropdown.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);
						}
						if (item.COUNTRY_ID == this.dropdown.world.countryId[0]) {
							item.ifClick = true;
						}
					})
				})
			},
			countryFilter(array, flag) {
				return array.filter(item => item.ifClick === flag)
			},
			// 日历选择
			getTimeValue(e) {
				let arr = []
				for (let i = e[0]; i <= e[1]; i++) {
					arr.push(`${i}`)
				}
				this.dropdown.time.timeScope = e
				this.dropdown.time.time = arr
				this.dropdown.time.title = `${e[0]}-${e[1]}`
				this.$refs.uDropdown.close()
				this.getCategory();
			},
			timeCancel(e) {
				if (e) {
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh' ? '请正确选择时间，时间段为7年内' :
							'Please select the right time period within 7 years',
						type: 'error',
					});
				}
				this.$refs.uDropdown.close()
			},
			/**
			 * 图表
			 */
			canvasTypeChange(num) {
				this.canvasType = num;
				this.getCategory();
			},
			touchColumn(e) {
				canvasColumnIns.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + '\n' + item.name + ':' + item.data.value
							let country = item.name.split(' ')
							this.textList = [{
								text: category
							}];
							country.forEach(it => {
								this.textList.push({
									text: it
								})
							})
							this.textList.push({
								text: item.data.value
							})
						} else {
							return category + '\n' + item.name + ':' + item.data
							let country = item.name.split(' ')
							this.textList = [{
								text: category
							}];
							country.forEach(it => {
								this.textList.push({
									text: it
								})
							})
							this.textList.push({
								text: item.data
							})
						}
					}
				});
			},
			touchLine(e) {
				canvasLineIns.showToolTip(e, {
					format: function(item, category) {
						return item.data
					}
				})
			},
			// 启用图表拖拽
			touchColumn1(e) {
				canvasColumnIns.scrollStart(e);
			},
			moveColumn1(e) {
				canvasColumnIns.scroll(e);
			},
			touchEndColumn1(e) {
				canvasColumnIns.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasColumnIns.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchLine1(e) {
				canvasLineIns.scrollStart(e);
			},
			moveLine1(e) {
				canvasLineIns.scroll(e);
			},
			touchEndLine1(e) {
				canvasLineIns.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasLineIns.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			async getInitialCategory(params) {
				const res = await this.$myRequest({
					url: '/op/geiIntegratedDataMenus/getChartData',
					data: {
						...params
					},
					method: 'post',
					type: 'payload'
				});
				if (res.data) {
					this.canvas(res.data);
				}
				this.getCorrelationList()
				this.$forceUpdate()
			},
			canvas(data) {
				this.charts.chartsTitle = data[0].unitY; // 头部展示的单位
				this.charts.activeTitle = this.$i18n.locale === 'zh' ? this.charts.activeType.indexName : this.charts
					.activeType.indexEnName; //选择的类型
				let series = [];
				let seriesItem = {};
				data.forEach((item, index) => {
					seriesItem = {
						"name": this.dropdown.world.countryName[index],
						"data": item.y
					}
					series.push(seriesItem);
				})
				let Column = {
					"categories": data[0].x,
					"series": series
				};
				if (this.canvasType == 1) {
					this.showColumn('canvasColumn1', Column);
				} else {
					this.showLine("canvasLine1", Column);
				}
			},
			showColumn(canvasId, chartData) {
				canvasColumnIns = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true
					},
					enableScroll: true, //开启图表拖拽功能
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {},
					dataLabel: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				})
			},
			showLine(canvasId, chartData) {
				canvasLineIns = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					enableScroll: true, //开启图表拖拽功能
					legend: {
						show: true
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			// 点击事件
			getCategory() {
				// 数据优先级
				let item = this.dropdown.indicator.searchSelect
				this.getSubmitSource(item)

				let source = this.charts.activeType.source;
				if (this.isJsonString(this.charts.activeType.source)) {
					source = JSON.parse(this.charts.activeType.source)
				}
				let params = {
					"Source": source,
					"country": this.dropdown.world.countryId,
					"time": this.dropdown.time.time,
					"language": this.$i18n.locale
				}
				this.getInitialCategory(params);
				this.$refs.uDropdown.close()
			},
			getCategory1({
				item,
				index,
				ifClick
			}) {
				this.dropdown.indicator.searchSelect.ifClick = false
				this.dropdown.indicator.searchSelect = item
				this.dropdown.indicator.title = this.$i18n.locale == 'zh' ? item.indexName : item.indexEnName
				item.ifClick = true
				this.$forceUpdate()
				this.charts.activeType = {
					indexName: item.indexName,
					indexEnName: item.indexEnName,
					source: item.source
				};
				this.getCategory()
			},
			getCategory2({
				item,
				index,
				ifClick
			}) {
				let lan;
				if (this.$i18n.locale == 'zh') {
					lan = item.COUNTRY_CN_NAME
				} else {
					lan = item.COUNTRY_EN_NAME
				}
				if (ifClick) {
					let arr1 = this.dropdown.world.originalCountryData.filter(it => it.CONTINENT_EN_NAME && it.ifClick)
					let arr2 = this.dropdown.world.countryList.filter(it => it.ifClick)
					if (arr1.length == 0 && arr2.length == 0) {
						this.dropdown.world.countryId = []
						this.dropdown.world.countryName = []
					}
					if (this.dropdown.world.countryId.length >= 5) {
						this.$refs.uToast.show({
							title: this.$i18n.locale == 'zh' ? '请不要选择超过5个' : 'Please do not choose more than 5',
							type: 'error',
						});
						return
					}
					item.ifClick = ifClick
					this.dropdown.world.countryId.push(item.COUNTRY_ID)
					this.dropdown.world.countryName.push(lan)
				} else {
					item.ifClick = ifClick
					this.dropdown.world.countryId = this.dropdown.world.countryId.filter(it => it != item.COUNTRY_ID)
					this.dropdown.world.countryName = this.dropdown.world.countryName.filter(it => it != item.lan)
					if (this.dropdown.world.countryId.length == 0) {
						this.dropdown.world.countryId = ['F57CE016EB194C9C84AC11E79000F1E2']
						this.dropdown.world.countryName = this.$i18n.locale == 'zh' ? ['中国'] : ['CHINA']
					}
				}
				if (this.dropdown.world.temp.countryId.length == 0) {
					this.dropdown.world.temp.countryId = JSON.parse(JSON.stringify(this.dropdown.world.countryId))
					this.dropdown.world.temp.countryName = JSON.parse(JSON.stringify(this.dropdown.world.countryName))
				}
				this.dropdown.world.temp.country.push(item)
				this.$forceUpdate()
			},
			empty() {
				if (this.dropdown.world.temp.countryId.length == 0) {
					this.dropdown.world.temp.countryId = JSON.parse(JSON.stringify(this.dropdown.world.countryId))
					this.dropdown.world.temp.countryName = JSON.parse(JSON.stringify(this.dropdown.world.countryName))
				}
				this.dropdown.world.countryList.forEach(item => {
					if (item.ifClick) {
						this.dropdown.world.temp.country.push(item)
					}
					item.ifClick = false;
					item.children.forEach(it => {
						if (it.ifClick) {
							this.dropdown.world.temp.country.push(it)
						}
						it.ifClick = false
					})
				})
				this.dropdown.world.countryId = ['F57CE016EB194C9C84AC11E79000F1E2']
				this.dropdown.world.countryName = this.$i18n.locale == 'zh' ? ['中国'] : ['CHINA']
				this.$forceUpdate();
			},
			submit() {
				this.dropdown.world.temp = {
					country: [],
					countryId: [],
					countryName: []
				}
				if (this.$i18n.locale == 'zh') {
					if (this.dropdown.world.countryName.length > 1) {
						this.dropdown.world.title = `${this.dropdown.world.countryName[0]}...`
					} else {
						this.dropdown.world.title = `${this.dropdown.world.countryName[0]}`
					}
				} else {
					if (this.dropdown.world.countryName.length > 1) {
						this.dropdown.world.title = `${this.dropdown.world.countryName[0]}...`
					} else {
						this.dropdown.world.title = `${this.dropdown.world.countryName[0]}`
					}
				}
				_self.getCategory()
			},
			// 导出
			async selectExportType(data) {
				let _this = this
				this.loading = true
				let source = this.charts.activeType.source;
				if (this.isJsonString(this.charts.activeType.source)) {
					source = JSON.parse(this.charts.activeType.source)
				}
				let id = this.randomString(18)
				try {
					const resId = await this.$myRequest({
						url: '/op/geiIntegratedDataMenus/getRandomId',
						method: 'get',
						data: {
							uuid: id
						},
					});
					let params = {
						"Source": [source],
						"country": _this.countryNameObject.map(item => item.COUNTRY_CN_NAME),
						"time": [this.dropdown.time.time[0], this.dropdown.time.time[this.dropdown.time.time
							.length - 1]],
						"language": this.$i18n.locale,
						"type": {
							"rule": this.canvasType == 1 ? 'CIRCLE' : 'LINE'
						}
					}
					const res = await this.$myRequest({
						url: '/op/geiIntegratedDataMenus/saveFile',
						data: {
							...params
						},
						method: 'post',
					});
					if (res) {
						this.exportId.push({
							type: data,
							id: id
						})
					}
				} catch (e) {
					this.loading = false
					let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
					uni.showToast({
						icon: 'none',
						mask: true,
						title: eg,
					});
				}
			},
			async getTime(id) {
				let _this = this
				const res = await this.$myRequest({
					url: '/op/geiIntegratedDataMenus/getTime',
					method: 'get',
					data: {
						uuid: id.id
					},
				});
				if (res.data && res.status == '200') {
					let url = id.type.value == 'EXCEL' ? res.data[0] : res.data[1]
					this.exportId = this.exportId.filter(item => item.id != id.id)
					this.download(url)
				} else if (res.data && res.status == '500') {
					this.exportId = this.exportId.filter(item => item.id != id.id)
					let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
					uni.showToast({
						icon: 'none',
						mask: true,
						title: eg,
					});
				}
			},
			download(url) {
				let _this = this
				// this.playpapers(this.websiteUrl + url)
				uni.downloadFile({
					url: 'https://m.geidcp.com/api/file/pub/' + url,
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							// #ifdef APP-PLUS
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									let eg = _this.$i18n.locale == 'zh' ? '文件已保存:' :
										'The file is saved:'
									uni.showToast({
										icon: 'none',
										mask: true,
										title: eg + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							});
							// #endif
						} else {
							let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
							uni.showToast({
								icon: 'none',
								mask: true,
								title: eg,
							});
						}
					},
					fail: (err) => {
						let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
						uni.showToast({
							icon: 'none',
							mask: true,
							title: eg,
						});
					},
				});
			},
			playpapers(url) {

				let dload = document.createElement("a");

				dload.download = ''; // 设置下载的文件名，默认是'下载'

				dload.href = url;

				document.body.appendChild(dload);

				dload.click();

				dload.remove(); // 下载之后把创建的元素删除
			},
			randomString(length) {
				let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
				let result = '';
				for (let i = length; i > 0; --i)
					result += str[Math.floor(Math.random() * str.length)];
				return result;
			},
			// 重置按钮
			Reset() {
				this.$emit('reset', 0)
			},
			/**
			 * 相关指标
			 */
			getCorrelationList() {
				let select = _self.charts.activeType.indexName

				function getParent(data, parent) {
					data.forEach(item => {
						if (item.indexName == select) {
							_self.correlationList = parent.child.map(it => {
								return {
									icon: parent.icon,
									"label": _self.$i18n.locale == 'zh' ? it.indexName : it.indexEnName,
									"item": {
										"indexName": it.indexName,
										"indexEnName": it.indexEnName,
										"source": it.source
									}
								}
							})
						}
						if (item.child && item.child.length != 0) {
							getParent(item.child, item)
						}
					})
				}

				getParent(_self.dropdown.indicator.searchList, null)
			},
			showRelevant(e) {
				let ser = {}

				function getOther(data, source) {
					data.forEach(item => {
						if (item.source == source) {
							ser = item
							return
						} else {
							getOther(item.child, source)
						}
					})
				}
				getOther([this.dropdown.indicator.searchList[this.dropdown.indicator.showCategoryIndex]], e.item.source)
				ser.ifClick = true
				this.charts.activeType = {
					indexName: e.item.indexName,
					indexEnName: e.item.indexEnName,
					source: JSON.parse(e.item.source)
				}
				this.dropdown.indicator.title = this.$i18n.locale == 'zh' ? e.item.indexName : e.item.indexEnName
				this.dropdown.indicator.searchSelect.ifClick = false;
				this.dropdown.indicator.searchSelect = ser
				this.getCategory();
			},

			/**
			 * 查询优先级
			 */
			getSubmitSource(data) {
				let dataSources = [];
				let sources = JSON.parse(data.source);

				let sourceKeys = Object.keys(sources);
				sourceKeys.forEach(item => {
					dataSources.push({
						label: item,
						value: JSON.stringify({
							[item]: sources[item]
						})
					})

				})
				let buer = sourceKeys.indexOf("IEA") > -1 ? true : false;
				this.submitSource = '';
				if (buer == true) {
					let i = sourceKeys.indexOf("IEA")
					this.submitSource = "IEA";
					// 如果本条数据的dataSources里有IEA就使用IEA作为查询时使用的数据源
					this.charts.activeType["source"] = JSON.parse(dataSources[i].value);
					if (this.$i18n.locale == 'zh') {
						this.submitSource = '国际能源署'
					}
				} else {
					this.submitSource = sourceKeys[0]
					// 由于客户没有英国石油公司的数据使用权限,所以不能用英国石油公司的数据源查询
					this.charts.activeType["source"] = JSON.parse(dataSources[0].value);
					if (this.$i18n.locale == 'en') {
						this.submitSource = this.zhToen(this.submitSource)
					} else {
						this.submitSource = this.enTozh(this.submitSource)
					}
				}
			},
			zhToen(str) {
				switch (str) {
					case '世界银行':
						return 'World Bank';
						break;
					case '英国石油公司(BP)':
						return 'British Petroleum';
						break;
					case 'EIA':
						return 'Energy Information Administration';
						break;
				}
			},
			enTozh(str) {
				switch (str) {
					case 'IEA':
						return '国际能源署';
						break;
					case 'EIA':
						return '美国能源信息署';
						break;
					case '世界银行':
						return '世界银行';
						break;
					case '英国石油公司(BP)':
						return '英国石油公司';
						break;
				}
			},
	
	}
}
</script>

<style scoped lang="scss">
	.indicatorDataQuery {
		width: 100%;
		height: 100%;
	}

	.u-dropdown /deep/ .u-dropdown__menu {
		width: 100%;
		overflow: hidden;
	}

	.u-dropdown /deep/ .u-dropdown__menu .u-dropdown__menu__item {
		width: 33%;
		background: #fff;
	}

	.u-dropdown /deep/ .u-dropdown__menu .u-dropdown__menu__item .u-flex {
		width: 100%;
		justify-content: center;
	}

	.u-dropdown /deep/ .u-dropdown__menu__item__text {
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; //溢出不换行
		//width: 80%;
		text-align: center;
	}

	/deep/ .u-dropdown .u-dropdown__content {
		.u-dropdown__content__popup {
			height: 100%;
		}
	}

	.left {
		position: absolute;
		height: 100%;
		top: 0;
		bottom: 0upx;
		width: 24%;
		left: 0upx;
		background: #F2F2F2;
	}

	.right {
		position: absolute;
		height: 100%;
		top: 0;
		bottom: 0upx;
		width: 76%;
		left: 24%;
		background-color: #fff;
		margin-left: 0;
		padding: 0 20upx;
	}

	.row {
		width: 100%;
		height: 90upx;
		display: flex;
		align-items: center;

		.text {
			width: 100%;
			position: relative;
			font-size: 28upx;
			display: flex;
			justify-content: center;
			color: #3c3c3c;
			text-align: center;

			.block {
				position: absolute;
				width: 0upx;
				left: 0;
			}
		}

		&.on {
			height: 90upx;
			background-color: #fff;

			.text {
				font-size: 30upx;
				color: #1677FD;

				.block {
					width: 6upx;
					height: 100%;
					left: 10upx;
				}
			}

			&:before {
				content: "";
				position: absolute;
				left: 10upx;
				width: 10upx;
				height: 60upx;
				background-color: rgba(22, 119, 253, 0.8);
			}
		}
	}

	.threemenu {
		display: flex;
		flex-wrap: wrap;
	}

	.getCategory {
		height: 90upx;
		line-height: 90upx;
		font-weight: 700;
		//color: #0079ef;
	}

	.cate {
		display: inline-block;
		width: 240upx;
		vertical-align: middle;
		margin-right: 20upx;
	}

	.cateText {
		padding: 10upx;
		margin: 10upx 20upx 10upx 0;
		display: inline-block;
		width: 240upx;
		vertical-align: middle;
		background: #f1f2f3;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cateTextActive {
		padding: 10upx;
		margin: 10upx 20upx 10upx 0;
		display: inline-block;
		width: 240upx;
		vertical-align: middle;
		background-color: #0079ef;
		color: #fff;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.contry-btn {
		height: 50upx;
		display: inline-block;
		line-height: 50upx;
	}

	.dataSourcep {
		font-size: 28upx;
		color: #c1c1c1;
		line-height: 1.5em;
		margin: 0;
	}
</style>
<style scoped lang="scss">
	.chart-columns {
		display: flex;
		flex-direction: column !important;
		border-top: 20upx solid #fff
	}

	.chart-common-mt {
		margin-top: 10upx;
	}

	.chart-bg-white {
		background: #FFFFFF;
	}

	.chart-title-bar {
		padding: 10upx 2%;
		flex-wrap: nowrap;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.changeChart {
			display: flex;
			align-items: center;
		}
	}

	.uCharts1 {
		padding: 10upx 20upx;
		background-color: #F1F2F4;
		font-size: 26upx;
		color: #333;
	}

	.uCharts2 {
		padding: 10upx 20upx;
		background-color: #E5F0FE;
		color: #1890FF;
		font-size: 26upx;
	}

	.export {
		width: 100upx;
		margin-left: 20upx;
		height: 60upx;

		&.loading {
			text-align: center;
			padding-top: 10upx;
		}

		/deep/ .easy-select {
			width: 100% !important;
			height: 90% !important;
			margin-top: 5%;
			border: none;
			border: 0;
			color: #fff;
			background-color: #1777FE;
			font-size: 26upx;

			uni-input {
				padding: 0;
				text-align: center;
				font-size: 26upx;
			}

			.easy-select-suffix {
				display: none;
			}

			.easy-select-options {
				min-width: 0 !important;
				width: 100%;
			}

			.easy-select-options-item {
				padding: 0 10upx;
			}
		}
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.reset {
		width: 90%;
		margin: 0 auto 40upx;

		.u-btn--primary {
			border-radius: 60upx;
			background: linear-gradient(90deg, #33AFFF, #1777FE);
			font-size: 32upx;
			font-weight: 600;
		}
	}
</style>