shuju_ui/qs_zhaoshang/pages/indexs.vue

<template>
  <view class="content">
	 <view class="ceheigh">
		<!-- 搜索 @getSearch='getSearch' @clickRight='clickRight'-->
		  <tab-search :leftwith="checkPermi(['system:check:app'])?'80':'0'" :rightwith="checkPermi(['system:notice:list'])?'90':'0'" @clickLeft='clickLeft' @clickRight='clickRight' :noticenum="noticenum" @getSearch='getSearch'></tab-search>
	
		 <!-- banner -->
		 <block v-if="bannerlist.length">
			  <banner :bannerlist="bannerlist" :currentdate="currentdate" type="zhong"></banner>
		 </block>
		
		<!-- @click="getMessage" -->
		<view class="home_tz"  v-if="noticenum">
			 <image :src="tzimg"></image>
			 <view class="c34 f15 f500 over flex1">您有1条预警项目未读，请前往查看详情…</view>
			 <view class="f15 c6 ml4 flex0">{{currentdate}}</view>
		 </view>
		 <!-- 模块 -->
		<view class="homelist">
			<!--  -->
			<view class="list" v-if="checkPermi(['fgw:xmsb:list'])" @click="handleTozf(0)" >
				<image :src="homeaimg"></image>
				<view class="tit">政府项目</view>
				<view class="txt co4">{{census.zfxm||0}}</view>
				
			</view>
			
			<view class="list" @click="handleToZsFn" v-if="checkPermi(['projectV2:sbbzb:list'])">
				<image :src="homebimg"></image>
				<view class="tit">招商项目</view>
				<view class="txt co2">{{census.zsxm||0}}</view>
			</view>
			<view class="list" @click="handleToWtFn" v-if="checkPermi(['fgw:xmsb:list'])">
				<image :src="homecimg"></image>
				<view class="tit">问题项目</view>
				<view class="txt co3">{{census.wtxm||0}}</view>
			</view>
			<view class="list" v-if="checkPermi(['fgw:xmsb:list'])" @click="handleTozf(1)" >
				<image :src="homeeimg"></image>
				<view class="tit">申报库</view>
				<view class="txt co3">{{census.sbxm||0}}</view>
			</view>
			<view class="list" v-if="checkPermi(['fgw:xmsb:list'])" @click="handleTozf(2)" >
				<image :src="homefimg"></image>
				<view class="tit">项目库</view>
				<view class="txt co3">{{census.xmk||0}}</view>
			</view>
			<view class="list" @click="handleTold" v-if="checkPermi(['fgw:xmsb:ldps:list'])">
				<image :src="homegimg"></image>
				<view class="tit">领导批示</view>
				<view class="txt co3">{{census.psxm||0}}</view>
			</view>
			<view class="list" v-if="checkPermi(['fgw:xmsb:xmyj:list'])" @click="handleToxmyj">
				<image :src="homedimg"></image>
				<view class="tit">项目预警</view>
				<view class="txt co1">{{census.yjxm||0}}</view>
			</view>
			<!-- 超期项目 -->
			<view class="list" v-if="checkPermi(['fgw:xmsb:cqxm:list'])" @click="handleTocqxm">
				<image :src="homehimg"></image>
				<view class="tit">超期项目</view>
				<view class="txt co1">{{census.cqxm||0}}</view>
			</view>
		</view> 
		<!-- <view class="home_sta flexc">
			<view>已报市局待审(<text>1</text>)</view>
			<view>涉林地项目(0)</view>
			<view>已批复(<text>1</text>)</view>
			<view class="bga">更多
				<image :src="morerimg"></image>
			</view>
		</view> -->
		<view class="zhanline"></view>
		<view class="home_nums" v-if="checkPermi(['fgw:common:sbAndJdNum'])">
			<view class="home_num">
				<view class="list">
					<view class="num co4">{{jdcensus.xmzs}}</view>
					<view class="tit">项目总数</view>
				</view>
				<view class="list">
					<view class="num co2">{{jdcensus.zcxm}}</view>
					<view class="tit">正常项目</view>
				</view>
				<view class="list">
					<view class="num co1">{{jdcensus.cqjdxm}}</view>
					<view class="tit">有超期节点项目</view>
				</view>
				<view class="list">
					<view class="num co3">{{jdcensus.yzzhxm}}</view>
					<view class="tit">有严重滞后节点项目</view>
				</view>
				<view class="list">
					<view class="num co2">{{jdcensus.jdzs}}</view>
					<view class="tit">节点安排总数</view>
				</view>
				<view class="list">
					<view class="num co4">{{jdcensus.zcjd}}</view>
					<view class="tit">正常节点</view>
				</view>
				<view class="list">
					<view class="num co1">{{jdcensus.cqjd}}</view>
					<view class="tit">超期节点</view>
				</view>
				<view class="list">
					<view class="num co3">{{jdcensus.yzzhjd}}</view>
					<view class="tit">严重滞后节点</view>
				</view>
			</view>
			<!-- <view class="home_tit">*严重滞后指超期后承诺时间内仍未完成</view> -->
		</view>
		<view class="zhanline"></view>
	 </view>
	<!-- 超期节点公示 -->
	<view v-if="checkPermi(['fgw:common:zrdwCqNum'])">
		<!-- home_morefixed -->
		<view class="home_more" :class="moreflag?'home_morefixed':''">
			<view class="flexc pdlr14 pdtb8" @click="handleTozd">
				<view class="tit">超期节点公示</view>
			</view>
			<view class="tablebox">
				<table border='0' class='table'>
					<thead class='thead'> 
						<tr class="tr_one">  
							<th style="width: 230rpx;">责任单位</th>
							<th style="width: 160rpx;">节点安排总数</th>
							<!-- <th style="width: 120rpx;">今年到期</th> -->
							<th style="width: 150rpx;">超期节点</th>
							<th style="width: 160rpx;">严重滞后节点</th>
							<!-- <th style="width: 80rpx;">累计扣分</th> -->
						</tr>
					</thead>
					
					<tbody class="tbody" v-if="list.length>0">
						<tr v-for="(item,index) in list" :key="index">
							<td style="width: 230rpx;" >{{item.name}}</td>
							<td style="width: 160rpx;" class='co2'>{{item.jdzs}}</td>
							<!-- <td style="width: 120rpx;" class='co2'>{{item.a}}10</td> -->
							<td style="width: 150rpx;" class='co1'>{{item.cqjd}}</td>
							<td style="width: 160rpx;" class='co1'>{{item.yazhjd}}</td>
							<!-- <td style="width: 80rpx;" class='co1'>{{item.a}}10</td> -->
						</tr>
						<!-- <div class="shax" v-if="list.length>0">
							{{wtdt}}
						</div>
						<div class="shax" v-else><span>暂无数据</span></div> -->
						<!-- 查看更多 -->
						<view class="listmore" v-if="list.length>3&&!moreflag" @click="getMore">
							查看更多
							<image :src="moredimg"></image>
						</view>
						
					</tbody>
					<div class="shax" v-else><span>暂无数据</span></div>	
				</table>
			</view>
		</view>
	</view>
	<!-- 弹窗 -->
	<view class="bgbox" @click="getClose" v-if="titflag"></view>
	<!-- 弹窗 -->
	<view class="fixedbox" v-if="titflag">
		<image :src="closeimg" class="choseimg" @click="getClose"></image>
		<view class="top">温馨提示</view>
		<view class="boxs">
			<view class="c34 f16 fw">您好！您上报的<text class="coff6">“高速出入口片区环境 品质提升规划改造”</text>项目，本周还未进 行进度汇报，请尽快前去汇报！</view>
		</view>
		<view class="fixedbtn" @click="getClose">我知道了</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 tabSearch from "@/components/toptab/search.vue"
	import banner from "@/components/toptab/banner.vue"
	import projectList from "@/components/projectlist/list.vue"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {getBannerlist,getNoticenumber,getCommonCensus,getCommonsbAndJdNum,getzrdwCqNumFn} from "@/api/zdwork/index.js"
	import { getsbbzblist} from '@/api/work/clue.js'
	import footers from '@/components/footer/footer.vue'
  export default {
	  data(){
		  return{
			  closeimg:require('@/static/images/close.png'),
			  titflag:false,
			  tzimg:require('@/static/images/index/tzicon.png'),
			  homeaimg:require('@/static/images/new/index/homea.png'),
			  homebimg:require('@/static/images/new/index/homeb.png'),
			  homecimg:require('@/static/images/new/index/homec.png'),
			  homedimg:require('@/static/images/new/index/homed.png'),
			  morerimg:require('@/static/images/new/index/morer.png'),
			  moredimg:require('@/static/images/new/index/mored.png'),
			  
			  homeeimg:require('@/static/images/new/index/homee.png'),
			  homefimg:require('@/static/images/new/index/homef.png'),
			  homegimg:require('@/static/images/new/index/homeg.png'),
			  homehimg:require('@/static/images/new/index/homeh.png'),
			  mrimg:require("@/static/images/index/mrore.png") ,
			  list:[],
			  wtdt:'',
			  bannerlist:[],
			  noticenum:0,
			  census:{},//统计
			  jdcensus:{},//节点统计
			  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:'zdhome',
			   showfooter: 0,
			   isfootflag:true,
			   color_checked :'FA5F03',
			   color_nochecked :'666666',
			   topzhiflag:true,
			   currentdate:'',
			   moreflag:false,
			   zanthreelist:[],
			   zrdwcqlist:[],
		  }
	  },
	  components:{tabSearch,banner,projectList,footers},
	  onUnload(){
	  	uni.$off('refreshdatacensuszd')
	  },
	  onLoad() {
		this.init()
		 this.currentdate = this.getNowFormatDate();
		// 拿取数据后
		var that=this;
		// uni.$on('refreshdatacensuszd',(e) => {
		// 	if(e&&e=='ldps'){
				
		// 	}else{
		// 		this.getCommonCensus();
		// 	}
		// })
		// that.$nextTick(function(){
		// 	setTimeout(function(){
		// 		that.ceheiFn();
		// 	})
		// },500)
	  },
	  onPageScroll(e) {
		 //  console.log(e,1)
			// let that = this;
			// if(e.scrollTop >= that.dingtop + 10){
			// 	that.topzhiflag = true;
			// 	that.topflag = true;
			// 	that.scrollju = e.scrollTop - (that.dingtop + 10);
			// }else{
			// 	that.topzhiflag = false;
			// 	that.topflag = false;
			// 	// if(that.from_type == 'all' && that.module_from == 'shop'){
			// 	// 	that.ceshiFn();
			// 	// }else if(that.from_type == 'waimai' && that.module_from == 'shop'){
			// 	// 	that.ceshitwoFn();
			// 	// }else if(that.module_from == 'product'){
			// 	// 	that.ceshithreeFn();
			// 	// }
			// }
	  },
	  methods:{
		  checkPermi, checkRole,
		  getNowFormatDate(){
		  	let date = new Date();
		  	let y = date.getFullYear();
		  	let m = date.getMonth() + 1;
		  	m = m < 10 ? "0" + m : m;
		  	let d = date.getDate();
		  	d = d < 10 ? "0" + d : d;
		  	const timeday = m + "-" + d;
		  	return timeday;
		  },
		  getMore(){
			  this.moreflag=true;
			  this.list=this.zrdwcqlist;
		  },
		  // 新的
		  getClose(){
			  this.titflag=false;
		  },
		  // 政府项目
		  handleTozf(e){
			  this.$tab.navigateTo('/pages/zdpages/work/zfitems?idx='+e)
		  },
		  // 招商项目
		  handleToZsFn(){
		  	 this.$tab.navigateTo('/pages/work/allitems?idx=0')
		  },
		  //问题项目
		  handleToWtFn(){
			this.$tab.navigateTo('/pages/zdpages/work/wtitems')
		  },
		  getSearch(data){
		  	this.$tab.navigateTo('/pages/zdpages/work/zfitems?xmmc='+data)
		  },
		  handleTold(){
		  		  this.$tab.navigateTo('/pages/zdpages/work/lditems')
		  },
		  // 项目预警
		  handleToxmyj(){
			  this.$tab.navigateTo('/pages/zdpages/work/xmyjitems') 
		  },
		  // 超期项目
		  handleTocqxm(){
			 this.$tab.navigateTo('/pages/zdpages/work/cqitems')  
		  },
		  ceheiFn(){
		  	var that = this;
		  	let cehei = uni.createSelectorQuery().in(this);
		  	cehei.select(".ceheigh").boundingClientRect(function(res){
		  		that.dingtop = res.height;
		  	}).exec();
		  },
		  
		  
		  init(){
			// if(checkPermi(['system:notice:number'])){
			// 	this.getNoticenumber()
			// }
		  	this.getBanList()
			this.getCommonCensus()
			this.getCommonsbAndJdNum()
			this.getzrdwCqNumFn()
			// this.getsbbzblist()
		  },
		  getzrdwCqNumFn(){
			  if(checkPermi(['fgw:common:zrdwCqNum'])){
			  	getzrdwCqNumFn().then(res=>{
			  		if(res.code==200){
			  			this.zrdwcqlist=res.data;
						this.zanthreelist=res.data.slice(0,3);
						this.list=this.zanthreelist;
						if(this.moreflag){
							this.list=res.data;
						}else{
							this.list=this.zanthreelist;
						}
			  		}else{
			  			this.$toast(res.msg)
			  		}
			  	})
			  }
		  },
		  getNoticenumber(){
			  getNoticenumber().then(res=>{
			  	if(res.code==200){
			  		this.noticenum=Number(res.data)
			  	}else{
			  		this.$toast(res.msg)
			  	}
			  })
		  },
		  getCommonsbAndJdNum(){
			if(checkPermi(['fgw:common:sbAndJdNum'])){
				getCommonsbAndJdNum().then(res=>{
					if(res.code==200){
						this.jdcensus=res.data
					}else{
						this.$toast(res.msg)
					}
				})
			}
		  },
		  getBanList(){
		  	getBannerlist().then(res=>{
				if(res.code==200){
					this.bannerlist=res.rows
				}else{
					this.$toast(res.msg)
				}
		  	})
		  },
		  getCommonCensus(){
			  if(checkPermi(['fgw:common:census'])){
				  getCommonCensus().then(res=>{
				  	if(res.code==200){
				  		this.census=res.data
				  	}else{
				  		this.$toast(res.msg)
				  	}
				  })
			  }
			 
		  },
		  //重大项目
		  getsbbzblist(){
			  var params={
			  	pageSize:5,
			  	pageNum: 1,
				sfwlhxxxm:'Y'
			  }
			 getsbbzblist(params).then(res=>{
			 	if(res.code==200){
			 		this.list = res.rows;
			 	}else{
			 		this.$toast(res.msg)
			 	}
			 }) 
		  },
		  //左侧点击
		  clickLeft(){
			  if(checkPermi(['system:check:app'])){
			  	this.$tab.reLaunch('/pages/index')
			  }
		  	
		  },
		  //右侧点击
		  clickRight(e){
			  if(checkPermi(['system:notice:list'])){
			  	this.$tab.navigateTo('/pages/work/message')
			  } 
		  },
		  getMessage(){
			  if(checkPermi(['system:notice:list'])){
			  	this.$tab.navigateTo('/pages/work/message')
			  } 
			  // this.$tab.navigateTo('/pages/work/idea')
		  },
		  
		  handleToAll(idx){
			this.$tab.navigateTo('/pages/work/allitems?idx='+idx)
		  },
		  handleTosk(){
			  this.$tab.navigateTo('/pages/work/skitem')
		  },
		  handleTowt(){
		  	this.$tab.navigateTo('/pages/work/wtitem')
		  },
		  handleTozd(){
		  	 // this.$tab.navigateTo('/pages/work/zditem')
		  },
		  goDetail(e){
			  this.$tab.navigateTo('/pages/work/cluedetails?id='+e.id)
		  }
	  },
  }
</script>

<style lang="scss" scoped>
.content{min-height: 100vh;background-color: #ffffff;}
.home_tz{display: flex;align-items: center;padding: 0 28rpx;height: 80rpx;background: #FFE9D5;
	image{width: 66rpx;height: 30rpx;margin-right: 24rpx;flex: 0 0 auto;}
}
// border-bottom: 2rpx solid #DBDBDB;
.homelist{display: flex;flex-wrap: wrap;padding: 40rpx 20rpx;
	.list{width: 25%;display: flex;flex-direction: column;align-items: center;position: relative;padding: 20rpx 0;
	.list_not{    position: absolute; background: #F63030;color: #ffffff;font-size: 18rpx;left: 50%;top: 24rpx;border-radius: 50%;min-width: 40rpx;height: 40rpx;text-align: center;padding: 0 4rpx;box-sizing: border-box;line-height: 40rpx;margin-left: 30rpx;}
	image{width: 80rpx;height: 80rpx;margin-bottom: 20rpx;}
	.tit{font-size: 30rpx;font-weight: bold;
color: #444444;margin-bottom: 16rpx;}
	.txt{font-size: 30rpx;font-weight: bold;height: 40rpx;background: #F8F6FF;
border-radius:20rpx;min-width: 100rpx;text-align: center;line-height: 40rpx;
	&.co1{color: #F84E57;}
	&.co2{color: #26C240;}
	&.co3{color: #F74E32;}
	&.co4{color: #3C9BCD;}
	}
	}
}

// 待审状态
.home_sta{padding: 36rpx 24rpx;justify-content: space-between;
	view{min-height: 50rpx;background: #EBEBEB;border-radius: 26rpx;text-align: center;padding: 0 16rpx;height: 50rpx;line-height: 50rpx;box-sizing: border-box;font-size: 24rpx;font-weight: 500;color: #666666;display: flex;align-items: center;
	text{color: #F63030;}
	&.bga{background: #FFE9D5;color: #FC7300;}
	}
	image{width: 30rpx;height: 22rpx;margin-left: 8rpx;}
}
//统计
.home_nums{
	padding: 28rpx 24rpx;
	.home_num{display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;
		.list{width: 158rpx;height: 176rpx;background: #F3F5FF;border-radius: 10rpx;display: flex;flex-direction: column;align-items: center;justify-content: space-around;padding: 8rpx 12rpx;box-sizing: border-box;margin-bottom: 24rpx;
			.num{font-size: 38rpx;font-weight: bold;
				&.co1{color: #F84E57;}
				&.co2{color: #26C240;}
				&.co3{color: #F74E32;}
				&.co4{color: #3C9BCD;}
			}
			.tit{font-size: 28rpx; color: #343434;font-weight: bold;text-align: center;}
		}
	}
	.home_tit{font-size: 28rpx;font-weight: bold;color: #FC3018;text-align: right;padding-top: 6rpx;}
}




.home_more{padding-top: 20rpx;
	.tit{font-size: 32rpx;font-weight: bold;color: #343434;position: relative;flex: 0 0 auto;
	&::before{content: '';width: 58rpx;height: 8rpx;position: absolute;left: 0;bottom: -22rpx;background-color: #FC7300;}
	}
	.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;}
	}
}
//列表
.chao_top{min-height: 90rpx;background: #F3F5FF;border-radius: 10rpx;display: flex;align-items: center;margin-top: 70rpx;
	view{font-size: 28rpx;font-weight: bold;color: #343434;padding: 8rpx 10rpx;box-sizing: border-box;flex: 1 0 auto;text-align: center;}
}
.wid90{width:180rpx;}
.wid60{width:120rpx;}
.wid40{width:80rpx;}

// .chao_list{border-bottom: 2rpx solid #DEDEDE;display: flex;align-items: center;
// 	view{font-size: 28rpx;color: #343434;padding: 30rpx 10rpx;box-sizing: border-box;flex: 1 0 auto;text-align: center;
// 	&.co1{color: #F84E57;}
// 	&.co2{color: #26C240;}
// 	&.co3{color: #F74E32;}
// 	&.co4{color: #3C9BCD;}
// 	}
// }

	// 更多
.listmore{display: flex;align-items: center;justify-content: center;font-size: 30rpx;color: #aaaaaa;font-weight: 500;padding: 40rpx 24rpx;
	image{width: 24rpx;height: 24rpx;margin-left: 12rpx;}
}

.fixedbox{box-sizing: border-box;padding:42rpx 46rpx 60rpx;
	.choseimg{top: 50rpx;}
	.boxs{padding: 60rpx 0 70rpx;}
	.fixedbtn{width:100%;height: 80rpx;background: #FF6400;
	border-radius: 10rpx;display: flex;align-items: center;justify-content: center;font-size: 32rpx;font-weight: bold;color: #FFFFFF;
		&.btn1{background-color: #20ACCF;margin-bottom: 36rpx;}
	}
}

// 表格
.tablebox{padding:70rpx 24rpx 0;flex: 1;display: flex;flex-direction: column;overflow: hidden;box-sizing: border-box;
	 th{padding:10rpx 8rpx;box-sizing: border-box;font-size: 28rpx;color: #343434;font-weight: bold;text-align: center;
		.num{font-size: 24rpx;margin-top: 8rpx;
		&.co1{color: #FE3155;}
		&.co2{color:#1686F6;}
		}
	 }
	}
	.table{border-spacing: 0;width: 700rpx;display: flex;flex-direction: column;overflow: hidden;margin: 0 auto;}
	.thead{width: 100%;background-color: #F3F5FF;flex: 0 0 auto;border-radius: 10rpx;
	
	}
	.tbody {flex: 1;overflow: auto;}
	.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:#26C240;}
	
	}
// 滚动 固定
.home_morefixed{height: calc(100vh - 100rpx);display: flex;flex-direction: column;}
</style>