newTianLi/pages/test/test.vue

<template>
	<view class="center">
		<view class="img">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>
		<view class="test_title">
			节水测试
		</view>
		<view class="form">
			<view class="form-item">
				<view class="form-left">姓名：</view>
				<text class="tip">*</text>
				<view class="form-right">
					<input type="text" @input="onAction" class="list-input" v-model="name" placeholder="请填写姓名" />
				</view>
			</view>
		<view class="form-item">
			<view class="form-left">地址：</view>
			<text class="tip"></text>
			<view class="form-right"><input @input="onAction" class="list-input" v-model="address" type="text" placeholder="请填写详细地址" /></view>
		</view>
		<view class="form-item">
			<view class="form-left">联系电话:</view>
			<text class="tip">*</text>
			<view class="form-right"><input @input="onAction" class="list-input" v-model="telephone" type="number" placeholder="请填写联系电话" /></view>
		</view>
			<view class="form-item">
				<view class="form-left">
					生产线类型：
				</view>
				<text class="tip">*</text>
				<view class="form-right">
					<picker :value="index" :range="array" @change="bindPickerType" class="list-input1">
						<text style="color: #C7C9D1;">{{line_type || '请选择生产类型'}}</text>
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-left">
					生产线数量：
				</view>
				<text class="tip">*</text>
				<view class="form-right">
					<input class="list-input" type="number" @input="onAction" v-model="line_num"
						placeholder="请填写生产线数量" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-left">
					目前用水量(吨/小时)：
				</view>
				<text class="tip">*</text>
				<view class="form-right">
					<input class="list-input" type="number" @input="onAction" v-model="water_using"
						placeholder="请填写目前用水量" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-left">工作时长(小时)：</view>
				<text class="tip"></text>
				<view class="form-right">
					<input @input="onAction" class="list-input" v-model="day_work_times" type="number"
						placeholder="请填写每日工作时长,默认为12小时" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-left">年工作日数：</view>
				<text class="tip"></text>
				<view class="form-right">
					<input @input="onAction" class="list-input" v-model="year_work_day" type="number"
						placeholder="请填写每年工作日数,默认为330天" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-left">废水处理成本(元/吨)：</view>
				<text class="tip">*</text>
				<view class="form-right">
					<input @input="onAction" class="list-input" v-model="deal_cost" type="number"
						placeholder="请填写废水处理成本" />
				</view>
			</view>
		</view>
		<view class="btn" @click="next" v-if="isShow">
			<view class="btn-left">
				提交
			</view>
		</view>
		<view class="result" >
			<view class="result-title">
				测试结果
			</view>
			<view class="border">

			</view>
			<view class="result-box"  >
				<view class="swiper-item" v-if="num1">
					<view class="effect">
						<view class="title">改造后的数据</view>
						<view class="information">
							<view class="benefits">
								<view class="unit">
									<!-- {{ num1 }} -->
									<view class="unit1">{{ num1 }}</view>
									<view class="unit2">~</view>
									<view class="unit3">{{ num2 }}</view>
								</view>
								<view class="info">改造后用水量(吨/小时)</view>
							</view>
							<view class="benefits">
								<view class="unit">
									<!-- {{ num1 }} -->
									<view class="unit1">{{ num3 }}</view>
									<view class="unit2">~</view>
									<view class="unit3">{{ num4 }}</view>
								</view>
								<view class="info">年经济效益(万元)</view>
							</view>
						</view>
						<view class="refresh" @click="refresh">重新测试</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tanchang">

		</view>
		<view class="botton-box">

		</view>
		<aboutUs class="aboutUs"></aboutUs>

	</view>
</template>
<script>
	import {
		loadIndexs, cateList, aboutlist, storylist, caseslist, productlist, articlelist, addForm, companies, machine, machineId 
	} from '@/api/index.js';
	import aboutUs from "@/components/introduce/introduce.vue"
	import {
		
		changeTaber
	} from "@/utils/tarberChange.js"
	export default {
		components: {
			
			aboutUs
		},
		data() {
			return {
				isShow:true,
				type: '',
				name: '',
				address: '',
				telephone: '',
				line_type: '',
				line_num: '',
				water_using: '',
				day_work_times: '',
				year_work_day: '',
				deal_cost: '',
				array: ['塑料镀铬线', '五金镀铬线'],
				index:'',
				num4:'',
				num3:'',
				num2:'',
				num1:''
			}
		},
		onLoad() {
			// this.loadData();
			this.$nextTick(function(){
				changeTaber(4)
			})
			this.loadData();
			
		},
		methods: {
			alertChange(tab) {
				if (tab.show) {
					this.onAction(false);
				} else {
					this.onAction();
				}
			},
			/* 设置弹窗 */
			zoomendChange(type) {
				this.zoomActive = type.target.getZoom();
			},
			// 显示数据
			showData(item) {
				this.autoPlay = false;
				console.log('点击小点点------', item.name);
				this.itemData = item;
				this.machineid = item.id;

				this.$refs.popupItem.open();
				// machine({id: this.machineid}).then(e => {
				machine({}, this.machineid)
					.then(e => {
						// this.machineData = e.data;
						console.log('======>', e);
						this.machineDataModal = e.data;
						this.machineDataModal.machine_name = item.name;
					})
					.catch(e => {
						console.log(e);
					});
			},
			toPre() {
				console.log('this.checkid', this.checkid);
				if (this.checkid > 0) {
					this.checkid--;
					console.log('this.checkid', this.checkid);
				} else {
					this.checkid = 2;
				}
			},
			toNext() {
				console.log('this.checkid', this.checkid);
				if (this.checkid < 2) {
					this.checkid++;
					console.log('this.checkid', this.checkid);
				} else {
					this.checkid = 0;
				}
			},
			// 获取设备信息
			machine() {
				machine({}, 0)
					.then(e => {
						// console.log('获取设备信息');
						this.machineData = e.data;
						// console.log(e);
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 获取公司列表
			getMapList() {
				// zhong
				companies()
					.then(e => {
						this.companyList = e.data.map(e => {
							// 初始化弹窗显示隐藏
							e.show = false;
							// e.lattitude = 28.243198;
							// e.longtitude = 121.279239;
							// 设置文字样式
							e.textType = {
								width: -((e.name.length / 2) * 10),
								height: 30
							};
							e.style = {
								background: 'none',
								color: '#333333',
								fontSize: '10px',
								border: 'none'
							};
							return e;
						});
						// 设置数据加载完毕
						this.mapLoding = true;
						// uni.showModal({
						// 	title: '提示',
						// 	content: '地图加载完毕',
						// 	showCancel: false
						// });
						// console.log('公司列表', this.companyList);
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 初始化地图/
			init({
				BMap,
				map
			}) {
				this.map = map;
				// 初始化地图,设置中心点坐标
				var point = new BMap.Point(121.434817, 28.653649);
				map.centerAndZoom(point, this.zoomActive);
				// this.setMarker();
				// 添加鼠标滚动缩放
				// map.enableScrollWheelZoom();
			},
			//切换事件
			onAction(start = true) {
				console.log('触发点击');
				this.autoPlay = false;
				clearTimeout(this.outPlay);
				if (start) {
					this.outPlay = setTimeout(e => {
						this.autoPlay = true;
					}, this.setOutTime);
				}
			},
			// 渲染首页数据
			async loadData() {
				loadIndexs({}).then(({
					data
				}) => {
					this.carouselList = data.loopProduct.map(item => 'http://tianli.liuniu946.com/' + item
						.coverimage);
					this.list3 = data;
				});
			},

			// 表单交互 提交
			next() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none',
						duration: 2000
					});
					this.$api.msg('');
					return;
				}
				if (this.address == '') {
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none',
						duration: 2000
					});
					// this.$api.msg('请填写详细地址');
					return;
				}
				if (this.telephone == '') {
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none',
						duration: 2000
					});
					// this.$api.msg('请填写联系电话');
					return;
				}
				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(this.telephone)) {
					uni.showToast({
						title: '请填写正确的手机格式',
						icon: 'none',
						duration: 2000
					});
					// this.$api.msg('请输入您的手机号码');
					return;
				}
				if (this.line_type == '') {
					uni.showToast({
						title: '请填写生产线类型',
						icon: 'none',
						duration: 2000
					});
					// this.$api.msg('请输入生产线类型');
					return;
				}
				if (this.line_num == '') {
					uni.showToast({
						title: '请填写生产线数量',
						icon: 'none',
						duration: 2000
					});
					// this.$api.msg('请输入生产线数量');
					return;
				}
				if (this.water_using == '') {
					uni.showToast({
						title: '请填写目前用水量',
						icon: 'none',
						duration: 2000
					});
					// this.$api.msg('请填写目前用水量');
					return;
				}

				if (this.deal_cost == '') {
					uni.showToast({
						title: '请填写废水处理成本',
						icon: 'none',
						duration: 2000
					});
					// this.$api.msg('请填写废水处理成本');
					return;
				}
				addForm({
					name: this.name,
					address: this.address,
					telephone: this.telephone,
					line_type: this.line_type,
					line_num: this.line_num,
					water_using: this.water_using,
					day_work_times: 12,
					year_work_day: 330,
					deal_cost: this.deal_cost
				}).then(e => {
					console.log('请求成功');
					(this.isshow = false),
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					});
					/** 
								交互式表单公式
									改造后用水量为：目前用水量的30%—70%
									经济效益=节约的水量X年工作时长（小时）X废水处理成本
									节约的水量=目前用水量—改造后的用水量
									经济效益也是一个范围值
							 **/
					// 改造后用水量
					// this.num1 = this.water_using * 0.3;
					// this.num2 = this.water_using * 0.7;
					this.num1 = parseFloat(this.water_using * 0.3).toFixed(2);
					this.num2 = parseFloat(this.water_using * 0.7).toFixed(2);

					console.log('this.num1', this.num1);

					// 节约的水量=目前用水量—改造后的用水量
					this.savaWater1 = this.water_using - this.num1;
					this.savaWater2 = this.water_using - this.num2;

					console.log('this.savaWater1', this.savaWater1);
					console.log('this.day_work_times', this.day_work_times);
					console.log('this.deal_cost', this.deal_cost);

					// 经济效益=节约的水量X年工作时长（小时）X废水处理成本
					this.num3 = parseFloat((this.savaWater1 * 3960 * this.deal_cost) / 10000).toFixed(2);
					this.num4 = parseFloat((this.savaWater2 * 3960 * this.deal_cost) / 10000).toFixed(2);

					// this.name = "";
					// this.address = "";
					// this.telephone = "";
					// this.line_type = "";
					// this.line_num = "";
					// this.water_using = "";
					// this.day_work_times = "";
					// this.year_work_day = "";
					// this.deal_cost = "";
				});
			},
			change(item) {
				// console.log('-----this.checkid', item);
				let id = item;
				this.checkid = id;
				this.onAction();
			},

			// 重新测试
			refresh() {
				this.isshow = true;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			// 选择生产线类型
			bindPickerType: function(e) {
				console.log(this.array[e.target.value]);
				this.line_type = this.array[e.target.value];
				this.index = e.target.value + 1;
				this.onAction();
			},
			change1(item) {
				console.log(123, item);
				let id = item;
				this.checkid1 = id;
			},
			// 监听切换事件
			listChange(e) {
				// 触发改变事件
				this.onAction();
				this.checkid = e.detail.current;
				if (this.checkid == 1 && !this.showMap) {
					this.showMap = true;
				}
				// uni.pageScrollTo({
				// 	duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
				// 	scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				// });
			},
			listChange1(id) {
				this.current = id;
			},
			// 点击更多 导航
			toNavList() {
				this.$refs.popup.open();
			},

			goBack(type) {
				this.$refs[type][0].close();
			},

			cancel() {
				this.$refs.popup.close();
			},
			cancelAll(type) {
				this.$refs.popup.close();
				this.$refs[type][0].close();
			},
			handlePop(index, type) {
				this.type = type;
				console.log('this.type', this.type);
				this.$refs[type][0].open();
				cateList({}, this.type).then(({
					data
				}) => {
					this.productList = data;
				});
			},

			// 获取子列表
			navInfo(id, name, item) {
				let obj = this;
				obj.category_id = id;
				obj.current = id;
				console.log('进入', obj.type);
				if (obj.type == 'about') {
					aboutlist({
						// title: obj.title,
						category_id: obj.category_id,
						page: obj.page,
						limit: obj.limit
					}).then(({
						data
					}) => {
						obj.list1 = data.list.map(item => ({
							title: item.title,
							id: item.id
						}));
					});
				}
				if (obj.type == 'story') {
					storylist({
						// title: obj.title,
						category_id: obj.category_id,
						page: obj.page,
						limit: obj.limit
					}).then(({
						data
					}) => {
						obj.list1 = data.list.map(item => ({
							title: item.title,
							id: item.id
						}));
					});
				}
				if (obj.type == 'cases') {
					caseslist({
						// title: obj.title,
						category_id: obj.category_id,
						page: obj.page,
						limit: obj.limit
					}).then(({
						data
					}) => {
						obj.list1 = data.list.map(item => ({
							title: item.title,
							id: item.id
						}));
					});
				}
				if (obj.type == 'product') {
					productlist({
						// title: obj.title,
						category_id: obj.category_id,
						page: obj.page,
						limit: obj.limit
					}).then(({
						data
					}) => {
						obj.list1 = data.list.map(item => ({
							title: item.title,
							id: item.id
						}));
					});
				}
				//
				if (obj.type == 'article') {
					articlelist({
						// title: obj.title,
						category_id: obj.category_id,
						page: obj.page,
						limit: obj.limit
					}).then(({
						data
					}) => {
						obj.list1 = data.list.map(item => ({
							title: item.title,
							id: item.id
						}));
					});
				}
			},
			// 点击子列表
			toproList(id) {
				console.log('当前子列表id：', id);
				// let id = id,

				if (this.type == 'about') {
					uni.navigateTo({
						url: '/pages/about/about?id=' + id
					});
				}
				if (this.type == 'story') {
					uni.navigateTo({
						url: '/pages/story/story?id=' + id
					});
				}
				if (this.type == 'cases') {
					uni.navigateTo({
						url: '/pages/cases/cases?id=' + id
					});
				}
				if (this.type == 'product') {
					uni.navigateTo({
						url: '/pages/product/product?id=' + id
					});
				}
				if (this.type == 'article') {
					uni.navigateTo({
						url: '/pages/article/article?id=' + id
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.center {
		height: 100%;
		background: #FFFFFF;


	}

	.img {
		margin: 17rpx 0 17rpx 41rpx;
		width: 208rpx;
		height: 52rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.test_title {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60rpx;
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		background-color: #0165B5;
	}

	.test_table {

		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;

		input {
			width: 340rpx;
			height: 40rpx;
			background: #FFFFFF;
			border: 1px solid #B9B7B7;
			border-radius: 2rpx;
			font-size: 16rpx;
			padding-left: 16rpx;
		}
	}

	.form {
		background: #FFFFFF;
		width: 100%;
		padding: 14rpx;
		// margin-top: 54rpx;

		.form-item {

			width: 98%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;

			.form-left {

				color: #212121;
				font-size: 22rpx;
				width: 250rpx;
				flex-shrink: 0;
			}

			.tip {
				margin-left: 0rpx;
				color: #ff0000;
				width: 34rpx;
				height: 34rpx;
			}

			.form-right {
				margin-left: 2rpx;
				padding: 12rpx;
				width: 100%;
				background-color: #FFFFFF;
				border: 2rpx solid #bdbdbd;
				border-radius: 6rpx;

				.list-input {


					font-size: 18rpx;

					.input-placeholder {
						color: #C7C9D1;
						font-size: 18rpx;
					}
				}

				.list-input1 {
					color: #757575;
					font-size: 18rpx;
				}
			}
		}
	}

	.btn {
		margin-top: 34rpx;
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: center;
		color: #ffffff;
		font-size: 26rpx;

		.btn-left {
			width: 88%;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-left: 44rpx;
			background-color: #3874cb;
			border-radius: 8rpx;
		}
	}



	.result {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.result-title {

			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 180rpx;
			height: 35rpx;
			font-size: 26rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #000000;
			position: relative;
			top: 15rpx;
			z-index: 99;
			background-color: #FFFFFF;

		}

		.border {
			width: 100%;
			height: 1rpx;
			border: 1rpx solid #EEE9E9;

		}

		.result-box {
			width: 100%;
			height: 360rpx;
			background: #0165B5;
			margin-top: 24rpx;
			.effect {
				.title {
					margin-top: 10rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					text-align: center;
				}
			
				.information {
					width: 100%;
					// height: 200rpx;
					display: flex;
					justify-content: space-between;
			
					.benefits {
						padding: 24rpx 0;
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
			
						.unit {
							width: 200rpx;
							height: 200rpx;
							background-color: #3874cb;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #ffffff;
							font-size: 64rpx;
							display: flex;
							flex-direction: column;
			
							.unit1 {
								width: 100%;
								font-size: 34rpx;
								display: flex;
								padding-left: 34rpx;
								justify-content: flex-start;
								// background-color: pink;
							}
			
							.unit2 {
								font-size: 34rpx;
								margin: 0 12rpx;
							}
			
							.unit3 {
								width: 100%;
								font-size: 34rpx;
								display: flex;
								justify-content: flex-end;
								padding-right: 34rpx;
							}
						}
			
						.info {
							font-size: 24rpx;
							margin-top: 32rpx;
						}
					}
				}
			
				.refresh {
					width: 270rpx;
					height: 60rpx;
					background-color: #3874cb;
					margin: 44rpx auto;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #ffffff;
					font-size: 24rpx;
				}
			}
		}

	}

	.tanchang {
		height: 132rpx;
	}

	.aboutUs {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		margin-bottom: 100rpx;
	}
</style>