zd_wechatApp/pages/statistics/statistics.vue

<template>
	<view>
		<view v-if="isLeader=='sys_user'">
			<scroll-view>
				<view class="view-bg">
					<text class="title-txt">工程用料统计</text>
					<view>
						<view class="uni-list-cell" style="border-bottom: 1px solid #f8f8f8;">
							<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>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else style="margin-top: 10;" @click="pickerShow('xzq')">
									<span style="color: black;">{{XZQValue.dictLabel}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>


						</view>
						<view class="uni-list-cell" style="border-bottom: 1px solid #f8f8f8;">
							<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>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else style="margin-top: 10;" @click="pickerShow('xq')">
									<span style="color: black;">{{XQValue.name}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>
						</view>
						<view class="uni-list-cell" style="border-bottom: 1px solid #f8f8f8;">
							<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>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else style="display: flex;align-items: center; justify-content: flex-end;">
									<view style="margin-top: 10; " @click="pickerShow('cz')">
										<span style="color: black;">{{materialValue.name}}</span>
										<!-- <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image> -->
									</view>

									<image :src="loadImgSrc('icon_close.png')"
										style=" width: 15px; height: 15px;margin-left:20rpx ;margin-right: -20rpx;"
										@click="clearMaterialInfo">
									</image>
								</view>
							</view>
						</view>
						<view class="uni-list-cell" style="border-bottom: 1px solid #f8f8f8;">
							<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>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else style="display: flex;align-items: center; justify-content: flex-end;">
									<view style="margin-top: 10;" @click="pickerShow('gg')">
										<span style="color: black;">{{specificationValue.name}}</span>
										<!-- <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image> -->
									</view>


									<image :src="loadImgSrc('icon_close.png')"
										style=" width: 15px; height: 15px;margin-left:20rpx ;margin-right: -20rpx;"
										@click="clearSpecificationInfo">
									</image>
								</view>
							</view>
						</view>

					</view>


					<view class="table">
						<view class="felx-row">
							<view class="h-tr" style="flex: 1">名称</view>
							<view class="h-tr" style="flex: 1">材料</view>
							<view class="h-tr" style="flex: 1;align-items: center;">预计用量</view>
							<view class="h-tr" style="flex: 1">实际用量</view>
						</view>
					</view>
					<view class="felx-row" v-for="(item, index) in materialUsageList" :key="index">
						<view class="h-td" style="flex: 1">{{ item.realityQuality }}</view>
						<view class="h-td" style="flex: 1">{{ item.realitySpecifications }}</view>
						<view class="h-td" style="flex: 1">{{ item.estimatedSize }}</view>
						<view class="h-td" style="flex: 1">{{ item.realitySize }}</view>
					</view>


				</view>

				<view class="view-bg" style="margin-bottom: 40rpx;">
					<text class="title-txt">工程进度统计</text>
					<view>
						<view class="uni-list-cell" style="border-bottom: 1px solid #f8f8f8;">
							<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>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else style="margin-top: 10;" @click="pickerShow('xzq2')">
									<span style="color: black;">{{XZQValue2.dictLabel}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>


						</view>
						<view class="uni-list-cell" style="border-bottom: 1px solid #f8f8f8;">
							<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>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else style="margin-top: 10;" @click="pickerShow('xq2')">
									<span style="color: black;">{{XQValue2.name}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>

						</view>
						<view class="uni-list-cell" style="border-bottom: 1px solid #f8f8f8;">
							<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>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view style="margin-top: 10;" @click="pickerShow('ld2')">
									<span style="color: black;">{{LDValue2.name}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>

						</view>
						<view class="uni-list-cell" style="border-bottom: 1px solid #f8f8f8;">
							<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>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else style="margin-top: 10;" @click="pickerShow('dy2')">
									<span style="color: black;">{{DYValue2.name}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>

						</view>

					</view>
					<image :src="loadImgSrc('lou-img-bg.png')" style="width: 110%;
    height: 121px;
    position: absolute;
    bottom: 15px;
    left: -5px;
    z-index: 1;
"></image>
					<scroll-view :scroll-x="true" class="view_bg_build" v-if="roomList.length > 0">
						<view class="HuaDongBiao">
							<view class="NeiRong" v-for="(item,index) in roomList" :key="index">
								<view class="Fang" v-for="(item2, index2) in roomList[index]" :key="index2">
									<view v-if="item2.roomStatus=='施工中'" class="ShiGongZhong" @click="goHistory(item2)">
										{{ item2.roomName }}
									</view>
									<view v-else-if="item2.roomStatus=='未施工'" class="WeiShiGong">{{ item2.roomName }}
									</view>
									<view v-else class="JunGong" @click="goHistory(item2)">{{ item2.roomName }}</view>
								</view>
							</view>
						</view>
						<view style=" width: 48rpx;height: 63rpx;background: #C7EAFF; position:relative; left: 50%; transform:
										translateX(-50%); bottom: -10rpx;">
						</view>

					</scroll-view>
					<view v-if="roomList.length == 0" style="padding:50rpx;text-align: center;">暂无数据</view>
					<view style="align-items: center; margin-top: 20rpx;">
						<view style="display: flex;align-items: center;justify-content:center">
							<image class="block-iv" :src="loadImgSrc('ic_legend.png')"></image>
							<text style="margin-right: 20px;margin-left: 5px;">图例: </text>
							<div class="block-iv" style="background-color: #80d9ae;"></div>
							<text style="margin-right: 20px;margin-left: 5px;">竣工</text>
							<div class="block-iv" style="background-color: #5bd3ff;"></div>
							<text style="margin-right: 20px;margin-left: 5px;">施工中</text>
							<div class="block-iv" style="background-color: #ffc881;"></div>
							<text style="margin-right: 20px;margin-left: 5px;">未施工</text>
						</view>

					</view>
				</view>


			</scroll-view>
		</view>
		<view v-else-if="isLeader=='app_user'">





			<view class="background">


				<view>

					<view
						style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between;margin-bottom: 10px;">
						筛选

						<image v-if="change==false" :src="loadImgSrc('icon_user_open.png')" @click='change1'
							style="display: flex;justify-content:flex-end; margin-right: 10px;width: 15px;height: 15px;">
						</image>
						<image v-if="change==true" :src="loadImgSrc('icon_user_close.png')" @click='change1'
							style="display: flex;justify-content:flex-end; margin-right: 10px;width: 15px;height: 15px;">
						</image>
					</view>
				</view>
				<view v-show="change" style="padding-right: 10px;">
					<view class="uni-list">
						<view class="container" style="border-bottom: 1px solid #f8f8f8;">
							<view class="uni-list-cell-left">
								工程项
							</view>
							<view v-if="this.isEmpty(this.EngineeringValue)" class="uni-list-cell-db"
								style="margin-top: 10;" @click="pickerShow('gcx')">
								<span style="color: darkgray;">请选择工程项</span>
								<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
							</view>
							<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('gcx')">
								<span style="color: black;">{{EngineeringValue}}</span>
								<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
							</view>
						</view>
					</view>
					<view v-if="EngineeringValue=='民用工程'||EngineeringValue=='开栓'">
						<view class="uni-list">
							<view class="container" style="border-bottom: 1px solid #f8f8f8;">
								<view>
									行政区
								</view>
								<view v-if="this.isEmpty(this.XZQValue3.dictValue)" style="margin-top: 10;"
									@click="pickerShow('xzq3')">
									<span style="color: darkgray;">请选择行政区</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else class="uni-list-cell-db" style="margin-top: 10;"
									@click="pickerShow('xzq3')">
									<span style="color: black;">{{XZQValue3.dictLabel}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>

							</view>
						</view>
						<view class="uni-list">
							<view class="container" style="border-bottom: 1px solid #f8f8f8;">
								<view>
									小区
								</view>

								<view v-if="this.isEmpty(this.XQValue3.id)" class="uni-list-cell-db"
									style="margin-top: 10;" @click="pickerShow('xq3')">
									<span style="color: darkgray;">请选择小区</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else class="uni-list-cell-db" style="margin-top: 10;"
									@click="pickerShow('xq3')">
									<span style="color: black;">{{XQValue3.name}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>
						</view>
						<view class="uni-list">
							<view class="container" style="border-bottom: 1px solid #f8f8f8;">
								<view class="uni-list-cell-left">
									楼栋
								</view>
								<view v-if="this.isEmpty(this.LDValue3.id)" class="uni-list-cell-db"
									style="margin-top: 10;" @click="pickerShow('ld3')">
									<span style="color: darkgray;">请选择楼栋</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else class="uni-list-cell-db" style="margin-top: 10;"
									@click="pickerShow('ld3')">
									<span style="color: black;">{{LDValue3.name}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>
						</view>
						<view class="uni-list" style="margin-top: 10;">
							<view class="container" style="border-bottom: 1px solid #f8f8f8;">
								<view class="uni-list-cell-left">
									单元
								</view>
								<view v-if="this.isEmpty(this.DYValue3.id)" class="uni-list-cell-db"
									style="margin-top: 10;" @click="pickerShow('dy3')">
									<span style="color: darkgray;">请选择单元</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else class="uni-list-cell-db" style="margin-top: 10;"
									@click="pickerShow('dy3')">
									<span style="color: black;">{{DYValue3.name}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>
						</view>
						<view class="uni-list">
							<view class="container" style="border-bottom: 1px solid #f8f8f8;">
								<view class="uni-list-cell-left">
									房间
								</view>
								<view v-if="this.isEmpty(this.FJValue3.id)" class="uni-list-cell-db"
									style="margin-top: 10;" @click="pickerShow('fj3')">
									<span style="color: darkgray;">请选择房间</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else class="uni-list-cell-db" style="margin-top: 10;"
									@click="pickerShow('fj3')">
									<span style="color: black;">{{FJValue3.name}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>
						</view>

						<view class="uni-list" v-if="EngineeringValue=='民用工程'">
							<view class="container" style="border-bottom: 1px solid #f8f8f8;">
								<view class="uni-list-cell-left">
									工程类型
								</view>
								<view v-if="this.isEmpty(this.ProjectType.dictValue)" class="uni-list-cell-db"
									style="margin-top: 10;" @click="pickerShow('gclx')">
									<span style="color: darkgray;">请选择工程类型</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else class="uni-list-cell-db" style="margin-top: 10;"
									@click="pickerShow('gclx')">
									<span style="color: black;">{{ProjectType.dictLabel}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>
						</view>
					</view>


					<view v-if="EngineeringValue!='开栓'">
						<view class="container" style="border-bottom: 1px solid #f8f8f8;"
							v-if="EngineeringValue!='民用工程'">
							<view class="uni-list-cell-left">
								工程名称
							</view>

							<view class="uni-list-cell-db" style="margin-top: 10;">
								<input class="uni-input" type="text" v-model="EngineeringName" maxlength="80"
									placeholder="请输入工程名称"
									style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
							</view>
						</view>
						<view class="uni-list"
							v-if="EngineeringValue=='工业工程'||EngineeringValue=='带气封堵施工'||EngineeringValue=='民用工程'">
							<view class="container" style="border-bottom: 1px solid #f8f8f8;">
								<view class="uni-list-cell-left">
									工程分类
								</view>
								<view v-if="this.isEmpty(this.ProjectClassification.dictValue)" class="uni-list-cell-db"
									style="margin-top: 10;" @click="pickerShow('gcfl')">
									<span style="color: darkgray;">请选择工程分类</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else class="uni-list-cell-db" style="margin-top: 10;"
									@click="pickerShow('gcfl')">
									<span style="color: black;">{{ProjectClassification.dictLabel}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>
						</view>
						<view class="uni-list"
							v-if="EngineeringValue=='市政工程'||EngineeringValue=='顶管工程'||EngineeringValue=='民用工程'||EngineeringValue=='基建工程'">
							<view class="container" style="border-bottom: 1px solid #f8f8f8;">
								<view class="uni-list-cell-left">
									工程步骤
								</view>
								<view v-if="this.isEmpty(this.ProjectSteps.dictValue)" class="uni-list-cell-db"
									style="margin-top: 10;" @click="pickerShow('gcbz')">
									<span style="color: darkgray;">请选择工程步骤</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
								<view v-else class="uni-list-cell-db" style="margin-top: 10;"
									@click="pickerShow('gcbz')">
									<span style="color: black;">{{ProjectSteps.dictLabel}}</span>
									<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-list">
						<view class="container" style="border-bottom: 1px solid #f8f8f8;">
							<view class="uni-list-cell-left">
								审核状态
							</view>
							<view v-if="this.isEmpty(this.ReviewStatus.dictValue)" class="uni-list-cell-db"
								style="margin-top: 10;" @click="pickerShow('shzt')">
								<span style="color: darkgray;">请选择审核状态</span>
								<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
							</view>
							<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('shzt')">
								<span style="color: black;">{{ReviewStatus.dictLabel}}</span>
								<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
							</view>
						</view>

					</view>
					<button class="tj-btn" style="margin: 40rpx 90rpx;" @click="serch"> 搜索</button>
				</view>
			</view>
			<cc-pullScroolView class="pullScrollView" ref="pullScroll" :pullDown="pullDown" :isDownLoading="true">
				<view class="notice" v-for="(item,index) in list" :key="index">
					<view class="justify-content" @click="chooseNode(item)">
						<view v-if="EngineeringValue=='民用工程'">
							<view class="font-forty">
								{{item.areaName+item.buildingName+item.unitName+item.houseName+(item.enginType=='new_built'? '-新建':'-旧改')+'-'+item.enginClassificationName}}
							</view>
							<view class="font-twenty-eight gray" v-for="(state,stateIndex) in item.nodeReViewStateList"
								:key="stateIndex" v-if="state.Type!='开栓'">
								{{state.Type}}-{{state.state == 1 ? '审核通过': (state.content == '暂未审核' ? '暂未审核':'审核未通过')}}
								<view v-if="state.content != '暂未审核'">原因：{{state.content}}</view>
							</view>
						</view>
						<view v-if="EngineeringValue=='开栓'">
							<view class="font-forty">
								{{item.areaName+item.buildingName+item.unitName+item.houseName}}
							</view>
							<view class="font-twenty-eight gray">
								{{item.state == 0 ? '审核不通过': (item.state == 1?'审核通过':'未审核')}}
							</view>
						</view>
						<view
							v-if="EngineeringValue=='顶管工程'||EngineeringValue=='基建工程'||EngineeringValue=='危险工程'||EngineeringValue=='市政工程'||EngineeringValue=='工业工程'||EngineeringValue=='带气封堵施工'">
							<view class="font-forty">
								工程名称：{{item.enginName}}
							</view>
							<view class="font-twenty-eight gray" v-for="(state,stateIndex) in item.status"
								:key="stateIndex">
								<view v-if="EngineeringValue=='工业工程'">{{state.reviewStatus}}</view>

								<view v-else>{{state.type}}-{{state.reviewStatus}}</view>
							</view>
						</view>

						<view class="font-twenty-eight gray">
							{{item.createTime}}
						</view>
					</view>
				</view>
			</cc-pullScroolView>


		</view>

		<view class="share">
			<view :class="{'share-box': shareState}" @click="handleHiddenShare">
			</view>
			<view class="share-item" :class="{'share-show': shareState}">
				<view class="share-to">
					<text>请选择</text>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="content">
						<view class="block" v-for="(item, index) in typeList" :key="index" @click="showTypeSheet(item)"
							v-if="item.Type!='开栓'">
							<text>{{item.Type}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="cancel" @click.stop="handleHiddenShare">
					<text>取消</text>
				</view>
			</view>
		</view>

		<bottom-sheet ref="refShare" :data="historyList"></bottom-sheet>
		<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 bottomSheet from '../../components/bottomSheet/bottomSheet.vue'
	import CCBProjectList from '../../uni_modules/cc-pullScroolView/components/cc-pullScroolView/cc-pullScroolView.vue';
	import {
		gethistoryList,
		getKShistoryList,
	} from '@/api/common'

	import {
		getUserType,
		getUserRole
	} from '@/utils/auth';
	import {
		getDicts
	} from "@/api/system/dict/data";
	import user from '@/store/modules/user'
	import {
		getAreaList,
		getBuildingList,
		getUnitList,
		getHousesList,
		getEnginMaterialQualityList,
		getEnginSpecificationsList,
		getMunicipalStatisticsData,
		getObtainRoomcCompletionInformationList,
		getRoomProjectId,
		getRoomProjectList,
		getHistoryByUserList,
	} from '@/api/common'

	export default {
		components: {
			SelectPicker,
			CCBProjectList,
			bottomSheet

		},
		data() {
			return {
				historyList: {}, //历史数据
				userRole: getUserRole(),
				tabValue: ['旧改', '新建'],
				tabIndex: 0,
				isLeader: '',
				list: [],
				newlist: [],
				pageSize: 10,
				totalNum: '',
				pageNum: 1,
				typeList: '',
				villageIndex: 0,
				specificationIndex: 0,
				materialIndex: 0,
				villageIndex2: 0,
				buildIndex: 0,
				unitIndex: 0,
				open: false,
				openDict: false,
				selectList: [],
				dictOptions: [],
				XQList: [],
				LDList: [],
				DYList: [],
				projectValue: {
					'dictValue': '0'
				},
				XZQValue: {},
				XQValue: {},
				XQList2: [],
				LDList2: [],
				DYList2: [],
				XQList3: [],
				LDList3: [],
				DYList3: [],
				FJList3: [],
				projectValue2: {
					'dictValue': '0'
				},
				EngineeringValue: '',
				EngineeringName: '',
				EngineeringList: [],
				shareState: false,
				XZQValue2: {},
				XQValue2: {},
				LDValue2: {},
				DYValue2: {},
				XZQValue3: {},
				XQValue3: {},
				LDValue3: {},
				DYValue3: {},
				FJValue3: {},
				ProjectType: {},
				ProjectClassification: {},
				ProjectSteps: {},
				ReviewStatus: {},
				change: false,
				specificationValue: {},
				specificationList: [],
				materialValue: {},
				materialList: [],
				materialUsageList: [],
				roomList: [],
				roomCount: 4,
				nodeId: '',
				nodeType: '',
				roomItem: {},
				roomId: '',

			}
		},
		created() {},
		onLoad() {
			this.isLeader = getUserType()
			this.EngineeringValue = this.userRole[0];
			if (this.isLeader == 'app_user') {
				this.changeTab();
			}



		},

		// 上拉加载
		onReachBottom() {


			if (this.pageNum * 10 >= this.totalNum) {

			} else {

				this.$refs.pullScroll.showUpLoading();
				this.pageNum++;
				this.requestData();

			}

		},
		methods: {
			goHistory(item) {

				this.roomItem = item;
				getDicts(item.enginCycle + '_indoor_engin').then(response => {
					this.typeList = response.data;

					let result = JSON.parse(JSON.stringify(this.typeList).replace(/dictValue/g, 'Type'));
					this.typeList = result;
					this.handleShowSheet();
				});


			},
			serch() {
				this.changeTab();
			},
			change1() {
				this.change = !this.change
			},
			isEmpty(str) {
				return (!str || 0 === str.length);
			},

			handleShowSheet() {
				this.shareState = true;
			},

			handleHiddenShare() {
				this.shareState = false;
			},


			chooseNode(item) {

				if (this.EngineeringValue == '民用工程') {


					this.typeList = item.nodeReViewStateList
					this.nodeId = item.id;
					this.nodeType = item.enginClassification;
					this.roomId = item.houseId;
					if (this.nodeType == 'bottom_leg') { //底腿
						let obj = {
							id: this.nodeId,
							type: item.Type
						};
						uni.navigateTo({
							url: '/pages/statistics/history_details_bottom_leg?params=' + encodeURIComponent(JSON
								.stringify(
									obj))
						})

					} else {
						this.handleShowSheet();
					}
				} else if (this.EngineeringValue == '开栓') {

					this.nodeId = item.id;

					let obj = {
						type: 'edit',
						id: this.nodeId,
					};
					uni.navigateTo({
						url: '/pages/open_bolt/open_bolt?params=' + encodeURIComponent(JSON
							.stringify(
								obj))
					})
				} else if (this.EngineeringValue == '市政工程' || this.EngineeringValue == '基建工程' || this.EngineeringValue ==
					'顶管工程') {
					this.nodeId = item.id;
					let result = JSON.parse(JSON.stringify(item.status).replace(/type/g, 'Type'));
					this.typeList = result;
					this.handleShowSheet();
				} else if (this.EngineeringValue == '工业工程') {
					this.nodeId = item.id;
					let obj = {
						id: this.nodeId,
						type: '历史数据'
					};
					uni.navigateTo({
						url: '/pages/statistics/historyDetailsEnginproject?params=' + encodeURIComponent(JSON
							.stringify(
								obj))
					})
				}
			},
			showHistoryList() {
				this.$refs.refShare.handleShowShare();
			},
			showTypeSheet(item) {
				if (this.isLeader == 'sys_user') {

					let param = {
						areaId: this.roomItem.areaId,
						buildingId: this.roomItem.buildingId,
						unitId: this.roomItem.unitId,
						houseId: this.roomItem.roomId,
						enginCycle: this.projectValue2.dictValue, // 工程周期
						enginType: this.roomItem.enginCycle,
						enginClassification: 'indoor_engin', //写死 室内 
					}
					getRoomProjectId(param).then(res => {

						if (res.code == '200') {

							if (res.data != null) {

								getRoomProjectList(res.data.id, item.Type).then(res => {

									if (res.data.zEngineeringNodeBo != null) {

										this.historyList = res.data
										this.showHistoryList();

									} else {
										this.$modal.msg("暂无历史信息")
									}

								})

							} else {
								this.$modal.msg("暂无工程信息")
							}
						} else {
							this.$modal.msg(res.msg)
						}
					})


				} else {
					if (this.EngineeringValue == '民用工程') {
						let obj = {
							id: this.nodeId,
							type: item.Type,
							roomId: this.roomId,
						};
						this.handleHiddenShare();

						if (this.nodeType == 'indoor_engin') { //室内
							uni.navigateTo({
								url: '/pages/statistics/historyDetails?params=' + encodeURIComponent(JSON
									.stringify(
										obj))
							})
						} else if (this.nodeType == 'overhead') { //架空
							uni.navigateTo({
								url: '/pages/statistics/historyDetailsCourtyard?params=' + encodeURIComponent(JSON
									.stringify(
										obj))
							})
						} else if (this.nodeType == 'courtyard') { //庭院
							uni.navigateTo({
								url: '/pages/statistics/historyDetailsCourtyard?params=' + encodeURIComponent(JSON
									.stringify(
										obj))
							})
						}
					}
				}
			},
			pickerShow(e) {
				this.type = e;
				if (e == 'gcx') {
					this.open = true;
					this.EngineeringList = [];
					this.userRole.forEach((item, index) => {

						this.EngineeringList.push({
							'id': index,
							'name': item
						})

					});

					this.selectList = this.EngineeringList;
				} else if (e == 'gczq') {
					this.openDict = true;
					getDicts("engin_cycle").then(response => {
						this.dictOptions = response.data;
					});
				} else if (e == 'gclx') {

					this.openDict = true;
					getDicts('indoor_engin_type').then(response => {
						this.dictOptions = response.data;
					});
				} else if (e == 'gcfl') {
					if (this.isEmpty(this.ProjectType.dictValue)) {
						this.$modal.msg('请选择工程类型')

					} else {
						this.openDict = true;
						getDicts(this.ProjectType.dictValue).then(response => {
							this.dictOptions = response.data;

						});
					}
				} else if (e == 'gcbz') {
					if (this.isEmpty(this.ProjectClassification.dictValue)) {
						this.$modal.msg('请选择工程分类')

					} else {
						this.openDict = true;
						getDicts(this.ProjectType.dictValue + "_" + this.ProjectClassification.dictValue).then(
							response => {
								this.dictOptions = response.data;

							});
					}
				} else if (e == 'shzt') {
					if (this.EngineeringValue == '民用工程') {
						if (this.isEmpty(this.ProjectSteps.dictValue)) {
							this.$modal.msg('请选择工程步骤')

						} else {
							this.openDict = true;
							getDicts('state_options').then(
								response => {
									this.dictOptions = response.data;

								});
						}
					} else {
						this.openDict = true;
						getDicts('state_options').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' || e == 'xzq3') {
					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') {
					if (this.isEmpty(this.XZQValue2.dictValue)) {
						this.$modal.msg('请选择行政区')

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

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

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

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

					} else {
						this.open = true;
						this.selectList = this.DYList2;
					}
				} else if (e == 'xq3') {
					if (this.isEmpty(this.XZQValue3.dictValue)) {
						this.$modal.msg('请选择行政区')

					} else {
						this.open = true;
						this.selectList = this.XQList3;
					}
				} else if (e == 'ld3') {

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

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

				} else if (e == 'dy3') {
					if (this.isEmpty(this.LDValue2.id)) {
						this.$modal.msg('请选择楼栋')

					} else {
						this.open = true;
						this.selectList = this.DYList3;
					}
				} else if (e == 'fj3') {
					if (this.isEmpty(this.LDValue3.id)) {
						this.$modal.msg('请选择楼栋')

					} else {
						this.open = true;
						this.selectList = this.FJList3;
					}
				} 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.open = false;
				this.openDict = false;
				if (this.type == 'gcx') {
					this.EngineeringValue = item.name
					this.changeTab();

				} else if (this.type == 'xzq') {
					this.XZQValue = item;


					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 == 'gclx') {
					this.ProjectType = item
					this.ProjectClassification = '';
					this.ProjectSteps = '';
					this.ReviewStatus = '';
				} else if (this.type == 'gcfl') {
					this.ProjectClassification = item
					this.ProjectSteps = '';
					this.ReviewStatus = '';
				} else if (this.type == 'gcbz') {
					this.ProjectSteps = item
					this.ReviewStatus = '';
				} else if (this.type == 'shzt') {
					this.ReviewStatus = item
				} else if (this.type == 'xq') {
					this.XQValue = item;

					this.LDValue = '';
					this.DYValue = '';
					this.FJValue = '';

					this.queryMaterialsUsedList();
				} else if (this.type == 'ld') {
					this.LDValue = item;

					this.DYValue = '';
					this.FJValue = '';
					getUnitList(item.id).then(res => {
						this.DYList = res.data
					})

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

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


					this.XQValue2 = '';
					this.LDValue2 = '';
					this.DYValue2 = '';
					this.FJValue2 = '';
					getAreaList(item.dictValue).then(res => {
						this.XQList2 = res.data;
					})
				} else if (this.type == 'xzq3') {
					this.XZQValue3 = item;

					this.XQValue3 = '';
					this.LDValue3 = '';
					this.DYValue3 = '';
					this.FJValue3 = '';
					getAreaList(item.dictValue).then(res => {
						this.XQList3 = res.data;
					})
				} else if (this.type == 'xq2') {
					this.XQValue2 = item;

					this.LDValue2 = '';
					this.DYValue2 = '';
					this.FJValue2 = '';
					getBuildingList(item.id).then(res => {
						this.LDList2 = res.data
					})
				} else if (this.type == 'xq3') {
					this.XQValue3 = item;

					this.LDValue3 = '';
					this.DYValue3 = '';
					this.FJValue3 = '';
					getBuildingList(item.id).then(res => {
						this.LDList3 = res.data
					})
				} else if (this.type == 'ld2') {
					this.LDValue2 = item;

					this.DYValue2 = '';
					this.FJValue2 = '';
					getUnitList(item.id).then(res => {
						this.DYList2 = res.data
					})

				} else if (this.type == 'ld3') {
					this.LDValue3 = item;

					this.DYValue3 = '';
					this.FJValue3 = '';
					getUnitList(item.id).then(res => {
						this.DYList3 = res.data
					})

				} else if (this.type == 'dy3') {
					this.DYValue3 = item;
					this.FJValue3 = '';
					getHousesList(item.id).then(res => {
						this.FJList3 = res.data
					})

				} else if (this.type == 'dy2') {
					this.DYValue2 = item;
					this.queryProjectStatisticsList();
				} else if (this.type == 'gg') {
					this.specificationValue = item;
					this.queryMaterialsUsedList();
				} else if (this.type == 'cz') {
					this.materialValue = item;
					this.specificationValue = '';

					this.queryMaterialsUsedList();

					getEnginSpecificationsList(item.id).then(res => {
						this.materialList = res.data
					})

				}
			},

			close(e) {
				this.open = false
			},

			closeDict(e) {
				this.openDict = false
			},
			queryMaterialsUsedList() {
				if (this.isEmpty(this.XQValue.id)) {
					this.$modal.msg('请选择小区')
					return;
				}

				let param = {
					enginCycle: this.projectValue.dictValue, //工程周期
					areaId: this.XQValue.id,
					realityQuality: this.materialValue.id,
					realitySpecifications: this.specificationValue.id,
				};
				getMunicipalStatisticsData(param).then(res => {
					this.materialUsageList = res.data;
				})
			},
			queryProjectStatisticsList() {
				let param = {
					enginCycle: this.projectValue.dictValue, //工程周期
					areaId: this.XQValue2.id,
					buildingId: this.LDValue2.id,
					unitId: this.DYValue2.id,
				};
				getObtainRoomcCompletionInformationList(param).then(res => {
					this.roomList = res.data[0].roomStatusVoList;
					this.roomCount = res.data[0].roomStatusVoList.length;
				})
			},
			getColorByStatus(status) {
				if (this.isEmpty(status)) {
					return "#fff";
				}
				if (status == '施工中') {
					return "#5bd3ff";
				} else if (status == '未施工') {
					return "#ffc881";
				} else if (status == '竣工') {
					return "#80d9ae";
				}
			},

			clearMaterialInfo() {
				this.materialValue = '';
				this.specificationValue = '';
				this.queryMaterialsUsedList();
			},
			clearSpecificationInfo() {
				this.specificationValue = '';
				this.queryMaterialsUsedList();
			},


			pullDown(pullScroll) {

				this.pageNum = 1;

				setTimeout(() => {
					this.requestData(pullScroll);
				}, 1000);




			},
			getList() {
				let myThis = this;
				this.$nextTick(() => {

					myThis.$refs.pullScroll.refresh();

				});
			},
			changeTab() {
				this.pageSize = 10;
				this.totalNum = '';
				this.pageNum = 1;


				this.requestData();

			},
			requestData() {

				uni.showLoading()
				if (this.EngineeringValue == '民用工程') {
					let type = ''
					let param = {
						district: this.XZQValue3.dictValue == undefined ? '' : this.XZQValue3.dictValue,
						areaId: this.XQValue3.id == undefined ? '' : this.XQValue3.id,
						buildingId: this.LDValue3.id == undefined ? '' : this.LDValue3.id,
						unitId: this.DYValue3.id == undefined ? '' : this.DYValue3.id,
						houseId: this.FJValue3.id == undefined ? '' : this.FJValue3.id,
						enginType: this.ProjectType.dictValue == undefined ? '' : this.ProjectType.dictValue,
						enginCycle: '0',
						enginClassification: this.ProjectClassification.dictValue == undefined ? '' : this
							.ProjectClassification.dictValue,
						type: this.ProjectSteps.dictValue == undefined ? '' : this.ProjectSteps.dictValue,
						completionStatus: this.ReviewStatus.dictValue == undefined ? '' : this.ReviewStatus.dictValue,
						createBy: user.state.name,
						pageNum: this.pageNum,
						pageSize: this.pageSize

					}
					gethistoryList(param).then(res => {

						this.totalNum = res.total

						if (res.code == '200') {
							uni.hideLoading()
							if (res.rows.length !== 0) {

								if (this.pageNum == 1) {
									this.list = [];
									this.list = res.rows
								} else {
									this.list = this.list.concat(res.rows)
								}


								if (this.pageNum * 10 >= this.totalNum) {
									this.$refs.pullScroll.finish();

								} else {


									this.$refs.pullScroll.success();
								}

							} else {
								this.list = [];
								this.$refs.pullScroll.empty();
							}
						} else {
							this.$modal.msg(res.msg + "")
							this.$refs.pullScroll.error();
						}

					})

				} else if (this.EngineeringValue == '开栓') {
					let type = ''
					let param = {
						district: this.XZQValue3.dictValue == undefined ? '' : this.XZQValue3.dictValue,
						areaId: this.XQValue3.id == undefined ? '' : this.XQValue3.id,
						buildingId: this.LDValue3.id == undefined ? '' : this.LDValue3.id,
						unitId: this.DYValue3.id == undefined ? '' : this.DYValue3.id,
						houseId: this.FJValue3.id == undefined ? '' : this.FJValue3.id,
						completionStatus: this.ReviewStatus.dictValue == undefined ? '' : this.ReviewStatus.dictValue,
						createBy: user.state.name,
						pageNum: this.pageNum,
						pageSize: this.pageSize

					}
					getKShistoryList(param).then(res => {

						this.totalNum = res.total

						if (res.code == '200') {
							uni.hideLoading()
							if (res.rows.length !== 0) {

								if (this.pageNum == 1) {
									this.list = [];
									this.list = res.rows
								} else {
									this.list = this.list.concat(res.rows)
								}


								if (this.pageNum * 10 >= this.totalNum) {
									this.$refs.pullScroll.finish();

								} else {


									this.$refs.pullScroll.success();
								}

							} else {
								this.list = [];
								this.$refs.pullScroll.empty();
							}
						} else {
							this.$modal.msg(res.msg + "")
							this.$refs.pullScroll.error();
						}

					})
				} else if (this.EngineeringValue == '顶管工程' || this.EngineeringValue == '基建工程' || this.EngineeringValue ==
					'危险作业工程' || this.EngineeringValue == '市政工程' || this.EngineeringValue == '工业工程' || this
					.EngineeringValue == '带气封堵施工') {
					//type 1 = 顶管， 2=基建 3=危险 4= 市政 5= 工业 type=6   是带气封堵
					let chooseType = '';
					switch (this.EngineeringValue) {
						case '顶管工程':
							chooseType = '1';
							break
						case '基建工程':
							chooseType = '2';
							break
						case '危险作业工程':
							chooseType = '3';
							break
						case '市政工程':
							chooseType = '4';
							break
						case '工业工程':
							chooseType = '5';
							break
						case '带气封堵施工':
							chooseType = '6';
							break
					}

					let param = {
						type: chooseType,
						district: this.XZQValue3.dictValue == undefined ? '' : this.XZQValue3.dictValue,
						areaId: this.XQValue3.id == undefined ? '' : this.XQValue3.id,
						buildingId: this.LDValue3.id == undefined ? '' : this.LDValue3.id,
						unitId: this.DYValue3.id == undefined ? '' : this.DYValue3.id,
						houseId: this.FJValue3.id == undefined ? '' : this.FJValue3.id,
						completionStatus: this.ReviewStatus.dictValue == undefined ? '' : this.ReviewStatus.dictValue,
						createBy: user.state.name,
						pageNum: this.pageNum,
						pageSize: this.pageSize

					}
					getHistoryByUserList(param).then(res => {

						this.totalNum = res.data.total

						if (res.code == '200') {
							uni.hideLoading()
							if (res.data.rows.length !== 0) {

								if (this.pageNum == 1) {
									this.list = [];
									this.list = res.data.rows
								} else {
									this.list = this.list.concat(res.data.rows)
								}


								if (this.pageNum * 10 >= this.totalNum) {
									this.$refs.pullScroll.finish();

								} else {


									this.$refs.pullScroll.success();
								}

							} else {
								this.list = [];
								this.$refs.pullScroll.empty();
							}
						} else {
							this.$modal.msg(res.msg + "")
							this.$refs.pullScroll.error();
						}

					})

				}
			},

		}
	}
</script>

<style lang="scss">
	.to-right-icon {
		width: 15px;
		height: 15px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.uni-media-list {
		width: 100%;
	}

	.no-click {
		pointer-events: none;
	}

	.marginLeft5 {
		margin-left: 5px;
	}

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

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

	.view-bg {
		margin-left: 8px;
		margin-right: 8px;
		margin-top: 8px;
		background-color: #fff;
		border-radius: 5px;
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

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

	.uni-list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		position: relative;

	}

	.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: 10px 10px 0 10px;
		margin: 0 auto;
		border: 1px solid #5bd3ff;
		white-space: nowrap;
		position: relative;
		z-index: 2;
	}

	.grid-text {
		font-size: 14px;
		color: #000000;
		text-align: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.name {
		flex: 0;
		font-size: 14px;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.table-item {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.block-iv {
		width: 20px;
		height: 20px;
	}


	.table {
		width: 100%;
		border-radius: 8rpx;
		background: #FFFFFF;
		/* border: 1rpx solid #EFEFEF; */
		font-size: 28rpx;
		margin-top: 40rpx;
	}

	.felx-row {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}



	.h-tr {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;

		border-color: #ccc;
		border-style: solid;
		border-width: 0;
		border-width: 1px;
		color: #3d7dd7;
	}

	.h-td {
		box-sizing: border-box;
		padding: 3px;
		word-break: break-all;
		border-color: #ccc;
		border-style: solid;
		border-width: 1px;
		border-right-width: 1px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		min-height: 64rpx;
	}


	.LouCeng {
		font-size: 30rpx;
		background-color: #4a4b52;
		color: #FFEB3B;
		font-weight: bold;
	}

	.Fang {
		width: 100%;
		display: inline-block;
		line-height: 50rpx;
		text-align: center;
		margin-right: 10px;
		margin-bottom: 10px;

		background-color: red;
	}

	.HuaDongBiao {
		display: flex;
		flex-direction: column-reverse;
		position: relative;


	}

	.NeiRong {
		display: flex;
		flex-wrap: nowrap;

	}

	.NeiRong :last-child {
		margin-right: 0 !important;
	}



	.ShiGongZhong {
		background-color: #5bd3ff;
		color: #000;
	}

	.WeiShiGong {
		background-color: #ffc881;
		color: #000;
	}

	.JunGong {
		background-color: #80d9ae;
		color: #000;
	}

	.container {
		display: flex;
		margin-left: 10px;
		width: 100%;
		margin-top: 10px;
		margin-right: 10px;
		justify-content: space-between;
	}

	.notice {
		margin: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 17rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx;
	}

	.text {
		border-left: 15rpx solid #3857F3;
		padding-left: 20rpx;
	}

	.share {
		width: 100%;
		height: 100%;
	}

	.share-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}

	.share-show {
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
	}

	.scroll-Y {
		height: 350rpx;
	}

	.share-item {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 1999;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;


		.share-to {
			width: 100%;
			height: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;

			&::after {
				content: '';
				width: 240rpx;
				height: 0rpx;
				border-top: 1px solid #E4E7ED;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				margin-left: 30rpx;
			}

			&::before {
				content: '';
				width: 240rpx;
				height: 0rpx;
				border-top: 1px solid #E4E7ED;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				margin-right: 30rpx;
			}
		}

		.content {
			width: 100%;
			height: 50%;
			display: flex;
			flex-wrap: wrap;

			.block {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 80rpx;



				text {
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #606266;
				}
			}
		}

		.cancel {
			width: 100%;
			height: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #E4E7ED;
		}
	}

	.background {
		// border: 15px solid hsla(0, 0%, 100%, .5);
		background: white;
		background-clip: padding-box;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx 10rpx;
		/*从padding开始往外面裁剪背景*/


	}
</style>