新增两个工具

package.json

@@ -7,9 +7,13 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "clipboard": "^2.0.11",
     "core-js": "^3.6.5",
+    "dayjs": "^1.11.5",
     "element-ui": "^2.13.2",
+    "hex-rgb": "^5.0.0",
     "moment": "^2.27.0",
+    "rgb-hex": "^4.0.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",

src/App.vue

@@ -33,4 +33,16 @@ body,html{
     margin:0;
     padding:0;
 }
+.base-page{
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+  min-height: 600px;
+}
+.ml30 {
+  margin-left: 30px;
+}
+.mt20 {
+  margin-top: 20px;
+}
 </style>

src/router/index.js

@@ -22,6 +22,36 @@ const routes = [
             }
         ]
     },
+    {
+        path: '/timestamp',
+        component: Layout,
+        meta: {
+            title: "时间戳",
+            icon: "el-icon-alarm-clock"
+        },
+        children: [
+            {
+                path: 'index',
+                name: 'Timestamp',
+                component: () => import('@/views/Timestamp.vue'),
+            }
+        ]
+    },
+    {
+        path: '/rgb',
+        component: Layout,
+        meta: {
+            title: "颜色转化",
+            icon: "el-icon-orange"
+        },
+        children: [
+            {
+                path: 'index',
+                name: 'RGB',
+                component: () => import('@/views/Rgb.vue'),
+            }
+        ]
+    },
     {
         path: '/about',
         component: Layout,

src/views/Rgb.vue

@@ -0,0 +1,178 @@
+<!--  -->
+<template>
+  <div class="timestamp base-page">
+    <div>颜色转化</div>
+    <div class="mt20">
+      rgb <i class="el-icon-right"></i> hex：
+      <el-input v-model="rgb1"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"></el-input>
+      <el-button type="danger"
+                 icon="el-icon-d-arrow-right"
+                 size="mini"
+                 class="t-btn"
+                 @click="t1">转换</el-button>
+      <el-input v-model="hex1"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"></el-input>
+      <span class="ml30">rgb用英文逗号分隔，如 255,255,255</span>
+    </div>
+    <div class="mt20">
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-timestamp1"
+                 :data-clipboard-text="rgb1"
+                 @click="copyText('copy-timestamp1')">复制rgb</el-button>
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-dateStr1"
+                 :data-clipboard-text="hex1"
+                 @click="copyText('copy-dateStr1')">复制hex</el-button>
+    </div>
+    <div class="mt20">
+      hex <i class="el-icon-right"></i> rgb：
+      <el-input v-model="hex2"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"></el-input>
+      <el-button type="danger"
+                 icon="el-icon-d-arrow-right"
+                 size="mini"
+                 class="t-btn"
+                 @click="t2">转换</el-button>
+      <el-input v-model="rgb2"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"></el-input>
+    </div>
+    <div class="mt20">
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-dateStr2"
+                 :data-clipboard-text="hex2"
+                 @click="copyText('copy-dateStr2')">复制hex</el-button>
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-timestamp2"
+                 :data-clipboard-text="rgb2"
+                 @click="copyText('copy-timestamp2')">复制rgb</el-button>
+
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import hexRgb from 'hex-rgb';
+import rgbHex from 'rgb-hex';
+import ClipboardJS from "clipboard";
+export default {
+  name: "RGB",
+  props: {},
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    //defaultPage ,
+  },
+  data () {
+    return {
+      rgb1: "",
+      rgb2: "",
+      hex1: "",
+      hex2: "",
+    }
+  },
+  //监听属性 类似于data概念
+  computed: {
+    key () {
+      return this.$route.fullPath
+    }
+  },
+  //监控data中的数据变化
+  watch: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted () {
+
+  },
+  //方法集合
+  methods: {
+    copyText (id) {
+      let _this = this;
+      let copyObj = new ClipboardJS(`#${id}`);
+      copyObj.on('success', function (e) {
+        console.log(e);
+        _this.$message.success('复制成功');
+        copyObj.destroy()
+      });
+      copyObj.on('error', function (e) {
+        console.log(e);
+        _this.$message.error('复制失败！');
+        copyObj.destroy()
+      });
+    },
+    t1 () {
+      let arr = this.rgb1.split(",");
+      if (arr.length != 3) {
+        this.$message.error("rgb格式有误");
+        return false;
+      }
+      let [r, g, b] = arr;
+      console.log(r, g, b);
+      try {
+        this.hex1 = `#${rgbHex(`rgb(${r},${g},${b})`)}`.toLocaleUpperCase();
+      } catch (e) {
+        console.log(e);
+        this.hex1 = "转化异常";
+      }
+    },
+    t2 () {
+      let hex = "";
+      if (!this.hex2.startsWith("#")) {
+        hex = `#${this.hex2}`;
+      } else {
+        hex = this.hex2;
+      }
+      console.log(hex);
+      try {
+        let rgb = hexRgb(hex);
+        if (rgb) {
+          this.rgb2 = `${rgb.red},${rgb.green},${rgb.blue}`
+        } else {
+          this.rgb2 = "转化异常"
+        }
+      } catch (e) {
+        console.log(e);
+        this.rgb2 = "转化异常"
+      }
+    }
+  },
+  //当前页面的filter
+  filters: {}
+}
+</script>
+<!-- 单页私有css -->
+<style scoped>
+.about {
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+  min-height: 600px;
+}
+
+.input-box {
+  display: inline-block;
+  width: 250px;
+}
+.t-btn {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+</style>
+<style>
+</style>

src/views/Timestamp.vue

@@ -0,0 +1,205 @@
+<!--  -->
+<template>
+  <div class="timestamp base-page">
+    <div>时间戳转换</div>
+    <div class="mt20">现在：
+      <span>{{timestamp}}</span>
+      <span class="ml30">{{dateStr}}</span>
+    </div>
+    <div class="mt20">
+      <el-button type="danger"
+                 size="mini"
+                 @click="stopOrStartNowTime">停止/开始</el-button>
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-timestamp"
+                 :data-clipboard-text="timestamp"
+                 @click="copyText('copy-timestamp')">复制时间戳</el-button>
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-dateStr"
+                 :data-clipboard-text="dateStr"
+                 @click="copyText('copy-dateStr')">复制时间</el-button>
+    </div>
+    <div class="mt20">
+      时间戳：
+      <el-input v-model="timestamp1"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"></el-input>
+      <el-button type="danger"
+                 icon="el-icon-d-arrow-right"
+                 size="mini"
+                 class="t-btn"
+                 @click="t1">转换</el-button>
+      <el-input v-model="dateStr1"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"></el-input>
+    </div>
+    <div class="mt20">
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-timestamp1"
+                 :data-clipboard-text="timestamp1"
+                 @click="copyText('copy-timestamp1')">复制时间戳</el-button>
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-dateStr1"
+                 :data-clipboard-text="dateStr1"
+                 @click="copyText('copy-dateStr1')">复制时间</el-button>
+    </div>
+    <div class="mt20">
+      时间：
+      <el-input v-model="dateStr2"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"></el-input>
+      <el-button type="danger"
+                 icon="el-icon-d-arrow-right"
+                 size="mini"
+                 class="t-btn"
+                 @click="t2">转换</el-button>
+      <el-input v-model="timestamp2"
+                placeholder="请输入"
+                class="input-box"
+                size="mini"></el-input>
+    </div>
+    <div class="mt20">
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-dateStr2"
+                 :data-clipboard-text="dateStr2"
+                 @click="copyText('copy-dateStr2')">复制时间</el-button>
+      <el-button type="primary"
+                 size="mini"
+                 id="copy-timestamp2"
+                 :data-clipboard-text="timestamp2"
+                 @click="copyText('copy-timestamp2')">复制时间戳</el-button>
+
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import dayjs from "dayjs";
+import ClipboardJS from "clipboard";
+export default {
+  name: "Timestamp",
+  props: {},
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    //defaultPage ,
+  },
+  data () {
+    return {
+      timestamp: 0,
+      dateStr: "",
+      timer: 0,
+      timestamp1: 0,
+      timestamp2: 0,
+      dateStr1: "",
+      dateStr2: "",
+    }
+  },
+  //监听属性 类似于data概念
+  computed: {
+    key () {
+      return this.$route.fullPath
+    }
+  },
+  //监控data中的数据变化
+  watch: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted () {
+    this.nowTime();
+
+    let curr = dayjs();
+    this.timestamp1 = curr.unix();
+    this.timestamp2 = curr.unix();
+    this.dateStr1 = curr.format("YYYY-MM-DD HH:mm:ss");
+    this.dateStr2 = curr.format("YYYY-MM-DD HH:mm:ss");
+  },
+  //方法集合
+  methods: {
+    stopOrStartNowTime () {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = 0;
+      } else {
+        this.nowTime();
+      }
+
+    },
+    nowTime () {
+      this.timer = setInterval(() => {
+        let curr = dayjs();
+        this.timestamp = curr.unix();
+        this.dateStr = curr.format("YYYY-MM-DD HH:mm:ss")
+      }, 1000)
+    },
+    copyText (id) {
+      let _this = this;
+      let copyObj = new ClipboardJS(`#${id}`);
+      copyObj.on('success', function (e) {
+        console.log(e);
+        _this.$message.success('复制成功');
+        copyObj.destroy()
+      });
+      copyObj.on('error', function (e) {
+        console.log(e);
+        _this.$message.error('复制失败！');
+        copyObj.destroy()
+      });
+    },
+    t1 () {
+      let tStr = `${this.timestamp1}`;
+      if (tStr.length != 10 && tStr.length != 13) {
+        this.$message.error("时间戳格式有误！");
+        return false;
+      }
+      if (tStr.length == 10) {
+        this.dateStr1 = dayjs(this.timestamp1 * 1000).format("YYYY-MM-DD HH:mm:ss");
+      }
+      if (tStr.length == 13) {
+        this.dateStr1 = dayjs(this.timestamp1).format("YYYY-MM-DD HH:mm:ss");
+      }
+    },
+    t2 () {
+      if (!dayjs(this.dateStr2).isValid()) {
+        this.$message.error("时间格式有误！");
+        return false;
+      }
+      this.timestamp2 = dayjs(this.dateStr2).unix();
+    }
+  },
+  //当前页面的filter
+  filters: {}
+}
+</script>
+<!-- 单页私有css -->
+<style scoped>
+.about {
+  padding: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+  min-height: 600px;
+}
+
+.input-box {
+  display: inline-block;
+  width: 250px;
+}
+.t-btn {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+</style>
+<style>
+</style>

src/views/UserAuto.vue

@@ -8,6 +8,7 @@
                      label="描述文字"
                      :step="100"></el-input-number>
     <el-button type="primary"
+               class="ml30"
                @click="getUserList">生成数据</el-button>
     <el-button type="primary"
                @click="exportExcel">导出数据</el-button>
@@ -85,7 +86,7 @@ export default {
           name: this.getName(),
           phone: this.getMoble(),
           cardNo: this.getCardNo(),
-          studentNo: `${stuNo}${this.gteNo(i+1)}`
+          studentNo: `${stuNo}${this.gteNo(i + 1)}`
         }
         item.sex = this.getSex(item.cardNo);
         this.list.push(item);
@@ -200,4 +201,7 @@ export default {
   border-radius: 4px;
   min-height: 600px;
 }
+.ml30 {
+  margin-left: 30px;
+}
 </style>