初始化

frontend/packages/BasicComponents/TimeCountDown/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="bs-design-wrap"
+    :class="`bs-time-count-down-${customTheme}`"
+  >
+    <span
+      v-if="isPast"
+      style="color: #ea0b30"
+    >(已过期)</span>
+    <div
+      :class="[
+        'time',
+        {
+          'light-theme': customTheme === 'light',
+          'auto-theme': customTheme == 'auto',
+          'dark-theme': customTheme == 'dark'
+        }
+      ]"
+      class="time-text-box"
+      :style="
+        'font-size:' +
+          config.customize.fontSize +
+          'px;color:' +
+          config.customize.color +
+          ';font-weight:' +
+          config.customize.fontWeight +
+          ';font-family:' +
+          config.customize.fontFamily
+      "
+    >
+      {{ dateDiff }}
+    </div>
+  </div>
+</template>
+
+<script>
+import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import cloneDeep from 'lodash/cloneDeep'
+import { mapMutations, mapState } from 'vuex'
+export default {
+  name: 'TimeCountDown',
+  mixins: [paramsMixins],
+  props: {
+    config: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      timer: '',
+      allTime: 0,
+      date: '',
+      time: new Date().getTime()
+    }
+  },
+  computed: {
+    ...mapState({
+      customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+      activeCode: state => state.bigScreen.activeCode
+    }),
+    isPast: {
+      get () {
+        if (new Date(this.config.endTime).getTime() - this.time < 0) {
+          return true
+        } else {
+          return false
+        }
+      }
+    },
+    dateDiff: {
+      // eslint-disable-next-line vue/return-in-computed-property
+      get () {
+        if (this.config.endTime) {
+          return this.dateFormat(
+            new Date(this.config.endTime).getTime() - this.time
+          )
+        }
+      },
+      set (val) {
+        this.allTime = val
+      }
+    }
+  },
+  watch: {
+    'config.endTime': {
+      handler () {
+        this.getTime()
+      },
+      immediate: true
+    }
+  },
+  mounted () {
+    this.changeStyle()
+  },
+  // 销毁定时器
+  destroyed () {
+    if (this.timer) {
+      clearInterval(this.timer) // 关闭
+    }
+  },
+
+  methods: {
+    ...mapMutations({
+      changeChartConfig: 'bigScreen/changeChartConfig',
+      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+    }),
+    changeStyle (config) {
+      this.config.endTime = this.config.endTime
+        ? new Date(this.config.endTime).getTime()
+        : new Date().getTime() + 3 * 3600 * 1000 * 24 - 1000
+      this.getTime()
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (this.config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
+    },
+    getTime () {
+      if (this.timer) {
+        clearInterval(this.timer)
+      }
+      this.timer = setInterval(() => {
+        this.time = this.time + 1000
+        if (this.dateDiff <= 0) {
+          clearInterval(this.timer)
+        }
+      }, 1000)
+    },
+    // 格式化时间
+    dateFormat (dateDiff) {
+      if (dateDiff < 0) {
+        dateDiff = -dateDiff
+      }
+      const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) // 计算出相差天数
+      const leave1 = dateDiff % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
+      const hours = Math.floor(leave1 / (3600 * 1000)) // 计算出小时数
+      // 计算相差分钟数
+      const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
+      const minutes = Math.floor(leave2 / (60 * 1000)) // 计算相差分钟数
+      // 计算相差秒数
+      const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
+      const seconds = Math.round(leave3 / 1000)
+      // const leave4=leave3%(60*1000)      //计算分钟数后剩余的毫秒数
+      // const minseconds=Math.round(leave4/1000)
+      const timeFn =
+        dayDiff +
+        ' 天 ' +
+        hours +
+        ' 小时 ' +
+        minutes +
+        ' 分钟 ' +
+        seconds +
+        ' 秒'
+      return timeFn
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../BasicComponents/fonts/index.css";
+@import "../../assets/fonts/numberFont/stylesheet.css";
+.bs-design-wrap{
+  width: 100%;
+}
+.time {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+}
+.light-theme {
+  background-color: #ffffff;
+  color: #000000;
+}
+.dark-theme {
+  background-color: transparent;
+  color: #ffffff;
+}
+.auto-theme {
+  background-color: transparent;
+  color: #000000;
+}
+.time-text-box{
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space:nowrap;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+</style>