zd_wechatApp/pages/statistics/statistics.vue

<template>
	<view>
		<view class="view-bg">
			<text class="title-txt">工程用料统计</text>
			<view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						工程周期
					</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.projectValue.dictValue)" style="margin-top: 10;"
							@click="pickerShow('gczq')">
							<span style="color: darkgray;">请选择工程周期</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('gczq')">
							<span style="color: black;">{{projectValue.dictLabel}}</span>
						</view>
					</view>

				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						行政区
					</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.XZQValue.dictValue)" style="margin-top: 10;"
							@click="pickerShow('xzq')">
							<span style="color: darkgray;">请选择行政区</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('xzq')">
							<span style="color: black;">{{XZQValue.dictLabel}}</span>
						</view>
					</view>


				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						小区
					</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.XQValue.id)" style="margin-top: 10;" @click="pickerShow('xq')">
							<span style="color: darkgray;">请选择小区</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('xq')">
							<span style="color: black;">{{XQValue.name}}</span>
						</view>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						材料
					</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.materialValue.name)" style="margin-top: 10;"
							@click="pickerShow('cz')">
							<span style="color: darkgray;">请选择材料</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('cz')">
							<span style="color: black;">{{materialValue.name}}</span>
						</view>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						规格
					</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.specificationValue.name)" style="margin-top: 10;"
							@click="pickerShow('gg')">
							<span style="color: darkgray;">请选择规格</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('gg')">
							<span style="color: black;">{{specificationValue.name}}</span>
						</view>
					</view>
				</view>

			</view>
			<uni-divider></uni-divider>
			<uni-table ref="table">
				<uni-tr>
					<uni-th width="20" align="center"></uni-th>
					<uni-th width="20" align="center">预计用量</uni-th>
					<uni-th width="20" align="center">实际用量</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in materialUsageList" :key="index">
					<uni-td>{{ item.name }}</uni-td>
					<uni-td>{{ item.estimatedUsage }}</uni-td>
					<uni-td>{{ item.actualUsage }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<view class="view-bg">
			<text class="title-txt">工程进度统计</text>
			<view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">工程周期</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.projectValue2.dictValue)" style="margin-top: 10;"
							@click="pickerShow('gczq2')">
							<span style="color: darkgray;">请选择工程周期</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('gczq2')">
							<span style="color: black;">{{projectValue2.dictLabel}}</span>
						</view>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						行政区
					</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.XZQValue2.dictValue)" style="margin-top: 10;"
							@click="pickerShow('xzq2')">
							<span style="color: darkgray;">请选择行政区</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('xzq2')">
							<span style="color: black;">{{XZQValue2.dictLabel}}</span>
						</view>
					</view>


				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left"> 小区</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.XQValue2.id)" style="margin-top: 10;" @click="pickerShow('xq2')">
							<span style="color: darkgray;">请选择小区</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('xq2')">
							<span style="color: black;">{{XQValue2.name}}</span>
						</view>
					</view>

				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">楼栋</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.LDValue2.id)" style="margin-top: 10;" @click="pickerShow('ld2')">
							<span style="color: darkgray;">请选择楼栋</span>
						</view>
						<view style="margin-top: 10;" @click="pickerShow('ld2')">
							<span style="color: black;">{{LDValue2.name}}</span>
						</view>
					</view>

				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">单元</view>
					<view class="uni-list-cell-db">
						<view v-if="this.isEmpty(this.DYValue2.id)" style="margin-top: 10;" @click="pickerShow('dy2')">
							<span style="color: darkgray;">请选择单元</span>
						</view>
						<view v-else style="margin-top: 10;" @click="pickerShow('dy2')">
							<span style="color: black;">{{DYValue2.name}}</span>
						</view>
					</view>

				</view>
				<!-- xx -->

			</view>
			<uni-divider></uni-divider>
			<view class="view_bg_build">
				<uni-grid :column="roomCount" :highlight="true" @change="change">
					<uni-grid-item v-for="(item, index) in roomList" :index="index" :key="index">
						<view class="centered" style="background-color: #fff;">
							<!-- <uni-icons type="image" :size="30" color="#777" /> -->
							<text>{{item.roomNumber}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

		<SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
			subtitleKey="id" v-model="name"></SelectPicker>

		<SelectPicker :list="dictOptions" @change="changeSelect" v-if="openDict" @close="closeDict" titleKey="dictLabel"
			subtitleKey="dictValue" v-model="dictLabel"></SelectPicker>
	</view>
</template>

<script>
	import SelectPicker from '../../components/selectPicker/select_picker.vue'
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		getAreaList,
		getBuildingList,
		getUnitList,
		getHousesList,
		getEnginMaterialQualityList,
		getEnginSpecificationsList,
		getMunicipalStatisticsData,
		getObtainRoomcCompletionInformationList,
	} from '@/api/common'

	export default {
		components: {
			SelectPicker
		},
		data() {
			return {
				villageIndex: 0,
				specificationIndex: 0,
				materialIndex: 0,
				villageIndex2: 0,
				buildIndex: 0,
				unitIndex: 0,
				open: false,
				openDict: false,
				selectList: [],
				dictOptions: [],
				XQList: [],
				LDList: [],
				DYList: [],
				projectValue: {},
				XZQValue: {},
				XQValue: {},


				XQList2: [],
				LDList2: [],
				DYList2: [],

				projectValue2: {},
				XZQValue2: {},
				XQValue2: {},
				LDValue2: {},
				DYValue2: {},
				specificationValue: {},
				specificationList: [],
				materialValue: {},
				materialList: [],
				// specificationList: [{
				// 	name: '规格001'
				// }, {
				// 	name: '规格002'
				// }, {
				// 	name: '规格003'
				// }, {
				// 	name: '规格004'
				// }],
				// materialList: [{
				// 	name: '材料001'
				// }, {
				// 	name: '材料002'
				// }, {
				// 	name: '材料003'
				// }, {
				// 	name: '材料004'
				// }],
				// buildList: [{
				// 	name: '楼栋001'
				// }, {
				// 	name: '楼栋002'
				// }, {
				// 	name: '楼栋003'
				// }, {
				// 	name: '楼栋004'
				// }],
				// unitList: [{
				// 	name: '单元001'
				// }, {
				// 	name: '单元002'
				// }, {
				// 	name: '单元003'
				// }, {
				// 	name: '单元004'
				// }],

				materialUsageList: [
				// 	{
				// 	name: '0.5cm钢',
				// 	estimatedUsage: 1210,
				// 	actualUsage: 6852
				// }, {
				// 	name: '1.0cm钢',
				// 	estimatedUsage: 1680,
				// 	actualUsage: 6852
				// }, {
				// 	name: '1.5cm钢',
				// 	estimatedUsage: 1503,
				// 	actualUsage: 6852
				// },
				],
				roomList: [{
					roomNumber: '601',
					status: '0'
				}, {
					roomNumber: '602',
					status: '0'
				}, {
					roomNumber: '603',
					status: '0'
				}, {
					roomNumber: '604',
					status: '0'
				}, {
					roomNumber: '501',
					status: '0'
				}, {
					roomNumber: '502',
					status: '0'
				}, {
					roomNumber: '503',
					status: '0'
				}, {
					roomNumber: '504',
					status: '0'
				}, {
					roomNumber: '401',
					status: '0'
				}, {
					roomNumber: '402',
					status: '0'
				}, {
					roomNumber: '403',
					status: '0'
				}, {
					roomNumber: '404',
					status: '0'
				}, {
					roomNumber: '301',
					status: '0'
				}, {
					roomNumber: '302',
					status: '0'
				}, {
					roomNumber: '303',
					status: '0'
				}, {
					roomNumber: '304',
					status: '0'
				}, {
					roomNumber: '201',
					status: '0'
				}, {
					roomNumber: '202',
					status: '0'
				}, {
					roomNumber: '203',
					status: '0'
				}, {
					roomNumber: '204',
					status: '0'
				}, {
					roomNumber: '101',
					status: '0'
				}, {
					roomNumber: '102',
					status: '0'
				}, {
					roomNumber: '103',
					status: '0'
				}, {
					roomNumber: '104',
					status: '0'
				}],
				roomCount: 4
			}
		},
		created() {
		},
		methods: {
			isEmpty(str) {
				return (!str || 0 === str.length);
			},
			pickerShow(e) {
				this.type = e; //赋值类型
				if (e == 'gczq') { //工程周期
					this.openDict = true;
					getDicts("engin_cycle").then(response => {
						this.dictOptions = response.data;
					});
				} else if (e == 'xzq') {
					if (this.isEmpty(this.projectValue.dictValue)) {
						this.$modal.msg('请选择工程周期')

					} else {
						this.openDict = true;
						getDicts("district").then(response => {
							this.dictOptions = response.data;
						});
					}
				} else if (e == 'xq') { //小区
					if (this.isEmpty(this.XZQValue.dictValue)) {
						this.$modal.msg('请选择行政区')

					} else {
						this.open = true;
						this.selectList = this.XQList;
					}
				} else if (e == 'ld') { //楼栋

					if (this.isEmpty(this.XQValue.id)) {
						this.$modal.msg('请选择小区')

					} else {
						this.open = true;
						this.selectList = this.LDList;
					}

				} else if (e == 'dy') { //单元
					if (this.isEmpty(this.LDValue.id)) {
						this.$modal.msg('请选择楼栋')

					} else {
						this.open = true;
						this.selectList = this.DYList;
					}
				} else if (e == 'gczq2') { //工程周期
					this.openDict = true;
					getDicts("engin_cycle").then(response => {
						this.dictOptions = response.data;
					});
				} else if (e == 'xzq2') { //行政区2
					if (this.isEmpty(this.projectValue2.dictValue)) {
						this.$modal.msg('请选择工程周期')

					} else {
						this.openDict = true;
						getDicts("district").then(response => {
							this.dictOptions = response.data;
						});
					}
				} else if (e == 'xq2') { //小区2
					if (this.isEmpty(this.XZQValue2.dictValue)) {
						this.$modal.msg('请选择行政区')

					} else {
						this.open = true;
						this.selectList = this.XQList2;
					}
				} else if (e == 'ld2') { //楼栋2

					if (this.isEmpty(this.XQValue2.id)) {
						this.$modal.msg('请选择小区')

					} else {
						this.open = true;
						this.selectList = this.LDList2;
					}

				} else if (e == 'dy2') { //单元2
					if (this.isEmpty(this.LDValue2.id)) {
						this.$modal.msg('请选择楼栋')

					} else {
						this.open = true;
						this.selectList = this.DYList2;
					}
				} else if (e == 'gg') { //规格
					if (this.isEmpty(this.materialValue.id)) {
						this.$modal.msg('请选择材料')

					} else {
						this.open = true;
						this.selectList = this.materialList;

					}
				} else if (e == 'cz') { //材料
					this.open = true;
					getEnginMaterialQualityList("民用工程").then(response => {
						this.selectList = response.data;
					});
				}
			},
			changeSelect(item, index) {
				// this.index = index;
				// this.address = item.communityName;
				this.open = false;
				this.openDict = false;
				if (this.type == 'xzq') {
					this.XZQValue = item;

					//根据行政区id获取小区数据
					this.XQValue = ''; //重置小区数据
					this.LDValue = ''; //重置楼栋数据
					this.DYValue = ''; //重置单元数据
					this.FJValue = ''; //重置房间数据
					getAreaList(item.dictValue).then(res => {
						this.XQList = res.data;
					})
				} else if (this.type == 'gczq') {
					this.projectValue = item

				} else if (this.type == 'xq') {
					this.XQValue = item;
					//根据小区id 获取楼栋数据
					this.LDValue = ''; //重置楼栋数据
					this.DYValue = ''; //重置单元数据
					this.FJValue = ''; //重置房间数据
					// getBuildingList(item.id).then(res => {
					// 	this.LDList = res.data
					// 	// console.log("楼栋=", res)
					// })
					this.queryMaterialsUsedList();
				} else if (this.type == 'ld') {
					this.LDValue = item;
					//根据楼栋ID 获取单元数据
					this.DYValue = ''; //重置单元数据
					this.FJValue = ''; //重置房间数据
					getUnitList(item.id).then(res => {
						this.DYList = res.data
						// console.log("单元=", res)
					})

				} else if (this.type == 'dy') {
					this.DYValue = item;
				} else if (this.type == 'gczq2') {
					this.projectValue2 = item

				} else if (this.type == 'xzq2') {
					this.XZQValue2 = item;

					//根据行政区id获取小区数据
					this.XQValue2 = ''; //重置小区数据
					this.LDValue2 = ''; //重置楼栋数据
					this.DYValue2 = ''; //重置单元数据
					this.FJValue2 = ''; //重置房间数据
					getAreaList(item.dictValue).then(res => {
						this.XQList2 = res.data;
					})
				} else if (this.type == 'xq2') { //小区2
					this.XQValue2 = item;
					//根据小区id 获取楼栋数据
					this.LDValue2 = ''; //重置楼栋数据
					this.DYValue2 = ''; //重置单元数据
					this.FJValue2 = ''; //重置房间数据
					getBuildingList(item.id).then(res => {
						this.LDList2 = res.data
						// console.log("楼栋=", res)
					})
				} else if (this.type == 'ld2') {
					this.LDValue2 = item;
					//根据楼栋ID 获取单元数据
					this.DYValue2 = ''; //重置单元数据
					this.FJValue2 = ''; //重置房间数据
					getUnitList(item.id).then(res => {
						this.DYList2 = res.data
						// console.log("单元=", res)
					})

				} else if (this.type == 'dy2') {
					this.DYValue2 = item;
				} else if (this.type == 'gg') { //规格
					this.specificationValue = item;
					this.queryMaterialsUsedList();
				} else if (this.type == 'cz') { //材料
					this.materialValue = item;
					this.specificationValue = ''; //重置规格
					//根据材质ID 获取规格数据
					getEnginSpecificationsList(item.id).then(res => {
						this.materialList = res.data
					})
				}
			},
			//关闭弹窗
			close(e) {
				this.open = false
			},
			//关闭弹窗
			closeDict(e) {
				this.openDict = false
			},
			queryMaterialsUsedList(){
				debugger
				if(this.isEmpty(this.XQValue.id)){
					this.$modal.msg('请选择小区')
					return;
				}
				debugger
				if (this.isEmpty(this.specificationValue.id)) {
					this.$modal.msg('请选择规格')
					return;
				}
				let param={
					areaId:this.XQValue.id,
					realityQuality:this.materialValue.id,
					realitySpecifications:this.specificationValue.id,
				};
				getMunicipalStatisticsData(param).then(res=>{
					this.materialUsageList=res.data;
				})
			},
		}
	}
</script>

<style>
	.marginLeft5 {
		margin-left: 5px;
	}

	.title-txt {
		font-size: 15px;
		font-weight: bold;
		color: black;
	}

	.content-txt {
		font-size: 10px;
		font-weight: bold;
		color: black;
	}

	.view-bg {
		margin-left: 8px;
		margin-right: 8px;
		margin-top: 8px;
		padding: 10px;
		background-color: #fff;
		border-radius: 5px;
	}

	.uni-list
	/* {
		background-color: #FFFFFF;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	} */

	.uni-list-cell-db,
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-cell-left {
		white-space: nowrap;
		font-size: 28rpx;
	}

	.centered {
		text-align: center;
		background-color: #e2f4ff;

	}

	.text {
		background-color: #e2f4ff;
		height: 20rpx;
	}

	.view_bg_build {
		background-color: #e2f4ff;
		padding: 10rpx;
		margin: 20rpx;
	}
</style>