zdsz_WeChatApplet/pages/chart/chartDetail.vue

<template>
	<view>
		<view class="" style="height: 500rpx; margin-top: 200rpx;">
			<view class="align-items" style="position: absolute; top: 90rpx; left: 0;" >
				<back></back>
			</view>
			<view class="font-fifty-six SourceHanSansCN choose" @click="openHouse()" v-if="type != 'ExamineWorker'">
				{{house ? house :'全部小区'}}
				<u-popup v-model="pop" mode="bottom" height="1000rpx">
					<view style="margin: 20rpx;">
						<u-search placeholder="请输入搜索内容" v-model="keyword" :action-style="{'font-size':'40rpx'}" @custom="searchinfo()"></u-search>
					</view>
					<view>
						<scroll-view scroll-y="true" style="height: 600rpx; text-align: center;">
							<view v-for="(item,index) in chooseHouseList" :key="item.value" >
								<view :class="current === index ? 'active' : '' " style="color: #000000;" @click="active(item,index)">
									{{item.label}}
								</view>
							</view>
						</scroll-view>
						<view class="">
							<button type="default" class="font-fifty-six" @click="search()">确定</button>
						</view>
						<view class="">
							<button type="default" @click="pop = false;"  class="font-fifty-six">取消</button>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="font-fifty-six SourceHanSansCN choose" v-if="type != 'ExamineWorker'" @click="reset()">
				重置
			</view>
			<view class="font-fifty-six SourceHanSansCN choose" @click="openWorker()" v-if="type == 'ExamineWorker'">
				{{worker ? worker : '全部工人'}}
				<u-select v-model="workShow" :list="workList" @confirm="workConfirm()"></u-select>
			</view>
			<view>
				<qiun-data-charts type="pie" :chartData="chartData" background="none" canvas2d="true" canvasId="ssssss"/>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '@/api/index.js'
	export default {
		data(){
			return {
				chartData: {
					series: [{
						data: []
					}]
				},
				type:'',
				house:'',
				houseId:'',
				worker:'',
				workerId:'',

				chooseHouseList:[],
				workList:[],
				houseShow:false,
				workShow:false,
				keyword:'',
				pop:false,
				current:-1
			}
		},
		onLoad(e) {
			this.type = e.type;
			if(this.type == 'examineArea'){
				this.getExamineArea();
			}else if(this.type == 'ExamineWorker'){
				this.getwork();
				this.getExamineWorker()
			}else if(this.type == 'getExamineServe'){
				this.getExamineServe()
			}else if(this.type == 'getExaminePipeType'){
				this.getExaminePipeType()
			}else if(this.type == 'getExaminePipeLength'){
				this.getExaminePipeLength()
			}else if(this.type == 'getExamineValveType'){
				this.getExamineValveType()
			}else if(this.type =='getAreaSum'){
				this.getAreaSum()
			}
		   this.getArea();
		},
		methods:{
			openHouse(){
				this.pop = !this.pop;
			},
			openWorker(){
				this.workShow = !this.workShow;
			},
			workConfirm(e){
				this.worker = e[0].label;
				this.workerId = e[0].value;
				this.getExamineWorker(this.workerId)
			},
			reset(){
				this.houseId = '';
				this.getArea();
				if(this.type == 'examineArea'){
					this.getExamineArea(this.houseId)
				}else if(this.type == 'getExamineServe'){
					this.getExamineServe(this.houseId)
				}else if(this.type == 'getExaminePipeType'){
					this.getExaminePipeType(this.houseId)
				}else if(this.type == 'getExaminePipeLength'){
					this.getExaminePipeLength(this.houseId)
				}else if(this.type == 'getExamineValveType'){
					this.getExamineValveType(this.houseId)
				}else if(this.type =='getAreaSum'){
					this.getAreaSum(this.houseId)
				}
				this.house = null;
				this.current = -1;
				this.$UTILS.showPrompt('重置成功！')
			},
			search(){
				this.house = this.housename
				if(this.type == 'examineArea'){
				  this.getExamineArea(this.houseId)
				}else if(this.type == 'getExamineServe'){
					this.getExamineServe(this.houseId)
				}else if(this.type == 'getExaminePipeType'){
					this.getExaminePipeType(this.houseId)
				}else if(this.type == 'getExaminePipeLength'){
					this.getExaminePipeLength(this.houseId)
				}else if(this.type == 'getExamineValveType'){
					this.getExamineValveType(this.houseId)
				}else if(this.type =='getAreaSum'){
					this.getAreaSum(this.houseId)
				}
				this.pop = false;
			},
			searchinfo(){
				service.getArea({name:this.keyword}).then(res => {
					this.chooseHouseList = [];
					res.forEach((item, index) => {
						this.chooseHouseList.push({
							value: item.id,
							label: item.name,
							selectType:'xiaoqu'
						})
					})
				})	
				this.keyword = null;
			},
			active(item,index){
				this.current = index;
				this.housename = item.label;
				this.houseId = item.value;
				this.selectType = item.selectType;
			},
			getArea(){
				service.getArea().then(res => {
					this.chooseHouseList = [];
					res.forEach((item, index) => {
						this.chooseHouseList.push({
							value: item.id,
							label: item.name,
						})
					})
				})
			},
			//获取工人列表
			getwork(){
				service.getWorker().then(res => {
					this.workList = [];
					res.forEach((item, index) => {
						this.workList.push({
							value: item.id,
							label: item.name,
						})
					})
				})
			},
			//小区合格率
			getExamineArea(houseId) {
				service.getExamineArea({areaId:this.houseId}).then(res => {
					this.chartData.series[0].data = res
					console.log('this.chartData', this.chartData)
				})
			},
			//工人合格率
			getExamineWorker(workerId) {
				service.getExamineWorker({workerId:this.workerId}).then(res => {
					this.chartData.series[0].data = res
					console.log('getExamineWorker', res)
				})
			},
			//小区服务统计
			getExamineServe(serveId) {
				service.getExamineServe({id:this.houseId}).then(res => {
					this.chartData.series[0].data = res
					console.log('getExamineServe', res)
				})
			},
			//管材类别统计
			getExaminePipeType(pipeTypeId) {
				service.getExaminePipeType({id:this.houseId}).then(res => {
					this.chartData.series[0].data = res
					console.log('getExaminePipeType', res)
				})
			},
			//管材长度统计
			getExaminePipeLength(pipeLengthId) {
				service.getExaminePipeLength({id:this.houseId}).then(res => {
					this.chartData.series[0].data = res
					console.log('getExaminePipeLength', res)
				})
			},
			//自闭阀类别统计
			getExamineValveType(valveTypeId) {
				service.getExamineValveType({id:this.houseId}).then(res => {
					this.chartData.series[0].data = res
					console.log('getExamineValveType', res)
				})
			},
			//小区汇总统计
			getAreaSum(areaSumId) {
				service.getAreaSum({areaId:this.houseId}).then(res => {
					this.chartData.series[0].data = res
					console.log('getAreaSum', res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choose {
		text-align: center;
		padding: 20rpx;
		margin: 30rpx;
		color: #FFFFFF;
		background: #43CEB1;
		border-radius: 64rpx;
	}
	.active{
	   background-color: #1890FF;
	}
</style>