konggang-city-miniprogram/pages/metrics/index.vue

<template>
	<view class="content-box">
		<view class="uni-list title-date-box">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db display-flex-start">
					<picker mode="date" fields="year"  @change="bindDateChange" class="picker-class">
						<view class="uni-input display-between items-center">{{dateYear}}年<image src="../../static/arrow_down.svg" mode="aspectFit"></image></view>
					</picker>
					<view style="font-size: 26rpx;margin-left: 20rpx;">1月~  </view>
					<picker :range="arrayMonth" :value="dateMonth"  @change="bindDateMonthChange" class="picker-class">
						<view class="uni-input display-between items-center" style="color: #707070;">{{dateMonth}}月<image src="../../static/calendar_icon.svg" mode="aspectFit"></image></view>
					</picker>
				</view>
			</view>
		</view>
	
		<qiun-title-bar title="规上工业企业"/>
	    <view class="block-box display-wrap items-center" style="justify-content: space-around;height: 320rpx;">
			 <view class="block-box-content" style="background-color: #77AFCA;" @click="goScale('规上工业企业')">
				 <view class="font-size30">规上工业企业</view>
				 <view>{{standard_sized_count}}</view>
			 </view>
			 <view class="block-box-content" style="background-color: #A5C9D3;">
				 <view class="font-size30">工业增加值增速</view>
				 <view>同比增长{{standard_sized_increase_ratio}}%</view>
			 </view>
			 <view class="block-box-content" style="background-color: #8D7E95;" @click="goScale('先进制造业企业')">
				 <view class="font-size30">先进制造业</view>
				 <view>{{advanced_count}}</view>
			 </view>
			 <view class="block-box-content" style="background-color: #C1ABBC;">
				 <view class="font-size30">先进制造业总产值</view>
				 <view>同比增长{{advanced_increase_ratio}}%</view>
			 </view>
		</view>
		<!-- <qiun-title-bar title="2021年规上工业任务目标"/> -->
		<view class="title-second">{{dateYear}}年规上工业任务目标</view>
		<view class="charts-box" style="position: relative;">
		    <qiun-data-charts type="bar" background="#4C4C4C" :opts="{extra:{bar:{linearType:'custom',barBorderCircle:true}}}" :chartData="chartData"/>
			<view class="pos-font" style="top: 26%;">增速</view>
			<view class="pos-font" style="top: 64.5%;">总产值</view>
		</view>
		<!-- <qiun-title-bar title="先进制造业产值(亿元)"/> -->
		<view class="title-second">先进制造业产值(亿元)</view>
		<view class="charts-box">
		    <qiun-data-charts  type="column" :chartData="chartData1" background="#4C4C4C" :ontouch="true" :opts="{enableScroll: true,xAxis:{scrollShow: true,itemCount:5},yAxis:{splitNumber:3}}"/>
		</view>
		<!-- <qiun-title-bar title="工业产值"/> -->
		<view class="title-second">工业产值</view>
		<view class="charts-box">
		  <qiun-data-charts type="demotype" :opts="{fontColor:'#666',xAxis:{boundaryGap:'justify'}}" :chartData="chartData2"/>
		</view>
		
		<qiun-title-bar title="工业投资" style="border-top:10rpx solid #f2f2f2" />
		<view class="block-box display-around items-center">
			 <view class="block-box-content" style="width:30%;background-color:#F2CD4F;" @click="goProject(0)">
				 <view class="font-size30">在库项目</view>
				 <view>{{industryData.instore_project_count}}</view>
			 </view>
			 <view class="block-box-content" style="width:30%;background-color: #9776F2;" @click="goProject(1)">
				 <view class="font-size30">技改项目</view>
				 <view>{{industryData.industrial_investment_project_count}}</view>
			 </view>
			 <view class="block-box-content" style="width:30%;background-color: #51A9E3;" @click="goProject(2)">
				 <view class="font-size30">在谈项目</view>
				 <view>{{industryData.discuss_project_count}}</view>
			 </view>
		</view>
		<!-- <qiun-title-bar title="2021年工业投资任务目标"/> -->
		<view class="title-second">{{dateYear}}年工业投资任务目标</view>
		<view class="charts-box">
		    <qiun-data-charts type="bar"   background="#4C4C4C" :opts="{extra:{bar:{linearType:'custom',barBorderCircle:true}}}" :chartData="industryData.chartData"/>
		</view>
		<!-- <qiun-title-bar title="工业投资额"/> -->
		<view class="title-second">工业投资额</view>
		<view class="charts-box">
		  <qiun-data-charts type="demotype" :opts="{fontColor:'#666',xAxis:{boundaryGap:'justify'}}" :chartData="industryData.chartData2"/>
		</view>
	
	
	    <qiun-title-bar title="重点项目" style="border-top:10rpx solid #f2f2f2" />
	    <view class="block-box display-around items-center">
	    	 <view class="block-box-content" style="width:30%;background-color:#F2CD4F;" @click="goImportant(0)">
	    		 <view class="font-size30">重点项目</view>
	    		 <view>{{importantData.importent_project_count}}</view>
	    	 </view>
	    	 <view class="block-box-content" style="width:30%;background-color: #9776F2;" @click="goImportant(0)">
	    		 <view class="font-size30">新建/续建</view>
	    		 <view>{{importantData.new_project_count}}/{{importantData.continue_project_count}}</view>
	    	 </view>
	    	 <view class="block-box-content" style="width:30%;background-color: #51A9E3;">
	    		 <view class="font-size30">总投资(亿元)</view>
	    		 <view>{{importantData.investment_count}}</view>
	    	 </view>
	    </view>
	    <!-- <qiun-title-bar title="重点项目级别分布"/> -->
		<view class="title-second">重点项目级别分布</view>
	    <view class="charts-box">                   
	        <qiun-data-charts type="bar"  background="#4C4C4C" :chartData="importantData.chartData" :opts="{xAxis:{labelCount:2},extra:{bar:{linearType:'custom',barBorderCircle:true}}}" />
	    </view>
	    <!-- <qiun-title-bar title="工业投资额"/> -->
		<view class="title-second">工业投资额</view>
		<view class="charts-box">
		  <qiun-data-charts type="demotype" :opts="{fontColor:'#666',xAxis:{boundaryGap:'justify'}}" :chartData="importantData.chartData2"/>
		</view>
	
	    <qiun-title-bar title="科技创新指标" style="border-top:10rpx solid #f2f2f2;margin-bottom: 10rpx;" />
	    <view class="block-box display-around items-center">
	    	 <view class="block-box-content" style="width:46%;color: #555;" @click="goScale('科技创新企业','high_tech')">
	    		 <view class="font-size30">国家高新技术企业</view>
	    		 <view>{{techData.target.high ||'-'}}/<text style="color: red;">{{techData.finish.high ||'-'}}</text></view>
	    	 </view>
	    	 <view class="block-box-content" style="width:46%;color: #555;" @click="goScale('科技创新企业','tech')">
	    		 <view class="font-size30">科技型中小企业</view>
	    		 <view>{{techData.target.mini ||'-'}}/<text style="color: red;">{{techData.finish.mini ||'-'}}</text></view>
	    	 </view>
		</view>
		<view class="display-around-column items-center" style="height: 640rpx; margin: 10rpx 0 10rpx 0;">
		   <view class="block-box-content" style="width:96%;color: #555;" @click="goScale('科技创新企业','standard_industry')">
		   				 <view class="font-size30">累计研发投入规上工业企业</view>
		   				 <view>{{techData.target.standard_industry ||'-'}}/<text style="color: red;">{{techData.finish.standard_industry ||'-'}}</text></view>
		   </view>
		   <view class="block-box-content" style="width:96%;color: #555;" @click="goScale('科技创新企业','standard_service')">
		   				 <view class="font-size30">累计研发投入规上服务业企业</view>
		   				 <view>{{techData.target.standard_service ||'-'}}/<text style="color: red;">{{techData.finish.standard_service ||'-'}}</text></view>
		    </view>
		    <view class="block-box-content" style="width:96%;color: #555;" @click="goScale('科技创新企业','rd_five_percent' )">
		   				 <view class="font-size30">累计研发投入占主营业务5%的企业</view>
		   				 <view>{{techData.target.rd_five_percent ||'-'}}/<text style="color: red;">{{techData.finish.rd_five_percent ||'-'}}</text></view>
		   </view>
		   <view class="block-box-content" style="width:96%;color: #555;" @click="goScale('科技创新企业','rd_five_million')">
		   				 <view class="font-size30">累计研发投入500万以上的企业</view>
		   				 <view>{{techData.target.rd_five_million ||'-'}}/<text style="color: red;">{{techData.finish.rd_five_million ||'-'}}</text></view>
		   </view>
	   </view>
	
	    <qiun-title-bar title="各新城指标排序" style="border-top:10rpx solid #f2f2f2" />
	    <view class="uni-list title-date-box" style="border: none;">
	    	<view class="uni-list-cell">
	    		<view class="uni-list-cell-db display-flex-start">
	    			<picker :range="arrayNewCity" :value="sortSelect"  @change="bindDateCityChange" class="picker-class" style="width: 65%;">
	    				<view class="uni-input display-between items-center" style="color: #707070;">{{sortSelect}}<image src="../../static/arrow_down.svg" mode="aspectFit"></image></view>
	    			</picker>
	    		</view>
	    	</view>
	    </view>
		<!-- <qiun-title-bar title="各新城规上工业企业数量"/> -->
		<view class="title-second">各新城{{sortSelect}}</view>
		<view class="charts-box">
			<qiun-data-charts  type="mix" :chartData="ereaData.chartDataBar" 
			:opts="{yAxis:{showTitle:false,padding:5,data:[{position:'left',textAlign:'left',fontSize:10},{position:'right',textAlign:'right',min: -60,max: 30,fontSize:10,format:'lineRaitoY'},{position:'right',disabled:true}]}}" 
			 background="#4C4C4C"/>
		</view>
		<!-- <qiun-title-bar title="各新城规上工业企业数量占比"/> -->
		<view class="title-second">各新城{{sortSelect}}占比</view>
		<view class="charts-box" style="margin-bottom: 20rpx;">
			<qiun-data-charts   type="pie" :chartData="ereaData.chartDataPie" :opts="{legend:{fontSize:13}}" background="#4C4C4C"/>
		</view>
	</view>
</template>

<script>
	import md5 from "@/common/md5.js";
	export default {
	  data() {
		  return{
			  dateYear:new Date().getFullYear(),
			  dateMonth:new Date().getMonth() + 1,
			  arrayMonth:[],
			  arrayNewCity:['规上工业企业数量','工业产值及增速','工业增加值增速','工业投资及增速','工业技改及增速'],
			  sortSelect:'规上工业企业数量',
			  standard_sized_count:'',
			  standard_sized_increase_ratio:'',
			  advanced_count:'',
			  advanced_increase_ratio:'',
			  chartData:{
				categories: [ "工业增加值","先进制造业" ],//增速,总产值
				series: [
					{   name: "目标任务",
					    otherData:[],
						data: [],
						format:'moreDataShow',
						textSize:10
					},
				    {   name: "目前已完成", 
					    otherData:[],
						data: [],
						format:'moreDataShow',
						textSize:10
					},
					]
			  },
			  chartData1:{
				  "categories": [],
				  "series": [
				        {
				            "name": "先进制造业产值(亿元)",
				            "data": [],
				        }
				    ]
			  },
			  chartData2:{
				  "categories": ["1月", "2月","3月", "4月","5月", "6月","7月", "8月","9月", "10月","11月", "12月"],
				  "series": [
						{name: "本年度",data: [],textSize:1},
						{name: "上年度", data: [],textSize:1}
					]
			  },
			  industryData:{
				  discuss_project_count:'',
				  industrial_investment_project_count:'',
				  instore_project_count:'',
				  chartData:{
					  categories: ["在库项目", "技改项目"],
					  series: [
					  	{   
							name: "目标任务",
					  		data: [],
					  		otherData:[],
					  		format:'moreDataShow',
					  		textSize:10
					  	},
					      {   
							name: "目前已完成", 
					  		data: [],
					  		otherData:[],
					  		format:'moreDataShow',
					  		textSize:10,
					  	},
					  	]
				  },
				  chartData2:{
					  "categories": ["1月", "2月","3月", "4月","5月", "6月","7月", "8月","9月", "10月","11月", "12月"],
					  "series": [
									{name: "本年度",data: [],textSize:1},
									{name: "上年度", data: [],textSize:1}
					  			]
				  }
			   },
			  importantData:{
				  importent_project_count:'',
				  new_project_count:'',
				  continue_project_count:'',
				  investment_count:'',
				  chartData:{
					  categories: ["省级","市级", "新区级","新城级"],
					  series: [
						{   
							name: "数量",
							data: [],
						},
						]
				  },
				  chartData2:{
					  "categories": ["1月", "2月","3月", "4月","5月", "6月","7月", "8月","9月", "10月","11月", "12月"],
					  "series": [
									{name: "本年度",data: [],textSize:1},
									{name: "上年度", data: [],textSize:1}
								]
				  }
			  },
			  techData:{
				  target:{},
				  finish:{}
			  },
			  ereaData:{
				  chartDataBar:{
					  "categories": [],
					  "series": [
							{
								"name":"",
								"index": 0,
								"data": [],
								"type": "column"
							},
							{
								"name": "折线",
								"index": 1,
								"data": [],
								"type": "line",
								"color":"#cc0000",
								"textSize":10, 
								"format":'lineRaito'
							},
						]
				  },
				  chartDataPie:{
					  "categories": [],
					  "series": [
							  {
								  "data": [
									  // {
										 //  "name": "空港",
										 //  "value": 50
									  // },
									  // {
										 //  "name": "沣东",
										 //  "value": 30
									  // },
									  // {
										 //  "name": "秦汉",
										 //  "value": 20
									  // },
									  // {
										 //  "name": "泾河",
										 //  "value": 18
									  // },
									  // {
										 //  "name": "沣西",
										 //  "value": 8
									  // }
								  ]
							  }
						  ]
					  },
			  }			  
		 }
	  },
	  onLoad() {
		this.makeMonthArr(this.dateYear)  
	  	this.topChartFn(this.dateYear,this.dateMonth)
	  },
	  methods:{
		  topChartFn(year,month){
			  this.getStandardChart(year,month);
			  this.getAdvancedCompanyChart(year,month);
			  this.getIndustryChart(year,month);
			  this.getImportantChart(year,month);
			  this.getTechInfo(year,month);
			  this.getEreaInfos(year,month,1);
		  },
		  makeMonthArr(y){
			  this.arrayMonth = [];
			  if(y == new Date().getFullYear()){
				  let length = new Date().getMonth() + 1;
				  for(let i = 1 ; i <= length; i++){
					  this.arrayMonth.push(i)
				  }
				  this.dateMonth = length;
			  }else {
				  this.arrayMonth = ["1", "2","3", "4","5", "6","7", "8","9", "10","11", "12"]
			  }
			  this.topChartFn(this.dateYear,this.dateMonth)
		  },
		  getStandardChart(y,m){
			  let md5Sign = md5(
			    "method=" +
			      "stat" +
			      "&timestamp=" +
			      getApp().globalData.globalTimestamp +
			      "&secret=" +
			      getApp().globalData.secret
			  );
			  let url =
			    getApp().globalData.shareUrl +
			    "api/api.php" +
			    "?method=stat&action=standard_target&timestamp=" +
			    getApp().globalData.globalTimestamp +
			    "&sign=" +
			    md5Sign;
			  uni.request({
			    url: url,
			    method: "POST",
			    header: {
			      "content-type": "application/x-www-form-urlencoded",
			    },
			    data: {
			       year:y,
			       month:m,
			    },
			    success: (res) => {
			      if (res.data.code === 200) {
				   let targetData = [],targetData1 = [],finishData = [],finishData1 = [],targetRatio1 = '',targetRatio2 = '';
				   this.standard_sized_count = res.data.data.standard_sized_count || '-';
				   this.standard_sized_increase_ratio = res.data.data.standard_sized_increase_ratio || '-';
				   this.advanced_count = res.data.data.advanced_count || '-';
				   this.advanced_increase_ratio = res.data.data.advanced_increase_ratio || '-';
				   if(res.data.data.target.length){
					   res.data.data.target.forEach((item,index)=>{
						   if(item.source === '2'){
							   targetRatio2 = Number(item.increase_ratio) || 0
						   }
						   if(item.source === '1'){
							  targetRatio1 = Number(item.increase_ratio) || 0					 
						   }
						   if(item.source !== '0'){
							   targetData.push(Number(item.increase_balance))
							   targetData1.push(Number(item.increase_ratio))
						   }
					   })
				   }
				   if(res.data.data.finish.length){
					    res.data.data.finish.forEach((item,index)=>{
						   if(item.source === '2'){
							   let dataObj = {
								   value:Number(item.increase_ratio),
								   color:Number(item.increase_ratio) > targetRatio2 ? '#68d889' : '#cc0000'
							   }
							   finishData.push(Number(item.increase_balance))
							   finishData1.push(dataObj)
						   }
						   if(item.source === '1'){
							   let dataObj = {
								   value:Number(item.increase_ratio),
								   color:Number(item.increase_ratio) > targetRatio1 ? '#68d889' : '#cc0000'
							   }
							   finishData.push(Number(item.increase_balance))
							   finishData1.push(dataObj)
						   }
					   })
				   }
				   this.chartData.series[0].data = targetData1.reverse()
				   this.chartData.series[0].otherData = targetData.reverse()
				   this.chartData.series[1].data = finishData1.reverse()
				   this.chartData.series[1].otherData = finishData.reverse()
			      }
			    },
			    fail: () => {
			      console.log("连接失败");
			    },
			  });
		  },
		  getAdvancedCompanyChart(y,m){
			  let md5Sign = md5(
				"method=" +
				  "stat" +
				  "&timestamp=" +
				  getApp().globalData.globalTimestamp +
				  "&secret=" +
				  getApp().globalData.secret
			  );
			  let url =
				getApp().globalData.shareUrl +
				"api/api.php" +
				"?method=stat&action=advanced_company&timestamp=" +
				getApp().globalData.globalTimestamp +
				"&sign=" +
				md5Sign;
			  uni.request({
				url: url,
				method: "POST",
				header: {
				  "content-type": "application/x-www-form-urlencoded",
				},
				data: {
				   year:y,
				   month:m,
				},
				success: (res) => {
				  if (res.data.code === 200) {
					  let categoriesList = [],balanceList = [],lineBalanceList = [], lineLast = [];
					  res.data.data.company_list.forEach((item)=>{
						categoriesList.push(item.short_name);
						balanceList.push(item.balance)
					  })
					  balanceList = balanceList.map((item)=>{ return (Number(item)/10000).toFixed(2)});
					 //  res.data.data.month_list.forEach((item)=>{
						// lineBalanceList.push(item.balance);
						// lineLast.push(item.last_balance)
					 //  })
					 for(let key in res.data.data.month_list ){
						 lineBalanceList.push(res.data.data.month_list[key].balance)
						 lineLast.push(res.data.data.month_list[key].last_balance)
					 }
					    this.chartData1.categories = categoriesList;
						this.chartData1.series[0].data = balanceList;
						this.chartData2.series[0].data = lineBalanceList;
						this.chartData2.series[1].data = lineLast;
				  }
				},
				fail: () => {
				  console.log("连接失败");
				},
			  });
		  },
		  industryFilter(data){
			  let targetData = [],targetData1 = [],finishData = [],finishData1 = [],lineBalanceList = [], lineLast = [],storeRatio = '',techRatio = '';
			  this.industryData.discuss_project_count = data.discuss_project_count || '-';
			  this.industryData.industrial_investment_project_count = data.industrial_investment_project_count || '-';
			  this.industryData.instore_project_count = data.instore_project_count || '-';
			  if(data.target.length){
				   let targetList = data.target;
				   targetList.forEach((item)=>{
					   if(item.source === '3'){
							storeRatio = Number(item.increase_ratio) || 0
					   }
					   if(item.source === '4'){
							techRatio = Number(item.increase_ratio) || 0					 
					   }
					   if(item.source !== '0'){
						   targetData.push(Number(item.increase_balance))
						   targetData1.push(Number(item.increase_ratio))
					   }
				   })
			  }
			  if(data.finish.length){
					let finishList = data.finish;
					let dataStoreObj = {
					   value:Number(finishList[0].store_ratio),
					   color:Number(finishList[0].store_ratio) > storeRatio ? '#68d889' : '#cc0000'
					}
					finishData1.push(dataStoreObj)
					let dataTechObj = {
					   value:Number(finishList[0].tech_ratio),
					   color:Number(finishList[0].tech_ratio) > techRatio ? '#68d889' : '#cc0000'
					}
					finishData1.push(dataTechObj)
					finishData = [Number(finishList[0].store_balance),Number(finishList[0].tech_balance)];
			  }
			  for(let key in data.month_list ){
					 lineBalanceList.push(data.month_list[key].balance)
					 lineLast.push(data.month_list[key].last_balance)
			  }
			  this.industryData.chartData.series[0].data = targetData1
			  this.industryData.chartData.series[0].otherData = targetData
			  this.industryData.chartData.series[1].data = finishData1
			  this.industryData.chartData.series[1].otherData = finishData
			  this.industryData.chartData2.series[0].data = lineBalanceList;
			  this.industryData.chartData2.series[1].data = lineLast;
		  },
	      getIndustryChart(y,m){
				  let md5Sign = md5(
				    "method=" +
				      "stat" +
				      "&timestamp=" +
				      getApp().globalData.globalTimestamp +
				      "&secret=" +
				      getApp().globalData.secret
				  );
				  let url =
				    getApp().globalData.shareUrl +
				    "api/api.php" +
				    "?method=stat&action=industry&timestamp=" +
				    getApp().globalData.globalTimestamp +
				    "&sign=" +
				    md5Sign;
				  uni.request({
				    url: url,
				    method: "POST",
				    header: {
				      "content-type": "application/x-www-form-urlencoded",
				    },
				    data: {
				       year:y,
				       month:m,
				    },
				    success: (res) => {
				      if (res.data.code === 200) {
		                   this.industryFilter(res.data.data)
				      }
				    },
				    fail: () => {
				      console.log("连接失败");
				    },
				  });
		  },
		  importantFilter(data){
			  let lineBalanceList = [], lineLast = [];
			  this.importantData.importent_project_count = data.importent_project_count || '-';
			  this.importantData.new_project_count = data.new_project_count|| '-';
			  this.importantData.continue_project_count = data.continue_project_count|| '-';
			  this.importantData.investment_count = data.investment_count ? (data.investment_count/10000).toFixed(2):0
			  if(data.province_level_count == 0 && data.city_level_count == 0 && data.area_level_count == 0 && data.new_city_level_count == 0){
				 this.importantData.chartData.series[0].data = []  
			  }else{
				 this.importantData.chartData.series[0].data = [data.province_level_count,data.city_level_count,data.area_level_count,data.new_city_level_count]
			  }
			  //this.importantData.chartData.series[0].data = [5,16,21]
			  for(let key in data.month_list ){
				 lineBalanceList.push(data.month_list[key].balance)
				 lineLast.push(data.month_list[key].last_balance)
			  }
			  this.importantData.chartData2.series[0].data = lineBalanceList;
			  this.importantData.chartData2.series[1].data = lineLast;
		  },
		  getImportantChart(y,m){
			  let md5Sign = md5(
			    "method=" +
			      "stat" +
			      "&timestamp=" +
			      getApp().globalData.globalTimestamp +
			      "&secret=" +
			      getApp().globalData.secret
			  );
			  let url =
			    getApp().globalData.shareUrl +
			    "api/api.php" +
			    "?method=stat&action=importent_project&timestamp=" +
			    getApp().globalData.globalTimestamp +
			    "&sign=" +
			    md5Sign;
			  uni.request({
			    url: url,
			    method: "POST",
			    header: {
			      "content-type": "application/x-www-form-urlencoded",
			    },
			    data: {
			       year:y,
			       month:m,
			    },
			    success: (res) => {
			      if (res.data.code === 200) {
			           this.importantFilter(res.data.data)
			      }
			    },
			    fail: () => {
			      console.log("连接失败");
			    },
			  });
		  },
		  getTechInfo(y,m){
			  let md5Sign = md5(
			    "method=" +
			      "stat" +
			      "&timestamp=" +
			      getApp().globalData.globalTimestamp +
			      "&secret=" +
			      getApp().globalData.secret
			  );
			  let url =
			    getApp().globalData.shareUrl +
			    "api/api.php" +
			    "?method=stat&action=tech_infos&timestamp=" +
			    getApp().globalData.globalTimestamp +
			    "&sign=" +
			    md5Sign;
			  uni.request({
			    url: url,
			    method: "POST",
			    header: {
			      "content-type": "application/x-www-form-urlencoded",
			    },
			    data: {
			       year:y,
			       month:m,
			    },
			    success: (res) => {
			      if (res.data.code === 200) {
					  this.techData.target = res.data.data.target;
					  this.techData.finish = res.data.data.finish;
			      }
			    },
			    fail: () => {
			      console.log("连接失败");
			    },
			  });
		  },
		  ereaInfoFilter(data){
			  let categoriesList = [], barData = [], pieData = [],lineData = [];
			  for(let key in data.area_list ){
				     if(data.area_list[key].name !== '西咸新区'){
						data.area_list[key].name =  (data.area_list[key].name).substr(0,2)
					 }
				     categoriesList.push(data.area_list[key].name);
					 barData.push(Number(data.area_list[key].value));
					 if(data.area_list[key].ratio){
						lineData.push(Number(data.area_list[key].ratio)) 
					 }
					 pieData.push(data.area_list[key])
			  }
			  this.ereaData.chartDataBar.categories = categoriesList;
			  this.ereaData.chartDataPie.categories = categoriesList;
			  this.ereaData.chartDataBar.series[0].name =  "各新城" + this.sortSelect;
			  this.ereaData.chartDataBar.series[0].data = barData;
			  // this.ereaData.chartDataBar.series[1].name =  "各新城" + this.sortSelect;
			  this.ereaData.chartDataBar.series[1].data = lineData;
			  console.log(this.ereaData.chartDataBar)
			  pieData.forEach((item)=>{item.value = Number(item.value)})
			  this.ereaData.chartDataPie.series[0].data =pieData.filter((item)=>{return item.name !== '西咸新区'});
		  },
		  getEreaInfos(y,m,select){
			  let md5Sign = md5(
			    "method=" +
			      "stat" +
			      "&timestamp=" +
			      getApp().globalData.globalTimestamp +
			      "&secret=" +
			      getApp().globalData.secret
			  );
			  let url =
			    getApp().globalData.shareUrl +
			    "api/api.php" +
			    "?method=stat&action=erea_infos&timestamp=" +
			    getApp().globalData.globalTimestamp +
			    "&sign=" +
			    md5Sign;
			  uni.request({
			    url: url,
			    method: "POST",
			    header: {
			      "content-type": "application/x-www-form-urlencoded",
			    },
			    data: {
			       year:y,
			       month:m,
				   source:select
			    },
			    success: (res) => {
			      if (res.data.code === 200) {
			  			this.ereaInfoFilter(res.data.data)
			      }
			    },
			    fail: () => {
			      console.log("连接失败");
			    },
			  });
		  },
		  bindDateChange(e){
			   this.dateYear = e.target.value
			   this.makeMonthArr(e.target.value);
			   
		  },
		  bindDateMonthChange(e){
			   this.dateMonth = this.arrayMonth[e.target.value]
			   this.topChartFn(this.dateYear,this.dateMonth)
		  },
		  bindDateCityChange(e){
			  this.sortSelect = this.arrayNewCity[e.target.value]
			  let dataSelect = Number(e.target.value) + 1;
			  this.getEreaInfos(this.dateYear,this.dateMonth,dataSelect)
		  },
		  goScale(title,techType){
			  uni.navigateTo({
			  	url:'./largeScale/index?title=' + title + '&year=' + this.dateYear + '&month=' + this.dateMonth + '&tech=' + techType
			  })
		  },
		  goProject(idx){
			  uni.navigateTo({
			  	url:'./projectPage/index?idx=' + idx + '&year=' + this.dateYear + '&month=' + this.dateMonth
			  })
		  },
		  goImportant(idx){
			  uni.navigateTo({
				url:'./importantPage/index?idx=' + idx
			  })
		  }
	  }
	};
</script>

<style>
	.content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.title-date-box {
		margin-top: 10px;
		border-bottom: 1px solid #d7d7d7;
		padding-bottom: 10px;
	}
	.charts-box-title{
		width: 100%;
		height: 100rpx;
	}
	.charts-box {
		width: 100%;
		height: 600rpx;
	}
	.picker-class {
		border-radius: 10rpx;
		padding: 10rpx;
		width: 180rpx;
		font-size: 28rpx;
		background: #f5f5f5;
		margin-left: 20rpx;
	}
	.picker-class image {
		width: 26rpx;
		height: 26rpx;
	}
	.block-box-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
		border-radius: 10rpx;
		width: 46%;
		height: 140rpx;
		color: #fff;
		background-color:#F2F2F2;
	}
	.title-second {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		/* font-weight: 550; */
	}
	.pos-font {
		position: absolute;
		color: rgba(255, 255, 255, 0.8);
		font-size: 20rpx;
		text-align: center;
		width: 110rpx;
		font-weight: 600;
	}
	.font-size30 {
		font-size: 30rpx;
	}
</style>