shuju_ui/qsshujujugrid/pages/index/index.vue

<template>
	<view class="home">
		<!-- 全新布局 -->
		<view class="con mb11">
			<!-- 点击查看全市人口信息 -->
			<view class="imagba">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" indicator-color='#818181' indicator-active-color='#FFFFFF'>
					<swiper-item>
						<image :src="swiimg1" class="swiper-item"></image>
					</swiper-item>
					<swiper-item>
						<image :src="swiimg2" class="swiper-item"></image>
					</swiper-item>
				</swiper>			
				<!-- <image class="imagb" :src="peobg"></image>
				<view class="imagbc">电脑端网址：https://qsdp.qs163.cn</view> -->
			</view>
			<!-- 人口数据 -->
			<view class="flexc flexjs">
				<view class="imagbox" @click="vacInfopro">
					<image class="nimage" :src="peobga" mode=""></image>
					<view class="imagboxa">
						<image class="imgl" :src="peolimga" mode=""></image>
						<view class="flex1">
							<text class="txt">常住人口统计</text>
							<view class="txt2" style="color: #248AB9;">
								{{getTimeNow ()}}
							</view>
						</view>
					</view>
				</view>
				<!-- 点击新增人口信息 -->
				<view class="imagbox" @click="addVacSituapeo()">
					<image class="nimage" :src="peobgb" mode=""></image>
					<view class=" imagboxa">
						<image class="imgl" :src="peolimgb" mode=""></image>
						<view class="">
							<text class="txt">新增人口信息</text>
							<view class="txt2" style="color:#EA8F04;">
								添加人口详细信息
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flexc flexjs">
				<!-- 点击查询人口信息情况 -->
				<view class="imagbox" @click="goRecordpeo">
					<image class="nimage" :src="peobgc" mode=""></image>
					<view class=" imagboxa">
						<image class="imgl" :src="peolimgc" mode=""></image>
						<view class="">
							<text class="txt">人口信息情况</text>
							<view class="txt2" style="color:#5950A3;">
								查询/修改/删除信息
							</view>
						</view>
					</view>

				</view>
				<!-- 人员状态变更 -->
				<view class="imagbox" @click="goReturnState">
					<image class="nimage" :src="peobgd" mode=""></image>
					<view class=" imagboxa">
						<image class="imgl" :src="peolimgf" mode=""></image>
						<view class="">
							<text class="txt">人员状态变更</text>
							<view class="txt2" style="color: #D74219;">
								更改人员状态信息
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="con mb11">
			<view class="nhtit">人员类别信息</view>
			<view class="ncbox">
				<view class="ncboxa">
					<view class="ncboxatit">当前地区</view>
					<view class="ncboxatxt">黄柏镇</view>
				</view>
				<view class="ncboxa" v-for="(ite,idx) in chartDatas.categories" :key="idx" @click="getDetail(ite,idx)">
					<view class="ncboxatit">{{ite}}（人）</view>
					<view class="ncboxatxt">{{chartDatas.series[0].data[idx]}}</view>
				</view>
				<!-- <view class="ncboxa">
					<view class="ncboxatit">低保户（人）</view>
					<view class="ncboxatxt">518</view>
				</view>
				<view class="ncboxa">
					<view class="ncboxatit">贫困户（人）</view>
					<view class="ncboxatxt">227</view>
				</view>
				<view class="ncboxa">
					<view class="ncboxatit">党员（人）</view>
					<view class="ncboxatxt">1,374</view>
				</view>
				<view class="ncboxa">
					<view class="ncboxatit">退伍军人（人）</view>
					<view class="ncboxatxt">305</view>
				</view> -->
			</view>
		</view>
		<view class="nctu">
			<!-- <view class="nhtit">人员类别比率</view> -->
			<view class="nhtit" style="padding: 0 32rpx;">人员类别</view>
			<!-- 折线图 -->
			<view  style="width:100%;height: 300px;">
				<qiun-data-charts :canvas2d='true' type="column" :chartData="chartDatas" ontouch="true"></qiun-data-charts>
				<!-- :canvas2d='true' 不能“真机调试”开发者工具显示不正常，图表层级会变高，而正常预览或者发布上线则是正常状态-->
				<!-- <qiun-data-charts type="line" :chartData="chartData" ontouch="true"></qiun-data-charts> -->
			</view>
		</view>


		<u-toast ref="uToast" />
		<!-- 疫苗情况 -->
		<!-- <view class="imagbox" @click="goNuclein">
				<image class="nimage" :src="peobgd" mode=""></image>
				<view class=" imagboxa">
					<image class="imgl" :src="peolimgf" mode=""></image>
					<view class="">
						<text class="txt">人员核酸信息</text>
						<view class="txt2" style="color: #CB2F1A;">
							查看已核酸人员的核酸详细信息
						</view>
					</view>
				</view>
			</view> -->

		<!-- 点击查询返乡人员信息 -->
		<!-- 	<view class="imagbox" @click="goReturnpeo">
				<image class="nimage" :src="peobgd" mode=""></image>
				<view class=" imagboxa">
						<image  class="imgl :src="peolimgd" mode=""></image>
					<view class="">
						<text class="txt">返乡人员信息</text>
						<view class="txt2" style="color: #046922;">
							查询/修改/删除返乡人员信息
						</view>
					</view>
				</view>
			</view> -->
			<!-- 底部 导航栏  currentPage 当前页面ID -->
			<tab-bar :currentPage="0"></tab-bar>
	</view>
</template>

<script>
	import tabBar from "@/components/tabbar/tabbar.vue"
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiimg1:require("@/static/image/swpicon.png"),
				swiimg2:require("@/static/image/swpicot.png"),
				
				upimg: require("@/static/image/upz.png"),
				downimg: require("@/static/image/downz.png"),
				peobg: require("@/static/image/peo_bg.png"),
				peobga: require("@/static/image/peo_bga.png"),
				peobgb: require("@/static/image/peo_bgb.png"),
				peobgc: require("@/static/image/peo_bgc.png"),
				peobgd: require("@/static/image/peo_bgd.png"),
				peolimga: require("@/static/image/peo_a.png"),
				peolimgb: require("@/static/image/peo_b.png"),
				peolimgc: require("@/static/image/peo_c.png"),
				peolimgd: require("@/static/image/peo_d.png"),
				peolimge: require("@/static/image/peo_e.png"),
				peolimgf: require("@/static/image/peo_f.png"),
				// 折现图
				chartData: {
					"categories": ['2016', '2017', '2018', '2019', '2020', '2021'],
					"series": [{
							name: '五保户',
							data: [35, 8, 25, 37, 4, 20],
						},
						{
							name: '低保户',
							data: [70, 40, 65, 100, 44, 68],
						},
						{
							name: '贫困户',
							data: [100, 80, 95, 150, 112, 132],
						},
						{
							name: '退伍军人',
							data: [10, 180, 95, 50, 12, 32],
						},
						{
							name: '党员',
							data: [90, 80, 25, 50, 32, 22],
						},
					],
					"enableScroll": false
				},
				//柱状图
				chartDatas: {
					"categories": [],
					"series": [{
							name: '人员类别',
							data: [],
						},
					],
					"enableScroll": false
				},
				keycategory:[],
			}
		},
		onLoad() {
			this.getKeyCateFn()
		},
		methods: {
			checkLogin() {
				var token = uni.getStorageSync('token')
				// var token = "df057579-73c8-4bdd-8312-f64db8efd699"
				if (token == undefined || token == '') {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return false
				}
				return true
			},
			getDetail(e,idx){
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					url: "/home/pages/recordthree/recordpeople?detail=1&text="+e+'&value='+idx
				})
			},
			// 人员类别
			getKeyCateFn(){
				var that = this;
				this.$http.get('system/dict/data/type/key_category').then(res => {
					if (res.code == 200) {
						var newArr=res.data;
						var num=0;
						var x=[],y=[],a={"categories": [],
							"series": [{
								"name": "人员类别",
								"data": []
							}]};
						if(newArr.length){
							newArr.forEach((item,idx)=>{
								var t=item.dictLabel;
								x.push(item.dictLabel)
								// 6, 3, 5, 2, 1    '五保户', '低保户', '贫困户', '党员', '退伍军人'
								if(t=='五保户'){
									y[idx]=6;
								}else if(t=='低保户'){
									y[idx]=3;
								}else if(t=='贫困户'){
									y[idx]=5;
								}else if(t=='党员'){
									y[idx]=2;
								}else if(t=='退伍军人'){
									y[idx]=1;
								}else{
									
								}
								// if(num<Number(item.res)){
								// 	num=Number(item.res)
								// }
							})
							this.$nextTick(function(){
								a.categories=x;
								a.series[0].data=y;
								if(x.length>7){
									a.enableScroll=true;//是否滚动
								}else{
									a.enableScroll=false;//是否滚动
								}
								if(num>0&&num<1||num==1){
									a.tofix=true
								}
								that.chartDatas=JSON.parse(JSON.stringify(a))
								// this.setSplitNumber(y)
							})
						}else{
							that.chartDatas=JSON.parse(JSON.stringify(a))
						}	
					}
				})
			},
			// 图标最小值
			setSplitNumber(arr){
			            let splitNumber = 5;
			            if(arr.length!=0){
			                let max = Math.max.apply(null,arr);
			                let min = Math.min.apply(null,arr);
			                if((Number(max) - Number(min) >=5) || (Number(max) - Number(min) == 0)){
			                    splitNumber =  5;
			                }else {
			                     splitNumber = Number(max) - Number(min);
			                }
			                
			            }
			            return splitNumber
			 },

			// 常驻人口
			vacInfopro() {
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/home/resident'
				})
			},
			//新增人口信息
			addVacSituapeo() {
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					url: "/add/pages/addvacfrom/addpeople"
				})
			},
			// 人口信息情况
			goRecordpeo() {
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					url: "/home/pages/recordthree/recordpeople"
				})
			},
			//状态变更
			goReturnState() {
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					url: "/home/pages/recordthree/recordstate"
				})
			},
			goNuclein() {
				if (!this.checkLogin()) {
					return
				}
				// uni.navigateTo({
				// 	 url: "/home/pages/recordthree/recordnuclein"
				// })
				// uni.navigateTo({
				// 	 url: "/add/pages/addvacfrom/nucleindetail?id=6"
				// })
			},
			//返乡
			goReturnpeo() {
				if (!this.checkLogin()) {
					return
				}
				uni.navigateTo({
					url: "/home/pages/recordthree/returnpeople"
				})
			},
			/* 获取当前时间 */
			getTimeNow() {
				// console.log(Date.now())
				let re = this.h_util.getDateTime('yyyy年MM月dd日hh时', new Date())
				// console.log(re)
				return re
			}
		}
	}
</script>

<style scoped lang="scss">
.flexc{display: flex;align-items: center;width: 100%;}
	.flex1{flex: 1;}
	.flexjs{justify-content: space-between;flex-wrap: wrap;}
	.flex0{flex: 0 0 auto;}
	.mb11{margin-bottom: 22rpx;}
	.w100{width: 100%;}

	// 全部布局 start
	.home{min-height: 100vh;background: #f5f5f5;}
	.con {
		display: flex;
		flex-direction: column;
		padding: 30rpx 32rpx 10rpx;
		background: #ffffff;
	}
	.nctu{display: flex;
		flex-direction: column;
		padding: 30rpx 0rpx 10rpx;
		background: #ffffff;}
	.imagba{position:relative;width:684rpx;
		height:292upx;
		margin-bottom: 24rpx;
			.swiper{width: 100%;height: 100%;
				image{width: 100%;height: 100%;display: block;}
			}
		}
	.imagbc{position: absolute;font-size: 24rpx;color: #ffffff;left:44rpx;bottom: 16rpx;}
	.imagb{
		width:684rpx;
		height:292upx;
	}
	.imagbox{width: 336rpx;height: 126rpx;margin-bottom: 18rpx;position: relative;
		.nimage{width: 100%;height: 100%;display: block;}
		.imagboxa{position: absolute;left: 0;top: 0;bottom: 0;right: 0;box-sizing: border-box;padding: 12rpx;display: flex;align-items: center;
			.imgl{width: 58rpx;height: 58rpx;margin-right: 12rpx;flex: 0 0 auto;}
			.txt{font-size: 28rpx;color: #FFFFFF;font-weight: bold;margin-bottom: 12rpx;}
			.txt2{font-size: 24rpx;}
		}
	}
	.nhtit{font-size: 28rpx;color: #343434;font-weight: bold;margin-bottom: 38rpx;}
	.ncbox{display: flex;align-items: center;flex-wrap: wrap;
		.ncboxa{width: 216rpx;background: #ECF1FE;
border-radius: 3px;padding:18rpx;box-sizing: border-box;text-align: center;min-height: 124rpx;margin-bottom: 18rpx;margin-right: 18rpx;
		&:nth-of-type(3n){margin-right: 0;}
			.ncboxatit{font-size: 22rpx;color: #939FBD;margin-bottom: 14rpx;}
			.ncboxatxt{font-size: 34rpx;color: #464E58;font-weight: bold;}
		}
	}
</style>