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

<template>
	<view class="">
		<navbar-search :list="categoryList" @selectedItem="getSelectedItem"></navbar-search>
		<!-- 筛选 -->
		<view class="selectCondition">
			<u-dropdown ref="uDropdown" @open="open">
				<!-- 指标 -->
				<u-dropdown-item  :title="$i18n.locale=='zh'?'指标':'indicator'">
					<view class="slot-content">
						<!-- 选择指标 -->
						<view style="height:1168upx;position: relative;">
							<scroll-view scroll-y="true" class="left">
								<view	class="row" v-for="(fItem, fIndex) in categoryList" :key="fItem.id" :class="[fIndex===showCategoryIndex ?'on':'']" @tap="showCategory(fIndex)">
									<view class="text" :style="$i18n.locale=='zh'?'':'text-algin:center;'">{{ $i18n.locale=='zh'?fItem.indexName:fItem.indexEnName }}</view>
								</view>
							</scroll-view>
							<scroll-view scroll-y="true" class="right">
								<view	v-for="(fItem, fIndex) in categoryList" :key="fItem.id" @tap="showCategory(fIndex)">
									<view	v-if="fIndex === showCategoryIndex"  class="category">
										<view v-for="(item,index) in fItem.child" :key="'c'+index" @click="getCategory2(item,index)" :class="item.child.length>0?'':'cateText'">
											<view :class="{'getCategory2':item.child.length>0,'nosumenu':item.child.length==0}"
														:style="item.child.length>0?'font-weight:700;color:#0079ef':'height:90upx;line-height:90upx;font-weight:400;'">
												{{ $i18n.locale=='zh'?item.indexName:item.indexEnName }}
											</view>
											<view class="threemenu">
												<view v-for="(i,j) in item.child" :key="j"  class="cateText" 	@click="getCategory(item,i,index,j)"
															:class="{'active':cThreeSubmenu===j && index===cTwoSubmenu}">	{{$i18n.locale=='zh'?i.indexName:i.indexEnName}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</u-dropdown-item>
				<!-- 世界 -->
				<u-dropdown-item  :title="$i18n.locale=='zh'?'世界':'world'" >
					<view class="slot-content">
						<view style="height:1168upx;position: relative;">
							<scroll-view scroll-y="true" class="left">
								<view	class="row"	v-for="(fItem, fIndex) in countryList" :key="fItem.id" :class="[fIndex === showCountryIndex ? 'on' : '']"
											 @tap="showCategory2(fIndex)">
									<view class="text">{{ $i18n.locale=='zh'?fItem.label:fItem.labelEn }}</view>
								</view>
							</scroll-view>
							<scroll-view scroll-y="true" class="right">
								<view	v-for="(fItem, fIndex) in countryList"	:key="'fItem' + fIndex" @tap="showCategory2(fIndex)">
									<view	v-if="fIndex === showCountryIndex && fItem.children" class="category">
										<view  v-for="(item,index) in fItem.children" :key="index"
													 @click="getCategory2(item,index)" :class="item.length>0?'':'cate'" >
											<view class=""><text :class="item.ifClick?'cateText3':'cateText2'"  @click="getCountryId(item,index)">{{item.label}}</text>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</u-dropdown-item>
				<!-- 时间 -->
				<u-dropdown-item  :title="$i18n.locale=='zh'?'时间':'time'" >
					<view class="slot-content" >
						<!-- 时间选择 -->
						<view class="date" style="height:1168upx;position:relative;background:#fff">
							<!--									<u-calendar v-model="showDateFlag"-->
							<!--															:mode="'range'"-->
							<!--															:start-text="i18n('resourceStart')"-->
							<!--															:end-text="i18n('resourceEnd')"-->
							<!--															@change="change"></u-calendar>-->
							<calendar v-model="showDateFlag"
												@change="change"
												mode="range"
												:start-text="i18n('resourceStart')" :end-text="i18n('resourceEnd')" :toolTip="i18n('resourceSelectTime')" max-date="2030-12-31"
												:range-color="'#2979ff'" :range-bg-color="'rgba(41,121,255,0.13)'" :active-bg-color="'#2979ff'" :btn-type="'primary'"
												:textzhi="$i18n.locale=='zh'?'至':' To '"
							>
							</calendar>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 图表区域 -->
		<view class="qiun-columns">
			<!-- 按钮区 -->
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
				<!-- 标题 -->
				<view class="qiun-title-dot-light">{{title}} </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>
				</view>
			</view>
			<!-- 图表 -->
			<view class="qiun-charts" >
				<canvas v-if="canvasType==1" canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
				<canvas v-else 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="dataList"></RelevantIndicators>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import uCharts from '@/static/js/u-charts.js';
import viewpoint from '../../conference/meetingIndexCh/viewpoint.vue';
import RelevantIndicators from './dom/RelevantIndicators.vue'
import navbarSearch from './dom/navbarSearch.vue'
import calendar from "../../resourceSharing/calendar";

var _self;
var canvaColumn=null;
var canvaLineA = null;
export default {
	components: {
		viewpoint,
		RelevantIndicators,
		navbarSearch,
		calendar
	},
	data() {
		return {
			show1:false,
			show2:false,
			showDateFlag:true,
			yearStartShow:false,
			cWidth:'',
			cHeight:'',
			pixelRatio:1,
			serverData:'',
			plus:false,
			dataList:[
				// {
				// 	icon:require('../../../static/img/infomationdata/e1.png'),
				// 	label:'核发电总量'
				// },{
				// 	icon:require('../../../static/img/infomationdata/e2.png'),
				// 	label:'电力'
				// },{
				// 	icon:require('../../../static/img/infomationdata/e3.png'),
				// 	label:'风发电总量'
				// },{
				// 	icon:require('../../../static/img/infomationdata/e2.png'),
				// 	label:'水发电总量'
				// },{
				// 	icon:require('../../../static/img/infomationdata/e2.png'),
				// 	label:'其他发电总量'
				// }
			],
			list: [

			],
			cTwoSubmenu:-1,
			cThreeSubmenu:-1,
			background:{
				backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
			},
			backStyle:{
				color:'#fff'
			},
			categoryList:[],
			showCategoryIndex: 0, // 一级菜单高亮显示序号
			CategoryList:{

			},
			title:null,// 头部展示的单位
			activeTitle:null,//选择的类型
			canvasType:1,// 控制显示柱形或折线
			countryName:[],
			cancelText:this.$t('common.Back'),
			submit:this.$t('common.submit'),
			activeType:{
				indexName:'发电总量',
				indexEnName:'Total power generation',
				source:{
					"IEA":{
						"index":{
							"发电总量":"132",
						},
					},
				}
			},
			countryId:[],
			TimeType:null,
			startTime:2013,
			endTime:2020,
			time:['2013','2014','2015','2016','2017','2018','2019','2020'],
			params: {
				year: true,
				month: false,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
			showCountryIndex:0,
			countryList:[
				{
					label:'亚洲',
					labelEn:'Asia',
					children:[],
				},
				{
					label:'非洲',
					children:[],
					labelEn:'Africa'
				},
				{
					label:'欧洲',
					children:[],
					labelEn:'Europe'
				},
				{
					label:'北美洲',
					children:[],
					labelEn:'Northamerica'
				},
				{
					label:'南美洲',
					children:[],
					labelEn:'Southamerica'
				},
				{
					label:'大洋洲',
					children:[],
					labelEn:'Oceania'
				},
			],
			selectedItem: '',
		}
	},
	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.getServerData();
		this.getCountryList();
	},
	// 监听日期选择器关闭
	watch:{

	},
	methods: {
		showCategory(index) {
			this.showCategoryIndex = index;
		},
		showCategory2(index) {
			this.showCountryIndex = index;
		},
		yearStartShowChange(type){
			this.yearStartShow = true;
			this.TimeType = type;
		},
		canvasTypeChange(num){
			this.canvasType = num;
			this.getCategory(null,this.activeType);
		},
		timeBack(e){
			console.log(e)
			if(this.TimeType=='start'){
				this.startTime = e.year;
			}else {
				this.endTime = e.year;
			}
			if(this.startTime-0 >this.endTime-0 || (this.endTime -0 ) - (this.startTime - 0)>7){
				this.$refs.uToast.show({
					title: this.$i18n.locale=='zh'?'请正确选择时间，时间段为7年内':'Please select the right time period within 7 years',
					type: 'error',
				});
				this.startTime = (this.endTime -0 ) - 7;
				this.endTime = (this.startTime -0 ) + 7;
			}
			let timeArr = [];
			this.time = [];
			for(let i=0; i<= Number(this.endTime)-Number(this.startTime); i++){
				timeArr.push(String(Number(this.startTime)+i))
			}
			this.time = timeArr;
			this.getCategory(null,this.activeType);
		},
		Reset(){
			uni.redirectTo({
				url: '/pages/information/InformationData/InformationData'
			});
		},
		plusChange(){
			this.plus=!this.plus;
			if(this.plus){
				plus.screen.lockOrientation('landscape-primary');//横屏
				this.Reset();
			}else {
				plus.screen.lockOrientation('portrait-primary');//竖屏
			}
		},
		i18n (data) {
			return this.$t('common.' + data);
		},
		getDataList(num){
			if(num==1){
				this.show1 = true;
			}else {
				this.show2 = true;
			}
		},
		getCategory(item,i,index,j){
			console.log(1)
			this.activeType=i;
			let source =typeof(this.activeType.source)!=='string'?JSON.stringify(this.activeType.source):this.activeType.source;
			let params={
				"Source":JSON.parse(source),
				"country":this.countryId.length>0?this.countryId:["93BC2730ED0A402186F596F6A01C007E"],
				"time":this.time,
				"language":this.$i18n.locale,
			}
			this.show1=false;
			this.show2=false;
			this.getInitialCategory(params);
			this.cTwoSubmenu = index;
			this.cThreeSubmenu = j;
			this.close(index)
		},
		getCategory2(item,index){
			console.log(1)
			if(item?.child?.length>0){
				return;
			}else {
				this.activeType=item;
				let source =typeof(this.activeType.source)!=='string'?JSON.stringify(this.activeType.source):this.activeType.source;
				let params={
					"Source":JSON.parse(this.activeType.source),
					"country":this.countryId.length>0?this.countryId:["93BC2730ED0A402186F596F6A01C007E"],
					"time":this.time,
					"language":this.$i18n.locale,
				}
				this.show1=false;
				this.getInitialCategory(params);
			}
		},
		async getCountryList(){
			let originalCountryData = await this.$api.json('originalCountryData');
			this.$nextTick(function(){
				let countryList=this.countryList;
				originalCountryData.forEach((originalItem,index)=>{
					countryList.forEach((item,j) =>{
						if(originalItem.CONTINENT_NAME == 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;
						}
					})
				});
				this.list = countryList;
			})
		},
		getCountryId(item,index){
			item.ifClick=!item.ifClick;

			if(item.ifClick==true){
				this.countryId.push(item.value);
				if(this.countryName[0]=='世界'){
					this.countryName=[];
				}

				this.countryName.push(item.label);
			}else {
				console.log(this.countryId);
				const y = this.countryId.indexOf(item.value);
				this.countryId.splice(y,1);
				this.countryName.splice(y,1);

			}
			this.getCategory(0,this.activeType)
		},

		async getServerData(){
			const res = await this.$myRequest({
				url: '/op/geiIntegratedDataMenus/getMenu',
				data: {}
			});

			this.categoryList= res.data;
			let params = {
				"Source":{
					"IEA":{
						"index":{'发电总量':"132"},
					},
				},
				"country":["93BC2730ED0A402186F596F6A01C007E"],
				"time":this.time,
				"language":this.$i18n.locale,
			}
			this.getInitialCategory(params);
		},
		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.title=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
					}
				}
			})
			console.log(canvaColumn)
		},
		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'
					}
				}
			});
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e,{
				format: function(item, category) {	return item.data }
			})
		},

		touchColumn(e){
			canvaColumn.showToolTip(e, {
				format: function (item, category) {
					if(typeof item.data === 'object'){
						return category + ' ' + item.name + ':' + item.data.value
					}else	{
						return category + ' ' + item.name + ':' + item.data
					}
				}
			});
		},
		openPropDialog(payload){

		},
		//下拉菜单打开触发回调
		open(index) {
			// if(index===2) this.showDateFlag=true;
			// else this.showDateFlag=false
			if(index===2) this.showDateFlag=true;

			this.$refs.uDropdown.highlight();
			console.log(this.showDateFlag)
		},
		//下拉菜单关闭触发回调
		close(index){
			setTimeout(()=>{
				this.$refs.uDropdown.close();
				this.cTwoSubmenu = -1;
				this.cThreeSubmenu = -1;
			},100)
			this.$refs.uDropdown.highlight(index);
		},
		//日期选择器
		change(e) {
			console.log(e);
		},
		// 获取列表选中值
		getSelectedItem(value) {
			this.selectedItem = value
		},
	}
}
</script>

<style lang="scss" scoped>
uni-page-body{
	padding-top:0;
}
page{
	background:#fff;
	width:750upx;
	overflow-x:hidden;
	height:100%;
	padding-bottom:20upx;
	overflow:hidden;
}
.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 #f6f6f6}
.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-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;
}

.data-text {
	margin:0 40upx;
	height: 100upx;
	line-height: 100upx;
	border-top:1px solid #f1f2f3;
	border-bottom:1px solid #f1f2f3;
}
.data-text2 {
	line-height: 50px;
	border-top:1px solid #f1f2f3;
	border-bottom:1px solid #f1f2f3;
}
.data-text:active {
	background-color: #f2f2f2;
}

.cate {
	display: inline-block;
	width: 240upx;
	vertical-align: middle;
	margin-right: 20upx;
}
.cateText2 {
	padding: 10upx;
	margin: 10upx 20upx 10upx 0;
	display: inline-block;
	width: 240upx;
	vertical-align: middle;
	background: #f1f2f3;
	text-align: center;
}
.cateText3 {
	padding: 10upx;
	margin: 10upx 20upx 10upx 0;
	display: inline-block;
	width: 240upx;
	vertical-align: middle;
	background-color: #0079ef;
	color: #fff;
	text-align: center;
}
.cateText :active{
	color: red;
}
.data-year {
	padding: 20upx 30upx;
}
.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;
			}
		}
	}
}

// .cateText {
// 	padding:20upx 0;
// 	border:1px solid #f2f2f2;
// 	&.active{
// 		border:1px solid #1777FE;
// 		color:#1777FE;
// 		background:#fff;
// 	}
// }
.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;
		}
	}

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

// 重置按钮

.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;
	}
}
// 筛选
.selectCondition{
	position: relative;
	::v-deep .u-dropdown__content{
		border-top:2upx solid #eaeaea !important;
	}
}
</style>