guzijian / bsth-alcohol-sign-web · Files

<template>
  <div class="app-container">
    <!-- 可视化大屏 -->
    <div class="box-view" v-loading="loading" element-loading-text="Loading..."
      element-loading-svg-view-box="-10, -10, 50, 50">
      <!-- 标题 -->
      <div class="big-view-container-title">
        <!-- 标题 -->
        <div class="big-view-container-box">
          岗前检查流程信息管理系统
        </div>
        <div class="big-view-container-time">
          <text>
            {{ timeTaskObject.titleNowDateObject }}
          </text>
        </div>
      </div>
      <!-- 签到信息 -->
      <div class="big-view-container-global-info common-style">
        <div v-for=" (item, index) in globalInfoBoxList" :key="index" class="global-info-box">
          <div class="global-info-box-container">
            <!--<div class="global-info-box-container-left">
              <img :src="item.icon" />
            </div>-->
            <div class="global-info-box-container-right">
              <div class="global-info-box-container-right-title">
                {{ item.title }}
              </div>
              <div class="global-info-box-container-right-number">
                <count-to ref="scrollNumber" :start-val="item.startNumber" :end-val="item.endNumber" :duration="8000"
                  :decimals="0" />
                {{ item.allNumber == null ? "" : " / " + item.allNumber }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 信息提示 -->
      <div class="big-view-container-prompt-info common-style">
        <div class="prompt-info-left-box">
          <div v-for="(item, index) in signStyleColor" :key="index" class="zone-left-prompt-info small-box">
            <div class="label-box" :style="item">
            </div>
            <div class="label-txt">{{ item.label }}</div>
          </div>
        </div>
        <div class="prompt-info-right-box">
          <div class="first-right-prompt-info">
            数据更新时间：{{ timeTaskObject.updateDateObject }}
          </div>
          <div class="second-right-prompt-info">
            &nbsp;&nbsp;更新倒计时：{{ timeTaskObject.updateDateSchedulerObject }}
          </div>
        </div>
      </div>
      <!-- 主要内容 -->
      <div class="big-view-container-main-content common-style">
        <!-- 车队信息 -->
        <div v-for="(item, index) in fleetInfoList" :key="item.title" class="fleet-common-style">
          <div class="fleet-global-content-container">
            <div class="fleet-top-container">
              <div class="fleet-top-box"></div>
              <!-- 车队title -->
              <div class="fleet-top-title">{{ item.title }}</div>
            </div>
            <div class="fleet-line-info-container">
              <el-tooltip v-for="todo in  item.fleetStates " effect="dark" class="fleet-lineName-tip"
                :content="todo.lineName" placement="top">
                <el-link :underline="false" :href="'#' + todo.lineName" type="primary">
                  <div class="fleet-line-info-box" :style="signStyleColor[todo.state]"></div>
                </el-link>
              </el-tooltip>

            </div>
          </div>
          <!-- 内容盒子 -->
          <FleetContentBox :handleLoadSuccess="handleLoadSuccess" :signStyleColor="signStyleColor"
            :currentDateKey="currentDateKey" :item="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { queryLineInfo, querySignInfoByType } from '@/api/big_view/big_view.js';
import FleetContentBox from '@/components/FleetContentBox/index.vue';
import getWeek from "@/utils/dateUtils.js";
import moment from 'moment';
import { nextTick, onMounted, reactive, ref, watch } from 'vue';
import { CountTo } from 'vue3-count-to';
// 图片信息  直接写路径会有问题 打包的时候vite构建会导出路径找不到
import icon2 from "../../assets/bigview/image-icon-1.png";
import icon3 from "../../assets/bigview/image-icon-2.png";
import icon4 from "../../assets/bigview/image-icon-3.png";
import icon5 from "../../assets/bigview/image-icon-4.png";
import icon6 from "../../assets/bigview/image-icon-5.png";
import icon1 from "../../assets/bigview/image-icon-6.png";

const currentDateKey = ref();
const loading = ref(true);

/** 定时更新对象  */
const timeTaskObject = reactive(
  {
    /** 当前日期 */
    titleNowDateObject: "0000-00-00 星期日 00:00:00",
    /** 数据更新日期 */
    updateDateObject: "0000-00-00 00:00:00",
    /** 数据更新计时 5分钟 */
    updateDateSchedulerObject: "0:00"
  }
);
/** 定时任务 */
const timeTask = reactive(
  {
    /** 数据更新计时 5分钟 */
    updateDateSchedulerTimer: null
  }
)
// 全局信息List
const globalInfoBoxList = reactive(
  [
    {
      title: "设备数",
      icon: icon1,
      startNumber: 0,
      endNumber: 0,
      allNumber: 0
    },
    {
      title: "线路数",
      icon: icon2,
      startNumber: 0,
      endNumber: 0,
      allNumber: 0
    },
    {
      title: "车辆数",
      icon: icon3,
      startNumber: 0,
      endNumber: 0,
      allNumber: 0
    },
    {
      title: "售票员签到",
      icon: icon4,
      startNumber: 0,
      endNumber: 0,
      allNumber: 0
    },
    {
      title: "驾驶员签到",
      icon: icon5,
      startNumber: 0,
      endNumber: 0,
      allNumber: 0
    },
    {
      title: "辅助人员签到",
      icon: icon6,
      startNumber: 0,
      endNumber: 0,
      allNumber: 0
    },
  ]
)
// 提示信息样式对照表
const signStyleColor = ref(
  [
    {
      backgroundColor: "green",
      label: "今日签到正常",
      color: "white"
    },
    {
      border: "2px solid #d9e0e2",
      label: "今日打卡未签"
    },
    {
      backgroundColor: "#ffa500",
      label: "今日打卡迟到",
      color: "white"
    },
    {
      backgroundColor: "#ff0000",
      label: "今日酒测异常",
      color: "white"
    },
    {
      backgroundColor: "#00c4ff",
      label: "管理员代领",
      color: "white"
    }
  ]
)

// 车队信息List
const fleetInfoList = ref()

// 元素信息
const scrollNumber = ref(null);
// 初始化数据
onMounted(() => {
  timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
  const currentTime = moment().format('HH:mm');
  let dateKey;
  if (currentTime < '03:00') {
    dateKey = moment().subtract(1, 'day').format('YYYY-MM-DD');
  } else {
    dateKey = moment().format("YYYY-MM-DD");
  }
  currentDateKey.value = dateKey;
  handleUpdateDataRequest(currentDateKey.value);

})

/** 销毁之前触发 */
onDeactivated(() => {
  clearInterval(timeTask.updateDateSchedulerTimer)
})
/** 组件不挂载之前触发 */
onBeforeUnmount(() => {
  clearInterval(timeTask.updateDateSchedulerTimer)
})
/**
 * 数据更新日期
 * @param {*} val
 */
const startUpdateDataTaskScheduler = () => {
  let duration;
  // 目标日期时间
  let targetDate;
  // 当前日期时间
  let currentDate;
  return setInterval(() => {
    currentDate = moment();
    if (timeTaskObject.updateDateSchedulerObject <= "0:00") {
      const updateMinutes = 1
      timeTaskObject.updateDateSchedulerObject = `${updateMinutes}:00`;
      targetDate = moment().add(updateMinutes, 'minutes');
      timeTaskObject.updateDateObject = currentDate.format("yyyy-MM-DD HH:mm:ss");
    }
    // 计算剩余时间
    duration = moment.duration(targetDate.diff(currentDate));
    // 获取剩余的分钟数和秒数
    const minutes = Math.floor(duration.asMinutes()) % 60;
    let seconds = Math.floor(duration.asSeconds()) % 60;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    // 格式化倒计时字符串
    timeTaskObject.updateDateSchedulerObject = `${minutes}:${seconds}`;
    timeTaskObject.titleNowDateObject = currentDate.format("yyyy-MM-DD ") + getWeek(currentDate) + currentDate.format(" HH:mm:ss");
  }, 1000);
}

/** 监听数据更新日期 */
watch(() => timeTaskObject.updateDateObject, (val1, val2) => {
  //  发送请求更新数据
  const currentTime = moment().format('HH:mm');
  let dateKey;
  if (currentTime < '03:00') {
    dateKey = moment().subtract(1, 'day').format('YYYY-MM-DD');
  } else {
    dateKey = moment().format("YYYY-MM-DD");
  }
  currentDateKey.value = dateKey;
  handleUpdateDataRequest(currentDateKey.value);
})

/**
 * 类型 device 设备数量  line  线路数   car   车辆数
 * sale  售票员签到数量    driver   驾驶员签到    auxiliary   辅助人员签到数量
 */
const handleUpdateDataRequest = (dateKey) => {
  // 获取设备数量
  querySignInfoByType({ type: "device", dateKey: dateKey }).then(res => {
    handleGlobalInfo(res.data, 0)
  })
  // 获取线路数
  querySignInfoByType({ type: "line", dateKey: dateKey }).then(res => {
    handleGlobalInfo(res.data, 1)
  })
  // 获取车辆数
  querySignInfoByType({ type: "car", dateKey: dateKey }).then(res => {
    handleGlobalInfo(res.data, 2)
  })
  // 售票员签到
  querySignInfoByType({ type: "sale", dateKey: dateKey }).then(res => {
    handleGlobalInfo(res.data, 3)
  })
  // 驾驶员签到
  querySignInfoByType({ type: "driver", dateKey: dateKey }).then(res => {
    handleGlobalInfo(res.data, 4)
  })
  // 辅助人员签到
  querySignInfoByType({ type: "auxiliary", dateKey: dateKey }).then(res => {
    handleGlobalInfo(res.data, 5)
  })

  //获取车队
  queryLineInfo(dateKey).then(res => {
    fleetInfoList.value = res.data

    nextTick(() => {
      loading.value = false;
    })
  })
}

/**
 * 处理加载过程 组件加载完成回调
 * @param {*} val boolean
 */
const handleLoadSuccess = (val) => {
  loading.value = val;
}

const handleGlobalInfo = (data, num) => {
  globalInfoBoxList[num].startNumber = globalInfoBoxList[num].endNumber;
  globalInfoBoxList[num].endNumber = data.nowNumber;
  globalInfoBoxList[num].allNumber = data.allNumber;
}
</script>

<style scoped lang="scss">
// 可视化大屏
.app-container {
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 0 !important;
  box-sizing: border-box;

  // min-height: 900px;
  // min-width: 1600px;
  .box-view {
    width: 100%;
    height: 100%;
    // 整体蓝色背景
    //background-image: url("@/assets/bigview/back.png");
    //background-size: cover;
    //background-repeat: no-repeat;
    //background-position: cover;
    color: black;
    box-sizing: border-box;
    padding: 0 1.5vw 1.5vw 1.5vw;

    background-size: 100% 100%;
    // min-height: 900px;
    // min-width: 1600px;

    .common-style {
      padding-top: clamp(1rem, -1.5rem + 2.5vh, 2rem);
      box-sizing: border-box;
    }

    // 标题
    .big-view-container-title {
      height: 7%;
      width: 100%;
      font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      flex-direction: column;

      .big-view-container-box {
        height: 70%;
        width: 100%;
        display: contents;
        font-size: 2.3vw;
        font-weight: bold;
      }

      .big-view-container-time {
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        // margin-top: 2.9%;
        box-sizing: border-box;
      }
    }

    // 全局信息
    .big-view-container-global-info {
      height: 11%;
      width: 100%;
      font-size: clamp(0.5rem, -2.531rem + 19.69vw, 1.3rem);
      display: flex;
      justify-content: center;
      align-items: center;

      .global-info-box {
        flex-grow: 1;
        width: 100%;
        height: 100%;
        display: flex;
        margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
        //background-image: url('@/assets/bigview/bottom-box-small.png');
        //background-repeat: no-repeat;
        //background-size: 100% 100%;
        border: 2px solid #d9e0e2;
        border-radius: 10px;

        justify-content: center;
        align-items: center;

        .global-info-box-container {
          width: 100%;
          height: 100%;
          padding: clamp(0.3rem, 0.2rem + 0.5vw, 0.6rem);
          display: flex;
          justify-content: center;
          align-items: center;

          .global-info-box-container-left {
            // icon
            // flex-grow: 1;
            // width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            box-sizing: border-box;
            margin-right: clamp(0.3rem, 0.2rem + 0.5vw, 0.6rem);
          }

          .global-info-box-container-left img {
            height: clamp(4rem, 3.713rem + 2vw, 4.1rem);
            width: clamp(4rem, 3.713rem + 2vw, 4.1rem);
          }

          .global-info-box-container-right {
            // flex-grow: 1;
            // width: 100%;
            height: clamp(4rem, 3.713rem + 2vw, 4.1rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow-x: visible;

            .global-info-box-container-right-title {
              white-space: nowrap;
            }

            .global-info-box-container-right-number {
              font-weight: bold;
              color: black;
              text-align: center;
              // display: flex;
              // align-items: center;
            }
          }
        }
      }

      /* 取消最后一个盒子的右侧间距 */
      .global-info-box:last-child {
        margin-right: 0;
      }
    }

    // 提示信息
    .big-view-container-prompt-info {
      font-size: 1vw;
      box-sizing: border-box;
      width: 100%;
      height: 4.5%;
      display: flex;
      align-items: center;
      padding-right: 1.5vw;
      padding-left: 1.5vw;

      .prompt-info-left-box {
        display: flex;
        height: 100%;
        width: 100%;
        justify-content: flex-start;
        align-items: center;

        .zone-left-prompt-info {
          .label-box {
            height: 100%;
            width: 3vw;
            margin-right: clamp(0.5rem, -2.5rem + 30vw, 1.1rem);
          }
        }

        .small-box {
          margin-right: 2vw;
          width: 10vw;
          height: 2vh;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .label-txt {
            white-space: nowrap;
          }
        }
      }

      .prompt-info-right-box {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .first-right-prompt-info {
          white-space: nowrap;
        }

        .second-right-prompt-info {
          white-space: nowrap;
        }
      }
    }

    // 主要内容
    .big-view-container-main-content {
      width: 100%;
      height: calc(85% - clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem) * 3);
      display: flex;
      font-size: 1.2vw;

      // 通用样式
      .fleet-common-style {
        flex-grow: 1;
        width: 33.3%;
        height: 100%;
        //background-image: url("@/assets/bigview/bottom-box.png");
        margin-right: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
        //background-size: 100% 100%;
        box-sizing: border-box;
        padding: clamp(0.6rem, 0.489rem + 1.05vw, 1rem);
        background-color: white;
        display: flex;
        flex-direction: column;

        .fleet-global-content-container {
          display: flex;
          box-sizing: border-box;
          align-items: center;

          .fleet-top-container {
            width: 40%;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            flex-wrap: nowrap;

            .fleet-top-box {
              height: 1vw;
              width: 1vw;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #303133;
              margin-right: clamp(0.4rem, 0.489rem + 1.05vw, 0.7rem);
            }

            .fleet-top-title {
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 1.4vw;
            }
          }

          .fleet-line-info-container {
            width: 60%;
            height: 1.4vw;
            display: flex;
            // justify-content: center;
            box-sizing: border-box;
            flex-wrap: wrap;

            .fleet-line-info-box {
              height: 0.8vw;
              width: 0.8vw;
              box-sizing: border-box;
              margin-right: 2px;
              margin-top: 2px;
              border: 1px solid #d9e0e2;
            }
          }
        }
      }

      .fleet-common-style:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>