emergencyManagement/pages/index/index.vue

<template>
<view class="page-wrap">
	<uni-section title="铜川市印台区应急管理局">
		<template v-slot:decoration>
		  <view class="decoration">
			  <image class="icon" src="/static/images/admin_icon.png"></image>
		  </view>
		</template>
		<view class="tab-container">
			<view class="item" @click="linkTo('duty')">
				<view class="icon">
					<image src="/static/images/duty.png" mode=""></image>
				</view>
				<view class="name">应急值守</view>	
			</view>
			<view class="item" @click="linkTo('team')">
				<view class="icon">
					<image src="/static/images/team.png" mode=""></image>
				</view>
				<view class="name">队伍建设</view>	
			</view>
			<view class="item" @click="linkTo('goods')">
				<view class="icon">
					<image src="/static/images/goods.png" mode=""></image>
				</view>
				<view class="name">物资储备</view>	
			</view>
			<view class="item" @click="linkTo('industry')">
				<view class="icon">
					<image src="/static/images/industry.png" mode=""></image>
				</view>
				<view class="name">行业管理</view>	
			</view>
			<view class="item" @click="linkTo('danger')">
				<view class="icon">
					<image src="/static/images/danger.png" mode=""></image>
				</view>
				<view class="name">隐患管理</view>	
			</view>
			<view class="item" @click="linkTo('disaster')">
				<view class="icon">
					<image src="/static/images/disaster.png" mode=""></image>
				</view>
				<view class="name">自然灾害</view>	
			</view>
		</view>
	</uni-section>
	<div class="duty-conatiner">
		<uni-section title="值班情况">
			<template v-slot:decoration>
				<view class="decoration">
					<image class="icon" src="/static/images/duty_icon.png"></image>
				</view>
			</template>
			<view class="filter-box">
				<view class="bt lf" @click="changeDate(-1)">
					<uni-icons type="left" color="#777" size="30"></uni-icons>
				</view>
				<view class="time">{{dutyDate}}</view>
				<view class="bt rt" @click="changeDate(1)">
					<uni-icons type="right" color="#777" size="30"></uni-icons>
				</view>
			</view>
			<view class="duty-item" v-for="(duty,index) in dutys" :key="duty.accountId">
					<view class="avatar">
						<image class="icon" src="/static/images/avatar.png" mode=""></image>
					</view>
					<view class="info">
						<view class="top">
							 <view class="posName">
								 <text>{{duty.posName}}</text>
							 </view>							
							<view class="posbox">
								 <view class="groupName">
									<uni-tag :inverted="true" :text="duty.groupName" type="primary"></uni-tag>
								</view>
								 <view class="positionName">
									<uni-tag :inverted="true" :text="duty.positionName" type="success"></uni-tag>	
								 </view>								
							</view>
						</view>
						<view class="bottom">
							<view class="user">
								<div class="userinfo">
									<image class="icon" src="/static/images/user.png"></image>
									<view class="name">{{duty.accountName}}</view>	
								</div>
							</view>
							<view class="phone" @click="callPhone(duty.accountPhone)">
								<image class="icon" src="/static/images/phone.png"></image>
								<view class="phoneNumber">{{duty.accountPhone||'未填写'}}</view>
							</view>
						</view>
					</view>
			</view>
			<view class="isEmpty" v-if="dutys.length<1">
				暂无数据
			</view>
		</uni-section>
	</div>
	<div class="item-conatiner">
		<uni-section title="统计分析">
			<template v-slot:decoration>
				<view class="decoration">
					<image class="icon" src="/static/images/statistics_icon.png"></image>
				</view>
			</template>
			<view class="statisticsTabs">
				<uni-segmented-control :current="statisticsIdx" :values="statisticsTabs" style-type="text" active-color="#007aff" @clickItem="changeStatics" />				
			</view>	
			<view class="statisticscont">
				<uni-table border stripe emptyText="暂无更多数据" >
					<uni-tr>
						<uni-th align="center" width='50'>序号</uni-th>
						<uni-th align="center">{{statisticsData.name}}</uni-th>
						<uni-th align="center">{{statisticsData.unit}}</uni-th>
					</uni-tr>
					<uni-tr v-for="(item,idx) in statisticsData.items" :key="idx">
						<uni-td align="center">{{idx+1}}</uni-td>
						<uni-td align="center">{{item.name}}</uni-td>
						<uni-td align="center">{{item.num}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<uni-card margin='10px 0' padding='0'>
				<StatisticsChart :data='chartdata'></StatisticsChart> 
			</uni-card>
		</uni-section>
	</div>				
</view>
</template>

<script>
	import StatisticsChart from '@/components/IndexBarChart.vue'
	import dutyApi from '@/api/duty.js'
	import teamApi from '@/api/team.js'
	import goodsApi from '@/api/goods.js'
	import industryApi from '@/api/industry.js'	
    import dangerApi from '@/api/danger.js'			
	import {parseTime} from '@/libs/index.js'
	export default {
		components:{
			StatisticsChart
		},
		data() {
			return {
				dutys: [],
				statisticsIdx:0,
				dutyDate:parseTime(new Date(),'{y}-{m}-{d}'),
				statisticsTabs: ['队伍建设', '物资储备', '行业管理', '隐患管理'],
				statisticsData:{
					name:"救援队",unit:"人数",
					items:[]
				},
				chartdata:{yData:[],xData:[]}
			}
		},
		onShow() {
		 this.init()
		},
		methods: {
			init(){
				this.getdutyData();
				this.getStatisticsData()				
			},
			changeDate(step){
				let date=new Date(this.dutyDate)
				date.setDate(date.getDate()+step)
				this.dutyDate=parseTime(date,'{y}-{m}-{d}')
				this.getdutyData()
			},
			getdutyData(){
				dutyApi.getAllByList({dutyDate:this.dutyDate}).then((res)=>{
					this.dutys=res.data
				})			
			},
			getStatisticsData(){		
				if(this.statisticsIdx===0){
					teamApi.counterByMember().then((res)=>{
						let data=res.data;
						this.statisticsData.items=data.map(item=>{
							return{
								name:item.teamName,
								num:item.count
							}
						});
					})
					teamApi.counterByCat().then((res)=>{
						let data=res.data;
						this.chartdata={
							yData:data.map(item=>item.count),
							xData:data.map(item=>item.teamCatTitle),
							name:"队伍建设"
						}
					})
				}
				if(this.statisticsIdx===1){
					goodsApi.totalByCat().then((res)=>{
						let data=res.data;
						this.statisticsData.items=data.map(item=>{
							return{
								name:item.goodsCatTitle,
								num:item.total
							}
						});
						this.chartdata={
							yData:data.map(item=>item.total),
							xData:data.map(item=>item.goodsCatTitle),
							name:"数量"
						}
					})
				}
				if(this.statisticsIdx===2){
					industryApi.counterByGroup().then((res)=>{
						let data=res.data;
						this.statisticsData.items=data.map(item=>{
							return{
								name:item.groupName,
								num:item.count
							}
						});
					})
					industryApi.counterByCat().then((res)=>{
						let data=res.data;
						this.chartdata={
							yData:data.map(item=>item.count),
							xData:data.map(item=>item.entCatTitle),
							name:"企业/单位数目"
						}
					})
				}
				if(this.statisticsIdx===3){
					dangerApi.counterByGroup().then((res)=>{
						let data=res.data;
						this.statisticsData.items=data.map(item=>{
							return{
								name:item.groupName,
								num:item.count
							}
						});
					})
					dangerApi.counterByCat().then((res)=>{
						let data=res.data;
						this.chartdata={
							yData:data.map(item=>item.count),
							xData:data.map(item=>item.dangerCatTitle),
							name:"隐患数目"
						}
					})
				}
				
			},
			linkTo(type){
				uni.navigateTo({
					url:`/pages/${type}/index`
				})
			},
			changeStatics({currentIndex}) {
				if (this.statisticsIdx !== currentIndex) {
					this.statisticsIdx = currentIndex				
					let ths=[{name:"救援队",unit:"人数"},{name:"物资分类",unit:"数量"},{name:"监管单位",unit:"企业/单位数目"},{name:"监管单位",unit:"隐患数目"}]
					this.statisticsData={
						name:ths[currentIndex].name,unit:ths[currentIndex].unit,
						items:[]
					},
					this.getStatisticsData()
				}
			},
			callPhone(phoneNumber) {
			 if(!phoneNumber)return
			  wx.makePhoneCall({
			    phoneNumber
			  })
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	padding: 20rpx;
	background-color: #f5f5f5;
	.decoration{
		padding-right: 6rpx;
		image{
			display: block;
			width: 30rpx;
			height: 30rpx;
		}
	}
	.tab-container{
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
		.item{
			width: 33.33%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;
			padding: 0 10rpx 20rpx;
			box-sizing: border-box;
			
			.icon{
					width: 80rpx;
					height: 80rpx;
				image{
					display: block;
					width: 80rpx;
					height: 80rpx;
				}
			}
			.name{
				padding-top: 16rpx;
				line-height: 1;
				font-size: 28rpx;
				color: #222222;
				text-align: center;
			}
		}
	}
	.duty-conatiner{
		margin-top: 40rpx;
		padding-bottom: 10rpx;
		background-color: #fff;
		.filter-box{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 20rpx;
			.time{
				padding:16rpx 20rpx;
				width: 260rpx;
				border: 1px solid #ddd;
				text-align: center;
				border-radius: 6px;
				margin: 0 40rpx;
				font-size: 32rpx;
				line-height: 1;
				color: #424242;
				font-weight: 600;
				box-shadow:0 0 4px rgba(0, 0, 0, 0.2);
			}
		}
		.isEmpty{
			text-align: center;
			font-size: 36rpx;
			line-height: 1;
			padding: 36rpx;
			color: #999999;
			background-color: #f8f8f8;
		}
		.duty-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
			padding: 20rpx 14rpx;
			margin: 20rpx;
			.icon,.icon image{
				display: block;
				width: 30rpx;
				height: 30rpx;
				flex-shrink: 0;
			}
			.avatar {
				image{
					width: 60rpx;
					height: 60rpx;	
				}
			}
			.posbox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
			}
			.info{
				flex: 1;
				padding:0 14rpx;
				.user,.phone{
					display: flex;
					align-items: center;
					.name,.phoneNumber{
						color: #999;
						font-size: 12px;
						font-weight: normal;
						// overflow: hidden;
						line-height: 1;
					}
				}
				.user{
					padding: 10rpx 0;
					.userinfo{
						display: flex;
						align-items: center;
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
	.statisticsTabs{
		padding: 0 16rpx 40rpx 16rpx;
	}
	.statisticscont{
		padding:0 16rpx;
	}
}
</style>