2021-8-21

src/api/index.js

@@ -102,5 +102,12 @@ export function machineId(data,id) {
 		data
 	});
 }
-
+// 交互式表单保存
+export function formBaoCun(data) {
+  return request({
+    url: "/apis/form",
+    method: "post",
+    params: data
+  });
+}
 

src/assets/css/base.css

@@ -1,22 +1,11 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+*{
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
+	box-sizing: border-box;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 

src/components/navBar/NavBar.vue

@@ -1,122 +1,116 @@
 <template>
-    <div class="top-bar">
-	  <div class="img">
-	  	<img src="../../assets/img/logo.png" >
-	  </div>
-	  <div class="barbox">
-        <div class="bar-item" v-for="( item, index ) in navList" :key="index" @click="navClick(item.path,index)" :class="{'action':currentUrl.indexOf(item.path) !=-1}">
-        <div>{{item.title}}</div>
-		<div class="xian" v-if="currentUrl.indexOf(item.path) !=-1"></div>
+	<div class="top-bar">
+		<div class="img"><img src="../../assets/img/logo.png" /></div>
+		<div class="barbox">
+			<div class="bar-item" v-for="(item, index) in navList" :key="index" @click="navClick(item.path, index)" :class="{ action: currentUrl.indexOf(item.path) != -1 }">
+				<div>{{ item.title }}</div>
+				<div class="xian" v-if="currentUrl.indexOf(item.path) != -1"></div>
+			</div>
 		</div>
-	  </div>
-    </div>
+	</div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-		navList: [
-			{
-				path: '/home',
-				title: '首页',
-			},
-			{
-				path: '/about',
-				title: '关于我们',
-			},
-			{
-				path: '/loveList',
-				title: '案例展示',
-			},
-			{
-				path: '/join',
-				title: '新闻动态',
-			},
-			{
-				path: '/donation',
-				title: '节水测试',
-			},
-			{
-				path: '/concat',
-				title: '物联网登录',
+	data() {
+		return {
+			navList: [
+				{
+					path: '/home',
+					title: '首页'
+				},
+				{
+					path: '/about',
+					title: '关于我们'
+				},
+				{
+					path: '/loveList',
+					title: '案例展示'
+				},
+				{
+					path: '/join',
+					title: '新闻动态'
+				},
+				{
+					path: '/test',
+					title: '节水测试'
+				},
+				{
+					path: '/concat',
+					title: '物联网登录'
+				}
+			],
+			currentIndex: 0
+		};
+	},
+	computed: {
+		currentUrl() {
+			return this.$route.path;
+		}
+	},
+	methods: {
+		navClick(url, index) {
+			let currentUrl = this.$route.path;
+			console.log(url);
+			console.log(currentUrl, 'now');
+			if (currentUrl === url) {
+				return;
+			} else {
+				console.log('1');
+				this.currentIndex = index;
+				console.log(this.currentIndex);
+				this.$router.push(url);
 			}
-		],
-		currentIndex: 0
-	};
-  },
-  computed: {
-	  currentUrl() {
-		  return this.$route.path
-	  }
-  },
-  methods: {
-	  navClick(url,index) {
-		  let currentUrl = this.$route.path
-		  console.log(url)
-		  console.log(currentUrl,"now")
-		  if(currentUrl === url) {
-			  return 
-		  }else {
-			  console.log("1")
-			 this.currentIndex = index
-			 console.log(this.currentIndex)
-			 this.$router.push(url) 
-		  }
-		  
-		  
-	  }
-  }
+		}
+	}
 };
 </script>
 
 <style lang="scss" scoped>
 .top-bar {
-  max-width: 1920px;
-  min-width: 1080px;
-  // height: 140px;
-  margin: 0 auto;
-  padding: 15px;
-  display: flex;
-  justify-content: space-between;
-  background-color: #FFFFFF;
-  font-size: 18px;
-  font-family: PingFang SC;
-  font-weight: bold;
-  color: #000000;
-  letter-spacing:3px;
-  align-items:center;
-  .img {
-	  width: 200px;
-	  height: auto;
-	  img {
-		  width: 100%;
-		  height: auto;
-	  }
-  }
-  .barbox {
+	width: 100%;
+	margin: 0 auto;
+	padding: 15px;
 	display: flex;
-	.bar-item {
-		margin-left: 30px;
-		flex-grow: 1;
-		align-items: center;
-		font-family: PingFang SC;
-		font-size: 18px;
-		cursor:pointer;
+	justify-content: space-between;
+	background-color: #ffffff;
+	font-size: 18px;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #000000;
+	letter-spacing: 3px;
+	align-items: center;
+	.img {
+		width: 200px;
+		height: auto;
+		img {
+			width: 100%;
+			height: auto;
+		}
+	}
+	.barbox {
 		display: flex;
-		flex-direction: column;
-		align-items: center;
+		.bar-item {
+			margin-left: 30px;
+			flex-grow: 1;
+			align-items: center;
+			font-family: PingFang SC;
+			font-size: 18px;
+			cursor: pointer;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+		.xian {
+			width: 110%;
+			background: #0165b5;
+			height: 3px;
+			margin-top: 10px;
+		}
 	}
-	.xian {
-		width: 110%;
-		background: #0165B5;
-		height: 3px;
-		margin-top: 10px;
+	.action {
+		// background-color: #0165B5;
+		color: #0165b5;
 	}
-  }
-  .action {
-  	// background-color: #0165B5;
-	color: #0165B5
-  }
 }
-</style>
+</style>

src/components/pageBottom/PageBottom.vue

@@ -60,9 +60,8 @@ export default {
 
 <style lang="scss" scoped>
 .view-bottom {
+	width: 100%;
 	position: relative;
-	max-width: 1920px;
-	min-width: 1080px;
 	height: auto;
 	margin: 0 auto;
 	background: #0165b5;

src/router/index.js

@@ -18,7 +18,14 @@ const ter =  new Router({
         title: '添利'
       }
     },
-	
+	{
+	  path: '/test',
+	  name: 'home',
+	  component: () => import('../views/test.vue'),
+	  meta: {
+	    title: '添利'
+	  }
+	},
 	{
 		path: '*',
 		redirect: '/home'

src/views/donation/Contribution.vue

@@ -1,32 +0,0 @@
-<template>
-	<div class="contribution">
-		<div class="" v-html="content">
-			
-		</div>
-	</div>
-</template>
-
-<script>
-	// import { details } from '../../request/api.js'
-	
-	export default {
-		data() {
-			return {
-				content: ''
-			}
-		},
-		created() {
-			this.getContent()
-		},
-		methods: {
-			getContent() {
-				details({},25).then(({data}) => {
-					this.content = data.content
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped="">
-</style>

src/views/donation/Hpc.vue

@@ -1,50 +0,0 @@
-<template>
-	<div class="hpc">
-		<div v-html="content"></div>
-	</div>
-</template>
-
-<script>
-	// import { details } from '../../request/api.js'
-	export default {
-		data() {
-			return {
-				content: ''
-			}
-		},
-		created() {
-			this.getData()
-			this.getContent(27)
-		},
-		computed: {
-			iid() {
-				return this.$route.query.id || 0
-			}
-		},
-		watch: {
-			iid(val) {
-				this.getData(val)
-			}
-		},
-		methods: {
-			getData(val) {
-				if(!val){
-					val = 0
-				}
-				if(val==0){
-					this.getContent(27)
-				}else {
-					this.getContent(28)
-				}
-			},
-			getContent(id) {
-				details({},id).then(({data}) => {
-					this.content = data.content
-				})
-			}
-		}
-	}
-</script>
-
-<style>
-</style>

src/views/donation/OrganDonation.vue

@@ -1,34 +0,0 @@
-<template>
-	<div class="organ-donation">
-		<div class="content" v-html="content"></div>
-	</div>
-</template>
-
-<script>
-	// import { details } from '../../request/api.js'
-	
-	export default {
-		data() {
-			return {
-				content: ''
-			}
-		},
-		created() {
-			this.getContent()
-		},
-		methods: {
-			getContent() {
-				details({},26).then(({data}) => {
-					this.content = data.content
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	// .content {
-	// 	width: 100%;
-	// 	// overflow: hidden;
-	// }
-</style>

src/views/test.vue

@@ -0,0 +1,393 @@
+<template>
+	<div class="jieshui_box">
+		<div class="swiper-item">
+			<div class="form">
+				<div class="form-item">
+					<div class="form-left">姓名：</div>
+					<div class="form-right"><el-input class="list-input" v-model="name" type="text" placeholder="请填写姓名"></el-input></div>
+				</div>
+				<div class="form-item">
+					<div class="form-left">地址</div>
+					<div class="form-right"><el-input class="list-input" v-model="address" type="text" placeholder="请填写详细地址"></el-input></div>
+				</div>
+				<div class="form-item">
+					<div class="form-left">联系电话:</div>
+					<div class="form-right"><el-input class="list-input" v-model="telephone" type="number" placeholder="请填写联系电话"></el-input></div>
+				</div>
+				<div class="form-item">
+					<div class="form-left">生产线类型:</div>
+					<div class="form-right">
+						<el-select class="list-input" v-model="line_type" placeholder="请选择生产类型">
+							<el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value"></el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="form-item">
+					<div class="form-left">生产线数量:</div>
+					<div class="form-right"><el-input class="list-input" v-model="line_num" type="number" placeholder="请填写生产线数量"></el-input></div>
+				</div>
+				<div class="form-item">
+					<div class="form-left">目前用水量(吨/小时):</div>
+					<div class="form-right"><el-input class="list-input" v-model="water_using" type="number" placeholder="请填写目前用水量"></el-input></div>
+				</div>
+				<div class="form-item">
+					<div class="form-left">工作时长(小时):</div>
+					<div class="form-right"><el-input class="list-input" v-model="day_work_times" type="number" placeholder="默认为12小时"></el-input></div>
+				</div>
+				<div class="form-item">
+					<div class="form-left">年工作日数:</div>
+					<div class="form-right"><el-input class="list-input" v-model="year_work_day" type="number" placeholder="默认为330日"></el-input></div>
+				</div>
+				<div class="form-item">
+					<div class="form-left">废水处理成本(元/吨):</div>
+					<div class="form-right"><el-input class="list-input" v-model="deal_cost" type="number" placeholder="请填写废水处理成本"></el-input></div>
+				</div>
+			</div>
+			<div class="btn"><div class="btn-left" @click="next">提交</div></div>
+		</div>
+
+		<div class="swiper-item" v-if="isshow">
+			<div class="effect">
+				<div class="title">改造后的数据</div>
+				<div class="information">
+					<div class="benefits">
+						<div class="unit">
+							<!-- {{ num1 }} -->
+							<div class="unit1">{{ num1 }}</div>
+							<div class="unit2">~</div>
+							<div class="unit3">{{ num2 }}</div>
+						</div>
+						<div class="info">改造后用水量(吨/小时)</div>
+					</div>
+					<div class="benefits">
+						<div class="unit">
+							<!-- {{ num1 }} -->
+							<div class="unit1">{{ num3 }}</div>
+							<div class="unit2">~</div>
+							<div class="unit3">{{ num4 }}</div>
+						</div>
+						<div class="info">年经济效益(万元)</div>
+					</div>
+				</div>
+				<div class="btn"><div class="btn-left" @click="refresh">重新测试</div></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { formBaoCun } from '../api/index';
+export default {
+	name: 'test',
+	data() {
+		return {
+			recommend1: [
+				{
+					id: 0,
+					title: '01.填写信息'
+				},
+				{
+					id: 1,
+					title: '02.预测效果'
+				}
+			],
+			name: '',
+			address: '',
+			telephone: '',
+			line_type: '',
+			line_num: '',
+			water_using: '',
+			day_work_times: 12,
+			year_work_day: 330,
+			deal_cost: '',
+			options: [
+				{
+					value: '塑料镀铬线'
+				},
+				{
+					value: '五金镀铬线'
+				}
+			],
+			isshow: false,
+			num1: '',
+			num2: '',
+			num3: '',
+			num4: '',
+			savaWater1: '',
+			savaWater2: ''
+		};
+	},
+	mounted() {},
+	created() {},
+	methods: {
+		// 提交测试
+		next() {
+			let obj = this;
+			if (!obj.name) {
+				obj.$alert('请输入姓名', '提示', {
+					confirmButtonText: '确定'
+				});
+				return;
+			}
+			if (!obj.address) {
+				obj.$alert('请填写详细地址', '提示', {
+					confirmButtonText: '确定'
+				});
+				return;
+			}
+			if (!obj.telephone) {
+				obj.$alert('请填写联系电话', '提示', {
+					confirmButtonText: '确定'
+				});
+				return;
+			}
+			const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
+			if (!reg.test(obj.telephone)) {
+				obj.$alert('请填写正确的手机格式', '提示', {
+					confirmButtonText: '确定'
+				});
+				return;
+			}
+			if (!obj.line_type) {
+				obj.$alert('请填写生产线类型', '提示', {
+					confirmButtonText: '确定'
+				});
+				return;
+			}
+			if (!obj.line_num) {
+				obj.$alert('请填写生产线数量', '提示', {
+					confirmButtonText: '确定'
+				});
+				return;
+			}
+			if (!obj.water_using) {
+				obj.$alert('请填写目前用水量', '提示', {
+					confirmButtonText: '确定'
+				});
+				return;
+			}
+
+			if (!obj.deal_cost) {
+				obj.$alert('请填写废水处理成本', '提示', {
+					confirmButtonText: '确定'
+				});
+				return;
+			}
+			console.log('’提交');
+			formBaoCun({
+				name: obj.name,
+				address: obj.address,
+				telephone: obj.telephone,
+				line_type: obj.line_type,
+				line_num: obj.line_num,
+				water_using: obj.water_using,
+				day_work_times: obj.day_work_times,
+				year_work_day: obj.year_work_day,
+				deal_cost: obj.deal_cost
+			}).then(e => {
+				console.log(e, '请求成功');
+				obj.isshow = true;
+				obj.num1 = '';
+				obj.num2 = '';
+				obj.num3 = '';
+				obj.num4 = '';
+				obj.savaWater1 = '';
+				obj.savaWater2 = '';
+				/** 
+						交互式表单公式
+							改造后用水量为：目前用水量的30%—70%
+							经济效益=节约的水量X年工作时长（小时）X废水处理成本
+							节约的水量=目前用水量—改造后的用水量
+							经济效益也是一个范围值
+					 **/
+				// 改造后用水量
+				// this.num1 = this.water_using * 0.3;
+				// this.num2 = this.water_using * 0.7;
+				obj.num1 = parseFloat(obj.water_using * 0.3).toFixed(2);
+				obj.num2 = parseFloat(obj.water_using * 0.7).toFixed(2);
+				console.log('this.num1', obj.num1);
+				// 节约的水量=目前用水量—改造后的用水量
+				obj.savaWater1 = obj.water_using - obj.num1;
+				obj.savaWater2 = obj.water_using - obj.num2;
+				console.log('this.savaWater1', obj.savaWater1);
+				console.log('this.day_work_times', obj.day_work_times);
+				console.log('this.deal_cost', obj.deal_cost);
+				// 经济效益=节约的水量X年工作时长（小时）X废水处理成本
+				obj.num3 = parseFloat((obj.savaWater1 * 3960 * obj.deal_cost) / 10000).toFixed(2);
+				obj.num4 = parseFloat((obj.savaWater2 * 3960 * obj.deal_cost) / 10000).toFixed(2);
+			});
+		},
+		refresh() {
+			this.isshow = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.jieshui_box {
+	.recommend1 {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		.recommend_list {
+			height: 62px;
+			position: relative;
+			&:first-of-type {
+				margin-right: 50px;
+			}
+			.re-nva {
+				width: 100%;
+				height: 62px;
+				.re_img {
+					width: 264px;
+					height: 62px;
+				}
+			}
+
+			.nav-item {
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 62px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				color: #fff;
+				font-size: 16px;
+			}
+		}
+	}
+
+	.form {
+		width: 100%;
+		padding: 24px;
+		// margin-top: 54rpx;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.form-item {
+			width: 45%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 22px;
+			.form-left {
+				color: #212121;
+				font-size: 22px;
+				width: 230px;
+				flex-shrink: 0;
+			}
+
+			.form-right {
+				margin-left: 12px;
+				width: 100%;
+				// background-color: #f2f2f2;
+				// border: 1px solid #bdbdbd;
+				border-radius: 8px;
+
+				.list-input {
+					color: #333;
+					font-size: 18px;
+					width: 100%;
+					// padding: 12px;
+					// background-color: #f2f2f2;
+					// border: 1px solid #bdbdbd;
+				}
+				.list-input1 {
+					color: #757575;
+					font-size: 18px;
+				}
+			}
+		}
+	}
+	.btn {
+		margin-top: 34px;
+		width: 100%;
+		height: 70px;
+		display: flex;
+		justify-content: center;
+		color: #ffffff;
+		font-size: 26px;
+
+		.btn-left {
+			width: 295px;
+			height: 60px;
+			background: #1976d2;
+			border-radius: 4px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 24px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #ffffff;
+			cursor: pointer;
+		}
+	}
+
+	.effect {
+		padding-top: 15px;
+		background-color: #0165b5;
+		margin-top: 15px;
+		padding-bottom: 15px;
+		margin-bottom: 15px;
+		color: #ffffff;
+		.title {
+			text-align: center;
+			font-size: 32px;
+		}
+		.information {
+			width: 100%;
+			// height: 200rpx;
+			display: flex;
+			justify-content: space-between;
+
+			.benefits {
+				padding: 24px 0;
+				width: 50%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				.unit {
+					width: 200px;
+					height: 200px;
+					background-color: #3874cb;
+					border-radius: 50%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 64px;
+					display: flex;
+					flex-direction: column;
+					.unit1 {
+						width: 100%;
+						font-size: 34px;
+						display: flex;
+						padding-left: 34px;
+						justify-content: flex-start;
+						// background-color: pink;
+					}
+					.unit2 {
+						font-size: 34px;
+						margin: 0 12px;
+					}
+					.unit3 {
+						width: 100%;
+						font-size: 34px;
+						display: flex;
+						justify-content: flex-end;
+						padding-right: 34px;
+					}
+				}
+
+				.info {
+					font-size: 24px;
+					margin-top: 32px;
+				}
+			}
+		}
+	}
+}
+</style>