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

<template>
	<view class="">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle"
			back-icon-color="#fff" title-color="#fff"
			:title="i18n('Data')"
			:background="background">
		</u-navbar>
		<!-- 筛选 -->
		<view class="selectCondition">
			<view class="dropdown">
			<u-dropdown ref="uDropdown" @open="open" @close="close">
				<!-- 指标 -->
				<u-dropdown-item  title="指标">
						<view class="slot-content">
								<!-- 选择指标 -->
								<view style="height:1000upx;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="世界" >
						<view class="slot-content">
								<view style="height: 1000upx;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="时间" >
						<view class="slot-content">
							<!-- 时间选择 -->
							<u-picker
								mode="time"
								v-model="yearStartShow"
								:params="params"
								:confirmText="submit"
								:cancelText="cancelText"
								:show-time-tag="false"
								@confirm="timeBack">
							</u-picker>
						</view>
				</u-dropdown-item>
			</u-dropdown>
			</view>
		</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-picker
			mode="time"
			v-model="yearStartShow"
			:params="params"
			:confirmText="submit"
			:cancelText="cancelText"
			:show-time-tag="true"
			@confirm="timeBack">
		</u-picker>

		<!-- 选择地区 -->
		 <view class="zone">
		 	<u-popup v-model="show2" mode="top">
		 			<view style="height: 1000upx;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">
		 							<view class="block" :class="'bg-'+themeColor.name"></view>
		 							{{  $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>
		 	</u-popup>
		 </view>
		<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'


	var _self;
	var canvaColumn=null;
	var canvaLineA = null;
	export default {
  components: {
		viewpoint,
		RelevantIndicators,
	},
		data() {
			return {
				show1:false,
				show2:false,
				yearStartShow:false,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:'',
				plus:false,
				dataList:[
					{
						icon:require('../../../static/img/infomationdata/indicator/e1.png'),
						label:'核发电总量'
					},{
						icon:require('../../../static/img/infomationdata/indicator/e2.png'),
						label:'电力'
					},{
						icon:require('../../../static/img/infomationdata/indicator/e3.png'),
						label:'风发电总量'
					},{
						icon:require('../../../static/img/infomationdata/indicator/e2.png'),
						label:'水发电总量'
					},{
						icon:require('../../../static/img/infomationdata/indicator/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'
					},
				],
			}
		},
		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();
		},
		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');//竖屏
					// this.Reset();
				}
			},
			i18n (data) {
			    return this.$t('common.' + data);
			},
			getDataList(num){
				if(num==1){
					this.show1 = true;
				}else {
					this.show2 = true;
				}
			},
			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)
			},
			getCategory(item,i,index,j){
				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

			},
			getCategory2(item,index){
				if(item.child.length>0){
					return;
				}else {
					this.activeType=item;
					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 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'
				});
				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: {
						//disabled:true
					},
					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'
						}
					}
				});

			},
			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) {
				this.$refs.uDropdown.highlight();
			},
			//下拉菜单关闭
			close(index){
				this.$refs.uDropdown.highlight(index);
			},
		}
	}
</script>

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