添加首页样式

App.vue

@@ -90,6 +90,7 @@ export default {
 <style>
 /*每个页面公共css */
 @import url("/components/gaoyia-parse/parse.css");
+@import '@/common/uni.css';
 page {
 	height: 100%;
 }

common/uni.css

@@ -0,0 +1,246 @@
+/* 全局公共样式 */
+
+body,
+html {
+	-webkit-user-select: auto;
+	user-select: auto;
+}
+
+/* #ifdef H5 */
+
+uni-main {
+	position: relative;
+	background-color: #f5f5f5;
+}
+
+.uni-mask+.uni-left-window, .uni-mask+.uni-right-window{
+	position: fixed;
+}
+
+.uni-container .uni-forms {
+	padding: 15px;
+	max-width: 460px;
+}
+
+/* #endif */
+
+/* #ifndef H5 */
+.uni-nav-menu {
+	height: 100vh;
+}
+/* #endif */
+
+.pointer {
+	cursor: pointer;
+}
+
+.uni-top-window {
+	z-index: 998;
+	overflow: visible;
+}
+
+.uni-tips {
+	font-size: 12px;
+	color: #666;
+}
+
+/* 容器 */
+.uni-container {
+	padding: 15px;
+	box-sizing: border-box;
+}
+
+/* 标题栏 */
+.uni-header {
+	padding: 0 15px;
+	display: flex;
+	height: 55px;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px #f5f5f5 solid;
+}
+
+.uni-title {
+	margin-right: 10px;
+	font-size: 16px;
+	font-weight: 500;
+	color: #333;
+}
+
+.uni-sub-title {
+	margin-top: 3px;
+	font-size: 14px;
+	color: #999;
+}
+
+.uni-link {
+	color: #3A8EE6;
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+.uni-group {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	word-break: keep-all;
+}
+
+/* 按钮样式 */
+.uni-button-group {
+	margin-top: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.uni-button {
+	padding: 10px 20px;
+	font-size: 14px;
+	border-radius: 4px;
+	line-height: 1;
+	margin: 0;
+	box-sizing: border-box;
+	overflow: initial;
+}
+
+.uni-button+.uni-button {
+	margin-left: 10px;
+}
+
+
+.uni-button:hover,
+.uni-button:focus {
+	opacity: 0.9;
+}
+
+.uni-button:active {
+	opacity: 1;
+}
+
+.uni-button-full {
+	width: 100%;
+}
+
+/* 搜索框样式 */
+.uni-search {
+	height: 30px;
+	line-height: 30px;
+	font-size: 12px;
+	padding: 0 10px;
+	border: 1px #eee solid;
+	margin-right: 10px;
+	border-radius: 5px;
+}
+
+/* 分页容器 */
+.uni-pagination-box {
+	display: flex;
+	justify-content: center;
+	margin-top: 20px;
+}
+
+
+.uni-input-border,
+.uni-textarea-border {
+	width: 100%;
+	font-size: 14px;
+	color: #666;
+	border: 1px #e5e5e5 solid;
+	border-radius: 5px;
+	box-sizing: border-box;
+}
+
+.uni-input-border {
+	padding: 0 10px;
+	height: 35px;
+
+}
+
+.uni-textarea-border {
+	padding: 10px;
+	height: 80px;
+}
+
+.uni-disabled {
+	background-color: #F5F7FA;
+	color: #C0C4CC;
+}
+
+.uni-icon-password-eye {
+	position: absolute;
+	right: 8px;
+	top: 6px;
+	font-family: uniicons;
+	font-size: 20px;
+	font-weight: normal;
+	font-style: normal;
+	width: 24px;
+	height: 24px;
+	line-height: 24px;
+	color: #999999;
+}
+
+.uni-eye-active {
+	color: #007AFF;
+}
+
+.uni-tabs__header {
+	position: relative;
+	background-color: #f5f7fa;
+	border-bottom: 1px solid #e4e7ed;
+}
+
+.uni-tabs__nav-wrap {
+	overflow: hidden;
+	margin-bottom: -1px;
+	position: relative;
+}
+
+.uni-tabs__nav-scroll {
+	overflow: hidden;
+}
+
+.uni-tabs__nav {
+	position: relative;
+	white-space: nowrap;
+}
+
+
+.uni-tabs__item {
+	position: relative;
+	padding: 0 20px;
+	height: 40px;
+	box-sizing: border-box;
+	line-height: 40px;
+	display: inline-block;
+	list-style: none;
+	font-size: 14px;
+	font-weight: 500;
+	color: #909399;
+	margin-top: -1px;
+	margin-left: -1px;
+	border: 1px solid transparent;
+	cursor: pointer;
+}
+
+.uni-tabs__item.is-active {
+	color: #007aff;
+	background-color: #fff;
+	border-right-color: #dcdfe6;
+	border-left-color: #dcdfe6;
+}
+
+.uni-form-item-tips {
+	color: #999;
+	font-size: 12px;
+	margin-top: 3px;
+	position: absolute;
+
+}
+
+.uni-form-item-empty {
+	color: #999;
+	min-height: 36px;
+	line-height: 36px;
+}

components/qiun-title-bar/qiun-title-bar.vue

@@ -0,0 +1,51 @@
+<template>
+	<view class="qiun-title-bar">
+		<view class="qiun-title-dot"></view>
+		<view class="qiun-title-text">{{title}}</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "title-bar",
+	props: {
+		title: {
+			type: String,
+			default: ''
+		},
+	},
+	mounted() {
+		
+	},
+	methods:{
+	}
+}
+</script>
+
+
+<style>
+	.qiun-title-bar{
+		display: flex;
+		flex-direction: row !important;
+		flex-wrap: nowrap;
+		align-items: center;
+		height: 40px;
+	}
+	
+	.qiun-title-dot {
+		border-radius: 10px;
+		background-color: #409EFF;
+		width: 5px;
+		height: 16px;
+		margin-left: 8px;
+	}
+	
+	.qiun-title-text {
+		font-size: 17px;
+		color: #666666;
+		margin-left: 8px;
+		line-height: 22px;
+		height: 22px;
+		font-weight: bold;
+	}
+</style>

pages/metrics/index.vue

@@ -1,19 +1,147 @@
 <template>
 	<view class="content-box">
-		<view class="charts-box-title">
-			<qiun-title-bar title="2021年规上工业任务目标"/>
+		<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" style="margin:20rpx 0 20rpx 0">
+		<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>
 
@@ -21,6 +149,11 @@
 	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: [
@@ -38,13 +171,53 @@
 				    ]
 			  },
 			  chartData2:{
-				  "categories": ["1月", "2月","3月", "4月","5月", "6月","7月", "8月","9月", "10月","11月", "12月",],
+				  "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>
@@ -53,7 +226,12 @@
 	.content-box {
 		display: flex;
 		flex-direction: column;
-		 flex: 1;
+		flex: 1;
+	}
+	.title-date-box {
+		margin-top: 10px;
+		border-bottom: 1px solid #d7d7d7;
+		padding-bottom: 10px;
 	}
 	.charts-box-title{
 		width: 100%;
@@ -63,4 +241,28 @@
 		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>