JG-ADMIN-TEMP/src/views/report/statistics/screens/line3D/index.vue

<template>
  <div>
    <Middle3D ref="modelRef" />
    <div class="screen-container">
      <common-headerB title="装调一体式智能生产线仿真大屏" />
      <div class="body">
        <div class="left block">
          <div class="block-header left-block">
            <div class="text">工位状态</div>
            <div class="english">Station status</div>
          </div>
          <div class="block-body">
            <div class="left-header">
              <div class="num-item">
                <div class="item-title">总数</div>
                <div class="item-num">{{ infoObj.total }}</div>
              </div>
              <div class="num-item">
                <div class="item-title">在线</div>
                <div class="item-num">{{ infoObj.online }}</div>
              </div>
              <div class="num-item">
                <div class="item-title">离线</div>
                <div class="item-num">{{ infoObj.offline }}</div>
              </div>
              <div class="num-item">
                <div class="item-title">故障</div>
                <div class="item-num">{{ infoObj.fault }}</div>
              </div>
            </div>
            <div class="divider"></div>
            <ShowScroll
              ref="ShowScrollRef1"
              :scrollRef="scrollbarRef1"
              :innerRef="innerRef1"
            >
              <el-scrollbar ref="scrollbarRef1" class="left-scrollbar">
                <div ref="innerRef1">
                  <div
                    class="infoItem"
                    v-for="(item, index) in taskRateArray"
                    :key="index"
                  >
                    <div class="leftItem textComent itembg">
                      {{ item.stationName }}
                    </div>
                    <div class="rightItem itembg">{{ item.state }}</div>
                  </div>
                </div>
              </el-scrollbar>
            </ShowScroll>
          </div>
        </div>
        <div class="btn">
          <div class="tab">
            <div
              :class="aotuStatus ? 'tab-list tab-active' : 'tab-list'"
              @click="autoView"
            >
              自动巡航
            </div>
            <div
              :class="!aotuStatus ? 'tab-list tab-active' : 'tab-list'"
              @click="returnView"
            >
              恢复视角
            </div>
          </div>
        </div>
        <div class="right block">
          <div class="block-header right-block">
            <div class="text">设备状态</div>
            <div class="english">auto-equipment status</div>
          </div>
          <div class="block-body">
            <ShowScroll
              ref="ShowScrollRef2"
              :scrollRef="scrollbarRef2"
              :innerRef="innerRef2"
            >
              <el-scrollbar ref="scrollbarRef2" class="right-scrollbar">
                <div ref="innerRef2">
                  <div
                    class="deviceInfo"
                    v-for="(item, index) in deviceArray"
                    :key="index"
                  >
                    <div class="img">
                      <el-image
                        :src="`/images/${item.deviceType}.png`"
                        class="img"
                      />
                      <div
                        class="imgbg"
                        :class="{
                          outlinebg: item.state == '离线',
                          errorbg: item.state == '故障',
                        }"
                      ></div>
                    </div>
                    <div class="info">
                      <div class="info1">{{ item.deviceName }}</div>
                      <div class="info2">
                        <div class="text2">
                          今日稼动
                          <span class="nums">{{ item.utilizationRate }}</span>
                        </div>
                        |
                        <div class="text2">
                          总稼动
                          <span class="nums" style="color: white">{{
                            item.totalRate
                          }}</span>
                        </div>
                      </div>
                      <div class="info3">
                        <div class="ip">ID:{{ item.id }}</div>
                        <div class="ip">位置:{{ item.position }}</div>
                        <div
                          class="infoState"
                          :class="{
                            red: item.state == '故障',
                            white: item.state == '离线',
                          }"
                        >
                          {{ item.state }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </ShowScroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CommonHeaderB from "@/views/report/statistics/screens/common-headerB.vue";
import {
  getFaultCount,
  getTaskCount,
  getTaskRate,
  getDeviceList,
  getMaterialRate,
  getTodayError,
  getOnline3DInfo,
} from "@/api/bigScreen";
import Middle3D from "./middle3D.vue";
const aotuStatus = ref(true);
const ShowScrollRef1 = ref(null);
const innerRef1 = ref(null);
const scrollbarRef1 = ref(null);
const ShowScrollRef2 = ref(null);
const innerRef2 = ref(null);
const scrollbarRef2 = ref(null);
const modelRef = ref(null);
const autoView = () => {
  aotuStatus.value = true;
  modelRef.value.startFnc();
};
const returnView = () => {
  aotuStatus.value = false;
  modelRef.value.downFnc();
};

const deviceArray = ref([]);
const infoObj = ref({});
const getRateArray = async () => {
  const { data } = await getOnline3DInfo();
  infoObj.value = data;
  taskRateArray.value = data.stationState;
  nextTick(() => {
    ShowScrollRef1.value.setActive();
  });
};
const getDevice = async () => {
  const { data } = await getDeviceList({
    deviceTypes: ["CCJQR", "DDLSD", "DYJXB", "JDJKQ", "WKDLT", "WSDJKQ"],
  });
  deviceArray.value = data;
  nextTick(() => {
    ShowScrollRef2.value.setActive();
  });
};
const getRandomLetter = () => {
  const letters = ["a", "b", "c", "d"];
  const randomIndex = Math.floor(Math.random() * letters.length);
  return letters[randomIndex];
};
const taskRateArray = ref([]);

onMounted(() => {
  modelRef.value.startFnc();
  getDevice();
  getRateArray();
});
</script>

<style lang="scss" scoped>
.deviceInfo {
  width: 21vw;
  height: 10vh;
  margin: 1vh 0;
  display: flex;
  background-color: rgba(255, 255, 255, 0.05);
  // clip-path: polygon(0% 0%, 85% 0%, 100% 25%, 100% 100%, 0% 100%);
  .img {
    height: 10vh;
    width: 7vw;
    position: relative;
    .imgbg {
      position: absolute;
      height: 10vh;
      width: 7vw;
      top: 0;
      left: 0;
      z-index: 2;
      background-color: #06ffa520;
      border: 0.4vh solid #06ffa5;
    }
    .outlinebg {
      background-color: #ffffff20 !important;
      border: 0.4vh solid #fff !important;
    }
    .errorbg {
      background-color: #db484820 !important;
      border: 0.4vh solid #db4848 !important;
    }
  }
  .info {
    height: 10vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 1vh;

    .info1 {
      padding-left: 0.5vw;
      height: 2vh;
      font-size: 2vh;
      line-height: 2vh;
      font-weight: 600;
      color: white;
    }
    .info2 {
      height: 2vh;
      padding-left: 0.5vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      padding-right: 1vw;
      .text2 {
        font-size: 1.5vh;
        .nums {
          color: #0ae0ff;
          font-weight: 600;
        }
      }
    }
    .info3 {
      height: 2vh;
      font-size: 2vh;
      // background-color: rgba(255, 255, 255, 0.05);
      display: flex;
      padding-left: 0.5vw;
      padding-right: 1vw;
      justify-content: space-between;
      .ip {
        font-size: 1.6vh;
        line-height: 2vh;
        color: white;
      }
      .infoState {
        font-size: 1.6vh;
        line-height: 2vh;
        color: #06ffa5;
      }
    }
  }
}
.textComent {
  white-space: nowrap; /* 不允许换行 */
  overflow: hidden; /* 超出长度时隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.itembg {
  background-color: #46464635;
}
.screen-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  .body {
    width: 100vw;
    height: 92vh;
    display: flex;
    justify-content: space-between;
    .btn {
      flex: 1;
      height: 10vh;
      display: flex;
      justify-content: center;
      .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        .tab-list {
          padding: 0.521vw 2.604vw;
          letter-spacing: 0.104vw;
          color: white;
          background-image: url("@/assets/images/environmentTest/tab.png");
          background-size: 100% 100%;
          font-weight: 700;
          font-size: 0.9375vw;
          &:nth-of-type(1) {
            margin-right: -0.26vw;
          }
          &:hover {
            cursor: pointer;
          }
        }
        .tab-active {
          background-image: url("@/assets/images/environmentTest/tab_active.png");
        }
      }
    }
    .block {
      padding: 2.3vw 2vw;
      height: 92vh;
      width: 22.292vw;
      .block-header {
        padding: 0 3vw 0.15vw;
        font-weight: 700;
        font-style: italic;
        letter-spacing: 0.1vw;
        .text {
          color: white;
          font-size: 1.146vw;
        }
        .english {
          font-size: 0.833vw;
          color: #318c9f;
        }
      }
      .right-block {
        background-image: url("@/assets/images/environmentTest/right-title-bg.png");
        background-size: 100% 100%;
      }
      .left-block {
        background-image: url("@/assets/images/environmentTest/left-title-bg.png");
        background-size: 100% 100%;
      }
      .block-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        .left-scrollbar {
          height: 63vh;
          margin: 1vh 0;
        }
        .right-scrollbar {
          width: 26.292vw;
          height: 73vh;
          margin: 1vh 0;
          margin-left: -2vw;
        }
        .left-header {
          height: 10vh;
          font-style: italic;
          display: flex;
          justify-content: space-evenly;
          .num-item {
            width: 3vw;
            height: 10vh;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: center;
            color: white;
            font-size: 2.5vh;
            .item-title {
            }
            .item-num {
            }
          }
        }
        .divider {
          height: 0.104vw;
          background-image: url("@/assets/images/environmentTest/divider.png");
          background-size: 100% 100%;
        }
      }
    }
    .left {
      background-image: url("@/assets/images/environmentTest/left-bg.png");
      background-size: 100% 100%;
    }
    .right {
      background-image: url("@/assets/images/environmentTest/right-bg.png");
      background-size: 100% 100%;
    }
  }
}
.infoItem {
  height: 4vh;
  margin-bottom: 0.4vh;
  display: flex;
  .leftItem {
    flex: 1;
    height: 4vh;
    font-size: 1.8vh;
    line-height: 4vh;
    color: white;
    text-align: center;
  }
  .rightItem {
    width: 25%;
    height: 4vh;
    line-height: 4vh;
    margin-left: 0.3vw;
    font-size: 1.8vh;
    color: white;
    text-align: center;
  }
  .leftItem1 {
    flex: 1;
    height: 4vh;
    font-size: 1.8vh;
    line-height: 4vh;
    color: white;
    text-align: center;
  }
  .midItem1 {
    width: 25%;
    height: 4vh;
    line-height: 4vh;
    margin-left: 0.3vw;
    font-size: 1.8vh;
    color: white;
    text-align: center;
  }
  .rightItem1 {
    width: 20%;
    height: 4vh;
    line-height: 4vh;
    margin-left: 0.3vw;
    font-size: 1.8vh;
    color: white;
    text-align: center;
  }
}
</style>