1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210 |
- <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>
|