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>
					<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;">
				 <view>规上工业企业</view>
				 <view>21</view>
			 </view>
			 <view class="block-box-content" style="background-color: #A5C9D3;">
				 <view>工业增加值增速</view>
				 <view>同比增长3.2%</view>
			 </view>
			 <view class="block-box-content" style="background-color: #8D7E95;">
				 <view>先进制造业</view>
				 <view>6</view>
			 </view>
			 <view class="block-box-content" style="background-color: #C1ABBC;">
				 <view>先进制造业总产值</view>
				 <view>同比增长17%</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;">
				 <view>在库项目</view>
				 <view>18</view>
			 </view>
			 <view class="block-box-content" style="width:30%;background-color: #9776F2;">
				 <view>技改项目</view>
				 <view>2</view>
			 </view>
			 <view class="block-box-content" style="width:30%;background-color: #51A9E3;">
				 <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;">
	    		 <view>重点项目</view>
	    		 <view>18</view>
	    	 </view>
	    	 <view class="block-box-content" style="width:30%;background-color: #9776F2;">
	    		 <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;">
	    		 <view>国家高新技术企业</view>
	    		 <view>8/<text style="color: red;">5</text></view>
	    	 </view>
	    	 <view class="block-box-content" style="width:47%;color: #555;">
	    		 <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>
	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:'规上工业企业数量',
			  chartData:{
				categories: ["a", "b"],
				series: [
					{name: "目标任务",data: [35, 36]},
				    {name: "目前已完成", data: [18, 27]
				}]
			  },
			  chartData1:{
				  "categories": ["大志药业", "东航赛峰", "豆福源", "东方航食", "空港航食", "黎明发电"],
				  "series": [
				        {
				            "name": "先进制造业产值(亿元)",
				            "data": [1.02,.75,.83,.37,.58,.53],
				        }
				    ]
			  },
			  chartData2:{
				  "categories": ["1月", "2月","3月", "4月","5月", "6月","7月", "8月","9月", "10月","11月", "12月"],
				  "series": [
						{name: "本年度",data: [15,10,16,23,21,36,25,7,18,29,33,12]},
						{name: "上年度", data: [5,8,11,18,16,31,20,2,13,25,28,11]}
					]
			  },
			  chartDataPie:{
				  "categories": ["空港", "沣东", "秦汉", "泾河", "沣西"],
				  "series": [
				          {
				              "data": [
				                  {
				                      "name": "空港",
				                      "value": 50
				                  },
				                  {
				                      "name": "沣东",
				                      "value": 30
				                  },
				                  {
				                      "name": "秦汉",
				                      "value": 20
				                  },
				                  {
				                      "name": "泾河",
				                      "value": 18
				                  },
				                  {
				                      "name": "沣西",
				                      "value": 8
				                  }
				              ]
				          }
				      ]
				  }
		 }
	  },
	  methods:{
		  bindDateChange(e){
			   this.dateYear = e.target.value
		  },
		  bindDateMonthChange(e){
			   this.dateMonth = this.arrayMonth[e.target.value]
		  },
		  bindDateCityChange(){
			  this.sortSelect = this.arrayNewCity[e.target.value]
		  }
	  }
	};
</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>