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-evenly;height: 340rpx;">
			 <view class="block-box-content" style="background-color: #77AFCA;" @click="goScale('规上工业企业')">
				 <view>规上工业企业</view>
				 <view>{{standard_sized_count}}</view>
			 </view>
			 <view class="block-box-content" style="background-color: #A5C9D3;">
				 <view>工业增加值增速</view>
				 <view>同比增长{{standard_sized_increase_ratio}}%</view>
			 </view>
			 <view class="block-box-content" style="background-color: #8D7E95;" @click="goScale('先进制造业企业')">
				 <view>先进制造业</view>
				 <view>{{advanced_count}}</view>
			 </view>
			 <view class="block-box-content" style="background-color: #C1ABBC;">
				 <view>先进制造业总产值</view>
				 <view>同比增长{{advanced_increase_ratio}}%</view>
			 </view>
		</view>
		<qiun-title-bar title="2021年规上工业任务目标"/>
		<view class="charts-box">
		    <qiun-data-charts type="bar"   background="#4C4C4C" :opts="{xAxis:{max:40},extra:{bar:{linearType:'custom',barBorderCircle:true}}}" :chartData="chartData"/>
		</view>
		<qiun-title-bar title="先进制造业产值(亿元)"/>
		<view class="charts-box">
		    <qiun-data-charts  type="column"  :chartData="chartData1" background="#4C4C4C"/>
		</view>
		<qiun-title-bar title="工业产值"/>
		<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>在库项目</view>
				 <view>{{industryData.instore_project_count}}</view>
			 </view>
			 <view class="block-box-content" style="width:30%;background-color: #9776F2;" @click="goProject(1)">
				 <view>技改项目</view>
				 <view>{{industryData.industrial_investment_project_count}}</view>
			 </view>
			 <view class="block-box-content" style="width:30%;background-color: #51A9E3;" @click="goProject(2)">
				 <view>在谈项目</view>
				 <view>{{industryData.discuss_project_count}}</view>
			 </view>
		</view>
		<qiun-title-bar title="2021年工业投资任务目标"/>
		<view class="charts-box">
		    <qiun-data-charts type="bar"   background="#4C4C4C" :opts="{xAxis:{max:40},extra:{bar:{linearType:'custom',barBorderCircle:true}}}" :chartData="industryData.chartData"/>
		</view>
		<qiun-title-bar title="工业投资额"/>
		<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>重点项目</view>
	    		 <view>{{importantData.importent_project_count}}</view>
	    	 </view>
	    	 <view class="block-box-content" style="width:30%;background-color: #9776F2;" @click="goImportant(0)">
	    		 <view>新建/续建</view>
	    		 <view>{{importantData.new_project_count}}/{{importantData.continue_project_count}}</view>
	    	 </view>
	    	 <view class="block-box-content" style="width:30%;background-color: #51A9E3;">
	    		 <view>总投资(万元)</view>
	    		 <view>{{importantData.investment_count}}</view>
	    	 </view>
	    </view>
	    <qiun-title-bar title="重点项目级别分布"/>
	    <view class="charts-box">
	        <qiun-data-charts type="bar"   background="#4C4C4C" :opts="{extra:{bar:{linearType:'custom',barBorderCircle:true}}}" :chartData="importantData.chartData"/>
	    </view>
	    <qiun-title-bar title="工业投资额"/>
		<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:47%;color: #555;" @click="goScale('科技创新企业','high_tech')">
	    		 <view>国家高新技术企业</view>
	    		 <view>{{techData.target.high}}/<text style="color: red;">{{techData.finish.high}}</text></view>
	    	 </view>
	    	 <view class="block-box-content" style="width:47%;color: #555;" @click="goScale('科技创新企业','tech')">
	    		 <view>科技型中小企业</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: 620rpx; margin: 10rpx 0 10rpx 0;">
		   <view class="block-box-content" style="width:97%;color: #555;" @click="goScale('科技创新企业','standard_industry')">
		   				 <view>累计研发投入规上工业企业</view>
		   				 <view>{{techData.target.standard_industry}}/<text style="color: red;">{{techData.finish.standard_industry}}</text></view>
		   </view>
		   <view class="block-box-content" style="width:97%;color: #555;" @click="goScale('科技创新企业','standard_service')">
		   				 <view>累计研发投入规上服务业企业</view>
		   				 <view>{{techData.target.standard_service}}/<text style="color: red;">{{techData.finish.standard_service}}</text></view>
		    </view>
		    <view class="block-box-content" style="width:97%;color: #555;" @click="goScale('科技创新企业','rd_five_percent' )">
		   				 <view>累计研发投入占主营业务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:97%;color: #555;" @click="goScale('科技创新企业','rd_five_million')">
		   				 <view>累计研发投入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="charts-box">
			<qiun-data-charts  type="column"  :chartData="ereaData.chartDataBar" background="#4C4C4C"/>
		</view>
		<qiun-title-bar title="各新城规上工业企业数量占比"/>
		<view class="charts-box" style="margin-bottom: 20rpx;">
			<qiun-data-charts   type="pie" :chartData="ereaData.chartDataPie" 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:["1", "2","3", "4","5", "6","7", "8","9", "10","11", "12"],
			  arrayNewCity:['规上工业企业数量','工业产值及增速','工业增加值增速','工业投资及增速','工业技改及增速'],
			  sortSelect:'规上工业企业数量',
			  standard_sized_count:'',
			  standard_sized_increase_ratio:'',
			  advanced_count:'',
			  advanced_increase_ratio:'',
			  chartData:{
				categories: ["工业增加值增速", "先进制造业总产值"],
				series: [
					{   name: "目标任务",
						data: [],
						otherData:[],
						format:'moreDataShow',
						textSize:10
					},
				    {   name: "目前已完成", 
						data: [],
						otherData:[],
						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": "各新城规上工业企业数量",
								"data": [],
							}
						]
				  },
				  chartDataPie:{
					  "categories": [],
					  "series": [
							  {
								  "data": [
									  // {
										 //  "name": "空港",
										 //  "value": 50
									  // },
									  // {
										 //  "name": "沣东",
										 //  "value": 30
									  // },
									  // {
										 //  "name": "秦汉",
										 //  "value": 20
									  // },
									  // {
										 //  "name": "泾河",
										 //  "value": 18
									  // },
									  // {
										 //  "name": "沣西",
										 //  "value": 8
									  // }
								  ]
							  }
						  ]
					  },
			  }			  
		 }
	  },
	  onLoad() {
	  	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);
		  },
		  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 = [];
				   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;
				   res.data.data.target.forEach((item,index)=>{
					   if(item.source !== '0'){
						   targetData.push(Number(item.increase_balance))
						   targetData1.push(Number(item.increase_ratio))
					   }
				   })
				   res.data.data.finish.forEach((item,index)=>{
					   if(item.source !== '0'){
						   finishData.push(Number(item.increase_balance))
						   finishData1.push(Number(item.increase_ratio))
					   }
				   })
				   this.chartData.series[0].data = targetData
				   this.chartData.series[0].otherData = targetData1
				   this.chartData.series[1].data = finishData
				   this.chartData.series[1].otherData = finishData1
			      }
			    },
			    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.name);
						balanceList.push(item.balance)
					  })
					 //  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 = [];
			  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;
				   targetData = [targetList[0].store_balance,targetList[0].tech_balance];
				   targetData1 = [targetList[0].store_ratio,targetList[0].tech_ratio]
			  }else{
					targetData = [0,0];targetData1 = [0,0]
			  }
			  if(data.finish.length){
					let finishList = data.finish;
					finishData = [finishList[0].store_balance,finishList[0].tech_balance];
					finishData1 = [finishList[0].store_ratio,finishList[0].tech_ratio]
			  }else{
			  		finishData = [0,0];finishData1 = [0,0]
			  }
			  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 = targetData
			  this.industryData.chartData.series[0].otherData = targetData1
			  this.industryData.chartData.series[1].data = finishData
			  this.industryData.chartData.series[1].otherData = finishData1
			  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;
			  this.importantData.chartData.series[0].data = [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 = [];
			  for(let key in data.area_list ){
				     categoriesList.push(data.area_list[key].name);
					 barData.push(data.area_list[key].value)
					 pieData.push(data.area_list[key])
			  }
			  this.ereaData.chartDataBar.categories = categoriesList;
			  this.ereaData.chartDataPie.categories = categoriesList;
			  this.ereaData.chartDataBar.series[0].data = barData;
			  this.ereaData.chartDataPie.series[0].data = pieData;
		  },
		  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.topChartFn(this.dateYear,this.dateMonth)
		  },
		  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
			  })
		  },
		  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: 30rpx;
		border-radius: 10rpx;
		width: 45%;
		height: 140rpx;
		color: #fff;
		background-color:#F2F2F2;
	}
</style>