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

<template>
	<div style="display: flex; flex-wrap: wrap; width: 1200px; margin: auto">
		<div :class="$i18n.locale === 'zh' ? 'user-title1' : 'user-title2'">
			<div class="information">
				{{ $i18n.locale === 'zh' ? '快速选择：' : 'Quick selection' }}
			</div>
			<div
				@click="getInfo('0')"
				:class="informationsClass == 0 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '全部' : 'Whole' }}
			</div>
			<div
				@click="getInfo('1')"
				:class="informationsClass == 1 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '煤炭' : 'Coal' }}
			</div>
			<div
				@click="getInfo('2')"
				:class="informationsClass == 2 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '石油' : 'Oil' }}
			</div>
			<div
				@click="getInfo('3')"
				:class="informationsClass == 3 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '天然气' : 'Natural gas' }}
			</div>
			<div
				@click="getInfo('4')"
				:class="informationsClass == 4 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '氢' : 'Hydrogen' }}
			</div>
		</div>
		<div
			style="
				display: flex;
				flex-wrap: wrap;
				width: 98%;
				margin-left: 1%;
				justify-content: space-between;
			"
		>
			<div v-if="userCoal" style="width: 48%; display: inline-block">
				<div style="display: flex">
					<div style="width: 40px; height: 40px">
						<img
							src="@/assets/userUntil-8.png"
							style="width: 100%; height: 100%"
						/>
					</div>
					<div
						style="
							font-size: 22px;
							font-weight: 700;
							height: 40px;
							line-height: 40px;
							margin-left: 10px;
						"
					>
						{{ $i18n.locale === 'zh' ? '煤炭' : 'Coal' }}
					</div>
				</div>
				<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
				<div style="display: flex">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '千克(kg)' : 'kg' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '磅(lb)' : 'lb' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '长吨(lt)' : 'lt' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '短吨(st)' : 'st' }}</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="a"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="a"
								@focus="getFocus('1')"
								@blur="lostBlur"
								@input="getNum('a')"
								:class="focusClass == 1 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><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"
								:title="b"
								@focus="getFocus('2')"
								@blur="lostBlur"
								@input="getNum('b')"
								:class="focusClass == 2 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><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"
								:title="c"
								@focus="getFocus('3')"
								@blur="lostBlur"
								@input="getNum('c')"
								:class="focusClass == 3 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><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"
								:title="d"
								@focus="getFocus('4')"
								@blur="lostBlur"
								@input="getNum('d')"
								:class="focusClass == 4 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><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"
								:title="e"
								@focus="getFocus('5')"
								@blur="lostBlur"
								@input="getNum('e')"
								:class="focusClass == 5 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getNum('e')">{{
								$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 v-if="userOil" style="width: 48%; display: inline-block">
				<div style="display: flex">
					<div style="width: 40px; height: 40px">
						<img
							src="@/assets/userUntil-2.png"
							style="width: 100%; height: 100%"
						/>
					</div>
					<div
						style="
							font-size: 22px;
							font-weight: 700;
							height: 40px;
							line-height: 40px;
							margin-left: 10px;
						"
					>
						{{ $i18n.locale === 'zh' ? '石油' : 'Oil' }}
					</div>
				</div>
				<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
				<div style="display: flex">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '千克(kg)' : 'kg' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '磅(lb)' : 'lb' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '长吨(lt)' : 'lt' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '短吨(st)' : 'st' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '升(l)' : 'l' }}</li>
						<li>
							{{ $i18n.locale === 'zh' ? '美制加仑(gal.US)' : 'gal.US' }}
						</li>
						<li>
							{{ $i18n.locale === 'zh' ? '英制加仑(gal.UK)' : 'gal.UK' }}
						</li>
						<li>{{ $i18n.locale === 'zh' ? '桶(bbl)' : 'bbl' }}</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="a1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="a1"
								@focus="getFocus('6')"
								@blur="lostBlur"
								@input="getOil('a1')"
								:class="focusClass == 6 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('a1')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="b1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="b1"
								@focus="getFocus('7')"
								@blur="lostBlur"
								@input="getOil('b1')"
								:class="focusClass == 7 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('b1')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="c1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="c1"
								@focus="getFocus('8')"
								@blur="lostBlur"
								@input="getOil('c1')"
								:class="focusClass == 8 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('c1')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="d1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="d1"
								@focus="getFocus('9')"
								@blur="lostBlur"
								@input="getOil('d1')"
								:class="focusClass == 9 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('d1')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="e1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="e1"
								@focus="getFocus('10')"
								@blur="lostBlur"
								@input="getOil('e1')"
								:class="focusClass == 10 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('e1')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="f"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="f"
								@focus="getFocus('11')"
								@blur="lostBlur"
								@input="getOil('f')"
								:class="focusClass == 11 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('f')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="g"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="g"
								@focus="getFocus('12')"
								@blur="lostBlur"
								@input="getOil('g')"
								:class="focusClass == 12 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('g')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="h"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="h"
								@focus="getFocus('13')"
								@blur="lostBlur"
								@input="getOil('h')"
								:class="focusClass == 13 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('h')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="i"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="i"
								@focus="getFocus('14')"
								@blur="lostBlur"
								@input="getOil('i')"
								:class="focusClass == 14 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getOil('i')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div>
					<el-button class="user-btn-clear" @click="getOil('0')">{{
						$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
					}}</el-button>
				</div>
			</div>
			<div v-if="userNatural" style="width: 48%; display: inline-block">
				<div style="display: flex">
					<div style="width: 40px; height: 40px">
						<img
							src="@/assets/userUntil-7.png"
							style="width: 100%; height: 100%"
						/>
					</div>
					<div
						style="
							font-size: 22px;
							font-weight: 700;
							height: 40px;
							line-height: 40px;
							margin-left: 10px;
						"
					>
						{{ $i18n.locale === 'zh' ? '天然气' : 'Natural gas' }}
					</div>
				</div>
				<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
				<div style="display: flex">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '立方米(m3)' : 'm3' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '立方英尺(ft3)' : 'ft3' }}</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="j"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="j"
								@focus="getFocus('15')"
								@blur="lostBlur"
								@input="getGas('j')"
								:class="focusClass == 15 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getGas('j')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="k"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="k"
								@focus="getFocus('16')"
								@blur="lostBlur"
								@input="getGas('k')"
								:class="focusClass == 16 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getGas('k')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div>
					<el-button class="user-btn-clear" @click="getGas('0')">{{
						$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
					}}</el-button>
				</div>
			</div>
			<div v-if="userHydrogen" style="width: 48%; display: inline-block">
				<div style="display: flex">
					<div style="width: 40px; height: 40px">
						<img
							src="@/assets/userUntil-3.png"
							style="width: 100%; height: 100%"
						/>
					</div>
					<div
						style="
							font-size: 22px;
							font-weight: 700;
							height: 40px;
							line-height: 40px;
							margin-left: 10px;
						"
					>
						{{ $i18n.locale === 'zh' ? '氢' : 'Hydrogen' }}
					</div>
				</div>
				<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
				<div style="display: flex">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '千克(kg)' : 'kg' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '磅(lb)' : 'lb' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '长吨(lt)' : 'lt' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '短吨(st)' : 'st' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '立方米(m3)' : 'm3' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '立方英尺(ft3)' : 'ft3' }}</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="a2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="a2"
								@focus="getFocus('17')"
								@blur="lostBlur"
								@input="getHydrogen('a2')"
								:class="focusClass == 17 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getHydrogen('a2')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="b2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="b2"
								@focus="getFocus('18')"
								@blur="lostBlur"
								@input="getHydrogen('b2')"
								:class="focusClass == 18 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getHydrogen('b2')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="c2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="c2"
								@focus="getFocus('19')"
								@blur="lostBlur"
								@input="getHydrogen('c2')"
								:class="focusClass == 19 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getHydrogen('c2')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="d2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="d2"
								@focus="getFocus('20')"
								@blur="lostBlur"
								@input="getHydrogen('d2')"
								:class="focusClass == 20 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getHydrogen('d2')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="e2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="e2"
								@focus="getFocus('21')"
								@blur="lostBlur"
								@input="getHydrogen('e2')"
								:class="focusClass == 21 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getHydrogen('e2')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="l"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="l"
								@focus="getFocus('22')"
								@blur="lostBlur"
								@input="getHydrogen('l')"
								:class="focusClass == 22 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getHydrogen('l')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="m"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								:title="m"
								@focus="getFocus('23')"
								@blur="lostBlur"
								@input="getHydrogen('m')"
								:class="focusClass == 23 ? 'focusClass2' : 'focusClass1'"
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							/><el-button class="user-btn" @click="getHydrogen('m')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div>
					<el-button class="user-btn-clear" @click="getHydrogen('0')">{{
						$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
					}}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'unitConversion',
	data() {
		return {
			focusClass: '',
			userCoal: true,
			userOil: true,
			userNatural: true,
			userHydrogen: true,
			informationsClass: '0',
			textInfo: '请输入数值',
			textInfo1: 'Please enter a value',
			//煤炭
			a: '',
			b: '',
			c: '',
			d: '',
			e: '',
			//石油
			a1: '',
			b1: '',
			c1: '',
			d1: '',
			e1: '',
			f: '',
			g: '',
			h: '',
			i: '',
			//天然气
			j: '',
			k: '',
			//氢
			a2: '',
			b2: '',
			c2: '',
			d2: '',
			e2: '',
			l: '',
			m: '',
		}
	},
	mounted() {
		this.getInfo('0')
	},
	methods: {
		lostBlur() {
			this.focusClass = ''
		},
		getFocus(num) {
			this.focusClass = num
		},
		getInfo(num) {
			this.informationsClass = num
			if (num == '0') {
				this.userCoal = true
				this.userOil = true
				this.userNatural = true
				this.userHydrogen = true
			}
			if (num == '1') {
				this.userCoal = true
				this.userOil = false
				this.userNatural = false
				this.userHydrogen = false
			}
			if (num == '2') {
				this.userCoal = false
				this.userOil = true
				this.userNatural = false
				this.userHydrogen = false
			}
			if (num == '3') {
				this.userCoal = false
				this.userOil = false
				this.userNatural = true
				this.userHydrogen = false
			}
			if (num == '4') {
				this.userCoal = false
				this.userOil = false
				this.userNatural = false
				this.userHydrogen = true
			}
		},
		getNum(num) {
			if (num == 'a') {
				if (this.a == '') {
					this.getNum('0')
				} else {
					let a1 = Number(this.a)
					this.b = (a1 * Number(1000)).toFixed(3)
					this.c = (a1 * Number(2205)).toFixed(3)
					this.d = (a1 * Number(0.9843)).toFixed(3)
					this.e = (a1 * Number(1.102)).toFixed(3)
				}
			} else if (num == 'b') {
				if (this.b == '') {
					this.getNum('0')
				} else {
					let b1 = Number(this.b)
					this.a = (b1 / Number(1000)).toFixed(3)
					let a2 = Number(this.a)
					this.c = (a2 * Number(2205)).toFixed(3)
					this.d = (a2 * Number(0.9843)).toFixed(3)
					this.e = (a2 * Number(1.102)).toFixed(3)
				}
			} else if (num == 'c') {
				if (this.c == '') {
					this.getNum('0')
				} else {
					let c1 = Number(this.c)
					this.a = (c1 / Number(2205)).toFixed(3)
					let a3 = Number(this.a)
					this.b = (a3 * Number(1000)).toFixed(3)
					this.d = (a3 * Number(0.9843)).toFixed(3)
					this.e = (a3 * Number(1.102)).toFixed(3)
				}
			} else if (num == 'd') {
				if (this.d == '') {
					this.getNum('0')
				} else {
					let d1 = Number(this.d)
					this.a = (d1 / Number(0.9843)).toFixed(3)
					let a4 = Number(this.a)
					this.b = (a4 * Number(1000)).toFixed(3)
					this.c = (a4 * Number(2205)).toFixed(3)
					this.e = (a4 * Number(1.102)).toFixed(3)
				}
			} else if (num == 'e') {
				if (this.e == '') {
					this.getNum('0')
				} else {
					let e1 = Number(this.e)
					this.a = (e1 / Number(1.102)).toFixed(3)
					let a5 = Number(this.a)
					this.b = (a5 * Number(1000)).toFixed(3)
					this.c = (a5 * Number(2205)).toFixed(3)
					this.d = (a5 * Number(0.9843)).toFixed(3)
				}
			} else if (num == '0') {
				this.a = ''
				this.b = ''
				this.c = ''
				this.d = ''
				this.e = ''
			}
		},
		getOil(num) {
			if (num == 'a1') {
				if (this.a1 == '') {
					this.getOil('0')
				} else {
					let a2 = Number(this.a1)
					this.b1 = (a2 * Number(1000)).toFixed(3)
					this.c1 = (a2 * Number(2205)).toFixed(3)
					this.d1 = (a2 * Number(0.9843)).toFixed(3)
					this.e1 = (a2 * Number(1.102)).toFixed(3)
					this.f = (a2 * Number(1173)).toFixed(3)
					this.g = (a2 * Number(309.8)).toFixed(3)
					this.h = (a2 * Number(258)).toFixed(3)
					this.i = (a2 * Number(7.38)).toFixed(3)
				}
			}
			if (num == 'b1') {
				if (this.b1 == '') {
					this.getOil('0')
				} else {
					let b1 = Number(this.b1)
					this.a1 = (b1 / Number(1000)).toFixed(3)
					let a2 = Number(this.a1)
					this.c1 = (a2 * Number(2205)).toFixed(3)
					this.d1 = (a2 * Number(0.9843)).toFixed(3)
					this.e1 = (a2 * Number(1.102)).toFixed(3)
					this.f = (a2 * Number(1173)).toFixed(3)
					this.g = (a2 * Number(309.8)).toFixed(3)
					this.h = (a2 * Number(258)).toFixed(3)
					this.i = (a2 * Number(7.38)).toFixed(3)
				}
			}
			if (num == 'c1') {
				if (this.c1 == '') {
					this.getOil('0')
				} else {
					let c1 = Number(this.c1)
					this.a1 = (c1 / Number(2205)).toFixed(3)
					let a2 = Number(this.a1)
					this.b1 = (a2 * Number(1000)).toFixed(3)
					this.d1 = (a2 * Number(0.9843)).toFixed(3)
					this.e1 = (a2 * Number(1.102)).toFixed(3)
					this.f = (a2 * Number(1173)).toFixed(3)
					this.g = (a2 * Number(309.8)).toFixed(3)
					this.h = (a2 * Number(258)).toFixed(3)
					this.i = (a2 * Number(7.38)).toFixed(3)
				}
			}
			if (num == 'd1') {
				if (this.d1 == '') {
					this.getOil('0')
				} else {
					let d1 = Number(this.d1)
					this.a1 = (d1 / Number(0.9843)).toFixed(3)
					let a2 = Number(this.a1)
					this.b1 = (a2 * Number(1000)).toFixed(3)
					this.c1 = (a2 * Number(2205)).toFixed(3)
					this.e1 = (a2 * Number(1.102)).toFixed(3)
					this.f = (a2 * Number(1173)).toFixed(3)
					this.g = (a2 * Number(309.8)).toFixed(3)
					this.h = (a2 * Number(258)).toFixed(3)
					this.i = (a2 * Number(7.38)).toFixed(3)
				}
			}
			if (num == 'e1') {
				if (this.e1 == '') {
					this.getOil('0')
				} else {
					let e2 = Number(this.e1)
					this.a1 = (e2 / Number(1.102)).toFixed(3)
					let a2 = Number(this.a1)
					this.b1 = (a2 * Number(1000)).toFixed(3)
					this.c1 = (a2 * Number(2205)).toFixed(3)
					this.d1 = (a2 * Number(0.9843)).toFixed(3)
					this.f = (a2 * Number(1173)).toFixed(3)
					this.g = (a2 * Number(309.8)).toFixed(3)
					this.h = (a2 * Number(258)).toFixed(3)
					this.i = (a2 * Number(7.38)).toFixed(3)
				}
			}
			if (num == 'f') {
				if (this.f == '') {
					this.getOil('0')
				} else {
					let f2 = Number(this.f)
					this.a1 = (f2 / Number(1173)).toFixed(3)
					let a2 = Number(this.a1)
					this.b1 = (a2 * Number(1000)).toFixed(3)
					this.c1 = (a2 * Number(2205)).toFixed(3)
					this.d1 = (a2 * Number(0.9843)).toFixed(3)
					this.e1 = (a2 * Number(1.102)).toFixed(3)
					this.g = (a2 * Number(309.8)).toFixed(3)
					this.h = (a2 * Number(258)).toFixed(3)
					this.i = (a2 * Number(7.38)).toFixed(3)
				}
			}
			if (num == 'g') {
				if (this.g == '') {
					this.getOil('0')
				} else {
					let g2 = Number(this.g)
					this.a1 = (g2 / Number(309.8)).toFixed(3)
					let a2 = Number(this.a1)
					this.b1 = (a2 * Number(1000)).toFixed(3)
					this.c1 = (a2 * Number(2205)).toFixed(3)
					this.d1 = (a2 * Number(0.9843)).toFixed(3)
					this.e1 = (a2 * Number(1.102)).toFixed(3)
					this.f = (a2 * Number(1173)).toFixed(3)
					this.h = (a2 * Number(258)).toFixed(3)
					this.i = (a2 * Number(7.38)).toFixed(3)
				}
			}
			if (num == 'h') {
				if (this.h == '') {
					this.getOil('0')
				} else {
					let g2 = Number(this.h)
					this.a1 = (g2 / Number(258)).toFixed(3)
					let a2 = Number(this.a1)
					this.b1 = (a2 * Number(1000)).toFixed(3)
					this.c1 = (a2 * Number(2205)).toFixed(3)
					this.d1 = (a2 * Number(0.9843)).toFixed(3)
					this.e1 = (a2 * Number(1.102)).toFixed(3)
					this.f = (a2 * Number(1173)).toFixed(3)
					this.g = (a2 * Number(309.8)).toFixed(3)
					this.i = (a2 * Number(7.38)).toFixed(3)
				}
			}
			if (num == 'i') {
				if (this.i == '') {
					this.getOil('0')
				} else {
					let g2 = Number(this.i)
					this.a1 = (g2 / Number(7.38)).toFixed(3)
					let a2 = Number(this.a1)
					this.b1 = (a2 * Number(1000)).toFixed(3)
					this.c1 = (a2 * Number(2205)).toFixed(3)
					this.d1 = (a2 * Number(0.9843)).toFixed(3)
					this.e1 = (a2 * Number(1.102)).toFixed(3)
					this.f = (a2 * Number(1173)).toFixed(3)
					this.g = (a2 * Number(309.8)).toFixed(3)
					this.h = (a2 * Number(258)).toFixed(3)
				}
			}
			if (num == '0') {
				this.a1 = ''
				this.b1 = ''
				this.c1 = ''
				this.d1 = ''
				this.e1 = ''
				this.f = ''
				this.g = ''
				this.h = ''
				this.i = ''
			}
		},
		getGas(num) {
			if (num == 'j') {
				if (this.j == '') {
					this.getGas('0')
				} else {
					let j1 = Number(this.j)
					this.k = (j1 * Number(35.31)).toFixed(3)
				}
			}
			if (num == 'k') {
				if (this.k == '') {
					this.getGas('0')
				} else {
					let k1 = Number(this.k)
					this.j = (k1 / Number(35.31)).toFixed(3)
				}
			}
			if (num == '0') {
				this.j = ''
				this.k = ''
			}
		},
		getHydrogen(num) {
			if (num == 'a2') {
				if (this.a2 == '') {
					this.getHydrogen('0')
				} else {
					let a3 = Number(this.a2)
					this.b2 = (a3 * Number(1000)).toFixed(3)
					this.c2 = (a3 * Number(2205)).toFixed(3)
					this.d2 = (a3 * Number(0.9843)).toFixed(3)
					this.e2 = (a3 * Number(1.102)).toFixed(3)
					this.l = (a3 * Number(11124)).toFixed(3)
					this.m = (a3 * Number(392771)).toFixed(3)
				}
			}
			if (num == 'b2') {
				if (this.b2 == '') {
					this.getHydrogen('0')
				} else {
					this.a2 = Number(this.b2) / Number(1000)
					let a3 = Number(this.a2)
					this.c2 = (a3 * Number(2205)).toFixed(3)
					this.d2 = (a3 * Number(0.9843)).toFixed(3)
					this.e2 = (a3 * Number(1.102)).toFixed(3)
					this.l = (a3 * Number(11124)).toFixed(3)
					this.m = (a3 * Number(392771)).toFixed(3)
				}
			}
			if (num == 'c2') {
				if (this.c2 == '') {
					this.getHydrogen('0')
				} else {
					this.a2 = Number(this.c2) / Number(2205)
					let a3 = Number(this.a2)
					this.b2 = (a3 * Number(1000)).toFixed(3)
					this.d2 = (a3 * Number(0.9843)).toFixed(3)
					this.e2 = (a3 * Number(1.102)).toFixed(3)
					this.l = (a3 * Number(11124)).toFixed(3)
					this.m = (a3 * Number(392771)).toFixed(3)
				}
			}
			if (num == 'd2') {
				if (this.d2 == '') {
					this.getHydrogen('0')
				} else {
					this.a2 = Number(this.d2) / Number(0.9843)
					let a3 = Number(this.a2)
					this.b2 = (a3 * Number(1000)).toFixed(3)
					this.c2 = (a3 * Number(2205)).toFixed(3)
					this.e2 = (a3 * Number(1.102)).toFixed(3)
					this.l = (a3 * Number(11124)).toFixed(3)
					this.m = (a3 * Number(392771)).toFixed(3)
				}
			}
			if (num == 'e2') {
				if (this.e2 == '') {
					this.getHydrogen('0')
				} else {
					this.a2 = Number(this.e2) / Number(1.102)
					let a3 = Number(this.a2)
					this.b2 = (a3 * Number(1000)).toFixed(3)
					this.c2 = (a3 * Number(2205)).toFixed(3)
					this.d2 = (a3 * Number(0.9843)).toFixed(3)
					this.l = (a3 * Number(11124)).toFixed(3)
					this.m = (a3 * Number(392771)).toFixed(3)
				}
			}
			if (num == 'l') {
				if (this.l == '') {
					this.getHydrogen('0')
				} else {
					this.a2 = Number(this.l) / Number(11124)
					let a3 = Number(this.a2)
					this.b2 = (a3 * Number(1000)).toFixed(3)
					this.c2 = (a3 * Number(2205)).toFixed(3)
					this.d2 = (a3 * Number(0.9843)).toFixed(3)
					this.e2 = (a3 * Number(1.102)).toFixed(3)
					this.m = (a3 * Number(392771)).toFixed(3)
				}
			}
			if (num == 'm') {
				if (this.m == '') {
					this.getHydrogen('0')
				} else {
					this.a2 = Number(this.m) / Number(392771)
					let a3 = Number(this.a2)
					this.b2 = (a3 * Number(1000)).toFixed(3)
					this.c2 = (a3 * Number(2205)).toFixed(3)
					this.d2 = (a3 * Number(0.9843)).toFixed(3)
					this.e2 = (a3 * Number(1.102)).toFixed(3)
					this.l = (a3 * Number(11124)).toFixed(3)
				}
			}
			if (num == '0') {
				this.a2 = ''
				this.b2 = ''
				this.c2 = ''
				this.d2 = ''
				this.e2 = ''
				this.l = ''
				this.m = ''
			}
		},
	},
}
</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;
}
.information {
	display: inline-block;
	height: 100%;
	text-align: center;
	color: #343434;
	box-sizing: border-box;
	vertical-align: middle;
	font-weight: 600;
	padding: 0 20px;
}
.information1 {
	display: inline-block;
	height: 100%;
	text-align: center;
	color: #b7b7b7;
	box-sizing: border-box;
	vertical-align: middle;
	font-weight: 600;
	padding: 0 20px;
	border-radius: 10px;
	cursor: pointer;
}

.information1:hover {
	color: #2c5589;
	cursor: pointer;
}

.information2 {
	display: inline-block;
	height: 100%;
	text-align: center;
	color: #fff;
	background-color: #105dbc;
	box-sizing: border-box;
	vertical-align: middle;
	font-weight: 600;
	padding: 0 20px;
	border-radius: 10px;
	cursor: pointer;
}
.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;
	box-shadow: 5px 5px 5px rgb(63, 62, 62);
	border-bottom: 1px;
	border-right: 1px;
	vertical-align: middle;
	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;
// 	vertical-align: middle;
// 	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;
}
.user-title1 {
	width: 100%;
	display: flex;
	height: 40px;
	line-height: 40px;
	margin-top: 12px;
	margin-bottom: 12px;
}
.user-title2 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	height: 40px;
	line-height: 40px;
	margin-top: 14px;
	margin-bottom: 52px;
}
</style>