xqgk_xcx/pages/index/index.vue

<template>
	<view class="container">
		
		<!-- <view class="box-bg" style="padding-top: 25px;background: #FFF;">
			<uni-nav-bar left-icon="left" @clickLeft="closePage"  title="辖区概况" />
		</view> -->
		
				
		<view class="fl">
			<view class="fl1">
				<view class="item">
					<view class="title fw">  
					 <image style=""  :src="fw_icon"></image>
					 <view>房屋总数</view>
					</view>
					<view class="num"><view></view> <view>{{formatNumberWithComma(datas.fwzs)}}</view></view>
				</view>
				<view class="item">
					<view class="title dw">
						<image style=""  :src="dw_icon"></image>
						 实有单位总数</view>
					<view class="num"><view></view>{{formatNumberWithComma(datas.sydwzs)}}</view>
				</view>
			</view>
		
			<view class="fl2">
				<view class="item">
					<view class="title syrk">
					 <image style=""  :src="syrk_icon"></image>
					  实有人口总数 <view class="num"><view></view>{{formatNumberWithComma(datas.syrkzs)}}</view>
					</view>
					 
					 
					 
					 <view class="item_box">
						<view class="item">
							<view class="title fw">
							  常住人口数</view>
							<view class="num">{{formatNumberWithComma(datas.czrk)}}</view>
						</view>
						
						<view class="item">
							<view class="title fw">
							  寄住人口数</view>
							<view class="num">{{formatNumberWithComma(datas.jzrk)}}</view>
						</view>
						
						<view class="item">
							<view class="title fw">
							  暂住人口数</view>
							<view class="num">{{formatNumberWithComma(datas.zzrk)}}</view>
						</view>
						
						<view class="item">
							<view class="title fw">
							  境外人口数</view>
							<view class="num">{{formatNumberWithComma(datas.jwrk)}}</view>
						</view>
						
						<view class="item">
							<view class="title fw">
							  未落常人口数</view>
							<view class="num">{{formatNumberWithComma(datas.wlrk)}}</view>
						</view>
					 </view>
				</view>
			</view>
			
			
			
			
			<view class="fl3">
				<view class="item">
					<view class="title zdrk">  
					 <image style=""  :src="zdrk_icon"></image>
					  重点人口总数</view>
					<view class="num"><view></view>{{formatNumberWithComma(datas.zdrkzs)}}</view>
				</view>
				<view class="item">
					<view class="title swzdr">
						<image style=""  :src="swzdr_icon"></image>
						 涉稳重点人总数</view>
					<view class="num"><view></view>{{formatNumberWithComma(datas.swzdrzs)}}</view>
				</view>
				<view class="item">
					<view class="title tddx">  
					 <image style=""  :src="tddx_icon"></image>
					  特定对象总数</view>
					<view class="num"><view></view>{{formatNumberWithComma(datas.tddxzs)}}</view>
				</view>
				<view class="item">
					<view class="title mdjf">
						<image style=""  :src="mdjf_icon"></image>
						 矛盾纠纷总数</view>
					<view class="num"><view></view>{{formatNumberWithComma(datas.mdjfzs)}}</view>
				</view>
				
				<view class="item">
					<view class="title jxcs">
						<image style=""  :src="jxcs_icon"></image>
						 九小场所总数</view>
					<view class="num"><view></view>{{formatNumberWithComma(datas.jxcszs)}}</view>
				</view>
			</view>
			
		</view>
	     
		<!-- {{isSzApp.extraData}}
		<button type="primary" @click="loginFun" style="margin-top: 30px;">手动触发方法</button> -->
	
	</view>
</template>



<script>
	
	//https://nativesupport.dcloud.net.cn/UniMPDocs/Sample/android-v2.html
	import {getXqgk,getrequest} from '../../api/xqgk.js'
	export default {
		data(){
			return{
				loading:true,
				contentprovider:'',
				nativeMsg:'',
				isSzApp: '88',
				SzApp:'',
				isInternet:'',
				referrerInfo:'',
				datas:{},
				fw_icon:require('../../static/icon/icon_statistics_house_20.png'),
				dw_icon:require('../../static/icon/icon_statistics_unit_20.png'),
				syrk_icon:require('../../static/icon/icon_statistics_people_20.png'),
				zdrk_icon:require('../../static/icon/icon_statistics_point_20.png'),
				swzdr_icon:require('../../static/icon/icon_statistics_stabilize_20.png'),
				tddx_icon:require('../../static/icon/icon_statistics_special_20.png'),
				mdjf_icon:require('../../static/icon/icon_statistics_dispute_20.png'),
				jxcs_icon:require('../../static/icon/icon_statistics_site_20.png'),
			}
		},
         
		onLoad(options) {
			this.loginFun()	
		},
		onReady() {
			console.group('onReady 状态===============》');
		},
		onShow() {
			this.SzApp = uni.getStorageSync('SzApp');
			this.isSzApp = uni.getStorageSync('isSzApp');
			this.loginFun()
		},
		mounted(){
			console.log('开启调试mounted');
			
		},
		// 监听按钮点击事件
		onNavigationBarButtonTap(e) {
			plus.runtime.quit()
		},
		//下拉后触发的事件
		onPullDownRefresh() {
			this.initData()
		},
		
	   methods: {
		   loginFun(){
					uni.showLoading({
						title:''
					})
					getrequest('bladeTokenEndPoint','token3').then(res=>{
						let  userInfo = JSON.parse(res.data.dataList[0].fieldValues[0].value)
						this.$u.vuex('userInfo', userInfo)
						this.$u.vuex('accessToken', userInfo.access_token)
						this.$u.vuex('refreshToken', userInfo.refresh_token)
						//console.log(JSON.parse(res.data.dataList[0].fieldValues[0].value),'data')	
						this.initData()
					}).catch(r=>{
						console.log(r)
					}).finally(r=>{
						uni.hideLoading()
			   })
		   },
		   initData(){
			getrequest('userController','getXqgk').then(res=>{
				   let xqtjData = JSON.parse(res.data.dataList[0].fieldValues[0].value)	
				   this.datas= xqtjData.data
			   }).finally(r=>{
				 // 隐藏导航栏加载动画
			uni.stopPullDownRefresh();
			})
			uni.stopPullDownRefresh();
		   },
		   download(){
			   window.open('../../static/source/__UNI__0308C60.wgt')
		   },
	    getDataFromContentProvider() {
	      const main = plus.android.runtimeMainActivity();
	      const context = main.getApplicationContext();
	      const uri = Uri.parse("content://com.example.mycontentprovider");
	      const cursor = context.getContentResolver().query(uri, null, null, null, null);
	      
	      if (cursor != null) {
	        while (cursor.moveToNext()) {
	          // 获取数据
	          const data = cursor.getString(cursor.getColumnIndexOrThrow("column_name"));
	          // 处理数据
			  this.contentprovider = data
	        }
	        cursor.close();
	      }
	    },
		closePage(){
			plus.runtime.quit()
		},
		
		snedMessage(){
			// 向宿主App发送事件
			uni.sendNativeEvent('unimp-event', {
				msg: 'unimp message!!!'
			}, ret => {
				this.nativeMsg = '宿主App回传的数据：' + ret;
			})
		},
		formatNumberWithComma(number) {
		 if(number){
			 return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		 }else{
			 return 0
		 }
		}
	  }
	}
</script>



<style lang="scss">
	@font-face {
		font-family: 'dinpro';
		src: url('../../static/font/DINPro-Bold.otf');
	}
	@font-face {
		font-family: 'sy_Medium';
		src: url('../../static/font/sy/Medium/VYsJ5mVGs4xO.woff');
	}
	@font-face {
		font-family: 'sy_Regular';
		src: url('../../static/font/sy/Regular/86cVqZlTJTV1.woff');
	}
	.container{
		padding: 0;
		box-sizing: border-box;
		.fl{
			padding: 18px 12px;
			box-sizing: border-box;
			background: #F7F7F7;
			.fl1,.fl3{
				display: grid;
				grid-template-columns: calc((100% - 15px)/2) calc((100% - 15px)/2);
				grid-template-rows: auto;
				gap: 15px;
				.item{
					background: #FFFFFF;
					border-radius: 8px;
					text-align: center;
					padding: 15px;
					box-sizing: border-box;
					
					.title{
						font-weight: 500;
						font-size: 14px;
						font-family: 'sy_Regular';
						position: relative;
						text-align: left;
						margin: auto;
						display: grid;
						grid-template-columns:26px auto;
						image{
							width: 20px;
							height: 20px;
							vertical-align: bottom;
							margin-top: 1px;
						}
					}
					.fw{
						color: #477FFF;
					}
					.dw{
						color: #00ABE6;
					}
					.num{
						display: grid;
						grid-template-columns:26px auto;
						font-weight: bold;
						font-size: 20px;
						color: #111111;
						font-family: 'dinpro';
						padding-top: 3px;
						text-align: left;
					}
				}
			}
			
			.fl2{
				margin-top: 15px;
				.item{
					background: #FFFFFF;
					border-radius: 8px;
					text-align: left;
					padding: 15px;
					box-sizing: border-box;
					
					.title{
						font-weight: 500;
						font-size: 14px;
						font-family: 'sy_Regular';
						position: relative;
					
						margin: auto;
						image{
							width: 20px;
							height: 20px;
							vertical-align: bottom;
							margin-right: 6px;
						}
					}
					
					.syrk{
						color: #22C450;
						.num{
							display: inline-block;
							font-weight: bold;
							font-size: 20px;
							color: #111111;
							font-family: 'dinpro';
					
							float: right;
						}
					}
					
				}
				
				.item_box{
						display: grid;
						grid-template-columns: calc((100% - 15px)/2) calc((100% - 15px)/2);
						grid-template-rows: auto auto auto;
						gap: 15px;
						margin-top: 15px;
						.item{
							background: #FAFAFA;
							border-radius: 8px;
							text-align: left;
							padding: 15px;
							box-sizing: border-box;
							.title{
								font-weight: 500;
								font-size: 14px;
								font-family: 'sy_Regular';
								box-sizing: border-box;
								margin: auto;
								width: 100%;
							
							}
							.fw{
								color: #666666;
							}
							.dw{
								color: #666666;
							}
							.num{
								font-weight: bold;
								font-size: 20px;
								color: #111111;
								font-family: 'dinpro';
								padding-top: 3px;
							}
						}
					}
			}
			
			.fl3{
				margin-top: 15px;
				.item{
					
					.title{
					
					}
					.zdrk{
						color: #F73838 !important;
					}
					.swzdr{
						color: #FF2D7B;
					}
					.tddx{
						color:#8656FF
					}
					.mdjf{
						color:#F5A218
					}
					.jxcs{
						color:#00ABE6
					}
				}
			}
			
		}
	}
	/deep/ .uni-navbar--border{
		border-bottom: none !important;
	}
</style>