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