dev/dcp-app-gate/pages/information/InformationData/InformationData2.vue

<template>
	<view class="rf-category informationData">
		<navbar-search :list="searchList" @selectedItem="getSelectedItem"></navbar-search>
		<!-- 筛选 -->
		<view class="selectCondition">
			<u-dropdown ref="uDropdown" @open="open" @close="close">
				<!-- 指标 -->
				<u-dropdown-item :title="indicatorTitle">
					<view class="slot-content">
						<view style="height:1168upx;position: relative;">
							<!--							<connectionTree :data-list="searchList"-->
							<!--															children-name="child"-->
							<!--															labelZh="indexName"-->
							<!--															labelEn="indexEnName"-->
							<!--															:dataListMap="indicatorListMap"-->
							<!--															@dataListMap="indicatorListMapFun"-->
							<!--															@getCategory="getSource">-->
							<!--							</connectionTree>-->
							<scroll-view scroll-y="true" class="left">
								<view v-for="(fItem, fIndex) in searchList" :key="fItem+fIndex" class="row"
									:class="[fIndex===showCategoryIndex1 ?'on':'']" @tap="showCategory1(fIndex)">
									<view class="text" :style="$i18n.locale=='zh'?'':'text-algin:center;'">
										{{ $i18n.locale == 'zh' ? fItem['indexName'] : fItem['indexEnName'] }}
									</view>
								</view>
							</scroll-view>
							<block v-for="(fItem, fIndex) in searchList" :key="fItem+fIndex+'1'"
								@tap="showCategory1(fIndex)">
								<scroll-view scroll-y class="right" v-if="fIndex === showCategoryIndex1">
									<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(i,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="worldTitle">
					<view class="slot-content">
						<view
							style="height:80upx;position: relative;background-color: #fff;padding: 10upx;box-sizing: border-box;">
							<!--							<u-button type="primary" @click="cancel" class="contry-btn" style="float: left">{{ i18n('cancel') }}</u-button>-->
							<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:1088upx;position: relative;">
							<!--							<connectionTree :data-list="countryList"-->
							<!--															children-name="children"-->
							<!--															:multiple="true"-->
							<!--															:dataListMap="dataListMap"-->
							<!--															@dataListMap="dataListMapFun"-->
							<!--															@getCategory="getCountryId">-->
							<!--							</connectionTree>-->
							<scroll-view scroll-y="true" class="left">
								<view v-for="(fItem, fIndex) in countryList" :key="fItem+fIndex" class="row"
									:class="[fIndex===showCategoryIndex2 ?'on':'']" @tap="showCategory2(fIndex)">
									<view class="text" :style="$i18n.locale=='zh'?'':'text-algin:center;'">
										{{ $i18n.locale == 'zh' ? fItem['label'] : fItem['label'] }}
									</view>
								</view>
							</scroll-view>
							<block v-for="(fItem, fIndex) in countryList" :key="fItem+fIndex+'1'"
								@tap="showCategory2(fIndex)">
								<scroll-view scroll-y class="right" v-if="fIndex === showCategoryIndex2">
									<view v-for="(item,index) in fItem['children']" :key="'c'+index"
										:class="(item['children']&&item['children'].length>0)?'':'cate'">
										<view v-if="item['children'] && item['children'].length>0">
											<view :class="{'getCategory':item['children'].length>0}">
												{{ $i18n.locale=='zh'?item['label']:item['label'] }}
											</view>
											<view class="threemenu">
												<view v-for="(i,j) in item['children']" :key="j" class="cateText"
													@click="getCategory2(i,j)" :class="{'cateTextActive':i.ifClick}">
													{{$i18n.locale=='zh'?i['label']:i['label']}}
												</view>
											</view>
										</view>
										<view v-else>
											<view class="cateText" @click="getCategory2(item,index)"
												: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="timeTitle">
					<view class="slot-content">
						<!-- 时间选择 -->
						<view style="height:1168upx;position:absolute;bottom: 0;">
							<yearSelector :show="showDateFlag" :defaultTimeValue="[2013,2020]"
								@getTimeValue="getTimeValue" @cancel="timecancel"></yearSelector>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view style="height: calc(100% - 168upx);background: #fff;">
			<!-- 图表区域 -->
			<view class="qiun-columns">
				<view class="qiun-title-center">{{ indicatorTitle }}</view>
				<!-- 按钮区 -->
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<!-- 标题 -->
					<view class="qiun-title-dot-light">{{ chartsTitle }}</view>
					<!--					<view class="qiun-title-dot-light">{{  }}</view>-->
					<!-- 切换线/柱图 -->
					<view class="changechart">
						<text :class="canvasType==1?'uChars2':'uChars1'"
							@click="canvasTypeChange(1)">{{ i18n('ColumnChart') }}</text>
						<text :class="canvasType==2?'uChars2':'uChars1'"
							@click="canvasTypeChange(2)">{{ i18n('LineChart') }}</text>
						<text style="margin-left: 20px;" @click="exportExcel">{{ i18n('export') }}</text>
					</view>
				</view>
				<!--				<view>-->
				<!--					<view class="qiun-title-center">-->
				<!--						<text style="float: left;">{{ chartsTitle }}</text>-->
				<!--						<text style="position: absolute;left: 50%;transform: translateX(-50%)">{{ indicatorTitle }}</text>-->
				<!--					</view>-->
				<!--				</view>-->
				<!-- 图表 -->
				<view class="qiun-charts">
					<canvas v-if="canvasType==1" canvas-id="canvasColumn" id="canvasColumn" class="charts"
						@touchstart="touchColumn"></canvas>
					<canvas v-else-if="canvasType==2" canvas-id="canvasLineA" id="canvasLineA" class="charts"
						@touchstart="touchLineA"></canvas>
				</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 navbarSearch from './dom/navbarSearch.vue'
	import connectionTree from './dom/connectionTree'
	import calendar from "../../resourceSharing/calendar";
	import yearSelector from "./dom/yearSelector";
	import RelevantIndicators from './dom/RelevantIndicators.vue'


	var _self;
	var canvaColumn = null;
	var canvaLineA = null;
	export default {
		components: {
			navbarSearch,
			calendar,
			connectionTree,
			yearSelector,
			RelevantIndicators,
		},
		data() {
			return {
				showCategoryIndex1: 0,
				showCategoryIndex2: 0,
				dataListMap1: {},
				dataListMap2: [],

				cWidth: '',
				cHeight: '',
				/**
				 * 搜索栏
				 */
				searchList: [],
				selectedItem: '',
				showSearchIndex: '',
				/**
				 * 下拉选择
				 */
				indicatorTitle: '',
				worldTitle: '',
				timeTitle: '',
				indicatorListMap: {},
				// 国家地区
				countryList: [],
				continentList: [{
						"COUNTRY_ID": "A4E96E974CAF4406A81769A9B2D8C0AA",
						"COUNTRY_CN_NAME": "亚洲",
						"COUNTRY_EN_NAME": "ASIA"
					},
					{
						"COUNTRY_ID": "A213A97331144E96B8449F7E47812623",
						"COUNTRY_CN_NAME": "欧洲",
						"COUNTRY_EN_NAME": "EUROPE"
					},
					{
						"COUNTRY_ID": "BDD62BA9E4E7464FBD7F0613BDA83C4C",
						"COUNTRY_CN_NAME": "非洲",
						"COUNTRY_EN_NAME": "AFRICA"
					},
					{
						"COUNTRY_ID": "E2274D0DBF85416E88FD2829D27FDB7F",
						"COUNTRY_CN_NAME": "北美洲",
						"COUNTRY_EN_NAME": "NORTH AMERICA"
					},
					{
						"COUNTRY_ID": "5CAAB32FCD64433791D0781D04EC09A3",
						"COUNTRY_CN_NAME": "南美洲",
						"COUNTRY_EN_NAME": "SOUTH AMERICA"
					},
					{
						"COUNTRY_ID": "BCFDB5A302004E918371A7C0CD4AB38A",
						"COUNTRY_CN_NAME": "大洋洲",
						"COUNTRY_EN_NAME": "OCEANIA"
					}
				],
				countryListZH: [{
						labelEn: 'NORTH AMERICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '北美洲' : 'NORTH AMERICA'
					},
					{
						labelEn: 'OCEANIA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '大洋洲' : 'OCEANIA'
					},
					{
						labelEn: 'AFRICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '非洲' : 'AFRICA'
					},
					{
						labelEn: 'SOUTH AMERICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '南美洲' : 'SOUTH AMERICA'
					},
					{
						labelEn: 'EUROPE',
						children: [],
						label: this.$i18n.locale == 'zh' ? '欧洲' : 'EUROPE'
					},
					{
						label: this.$i18n.locale == 'zh' ? '亚洲' : 'ASIA',
						labelEn: 'ASIA',
						children: [],
					},
				],
				countryListEN: [{
						labelEn: 'AFRICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '非洲' : 'AFRICA'
					},
					{
						label: this.$i18n.locale == 'zh' ? '亚洲' : 'ASIA',
						labelEn: 'ASIA',
						children: [],
					},
					{
						labelEn: 'EUROPE',
						children: [],
						label: this.$i18n.locale == 'zh' ? '欧洲' : 'EUROPE'
					},
					{
						labelEn: 'NORTH AMERICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '北美洲' : 'NORTH AMERICA'
					},
					{
						labelEn: 'OCEANIA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '大洋洲' : 'OCEANIA'
					},
					{
						labelEn: 'SOUTH AMERICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '南美洲' : 'SOUTH AMERICA'
					},
				],
				countryId: [],
				dataListMap: [],
				dataListMapTempAdd: [],
				dataListMapTempSub: [],
				countryName: [],
				countryNameList: [],
				// 日历
				showDateFlag: true,
				time: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
				timeScope: [],
				/**
				 * 图表
				 */
				chartsTitle: null, // 头部展示的单位
				activeTitle: null, // 选择的类型
				activeType: {
					indexName: '发电总量',
					indexEnName: 'Total power generation',
					source: {
						"IEA": {
							"index": {
								"发电总量": "132"
							}
						},
						"EIA": {
							"index": {
								"发电总量": "132"
							}
						}
					}
				},
				// 控制显示柱形或折线
				canvasType: 1,
				// charts
				pixelRatio: 1,
				// 相关
				correlationList: [{
						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 coal power generation',
						"item": {
							"indexName": "煤炭发电总量",
							"indexEnName": "Total coal power generation",
							"source": '{"英国石油公司(BP)":{"index":{"煤炭发电总量":"133"}},"IEA":{"index":{"煤炭发电总量":"133"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '石油发电总量' : 'Total oil power generation',
						"item": {
							"indexName": "石油发电总量",
							"indexEnName": "Total oil power generation",
							"source": '{"英国石油公司(BP)":{"index":{"石油发电总量":"134"}},"IEA":{"index":{"石油发电总量":"134"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '天然气发电总量' : 'Total natural gas power generation',
						"item": {
							"indexName": "天然气发电总量",
							"indexEnName": "Total natural gas power generation",
							"source": '{"英国石油公司(BP)":{"index":{"天然气发电总量":"135"}},"IEA":{"index":{"天然气发电总量":"135"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '核发电总量' : 'Total nuclear power generation',
						"item": {
							"indexName": "核发电总量",
							"indexEnName": "Total nuclear power generation",
							"source": '{"英国石油公司(BP)":{"index":{"核发电总量":"136"}},"IEA":{"index":{"核发电总量":"136"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '水力发电总量' : 'Total hydro power generation',
						"item": {
							"indexName": "水力发电总量",
							"indexEnName": "Total hydro power generation",
							"source": '{"英国石油公司(BP)":{"index":{"水力发电总量":"137"}},"IEA":{"index":{"水力发电总量":"137"}},"EIA":{"index":{"水力发电总量":"137"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '风发电总量' : 'Total wind power generation',
						"item": {
							"indexName": "风发电总量",
							"indexEnName": "Total wind power generation",
							"source": '{"英国石油公司(BP)":{"index":{"风发电总量":"138"}},"IEA":{"index":{"风发电总量":"138"}},"EIA":{"index":{"风发电总量":"138"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '太阳能光伏发电总量' : 'Total solar PV power generation',
						"item": {
							"indexName": "太阳能光伏发电总量",
							"indexEnName": "Total solar PV power generation",
							"source": '{"IEA":{"index":{"太阳能光伏发电总量":"139"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '太阳能热发电总量' : 'Total solar thermal power generation',
						"item": {
							"indexName": "太阳能热发电总量",
							"indexEnName": "Total solar thermal power generation",
							"source": '{"IEA":{"index":{"太阳能热发电总量":"140"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '生物燃料发电总量' : 'Total biofuels power generation',
						"item": {
							"indexName": "生物燃料发电总量",
							"indexEnName": "Total biofuels power generation",
							"source": '{"IEA":{"index":{"生物燃料发电总量":"141"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '废物垃圾发电总量' : 'Total waste power generation',
						"item": {
							"indexName": "废物垃圾发电总量",
							"indexEnName": "Total waste power generation",
							"source": '{"IEA":{"index":{"废物垃圾发电总量":"142"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '废物(可再生)发电总量' :
							'Total waste (renewable) power generation',
						"item": {
							"indexName": "废物(可再生)发电总量",
							"indexEnName": "Total waste (renewable) power generation",
							"source": '{"IEA":{"index":{"废物(可再生)发电总量":"143"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '地热发电总量' : 'Total geothermal power generation',
						"item": {
							"indexName": "地热发电总量",
							"indexEnName": "Total geothermal power generation",
							"source": '{"IEA":{"index":{"地热发电总量":"145"}},"EIA":{"index":{"地热发电总量":"145"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '潮汐发电总量' : 'Total tidal power generation',
						"item": {
							"indexName": "潮汐发电总量",
							"indexEnName": "Total tidal power generation",
							"source": '{"IEA":{"index":{"潮汐发电总量":"146"}},"EIA":{"index":{"潮汐发电总量":"146"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '抽水蓄能' : 'Total pumped storage',
						"item": {
							"indexName": "抽水蓄能",
							"indexEnName": "Total pumped storage",
							"source": '{"EIA":{"index":{"抽水蓄能":"153"}},"EIA":{"index":{"抽水蓄能":"153"}}}'
						}
					},
					{
						icon: require('../../../static/img/infomationdata/e1.png'),
						"label": this.$i18n.locale == 'zh' ? '其他发电量' : 'Other non-specified power generation',
						"item": {
							"indexName": "其他发电量",
							"indexEnName": "Other non-specified power generation",
							"source": '{"英国石油公司(BP)":{"index":{"其他发电量":"148"}},"IEA":{"index":{"其他发电量":"148"}}}'
						}
					}
				],
				correlationMap: [{
						icon: require('../../../static/img/infomationdata/qihou/huanjing.png'),
						include: [40, 42, 43, 44, 45, 47, 48]
					},
					{
						icon: require('../../../static/img/infomationdata/shehuijingji/renkou.png'),
						include: [11, 12, 13, 14, 15, 17, 18, 19, 20]
					},
					{
						icon: require('../../../static/img/infomationdata/shehuijingji/jingji.png'),
						include: [22, 23, 24, 25, 26, 28, 29, 30, 64, 65, 66, 67, 68, 69, 71]
					},
					{
						icon: require('../../../static/img/infomationdata/shehuijingji/guotu.png'),
						include: [58, 59, 60, 61, 62, 63]
					},
					{
						icon: require('../../../static/img/infomationdata/shehuijingji/maoyi.png'),
						include: [153, 154, 155, 156, 157, 158, 159, 160, 161, 162]
					},
					{
						icon: require('../../../static/img/infomationdata/dianli/fadianzhuangzhi.png'),
						include: [82, 83, 84, 85, 86, 87, 88, 89, 90]
					},
					{
						icon: require('../../../static/img/infomationdata/dianli/fadian.png'),
						include: [36, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 104, 105, 110, 111]
					},
					{
						icon: require('../../../static/img/infomationdata/dianli/yongdian.png'),
						include: [37, 151]
					},
					{
						icon: require('../../../static/img/infomationdata/nengyuan/shengcheng.png'),
						include: [52, 168]
					},
					{
						icon: require('../../../static/img/infomationdata/nengyuan/xiaofei.png'),
						include: [53]
					},
					{
						icon: require('../../../static/img/infomationdata/nengyuan/zhuanhua.png'),
						include: [206, 221]
					},
					{
						icon: require('../../../static/img/infomationdata/jinrong/jinrong.png'),
						include: [75, 76, 77, 78, 79, 80, 81]
					},
				]
			}
		},
		onLoad() {
			_self = this;
			if (this.$i18n.locale == 'zh') {
				this.countryName = ['世界']
			} else {
				this.countryName = ['WORLD']
			}
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.init()
		},
		methods: {
			async init() {
				// this.indicatorTitle = this.$i18n.locale == 'zh' ? '指标' : 'indicator'
				this.indicatorTitle = this.$i18n.locale == 'zh' ? '发电总量' : 'Total power generation'
				this.worldTitle = this.$i18n.locale == 'zh' ? '世界' : 'World'
				this.timeTitle = this.$i18n.locale == 'zh' ? '时间' : 'Time'
				await this.getServerData()
				await this.getCountryList()
				let params = {
					"Source": {
						"IEA": {
							"index": {
								'发电总量': "132"
							},
						},
					},
					"country": ["93BC2730ED0A402186F596F6A01C007E"],
					"time": this.time,
					"language": this.$i18n.locale,
				}
				await this.getInitialCategory(params);
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			/**
			 * 搜索栏
			 */
			// 获取搜索栏列表
			async getServerData() {
				const res = await this.$myRequest({
					url: '/op/geiIntegratedDataMenus/getMenu',
					data: {}
				});
				this.setIcon(res.data, 'child', 0)
				this.treeTier(res.data, 0)
				this.setNodeId(res.data, 'child')
				this.searchList = res.data;
				console.log(this.searchList)
			},
			treeTier(data, index) {
				let id = index;
				data.forEach((item, ind) => {
					if (index < 3) {
						this.treeTier(item.child, id + 1)
					} else {
						item.child = []
					}
				})
			},
			setNodeId(data, childrenName = 'children', id = '') {
				data.forEach((item, index) => {
					let nodeId = id ? `${id}_${index}` : `${index}`;
					this.$set(item, 'nodeId', nodeId)
					if (item[childrenName] && item[childrenName].length > 0) {
						this.setNodeId(item[childrenName], childrenName, nodeId)
					}
				})
			},
			setIcon(data, key, index) {
				let ind = index
				data.forEach(item => {
					if (index < 2) {
						if (item[key] && item[key].length > 0) {
							this.setIcon(item[key], key, ind + 1)
						}
					} else {
						this.$set(item, key, [])
					}
				})
			},
			// 获取搜索栏选中值
			getSelectedItem(e) {
				console.log(e)
				this.selectedItem = e.item.source
				this.indicatorTitle = this.$i18n.locale == 'zh' ? `${e.item.indexNameText}` : `${e.item.indexEnNameText}`
				this.activeType = {
					indexName: e.item.indexNameText,
					indexEnName: e.item.indexEnNameText,
					source: JSON.parse(e.item.source)
				}
				this.filtercorrelation(e)
				this.getCategory(null, null, this.activeType);
			},
			getSource(e) {
				let source = e.item.source;
				if (this.isJsonString(e.item.source)) {
					source = JSON.parse(e.item.source)
				}
				this.activeType = {
					indexName: e.item.indexName,
					indexEnName: e.item.indexEnName,
					source: source
				}
				if (e.item.ifClick) {
					this.indicatorTitle = this.$i18n.locale == 'zh' ? `${e.item.indexName}` : `${e.item.indexEnName}`
				} else {
					this.indicatorTitle = this.$i18n.locale == 'zh' ? '指标' : 'indicator'
				}
				this.$refs.uDropdown.close()
				this.filtercorrelation(e)
				this.getCategory(null, null, this.activeType);
			},
			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()
			},
			filtercorrelation(data) {
				let that = this
				let nodeId = data.item.nodeId.split('_')
				let arr = this.filtercorrelationList(this.searchList, nodeId)
				let arrTemp = []
				this.getList(arr, arrTemp)
				if (this.$i18n.locale == 'zh') {
					this.correlationList = arrTemp.map(item => {
						let icon;
						that.correlationMap.forEach(it => {
							if (it.include.includes(Number(item.id))) {
								icon = it.icon
							}
						})
						return {
							icon: icon,
							label: item.indexName,
							item: item
						}
					})
				} else {
					this.correlationList = arrTemp.map(item => {
						let icon;
						that.correlationMap.forEach(it => {
							if (it.include.includes(Number(item.id))) {
								icon = it.icon
							}
						})
						return {
							icon: icon,
							label: item.indexEnName,
							item: item
						}
					})
				}
				console.log('correlationList')
				console.log(this.correlationList)
			},
			filtercorrelationList(data, nodeId) {
				let arr = data
				for (let i = 0; i < nodeId.length - 1; i++) {
					if (i) {
						arr = arr.child[nodeId[i]]
					} else {
						arr = arr[nodeId[i]]
					}
				}
				if (arr.child && arr.child.length > 0) {
					return arr
				} else {
					nodeId = nodeId.pop()
					return this.filtercorrelationList(data, nodeId)
				}
			},
			getList(arr, arrTemp) {
				arr.child.forEach(item => {
					if (item.child && item.child.length > 0) {
						this.getList(item)
					} else {
						arrTemp.push(item)
					}
				})
			},
			// 获取国家地区
			indicatorListMapFun(e) {
				if (this.indicatorListMap) {
					this.$set(this.indicatorListMap, 'ifClick', false)
				}
				this.indicatorListMap = e.item
				this.$set(e.item, 'ifClick', e.ifClick)
			},
			dataListMapFun(e) {
				this.$set(e.item, 'ifClick', e.ifClick)
				if (e.ifClick) {
					if (this.dataListMap.length >= 5) {
						this.$set(e.item, 'ifClick', false)
						this.$refs.uToast.show({
							title: this.$i18n.locale == 'zh' ? '请不要选择超过5个' : 'Please do not choose more than 5',
							type: 'error',
						});
						return
					} else {
						this.$set(e.item, 'ifClick', e.ifClick)
					}
					this.dataListMap.push(e.item)
					this.dataListMapTempAdd.push(e.item)
					this.dataListMapTempSub = this.dataListMapTempSub.filter(it => {
						return it['label'] != e.item['label']
					})
				} else {
					this.dataListMapTempSub.push(e.item)
					this.dataListMapTempAdd = this.dataListMapTempAdd.filter(it => {
						return it['label'] != e.item['label']
					})
					this.dataListMap = this.dataListMap.filter(it => {
						return it['label'] != e.item['label']
					})
				}
			},
			async getCountryList() {
				/*let originalCountryData = await this.$api.json('originalCountryData');
				let countryList = this.countryList;
				originalCountryData.forEach((originalItem, index) => {
					countryList.forEach((item, j) => {
						let temp = this.$i18n.locale == 'zh'?originalItem.CONTINENT_NAME:originalItem.CONTINENT_EN_NAME
						if (temp == item.label) {
							originalItem.value = originalItem.COUNTRY_ID;
							originalItem.label = this.$i18n.locale == 'zh' ? originalItem.COUNTRY_CN_NAME : originalItem.COUNTRY_EN_NAME;
							this.$set(originalItem, 'ifClick', false);
							item.children.push(originalItem);
							item.value = originalItem.COUNTRY_EN_NAME;
						}
					})
				});*/
				let en = await this.$api.json('originalCountryDataEN')
				let zh = await this.$api.json('originalCountryDataZH')
				let originalCountryData = this.$i18n.locale == 'zh' ? zh : en;
				let countryList = this.countryList = [{
						label: this.$i18n.locale == 'zh' ? '亚洲' : 'ASIA',
						labelEn: 'ASIA',
						children: [],
					},
					{
						labelEn: 'AFRICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '非洲' : 'AFRICA'
					},
					{
						labelEn: 'EUROPE',
						children: [],
						label: this.$i18n.locale == 'zh' ? '欧洲' : 'EUROPE'
					},
					{
						labelEn: 'NORTH AMERICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '北美洲' : 'NORTH AMERICA'
					},
					{
						labelEn: 'SOUTH AMERICA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '南美洲' : 'SOUTH AMERICA'
					},
					{
						labelEn: 'OCEANIA',
						children: [],
						label: this.$i18n.locale == 'zh' ? '大洋洲' : 'OCEANIA'
					},
				];
				this.continentList.forEach(originalItem => {
					countryList.forEach((item, j) => {
						let temp = this.$i18n.locale == 'zh' ? originalItem.COUNTRY_CN_NAME :
							originalItem.COUNTRY_EN_NAME;
						if (item.label == temp) {
							originalItem.value = originalItem.COUNTRY_ID;
							originalItem.label = this.$i18n.locale == 'zh' ? originalItem
								.COUNTRY_CN_NAME : originalItem.COUNTRY_EN_NAME;
							item.children.push(originalItem);
							item.value = originalItem.COUNTRY_EN_NAME;
						}
					})
				})
				originalCountryData.forEach((originalItem, index) => {
					countryList.forEach((item, j) => {
						let temp = this.$i18n.locale == 'zh' ? originalItem.CONTINENT_NAME :
							originalItem.CONTINENT_EN_NAME
						if (temp == item.label) {
							originalItem.value = originalItem.COUNTRY_ID;
							originalItem.label = this.$i18n.locale == 'zh' ? originalItem
								.COUNTRY_CN_NAME : originalItem.COUNTRY_EN_NAME;
							this.$set(originalItem, 'ifClick', false);
							item.children.push(originalItem);
							item.value = originalItem.COUNTRY_EN_NAME;
						}
					})
				});
				console.log(this.countryList)
			},
			getCountryId(e) {
				try {
					if (this.$i18n.locale == 'zh') {
						if (e.item.length > 1) {
							this.worldTitle = `${e.item[0].COUNTRY_CN_NAME}...`
						} else {
							this.worldTitle = `${e.item[0].COUNTRY_CN_NAME}`
						}
					} else {
						if (e.item.length > 1) {
							this.worldTitle = `${e.item[0].COUNTRY_EN_NAME}...`
						} else {
							this.worldTitle = `${e.item[0].COUNTRY_EN_NAME}`
						}
					}
				} catch (e) {

				}
				this.dataListMap = e.item
				this.countryId = []
				this.countryName = []
				this.countryNameList = []
				e.item.forEach(item => {
					if (item.ifClick) {
						this.countryId.push(item.COUNTRY_ID)
						this.countryNameList.push(item)
					} else {
						this.countryId = this.countryId.filter(it => {
							return it != e.COUNTRY_ID
						})
						this.countryNameList = this.countryNameList.filter(it => {
							return it.COUNTRY_ID != e.COUNTRY_ID
						})
					}
				})
				// function unique (arr) {
				// 	return Array.from(new Set(arr))
				// }
				// this.countryId = unique(this.countryId)
				this.countryName = this.countryNameList.map(item => {
					if (this.$i18n.locale == 'zh') {
						return item.COUNTRY_CN_NAME
					} else {
						return item.COUNTRY_EN_NAME
					}
				})
				this.getCategory(null, null, this.activeType);
			},
			isJsonString(str) {
				try {
					if (typeof JSON.parse(str) == "object") {
						return true;
					}
				} catch (e) {}
				return false;
			},
			/**
			 * 下拉选择
			 */
			//下拉菜单打开触发回调
			open(index) {},
			//下拉菜单关闭触发回调
			close(index) {
				// this.$refs.uDropdown.close()
				this.$refs.uDropdown.highlight();
				if (this.$i18n.locale == 'zh') {
					if (this.indicatorTitle != '指标') {
						this.$refs.uDropdown.highlight(0)
					}
					if (this.worldTitle != '指标') {
						this.$refs.uDropdown.highlight(1)
					}
					if (this.timeTitle != '指标') {
						this.$refs.uDropdown.highlight(2)
					}
				} else {
					if (this.indicatorTitle != 'indicator') {
						this.$refs.uDropdown.highlight(0)
					}
					if (this.worldTitle != 'world') {
						this.$refs.uDropdown.highlight(1)
					}
					if (this.timeTitle != 'time') {
						this.$refs.uDropdown.highlight(2)
					}
				}
				if (index == 1 && (this.dataListMapTempAdd.length != 0 || this.dataListMapTempSub.length != 0)) {
					this.cancel()
				}
				this.$refs.uDropdown.highlight(index); // TODO 将选择后的内容持续高亮
			},
			// 日历选择
			getTimeValue(e) {
				let arr = []
				// if(e[0] > e[1]){
				// 	[e[0],e[1]] = [e[1],e[0]]
				// }
				for (let i = e[0]; i <= e[1]; i++) {
					arr.push(`${i}`)
				}
				this.timeScope = e
				this.time = arr
				this.timeTitle = `${e[0]}-${e[1]}`
				this.$refs.uDropdown.close()
				this.getCategory(null, null, this.activeType);
			},
			/**
			 * 图表
			 */
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					// textList: [],
					format: function(item, category) {
						console.log(item)
						console.log(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
							})
						}
					}
				});
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return item.data
					}
				})
			},
			// 重置按钮
			Reset() {
				// console.log(this.searchList)
				// console.log(this.countryList)
				uni.redirectTo({
					url: '/pages/information/InformationData/InformationData'
				});
			},
			// 切换图表
			canvasTypeChange(num) {
				this.canvasType = num;
				this.getCategory(null, null, this.activeType);
			},
			// 初始化
			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);
				}
			},
			// 渲染
			canvas(data) {
				this.chartsTitle = data[0].unitY; // 头部展示的单位
				this.activeTitle = this.$i18n.locale == 'zh' ? this.activeType.indexName : this.activeType
					.indexEnName; //选择的类型
				let series = [];
				let seriesItem = {};
				data.forEach((item, index) => {
					seriesItem = {
						"name": this.countryName[index],
						"data": item.y
					}
					series.push(seriesItem);
				})
				let Column = {
					"categories": data[0].x,
					"series": series
				};
				if (this.canvasType == 1) {
					this.showColumn('canvasColumn', Column);
				} else {
					this.showLineA("canvasLineA", Column);
				}
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					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
						}
					}
				})
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					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
					},
					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(item, index, i, j) {
				this.activeType = i;
				let source = this.activeType.source;
				if (this.isJsonString(this.activeType.source)) {
					source = JSON.parse(this.activeType.source)
				}
				let params = {
					"Source": source,
					"country": this.countryId.length > 0 ? this.countryId : ["93BC2730ED0A402186F596F6A01C007E"],
					"time": this.time,
					"language": this.$i18n.locale,
				}
				this.getInitialCategory(params);
				this.close(index)
			},
			// 导出
			async exportExcel() {
				let _this = this
				let source = this.activeType.source;
				if (this.isJsonString(this.activeType.source)) {
					source = JSON.parse(this.activeType.source)
				}
				let params = {
					"Source": source,
					"country": this.countryId.length > 0 ? this.countryId : ["93BC2730ED0A402186F596F6A01C007E"],
					"time": this.time,
					"language": this.$i18n.locale,
				}
				const res = await this.$myRequest({
					url: '/op/geiIntegratedDataMenus/getChartDataExcl',
					data: {
						...params
					},
					method: 'post',
					// responseType: 'blob'
				});
				if (res.data) {
					this.download(res.data)
				} else {
					let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
					uni.showToast({
						icon: 'none',
						mask: true,
						title: eg,
					});
				}
			},
			download(url) {
				let _this = this
				uni.downloadFile({
					url: 'https://m.geidcp.com/api/file/pub/' + url, // TODO pub路径重复
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							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)
								}
							});
						} else {
							let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
							uni.showToast({
								icon: 'none',
								mask: true,
								title: eg,
							});
						}
					},
					fail: (err) => {
						console.log(111111111)
						let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
						uni.showToast({
							icon: 'none',
							mask: true,
							title: eg,
						});
					},
				});
			},
			/**
			 * 相关
			 */
			showRelevant(e) {
				this.activeType = {
					indexName: e.item.indexName,
					indexEnName: e.item.indexEnName,
					source: JSON.parse(e.item.source)
				}
				this.indicatorTitle = this.$i18n.locale == 'zh' ? e.item.indexName : e.item.indexEnName
				this.getCategory(null, null, this.activeType);
			},

			showCategory1(index) {
				this.showCategoryIndex1 = index;
			},
			showCategory2(index) {
				this.showCategoryIndex2 = index;
			},
			getCategory1(item, index) {
				if (item['child']?.length > 0) {
					return;
				} else {
					let ifClick = !item.ifClick
					this.indicatorListMapFun({
						item,
						ifClick
					})
				}
				setTimeout(() => {
					this.getSource({
						item: this.indicatorListMap,
						index
					})
				}, 100)
			},
			getCategory2(item, index) {
				if (item['children']?.length > 0) {
					return;
				} else {
					let ifClick = !item.ifClick
					this.dataListMapFun({
						item,
						ifClick
					})
				}
			},
			empty() {
				this.dataListMap.forEach(item => {
					item.ifClick = false
				})
				this.dataListMap = []
				this.countryId = []
				this.worldTitle = this.$i18n.locale == 'zh' ? '世界' : 'world'
				this.countryName = this.$i18n.locale == 'zh' ? ['世界'] : ['WORLD']
				this.getCategory(null, null, this.activeType);
			},
			cancel() {
				this.dataListMapTempAdd.forEach(item => {
					item.ifClick = false
					this.dataListMap = this.dataListMap.filter(it => {
						return it['label'] != item['label']
					})
				})
				this.dataListMapTempSub.forEach(item => {
					item.ifClick = true
					this.dataListMap.push(item)
				})
				this.dataListMapTempAdd = []
				this.dataListMapTempSub = []
			},
			submit() {
				this.dataListMapTempAdd = []
				this.dataListMapTempSub = []
				setTimeout(() => {
					this.getCountryId({
						item: this.dataListMap
					})
					this.$refs.uDropdown.close()
				}, 100)
			}
		}
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		padding-top: 0;
	}

	page {
		background: #fff;
		width: 750upx;
		overflow-x: hidden;
		height: 100%;
		//padding-bottom: 20upx;
		overflow: hidden;
	}

	.informationData {
		height: 100%;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

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

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
		border-top: 20upx solid #fff
	}

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

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

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

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

	.qiun-title-dot-light {
		padding-left: 10upx;
		font-size: 28upx;
		color: #aaa;
		width: 50%;
	}

	.qiun-title-center {
		padding-left: 10upx;
		font-size: 28upx;
		color: #636363;
		text-align: center;
	}

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

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

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

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

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

	.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;
		}
	}

	.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%;
	}

	.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%;
		}
	}
</style>
<style scoped lang="scss">
	.contry-btn {
		height: 50upx;
		display: inline-block;
		line-height: 50upx;
	}

	.left,
	.right {
		position: absolute;
		height: 100%;
		top: 0;
		bottom: 0upx;
	}

	.left {
		width: 24%;
		left: 0upx;
		background: #F2F2F2;

	}

	.right {
		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;
				}
			}
		}
	}

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

		//.cateText {
		//	margin: 0 20upx 20upx 0;
		//	background: #F2F2F2;
		//	padding: 20upx;
		//	border-radius: 8upx;
		//	width: 46%;
		//	overflow: hidden;
		//	text-overflow: ellipsis;
		//	white-space: nowrap;
		//	text-align: center;
		//
		//	&.active {
		//		border: 1px solid #1777FE;
		//		color: #1777FE;
		//		background: #fff;
		//	}
		//}
	}

	.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;
	}

	.cateTextActive {
		padding: 10upx;
		margin: 10upx 20upx 10upx 0;
		display: inline-block;
		width: 240upx;
		vertical-align: middle;
		background-color: #0079ef;
		color: #fff;
		text-align: center;
	}
</style>