shuju_ui/qs_zhaoshang/pages/zdpages/count/xmproject.vue

<template>
	<view class="qsfinbox">
		<view class="zhanline"></view>
		<!-- 全市投资 -->
		<view class="countbox">
			<!-- 筛选 -->
			<!-- :start="startDate" :end="endDate" -->
			<!-- <view class="alldata flexc">
				<picker  class="flexc" :value="alldate"  @change="bindDateChange" :fields="fields">
				<view class="alldatain f15 cofe f500" >{{alldate||timetxt}}</view>
				</picker>
				<image :src="upimg"></image>
			</view> -->
			<!-- 折线图 -->
			<view class="qsfcharb">
				<qiun-data-charts type="line" :chartData="chartDatab" :opts='optsb' :ontouch="true"></qiun-data-charts>
			</view>
		</view>
		<!-- 项目产业类型进展列表 -->
		<view class="countbox">
			 <view class="flexc mb16">
				<view class="titline"></view>
				<view class="f17 c34 fw">项目产业类型进展列表</view>
			</view>
			<view class="tablebox">
				<table border='0' class='table'>
					<thead class='thead'> 
						<tr class="tr_one">  
							<th style="width: 300rpx;" >产业类型</th>
							<th style="width: 200rpx;">年度计划投资(万元)</th>
							<th style="width: 200rpx;">纳统项目完成投资(万元)</th>
						</tr>
					</thead>
					
					<tbody class="tbody">
						<tr v-for="(item,index) in list" :key="index">
							<td style="width: 300rpx;" >{{item.name}}</td>
							<td style="width: 200rpx;" class='co1'>{{item.a}}10</td>
							<td style="width: 200rpx;" class='co2'>{{item.b}}10</td>
						</tr>
						<div class="shax" v-if="list.length>0">
							{{wtdt}}
						</div>
						<div class="shax" v-else><span>暂无数据</span></div>
					</tbody>
						
				</table>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabidx:0,
				alldate:'',
				timetxt:'全部',
				upimg:require("@/static/images/index/up.png"),
				tablist:[{tit:'全市投资金额',val:0},{tit:'全市投资完成情况',val:1}],
				chartDataa:{
					"categories": [],
					series: [
					        {
					            data: [{"name":"环保问题","value":50,labelShow:false},{"name":"土地问题","value":30,labelShow:false},{"name":"其它问题","value":20,labelShow:false},{"name":"投资问题","value":18,labelShow:false},{"name":"土地问题","value":8,labelShow:false},{"name":"环保问题","value":50,labelShow:false},{"name":"土地问题","value":30,labelShow:false},{"name":"其它问题","value":20,labelShow:false},{"name":"投资问题","value":18,labelShow:false},{"name":"土地问题","value":8,labelShow:false},{"name":"环保问题","value":50,labelShow:false},{"name":"土地问题","value":30,labelShow:false},{"name":"其它问题","value":20,labelShow:false},{"name":"投资问题","value":18,labelShow:false},{"name":"土地问题","value":8,labelShow:false},]
					          }
					        ],
					"enableScroll":false
				},
				optsa: {
					padding:[0,0,0,0],
					title: {
					    name: "315415.61",
					    fontSize: 24,
					    color: "#FC3500"
					  },
					  legend:{
					  	// show: false,
						position: "bottom",
						padding: 0,
						margin: 0,
					  },
					  // 副标题
					  subtitle: {name: "累计投资(万元)",fontSize: 13,color: "#666666"},
					  extra: {
						ring:{border: false,ringWidth: 20,},
					  }
				},
				optsb:{
					enableScroll: true,
					xAxis:{
						itemCount: 5,
						// format:'overwarp',
						axisLabel: {
						    interval: 0, // 设置数据间隔
						},
					},
					legend: {
					    show: true,
					      position: "top",
					      float: "center",
					      padding: 15,
					      margin:15,
					 },
				},
				chartDatab:{
					categories: ["建设新型","建设现代","建设文化","脱贫攻坚","生态环境保护修…","工业园"],
					color:["#FE3155","#419CFF"],
					series: [
					  {
					    name: "年度计划投资(万元)",
					    data: [35,8,25,37,4,20],
						color:'#FE3155',
					  },
					  {
					    name: "纳统项目完成投资(万元)",
					    data: [70,40,65,100,44,68],
						color:'#419CFF',
					  },
					],
				},	
				list:[{'name':'单位名称',}],
				wtdt:''
			}
		},
		onLoad() {
			
		},
		methods:{
			goCheck(){
				console.log(1)
			},
			bindDateChange(e){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.countbox{padding: 40rpx 24rpx;
	.titline{width: 8rpx;height: 46rpx;background: #FC7300;margin-right: 20rpx;}
	.ct_num{display: flex;flex-wrap: wrap;
		.ct_numa{width: 33.33%;display: flex;padding-right: 10rpx;min-height: 160rpx;padding-bottom: 40rpx;box-sizing: border-box;
			.count_cir{width: 20rpx;height: 20rpx;border-radius: 10rpx;margin-right: 14rpx;flex:0 0 auto;margin-top: 6rpx;
			&.bg1{background: #3C9BCD;}
			&.bg2{background: #10D235;}
			&.bg3{background: #D388E4;;}
			&.bg4{background: #FF5061;}
			&.bg5{background: #FF7821;}
			&.bg6{background: #2529EA;}
			&.bg7{background: #50A0FF;}
			&.bg8{background: #60CB6D;}
			&.bg9{background: #E76677;}
			&.bg10{background: #F69702;}
			&.bg11{background: #975FEF;}
			}
			.ct_numb{display: flex;flex: 1;flex-direction: column;justify-content: space-between;
				.tit{font-size: 26rpx;font-weight: bold;color: #343434;margin-bottom: 20rpx;}
			}
		}
	}
	.qsfchara{width: 100%;height: 900rpx;
		.qsfcharat{display: flex;flex-wrap: wrap;
		.qsfchta{display: flex;align-items: center;width: 25%;margin-bottom: 16rpx;padding-right: 6rpx;box-sizing: border-box;}
			.qsfcir{width: 16rpx;height: 16rpx;background: #0041B7;border-radius: 50%;margin-right: 16rpx;}
			.tit{font-size: 30rpx;font-weight: 500;color: #343434;}
		}
	}
	.qsfcharb{width: 100%;}
}
// 表格
.tablebox{padding:10rpx 0rpx 0;flex: 1;display: flex;flex-direction: column;overflow: hidden;
	 th{padding:10rpx 8rpx;box-sizing: border-box;font-size: 28rpx;color: #343434;font-weight: bold;text-align: center;}
	}
	.table{border-spacing: 0;width: 700rpx;display: flex;flex-direction: column;overflow: hidden;margin: 0 auto;}
	.thead{width: 100%;background-color: #F1F1F1;flex: 0 0 auto;border-radius: 10rpx;
	
	}
	.tbody {flex: 1;overflow: auto;padding-bottom: 120rpx;}
	.tbody td{height: 120rpx;box-sizing: border-box;padding: 24rpx 14rpx;font-weight: 500;color: #343434;font-size: 28rpx;border-bottom: 2rpx solid #CDCDCD;text-align: center;word-break: break-all;
		&.co1{color: #FE3155;}
		&.co2{color:#1686F6;}
	
	}
	
	// 选择
	.alldata{padding: 20rpx;height: 80rpx;box-sizing: border-box;
		image{width: 22rpx;height: 16rpx;margin-left: 14rpx;}
		.alldatain{min-width: 124rpx;}
	}	
</style>