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>18</view>
			 </view>
			 <view class="block-box-content" style="width:30%;background-color: #9776F2;" @click="goProject(1)">
				 <view>技改项目</view>
				 <view>2</view>
			 </view>
			 <view class="block-box-content" style="width:30%;background-color: #51A9E3;" @click="goProject(2)">
				 <view>在谈项目</view>
				 <view>2</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="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="goImportant(0)">
	    		 <view>重点项目</view>
	    		 <view>18</view>
	    	 </view>
	    	 <view class="block-box-content" style="width:30%;background-color: #9776F2;" @click="goImportant(1)">
	    		 <view>新建/续建</view>
	    		 <view>13/8</view>
	    	 </view>
	    	 <view class="block-box-content" style="width:30%;background-color: #51A9E3;">
	    		 <view>总投资(万元)</view>
	    		 <view>2256457</view>
	    	 </view>
	    </view>
	    <qiun-title-bar title="重点项目级别分布"/>
	    <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="demotype" :opts="{fontColor:'#666',xAxis:{boundaryGap:'justify'}}" :chartData="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('科技创新企业')">
	    		 <view>国家高新技术企业</view>
	    		 <view>8/<text style="color: red;">5</text></view>
	    	 </view>
	    	 <view class="block-box-content" style="width:47%;color: #555;" @click="goScale('科技创新企业')">
	    		 <view>科技型中小企业</view>
	    		 <view>70/<text style="color: red;">50</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;">
		   				 <view>累计研发投入规上工业企业</view>
		   				 <view>7/<text style="color: red;">6</text></view>
		   </view>
		   <view class="block-box-content" style="width:97%;color: #555;">
		   				 <view>累计研发投入规上服务业企业</view>
		   				 <view>2/<text style="color: red;">1</text></view>
		    </view>
		    <view class="block-box-content" style="width:97%;color: #555;">
		   				 <view>累计研发投入占主营业务5%的企业</view>
		   				 <view>4/<text style="color: red;">4</text></view>
		   </view>
		   <view class="block-box-content" style="width:97%;color: #555;">
		   				 <view>累计研发投入500万以上的企业</view>
		   				 <view>2/<text style="color: red;">2</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="chartData1" background="#4C4C4C"/>
		</view>
		<qiun-title-bar title="各新城规上工业企业数量占比"/>
		<view class="charts-box" style="margin-bottom: 20rpx;">
			<qiun-data-charts   type="pie" :chartData="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}
					]
			  },
			  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)
		  },
		  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("连接失败");
				},
			  });
		  },
		  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(){
			  this.sortSelect = this.arrayNewCity[e.target.value]
		  },
		  goScale(title){
			  uni.navigateTo({
			  	url:'./largeScale/index?title=' + title
			  })
		  },
		  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>