order-ui-pc/src/views/bigScreen/datavScr/index.vue

<template>
  <div class="datavScr box">
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <div id="index" ref="appRef">
        <div class="bg">
          <dv-loading v-if="loading">Loading...</dv-loading>
          <div v-else class="host-body">
            <div class="d-flex jc-center">
              <dv-decoration-10 class="dv-dec-10" />
              <div class="d-flex jc-center">
                <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
                <div class="title">
                  <span class="title-text">数据可视化面板</span>
                  <dv-decoration-6
                    class="dv-dec-6"
                    :reverse="true"
                    :color="['#50e3c2', '#67a1e5']"
                  />
                </div>
                <dv-decoration-8
                  class="dv-dec-8"
                  :reverse="true"
                  :color="decorationColor"
                />
              </div>
              <dv-decoration-10 class="dv-dec-10-s" />
            </div>

            <!-- 第二行 -->
            <div class="d-flex jc-between px-2">
              <div class="d-flex aside-width">
                <div class="react-left ml-4 react-l-s">
                  <span class="react-left"></span>
                  <span class="text">今日相关</span>
                </div>
                <div class="react-left ml-3">
                  <span class="text">数据概览</span>
                </div>
              </div>
              <div class="d-flex aside-width">
                <div class="react-right bg-color-blue mr-3">
                  <span class="text fw-b">待处理</span>
                </div>
                <div class="react-right mr-4 react-l-s">
                  <span class="react-after"></span>
                  <span class="text" style="white-space: nowrap"
                    >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
                  >
                </div>
              </div>
            </div>

            <div class="body-box" v-if="initFlag">
              <!-- 第三行数据 -->
              <div class="content-box">
                <div>
                  <dv-border-box-12>
                    <centerLeft1 />
                  </dv-border-box-12>
                </div>
                <div>
                  <dv-border-box-12>
                    <centerLeft2 />
                  </dv-border-box-12>
                </div>
                <!-- 中间 -->
                <div>
                  <center />
                </div>
                <!-- 中间 -->
                <!-- <div>
              
              <dv-border-box-13>
                <centerRight2 />
              </dv-border-box-13>
            </div> -->
                <div>
                  <dv-border-box-13>
                    <centerRight1 />
                  </dv-border-box-13>
                </div>
              </div>

              <!-- 第四行数据 -->
              <div class="bototm-box">
                <dv-border-box-13>
                  <bottomLeft />
                </dv-border-box-13>
                <dv-border-box-12>
                  <bottomRight />
                </dv-border-box-12>
              </div>
            </div>
            <!-- 防止数据更新闪白屏 -->
            <div style="width:100%;height:100vh;" v-if="!initFlag"></div>
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>

<script>
// import drawMixin from "../drawMixin";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import { formatTime } from "../index.js";
import centerLeft1 from "./centerLeft1";
import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1";
import centerRight2 from "./centerRight2";
import center from "./center";
import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";

export default {
  mixins: [resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "datavScr"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
      initFlag: true,
      time: null,
    };
  },
  components: {
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    center,
    bottomLeft,
    bottomRight,
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
    this.timeInit();
  },
  beforeDestroy() {
    clearInterval(this.timing);
    clearInterval(this.time);
    this.timing = null;
    this.time = null;
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      // setTimeout(() => {
        this.loading = false;
      // }, 0);
    },

    //一分钟更新一次数据
    timeInit() {
      this.time = null;
      this.time = setInterval(() => {
        this.initFlag = false;
        setTimeout(() => {
          this.$message({
            message: "更新数据成功",
            type: "success",
          });
          this.initFlag = true;
        }, 100);
      }, 60000);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assetsDv/scss/index.scss";
@import "../assetsDv/scss/style.scss";

.datavScr.box {
  width: 100%;
  height: 100%;
  background: #000;
  margin: 0;
}
</style>