slibra-module-web/src/views/screen/ScreenViewBlack/index.vue

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import autofit from 'autofit.js';
import dayjs from 'dayjs';

import WaterYield from "./components/WaterYield";
import WaterQuality from "./components/WaterQuality";
import ContinueData from "./components/ContinueData";
import DataBox from "./components/dataBox";
import GongYi from "./components/gongyi";

import { editPassword } from '@/components';
import TheUserAvatar from '@/components/Layout/TheUserAvatar.vue';
import { screenApi } from "@/api/screen"

let timer = "";
let dataTimer = "";

const updateTime = ref();
const gongyiData = ref([])
const screenData = ref({});
const reportData = ref({})

const currentTime = ref({
  time: '',
  weekday: '',
  date: '',
})

// 日期 - header使用
const getCurrentWeekDay = () => {
  const weekEnum = { 0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六' };
  const time = dayjs(new Date()).format('HH:mm:ss');
  const weekday = weekEnum[dayjs().day()];
  const date = dayjs().format('YYYY-MM-DD');
  currentTime.value = { time, weekday, date };
}


// 获取大屏分析数据
const getRealTimeData = () => {
  screenApi.realTimeData().then(res => {
    screenData.value = res.data;
    updateTime.value = `更新时间：${res.data.testHour}`
  })
}

// 获取工艺管控 助手
const getWarningList = () => {
  screenApi.warningList().then(res => {
    gongyiData.value = res.data || []
  })
}

// 获取文字数据
const getLeastShortReport = () => {
  screenApi.getLeastShortReport().then(res => {
    reportData.value = res.data
  })
}

onMounted(() => {
  // 时钟开始计时
  getCurrentWeekDay();
  // 图表数据
  getRealTimeData();
  // 文字数据
  getLeastShortReport();
  // 工艺
  getWarningList();

  autofit.init({
    dw: 1920,
    dh: 1080,
    el: "#screen-view-black",
    resize: true,
  })

  timer = setInterval(getCurrentWeekDay, 1 * 1000);

  dataTimer = setInterval(() => {
    getRealTimeData();
    getLeastShortReport();
    getWarningList();
  }, 60 * 60 * 1000);
})

onUnmounted(() => {
  clearInterval(timer);
  clearInterval(dataTimer);
})

</script>

<template>
  <div class="screen-view-black" id="screen-view-black">
    <header class="header">
      <div class="header-left">
        <div class="time">{{ currentTime.time }}</div>
        <div class="line"></div>
        <ul class="date">
          <li>{{ currentTime.weekday }}</li>
          <li>{{ currentTime.date }}</li>
        </ul>
      </div>
      <div class="header-right flex items-center justify-end pr-[18px]">
        <div class="select-factory">
          <span>LibraAi污水厂</span>
          <span></span>
        </div>
        <TheUserAvatar></TheUserAvatar>
        <editPassword></editPassword>
      </div>
    </header>
    <main class="main">
      <!-- 导航菜单 -->
      <div class="menu-container">
        <ul class="menu-list justify-end">
          <li class="item mr-[20px] active">
            <RouterLink to="/"><span>智慧总控</span></RouterLink>
          </li>
          <li class="item">
            <RouterLink to="/answer"><span>专家问答</span></RouterLink>
          </li>
        </ul>
        <ul class="menu-list justify-start">
          <li class="item mr-[20px]">
            <RouterLink to="/water-warn"><span>应急决策</span></RouterLink>
          </li>
          <li class="item">
            <RouterLink to="/medicinal"><span>成本管控</span></RouterLink>
          </li>
        </ul>
      </div>
      <div class="screen-container">
        <div class="factory">
          <img class="w-full h-full" src="@/assets/images/screenViewBlack/img-factory.png" alt="">
          <img class="coord img-a" src="@/assets/images/screenViewBlack/img-coord-a.png" alt="">
          <img class="coord img-b" src="@/assets/images/screenViewBlack/img-coord-b.png" alt="">
          <img class="coord img-c" src="@/assets/images/screenViewBlack/img-coord-c.png" alt="">
        </div>
        <div class="content">
          <div class="left">
            <WaterYield :screenData="screenData"></WaterYield>
            <WaterQuality :screenData="screenData" class="pt-[20px]"></WaterQuality>
          </div>
          <div class="middle">
            <div class="middle-wrap">
              <span class="text-[#9E9E9E] pb-[8px] text-[12px]">{{ updateTime }}</span>
              <RouterLink to="/answer" class="inp-box">
                <span>输入您的问题或需求</span>
                <img src="@/assets/images/screenViewBlack/img-start.png" alt="">
              </RouterLink>
            </div>
          </div>
          <div class="right">
            <ContinueData :screenData="screenData"></ContinueData>
            <DataBox :reportData="reportData" class="pt-[20px]"></DataBox>
            <GongYi :gongyiData="gongyiData"></GongYi>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<style lang="scss" scoped>
// 主体背景颜色
$primary-bg-color: #040d1c;

.screen-view-black {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  min-height: 700px;
  background: $primary-bg-color;
  background-size: 100% 100%;
  overflow: hidden;
}

.header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-shrink: 0;
  height: 98px;
  padding: 20px 50px 0 50px;
  background: url(@/assets/images/screenViewBlack/bg-header.png) center center no-repeat;
  background-size: 100% 100%;

  .header-left {
    display: flex;
    align-items: center;

    .time {
      width: 160px;
      color: #FFF;
      text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
      font-family: D-DIN-PRO-700-Bold;
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      letter-spacing: 4.32px;
    }

    .line {
      width: 1px;
      height: 28px;
      margin: 0 20px 0 15px;
      background: rgba(157, 197, 232, 0.36);
    }

    .date {
      color: #CDD6E3;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 1.92px;
      line-height: normal;
      font-style: normal;

      li:nth-child(1) {
        color: #CDD6E3;
      }

      li:nth-child(2) {
        color: #CDD6E3;
        font-family: D-DIN-PRO-700-Bold;
        font-size: 12px;
        letter-spacing: 1.44px;
      }
    }
  }

  .header-right {
    .select-factory {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 114px;
      height: 34px;
      padding: 10px;
      margin-right: 16px;
      background: 
      url("@/assets/images/screenViewBlack/bg-arrow-left.svg") left bottom no-repeat,
      url("@/assets/images/screenViewBlack/bg-select.svg") center center no-repeat,
      url("@/assets/images/screenViewBlack/bg-arrow-right.svg") right bottom no-repeat;
      background-size: 7px 7px, contain, 7px 7px;
      color: #fff;
      font-size: 12px;
      cursor: pointer;

      & span:nth-child(2) {
        display: block;
        width: 13px;
        height: 12px;
        background: url("@/assets/images/screenViewBlack/bg-arrow-down.svg") center center no-repeat;
      }
    }
  }
}

.main {
  flex: 1;
  display: flex;
  flex-flow: column;
  padding: 0 30px 14px 30px;

  .menu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .menu-list {
      display: flex;
      align-items: center;
      width: 540px;
      height: 86px;

      .item {
        width: 172px;
        height: 46px;
        text-align: center;
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.8s;

        span {
          transition: all 0.3s;
          background: linear-gradient(182deg, #02A3F8 11.72%, #83D2FB 38.89%, #FFF 98.7%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .menu-list:nth-child(1) {
      .item {
        background: url(@/assets/images/screenViewBlack/bg-left.png) center center no-repeat;
        background-size: 100% 100%;

        &:hover {
          background: url(@/assets/images/screenViewBlack/bg-left-active.png) center center no-repeat;
          background-size: 100% 100%;

          span {
            background: linear-gradient(182deg, #00FFE4, #FFF 78.7%);
            background-clip: text;
          }
        }
      }

      .active {
        background: url(@/assets/images/screenViewBlack/bg-left-active.png) center center no-repeat;
        background-size: 100% 100%;

        span {
          background: linear-gradient(182deg, #00FFE4, #FFF 78.7%);
          background-clip: text;
        }
      }
    }

    .menu-list:nth-child(2) {
      .item {
        background: url(@/assets/images/screenViewBlack/bg-right.png) center center no-repeat;
        background-size: 100% 100%;

        &:hover {
          background: url(@/assets/images/screenViewBlack/bg-right-active.png) center center no-repeat;
          background-size: 100% 100%;

          span {
            background: linear-gradient(182deg, #00FFE4, #FFF 78.7%);
            background-clip: text;
          }
        }
      }

      .active {
        background: url(@/assets/images/screenViewBlack/bg-right-active.png) center center no-repeat;
        background-size: 100% 100%;

        span {
          background: linear-gradient(182deg, #00FFE4, #FFF 78.7%);
          background-clip: text;
        }
      }
    }
  }

  @keyframes jump {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px); /* 调整这个值来控制跳跃的高度 */
    }
  }

  .screen-container {
    position: relative;
    background: $primary-bg-color;

    .factory {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1408px;
      height: 792px;

      .coord {
        position: absolute;
        width: 108px;
        height: 82px;
      }

      .img-a {
        top: 370px;
        left: 320px;
        animation: jump 1.5s ease-in-out infinite;
        animation-delay: 0.2s;
      }
      .img-b {
        top: 280px;
        left: 650px;
        animation: jump 1.5s ease-in-out infinite;
        animation-delay: 0.6s;
      }
      .img-c {
        top: 226px;
        right: 330px;
        animation: jump 1.5s ease-in-out infinite;
        animation-delay: 0.4s;
      }
    }

    .content {
      position: relative;
      display: flex;
      ;
      justify-content: space-between;

      .left,
      .right {
        width: 540px;
      }

      .middle {
        flex-shrink: 0;
        flex: 1;
        display: flex;
        flex-flow: column;
        justify-content: flex-end;
        padding: 0 50px 30px 50px;

        .middle-wrap {
          display: flex;
          flex-flow: column;
          align-items: flex-end;

          .inp-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 60px;
            padding: 0 14px;
            background: url(@/assets/images/screenViewBlack/bg-input.png) center center no-repeat;
            background-size: 100% 100%;

            span {
              color: rgba(255, 255, 255, 0.80);
              text-shadow: 0px 0px 8px rgba(201, 253, 243, 0.50);
              font-size: 15px;
              font-weight: 400;
              line-height: 22px;
            }

            img {
              width: 56px;
              height: 36px;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
#screen-view-black {
  .header .header-right {
    .name {
      color: #fff;
    }
  }
}
</style>