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" element-loading-background="#081138">
      <!-- 标题 -->
      <div class="big-view-container-title">
        <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" />
              </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">
          <!-- 车队title -->
          <div class="fleet-top-container">
            <div class="fleet-top-box"></div>
            <div class="fleet-top-title">{{ item.title }}</div>
          </div>
          <!-- 内容盒子 -->
          <div class="fleet-content-box">
            <!-- 线路信息 -->
            <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName"
              class="fleet-line-info-container">
              <div class="fleet-line-title">
                {{ childItem.lineName }}
              </div>
              <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">
                <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunItem.nbbm" class="fleet-nbbm-info-item">
                  <div v-if="sunItem.saleInfoVo != null" class="fleet-nbbm-info-have-sale">
                    <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"
                      :width="300" :show-after="300" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">
                      <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
                        :jobCode="sunItem.driverInfoVo.jobCode" />
                      <template #reference>
                        <div class="fleet-nbbm-have-sale-driver" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">
                        </div>
                      </template>
                    </el-popover>
                    <div class="fleet-nbbm-have-sale-txt-box">
                      <span class="fleet-nbbm-have-sale-txt">{{ sunItem.nbbm }}</span>
                    </div>
                    <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName"
                      :width="300" :show-after="300" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">
                      <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode"
                        :jobCode="sunItem.saleInfoVo.jobCode" />
                      <template #reference>
                        <div class="fleet-nbbm-have-sale-sale" :style="signStyleColor[sunItem.saleInfoVo.signStatus]">
                        </div>
                      </template>
                    </el-popover>
                  </div>
                  <el-popover v-else :show-after="300" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)"
                    placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="300">
                    <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
                      :jobCode="sunItem.driverInfoVo.jobCode" />
                    <template #reference>
                      <div class="fleet-nbbm-info-no-sale" :style="signStyleColor[sunItem.driverInfoVo.signStatus]">
                        <span class="fleet-nbbm-info-no-sale-text">
                          {{ sunItem.nbbm }}
                        </span>
                      </div>
                    </template>
                  </el-popover>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">

import { queryLineInfo, querySignInfoByType } from '@/api/big_view/big_view.js';
import ConstForm from '@/components/ConstForm/index.vue';
import getWeek from "@/utils/dateUtils.js";
import moment from 'moment';
import { nextTick, onMounted, reactive, 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 loading = ref(true);
/** 签到信息 */
const personSignInfo = reactive(
  {
    jobCode: null,
    date: null
  }
);
/** 定时更新对象  */
const timeTaskObject = reactive(
  {
    /** 当前日期 */
    titleNowDateObject: "0000-00-00 星期日 00:00:00",
    /** 数据更新日期 */
    updateDateObject: "0000-00-00 00:00:00",
    /** 数据更新计时 5分钟 */
    updateDateSchedulerObject: "0:00"
  }
);
/** 定时任务 */
const timeTask = reactive(
  { /** 当前日期 */
    titleNowDateTimer: null,
    /** 数据更新计时 5分钟 */
    updateDateSchedulerTimer: null
  }
)
// 全局信息List
const globalInfoBoxList = reactive(
  [
    {
      title: "设备数",
      icon: icon1,
      startNumber: 0,
      endNumber: 0
    },
    {
      title: "线路数",
      icon: icon2,
      startNumber: 0,
      endNumber: 0
    },
    {
      title: "车辆数",
      icon: icon3,
      startNumber: 0,
      endNumber: 0
    },
    {
      title: "售票员签到",
      icon: icon4,
      startNumber: 0,
      endNumber: 0
    },
    {
      title: "驾驶员签到",
      icon: icon5,
      startNumber: 0,
      endNumber: 0
    },
    {
      title: "辅助人员签到",
      icon: icon6,
      startNumber: 0,
      endNumber: 0
    },
  ]
)
// 提示信息样式对照表
const signStyleColor = ref(
  [
    {
      backgroundColor: "#10A0DD",
      label: "今日签到正常"
    },
    {
      border: "2px solid #0761ba",
      label: "今日打卡未签"
    },
    {
      backgroundColor: "#ffa500",
      label: "今日打卡迟到"
    },
    {
      backgroundColor: "#ff0000",
      label: "今日酒测异常"
    }
  ]
)

// 车队信息List
const fleetInfoList = ref(
  [
    {
      title: "一车队",
      fleetInfos: []
    },
    {
      title: "二车队",
      fleetInfos: []
    },
    {
      title: "三车队",
      fleetInfos: []
    }
  ]
)

// 元素信息
const fleetNbbmInfoContainer = ref(null);
const scrollNumber = ref(null);
// 计算宽度初始化数据
onMounted(() => {
  handleUpdateDataRequest();
  timeTask.titleNowDateTimer = startUpdateNowDateTimerTaskScheduler();
  timeTask.updateDateSchedulerTimer = startUpdateDataTaskScheduler();
})

/** 销毁之前触发 */
onDeactivated(() => {
  clearInterval(timeTask.titleNowDateTimer)
  clearInterval(timeTask.updateDateSchedulerTimer)
})
/** 组件不挂载之前触发 */
onBeforeUnmount(() => {
  clearInterval(timeTask.titleNowDateTimer)
  clearInterval(timeTask.updateDateSchedulerTimer)
})
/**
 * 开启当前日期更新
 * @param {*} val
 */
const startUpdateNowDateTimerTaskScheduler = () => {
  return setInterval(() => {
    const currentDay = moment(new Date());
    timeTaskObject.titleNowDateObject = currentDay.format("yyyy-MM-DD ") + getWeek(currentDay) + currentDay.format(" HH:mm:ss");
  }, 1000);
}
/**
 * 数据更新日期
 * @param {*} val
 */
const startUpdateDataTaskScheduler = () => {
  let duration;
  // 目标日期时间
  let targetDate;
  // 当前日期时间
  let currentDate;
  return setInterval(() => {
    currentDate = moment();
    if (timeTaskObject.updateDateSchedulerObject <= "0:00") {
      const updateMinutes = 5
      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}`;
  }, 1000);
}

/**
 * 显示弹窗
 * @param {*} val 工号
 */
const alterEnterHandler = (val, el) => {
  personSignInfo.jobCode = val;
}

/** 监听数据更新日期 */
watch(timeTaskObject.updateDateObject, (val1, val2) => {
  // TODO 发送请求更新数据
  handleUpdateDataRequest();
  console.log("时间到了，需要更新数据---");
})

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

  //获取车队
  queryLineInfo().then(res => {
    fleetInfoList.value = res.data
    nextTick(() => {
      const containerElement = fleetNbbmInfoContainer.value;
      if (containerElement != null) {
        containerElement.forEach((el) => {
          const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
          if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
            const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
            // 有售票员
            for (let index = 0; index < el.children.length; index++) {
              const element = el.children[index];
              element.style.width = `${textWidth}px`;
            }
            // 无售票员
          } else {
            const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
            for (let index = 0; index < el.children.length; index++) {
              const element = el.children[index];
              element.style.width = `${textWidth}px`;
            }
          }
        })
        loading.value = false;
      } else {
        loading.value = false;
      }
    })
  })
}

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

<style scoped lang="scss">
// 可视化大屏
.app-container {
  width: 100%;
  height: 100%;
  background-color: #081138;
  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: whitesmoke;
    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: flex-end;
      align-items: center;
      box-sizing: border-box;

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

    // 全局信息
    .big-view-container-global-info {
      height: 11%;
      width: 100%;
      font-size: clamp(0.3rem, -2.531rem + 19.69vw, 1.1rem);
      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%;
        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 {
            // icon
            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: aqua;
            }
          }
        }
      }

      /* 取消最后一个盒子的右侧间距 */
      .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;

      .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: 3vw;
          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: clamp(0.6rem, -0.907rem + 5.71vw, 1.2rem);

      // 通用样式
      .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);

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

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

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

        .fleet-content-box {
          height: calc(100% - clamp(0.6rem, -0.907rem + 5.71vw, 1.2rem));
          width: 100%;
          overflow-y: scroll;
          overflow-x: hidden;

          // 线路信息
          .fleet-line-info-container {
            width: 100%;
            height: auto;

            .fleet-line-title {
              margin: clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) 0 clamp(0.8rem, -0.549rem + 4.09vw, 1.2rem) 0;
              box-sizing: border-box;
              font-weight: bold;
            }

            .fleet-nbbm-info-container {
              width: 100%;
              height: auto;
              box-sizing: border-box;
              display: flex;
              flex-wrap: wrap;
              font-size: 0.8vw;

              .fleet-nbbm-info-item {
                // width: 6vw;
                height: 2.4vh;
                margin-right: 0.4vw;
                box-sizing: border-box;
                margin-top: 0.4vw;
                color: white;

                .fleet-nbbm-info-have-sale {
                  width: 100%;
                  height: 100%;
                  display: flex;

                  .fleet-nbbm-have-sale-driver {
                    border-radius: 1 solid #0761ba;
                    height: 100%;
                    width: 100%;
                    margin-right: 0.2vw;
                    position: relative;
                    display: flex;
                    align-items: center;
                  }

                  .fleet-nbbm-have-sale-sale {
                    border-radius: 1 solid #0761ba;
                    width: 100%;
                    height: 100%;
                  }

                  .fleet-nbbm-have-sale-txt-box {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .fleet-nbbm-have-sale-txt {
                      position: absolute;
                      width: auto;
                      /* 防止文字换行 */
                      white-space: nowrap;

                      padding-left: 0.5vw;
                      padding-right: 0.5vw;
                      /** 防止元素遮挡 */
                      pointer-events: none;
                    }
                  }
                }

                .fleet-nbbm-info-no-sale {
                  width: 100%;
                  height: 100%;
                  border-radius: 1 solid #0761ba;
                  position: relative;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  box-sizing: border-box;

                  /* 防止文字换行 */
                  .fleet-nbbm-info-no-sale-text {
                    position: absolute;
                    width: auto;
                    white-space: nowrap;
                    padding-left: 0.5vw;
                    padding-right: 0.5vw;
                    /* 防止文字换行 */
                  }
                }
              }

              .fleet-nbbm-info-item:last-child {
                margin-right: 0;
              }
            }
          }
        }

        /* 定义滚动条样式 */
        .fleet-content-box::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }

        /*定义滑块 内阴影+圆角*/
        .fleet-content-box::-webkit-scrollbar-thumb {
          border-radius: 6px;
          // box-shadow: inset 0 0 0px rgba(237, 44, 37, .5);
          background-color: #01366c;
          background-image: url('../assets/bigview/scroll-box.png');
        }

        /* 设置滚动条拖拽按钮的样式 */
        .fleet-content-box::-webkit-scrollbar-thumb:vertical {
          background-image: url('../assets/bigview/scroll-box.png');
          background-color: #0761ba;
          /* 背景图片的尺寸适应滑块 */
          background-size: cover;
        }

        .fleet-content-box::-webkit-scrollbar-button {
          display: none;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        .fleet-content-box::-webkit-scrollbar-track {
          box-shadow: inset 0 0 0px #01DEDD;
          border-radius: 6px;
          background-color: #121622;
        }


      }

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

  }
}
</style>
<style>
.fleet-popover-style {
  color: white !important;
  margin: 10px 0 10px 0;
  min-width: 100px;
}

.el-popover.fleet-popover-style {
  border-color: #146EBD;
  background-color: #062a5ac5;
  /* background:
    -webkit-linear-gradient(top, transparent 14px, blue 15px),
    -webkit-linear-gradient(left, transparent 14px, blue 15px);
  background-size: 15px 15px; */
}

.fleet-popover-style .el-popover__title {
  color: #FFFFF0;
  font-weight: bold;
}

.el-popper[data-popper-placement^=top]>.el-popper__arrow::before {
  border-top-color: #062B5A !important;
  background-color: #062B5A !important;
}
</style>