添加单位换算工具 #12

README.md

@@ -27,7 +27,8 @@
 |php数组/序列化|`数组`,`serialize`,`json`|√|
 |文本差异化对比|`行`,`单词`,`css`|√|
 |crontab校验|`Crontab`,`规则`,`校验`,`例子`|√|
-|websocket调试|`websocket`,`在线调试`|`×`|
+|websocket调试|`websocket`,`在线调试`|×|
+|单位换算|`长度`,`面积`,`体积`,`质量`,`温度`,`压力`,`功率`,`功`,`密度`,`力`,`时间`,`速度`,`数据存储`,`角度`|√|
 
 ## 第三方开源库
 项目诞生离不开这些优秀的开源程序

package.json

 {
     "name": "c-tool",
-    "version": "0.0.15",
+    "version": "0.0.17",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",
@@ -10,8 +10,8 @@
     "dependencies": {
         "ajax-request": "^1.2.3",
         "code-formatter": "0.0.1",
-        "cron-parser": "^2.12.0",
-        "cronstrue": "^1.72.0",
+        "cron-parser": "^2.13.0",
+        "cronstrue": "^1.83.0",
         "crypto-js": "^3.1.9-1",
         "diff": "^4.0.1",
         "ipinyinjs": "^1.0.0",
@@ -21,22 +21,22 @@
         "lscache": "^1.3.0",
         "php-array-reader": "^1.2.0",
         "phparr": "^0.2.0",
-        "qrcode": "^1.3.3",
+        "qrcode": "^1.4.1",
         "qrcode-parser": "^1.2.0",
-        "query-string": "^6.8.1",
+        "query-string": "^6.8.2",
         "radix.js": "0.0.1",
         "serialize-php": "^1.1.2",
         "vue": "^2.6.10",
         "vue-prismjs": "^1.2.0",
-        "vue-router": "^3.0.1"
+        "vue-router": "^3.1.3"
     },
     "devDependencies": {
-        "@vue/cli-plugin-babel": "^3.5.5",
-        "@vue/cli-plugin-eslint": "^3.5.0",
-        "@vue/cli-service": "^3.8.4",
-        "babel-eslint": "^10.0.2",
+        "@vue/cli-plugin-babel": "^3.11.0",
+        "@vue/cli-plugin-eslint": "^3.11.0",
+        "@vue/cli-service": "^3.11.0",
+        "babel-eslint": "^10.0.3",
         "eslint": "^5.16.0",
-        "eslint-plugin-vue": "^5.0.0",
+        "eslint-plugin-vue": "^5.2.3",
         "vue-cli-plugin-iview": "^1.0.6",
         "vue-template-compiler": "^2.6.10"
     },

src/tool.router.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import {stat} from "./helper";
+import { stat } from './helper'
 
-Vue.use(Router);
+Vue.use(Router)
 
 // 路由配置
 const routes = [
     {
-        path: "/tool/base64",
+        path: '/tool/base64',
         component: r => require(['./views/tool/base64.vue'], r)
     },
     {
-        path: "/tool/code",
+        path: '/tool/code',
         component: r => require(['./views/tool/code.vue'], r)
     },
     {
-        path: "/tool/decimalConvert",
+        path: '/tool/decimalConvert',
         component: r => require(['./views/tool/decimalConvert.vue'], r)
     },
     {
-        path: "/tool/diffs",
+        path: '/tool/diffs',
         component: r => require(['./views/tool/diffs.vue'], r)
     },
     {
-        path: "/tool/encrypt",
+        path: '/tool/encrypt',
         component: r => require(['./views/tool/encrypt.vue'], r)
     },
     {
-        path: "/tool/hash",
+        path: '/tool/hash',
         component: r => require(['./views/tool/hash.vue'], r)
     },
     {
-        path: "/tool/ip",
+        path: '/tool/ip',
         component: r => require(['./views/tool/ip.vue'], r)
     },
     {
-        path: "/tool/phpArraySerialize",
+        path: '/tool/phpArraySerialize',
         component: r => require(['./views/tool/phpArraySerialize.vue'], r)
     },
     {
-        path: "/tool/pinyin",
+        path: '/tool/pinyin',
         component: r => require(['./views/tool/pinyin.vue'], r)
     },
     {
-        path: "/tool/qrCode",
+        path: '/tool/qrCode',
         component: r => require(['./views/tool/qrCode.vue'], r)
     },
     {
-        path: "/tool/randomString",
+        path: '/tool/randomString',
         component: r => require(['./views/tool/randomString.vue'], r)
     },
     {
-        path: "/tool/regex",
+        path: '/tool/regex',
         component: r => require(['./views/tool/regex.vue'], r)
     },
     {
-        path: "/tool/timestamp",
+        path: '/tool/timestamp',
         component: r => require(['./views/tool/timestamp.vue'], r)
     },
     {
-        path: "/tool/unicode",
+        path: '/tool/unicode',
         component: r => require(['./views/tool/unicode.vue'], r)
     },
     {
-        path: "/tool/url",
+        path: '/tool/url',
         component: r => require(['./views/tool/url.vue'], r)
     },
     {
-        path: "/tool/crontab",
+        path: '/tool/crontab',
         component: r => require(['./views/tool/crontab.vue'], r)
     },
     {
-        path: "/tool/websocket",
+        path: '/tool/websocket',
         component: r => require(['./views/tool/websocket.vue'], r)
     },
-];
+    {
+        path: '/tool/unit',
+        component: r => require(['./views/tool/unit.vue'], r)
+    }
+]
 
-const router = new Router({routes});
+const router = new Router({ routes })
 
-stat('index');
+stat('index')
 
 router.afterEach(to => {
-    stat('tool', {tool: to.path})
-});
+    stat('tool', { tool: to.path })
+})
 
 export default router
\ No newline at end of file

src/tool/config.js

-import {env, inArray} from "../helper";
-import cache from "./cache"
+import { env, inArray } from '../helper'
+import cache from './cache'
 
 // 工具缓存数据过期时间(秒)
-export const TOOL_DATA_EXPIRY = 1800;
+export const TOOL_DATA_EXPIRY = 1800
 // 徽章过期时间(天)
-export const BADGE_EXPIRY = 10;
+export const BADGE_EXPIRY = 10
 // 分类徽章
-export const BADGE_CATEGORY = ["other"];
+export const BADGE_CATEGORY = ['other']
 // 工具徽章
-export const BADGE_TOOL = ["websocket"];
+export const BADGE_TOOL = ['unit']
 // 默认常用工具
 export const DEFAULT_COMMON_TOOL = [
-    "hash", "encrypt", "base64", "url", "timestamp",
-    "qrCode", "pinyin", "ip", "code", "unicode",
-    "decimalConvert", "regex", "randomString", "phpArraySerialize",
-    "diffs"
-];
+    'hash', 'encrypt', 'base64', 'url', 'timestamp',
+    'qrCode', 'pinyin', 'ip', 'code', 'unicode',
+    'decimalConvert', 'regex', 'randomString', 'phpArraySerialize',
+    'diffs'
+]
 
 const category = [
-    {"name": "common", "title": "常用工具"},
-    {"name": "encryption", "title": "加密解密"},
-    {"name": "conversion", "title": "编码转换"},
-    {"name": "other", "title": "其他工具"},
-];
+    { 'name': 'common', 'title': '常用工具' },
+    { 'name': 'encryption', 'title': '加密解密' },
+    { 'name': 'conversion', 'title': '编码转换' },
+    { 'name': 'other', 'title': '其他工具' },
+]
 
 const tool = [
-    {"name": "hash", "title": "哈希(hash)", cat: ["encryption"]},
-    {"name": "encrypt", "title": "加密/解密", cat: ["encryption"]},
-    {"name": "base64", "title": "BASE64编码", cat: ["encryption"]},
-    {"name": "url", "title": "URL编码", cat: ["conversion"]},
-    {"name": "timestamp", "title": "时间戳", cat: ["conversion"]},
-    {"name": "qrCode", "title": "二维码", cat: ["other"]},
-    {"name": "pinyin", "title": "汉字转拼音", cat: ["conversion"]},
-    {"name": "ip", "title": "IP地址查询", cat: ["other"]},
-    {"name": "code", "title": "代码格式化", cat: ["other"]},
-    {"name": "unicode", "title": "Unicode", cat: ["conversion"]},
-    {"name": "decimalConvert", "title": "进制转换", cat: ["conversion"]},
-    {"name": "regex", "title": "正则表达式", cat: ["other"]},
-    {"name": "randomString", "title": "随机字符生成", cat: ["other"]},
-    {"name": "phpArraySerialize", "title": "PHP数组/序列化", cat: ["conversion"]},
-    {"name": "diffs", "title": "文本差异化对比", cat: ["other"]},
-    {"name": "crontab", "title": "crontab校验", cat: ["other"]},
-    {"name": "websocket", "title": "websocket调试", cat: ["other"]},
-];
+    { 'name': 'hash', 'title': '哈希(hash)', cat: ['encryption'] },
+    { 'name': 'encrypt', 'title': '加密/解密', cat: ['encryption'] },
+    { 'name': 'base64', 'title': 'BASE64编码', cat: ['encryption'] },
+    { 'name': 'url', 'title': 'URL编码', cat: ['conversion'] },
+    { 'name': 'timestamp', 'title': '时间戳', cat: ['conversion'] },
+    { 'name': 'qrCode', 'title': '二维码', cat: ['other'] },
+    { 'name': 'pinyin', 'title': '汉字转拼音', cat: ['conversion'] },
+    { 'name': 'ip', 'title': 'IP地址查询', cat: ['other'] },
+    { 'name': 'code', 'title': '代码格式化', cat: ['other'] },
+    { 'name': 'unicode', 'title': 'Unicode', cat: ['conversion'] },
+    { 'name': 'decimalConvert', 'title': '进制转换', cat: ['conversion'] },
+    { 'name': 'regex', 'title': '正则表达式', cat: ['other'] },
+    { 'name': 'randomString', 'title': '随机字符生成', cat: ['other'] },
+    { 'name': 'phpArraySerialize', 'title': 'PHP数组/序列化', cat: ['conversion'] },
+    { 'name': 'diffs', 'title': '文本差异化对比', cat: ['other'] },
+    { 'name': 'crontab', 'title': 'crontab校验', cat: ['other'] },
+    { 'name': 'websocket', 'title': 'websocket调试', cat: ['other'] },
+    { 'name': 'unit', 'title': '单位换算', cat: ['other'] },
+]
 
 // 徽章是否显示
 const badgeIsShow = function () {
     return (Date.parse((new Date()).toString()) / 1000) - env('updateTime') < BADGE_EXPIRY * 86400
-};
+}
 
 const getUserCommon = function () {
-    let tools = cache.getNoVersion('user_common');
-    return tools ? tools : DEFAULT_COMMON_TOOL;
-};
+    let tools = cache.getNoVersion('user_common')
+    return tools ? tools : DEFAULT_COMMON_TOOL
+}
 
 const setUserCommon = function (tools) {
-    cache.setnNoVersion('user_common', tools);
-};
+    cache.setnNoVersion('user_common', tools)
+}
 
 export default {
     tool,
     category,
     setUserCommon,
     getUserCommon,
-    getToolByCategory(cat) {
+    getToolByCategory (cat) {
         return tool.filter((t) => {
-            if (cat === "common") {
+            if (cat === 'common') {
                 return inArray(t.name, getUserCommon())
             }
             return inArray(cat, t.cat)
-        });
+        })
     },
-    badgeToolIsShow(tool) {
-        return badgeIsShow() && inArray(tool, BADGE_TOOL);
+    badgeToolIsShow (tool) {
+        return badgeIsShow() && inArray(tool, BADGE_TOOL)
     },
-    badgeCategoryIsShow(cat) {
-        return badgeIsShow() && inArray(cat, BADGE_CATEGORY);
+    badgeCategoryIsShow (cat) {
+        return badgeIsShow() && inArray(cat, BADGE_CATEGORY)
     }
 }
\ No newline at end of file

src/views/tool/unit.vue

+<template>
+  <div>
+    <option-block style="text-align: center">
+      <FormItem>
+        <ButtonGroup>
+          <Button :type="current.type === v.key ? 'success' : 'primary'"
+                  @click="handle(v.key)"
+                  v-for="v in unitLists"
+                  style="padding: 5px 10px 6px;"
+                  :key="v.key">{{v.name}}
+          </Button>
+        </ButtonGroup>
+      </FormItem>
+    </option-block>
+    <option-block style="text-align: center">
+      <FormItem>
+        <Input v-model="current.input" type="number"></Input>
+      </FormItem>
+      <FormItem>
+        <Select v-model="current.from" style="width:200px">
+          <template v-if="unitGroup[0].name !== ''">
+            <OptionGroup :label="group.name" v-for="(group,gk) in unitGroup" :key="gk">
+              <Option v-for="(unit,k) in group.list" :value="unit" :key="k">{{ unitFormat(unit) }}</Option>
+            </OptionGroup>
+          </template>
+          <template v-else>
+            <Option v-for="(unit,k) in unitGroup[0].list" :value="unit" :key="k">{{ unitFormat(unit) }}</Option>
+          </template>
+        </Select>
+      </FormItem>
+      <FormItem>
+        <Button icon="md-code-working" @click="exchange()"></Button>
+      </FormItem>
+      <FormItem>
+        <Select v-model="current.to" style="width:200px">
+          <Option value="all">全部</Option>
+          <template v-if="unitGroup[0].name !== ''">
+            <OptionGroup :label="group.name" v-for="(group,gk) in unitGroup" :key="gk">
+              <Option v-for="(unit,k) in group.list" :value="unit" :key="k">{{ unitFormat(unit) }}</Option>
+            </OptionGroup>
+          </template>
+          <template v-else>
+            <Option v-for="(unit,k) in unitGroup[0].list" :value="unit" :key="k">
+              {{ unitFormat(unit) }}
+            </Option>
+          </template>
+        </Select>
+      </FormItem>
+    </option-block>
+    <div v-if="isShowResult" style="padding: 0 30px">
+      <template v-if="current.to !== 'all' && assignResult">
+        <div style="text-align: center;margin-top: 30px;font-size: 18px;font-weight: bold">
+          <span style="color: red">{{current.input}}</span> {{unitFormat(current.from)}} = <span style="color: red">{{assignResult.num}}</span>
+          {{unitFormat(current.to)}}
+        </div>
+      </template>
+      <CellGroup v-if="current.to === 'all'">
+        <Row :gutter="16">
+          <Col span="12" v-for="(item,k) in result" :key="k">
+            <Cell :title="item.num" :extra="unitFormat(item.unit)"/>
+          </Col>
+        </Row>
+      </CellGroup>
+    </div>
+  </div>
+</template>
+<script>
+    import U from './library/unit'
+
+    export default {
+        created () {
+            let history = this.$getToolData()
+            this.current.type = history['type'] ? history['type'] : 'temperature'
+            this.getToolData()
+        },
+        computed: {
+            unitGroup () {
+                return U.getData(this.current.type).group
+            },
+            isShowResult () {
+                return this.current.from && this.current.type && this.current.input
+            },
+            result () {
+                let r = []
+                if (this.isShowResult) {
+                    this.saveToolData()
+                    this.unitGroup.forEach((Group) => {
+                        Group.list.forEach((unit) => {
+                            let temp = U.calc(
+                                this.current.type,
+                                this.current.input,
+                                this.current.from.split('_')[0],
+                                unit.split('_')[0]
+                            )
+                            r.push({
+                                unit: unit,
+                                num: temp.num,
+                            })
+                        })
+                    })
+                }
+                return r
+            },
+            assignResult () {
+                if (this.current.to === 'all') {
+                    return {}
+                }
+                let unit = this.current.to
+                for (let i = 0; i < this.result.length; i++) {
+                    if (this.result[i].unit === unit) {
+                        return this.result[i]
+                    }
+                }
+                console.log(this.result)
+                console.log(unit)
+                console.error('无对应数据')
+                return null
+            }
+        },
+        methods: {
+            handle (v) {
+                this.current.type = v
+                this.getToolData()
+            },
+            saveToolData () {
+                let history = this.$getToolData()
+                history.type = this.current.type
+                history.data = history.data ? history.data : {}
+                history.data[history.type] = {
+                    from: this.current.from,
+                    to: this.current.to,
+                    input: this.current.input,
+                }
+                this.$saveToolData(history)
+            },
+            getToolData () {
+                console.log(this.$getToolData())
+                let type = this.current.type
+                let history = this.$getToolData()
+                let unitHistory = history['data'] && history['data'][type] ? history['data'][type] : null
+                this.current.from = unitHistory ? unitHistory.from : ''
+                this.current.to = unitHistory ? unitHistory.to : 'all'
+                this.current.input = unitHistory ? unitHistory.input : ''
+            },
+            unitFormat (unit) {
+                return unit.split('_').join('')
+            },
+            exchange () {
+                if (this.current.to === 'all') {
+                    return
+                }
+                if (!this.current.from || !this.current.to) {
+                    return
+                }
+
+                let temp = this.current.from
+                this.current.from = this.current.to
+                this.current.to = temp
+            }
+        },
+        data () {
+            return {
+                current: {
+                    type: '',
+                    from: '',
+                    to: '',
+                    input: '',
+                },
+                unitLists: U.list,
+            }
+        },
+    }
+</script>
\ No newline at end of file