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

<template>
	<view class="qsfinbox">
		<view class="pfixed">
			<tab-list :tablist='tablist' :tabidx='tabidx' :height='90' @getCheck="goCheck"></tab-list>
		</view>
		<view class="zhanline"></view>
		<!-- 全市投资 -->
		<view class="countbox" v-if="tabidx==0">
			<view class="flexc mb16">
				<view class="titline"></view>
				<view class="f17 c34 fw">全市投资金额</view>
			</view>
			<view class="qsfchara">
				<qiun-data-charts type="ring" :chartData="chartDataa" :opts='optsa'></qiun-data-charts>
				<!-- 图例 -->
				<!-- <view class="qsfcharat">
					<view class="qsfchta">
						<view class="qsfcir"></view>
						<view class="tit">梅城镇</view>
					</view>
				</view> -->
			</view>
			<!-- 折线图 -->
			<view class="qsfcharb">
				<qiun-data-charts type="line" :chartData="chartDatab" :opts='optsb' :ontouch="true"></qiun-data-charts>
				<!-- 图例 -->
				<!-- <view class="qsfcharat">
				</view> -->
			</view>
		</view>
		<!-- 全市投资完成情况 -->
		<view class="tablebox" v-if="tabidx==1">
			<table border='0' class='table'>
				<thead class='thead'> 
					<tr class="tr_one">  
					<!-- 351 -->
						<th style="width: 210rpx;" >汇报单位</th>
						<th style="width: 170rpx;">项目总投资 (万元)</th>
						<th style="width: 160rpx;">年度计划投资 (万元)</th>
						<th style="width: 160rpx;">纳统项目完成投资 (万元)</th>
						<!-- <th style="width: 115rpx;">累计投资(万元)</th>
						<th style="width: 100rpx;">投资占比(%)</th> -->
					</tr>
				</thead>
				
				<tbody class="tbody">
					<tr v-for="(item,index) in list" :key="index">
						<td style="width: 210rpx;" >{{item.name}}</td>
						<td style="width: 170rpx;">{{item.a}}10</td>
						<td style="width: 160rpx;" >{{item.b}}10</td>
						<td style="width: 160rpx;" >{{item.c}}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>
</template>

<script>
	import tabList from "@/components/toptab/tab.vue"
	export default{
		components:{tabList},
		data(){
			return{
				tabidx:0,
				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":50,labelShow:false},{"name":"黄铺镇","value":30,labelShow:false},{"name":"水吼镇","value":20,labelShow:false},{"name":"余井镇","value":18,labelShow:false},{"name":"梅城镇","value":50,labelShow:false},{"name":"王河镇","value":30,labelShow:false},{"name":"官庄镇","value":20,labelShow:false},{"name":"黄泥镇","value":18,labelShow:false},{"name":"黄柏镇","value":50,labelShow:false},{"name":"黄铺镇","value":30,labelShow:false},{"name":"水吼镇","value":20,labelShow:false},{"name":"余井镇","value":18,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,
					},
					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:''
			}
		},
		methods:{
			goCheck(e){
				this.tabidx=e
				console.log(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
.qsfinbox{padding-top: 90rpx;}
.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 24rpx 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;}
</style>