zhgdyunapp/pages/projectEnd/projectIndex/projectIndex.vue

<template>
	<view class="fullHeight projectIndexPage" style="background-color: white">
		<scroll-view class="" :class="accountType == 5 || accountType == 6 || accountType == 10 ? 'smallHeight' : ''"
			scroll-y>
			<headers :showBack="accountType == 5 || accountType == 6 || accountType == 10 ? false : true"
				:themeType="'white'">
				<view class="headerName">
					{{ projectDetail.projectName }}
				</view>
			</headers>
			<image src="/static/projectIndexBG.png" class="projectIndexBG"
				:style="{ height: systemInfo.statusBarHeight + 357 + 'px' }"></image>
			<view class="topBoxContent">
				<view class="" style="height: 20px"> </view>
				<view class="progressBox">
					<image src="/static/progressLine.png" class="progressLine"></image>
					<view class="title1"> 工程进度 </view>
					<view class="title2">
						<text>{{
              projectDetail.periodRatio ? projectDetail.periodRatio : '--'
            }}</text><text class="unit">%</text>
					</view>
					<text class="status" :class="projectDetail.contractPeriodType == 2 ? 'redStatus' : ''">{{
              projectDetail.contractPeriodType == 1 ? '正常' : '已延期'
            }}</text>
				</view>
				<view class="weatherBox">
					<view class="top">
						{{ weatherInfo.temperature }}℃
						<image class="weatherIcon"
							:src=" '/static/weatherIcon/' +weatherIcon(weatherInfo.weather) +'.png'">
						</image>
					</view>
					<view class="bottom">
						<!-- {{weatherInfo.reporttime.split(' ')[0]}} -->
						{{ weatherInfo.winddirection }}风 {{ weatherInfo.windpower }}级
					</view>
				</view>
				<view class="dateBox">
					<view class="item">
						<view class="">
							{{
                projectDetail.contractPeriodStartTime != null
                  ? projectDetail.contractPeriodStartTime
                  : '—.—.—'
              }}
						</view>
						<view class=""> 项目开工日期 </view>
					</view>
					<view class="item item2">
						<view class="">
							{{
                projectDetail.contractPeriodEndTime != null
                  ? projectDetail.contractPeriodEndTime
                  : '—.—.—'
              }}
						</view>
						<view class=""> 要求完成日期 </view>
					</view>
					<!-- <view class="item">
						<view class="">
							—.—.—
						</view>
						<view class="">
							预计完成日期
						</view>
					</view> -->
				</view>
			</view>
			<view class="moudleContent">
				<view class="moudleTitle"> ·已有产品· </view>
				<view class="moudleBox">
					<view class="moudleItem" @click="goMoudleFn(item)" v-for="(item, index) in list" :key="index"
						v-if="item.operation && item.moduleType == 2 && item.appShow == 1">
						<view class="inner" v-if="COMPANY=='sanjiang'">
							<!-- <view class="imgBox" v-if="iconType == 1">
								<image class="img" :src="'/static/moudleImg/' + item.moduleIcon + '.png'"></image>
							</view> -->
							<view class="imgBox" v-if="item.bigModuleIcon">
								<image class="img" :src="'/static/sjjtIcon/' + item.bigModuleIcon + '.png'"></image>
							</view>
							<view class="desc">
								{{ item.appName }}
							</view>
						</view>
						<view class="inner" v-else>
							<view class="imgBox" v-if="iconType == 1">
								<image class="img" :src="'/static/moudleImg/' + item.moduleIcon + '.png'"></image>
							</view>
							<view class="imgBox" v-if="iconType == 2">
								<image class="img" :src="'/static/moudleImg/' + item.bigModuleIcon + '.png'"></image>
							</view>
							<view class="desc">
								{{ item.appName }}
							</view>
						</view>
					</view>
					<!-- <view class="moudleItem" @click="goMoudleFnTest()">
						<view class="inner">
							<view class="imgBox">
								<image class="img" src=""></image>
							</view>
							<view class="desc">
								实测监管ss
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<!-- 	<view class="moudleTitle">
			未解锁模块
		</view>
		<view class="moudleBox moudleBox2">
			<view class="moudleItem" v-for="(item,index) in list" :key="index" v-if="!item.operation&&item.moduleType==2&&item.appShow==1">
				<view class="inner">
					<view class="imgBox">
						<image class="img" :src="'/static/moudleImg/'+item.moduleIcon+'.png'"></image>
					</view>
					<view class="desc">
						{{item.appName}}
					</view>
				</view>
			</view>
		</view> -->
		</scroll-view>
		<uni-popup ref="popupqrcode" type="center">
			<view class="qrcodeItem">
				<view class="title"> 打卡成功 </view>
				<view class="checkingPointName">
					巡检点：{{ qrCode.checkingPointName }}
				</view>
				<view class="position"> 巡检点位置：{{ qrCode.position }} </view>
			</view>
		</uni-popup>
		<footers :activeTab="'projectEnd'" v-if="accountType == 5 || accountType == 6 || accountType == 10"></footers>
	</view>
</template>

<script>
	import headers from '../../../components/headers/headers.vue'
	import footers from '../../../components/footers/footers.vue'
	import {
		closeBle
	} from '@/static/js/BLEConn.js'
	export default {
		components: {
			headers,
			footers
		},
		data() {
			return {
				qrCode: {},
				projectDetail: {
					projectName: '',
					contractPeriodEndTime: '',
					contractPeriodStartTime: '', //-.-.-
					contractPeriodType: 1, //1是正常  2是已延期
					periodRatio: 0
				},
				userInfo: {},
				searchsn: '',
				accountType: 1,
				list: [],
				weatherInfo: {
					city: '--',
					weather: '-',
					temperature: '--',
					winddirection: '--',
					windpower: '--',
					humidity: '--'
				},
				iconType: '1',
				systemInfo: {
					statusBarHeight: 0
				},
				styType: '',
				//天气
				imgUrl: '',
				date: '', //现在时间
				// weatherInfo: '--',
				adressDetail: '--',
				city: '',
				url: '',
				versionData: '',

			}
		},
		mounted() {
			this.loadWeather();
		},
		onShow() {
			this.getSystemLogoConfig()
			closeBle()
				.then((res) => {
					// this.closeDiv = false
					// this.clear()
					// uni.hideLoading()
					console.log('断开蓝牙成功')
				})
				.catch((err) => {
					// uni.hideLoading()
					console.log('断开蓝牙失败')
				})
			if (uni.getStorageSync('oldObj')) {
				uni.removeStorageSync('oldObj')
			}
			if (uni.getStorageSync('buildObj')) {
				uni.removeStorageSync('buildObj')
			}
		},
		onLoad() {
			var userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			let that = this;
			console.log('userInfo===========', userInfo)
			this.userInfo = userInfo
			this.accountType = userInfo.accountType
			this.accountType = userInfo.accountType
			this.styType = userInfo.styleType
			var arr = userInfo.menuAuthority.moduleList
			console.log('上面的', arr)
			this.systemInfo = uni.getStorageSync('systemInfo')
			this.getSystemLogoConfig()
			if (this.accountType == 5 || this.accountType == 6) {
				this.searchsn = userInfo.sn
				this.getProjectDetail()
				this.getAllModule(arr)
			} else if(this.accountType == 10){
				this.sendRequest({
					url: 'xmgl/company/getTenantOrgTreeList',
					data: {
						userId: userInfo.userId,
					},
					method: 'POST',
					success(res) {
						console.log(res,'777888')
						if(res && res.result && res.result.length > 0){
							let responseData = res.result;
							that.selectedDefaultProject(responseData[0])
						}
					}
				})
			} else {
				this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
				this.loadWeather()
				this.getAllModule(arr)
			}
			this.viewVersionInfo()
		},
		onReady() {},
		methods: {
			// 默认选中第一个组织的第一个项目
			selectedDefaultProject(obj) {
				console.log(obj.list,888999)
			      if (obj.list && obj.list.length > 0) {
			        obj.list.map((item) => {
			          this.selectedDefaultProject(item);
			        });
			      } else {
					this.searchsn = obj.sn
					console.log(obj.sn,888999)
					this.getProjectDetail()
					this.getAllModule([])
					uni.setStorageSync('userInfo',JSON.stringify({...this.userInfo,sn: obj.sn}))
			      }
			    },
			viewVersionInfo() {
				console.log('进入页面调用');
				//fix 避开检查更新  罗劲章
				// return false
				var that = this
				//获取当前应用版本
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					// console.log('版本号的数据信息', widgetInfo.version);//其实是应用版本名称
					console.log('应用版本名称', widgetInfo.version);
					that.versionName = widgetInfo.version
					console.log('应用版本号', widgetInfo.versionCode);
					that.versionNo = widgetInfo.versionCode
				})
				console.log('viewVersionInfo', that.url_config)
				// uni.navigateTo({
				// 	url:'versionInfo'
				// })
				if (
					this.systemInfo.platform.indexOf('android') != -1 &&
					typeof plus !== 'undefined'
				) {
					//获取最新版本
					that.sendRequest({
						url: 'xmgl/appVersion/getAppVersion',
						data: {},
						method: 'POST',
						success(res2) {
							console.log('获取当前app应用版本名称', that.versionName);
							console.log('获取平台版本名称', res2.result.versionName);
							let jxjAppVersionName = res2.result.versionName
							console.log('获取当前app应用版本号', that.versionNo);
							console.log('获取平台版本号', res2.result.versionNo);
							let jxjAppVersionNo = res2.result.versionNo

							if (res2.result && jxjAppVersionNo !== that.versionNo) {
								uni.showModal({
									title: '版本更新',
									content: '更新内容：' + res2.result.versionDescribe,
									// confirmText: '更新',
									showCancel: false,
									success(res) {
										if (res.confirm) {
											console.log('用户点击确定')
											// var url = that.url_config + 'image/' + JSON.parse(res2.result.downloadUrl)[0].url//地址拼错啦，直接返回的就是下载地址
											var url = JSON.parse(res2.result.downloadUrl)[0].url
											console.log('apk地址', url)
											uni.showModal({
												title: '提示',
												content: '正在后台下载更新资源，请耐心等待......',
												showCancel: false
											})
											uni.downloadFile({
												url: url,
												success: (res) => {
													// uni.hideLoading()
													console.log('res', res)
													if (res.statusCode === 200) {
														console.log('下载成功')
														var fileSaveUrl = plus.io
															.convertLocalFileSystemURL(
																res.tempFilePath
															)
														plus.runtime.openFile(res
															.tempFilePath) //选择软件打开文件
													}
												}
											})
										} else if (res.cancel) {
											console.log('用户点击取消')
										}
									}
								})
							} else {
								// uni.showToast({
								// 	title: '您已经是最新版本啦！',
								// 	icon: 'none'
								// })
							}
						}
					})
				}
			},
			weatherIcon(index) {
				if (index == "晴") {
					return "w_sun";
				} else if (index == "多云") {
					return "w_overcast";
				} else if (index == "阴") {
					return "w_cloud";
				} else if (index.indexOf("雨")) {
					return "w_rain";
				} else if (index.indexOf("雷")) {
					return "w_thunder";
				} else if (index.indexOf("雪")) {
					return "w_snow";
				} else if (index.indexOf("雾")) {
					return "w_fog";
				} else {
					return "w_cloud";
				}
			},

			getSystemLogoConfig() {
				var that = this
				this.sendRequest({
					url: 'xmgl/systemLogoConfig/selectSystemLogoConfig',
					data: {},
					method: 'GET',
					success(res) {
						console.log(res.result.iconType)
						that.iconType = res.result.iconType ? res.result.iconType : '1'
					}
				})
			},
			loadWeather() {
				console.log('进来了吗：==========');
				//获取天气温度等信息
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					isHighAccuracy: "true",
					accuracy: "best", // 精度值为20m
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						var location = res.longitude + ',' + res.latitude
						//通过当前经纬度获取当前地址
						uni.request({
							url: "https://restapi.amap.com/v3/geocode/regeo",
							data: {
								key: "56c91fb2683e5bf0f46014ac200d4c1b", //高德地图key
								location: location
							},
							method: "GET",
							success(res) {

								console.log("地址", res)
								if (res.data.status == "1") {
									var one = res.data.regeocode.formatted_address
									if (one) {
										that.adressDetail = one.substr(3, 3) + one.substr(9,
											4) + one.substr(20, 7)
									}
									var city = res.data.regeocode.addressComponent.city
									console.log("地址", that.adressDetail)
									//通过当前城市，获取当前天气
									uni.request({
										url: "http://restapi.amap.com/v3/weather/weatherInfo",
										data: {
											key: "56c91fb2683e5bf0f46014ac200d4c1b",
											city: city,
											extensions: "base",
											output: "JSON",
										},
										method: "GET",
										success(res) {
											if (res.data.status == "1") {
												that.weatherInfo = res.data.lives[0]
												console.log("成功获取天气", res)
												//获取完地址天气等信息后，开始画水印
												// that.canversImg();
											}
										}
									})
								}
							}
						})
					},
					fail: function(msg) {
						console.log("获取位置失败", msg)
					}
				});
				// let city=this.projectDetail.cityCode
				//     uni.request({
				//         url: 'https://v0.yiketianqi.com/api', //仅为示例，并非真实接口地址。
				//         data: {
				//           key: '3b060f3a0ce4bafebeba1621dcd99c31',
				//           city:city ,
				//           extensions: 'base',
				//           output: 'JSON'
				//         }
				//       })
				//       .then((res) => {
				//         console.log('天气的数据', res)
				//         this.weatherInfo = res.data.lives[0]
				//         localStorage.setItem('weatherInfo', JSON.stringify(this.weatherInfo))
				//       })
			},
			goMoudleFnTest() {
				uni.navigateTo({
					url: '../realMonitor/index'
				})
			},
			goMoudleFn(item) {

				//添加虚拟模块 报警提示
				// if(item.moduleName=="预警播报"){
				// 	uni.navigateTo({
				// 		url: '/pages/alarmPage/index'
				// 	})
				// 	return false;
				// }
				console.log('item.plugin===================', item)
				switch (item.plugin) {

					case 'markRoom':
						uni.navigateTo({
							url: '../markRoom/markRoom'
						})
						break
					case 'videoMonitor':
						uni.navigateTo({
							url: '../../videoManage/videoList?sn=' +
								this.projectDetail.projectSn +
								'&pageType=backEnd'
						})
						break
					case 'projectInfo':
						uni.navigateTo({
							url: '../project/projectInfo'
						})
						break
					case 'environmentMonitor':
						uni.navigateTo({
							url: '../environment/menu'
						})
						break
					case 'laborManage':
						uni.navigateTo({
							url: '../laborManage/index'
						})
						break
					case 'constructionLog':
						uni.navigateTo({
							url: '../constructionLog/list'
						})
						break
					case 'electricBoxMange':
						uni.navigateTo({
							url: '../electricBox/index'
						})
						break
					case 'lifterManage':
						uni.navigateTo({
							url: '../lifterMonitoring/index'
						})
						break
					case 'carManage':
						uni.navigateTo({
							url: '../carManage/index'
						})
						break
					case 'towerManage':
						uni.navigateTo({
							url: '../towerManage/index'
						})
						break
					case 'dailyInspection':
						uni.navigateTo({
							url: '../dailyCheck/index'
						})
						break
					case 'qualitySpringback':
						uni.navigateTo({
							url: '../qualitySpringback/index'
						})
						break
					case 'unloadManage':
						uni.navigateTo({
							url: '../unload/index'
						})
						break
					case 'concreteMonitoring':
						uni.navigateTo({
							url: '../concreteMonitoring/index'
						})
						break
					case 'safeManage':
						// uni.navigateTo({
						// 	url: '../safeManage/index'
						// })
						uni.navigateTo({
							url: '../safeManage/safeIndex'
						})
						break
						// uni.navigateTo({
						// 	url: '../safeManage/addExamine'
						// })
						break
					case 'qualityManage':
						uni.navigateTo({
							url: '../qualityManage/index'
						})
						break
					case 'carWashManage':
						uni.navigateTo({
							url: '../carWashManage/index'
						})
						break
					case 'dangerBigProject':
						uni.navigateTo({
							url: '../dangerBigProject/index'
						})
						break
					case 'fileManage':
						uni.navigateTo({
							url: '../../fileManage/fileManage'
						})
						break
					case 'betonManage':
						uni.navigateTo({
							url: '../betonManage/index'
						})
						break
					case 'progressManage':
						uni.navigateTo({
							url: '../progressManagement/index'
						})
						break
					case 'dangerBroadcast':
						uni.navigateTo({
							url: '../../alarmPage/index'
						})
						break
					case 'standardSchedule':
						uni.navigateTo({
							url: '../standardSchedule/index',
						})
						break
					case 'smartBeamField':
						uni.navigateTo({
							url: '../smartBeamField/beamMenu',
						})
						break
					case 'saosao':
						console.log('打开saosao')
						// let that = this;
						uni.scanCode({
							scanType: ['qrCode'],
							success: function(res) {
								console.log('扫一扫得到的数据：' + res.result)
								uni.navigateTo({
									url: '../scan/saoSao?data=' + res.result
								})

								// let qrcodeVal=JSON.parse(res.result)
								// let param={
								// 	checkingPointId:qrcodeVal.checkingPointId,
								// 	checkingPointName:qrcodeVal.checkingPointName,
								// 	checkingPointUserId:that.userInfo.userId,
								// 	checkingPointUserName:that.userInfo.realName||that.userInfo.account,
								// 	position:qrcodeVal.position
								// }

								// that.sendRequest({
								// 	url: "xmgl/checkingPointInfo/add",
								// 	data:param,
								// 	method: "POST",
								// 	success(res) {
								// 		console.log(res,'res');
								// 		console.log(param,'===')
								// 		that.qrCode=param;
								// 		that.$refs.popupqrcode.open();
								// 		setTimeout(item=>{
								// 			that.$refs.popupqrcode.close();
								// 		},5000)
								// 	}
								// })
							}
						})
						break
					default:
						uni.showToast({
							icon: 'none',
							title: '该产品暂未开放，敬请期待！'
						})
				}
			},
			getProjectDetail() {
				var that = this
				this.sendRequest({
					url: 'xmgl/project/getProjectInfoBySn',
					data: {
						projectSn: this.searchsn
					},
					method: 'POST',
					success(res) {
						that.projectDetail = res.result
						uni.setStorageSync('projectDetail', JSON.stringify(res.result))
						that.loadWeather()
					}
				})
			},
			getAllModule(half) {
				console.log('half====', half)
				var that = this
				if (this.accountType == 10) {
					this.sendRequest({
						url: 'xmgl/baseModule/getModuleAndMenuList',
						data: {
							projectSn: this.searchsn,
							userId: this.userInfo.userId,
							moduleType: 2,
						},
						method: 'POST',
						success(res) {
							if (res.success) {
								var all = res.result.moduleList;
								console.log("all", all);
								all.forEach((element, index) => {
									all[index].operation = false;
									res.result.menuList.forEach((element2) => {
										if (element2.moduleId == element.moduleId) {
											all[index].operation = true;
										}
									});
								});
								console.log("all111", all);
								that.list = all;
							}
						}
					})
				} else {
					this.sendRequest({
						url: 'xmgl/baseModule/list',
						data: {
							moduleType: 2,
							styleType: this.styType
						},
						method: 'POST',
						success(res) {
							var all = res.result
							all.forEach((element, index) => {
								all[index].operation = false
								half.forEach((element2) => {
									if (element2.moduleId == element.moduleId) {
										all[index].operation = true
										all[index].menuList = element2.menuList
									}
									let newAll = all[index].menuList
								})
							})

							that.list = all
							// this.list=newAppShow

							//添加报警提示模块
							console.log('用户列表', that.list)
							// that.list.push({
							// 	operation:true,
							// 	appName: "报警提示",
							// 	appShow: 1,
							// 	bigModuleIcon: "log_active2",
							// 	disableModuleIcon: null,
							// 	labelName: "报警提示",
							// 	labelSortNum: "7",
							// 	menuList: null,
							// 	moduleDesc: "",
							// 	moduleEquipment: 0,
							// 	moduleIcon: "log_active",
							// 	moduleIcon2: "log",
							// 	moduleId: "41",
							// 	moduleName: "报警提示",
							// 	modulePath: "",
							// 	moduleType: 2,
							// 	plugin: "constructionLog",
							// 	styleType: 1
							// });
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qrcodeItem {
		padding: 40rpx 30rpx;
		width: 480rpx;

		background-color: #fff;
		border-radius: 8rpx;

		.title {
			text-align: center;
			margin-bottom: 12rpx;
		}
	}

	.topBoxContent {
		color: white;
		font-size: 14px;
		// background: linear-gradient(360deg, #A59FFF 0%, #3258FF 100%);
		height: 260px;
		position: relative;

		.dateBox {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;

			.item {
				flex: 1;
				text-align: center;
			}

			.item2 {
				border-left: 1px dashed white;
				// border-right: 1px dashed white;
			}
		}
	}

	.progressBox {
		width: 150px;
		height: 150px;
		position: relative;
		text-align: center;
		margin: 0px auto 25px;

		.title1 {
			padding-top: 24px;
		}

		.title2 {
			font-size: 33px;
			margin: 6px 0;

			.unit {
				font-size: 20px;
			}
		}

		.status {
			width: 52px;
			height: 25px;
			background: #8fda5c;
			border-radius: 12px;
			display: inline-block;
			line-height: 25px;
		}

		.redStatus {
			background: #ea6868;
		}

		.progressLine {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.weatherBox {
		position: absolute;
		top: 15px;
		right: 15px;
		text-align: center;

		.top {
			font-size: 27px;
			display: flex;
			align-items: center;
		}

		.weatherIcon {
			width: 36px;
			height: 36px;
		}

		.bottom {
			font-size: 10px;
		}
	}

	.projectIndexPage {
		/deep/.headerBox {
			background-color: transparent;
			border-bottom: none;
		}
	}

	.progressBox {
		width: 150px;
		height: 150px;
		position: relative;
		text-align: center;
		margin: 0px auto 24px;

		.title1 {
			padding-top: 24px;
		}

		.title2 {
			font-size: 33px;
			margin: 6px 0;

			.unit {
				font-size: 20px;
			}
		}

		.status {
			width: 52px;
			height: 25px;
			background: #8fda5c;
			border-radius: 12px;
			display: inline-block;
			line-height: 25px;
		}

		.redStatus {
			background: #ea6868;
		}

		.progressLine {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.weatherBox {
		position: absolute;
		top: 10px;
		right: 15px;
		text-align: center;

		.top {
			font-size: 27px;
			display: flex;
			align-items: center;
		}

		.weatherIcon {
			width: 36px;
			height: 36px;
		}

		.bottom {
			font-size: 10px;
		}
	}

	.moudleBox2 {
		opacity: 0.6;
	}

	.moudleBox {
		overflow: hidden;
		// margin: 20px 11px;
	}

	.moudleItem {
		float: left;
		width: 33.33%;
		font-size: 13px;
		text-align: center;
		margin-bottom: 10px;

		.inner {
			border: 1px solid rgba(18, 41, 75, 0.06);
			padding: 15px 0 15px;
			margin: 0 5px;
			border-radius: 5px;
		}

		.img {
			width: 40px;
			height: 40px;
			color: red;
		}

		.desc {
			margin-top: 6px;
			color: rgba(38, 45, 71, 0.77);
		}
	}

	.moudleTitle {
		color: rgba(42, 43, 91, 0.5);
		font-size: 13px;
		margin: 0px 0 15px;
		text-align: center;
	}

	.smallHeight {
		// padding-bottom: 63px;
		height: calc(100% - 63px);
	}

	.moudleContent {
		box-shadow: 0px 4px 16px 0px rgba(212, 220, 236, 0.59);
		border-radius: 8px;
		padding: 15px 15px;
		margin: 55px 15px 15px;
		position: relative;
		z-index: 2;
	}

	.projectIndexBG {
		width: 100%;
		height: 357px;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>