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

<template>
	<div style="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' ? '原煤' : 'Raw coal' }}
			</div>
			<div
				@click="getInfo('2')"
				:class="informationsClass == 2 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '洗精煤' : 'Washed coal' }}
			</div>
			<div
				@click="getInfo('3')"
				:class="informationsClass == 3 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '焦炭' : 'Coke' }}
			</div>
			<div
				@click="getInfo('4')"
				:class="informationsClass == 4 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '原油' : 'Crude oil' }}
			</div>
			<div
				@click="getInfo('5')"
				:class="informationsClass == 5 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '柴油' : 'Diesel oil' }}
			</div>
			<div
				@click="getInfo('6')"
				:class="informationsClass == 6 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '汽油/煤油' : 'Gasoline/Kerosene' }}
			</div>
			<div
				@click="getInfo('7')"
				:class="informationsClass == 7 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '天然气' : 'Natural gas' }}
			</div>
			<div
				@click="getInfo('8')"
				:class="informationsClass == 8 ? 'information2' : 'information1'"
			>
				{{ $i18n.locale === 'zh' ? '液化石油气' : 'Liquefied petroleum gas' }}
			</div>
		</div>
		<div v-if="userRaw" style="width: 98%; margin-left: 1%">
			<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' ? '原煤' : 'Raw Coal' }}
				</div>
			</div>
			<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
			<div style="display: flex; justify-content: space-evenly; width: 100%">
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</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"
								@focus="getFocus('20')"
								@blur="lostBlur"
								@input="getNum('a')"
								:class="focusClass == 20 ? '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('21')"
								@blur="lostBlur"
								@input="getNum('b')"
								:class="focusClass == 21 ? '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('22')"
								@blur="lostBlur"
								@input="getNum('c')"
								:class="focusClass == 22 ? '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('23')"
								@blur="lostBlur"
								@input="getNum('d')"
								:class="focusClass == 23 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNum('d')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
					</ul>
					<ul style="width: 70%" class="ui-bgcText">
						<li><el-input v-model="aa" :disabled="true"></el-input></li>
						<li><el-input v-model="bb" :disabled="true"></el-input></li>
						<li><el-input v-model="cc" :disabled="true"></el-input></li>
						<li><el-input v-model="dd" :disabled="true"></el-input></li>
					</ul>
				</div>
			</div>
			<div>
				<el-button class="user-btn-clear" @click="getNum('0')">{{
					$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
				}}</el-button>
			</div>
		</div>
		<div v-if="userWashed" style="width: 98%; margin-left: 1%">
			<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' ? '洗精煤' : 'Washed Coal' }}
				</div>
			</div>
			<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
			<div style="display: flex; justify-content: space-evenly; width: 100%">
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</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="a1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('24')"
								@blur="lostBlur"
								@input="getCoal('a')"
								:class="focusClass == 24 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getCoal('a')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="b1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('25')"
								@blur="lostBlur"
								@input="getCoal('b')"
								:class="focusClass == 25 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getCoal('b')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="c1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('26')"
								@blur="lostBlur"
								@input="getCoal('c')"
								:class="focusClass == 26 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getCoal('c')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="d1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('27')"
								@blur="lostBlur"
								@input="getCoal('d')"
								:class="focusClass == 27 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getCoal('d')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
					</ul>
					<ul style="width: 70%" class="ui-bgcText">
						<li><el-input v-model="aa1" :disabled="true"></el-input></li>
						<li><el-input v-model="bb1" :disabled="true"></el-input></li>
						<li><el-input v-model="cc1" :disabled="true"></el-input></li>
						<li><el-input v-model="dd1" :disabled="true"></el-input></li>
					</ul>
				</div>
			</div>

			<div>
				<el-button class="user-btn-clear" @click="getCoal('0')">{{
					$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
				}}</el-button>
			</div>
		</div>
		<div v-if="userCoke" style="width: 98%; margin-left: 1%">
			<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' ? '焦炭' : 'Coke' }}
				</div>
			</div>
			<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
			<div style="display: flex; justify-content: space-evenly; width: 100%">
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</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="a2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('28')"
								@blur="lostBlur"
								@input="getCoke('a')"
								:class="focusClass == 28 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getCoke('a')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="b2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('29')"
								@blur="lostBlur"
								@input="getCoke('b')"
								:class="focusClass == 29 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getCoke('b')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="c2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('30')"
								@blur="lostBlur"
								@input="getCoke('c')"
								:class="focusClass == 30 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getCoke('c')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="d2"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('31')"
								@blur="lostBlur"
								@input="getCoke('d')"
								:class="focusClass == 31 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getCoke('d')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
					</ul>
					<ul style="width: 70%" class="ui-bgcText">
						<li><el-input v-model="aa2" :disabled="true"></el-input></li>
						<li><el-input v-model="bb2" :disabled="true"></el-input></li>
						<li><el-input v-model="cc2" :disabled="true"></el-input></li>
						<li><el-input v-model="dd2" :disabled="true"></el-input></li>
					</ul>
				</div>
			</div>

			<div>
				<el-button class="user-btn-clear" @click="getCoke('0')">{{
					$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
				}}</el-button>
			</div>
		</div>
		<div v-if="userCrude" style="width: 98%; margin-left: 1%">
			<div style="display: flex">
				<div style="width: 40px; height: 40px">
					<img
						src="@/assets/userUntil-5.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' ? '原油' : 'Crude Oil' }}
				</div>
			</div>
			<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
			<div style="display: flex; justify-content: space-evenly; width: 100%">
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '千升(KL)' : 'KL' }}</li>
						<li>
							{{ $i18n.locale === 'zh' ? '千美制加仑(kgal.US)' : 'kgal.US' }}
						</li>
						<li>
							{{ $i18n.locale === 'zh' ? '千英制加仑(kgal.UK)' : 'kgal.UK' }}
						</li>
						<li>{{ $i18n.locale === 'zh' ? '桶(bbl)' : 'bbl' }}</li>
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="f"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('1')"
								@blur="lostBlur"
								@input="getOil('f')"
								:class="focusClass == 1 ? 'focusClass2' : 'focusClass1'"
							/><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"
								@focus="getFocus('2')"
								@blur="lostBlur"
								@input="getOil('g')"
								:class="focusClass == 2 ? 'focusClass2' : 'focusClass1'"
							/><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"
								@focus="getFocus('3')"
								@blur="lostBlur"
								@input="getOil('h')"
								:class="focusClass == 3 ? 'focusClass2' : 'focusClass1'"
							/><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"
								@focus="getFocus('4')"
								@blur="lostBlur"
								@input="getOil('i')"
								:class="focusClass == 4 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getOil('i')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="j"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('5')"
								@blur="lostBlur"
								@input="getOil('j')"
								:class="focusClass == 5 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getOil('j')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
					</ul>
					<ul style="width: 70%" class="ui-bgcText">
						<li><el-input v-model="ff" :disabled="true"></el-input></li>
						<li><el-input v-model="gg" :disabled="true"></el-input></li>
						<li><el-input v-model="hh" :disabled="true"></el-input></li>
						<li><el-input v-model="ii" :disabled="true"></el-input></li>
						<li><el-input v-model="jj" :disabled="true"></el-input></li>
					</ul>
				</div>
			</div>
			<div>
				<el-button class="user-btn-clear" @click="getOil('0')">{{
					$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
				}}</el-button>
			</div>
		</div>
		<div v-if="userDiesel" style="width: 98%; margin-left: 1%">
			<div style="display: flex">
				<div style="width: 40px; height: 40px">
					<img
						src="@/assets/userUntil-5.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' ? '柴油' : 'Diesel Oil' }}
				</div>
			</div>

			<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
			<div style="display: flex; justify-content: space-evenly; width: 100%">
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '千升(KL)' : 'KL' }}</li>
						<li>
							{{ $i18n.locale === 'zh' ? '千美制加仑(kgal.US)' : 'kgal.US' }}
						</li>
						<li>
							{{ $i18n.locale === 'zh' ? '千英制加仑(kgal.UK)' : 'kgal.UK' }}
						</li>
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="f1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('6')"
								@blur="lostBlur"
								@input="getDiesel('f')"
								:class="focusClass == 6 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getDiesel('f')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="g1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('7')"
								@blur="lostBlur"
								@input="getDiesel('g')"
								:class="focusClass == 7 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getDiesel('g')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="h1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('8')"
								@blur="lostBlur"
								@input="getDiesel('h')"
								:class="focusClass == 8 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getDiesel('h')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="j1"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('9')"
								@blur="lostBlur"
								@input="getDiesel('j')"
								:class="focusClass == 9 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getDiesel('j')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
					</ul>
					<ul style="width: 70%" class="ui-bgcText">
						<li><el-input v-model="ff1" :disabled="true"></el-input></li>
						<li><el-input v-model="gg1" :disabled="true"></el-input></li>
						<li><el-input v-model="hh1" :disabled="true"></el-input></li>
						<li><el-input v-model="jj1" :disabled="true"></el-input></li>
					</ul>
				</div>
			</div>
			<div>
				<el-button class="user-btn-clear" @click="getDiesel('0')">{{
					$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
				}}</el-button>
			</div>
		</div>
		<div v-if="userGasoline" style="width: 98%; margin-left: 1%">
			<div style="display: flex">
				<div style="width: 40px; height: 40px">
					<img
						src="@/assets/userUntil-5.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' ? '汽油/煤油' : 'Gasoline/Kerosene' }}
				</div>
			</div>
			<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
			<div style="display: flex; justify-content: space-evenly; width: 100%">
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '千升(KL)' : 'KL' }}</li>
						<li>
							{{ $i18n.locale === 'zh' ? '千美制加仑(kgal.US)' : 'kgal.US' }}
						</li>
						<li>
							{{ $i18n.locale === 'zh' ? '千英制加仑(kgal.UK)' : 'kgal.UK' }}
						</li>
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="f11"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('10')"
								@blur="lostBlur"
								@input="getGasoline('f')"
								:class="focusClass == 10 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getGasoline('f')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="g11"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('11')"
								@blur="lostBlur"
								@input="getGasoline('g')"
								:class="focusClass == 11 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getGasoline('g')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="h11"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('12')"
								@blur="lostBlur"
								@input="getGasoline('h')"
								:class="focusClass == 12 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getGasoline('h')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="j11"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('13')"
								@blur="lostBlur"
								@input="getGasoline('j')"
								:class="focusClass == 13 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getGasoline('j')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
					</ul>
					<ul style="width: 70%" class="ui-bgcText">
						<li><el-input v-model="ff11" :disabled="true"></el-input></li>
						<li><el-input v-model="gg11" :disabled="true"></el-input></li>
						<li><el-input v-model="hh11" :disabled="true"></el-input></li>
						<li><el-input v-model="jj11" :disabled="true"></el-input></li>
					</ul>
				</div>
			</div>
			<div>
				<el-button class="user-btn-clear" @click="getGasoline('0')">{{
					$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
				}}</el-button>
			</div>
		</div>
		<div v-if="userNatural" style="width: 98%; margin-left: 1%">
			<div style="display: flex">
				<div style="width: 40px; height: 40px">
					<img
						src="@/assets/userUntil-1.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; justify-content: space-evenly; width: 100%">
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '千立方米(k·m3)' : 'k·m3' }}</li>
						<li>
							{{ $i18n.locale === 'zh' ? '千立方英尺(k·ft3)' : 'k·ft3' }}
						</li>
					</ul>
					<ul style="width: 70%">
						<li>
							<el-input
								type="number"
								v-model="k"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('14')"
								@blur="lostBlur"
								@input="getNatural('k')"
								:class="focusClass == 14 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNatural('k')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="l"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('15')"
								@blur="lostBlur"
								@input="getNatural('l')"
								:class="focusClass == 15 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getNatural('l')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
					</ul>
					<ul style="width: 70%" class="ui-bgcText">
						<li><el-input v-model="kk" :disabled="true"></el-input></li>
						<li><el-input v-model="ll" :disabled="true"></el-input></li>
					</ul>
				</div>
			</div>
			<div>
				<el-button class="user-btn-clear" @click="getNatural('0')">{{
					$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
				}}</el-button>
			</div>
		</div>
		<div v-if="userLiquefied" style="width: 98%; margin-left: 1%">
			<div style="display: flex">
				<div style="width: 40px; height: 40px">
					<img
						src="@/assets/userUntil-1.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' ? '液化石油气' : 'Liquefied Petroleum Gas' }}
				</div>
			</div>
			<div style="border-top: 1px solid #d7d7d7; width: 100%"></div>
			<div style="display: flex; justify-content: space-evenly; width: 100%">
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ $i18n.locale === 'zh' ? '吨(t)' : 't' }}</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="a3"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('16')"
								@blur="lostBlur"
								@input="getLiquefied('a')"
								:class="focusClass == 16 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getLiquefied('a')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="b3"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('17')"
								@blur="lostBlur"
								@input="getLiquefied('b')"
								:class="focusClass == 17 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getLiquefied('b')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="c3"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('18')"
								@blur="lostBlur"
								@input="getLiquefied('c')"
								:class="focusClass == 18 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getLiquefied('c')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
						<li>
							<el-input
								type="number"
								v-model="d3"
								:placeholder="this.$i18n.locale === 'zh' ? textInfo : textInfo1"
								@focus="getFocus('19')"
								@blur="lostBlur"
								@input="getLiquefied('d')"
								:class="focusClass == 19 ? 'focusClass2' : 'focusClass1'"
							/><el-button class="user-btn" @click="getLiquefied('d')">{{
								$i18n.locale === 'zh' ? '换  算' : 'Conversion'
							}}</el-button>
						</li>
					</ul>
				</div>
				<div style="display: flex; width: 48%">
					<ul class="text-title" style="width: 30%">
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
						<li>{{ this.$i18n.locale === 'zh' ? textDetail : textDetail1 }}</li>
					</ul>
					<ul style="width: 70%" class="ui-bgcText">
						<li><el-input v-model="aa3" :disabled="true"></el-input></li>
						<li><el-input v-model="bb3" :disabled="true"></el-input></li>
						<li><el-input v-model="cc3" :disabled="true"></el-input></li>
						<li><el-input v-model="dd3" :disabled="true"></el-input></li>
					</ul>
				</div>
			</div>

			<div>
				<el-button class="user-btn-clear" @click="getLiquefied('0')">{{
					$i18n.locale === 'zh' ? '数 据 重 置' : 'Data reset'
				}}</el-button>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'unitConversion',
	data() {
		return {
			focusClass: '',
			userRaw: true,
			userWashed: true,
			userCoke: true,
			userCrude: true,
			userDiesel: true,
			userGasoline: true,
			userNatural: true,
			userLiquefied: true,
			informationsClass: '0',
			textDetail: '吨二氧化碳(tCO2)',
			textDetail1: 'tCO2',
			textInfo: '请输入数值',
			textInfo1: 'Please enter a value',
			//原煤
			a: '',
			b: '',
			c: '',
			d: '',
			aa: '',
			bb: '',
			cc: '',
			dd: '',
			//洗精煤
			a1: '',
			b1: '',
			c1: '',
			d1: '',
			aa1: '',
			bb1: '',
			cc1: '',
			dd1: '',
			//焦炭
			a2: '',
			b2: '',
			c2: '',
			d2: '',
			aa2: '',
			bb2: '',
			cc2: '',
			dd2: '',
			//液化石油气
			a3: '',
			b3: '',
			c3: '',
			d3: '',
			aa3: '',
			bb3: '',
			cc3: '',
			dd3: '',
			//原油
			f: '',
			g: '',
			h: '',
			i: '',
			j: '',
			ff: '',
			gg: '',
			hh: '',
			ii: '',
			jj: '',
			//柴油
			f1: '',
			g1: '',
			h1: '',
			j1: '',
			ff1: '',
			gg1: '',
			hh1: '',
			jj1: '',
			// 汽油/煤油
			f11: '',
			g11: '',
			h11: '',
			j11: '',
			ff11: '',
			gg11: '',
			hh11: '',
			jj11: '',
			//天然气
			k: '',
			l: '',
			kk: '',
			ll: '',
		}
	},
	mounted() {
		this.getInfo('0')
	},
	methods: {
		lostBlur() {
			this.focusClass = ''
		},
		getFocus(num) {
			this.focusClass = num
		},
		getInfo(num) {
			this.informationsClass = num
			if (num == '0') {
				this.userRaw = true
				this.userWashed = true
				this.userCoke = true
				this.userCrude = true
				this.userDiesel = true
				this.userGasoline = true
				this.userNatural = true
				this.userLiquefied = true
			}
			if (num == '1') {
				this.userRaw = true
				this.userWashed = false
				this.userCoke = false
				this.userCrude = false
				this.userDiesel = false
				this.userGasoline = false
				this.userNatural = false
				this.userLiquefied = false
			}
			if (num == '2') {
				this.userRaw = false
				this.userWashed = true
				this.userCoke = false
				this.userCrude = false
				this.userDiesel = false
				this.userGasoline = false
				this.userNatural = false
				this.userLiquefied = false
			}
			if (num == '3') {
				this.userRaw = false
				this.userWashed = false
				this.userCoke = true
				this.userCrude = false
				this.userDiesel = false
				this.userGasoline = false
				this.userNatural = false
				this.userLiquefied = false
			}
			if (num == '4') {
				this.userRaw = false
				this.userWashed = false
				this.userCoke = false
				this.userCrude = true
				this.userDiesel = false
				this.userGasoline = false
				this.userNatural = false
				this.userLiquefied = false
			}
			if (num == '5') {
				this.userRaw = false
				this.userWashed = false
				this.userCoke = false
				this.userCrude = false
				this.userDiesel = true
				this.userGasoline = false
				this.userNatural = false
				this.userLiquefied = false
			}
			if (num == '6') {
				this.userRaw = false
				this.userWashed = false
				this.userCoke = false
				this.userCrude = false
				this.userDiesel = false
				this.userGasoline = true
				this.userNatural = false
				this.userLiquefied = false
			}
			if (num == '7') {
				this.userRaw = false
				this.userWashed = false
				this.userCoke = false
				this.userCrude = false
				this.userDiesel = false
				this.userGasoline = false
				this.userNatural = true
				this.userLiquefied = false
			}
			if (num == '8') {
				this.userRaw = false
				this.userWashed = false
				this.userCoke = false
				this.userCrude = false
				this.userDiesel = false
				this.userGasoline = false
				this.userNatural = false
				this.userLiquefied = true
			}
		},
		getNum(num) {
			if (num == 'a') {
				if (this.a == '') {
					this.getNum('0')
				} else {
					let a1 = Number(this.a)
					this.b = ((a1 * Number(2205)) / Number(1000)).toFixed(3)
					this.c = (a1 * Number(0.9843)).toFixed(3)
					this.d = (a1 * Number(1.102)).toFixed(3)
					this.aa =
						(Number(this.a) * Number(1.869)).toFixed(3) +
						'~' +
						(Number(this.a) * Number(2.063)).toFixed(3)
					this.bb =
						(Number(this.b) * Number(1.899)).toFixed(3) +
						'~' +
						(Number(this.b) * Number(2.096)).toFixed(3)
					this.cc =
						(Number(this.c) * Number(1.696)).toFixed(3) +
						'~' +
						(Number(this.c) * Number(1.872)).toFixed(3)
					this.dd =
						(Number(this.d) * Number(0.848)).toFixed(3) +
						'~' +
						(Number(this.d) * Number(0.936)).toFixed(3)
				}
			} else if (num == 'b') {
				if (this.b == '') {
					this.getNum('0')
				} else {
					let b1 = Number(this.b)
					this.a = ((b1 * Number(1000)) / Number(2205)).toFixed(3)
					let a2 = Number(this.a)
					this.c = (a2 * Number(0.9843)).toFixed(3)
					this.d = (a2 * Number(1.102)).toFixed(3)
					this.aa =
						(Number(this.a) * Number(1.869)).toFixed(3) +
						'~' +
						(Number(this.a) * Number(2.063)).toFixed(3)
					this.bb =
						(Number(this.b) * Number(1.899)).toFixed(3) +
						'~' +
						(Number(this.b) * Number(2.096)).toFixed(3)
					this.cc =
						(Number(this.c) * Number(1.696)).toFixed(3) +
						'~' +
						(Number(this.c) * Number(1.872)).toFixed(3)
					this.dd =
						(Number(this.d) * Number(0.848)).toFixed(3) +
						'~' +
						(Number(this.d) * Number(0.936)).toFixed(3)
				}
			} else if (num == 'c') {
				if (this.c == '') {
					this.getNum('0')
				} else {
					let c1 = Number(this.c)
					this.a = (c1 / Number(0.9843)).toFixed(3)
					let a3 = Number(this.a)
					this.b = ((a3 * Number(2205)) / Number(1000)).toFixed(3)
					this.d = (a3 * Number(1.102)).toFixed(3)
					this.aa =
						(Number(this.a) * Number(1.869)).toFixed(3) +
						'~' +
						(Number(this.a) * Number(2.063)).toFixed(3)
					this.bb =
						(Number(this.b) * Number(1.899)).toFixed(3) +
						'~' +
						(Number(this.b) * Number(2.096)).toFixed(3)
					this.cc =
						(Number(this.c) * Number(1.696)).toFixed(3) +
						'~' +
						(Number(this.c) * Number(1.872)).toFixed(3)
					this.dd =
						(Number(this.d) * Number(0.848)).toFixed(3) +
						'~' +
						(Number(this.d) * Number(0.936)).toFixed(3)
				}
			} else if (num == 'd') {
				if (this.d == '') {
					this.getNum('0')
				} else {
					let d1 = Number(this.d)
					this.a = (d1 / Number(1.102)).toFixed(3)
					let a4 = Number(this.a)
					this.b = ((a4 * Number(2205)) / Number(1000)).toFixed(3)
					this.c = (a4 * Number(0.9843)).toFixed(3)
					this.aa =
						(Number(this.a) * Number(1.869)).toFixed(3) +
						'~' +
						(Number(this.a) * Number(2.063)).toFixed(3)
					this.bb =
						(Number(this.b) * Number(1.899)).toFixed(3) +
						'~' +
						(Number(this.b) * Number(2.096)).toFixed(3)
					this.cc =
						(Number(this.c) * Number(1.696)).toFixed(3) +
						'~' +
						(Number(this.c) * Number(1.872)).toFixed(3)
					this.dd =
						(Number(this.d) * Number(0.848)).toFixed(3) +
						'~' +
						(Number(this.d) * Number(0.936)).toFixed(3)
				}
			} else if (num == '0') {
				this.a = ''
				this.b = ''
				this.c = ''
				this.d = ''
				this.aa = ''
				this.bb = ''
				this.cc = ''
				this.dd = ''
			}
		},
		getCoal(num) {
			if (num == 'a') {
				if (this.a1 == '') {
					this.getCoal('0')
				} else {
					let a1 = Number(this.a1)
					this.b1 = ((a1 * Number(2205)) / Number(1000)).toFixed(3)
					this.c1 = (a1 * Number(0.9843)).toFixed(3)
					this.d1 = (a1 * Number(1.102)).toFixed(3)
					this.aa1 = (Number(this.a1) * Number(2.211)).toFixed(3)
					this.bb1 = (Number(this.b1) * Number(2.246)).toFixed(3)
					this.cc1 = (Number(this.c1) * Number(2.006)).toFixed(3)
					this.dd1 = (Number(this.d1) * Number(1.003)).toFixed(3)
				}
			} else if (num == 'b') {
				if (this.b1 == '') {
					this.getCoal('0')
				} else {
					let b1 = Number(this.b1)
					this.a1 = ((b1 * Number(1000)) / Number(2205)).toFixed(3)
					let a2 = Number(this.a1)
					this.c1 = (a2 * Number(0.9843)).toFixed(3)
					this.d1 = (a2 * Number(1.102)).toFixed(3)
					this.aa1 = (Number(this.a1) * Number(2.211)).toFixed(3)
					this.bb1 = (Number(this.b1) * Number(2.246)).toFixed(3)
					this.cc1 = (Number(this.c1) * Number(2.006)).toFixed(3)
					this.dd1 = (Number(this.d1) * Number(1.003)).toFixed(3)
				}
			} else if (num == 'c') {
				if (this.c1 == '') {
					this.getCoal('0')
				} else {
					let c1 = Number(this.c1)
					this.a1 = (c1 / Number(0.9843)).toFixed(3)
					let a3 = Number(this.a1)
					this.b1 = ((a3 * Number(2205)) / Number(1000)).toFixed(3)
					this.d1 = (a3 * Number(1.102)).toFixed(3)
					this.aa1 = (Number(this.a1) * Number(2.211)).toFixed(3)
					this.bb1 = (Number(this.b1) * Number(2.246)).toFixed(3)
					this.cc1 = (Number(this.c1) * Number(2.006)).toFixed(3)
					this.dd1 = (Number(this.d1) * Number(1.003)).toFixed(3)
				}
			} else if (num == 'd') {
				if (this.d1 == '') {
					this.getCoal('0')
				} else {
					let d1 = Number(this.d1)
					this.a1 = (d1 / Number(1.102)).toFixed(3)
					let a4 = Number(this.a1)
					this.b1 = ((a4 * Number(2205)) / Number(1000)).toFixed(3)
					this.c1 = (a4 * Number(0.9843)).toFixed(3)
					this.aa1 = (Number(this.a1) * Number(2.211)).toFixed(3)
					this.bb1 = (Number(this.b1) * Number(2.246)).toFixed(3)
					this.cc1 = (Number(this.c1) * Number(2.006)).toFixed(3)
					this.dd1 = (Number(this.d1) * Number(1.003)).toFixed(3)
				}
			} else if (num == '0') {
				this.a1 = ''
				this.b1 = ''
				this.c1 = ''
				this.d1 = ''
				this.aa1 = ''
				this.bb1 = ''
				this.cc1 = ''
				this.dd1 = ''
			}
		},
		getCoke(num) {
			if (num == 'a') {
				if (this.a2 == '') {
					this.getCoke('0')
				} else {
					let a2 = Number(this.a2)
					this.b2 = ((a2 * Number(2205)) / Number(1000)).toFixed(3)
					this.c2 = (a2 * Number(0.9843)).toFixed(3)
					this.d2 = (a2 * Number(1.102)).toFixed(3)
					this.aa2 = (Number(this.a2) * Number(2.864)).toFixed(3)
					this.bb2 = (Number(this.b2) * Number(2.91)).toFixed(3)
					this.cc2 = (Number(this.c2) * Number(2.599)).toFixed(3)
					this.dd2 = (Number(this.d2) * Number(1.299)).toFixed(3)
				}
			} else if (num == 'b') {
				if (this.b2 == '') {
					this.getCoke('0')
				} else {
					let b2 = Number(this.b2)
					this.a2 = ((b2 * Number(1000)) / Number(2205)).toFixed(3)
					let a2 = Number(this.a2)
					this.c2 = (a2 * Number(0.9843)).toFixed(3)
					this.d2 = (a2 * Number(1.102)).toFixed(3)
					this.aa2 = (Number(this.a2) * Number(2.864)).toFixed(3)
					this.bb2 = (Number(this.b2) * Number(2.91)).toFixed(3)
					this.cc2 = (Number(this.c2) * Number(2.599)).toFixed(3)
					this.dd2 = (Number(this.d2) * Number(1.299)).toFixed(3)
				}
			} else if (num == 'c') {
				if (this.c2 == '') {
					this.getCoke('0')
				} else {
					let c2 = Number(this.c2)
					this.a2 = (c2 / Number(0.9843)).toFixed(3)
					let a3 = Number(this.a2)
					this.b2 = ((a3 * Number(2205)) / Number(1000)).toFixed(3)
					this.d2 = (a3 * Number(1.102)).toFixed(3)
					this.aa2 = (Number(this.a2) * Number(2.864)).toFixed(3)
					this.bb2 = (Number(this.b2) * Number(2.91)).toFixed(3)
					this.cc2 = (Number(this.c2) * Number(2.599)).toFixed(3)
					this.dd2 = (Number(this.d2) * Number(1.299)).toFixed(3)
				}
			} else if (num == 'd') {
				if (this.d2 == '') {
					this.getCoke('0')
				} else {
					let d2 = Number(this.d2)
					this.a2 = (d2 / Number(1.102)).toFixed(3)
					let a4 = Number(this.a2)
					this.b2 = ((a4 * Number(2205)) / Number(1000)).toFixed(3)
					this.c2 = (a4 * Number(0.9843)).toFixed(3)
					this.aa2 = (Number(this.a2) * Number(2.864)).toFixed(3)
					this.bb2 = (Number(this.b2) * Number(2.91)).toFixed(3)
					this.cc2 = (Number(this.c2) * Number(2.599)).toFixed(3)
					this.dd2 = (Number(this.d2) * Number(1.299)).toFixed(3)
				}
			} else if (num == '0') {
				this.a2 = ''
				this.b2 = ''
				this.c2 = ''
				this.d2 = ''
				this.aa2 = ''
				this.bb2 = ''
				this.cc2 = ''
				this.dd2 = ''
			}
		},
		getLiquefied(num) {
			if (num == 'a') {
				if (this.a3 == '') {
					this.getLiquefied('0')
				} else {
					let a2 = Number(this.a3)
					this.b3 = ((a2 * Number(2205)) / Number(1000)).toFixed(3)
					this.c3 = (a2 * Number(0.9843)).toFixed(3)
					this.d3 = (a2 * Number(1.102)).toFixed(3)
					this.aa3 = (Number(this.a3) * Number(3.105)).toFixed(3)
					this.bb3 = (Number(this.b3) * Number(3.155)).toFixed(3)
					this.cc3 = (Number(this.c3) * Number(2.818)).toFixed(3)
					this.dd3 = (Number(this.d3) * Number(1.408)).toFixed(3)
				}
			} else if (num == 'b') {
				if (this.b3 == '') {
					this.getLiquefied('0')
				} else {
					let b2 = Number(this.b3)
					this.a3 = ((b2 * Number(1000)) / Number(2205)).toFixed(3)
					let a2 = Number(this.a3)
					this.c3 = (a2 * Number(0.9843)).toFixed(3)
					this.d3 = (a2 * Number(1.102)).toFixed(3)
					this.aa3 = (Number(this.a3) * Number(3.105)).toFixed(3)
					this.bb3 = (Number(this.b3) * Number(3.155)).toFixed(3)
					this.cc3 = (Number(this.c3) * Number(2.818)).toFixed(3)
					this.dd3 = (Number(this.d3) * Number(1.408)).toFixed(3)
				}
			} else if (num == 'c') {
				if (this.c3 == '') {
					this.getLiquefied('0')
				} else {
					let c2 = Number(this.c3)
					this.a3 = (c2 / Number(0.9843)).toFixed(3)
					let a3 = Number(this.a3)
					this.b3 = ((a3 * Number(2205)) / Number(1000)).toFixed(3)
					this.d3 = (a3 * Number(1.102)).toFixed(3)
					this.aa3 = (Number(this.a3) * Number(3.105)).toFixed(3)
					this.bb3 = (Number(this.b3) * Number(3.155)).toFixed(3)
					this.cc3 = (Number(this.c3) * Number(2.818)).toFixed(3)
					this.dd3 = (Number(this.d3) * Number(1.408)).toFixed(3)
				}
			} else if (num == 'd') {
				if (this.d3 == '') {
					this.getLiquefied('0')
				} else {
					let d2 = Number(this.d3)
					this.a3 = (d2 / Number(1.102)).toFixed(3)
					let a4 = Number(this.a3)
					this.b3 = ((a4 * Number(2205)) / Number(1000)).toFixed(3)
					this.c3 = (a4 * Number(0.9843)).toFixed(3)
					this.aa3 = (Number(this.a3) * Number(3.105)).toFixed(3)
					this.bb3 = (Number(this.b3) * Number(3.155)).toFixed(3)
					this.cc3 = (Number(this.c3) * Number(2.818)).toFixed(3)
					this.dd3 = (Number(this.d3) * Number(1.408)).toFixed(3)
				}
			} else if (num == '0') {
				this.a3 = ''
				this.b3 = ''
				this.c3 = ''
				this.d3 = ''
				this.aa3 = ''
				this.bb3 = ''
				this.cc3 = ''
				this.dd3 = ''
			}
		},
		getOil(num) {
			if (num == 'f') {
				if (this.f == '') {
					this.getOil('0')
				} else {
					let f1 = Number(this.f)
					this.g = ((f1 / Number(1.173)) * Number(0.3098)).toFixed(3)
					this.h = ((f1 / Number(1.173)) * Number(0.258)).toFixed(3)
					this.i = ((f1 / Number(1.173)) * Number(7.38)).toFixed(3)
					this.j = (f1 / Number(1.173)).toFixed(3)
					this.ff = (Number(this.f) * Number(2.58)).toFixed(3)
					this.gg = (Number(this.g) * Number(9.819)).toFixed(3)
					this.hh = (Number(this.h) * Number(11.786)).toFixed(3)
					this.ii = (Number(this.i) * Number(0.413)).toFixed(3)
					this.jj = (Number(this.j) * Number(3.024)).toFixed(3)
				}
			}
			if (num == 'g') {
				if (this.g == '') {
					this.getOil('0')
				} else {
					let g1 = Number(this.g)
					this.f = ((g1 / Number(0.3098)) * Number(1.173)).toFixed(3)
					this.h = ((g1 / Number(0.3098)) * Number(0.258)).toFixed(3)
					this.i = ((g1 / Number(0.3098)) * Number(7.38)).toFixed(3)
					this.j = (g1 / Number(0.3098)).toFixed(3)
					this.ff = (Number(this.f) * Number(2.58)).toFixed(3)
					this.gg = (Number(this.g) * Number(9.819)).toFixed(3)
					this.hh = (Number(this.h) * Number(11.786)).toFixed(3)
					this.ii = (Number(this.i) * Number(0.413)).toFixed(3)
					this.jj = (Number(this.j) * Number(3.024)).toFixed(3)
				}
			}
			if (num == 'h') {
				if (this.h == '') {
					this.getOil('0')
				} else {
					let h1 = Number(this.h)
					this.f = ((h1 / Number(0.258)) * Number(1.173)).toFixed(3)
					this.g = ((h1 / Number(0.258)) * Number(0.3098)).toFixed(3)
					this.i = ((h1 / Number(0.258)) * Number(7.38)).toFixed(3)
					this.j = (h1 / Number(0.258)).toFixed(3)
					this.ff = (Number(this.f) * Number(2.58)).toFixed(3)
					this.gg = (Number(this.g) * Number(9.819)).toFixed(3)
					this.hh = (Number(this.h) * Number(11.786)).toFixed(3)
					this.ii = (Number(this.i) * Number(0.413)).toFixed(3)
					this.jj = (Number(this.j) * Number(3.024)).toFixed(3)
				}
			}
			if (num == 'i') {
				if (this.i == '') {
					this.getOil('0')
				} else {
					let i1 = Number(this.i)
					this.f = ((i1 / Number(7.38)) * Number(1.173)).toFixed(3)
					this.g = ((i1 / Number(7.38)) * Number(0.3098)).toFixed(3)
					this.h = ((i1 / Number(7.38)) * Number(0.258)).toFixed(3)
					this.j = (i1 / Number(7.38)).toFixed(3)
					this.ff = (Number(this.f) * Number(2.58)).toFixed(3)
					this.gg = (Number(this.g) * Number(9.819)).toFixed(3)
					this.hh = (Number(this.h) * Number(11.786)).toFixed(3)
					this.ii = (Number(this.i) * Number(0.413)).toFixed(3)
					this.jj = (Number(this.j) * Number(3.024)).toFixed(3)
				}
			}
			if (num == 'j') {
				if (this.j == '') {
					this.getOil('0')
				} else {
					let j1 = Number(this.j)
					this.f = (j1 * Number(1.173)).toFixed(3)
					this.g = (j1 * Number(0.3098)).toFixed(3)
					this.h = (j1 * Number(0.258)).toFixed(3)
					this.i = (j1 * Number(7.38)).toFixed(3)
					this.ff = (Number(this.f) * Number(2.58)).toFixed(3)
					this.gg = (Number(this.g) * Number(9.819)).toFixed(3)
					this.hh = (Number(this.h) * Number(11.786)).toFixed(3)
					this.ii = (Number(this.i) * Number(0.413)).toFixed(3)
					this.jj = (Number(this.j) * Number(3.024)).toFixed(3)
				}
			}
			if (num == '0') {
				this.f = ''
				this.ff = ''
				this.g = ''
				this.gg = ''
				this.h = ''
				this.hh = ''
				this.i = ''
				this.ii = ''
				this.j = ''
				this.jj = ''
			}
		},
		getDiesel(num) {
			if (num == 'f') {
				if (this.f1 == '') {
					this.getDiesel('0')
				} else {
					let f1 = Number(this.f1)
					this.g1 = ((f1 / Number(1.173)) * Number(0.3098)).toFixed(3)
					this.h1 = ((f1 / Number(1.173)) * Number(0.258)).toFixed(3)
					this.j1 = (f1 / Number(1.173)).toFixed(3)
					this.ff1 = (Number(this.f1) * Number(2.645)).toFixed(3)
					this.gg1 = (Number(this.g1) * Number(10.065)).toFixed(3)
					this.hh1 = (Number(this.h1) * Number(12.083)).toFixed(3)
					this.jj1 = (Number(this.j1) * Number(3.1)).toFixed(3)
				}
			}
			if (num == 'g') {
				if (this.g1 == '') {
					this.getDiesel('0')
				} else {
					let g1 = Number(this.g1)
					this.f1 = ((g1 / Number(0.3098)) * Number(1.173)).toFixed(3)
					this.h1 = ((g1 / Number(0.3098)) * Number(0.258)).toFixed(3)
					this.j1 = (g1 / Number(0.3098)).toFixed(3)
					this.ff1 = (Number(this.f1) * Number(2.645)).toFixed(3)
					this.gg1 = (Number(this.g1) * Number(10.065)).toFixed(3)
					this.hh1 = (Number(this.h1) * Number(12.083)).toFixed(3)
					this.jj1 = (Number(this.j1) * Number(3.1)).toFixed(3)
				}
			}
			if (num == 'h') {
				if (this.h1 == '') {
					this.getDiesel('0')
				} else {
					let h1 = Number(this.h1)
					this.f1 = ((h1 / Number(0.258)) * Number(1.173)).toFixed(3)
					this.g1 = ((h1 / Number(0.258)) * Number(0.3098)).toFixed(3)
					this.j1 = (h1 / Number(0.258)).toFixed(3)
					this.ff1 = (Number(this.f1) * Number(2.645)).toFixed(3)
					this.gg1 = (Number(this.g1) * Number(10.065)).toFixed(3)
					this.hh1 = (Number(this.h1) * Number(12.083)).toFixed(3)
					this.jj1 = (Number(this.j1) * Number(3.1)).toFixed(3)
				}
			}
			if (num == 'j') {
				if (this.j1 == '') {
					this.getDiesel('0')
				} else {
					let j1 = Number(this.j1)
					this.f1 = (j1 * Number(1.173)).toFixed(3)
					this.g1 = (j1 * Number(0.3098)).toFixed(3)
					this.h1 = (j1 * Number(0.258)).toFixed(3)
					this.ff1 = (Number(this.f1) * Number(2.645)).toFixed(3)
					this.gg1 = (Number(this.g1) * Number(10.065)).toFixed(3)
					this.hh1 = (Number(this.h1) * Number(12.083)).toFixed(3)
					this.jj1 = (Number(this.j1) * Number(3.1)).toFixed(3)
				}
			}
			if (num == '0') {
				this.f1 = ''
				this.ff1 = ''
				this.g1 = ''
				this.gg1 = ''
				this.h1 = ''
				this.hh1 = ''
				this.j1 = ''
				this.jj1 = ''
			}
		},
		getGasoline(num) {
			if (num == 'f') {
				if (this.f11 == '') {
					this.getGasoline('0')
				} else {
					let f1 = Number(this.f11)
					this.g11 = ((f1 / Number(1.173)) * Number(0.3098)).toFixed(3)
					this.h11 = ((f1 / Number(1.173)) * Number(0.258)).toFixed(3)
					this.j11 = (f1 / Number(1.173)).toFixed(3)
					this.ff11 = (Number(this.f11) * Number(2.152)).toFixed(3)
					this.gg11 = (Number(this.g11) * Number(8.204)).toFixed(3)
					this.hh11 = (Number(this.h11) * Number(9.849)).toFixed(3)
					this.jj11 = (Number(this.j11) * Number(2.929)).toFixed(3)
				}
			}
			if (num == 'g') {
				if (this.g11 == '') {
					this.getGasoline('0')
				} else {
					let g1 = Number(this.g11)
					this.f11 = ((g1 / Number(0.3098)) * Number(1.173)).toFixed(3)
					this.h11 = ((g1 / Number(0.3098)) * Number(0.258)).toFixed(3)
					this.j11 = (g1 / Number(0.3098)).toFixed(3)
					this.ff11 = (Number(this.f11) * Number(2.152)).toFixed(3)
					this.gg11 = (Number(this.g11) * Number(8.204)).toFixed(3)
					this.hh11 = (Number(this.h11) * Number(9.849)).toFixed(3)
					this.jj11 = (Number(this.j11) * Number(2.929)).toFixed(3)
				}
			}
			if (num == 'h') {
				if (this.h11 == '') {
					this.getGasoline('0')
				} else {
					let h1 = Number(this.h11)
					this.f11 = ((h1 / Number(0.258)) * Number(1.173)).toFixed(3)
					this.g11 = ((h1 / Number(0.258)) * Number(0.3098)).toFixed(3)
					this.j11 = (h1 / Number(0.258)).toFixed(3)
					this.ff11 = (Number(this.f11) * Number(2.152)).toFixed(3)
					this.gg11 = (Number(this.g11) * Number(8.204)).toFixed(3)
					this.hh11 = (Number(this.h11) * Number(9.849)).toFixed(3)
					this.jj11 = (Number(this.j11) * Number(2.929)).toFixed(3)
				}
			}
			if (num == 'j') {
				if (this.j11 == '') {
					this.getGasoline('0')
				} else {
					let j1 = Number(this.j11)
					this.f11 = (j1 * Number(1.173)).toFixed(3)
					this.g11 = (j1 * Number(0.3098)).toFixed(3)
					this.h11 = (j1 * Number(0.258)).toFixed(3)
					this.ff11 = (Number(this.f11) * Number(2.152)).toFixed(3)
					this.gg11 = (Number(this.g11) * Number(8.204)).toFixed(3)
					this.hh11 = (Number(this.h11) * Number(9.849)).toFixed(3)
					this.jj11 = (Number(this.j11) * Number(2.929)).toFixed(3)
				}
			}
			if (num == '0') {
				this.f11 = ''
				this.ff11 = ''
				this.g11 = ''
				this.gg11 = ''
				this.h11 = ''
				this.hh11 = ''
				this.j11 = ''
				this.jj11 = ''
			}
		},
		getNatural(num) {
			if (num == 'k') {
				if (this.k == '') {
					this.getNatural('0')
				} else {
					let k1 = Number(this.k).toFixed(3)
					this.l = (k1 * Number(35.31)).toFixed(3)
					this.kk = (Number(this.k) * Number(1.978)).toFixed(3)
					this.ll = (Number(this.l) * Number(0.056)).toFixed(3)
				}
			}
			if (num == 'l') {
				if (this.l == '') {
					this.getNatural('0')
				} else {
					let l1 = Number(this.l).toFixed(3)
					this.k = (l1 / Number(35.31)).toFixed(3)
					this.kk = (Number(this.k) * Number(1.978)).toFixed(3)
					this.ll = (Number(this.l) * Number(0.056)).toFixed(3)
				}
			}
			if (num == '0') {
				this.k = ''
				this.l = ''
				this.kk = ''
				this.ll = ''
			}
		},
	},
}
</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;
}
/deep/ .el-input.is-disabled .el-input__inner {
	background-color: #fff;
	border-color: #fff;
	color: #000;
	cursor: not-allowed;
}
.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;
	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;
	border-radius: 10px;
	font-weight: 600;
	padding: 0 20px;
	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: 30%;
	margin-left: 35%;
	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: 30%;
// 	margin-left: 35%;
// 	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;
}
.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>