更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

 ÏîÄ¿´úÂë/DP/src/views/indexs/index.vue

@@ -1,109 +1,156 @@
<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <div class="carousel-container">
    <!-- æ·»åŠ  transform æ ·å¼ç»‘定 -->
    <div class="carousel" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
      <div class="carousel-item">
        
      </div>


      <div class="carousel-item">
  <div class="contents">
    <div class="contetn_center">
      <CenterMap class="contetn_center_top" />
      
     
    </div>
    <div class="contetn_left">
      <div class="pagetab">
        <!-- <div class="item">实时监测</div> -->
        </div>

        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="打磨状态">
          <rightcenter />
        </ItemWrap>

        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="测量状态">
         
        </ItemWrap>
      </div>
    </div>
        
      </div>
      <!-- <ItemWrap class="contetn_left-top contetn_lr-item" title="故障--种类频率">
        <LeftCenter />
      </ItemWrap> -->

      <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="库位信息"
      >

      <div class="carousel-item">
          <div class="contents2">
          <div class="contetn_left">
            <ItemWrap class="contetn_left-bottom contetn_lr-item" title="库位信息">
      <stationone/>
      </ItemWrap>

      <ItemWrap
        class="contetn_left-bottom contetn_lr-item2"
        title="库存信息"
      >
            <div class="station-container">
            <ItemWrap class="contetn_left-bottom contetn_lr-item2" title="库存信息">
      <stationtwo/>
      </ItemWrap>

      <!-- <ItemWrap
        class="contetn_left-bottom contetn_lr-item"
        title="总体出入库信息"
      >
            <ItemWrap class="contetn_left-bottom contetn_lr-item2" title="库存信息">
      <stationthree/>
       
      </ItemWrap> -->

     
            </ItemWrap>
            <ItemWrap class="contetn_left-bottom contetn_lr-item2" title="库存信息">
                <stationfour />
            </ItemWrap>
    </div>
    
    
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-button prev" @click="prev">←</button>
    <button class="carousel-button next" @click="next">→</button>
  </div>
</template>

<script>
import LeftTop from './left-top.vue'
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";
import LeftCenterRight from "./left-center-right.vue";
import stationone from './station-one.vue'
import stationtwo from './station-two.vue'
import stationthree from './station-three.vue'
import passtwo from './pass-two.vue'
import plan from './plan.vue'
import stationfour from './station-four.vue'
import rightcenter from './right-center.vue'
export default {
  components: {
    LeftTop,
    LeftCenter,
    LeftCenterRight,
    LeftBottom,
    CenterMap,
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
    stationone,
    stationtwo,
    stationthree,
    passtwo,
    plan
    stationfour,
    rightcenter
  },
  data() {
    return {
    
    };
      currentIndex: 0,
      interval: null
    }
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },

  mounted() {},
  methods: {
  
    next() {
      this.currentIndex = (this.currentIndex + 1) % 3;
  },
};
    prev() {
      this.currentIndex = (this.currentIndex - 1 + 3) % 3;
    },
    startAutoPlay() {
      this.interval = setInterval(() => {
        this.next();
      }, 300000);
    },
    stopAutoPlay() {
      clearInterval(this.interval);
    }
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeDestroy() {
    this.stopAutoPlay();
  }
}
</script>

<style lang="scss" scoped>
.carousel-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}




// å†…容
.contents {

  .contetn_left,
  .contetn_right {
    width: 475px;
@@ -117,11 +164,12 @@

  //左右两侧 ä¸‰ä¸ªå—
  .contetn_lr-item {
    height: 310px;
    height: 450px;
  }

  .contetn_lr-item2 {
    height: 620px;
    width: 30%;
  }

  .contetn_center_top {
@@ -150,33 +198,43 @@
  
  }
}
.labels {
        flex-shrink: 0;
        font-size: 24px;
        color: rgba(255, 255, 255, 0.6);
        float: left; 
        margin-right: 11.5%;
      }
      .labelsd {
        flex-shrink: 0;
        font-size: 24px;
        color: rgba(255, 255, 255, 0.6);
        float: left; 
        margin-left: 6%;

// ç¬¬ä¸€å—内容
.contents2 {
  width: 100%;

  .contetn_left {
    width: 100%;
    box-sizing: border-box;
    // padding: 16px 0;
      }

@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
  //左右两侧 ä¸‰ä¸ªå—
  .contetn_lr-item {
    height: 210px;
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);

  .contetn_lr-item2 {
    height: 700px;
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);

  .contetn_center_top {
    width: 100%;
    }

}


.station-container {
  display: flex; /* ä½¿ç”¨ Flex å¸ƒå±€ */
  justify-content: space-between; /* å‡åŒ€åˆ†å¸ƒå­å…ƒç´  */
  gap: 16px; /* è®¾ç½®å­å…ƒç´ ä¹‹é—´çš„间距 */
  width: 100%; /* ç¡®ä¿å®¹å™¨å®½åº¦å¡«æ»¡çˆ¶å…ƒç´  */
}






</style>