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

<template>
	<view class="count">
		<view class="zhanline"></view>
		<view class="countbox" v-if="checkPermi(['fgw:common:xmztgk'])">
			<view class="flexc mb16">
				<view class="titline"></view>
				<view class="f17 c34 fw">项目整体概况</view>
			</view>
			<view class="ct_num">
				<view class="ct_numa">
					<view class="count_cir bg1"></view>
					<view class="ct_numb">
						<view class="tit">项目库总数(个)</view>
						<view class="f22 fw zco3c">{{census.xmzs||0}}</view>
					</view>
				</view>
				<!-- <view class="ct_numa">
					<view class="count_cir bg2"></view>
					<view class="ct_numb">
						<view class="tit">已开工项目数(个)</view>
						<view class="f22 fw zco1d">156</view>
					</view>
				</view>
				<view class="ct_numa">
					<view class="count_cir bg3"></view>
					<view class="ct_numb">
						<view class="tit">开工率(%)</view>
						<view class="f22 fw zcod3">156</view>
					</view>
				</view> -->
				<view class="ct_numa">
					<view class="count_cir bg2"></view>
					<view class="ct_numb">
						<view class="tit">项目总投资(万元)</view>
						<view class="f22 fw zco1d">{{census.xmztz||0}}</view>
					</view>
				</view>
				<view class="ct_numa">
					<view class="count_cir bg3"></view>
					<view class="ct_numb">
						<view class="tit">年度计划投资(万元)</view>
						<view class="f22 fw zcod3">{{census.jstz||0}}</view>
					</view>
				</view>
				<view class="ct_numa">
					<view class="count_cir bg4"></view>
					<view class="ct_numb">
						<view class="tit">纳统项目完成投资(万元)</view>
						<view class="f22 fw zcof5">{{census.nttz||0}}</view>
					</view>
				</view>
			</view>
			<view class="ct_btn">
				<view class="ct_btna bg1" @click="toQsFn">
					<image :src="qsimg" class="limg"></image>
					<view class="tit">全市投资完成情况</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="ct_btna bg2" @click="toXmFn">
					<image :src="xmimg" class="limg imga"></image>
					<view class="tit">项目产业进展情况</view>
					<image :src="rimg" class="rimg"></image>
				</view>
			</view>
		</view>
		<view class="border"></view>
		<!-- 本周进度 -->
		<view class="countbox" v-if="checkPermi(['fgw:common:hbjd'])">
			<view class="mb16 flexcj">
				<view class="flexc flex0">
					<view class="titline"></view>
					<view class="f17 c34 fw">本月汇报进度</view>
				</view>
				<view class='flexc home_morer' @click="getMoreFn">查看更多
					<image :src="mrimg"></image>
				</view>
			</view>
			<!--  -->
			<view class="charta">
				<view class="chartal">
					<qiun-data-charts type="arcbar" :chartData="chartDataa" :opts="optsa" :ontouch="true"></qiun-data-charts>
				</view>
				<view class="chartar">
					<view class="f15 fw c34 mb12">未汇报项目<text class="zcofc">{{hbjdcensus.whb}}</text>个</view>
					<view class="f15 fw c34 mb16">已汇报项目<text class="zco1d">{{hbjdcensus.yhb}}</text>个</view>
					<view class="chartar_btn" v-if="checkPermi(['fgw:sytj:sycb'])" @click="getCuiFn">一键催报</view>
				</view>
				
			</view>
		</view>

		<!-- 问题类型统计 -->
		<!-- <view class="border"></view> -->
		<!-- <view class="countbox">
			<view class="mb16 flexcj">
				<view class="flexc flex0">
					<view class="titline"></view>
					<view class="f17 c34 fw">问题类型统计</view>
				</view>
			</view>
			<view class="chartb">
					<qiun-data-charts type="pie" :chartData="chartDatab" :opts='optsb'></qiun-data-charts>

				<view class="ct_num chartbf">
					<view class="ct_numa">
						<view class="count_cir bg7"></view>
						<view class="ct_numb">
							<view class="tit">环保问题</view>
							<view class="f22 fw zcobg7">12</view>
						</view>
					</view>
					<view class="ct_numa">
						<view class="count_cir bg8"></view>
						<view class="ct_numb">
							<view class="tit">土地问题</view>
							<view class="f22 fw zcobg8">12</view>
						</view>
					</view>
					<view class="ct_numa">
						<view class="count_cir bg9"></view>
						<view class="ct_numb">
							<view class="tit">其它问题</view>
							<view class="f22 fw zcobg9">12</view>
						</view>
					</view>
					<view class="ct_numa">
						<view class="count_cir bg10"></view>
						<view class="ct_numb">
							<view class="tit">投资问题</view>
							<view class="f22 fw zcobg10">12</view>
						</view>
					</view>
					<view class="ct_numa">
						<view class="count_cir bg11"></view>
						<view class="ct_numb">
							<view class="tit">土地问题</view>
							<view class="f22 fw zcobg7">12</view>
						</view>
					</view>
				</view>
				
			</view>
		</view> -->
		<footers v-if="isfootflag" :footlist="footlist" :footerindex="footerindex" :color_checked="color_checked" :color_nochecked="color_nochecked" :isHomeIndex="true"></footers>
	</view>
</template>

<script>
	import footers from '@/components/footer/footer.vue'
	import {getCommonxmztgk,getCommonhbjd,getjdapsycb} from "@/api/zdwork/index.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{footers},
		data(){
			return{
				footlist:[
					{module:'zdhome',title:'首页',icon_checked:require('@/static/images/new/tabbar/home_.png'),icon_nochecked:require('@/static/images/new/tabbar/home.png')},
								{module:'zdcount',title:'统计分析',icon_checked:require('@/static/images/new/tabbar/tong_.png'),icon_nochecked:require('@/static/images/new/tabbar/tong.png')},
					{module:'zdmine',title:'我的',icon_checked:require('@/static/images/new/tabbar/mine_.png'),icon_nochecked:require('@/static/images/new/tabbar/mine.png')},
					],
				 footerindex:'zdcount',
				 showfooter: 0,
				 isfootflag:true,
				 color_checked :'FA5F03',
				 color_nochecked :'666666',
				qsimg:require("@/static/images/new/index/qsicon.png"),
				xmimg:require("@/static/images/new/index/xcicon.png"),
				rimg:require("@/static/images/mine/rimg.png"),
				mrimg:require("@/static/images/index/mrore.png") ,
				census:{},
				hbjdcensus:{},
				optsa: {
					  padding: undefined,
					  title: {},
					  // 副标题
					  subtitle: {name: "",},
					  extra: {
					    arcbar: {
					      type: "circle",
					      width: 16,
					      backgroundColor: "#E9E9E9",
					      startAngle: 1.5,
					      endAngle: 0.25,
					      gap: 2
					    }
					  }
					},
				chartDataa:{
					"categories": [],
					"series": [],
					"enableScroll":false
				},
				chartDatab:{
					series: [
					        {
					            data: [{"name":"环保问题","value":50},{"name":"土地问题","value":30},{"name":"其它问题","value":20},{"name":"投资问题","value":18},{"name":"土地问题","value":8}]
					          }
					        ]	
				},
				optsb: {
					  color: ["#50A0FF","#60CB6D","#E76677","#F69702","#975FEF",],	
					  fontSize:15,
					  extra: {
						pie:{
							border: false,
						}
					  },
					  legend:{
						 show: false,
					  }
					},
			}
		},
		onLoad() {
			this.init()
		},
		methods:{
			checkPermi, checkRole,
			init(){
				this.getCommonxmztgk();
				this.getCommonhbjd()
			},
			getCommonxmztgk(){
			  if(checkPermi(['fgw:common:xmztgk'])){
				  getCommonxmztgk().then(res=>{
				  	if(res.code==200){
				  		this.census=res.data
				  	}else{
				  		this.$toast(res.msg)
				  	}
				  })
				  
			  }
			},
			getCommonhbjd(){
			  if(checkPermi(['fgw:common:hbjd'])){
				  getCommonhbjd().then(res=>{
				  	if(res.code==200){
				  		this.hbjdcensus=res.data;
						// 计算百分比
						var a=Number(res.data.yhb);
						var b=Number(res.data.whb)
						var total=Number(a)+Number(b)
						var num=a/total
						var nums=Number(num.toFixed(2))
						var s=Math.round((a / total) * 100) + '%';
						if(total==0){
							s=0
						}
						var series=[{
					      "name": "汇报率",
					      "color": "#FC4D00",
					      "data": nums
					    }]
						var title= {
							name: s,
							fontSize: 30,
							color: "#FC4D00"
						}
						this.chartDataa.series=JSON.parse(JSON.stringify(series));
						this.optsa.title=JSON.parse(JSON.stringify(title));
						// 重置图标
				  	}else{
				  		this.$toast(res.msg)
				  	}
				  })
			  }
			},
			getCuiFn(){
				var that=this;
				var str='催报';
				uni.showModal({
					title: '确认'+str,
					content: "是否确认"+str+"该条线索",
					cancelText: '取消'+str,
					confirmText: '确认'+str,
					success: function(res) {
						if (res.confirm) {
							var params={
								idList:that.hbjdcensus.whbId
							}
							getjdapsycb(params).then(res=>{
								if(res.code==200){
									that.$toast("催报成功")	
								}else{
									that.$toast(res.msg)
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			toQsFn(){
				this.$tab.navigateTo('/pages/zdpages/count/qsfinish')
			},
			toXmFn(){
				this.$tab.navigateTo('/pages/zdpages/count/xmproject')
			},
			getMoreFn(){
				this.$tab.navigateTo('/pages/zdpages/count/timeprogress')
			},
			// getServerData() {
			// //模拟从服务器获取数据时的延时
			//   setTimeout(() => {
			//     //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			//     let res = {
			//         series: [
			//           {
			//             data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
			//           }
			//         ]
			//       };
			//     this.chartData = JSON.parse(JSON.stringify(res));
			//   }, 500);
			// },
		}
	}
</script>

<style lang="scss" scoped>
.count{min-height: 100vh;background-color: #ffffff;}
.countbox{padding: 40rpx 24rpx;
	.titline{width: 8rpx;height: 46rpx;background: #FC7300;margin-right: 20rpx;}
	.ct_num{display: flex;flex-wrap: wrap;
		.ct_numa{width: 50%;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: 28rpx;font-weight: bold;color: #343434;margin-bottom: 20rpx;}
			}
		}
	}
	.ct_btn{
		.ct_btna{width: 100%;height: 100rpx;
border-radius: 10rpx;display: flex;align-items: center;padding: 0 38rpx;margin-top: 36rpx;
		&.bg1{background: #EDF5FF;}
		&.bg2{background: #FFEEE4;}
		.limg{width: 60rpx;height: 60rpx;margin-right: 24rpx;flex: 0 0 auto;
			&.imga{height: 80rpx;}
		}
		.rimg{width: 16rpx;height: 26rpx;flex: 0 0 auto;}
		.tit{flex: 1;font-size: 32rpx;color: #343434;font-weight: bold;}

		}
	}
	.home_morer{flex: 1;display: flex;align-items: center;justify-content: flex-end;
		view{font-size: 30rpx;color: #AAAAAA;font-weight: 500;}
		image{width: 24rpx;height: 24rpx;margin-left: 14rpx;}
	}
	.charta{
		display: flex;align-items: center;padding: 0 20rpx;
		.chartal{width: 300rpx;height: 300rpx;flex: 0 0 auto;margin-right: 40rpx;}
		.chartar{flex: 1;
		text{font-size: 44rpx;font-weight: bold;padding: 0 4rpx;}
		.chartar_btn{width: 250rpx;height: 60rpx;border: 2rpx solid #FC4E00;border-radius: 10rpx;font-size: 30rpx;font-weight: 500;color: #FC4E00;display: flex;align-items: center;justify-content: center;}
		
		}
	}
	.chartb{
		.chartbf{margin-top: 40rpx;display: flex;
			&.ct_num{
				.ct_numa{min-height: 140rpx;padding-left: 20rpx;
					.count_cir{border-radius: 0;}
				}
			}
			.ct_numb{
				.tit{margin-bottom: 6rpx !important;}
			}
		}
	}
	
}

</style>