<template>
  <div>
    <div class="bg">
      <div class="title1">黑蚊香车间生产监控看板</div>

      <!-- 新增横向滚动标题 -->
      <div class="scroll-title-container">
        <div class="scroll-title-content">
          {{ scrollText }} <!-- Vue数据绑定 -->
          <!-- 如需静态文字可直接写在这里 -->
        </div>
      </div>

      <div class="floorNum floorNum1">1F</div>
      <div class="floorNum floorNum2">2F</div>
      <div class="floorNum floorNum3">3F</div>
      <div class="floorNum floorNum4" @click="$router.push('/cs2')">4F</div>
      <div class="floorNum floorNum5">5F</div>
      <div class="floorNum floorNum6">6F</div>
      <div class="output" v-for="i in outputData" :style="`left:${i.left}%`"><span>{{i.no}}</span></div>
      <div v-for="i in equipmentData" class="equipment" :style="`left: ${i.left}%`">
        <div :class="i.isRight?'equipmentName1':'equipmentName'"><span>设备名称</span></div>
      </div>



      <div class="arrows1" v-if="isRun.includes('XL01')">
        <div class="arrow" :style="`top: 38.5%;left: 35.2%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 42%;left: 35%;transform: rotate(0deg)`"></div>
        <div class="arrow" :style="`top: 48%;left: 34.5%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 52%;left: 34.2%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 57%;left: 34%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 62%;left: 33.8%;transform: rotate(0)`"></div>
        <div class="arrow" :style="`top: 66%;left: 33.1%;transform: rotate(0deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL02')">
        <div class="arrow" :style="`top: 38.5%;left: 39.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 39%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 39.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 39.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 39%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 38.7%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 39%;transform: rotate(0deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL03')">
        <div class="arrow" :style="`top: 38.5%;left: 46.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 46.3%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 46.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 45.8%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 45.8%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 45.9%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 45.4%;transform: rotate(0deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL04')">
        <div class="arrow" :style="`top: 38.5%;left: 50.5%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 50.5%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 50.9%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 51.1%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 51.1%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 51.2%;transform: rotate(0deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 51.7%;transform: rotate(0deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL05')">
        <div class="arrow" :style="`top: 38.5%;left: 57.2%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 57.5%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 57.5%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 57.5%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 57.8%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 58%;transform: rotate(358deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 57.7%;transform: rotate(358deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL06')">
        <div class="arrow" :style="`top: 38.5%;left: 61.2%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 61.5%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 62.2%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 62.5%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 62.8%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 63.1%;transform: rotate(355deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 63.9%;transform: rotate(355deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL07')">
        <div class="arrow" :style="`top: 38.5%;l;left: 68%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 68.5%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 68.8%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 69%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 69.5%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 70%;transform: rotate(350deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 70%;transform: rotate(350deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL08')">
        <div class="arrow" :style="`top: 38.5%;left: 72.2%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 72.7%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 73.5%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 74.1%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 74.8%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 75.3%;transform: rotate(345deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 76.1%;transform: rotate(345deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL09')">
        <div class="arrow" :style="`top: 38.5%;left: 26.0%;transform: rotate(10deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 25.7%;transform: rotate(10deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 25.3%;transform: rotate(10deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 25.1%;transform: rotate(10deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 24.8%;transform: rotate(10deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 24.2%;transform: rotate(10deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 23.8%;transform: rotate(10deg);`"></div>
      </div>

      <div class="arrows1" v-if="isRun.includes('XL10')">
        <div class="arrow" :style="`top: 38.5%;left: 22.5%;transform: rotate(12deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 22.2%;transform: rotate(12deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 21.5%;transform: rotate(12deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 21%;transform: rotate(12deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 20.5%;transform: rotate(12deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 19.8%;transform: rotate(12deg);`"></div>

      </div>

      <div class="arrows1" v-if="isRun.includes('XL11')">
        <div class="arrow" :style="`top: 38.5%;left: 15.6%;transform: rotate(13deg);`"></div>
        <div class="arrow" :style="`top: 42%;left: 15.1%;transform: rotate(13deg);`"></div>
        <div class="arrow" :style="`top: 48%;left: 14.5%;transform: rotate(13deg);`"></div>
        <div class="arrow" :style="`top: 52%;left: 14.0%;transform: rotate(13deg);`"></div>
        <div class="arrow" :style="`top: 57%;left: 13.5%;transform: rotate(13deg);`"></div>
        <div class="arrow" :style="`top: 62%;left: 12.8%;transform: rotate(13deg);`"></div>
        <div class="arrow" :style="`top: 66%;left: 12.5%;transform: rotate(13deg);`"></div>
      </div>
      <div class="bottomArrows" v-for="(i,k) in 9">
        <div class="arrow" :style="`top: 72.5%;left: ${31.9 + 5.2*k}%;`"></div>
      </div>
      <div class="bottomArrows" v-for="(i,k) in 5">
        <div class="arrow" :style="`top: 73.7%;left: ${50.5 - 5.2*k}%;`"></div>
      </div>

      <div class="bottomArrowsLeft" v-for="(i,k) in 3">
        <div class="arrow" :style="`top: 72.5%;left: ${13 + 5.2*k}%;`"></div>
      </div>

      <div v-for="i in infoData " class="info"
           :style="`width: ${i.width}%; height: ${i.height}%;top: ${i.top}%;left: ${i.left}%;transform: rotate(${i.rotate}deg);
            background: ${i.alpha};border-radius: ${i.radius}%; `">
        <div :class="i.isRight?'infoModel':'infoModel'" :style="`transform: rotate(${360 -i.rotate}deg);`">
          <div class="title">{{ i.equipmentName }}</div>
          <div style="color: #fff;
                position: absolute;
                top: 65%;
                font-size: 0.6vw;
                letter-spacing: 3px;
                left: 7%;"><span style="color: #fff9">产品:</span> <span>{{ i.productName }}</span></div>
          <div style="color: #fff;
                position: absolute;
                top: 90%;
                font-size: 0.6vw;
                letter-spacing: 3px;
                left: 7%;"><span style="color: #fff9">产量:</span> <span>{{ i.quantityFeedback }}</span></div>
          <div style="color: #fff;
                position: absolute;
                top: 110%;
                font-size: 0.6vw;
                letter-spacing: 3px;
                left: 7%;"><span style="color: #fff9">订单号:</span> <span>{{ i.workorderCodeSap }}</span></div>
          <div style="color: #fff;
                position: absolute;
                top: 130%;
                font-size: 0.6vw;
                letter-spacing: 3px;
                left: 7%;"><span style="color: #fff9">工单日期:</span> <span>{{ i.productDate }}</span></div>
          <div style="color: #fff;
                position: absolute;
                top: 155%;
                font-size: 0.6vw;
                letter-spacing: 3px;
                left: 7%;"><span style="color: #fff9">组长:</span> <span>{{ i.teamLeaderNames }}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import {getDailyReportNew} from "../../api/mes/reportWork";
import moment from 'moment';
import { getCsRepairlist } from "@/api/device/faultReport";

export default {
  data() {
    return {
      url:"ws://localhost:9208/websocket/message",
      message: "",
      text_content: "",
      scrollText: "",
      repairOrders:[],
      ws: null,
      timer: null,
      // 查询参数
      queryParams: {
        timeArray: [],
        productDateStart: null,
        productDateEnd: null,
        sapName: null,
        pageNum: 1,
        pageSize: 20,
        workCenter: null,
        factoryCode: null
      },
      scrollInterval: null,
      isRun: [],
      infoData: [
        {
          top: 31,
          left: 13.6,
          rotate: 14,
          width: 2,
          height:40,
          radius:20,
          isRight: false,
          alpha:'transparent',
          equipmentName: "包装线11"
        },
        {
          top: 31,
          left: 20.3,
          rotate: 14,
          width: 2,
          height:40,
          radius:20,
          isRight: false,
          alpha:'transparent',
          equipmentName: "包装线10"
        },
        {
          top: 31,
          left: 24.3,
          rotate: 10,
          width: 2,
          height:40,
          radius:20,
          isRight: false,
          alpha:'transparent',
          equipmentName: "包装线09"
        },
        {
          top: 31,
          left: 33.7,
          rotate: 7,
          width: 2,
          height:40,
          radius:20,
          isRight: false,
          alpha:'transparent',
          equipmentName: "包装线08"
        },
        {
          top: 31,
          left: 38.5,
          rotate: 3,
          width: 2,
          height:40,
          isRight: true,
          alpha:'transparent',
          equipmentName: "包装线07"
        },
        {
          top: 31,
          left: 45.1,
          rotate: 2,
          width: 2,
          height:40,
          isRight: false,
          alpha:'transparent',
          equipmentName: "包装线06"
        },
        {
          top: 31,
          left: 50.5,
          rotate: 358,
          width: 2,
          height:40,
          isRight: true,
          alpha:'transparent',
          equipmentName: "包装线05"
        },
        {
          top: 31,
          left: 56.8,
          rotate: 357,
          width: 2,
          height:40,
          isRight: false,
          alpha:'transparent',
          equipmentName: "包装线04"
        },
        {
          top: 31,
          left: 61.5,
          rotate: 354,
          width: 2,
          height:40,
          isRight: true,
          alpha:'transparent',
          equipmentName: "包装线03"
        },
        {
          top: 31,
          left: 68.1,
          rotate: 351,
          width: 2,
          height:40,
          isRight: false,
          alpha:'transparent',
          equipmentName: "包装线02"
        },
        {
          top: 31,
          left: 72.9,
          rotate: 348,
          width: 2,
          height:40,
          isRight: false,
          alpha:'transparent',
          equipmentName: "包装线01"
        },
      ],
      equipmentData: [
      ],
      outputData: [
        {
          left: 13.6,
          no:"XL11"
        },
        {
          left: 20.3,
          no:"XL10"
        },
        {
          left: 25.3,
          no:"XL09"
        },
        {
          left: 33.3,
          no:"XL08"
        },
        {
          left: 37.7,
          no:"XL07"
        },
        {
          left: 43.9,
          no:"XL06"
        },
        {
          left: 48.5,
          no:"XL05"
        },
        {
          left: 54.5,
          no:"XL04"
        },
        {
          left: 59,
          no:"XL03"
        },
        {
          left: 65,
          no:"XL02"
        },
        {
          left: 69.5,
          no:"XL01"
        },
      ],
      arrowData: [
        {
          left: 17.93,
        },
        {
          left: 25.23,
        },
        {
          left: 39.8,
        },
        {
          left: 47.13,
        },
        {
          left: 61.13,
        },
        {
          left: 68.43,
        },
        {
          left: 83.03,
        },
        {
          left: 90.33,
        },
      ]
    }
  },

  mounted() {
    this.getDate();
    this.timer = setInterval(() => {
      this.getlistFaultReport();
    }, 10000);
    this.startAutoScroll();
  },

  methods: {
    Fungetdate(num) {
      var dd = new Date();
      dd.setDate(dd.getDate() + num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1; //获取当前月份的日期
      var d = dd.getDate();
      return y + "-" + m + "-" + d;
    },
    getDate() {
      let start = this.Fungetdate(0);
      let end = this.Fungetdate(1);

      this.queryParams.timeArray.push(start, end);
      this.getData();
    },
    getData() {
      if(this.queryParams.timeArray.length>0){
        this.queryParams.productDateStart = moment(this.queryParams.timeArray[0]).format('YYYY-MM-DD');
        this.queryParams.productDateEnd = moment(this.queryParams.timeArray[1]).format('YYYY-MM-DD');
      }
      getDailyReportNew(this.queryParams).then(e => {
          // 假设接口返回的数据在 e.rows 中，且为数组格式
        if (e.rows && Array.isArray(e.rows)) {
          this.isRun = e.rows.map(row => row.equipmentCode).filter(code => code); // 过滤掉undefined/null值
          // 创建以 equipmentName 为键的映射表
          const rowMap = e.rows.reduce((map, row) => {
            map[row.equipmentName] = row; // 假设 equipmentName 唯一
            return map;
          }, {});

          // 更新 infoData
          this.infoData = this.infoData.map(infoItem => {
            const matchedRow = rowMap[infoItem.equipmentName];
            return {
              ...infoItem,
              productName: matchedRow?.productName || null ,// 匹配成功则注入 productName
              teamLeaderNames: matchedRow?.teamLeaderNames || null,
              prodType: matchedRow?.prodType || null,
              quantityFeedback: matchedRow?.quantityFeedback || null,
              productDate: matchedRow?.productDate || null,
              workorderCodeSap: matchedRow?.workorderCodeSap || null,
              sapCode:matchedRow?.sapCode || null,
            };
          });
        }
      }).catch(error => {
        console.error("获取数据失败:", error);
      });
    },
    startAutoScroll() {
      const tableBody = this.$refs.autoScrollTable.$el.querySelector('.el-table__body-wrapper')
      let scrollTop = 0

      this.scrollInterval = setInterval(() => {
        if (tableBody) {
          // 每次滚动1像素
          scrollTop += 1

          // 判断是否滚动到底部
          if (scrollTop >= tableBody.scrollHeight - tableBody.clientHeight) {
            scrollTop = 0  // 重置到顶部实现循环滚动
          }

          tableBody.scrollTop = scrollTop
        }
      }, 3000)  // 调整时间间隔控制滚动速度
    },
    stopAutoScroll() {
      clearInterval(this.scrollInterval)
    },

    //设备故障信息
    getlistFaultReport(){
      const _this = this;
      const param ={
        pageNum: 1,
        pageSize: 20
      }
      getCsRepairlist(param).then((response) => {
        if (response?.length) {
          // 更新响应式数据
          this.repairOrders = response.map(item => ({
            ...item,
          }))
          const descList = response.map(item =>
            `${item.belongEquipmentName} ${item.equipmentName} ${item.orderDesc || '无故障描述'}`
          );
          this.scrollText = descList.join('★★★★★★★★'); // 用两个全角空格分隔

          // 提取所有有效的设备名称
          const activeEquipmentNames = new Set(
            response.map(item => item.belongEquipmentName)
              .filter(name => name)
          );

          // 更新infoData的高亮状态
          this.infoData.forEach((item, index) => {
            if (activeEquipmentNames.has(item.equipmentName)) {
              // 响应式设置alpha
              this.infoData[index].alpha = '#CB4C4C80';
            } else {
              // 移除alpha属性
              this.infoData[index].alpha = 'transparent';
            }
          });
        }else {
          this.scrollText = "";
          this.infoData.forEach((item, index) => {
            this.infoData[index].alpha = 'transparent';
          });
        }

      })
    },

  },
  created(){

  },


  beforeDestroy() {
    this.stopAutoScroll()
  },
}
</script>
<style lang="less" scoped>


.bg {
  background-image: url("~@/assets/board/车间监控系统 - 02 - 2.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.title1 {
  position: absolute;
  top: 1%;
  left: 50%;
  font-weight: 700;
  letter-spacing: 0.1vw;
  font-size: 2.1vw;
  color: #ffffff;
  transform: translateX(-50%);
}


.floorNum {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 96.2%;
  width: 4.6%;
  height: 2.4%;
  color: #fff6;
  text-align: center;
  line-height: 2.4vh;
  font-size: 1.5vh;
}

.floorNum1 {
  background-image: url("~@/assets/board/楼层-左背景.png");
  left: 35.5%;
}

.floorNum2 {
  background-image: url("~@/assets/board/楼层-左背景 选中.png");
  left: 39.9%;
  color: #fff;
}

.floorNum3 {
  background-image: url("~@/assets/board/楼层-左背景.png");
  left: 44.3%;
}

.floorNum4 {
  background-image: url("~@/assets/board/楼层-右背景.png");
  left: 51%;
}

.floorNum5 {
  background-image: url("~@/assets/board/楼层-右背景.png");
  left: 55.4%;
}

.floorNum6 {
  background-image: url("~@/assets/board/楼层-右背景.png");
  left: 59.8%;
}

@keyframes example {
  from {
    bottom: 7%
  }
  to {
    bottom: -30%
  }
}

@keyframes example1 {
  from {
    bottom: 0%;
  }
  to {
    bottom: -18.5%
  }
}

.arrows {
  .oneAnR {
    position: absolute;
    width: 6%;
    height: 10.5%;
    top: 25.6%;
    left: 15%;
    overflow: hidden;

    .oneAn {
      position: absolute;
      width: 100%;
      height: 13vh;
      bottom: 7%;
      animation-name: example;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }

  .twoAnR {
    position: absolute;
    width: 6%;
    height: 34.5%;
    top: 37.5%;
    left: 15%;
    overflow: hidden;

    .twoAn {
      position: absolute;
      width: 100%;
      height: 40vh;
      bottom: 0;
      animation-name: example1;
      animation-duration: 4s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }

  .arrow, .wx, .wxh, .box {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 0.5vw;
  }

  .wxh {
    width: 0.6vw;
  }

  .arrow {
    background-image: url("~@/assets/board/箭头 下2.png");
    height: 2.5vh;
  }

  .wx {
    background-image: url("~@/assets/board/蚊香1.png");
    height: 0.5vw;
  }

  .wxh {
    background-image: url("~@/assets/board/蚊香盒.png");
    height: 0.6vw;
  }

  .box {
    background-image: url("~@/assets/board/箱子.png");
    transform: translateX(-0.15vw);
    width: 0.82%;
    height: 0.82vw;
  }
}


.output {
  background-image: url("~@/assets/board/弹窗3-产量2.png");
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 4.3%;
  height: 3.1%;
  top: 27%;

  span {
    display: inline-block;
    width: 100%;
    height: 2.4vh;
    color: #fff;
    text-align: center;
    line-height: 2.4vh;
    font-size: 0.7vw;
  }
}


.info {
  position: absolute;
  width: 4%;
  height: 50%;


  &:hover .infoModel, &:hover .infoModel1 {
    display: inline-block;
  }

  .infoModel, .infoModel1 {
    position: absolute;
    top: 0%;
    left: -700%;
    width: 14.1vw;
    height: 14.7vh;
    color: #fff;
    display: none;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 180%;
      background-image: url("~@/assets/board/弹窗1-设备信息.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .title {
      color: #fff;
      position: absolute;
      top: 15%;
      font-size: 0.8vw;
      letter-spacing: 3px;

      /* 高度自适应方案 */
      min-height: 60px;         /* 设置最小高度保障基础显示 */
      line-height: 1.5;         /* 行高增加到字号的1.5倍 */
      overflow: visible;        /* 解除内容截断限制 */
      display: inline-flex;     /* 启用弹性布局 */
      align-items: flex-start;  /* 顶部对齐防止偏移 */

      /* 换行增强配置 */
      overflow-wrap: break-word;
      word-break: break-word;   /* 优化为更自然的换词策略 */
      max-width: 120px;
      white-space: pre-wrap;    /* 保留空格换行符 */
    }

    .equipmentOutput {
      color: #fff;
      position: absolute;
      top: 45%;
      font-size: 0.6vw;
      letter-spacing: 3px;
    }

    .equipmentInfo {
      color: #fff;
      position: absolute;
      top: 70%;
      font-size: 0.8vw;
      letter-spacing: 3px;
    }
    .equipmentInfo2 {
      color: #fff;
      position: absolute;
      top: 70%;
      font-size: 0.6vw;
      letter-spacing: 3px;
    }
    .equipmentInfo3 {
      color: #fff;
      position: absolute;
      top: 95%;
      font-size: 0.6vw;
      letter-spacing: 3px;
    }
  }

  .infoModel {

    .title {
      left: 7%;
    }

    .equipmentOutput {
      left: 7%;
    }

    .equipmentInfo {
      left: 7%;
    }
    .equipmentInfo2 {
      left: 7%;
    }
    .equipmentInfo3 {
      left: 7%;
    }
  }

  .infoModel1 {
    left: 60%;

    .title {
      right: 7%;
    }

    .equipmentOutput {
      left: 25%;
    }

    .equipmentInfo {
      left: 25%;
    }

    &::before {
      transform-style: preserve-3d;
      transform: rotateY(180deg)
    }
  }
}

.equipment {
  position: absolute;
  top: 72%;
  width: 4%;
  height: 6%;

  &:hover .equipmentName, &:hover .equipmentName1 {
    display: inline-block;
  }

  .equipmentName, .equipmentName1 {
    position: absolute;
    width: 12.7vw;
    height: 4.4vh;
    display: none;

    span {
      position: absolute;
      line-height: 4.4vh;
      color: #fff;
      font-size: 1vw;
      letter-spacing: 3px;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("~@/assets/board/弹窗2-名称.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  .equipmentName {
    top: -10%;
    left: -255%;

    span {
      left: 5%;
    }
  }

  .equipmentName1 {
    top: -10%;
    left: 45%;

    span {
      right: 5%;
    }

    &::before {

      transform-style: preserve-3d;
      transform: rotateY(180deg)
    }
  }
}


@keyframes arrowAn1 {
  from {
    top: -100%;
  }
  to {
    top: 100%;
  }
}

.arrows1 {
  .arrow {
    position: absolute;
    width: 0.5vw;
    height: 2.5vh;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("~@/assets/board/箭头 下2.png");
      animation-name: arrowAn1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}

.bottomArrows {
  .arrow {
    position: absolute;
    width: 0.5vw;
    height: 2.5vh;
    overflow: hidden;
    transform: rotate(90deg);

    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("~@/assets/board/箭头 下2.png");
      animation-name: arrowAn1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}

.bottomArrowsLeft {
  .arrow {
    position: absolute;
    width: 0.5vw;
    height: 2.5vh;
    overflow: hidden;
    transform: rotate(270deg);

    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("~@/assets/board/箭头 下2.png");
      animation-name: arrowAn1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}

/* 新增样式 */
.scroll-title-container {
  top:10%;
  width: 100%;
  height: 30px;
  background: rgba(0, 128, 255, 0.1);
  overflow: hidden;
  position: relative;
  margin: 10px 0;
  border: none !important;
}

.scroll-title-content {
  position: absolute;
  white-space: nowrap;
  animation: scroll 15s linear infinite; /* 将15s改为30s使速度减半 */
  font-size: 18px;
  color: #00f7ff;
  line-height: 30px;
  text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

</style>
