yzx_tool/src/views/About.vue

<!--  -->
<template>
  <div class="about">

    <div class="mt10">时区时间转化：</div>
    <el-input placeholder="请输入内容"
              v-model="time"
              class="input-with-select mt10">
      <el-select v-model="select"
                 slot="prepend"
                 placeholder="请选择">
        <el-option :label="item.label"
                   :value="item.diff"
                   v-for="item of utcList"
                   :key="item.lable"></el-option>
      </el-select>
      <el-button slot="append"
                 icon="el-icon-search"
                 @click="showList">转化</el-button>
    </el-input>
    <div class="mt10">时间戳为：{{ currTime }}   {{ nowStr }}</div>
    <div class="mt10">所有时区时间戳为：</div>
    <div>
      <span v-for="(item,index) of unixList"
            :key="index"
            class="time-item">{{ item.label }}：{{ item.unix }}</span>
    </div>

    <el-divider></el-divider>
    <div class="mt10">时间格式化：</div>
    <div v-for="item of list"
         :key="item"
         class="mt10">{{ item|friendlyTimeFilter }}</div>

    <div class="mt10">
      <el-button class=""
                 type="primary"
                 icon="el-icon-view"
                 size="mini"
                 @click="downloadClick">查看代码</el-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import dayjs from "dayjs";
export default {
  name: "About",
  props: {},
  //import引入的组件需要注入到对象中才能使用
  components: {
    //defaultPage ,
  },
  data () {
    return {
      list: [],
      select: 0,
      utcList: [],
      time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      unixList: [],
      currTime: "",
      nowStr:"",
    }
  },
  //监听属性 类似于data概念
  computed: {
    key () {
      return this.$route.fullPath
    }
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  async created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted () {
    this.initList();
    this.test();
  },
  //方法集合
  methods: {
    test () {
      for (let i = -11; i <= 12; i++) {
        let label = i;
        if (i == 0) {
          label = ""
        } else if (i > 0) {
          label = `+${i}`
        }
        this.utcList.push({
          diff: i,
          label: `UTC${label}`
        })
      }
      let str1 = "2023-08-21T23:59:59+08:00"
      let str2 = "2023-08-21T23:59:59-05:00"
      let utc = "2023-08-21T23:59:59+00:00"

      console.log("东八区时间：", str1, dayjs(str1).unix());
      console.log("西五区时间：", str2, dayjs(str2).unix());
      console.log("utc时间：", utc, dayjs(utc).unix());

      this.showList();
    },
    showList () {
      let list = []
      for (let item of this.utcList) {
        let utcStr = "";
        if (Math.abs(item.diff) < 10) {
          utcStr = `0${Math.abs(item.diff)}:00`;
        } else {
          utcStr = `${Math.abs(item.diff)}:00`;
        }
        utcStr = `${item.diff >= 0 ? '+' : '-'}${utcStr}`;
        let timeStr = this.time.replace(" ", "T") + utcStr;
        let timeObj = dayjs(timeStr);

        list.push({
          label: item.label,
          unix: timeObj.unix(),
        })
        if (item.diff == this.select) {
          this.currTime = timeObj.unix();
          this.nowStr = timeStr;
        }
      }
      this.unixList = list;
    },
    initList () {
      let list = [];
      let curr = dayjs();
      list.push(
        curr.subtract(10, "s").unix()
      )
      list.push(
        curr.subtract(10, "m").unix()
      )
      list.push(
        curr.subtract(62, "m").unix()
      )
      list.push(
        curr.subtract(10, "h").unix()
      )
      list.push(
        curr.subtract(10, "day").unix()
      )
      list.push(
        curr.subtract(1, "year").unix()
      )
      this.list = list;
    },
    downloadClick () {
      window.open("/static/code.txt")
      // window.location.href = "/code.txt"
    }
  },
  //当前页面的filter
  filters: {
    friendlyTimeFilter (val) {
      if (!val) {
        return "--";
      }
      let length = `${val}`.length;
      if (length != 13 && length != 10) {
        return "--";
      }
      if (length == 13) {
        val = parseInt(val / 1000);
      }
      let valObj = dayjs(val * 1000);
      let currObj = dayjs();
      if (!valObj.isSame(currObj, "year")) {
        return valObj.format("MMM DD,YYYY")
      }
      let curr = currObj.unix();
      let diff = curr - val;
      if (diff < 60) {
        return "a minute ago";
      } else if (diff < 60 * 60) {
        return `${parseInt(diff / 60)} minutes ago`;
      } else if (diff < 60 * 60 * 2) {
        return `a hour ago`;
      } else if (diff < 60 * 60 * 24) {
        return `${parseInt(diff / (60 * 60))} hours ago`;
      }
      return valObj.format("MMM DD")
    }
  }
}
</script>
<!-- 单页私有css -->
<style scoped>
.about {
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
  min-height: 600px;
}
.mt10 {
  margin-top: 10px;
}
.about /deep/ .el-select .el-input {
  width: 130px;
}
.input-with-select {
  width: 500px;
}
.input-with-select /deep/ .el-input-group__prepend {
  background-color: #fff;
}
.time-item {
  display: inline-block;
  width: 300px;
}
</style>
<style>
</style>