dev/dcp-web-gate/src_old/views/unitConversion/heatUnitConversion.vue

<template>
	<div style="display: flex; flex-wrap: wrap; width: 1200px; margin: auto">
		<div style="width: 90%; margin-left: 5%">
			<div style="width: 60%; margin: 1% 5%">
				<div style="display: flex">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '吨标煤(tce)' : 'tce' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '吨标油(toe)' : 'toe' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '吉焦(GJ)' : 'GJ' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '吉卡(Gcal)' : 'Gcal' }}</li>
						<li>
							{{ $i18n.locale === 'zh' ? '百万英热单位(MBtu)' : 'MBtu' }}
						</li>
						<li>{{ $i18n.locale === 'zh' ? '兆瓦时(MWh)' : 'MWh' }}</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="a"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('1')"
								@blur="lostBlur"
								@input="getNum('a')"
								:class="focusClass == 1 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNum('a')">{{
								$i18n.locale === 'zh' ? '换算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="b"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('2')"
								@blur="lostBlur"
								@input="getNum('b')"
								:class="focusClass == 2 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNum('b')">{{
								$i18n.locale === 'zh' ? '换算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="c"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('3')"
								@blur="lostBlur"
								@input="getNum('c')"
								:class="focusClass == 3 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNum('c')">{{
								$i18n.locale === 'zh' ? '换算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="d"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('4')"
								@blur="lostBlur"
								@input="getNum('d')"
								:class="focusClass == 4 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNum('d')">{{
								$i18n.locale === 'zh' ? '换算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="e"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('5')"
								@blur="lostBlur"
								@input="getNum('e')"
								:class="focusClass == 5 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNum('e')">{{
								$i18n.locale === 'zh' ? '换算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="f"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('6')"
								@blur="lostBlur"
								@input="getNum('f')"
								:class="focusClass == 6 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNum('f')">{{
								$i18n.locale === 'zh' ? '换算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div>
					<el-button class="user-btn-clear" @click="getNum('0')">{{
						$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
					}}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'unitConversion',
	data() {
		return {
			focusClass: '',
			textInfo: '请输入数值',
			textInfo1: 'Please enter a value',
			a: '',
			b: '',
			c: '',
			d: '',
			e: '',
			f: '',
		}
	},
	mounted() {},
	methods: {
		lostBlur() {
			this.focusClass = ''
		},
		getFocus(num) {
			this.focusClass = num
		},
		getNum(num) {
			if (num == 'a') {
				if (this.a == '') {
					this.getNum('0')
				} else {
					let a1 = Number(this.a)
					this.b = (a1 * Number(0.7)).toFixed(3)
					this.c = (a1 * Number(29.31)).toFixed(3)
					this.d = (a1 * Number(7.005)).toFixed(3)
					this.e = (a1 * Number(27.78)).toFixed(3)
					this.f = (a1 * Number(8.141)).toFixed(3)
				}
			} else if (num == 'b') {
				if (this.b == '') {
					this.getNum('0')
				} else {
					let b1 = Number(this.b)
					this.a = (b1 / Number(0.7)).toFixed(3)
					let a2 = Number(this.a)
					this.c = (a2 * Number(29.31)).toFixed(3)
					this.d = (a2 * Number(7.005)).toFixed(3)
					this.e = (a2 * Number(27.78)).toFixed(3)
					this.f = (a2 * Number(8.141)).toFixed(3)
				}
			} else if (num == 'c') {
				if (this.c == '') {
					this.getNum('0')
				} else {
					let c1 = Number(this.c)
					this.a = (c1 / Number(29.31)).toFixed(3)
					let a3 = Number(this.a)
					this.b = (a3 * Number(0.7)).toFixed(3)
					this.d = (a3 * Number(7.005)).toFixed(3)
					this.e = (a3 * Number(27.78)).toFixed(3)
					this.f = (a3 * Number(8.141)).toFixed(3)
				}
			} else if (num == 'd') {
				if (this.d == '') {
					this.getNum('0')
				} else {
					let d1 = Number(this.d)
					this.a = (d1 / Number(7.005)).toFixed(3)
					let a4 = Number(this.a)
					this.b = (a4 * Number(0.7)).toFixed(3)
					this.c = (a4 * Number(29.31)).toFixed(3)
					this.e = (a4 * Number(27.78)).toFixed(3)
					this.f = (a4 * Number(8.141)).toFixed(3)
				}
			} else if (num == 'e') {
				if (this.e == '') {
					this.getNum('0')
				} else {
					let e1 = Number(this.e)
					this.a = (e1 / Number(27.78)).toFixed(3)
					let a5 = Number(this.a)
					this.b = (a5 * Number(0.7)).toFixed(3)
					this.c = (a5 * Number(29.31)).toFixed(3)
					this.d = (a5 * Number(7.005)).toFixed(3)
					this.f = (a5 * Number(8.141)).toFixed(3)
				}
			} else if (num == 'f') {
				if (this.f == '') {
					this.getNum('0')
				} else {
					let f1 = Number(this.f)
					this.a = (f1 / Number(8.141)).toFixed(3)
					let a6 = Number(this.a)
					this.b = (a6 * Number(0.7)).toFixed(3)
					this.c = (a6 * Number(29.31)).toFixed(3)
					this.d = (a6 * Number(7.005)).toFixed(3)
					this.e = (a6 * Number(27.78)).toFixed(3)
				}
			} else if (num == '0') {
				this.a = ''
				this.b = ''
				this.c = ''
				this.d = ''
				this.e = ''
				this.f = ''
			}
		},
	},
}
</script>
<style lang="less" scoped>
ul > li {
	height: 41px;
	margin: 20px 0;
	line-height: 41px;
	border-top: 1px solid #dbdbdb;
	border-right: 1px solid #dbdbdb;
	border-bottom: 1px solid #dbdbdb;
	display: flex;
}
.none-title > li {
	border: none !important;
	height: 41px;
	line-height: 41px;
}
.text-title > li {
	padding-left: 10px;
	border-left: 1px solid #dbdbdb;
}
ul > li /deep/.el-input__inner {
	width: 100% !important;
	height: 100% !important;
	border: none;
	border-radius: 0;
	background-color: rgba(255, 255, 255, 0);
	color: #000;
}
.focusClass1 {
	border: none;
}
.focusClass2 {
	border: 2px solid #c7d1dd;
	background-color: #f1f1f1;
}
.user-btn {
	background-color: #105dbc;
	color: #fff;
}
// .user-btn:hover {
// 	background-color: #18caf7;
// 	color: #000;
// }
.user-btn-clear {
	width: 60%;
	margin-left: 20%;
	margin-top: 2%;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 1px;
	border-right: 1px;
	box-shadow: 5px 5px 5px rgb(63, 62, 62);
	background: linear-gradient(90deg, #3f9eff, #1674d5);
	color: #fff;
	border-radius: 50px;
}
// .user-btn-clear:hover {
// 	width: 60%;
// 	margin-left: 20%;
// 	margin-top: 2%;
// 	font-size: 16px;
// 	font-weight: 700;
// 	background: linear-gradient(90deg, #4d98e4, #18caf7);
// 	color: #000;
// 	border-radius: 50px;
// }

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}

/deep/ input[type='number'] {
	-moz-appearance: textfield !important;
}
</style>