feat: 新增工具：二维码生成、色板、单位转换
This commit is contained in:
osiris
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import { copy } from '@/utils/string'
|
||||
const info = reactive({
|
||||
title: "tool name",
|
||||
})
|
||||
|
||||
//copy
|
||||
const copyRes = async (resStr: string) => {
|
||||
copy(resStr)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
|
||||
<div class="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import { copy } from '@/utils/string'
|
||||
const info = reactive({
|
||||
title: "色板",
|
||||
palettes: [
|
||||
{
|
||||
theme: 'last summer day', //
|
||||
item: ['#A7C5C5', '#DEE0D5', '#E2AC48', '#B96028', '#983C2D'],
|
||||
},
|
||||
{
|
||||
theme: 'Hazy Summer Afternoon', //
|
||||
item: ['#26C4A5', '#54D99F', '#ACE08C', '#E8E284', '#F2B652'],
|
||||
},
|
||||
{
|
||||
theme: 'Summering', //
|
||||
item: ['#FFBE4C', '#B33127', '#93EDFF', '#648FAD', '#FFFFFF'],
|
||||
},
|
||||
{
|
||||
theme: 'Bare August — Footcare Essentials', //
|
||||
item: ['#F2636F', '#F2858E', '#F2AEB4', '#F27999', '#F2D9D0'],
|
||||
},
|
||||
{
|
||||
theme: 'Big Vilnius Summer Loto', //
|
||||
item: ['#D90416', '#BF2A45', '#528C49', '#BF7B54', '#F28D8D'],
|
||||
},
|
||||
{
|
||||
theme: 'Illustration Design', //
|
||||
item: ['#D9D2D6', '#010326', '#4C5D73', '#808C65', '#F2E750'],
|
||||
},
|
||||
{
|
||||
theme: 'Beautiful tropical beach with blue sky and white clouds abstract texture background', //
|
||||
item: ['#04B2D9', '#CEECF2', '#04C4D9', '#15BFBF', '#D9D0C7'],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
//copy
|
||||
const copyRes = async (resStr: string) => {
|
||||
copy(resStr)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
|
||||
<div class="">
|
||||
<div class="flex flex-col">
|
||||
<div v-for="(item, index) in info.palettes" :key="index" class="flex flex-col mb-3">
|
||||
<div class="flex h-28 rounded-lg overflow-hidden items-center">
|
||||
<span
|
||||
v-for="(color, index) in item.item"
|
||||
:key="index"
|
||||
class="w-1/5 h-full color-palette"
|
||||
:style="'background-color:' + color + ';'"
|
||||
@click="copyRes(color)"
|
||||
>
|
||||
<div class="color-text hidden flex items-center justify-center h-full w-full" :style="'color:' + color + ';'" >{{ color }}</div>
|
||||
</span>
|
||||
<!-- @change="(val: any) => (changeCheckBox(val, 3)) -->
|
||||
</div>
|
||||
<!-- <div class="">
|
||||
<el-text>主题：{{ item.theme }}</el-text>
|
||||
</div> -->
|
||||
<el-divider v-if="index != item.item.length + 1"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.color-palette:hover .color-text{
|
||||
display: flex;
|
||||
filter: grayscale(1) contrast(999) invert(1)
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive,ref } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import QRCodeVue3 from 'qrcode-vue3'
|
||||
import { Delete, Plus } from '@element-plus/icons-vue'
|
||||
import { ElMessage, type UploadFile } from 'element-plus'
|
||||
const info = reactive({
|
||||
title: "二维码生成",
|
||||
content: '可在此输入文字或网址,右键图片另存为可保存图片',
|
||||
width: 200,
|
||||
height: 200,
|
||||
size: '200',
|
||||
sizeSelect: '',
|
||||
margin: 1,
|
||||
fileList: [],
|
||||
fileUrl: '',
|
||||
preColor: '#000',
|
||||
bgColor: '#fff',
|
||||
qrKey: 1,
|
||||
errorCorrectionLevel: 'Q',
|
||||
})
|
||||
|
||||
const uploadLogo = ref()
|
||||
|
||||
//上传达到上限触发
|
||||
const handleExceed = () => {
|
||||
ElMessage({
|
||||
message: '上传数量已达上限，请清除后重新上传',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
//设置尺寸
|
||||
const setQRSize = () => {
|
||||
info.width = parseInt(info.size)
|
||||
info.height = parseInt(info.size)
|
||||
}
|
||||
|
||||
const handleChange = (file: UploadFile) => {
|
||||
info.fileList.push(file.url)
|
||||
info.fileUrl = info.fileList[0] ?? ''
|
||||
}
|
||||
|
||||
const handleRemove = (file: UploadFile) => {
|
||||
info.fileList = uploadLogo.value.handleRemove(file)
|
||||
}
|
||||
|
||||
|
||||
//生成二维码
|
||||
const gen = () => {
|
||||
//设置尺寸
|
||||
setQRSize()
|
||||
info.qrKey += 1
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-3">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
|
||||
<div class="flex justify-between w-full">
|
||||
<div class="w-4/6">
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16 mr-2"><el-text>内容</el-text></div>
|
||||
<el-input v-model="info.content" type="textarea" rows="3" class="w-full" placeholder="可在此输入文字或网址"></el-input>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16 mr-2"><el-text>尺寸</el-text></div>
|
||||
<el-input v-model="info.size" class="">
|
||||
<template #append>
|
||||
<el-select v-model="info.size" class="w-32">
|
||||
<el-option label="常规 200px" value="200" />
|
||||
<el-option label="常规 300px" value="300" />
|
||||
<el-option label="适中 350px" value="350" />
|
||||
<el-option label="较大 500px" value="500" />
|
||||
<!-- 分割线 start -->
|
||||
<div class="flex justify-center bg-gray-200 w-full">
|
||||
<div class="h-[1px] bg-gray-200 w-4/5"></div>
|
||||
</div>
|
||||
<!-- 分割线 end -->
|
||||
<el-option label="超大 1000px" value="1000" />
|
||||
<el-option label="超大 1200px" value="1200" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<el-text class="w-16">纠错级别</el-text>
|
||||
<el-select v-model="info.errorCorrectionLevel" class="w-36">
|
||||
<el-option label="L 可遮挡 7%" value="L" />
|
||||
<el-option label="M 可遮挡 15%" value="M" />
|
||||
<el-option label="Q 可遮挡 25%" value="Q" />
|
||||
<el-option label="H 可遮挡 30%" value="H" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16"><el-text>边距</el-text></div>
|
||||
<el-input-number v-model="info.margin" :step="1" :min="0"/>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16"><el-text>颜色</el-text></div>
|
||||
<!-- <div class="w-16 flex flex-col items-center bg-gray-100 p-1 rounded-md mr-2">
|
||||
<el-text>前景色</el-text>
|
||||
<el-color-picker v-model="info.preColor" />
|
||||
</div> -->
|
||||
<div class="w-16 flex flex-col items-center bg-gray-100 p-1 rounded-md">
|
||||
<el-text>背景色</el-text>
|
||||
<el-color-picker v-model="info.bgColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16"><el-text>logo</el-text></div>
|
||||
<el-upload
|
||||
ref="uploadLogo"
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
accept=".png,.ico,.jpg,.jpeg"
|
||||
:on-change="handleChange"
|
||||
:on-exceed="handleExceed">
|
||||
<el-icon><Plus /></el-icon>
|
||||
<template #file="{ file }">
|
||||
<div class="border-2 w-full border-blue-400">
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16"></div>
|
||||
<el-button type="primary" @click="gen">生成二维码</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<QRCodeVue3
|
||||
:key="info.qrKey"
|
||||
:width="info.width"
|
||||
:height="info.height"
|
||||
:value="info.content"
|
||||
:margin="info.margin"
|
||||
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: info.errorCorrectionLevel }"
|
||||
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
|
||||
:image="info.fileList[0]"
|
||||
:dotsOptions="{
|
||||
type: 'none',
|
||||
color: '#26249a',
|
||||
gradient: {
|
||||
type: 'linear',
|
||||
rotation: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#26249a' },
|
||||
{ offset: 1, color: '#26249a' },
|
||||
],
|
||||
},
|
||||
}"
|
||||
:backgroundOptions="{ color: info.bgColor }"
|
||||
:cornersSquareOptions="{ type: 'square', color: '#000000' }"
|
||||
:cornersDotOptions="{ type: undefined, color: '#000000' }"
|
||||
fileExt="png"
|
||||
myclass="my-qur"
|
||||
imgclass="img-qr"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-button{
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,415 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const lengthInfo: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
km: '',
|
||||
m: '',
|
||||
dm: '',
|
||||
cm: '',
|
||||
mm: '',
|
||||
ha: '',
|
||||
tradition_mu: '',
|
||||
tradition_fen: '',
|
||||
tradition_mill: '',
|
||||
tradition_hao: '',
|
||||
eng_nmi: '',
|
||||
eng_mi: '',
|
||||
eng_acre: '',
|
||||
eng_rd: '',
|
||||
eng_yd: '',
|
||||
eng_ft: '',
|
||||
eng_in: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in lengthInfo) {
|
||||
lengthInfo[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成平方米
|
||||
switch (key) {
|
||||
case 'km':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * (1000 * 1000)
|
||||
break;
|
||||
case 'm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'dm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.01
|
||||
break;
|
||||
case 'cm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0001
|
||||
break;
|
||||
case 'mm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000001
|
||||
break;
|
||||
case 'ha':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 10000
|
||||
break;
|
||||
case 'tradition_mu':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 666.6666667
|
||||
lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'tradition_fen':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 66.67
|
||||
lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.1
|
||||
break;
|
||||
case 'tradition_mill':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 6.67
|
||||
lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.01
|
||||
break;
|
||||
case 'tradition_hao':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.67
|
||||
lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.001
|
||||
break;
|
||||
case 'eng_nmi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * (1852 * 1852)
|
||||
break;
|
||||
case 'eng_mi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 2589988.110336
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 27878400
|
||||
break;
|
||||
case 'eng_acre':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 4046.8564224
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 43560
|
||||
break;
|
||||
case 'eng_rd':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 25.2928526
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 272.25
|
||||
break;
|
||||
case 'eng_yd':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.8361274
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 9
|
||||
break;
|
||||
case 'eng_ft':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.092903
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'eng_in':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0006452
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 0.0069444
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//平方米转换成其他单位
|
||||
let mVal = lengthInfo.m as number
|
||||
//传统面积处理
|
||||
let muVal = mVal * 0.0015
|
||||
if (['tradition_mu', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
|
||||
muVal = (lengthInfo.tradition_mu == '' ? muVal : lengthInfo.tradition_mu) as number
|
||||
}
|
||||
//英制
|
||||
let engFtVal = mVal / 0.092903
|
||||
if (['eng_mi', 'eng_acre', 'eng_rd', 'eng_yd', 'eng_ft', 'eng_in'].includes(key)) {
|
||||
engFtVal = (lengthInfo.eng_ft == '' ? engFtVal : lengthInfo.eng_ft) as number
|
||||
}
|
||||
|
||||
lengthInfo.km = mVal * 0.000001
|
||||
lengthInfo.dm = mVal * 100
|
||||
lengthInfo.cm = mVal * 10000
|
||||
lengthInfo.mm = mVal * 1000000
|
||||
lengthInfo.ha = mVal * 0.0001
|
||||
|
||||
lengthInfo.tradition_mu = muVal
|
||||
lengthInfo.tradition_fen = muVal / 0.1
|
||||
lengthInfo.tradition_mill = muVal / 0.01
|
||||
lengthInfo.tradition_hao = muVal / 0.001
|
||||
|
||||
lengthInfo.eng_nmi = mVal / (1852 * 1852)
|
||||
lengthInfo.eng_mi = engFtVal / 27878400
|
||||
lengthInfo.eng_acre = engFtVal / 43560
|
||||
lengthInfo.eng_rd = engFtVal / 272.25
|
||||
lengthInfo.eng_yd = engFtVal / 9
|
||||
lengthInfo.eng_ft = engFtVal
|
||||
lengthInfo.eng_in = engFtVal / 0.0069444
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际面积单位(公制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方千米(km<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.km"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('km')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方米(m<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.m"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('m')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方分米(dm<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.dm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('dm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方厘米(cm<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.cm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('cm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方毫米(mm<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.mm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">公顷(ha)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.ha"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('ha')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">中国传统面积单位(市制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">亩</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_mu"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_mu')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">分</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_fen"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_fen')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">厘</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_mill"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_mill')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_hao"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_hao')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">英制面积单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方海里(nmi<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_nmi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_nmi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方英里(mi<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_mi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_mi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英亩(acre)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_acre"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_acre')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方竿(rd<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_rd"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_rd')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方码(yd<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_yd"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_yd')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方英尺(ft<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_ft"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_ft')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方英寸(in<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_in"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_in')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,172 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
wh: '',
|
||||
mmwh: '',
|
||||
kwh: '',
|
||||
mwh: '',
|
||||
j: '',
|
||||
kj: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成瓦
|
||||
switch (key) {
|
||||
case 'wh':
|
||||
info.wh = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'mmwh':
|
||||
info.wh = parseFloat(info[key] as string) * 0.001
|
||||
break;
|
||||
case 'kwh':
|
||||
info.wh = parseFloat(info[key] as string) * 1000
|
||||
break;
|
||||
case 'mwh':
|
||||
info.wh = parseFloat(info[key] as string) * 1000000
|
||||
break;
|
||||
case 'j':
|
||||
info.wh = parseFloat(info[key] as string) * 0.0002777777777777778
|
||||
break;
|
||||
case 'kj':
|
||||
info.wh = parseFloat(info[key] as string) * 0.2777777777777778
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.wh as number
|
||||
info.mmwh = val / 0.001
|
||||
info.kwh = val / 1000
|
||||
info.mwh = val / 1000000
|
||||
info.j = val / 0.0002777777777777778
|
||||
info.kj = info.j / 1000
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">热量单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">瓦(Wh)</el-text>
|
||||
<el-input
|
||||
v-model="info.wh"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('wh')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫瓦时(mWh)</el-text>
|
||||
<el-input
|
||||
v-model="info.mmwh"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mmwh')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千瓦时(kWh)</el-text>
|
||||
<el-input
|
||||
v-model="info.kwh"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kwh')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">兆瓦时(MWh)</el-text>
|
||||
<el-input
|
||||
v-model="info.mwh"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mwh')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">焦(J)</el-text>
|
||||
<el-input
|
||||
v-model="info.j"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('j')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千焦(kJ)</el-text>
|
||||
<el-input
|
||||
v-model="info.kj"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kj')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,512 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const lengthInfo: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
km: '',
|
||||
m: '',
|
||||
dm: '',
|
||||
cm: '',
|
||||
mm: '',
|
||||
dmm: '',
|
||||
um: '',
|
||||
nm: '',
|
||||
tradition_li: '',
|
||||
tradition_zhang: '',
|
||||
tradition_chi: '',
|
||||
tradition_cun: '',
|
||||
tradition_fen: '',
|
||||
tradition_mill: '',
|
||||
tradition_hao: '',
|
||||
eng_nmi: '',
|
||||
eng_fm: '',
|
||||
eng_mi: '',
|
||||
eng_fur: '',
|
||||
eng_yd: '',
|
||||
eng_ft: '',
|
||||
eng_in: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in lengthInfo) {
|
||||
lengthInfo[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成米
|
||||
switch (key) {
|
||||
case 'km':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1000
|
||||
break;
|
||||
case 'm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'dm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.1
|
||||
break;
|
||||
case 'cm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.01
|
||||
break;
|
||||
case 'mm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.001
|
||||
break;
|
||||
case 'dmm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0001
|
||||
break;
|
||||
case 'um':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000001
|
||||
break;
|
||||
case 'nm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000000001
|
||||
break;
|
||||
case 'tradition_li':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 500
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 1500
|
||||
break;
|
||||
case 'tradition_zhang':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 3.3333333
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 10
|
||||
break;
|
||||
case 'tradition_chi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.3
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'tradition_cun':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.03
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.1
|
||||
break;
|
||||
case 'tradition_fen':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.003
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.01
|
||||
break;
|
||||
case 'tradition_mill':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0003
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.001
|
||||
break;
|
||||
case 'tradition_hao':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.00003
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.0001
|
||||
break;
|
||||
case 'eng_nmi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1852
|
||||
break;
|
||||
case 'eng_fm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1.852
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 6
|
||||
break;
|
||||
case 'eng_mi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1609.34
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 5280
|
||||
break;
|
||||
case 'eng_fur':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 201.168
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 660
|
||||
break;
|
||||
case 'eng_yd':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.9144
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 3
|
||||
break;
|
||||
case 'eng_ft':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.3048
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'eng_in':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0254
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//米转换成其他单位
|
||||
let mVal = lengthInfo.m as number
|
||||
//中国传统单位处理
|
||||
let chiVal = mVal * 3
|
||||
if (['tradition_li', 'tradition_zhang', 'tradition_chi', 'tradition_cun', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
|
||||
chiVal = (lengthInfo.tradition_chi == '' ? chiVal : lengthInfo.tradition_chi) as number
|
||||
}
|
||||
//英制处理
|
||||
let engFtVal = mVal / 0.3048
|
||||
if (['eng_fm', 'eng_mi', 'eng_fur', 'eng_yd', 'eng_ft'].includes(key)) {
|
||||
engFtVal = (lengthInfo.eng_ft == '' ? mVal / 0.3048 : lengthInfo.eng_ft) as number
|
||||
}
|
||||
lengthInfo.km = mVal / 1000
|
||||
lengthInfo.dm = mVal * 10
|
||||
lengthInfo.cm = mVal * 100
|
||||
lengthInfo.mm = mVal * 1000
|
||||
lengthInfo.dmm = mVal * 10000
|
||||
lengthInfo.um = mVal * 1000000
|
||||
lengthInfo.nm = mVal * 1000000000
|
||||
lengthInfo.tradition_li = mVal / 500
|
||||
lengthInfo.tradition_chi = chiVal
|
||||
lengthInfo.tradition_zhang = chiVal / 10
|
||||
lengthInfo.tradition_cun = chiVal / 0.1
|
||||
lengthInfo.tradition_fen = chiVal / 0.01
|
||||
lengthInfo.tradition_mill = chiVal / 0.001
|
||||
lengthInfo.tradition_hao = chiVal / 0.0001
|
||||
lengthInfo.eng_nmi = mVal / 1852
|
||||
lengthInfo.eng_ft = engFtVal
|
||||
lengthInfo.eng_fm = engFtVal / 6
|
||||
lengthInfo.eng_mi = engFtVal / 5280
|
||||
lengthInfo.eng_fur = engFtVal / 660
|
||||
lengthInfo.eng_yd = engFtVal / 3
|
||||
lengthInfo.eng_in = engFtVal * 12
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际长度单位(公制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">公里(km)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.km"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('km')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">米(m)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.m"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('m')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">分米(dm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.dm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('dm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">厘米(cm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.cm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('cm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫米(mm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.mm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">丝(dmm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.dmm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('dmm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">微米(um)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.um"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('um')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">纳米(nm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.nm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('nm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">中国传统长度单位(市制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">里</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_li"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_li')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">丈</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_zhang"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_zhang')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">尺</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_chi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_chi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">寸</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_cun"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_cun')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">分</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_fen"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_fen')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">厘</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_mill"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_mill')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_hao"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_hao')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">英制长度单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">海里(nmi)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_nmi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_nmi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英寻(fm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_fm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_fm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英里(mi)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_mi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_mi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">弗隆(fur)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_fur"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_fur')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">码(yd)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_yd"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_yd')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英尺(ft)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_ft"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_ft')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英寸(in)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_in"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_in')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 45%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 5rem/* 80px */;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
w: '',
|
||||
mmw: '',
|
||||
kw: '',
|
||||
mw: '',
|
||||
gw: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成瓦
|
||||
switch (key) {
|
||||
case 'w':
|
||||
info.w = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'mmw':
|
||||
info.w = parseFloat(info[key] as string) * 0.001
|
||||
break;
|
||||
case 'kw':
|
||||
info.w = parseFloat(info[key] as string) * 1000
|
||||
break;
|
||||
case 'mw':
|
||||
info.w = parseFloat(info[key] as string) * 1000000
|
||||
break;
|
||||
case 'gw':
|
||||
info.w = parseFloat(info[key] as string) * 1000000000
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.w as number
|
||||
info.mmw = val / 0.001
|
||||
info.kw = val / 1000
|
||||
info.mw = val / 1000000
|
||||
info.gw = val / 1000000000
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">功率单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">瓦(W)</el-text>
|
||||
<el-input
|
||||
v-model="info.w"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('w')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫瓦(mW)</el-text>
|
||||
<el-input
|
||||
v-model="info.mmw"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mmw')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千瓦(kW)</el-text>
|
||||
<el-input
|
||||
v-model="info.kw"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kw')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">兆瓦(MW)</el-text>
|
||||
<el-input
|
||||
v-model="info.mw"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mw')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">亿瓦(GW)</el-text>
|
||||
<el-input
|
||||
v-model="info.gw"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('gw')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
pa: '',
|
||||
hpa: '',
|
||||
kpa: '',
|
||||
mpa: '',
|
||||
bar: '',
|
||||
torr: '',
|
||||
psi: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成帕
|
||||
switch (key) {
|
||||
case 'pa':
|
||||
info.pa = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'hpa':
|
||||
info.pa = parseFloat(info[key] as string) * 100
|
||||
break;
|
||||
case 'kpa':
|
||||
info.pa = parseFloat(info[key] as string) * 1000
|
||||
break;
|
||||
case 'mpa':
|
||||
info.pa = parseFloat(info[key] as string) * 1000000
|
||||
break;
|
||||
case 'bar':
|
||||
info.pa = parseFloat(info[key] as string) * 100000
|
||||
break;
|
||||
case 'torr':
|
||||
info.pa = parseFloat(info[key] as string) * 133.322368
|
||||
break;
|
||||
case 'psi':
|
||||
info.pa = parseFloat(info[key] as string) * 6894.76
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.pa as number
|
||||
info.hpa = val / 100
|
||||
info.kpa = val / 1000
|
||||
info.mpa = val / 1000000
|
||||
info.bar = val / 100000
|
||||
info.torr = val / 133.322368
|
||||
info.psi = val / 6894.76
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">压力单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">帕(Pa)</el-text>
|
||||
<el-input
|
||||
v-model="info.pa"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('pa')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">百帕(hPa)</el-text>
|
||||
<el-input
|
||||
v-model="info.hpa"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('hpa')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千帕(kPa)</el-text>
|
||||
<el-input
|
||||
v-model="info.kpa"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kpa')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">兆帕(MPa)</el-text>
|
||||
<el-input
|
||||
v-model="info.mpa"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mpa')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">巴(bar)</el-text>
|
||||
<el-input
|
||||
v-model="info.bar"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('bar')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">托(torr)</el-text>
|
||||
<el-input
|
||||
v-model="info.torr"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('torr')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text" style="font-size: 0.8rem;;">磅力/平方英寸(psi)</el-text>
|
||||
<el-input
|
||||
v-model="info.psi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('psi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
c: '',
|
||||
f: '',
|
||||
k: '',
|
||||
re: '',
|
||||
r: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成摄氏度
|
||||
switch (key) {
|
||||
case 'c':
|
||||
info.c = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'f':
|
||||
info.c = parseFloat(info[key] as string) * -17.2222222
|
||||
break;
|
||||
case 'k':
|
||||
info.c = parseFloat(info[key] as string) * -272.15
|
||||
break;
|
||||
case 're':
|
||||
info.c = parseFloat(info[key] as string) * 1.25
|
||||
break;
|
||||
case 'r':
|
||||
info.c = parseFloat(info[key] as string) * -272.5944444
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.c as number
|
||||
info.f = 32 + (val * 1.8)
|
||||
info.k = 273.15 + val
|
||||
info.re = val / 1.25
|
||||
info.r = (val + 273.15) * 1.8
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际温度单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">摄氏度(℃)</el-text>
|
||||
<el-input
|
||||
v-model="info.c"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('c')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">华氏度(℉)</el-text>
|
||||
<el-input
|
||||
v-model="info.f"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('f')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">开氏度(K)</el-text>
|
||||
<el-input
|
||||
v-model="info.k"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('k')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">列氏度(°Re)</el-text>
|
||||
<el-input
|
||||
v-model="info.re"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('re')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">兰氏度(°R)</el-text>
|
||||
<el-input
|
||||
v-model="info.r"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('r')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
year: '',
|
||||
month: '',
|
||||
d: '',
|
||||
h: '',
|
||||
min: '',
|
||||
s: '',
|
||||
ms: '',
|
||||
week: ''
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成秒
|
||||
switch (key) {
|
||||
case 'year':
|
||||
info.s = parseFloat(info[key] as string) * 31536000
|
||||
break;
|
||||
case 'month':
|
||||
info.s = parseFloat(info[key] as string) * 2629800
|
||||
break;
|
||||
case 'd':
|
||||
info.s = parseFloat(info[key] as string) * 86400
|
||||
break;
|
||||
case 'h':
|
||||
info.s = parseFloat(info[key] as string) * 3600
|
||||
break;
|
||||
case 'min':
|
||||
info.s = parseFloat(info[key] as string) * 60
|
||||
break;
|
||||
case 's':
|
||||
info.s = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'ms':
|
||||
info.s = parseFloat(info[key] as string) * 0.001
|
||||
break;
|
||||
case 'week':
|
||||
info.s = parseFloat(info[key] as string) * 604800
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.s as number
|
||||
info.year = val / 31536000
|
||||
info.month = info.year * 12
|
||||
info.d = val / 86400
|
||||
info.h = val / 3600
|
||||
info.min = val / 60
|
||||
info.ms = val / 0.001
|
||||
info.week = val / 604800
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际时间单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">年(year)</el-text>
|
||||
<el-input
|
||||
v-model="info.year"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('year')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">月(month)</el-text>
|
||||
<el-input
|
||||
v-model="info.month"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('month')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">日(d)</el-text>
|
||||
<el-input
|
||||
v-model="info.d"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('d')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">时(h)</el-text>
|
||||
<el-input
|
||||
v-model="info.h"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('h')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">分(min)</el-text>
|
||||
<el-input
|
||||
v-model="info.min"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('min')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">秒(s)</el-text>
|
||||
<el-input
|
||||
v-model="info.s"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('s')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫秒(ms)</el-text>
|
||||
<el-input
|
||||
v-model="info.ms"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('ms')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">周(week)</el-text>
|
||||
<el-input
|
||||
v-model="info.week"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('week')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import Length from './Length.vue'
|
||||
import Area from './Area.vue'
|
||||
import Heat from './Heat.vue'
|
||||
import Power from './Power.vue'
|
||||
import Pressure from './Pressure.vue'
|
||||
import Temperature from './Temperature.vue'
|
||||
import Time from './Time.vue'
|
||||
import Weight from './Weight.vue'
|
||||
const info = reactive({
|
||||
title: "单位转换",
|
||||
activeName: 'lengthTab',
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
<div>
|
||||
<div>
|
||||
<el-tabs v-model="info.activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="长度" name="lengthTab">
|
||||
<Length/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="面积" name="areaTab">
|
||||
<Area/>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="体积" name="lengthTab">体积</el-tab-pane> -->
|
||||
<el-tab-pane label="重量" name="weightTab">
|
||||
<Weight/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="时间" name="timeTab">
|
||||
<Time/>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="角度" name="fourth">角度</el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="速度" name="fourth">速度</el-tab-pane> -->
|
||||
<el-tab-pane label="温度" name="temperatureTab">
|
||||
<Temperature/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="压力" name="pressureTab">
|
||||
<Pressure/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="热量" name="heatTab">
|
||||
<Heat/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="功率" name="powerTab">
|
||||
<Power/>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="字节" name="fourth">字节</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 45%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 5rem/* 80px */;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,447 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
t: '',
|
||||
kg: '',
|
||||
g: '',
|
||||
mg: '',
|
||||
|
||||
jin: '',
|
||||
liang: '',
|
||||
qian: '',
|
||||
dan: '',
|
||||
|
||||
eng_lb: '',
|
||||
eng_oz: '',
|
||||
eng_st: '',
|
||||
eng_cwt: '',
|
||||
eng_dr: '',
|
||||
eng_gr: '',
|
||||
eng_lt: '',
|
||||
|
||||
eng_lbt: '',
|
||||
eng_ozt: '',
|
||||
eng_grain: '',
|
||||
eng_dwt: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
switch (key) {
|
||||
case 't':
|
||||
info.g = parseFloat(info[key] as string) * 1000000
|
||||
break;
|
||||
case 'kg':
|
||||
info.g = parseFloat(info[key] as string) * 1000
|
||||
break;
|
||||
case 'g':
|
||||
info.g = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'mg':
|
||||
info.g = parseFloat(info[key] as string) * 0.001
|
||||
break;
|
||||
|
||||
case 'jin':
|
||||
info.g = parseFloat(info[key] as string) * 500
|
||||
break;
|
||||
case 'liang':
|
||||
info.g = parseFloat(info[key] as string) * 50
|
||||
break;
|
||||
case 'qian':
|
||||
info.g = parseFloat(info[key] as string) * 5
|
||||
break;
|
||||
case 'dan':
|
||||
info.g = parseFloat(info[key] as string) * 50000
|
||||
break;
|
||||
|
||||
case 'eng_lb':
|
||||
info.g = parseFloat(info[key] as string) * 453.59237
|
||||
info.eng_lb = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'eng_oz':
|
||||
info.g = parseFloat(info[key] as string) * 28.3495231
|
||||
info.eng_lb = parseFloat(info[key] as string) * 0.0625
|
||||
break;
|
||||
case 'eng_st':
|
||||
info.g = parseFloat(info[key] as string) * 6350.29318
|
||||
info.eng_lb = parseFloat(info[key] as string) * 14
|
||||
break;
|
||||
case 'eng_cwt':
|
||||
info.g = parseFloat(info[key] as string) * 50802.34544
|
||||
info.eng_lb = parseFloat(info[key] as string) * 112
|
||||
break;
|
||||
case 'eng_dr':
|
||||
info.g = parseFloat(info[key] as string) * 1.7718452
|
||||
info.eng_lb = parseFloat(info[key] as string) * 0.0039063
|
||||
break;
|
||||
case 'eng_gr':
|
||||
info.g = parseFloat(info[key] as string) * 0.0647989
|
||||
info.eng_lb = parseFloat(info[key] as string) * 0.0001429
|
||||
break;
|
||||
case 'eng_lt':
|
||||
info.g = parseFloat(info[key] as string) * 1016046.9088
|
||||
info.eng_lb = parseFloat(info[key] as string) * 2240
|
||||
break;
|
||||
|
||||
case 'eng_lbt':
|
||||
info.g = parseFloat(info[key] as string) * 373.2417216
|
||||
info.eng_lbt = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'eng_ozt':
|
||||
info.g = parseFloat(info[key] as string) * 31.1034768
|
||||
info.eng_lbt = parseFloat(info[key] as string) * 0.0833333
|
||||
break;
|
||||
case 'eng_grain':
|
||||
info.g = parseFloat(info[key] as string) * 0.0647989
|
||||
info.eng_lbt = parseFloat(info[key] as string) * 0.0001736
|
||||
break;
|
||||
case 'eng_dwt':
|
||||
info.g = parseFloat(info[key] as string) * 1.5551738
|
||||
info.eng_lbt = parseFloat(info[key] as string) * 0.0041667
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.g as number
|
||||
//英制 - 常衡制
|
||||
let engLbVal = val / 453.59237
|
||||
if (['tradition_mu', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
|
||||
engLbVal = (info.eng_lb == '' ? engLbVal : info.eng_lb) as number
|
||||
}
|
||||
//英制 - 金衡制
|
||||
let engLbtVal = val / 373.2417216
|
||||
if (['eng_lbt', 'eng_ozt', 'eng_grain', 'eng_dwt'].includes(key)) {
|
||||
engLbtVal = (info.eng_lbt == '' ? engLbtVal : info.eng_lbt) as number
|
||||
}
|
||||
info.t = val * 0.000001
|
||||
info.kg = val * 0.001
|
||||
info.mg = val * 1000
|
||||
|
||||
info.jin = val * 0.002
|
||||
info.liang = val * 0.02
|
||||
info.qian = val * 0.2
|
||||
info.dan = val * 0.00002
|
||||
|
||||
info.eng_lb = engLbVal * 1
|
||||
info.eng_oz = engLbVal * 16
|
||||
info.eng_st = engLbVal * 0.0714286
|
||||
info.eng_cwt = engLbVal * 0.0089286
|
||||
info.eng_dr = engLbVal * 256
|
||||
info.eng_gr = engLbVal * 7000
|
||||
info.eng_lt = engLbVal * 0.0004464
|
||||
|
||||
info.eng_lbt = engLbtVal * 1
|
||||
info.eng_ozt = engLbtVal * 12
|
||||
info.eng_grain = engLbtVal * 5760
|
||||
info.eng_dwt = engLbtVal * 240
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际重量单位(公制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">吨(t)</el-text>
|
||||
<el-input
|
||||
v-model="info.t"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('t')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千克/公斤(kg)</el-text>
|
||||
<el-input
|
||||
v-model="info.kg"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kg')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">克(g)</el-text>
|
||||
<el-input
|
||||
v-model="info.g"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('g')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫克(mg)</el-text>
|
||||
<el-input
|
||||
v-model="info.mg"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mg')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ----- -->
|
||||
<el-divider content-position="left">中国传统重量单位(市制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">斤</el-text>
|
||||
<el-input
|
||||
v-model="info.jin"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('jin')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">两</el-text>
|
||||
<el-input
|
||||
v-model="info.liang"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('liang')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">钱</el-text>
|
||||
<el-input
|
||||
v-model="info.qian"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('qian')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">担</el-text>
|
||||
<el-input
|
||||
v-model="info.dan"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('dan')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">英制重量单位(常衡制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">磅(lb)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_lb"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_lb')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">盎司(oz)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_oz"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_oz')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英石(st)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_st"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_st')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英担(cwt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_cwt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_cwt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">打兰(dr)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_dr"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_dr')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">格令(gr)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_gr"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_gr')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">长吨(lt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_lt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_lt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">英制重量单位(金衡制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">磅(lbt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_lbt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_lbt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">盎司(ozt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_ozt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_ozt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">格令</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_grain"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_grain')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英钱(dwt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_dwt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_dwt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user