qiuwang/src/views/swiperPersonnel.vue

<template>
  <!-- <div class="home"> -->
  <!-- <div class="box" @mouseout="out" @mouseover="over">
      <div class="boxChild"  v-for="(item, index) in list"  v-show="listIndex === index"
          :key="index">
        <div class="fathBox"></div>
        <div class="fath2Box">
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;">派单时间：</span>
            <span style="color:#fff;">{{item.value}}</span>
          </div>
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">整改人：</span>
            <span style="color:#fff;">陈晓红</span>
          </div>
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">状态：</span>
            <span style="color:#EAA505;">待处理</span>
          </div>
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">隐患内容：</span>
            <span style="color:#fff;">现场作业准备</span>
          </div>
          <div style="margin-left: 21px;margin-top: 8px;">
            <span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">隐患内容：</span>
            <span style="color:#fff;">上方悬挂摇晃</span>
          </div>
        </div>
      </div>
      <p class="left" @click="changePage(prevIndex)"></p>
      <p class="right" @click="changePage(nextIndex)"></p>
    </div> -->
  <!-- </div> -->
  <el-carousel indicator-position="1000" :autoplay="true" ref="carousel" class="carousel1">
    <el-carousel-item v-for="(item, index) in list" :key="index">
      <div class="home">
        <div class="box">
          <div class="boxChild">
            <div class="fathBox"><img :src="item" alt="" style="width:100%;height:100%"></div>
          </div>
        </div>

        <!-- <p class="left" @click="changePage(1)"></p>
        <p class="right" @click="changePage(2)"></p> -->
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { getResolveTroublePage,getRecentMeeting} from "@/api/personnel";

export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      listIndex: 0, //默认显示第几张图片
      timer: null, //定时器
    };
  },
  computed: {
    //上一张
    prevIndex() {
      if (this.listIndex == 0) {
        return this.list.length - 1;
      } else {
        return this.listIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if (this.listIndex == this.list.length - 1) {
        return 0;
      } else {
        return this.listIndex + 1;
      }
    },
  },
  methods: {
    getData() {
    //   getResolveTroublePage({
    //     projectId: sessionStorage.getItem("projectId"),
    //     size: 100,
    //     current: 1,
    //   }).then((res) => {
    //     this.list = Object.keys(res.data.data.records).map((item, index) => {
    //       if (res.data.data.records[item].status == 0) {
    //         res.data.data.records[item].status = "未完成";
    //       } else {
    //         res.data.data.records[item].status = "已完成";
    //       }
    //       return {
    //         allocateDate: res.data.data.records[item].allocateDate,
    //         rectifier: res.data.data.records[item].rectifier,
    //         status: res.data.data.records[item].status,
    //         troubleContent: res.data.data.records[item].troubleContent,
    //         troubleMark: res.data.data.records[item].troubleMark,
    //         troubleImages: res.data.data.records[item].troubleImages
    //       };
    //     });
    //   });
    let projectId = sessionStorage.getItem("projectId");
     getRecentMeeting({
          projectId: projectId,
      }).then((res)=>{
          this.meeting = res.data.data
            var arr = [];
            arr = res.data.data.picture.split(',');
           console.log("arr",arr)
           this.list = arr
      })
    },
    changePage(index) {
      if (index == 1) {
        this.$refs.carousel.prev();
      } else {
        this.$refs.carousel.next();
      }
      // this.listIndex = index;
    },
    //移除
    out() {
      this.setTimer();
    },
    //移入
    over() {
      clearInterval(this.timer);
    },
    //1秒切图
    setTimer() {
      this.timer = setInterval(() => {
        this.listIndex++;
        if (this.listIndex == this.list.length) {
          this.listIndex = 0;
        }
      }, 1000);
    },
  },
  created() {
    //定时器
    this.setTimer();
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
@marginLeft: 50px;

.home {
  display: flex;
  align-items: center;
//   margin-left: @marginLeft;
  .boxChild {
    display: flex;

    .fathBox {
      width: 170px;
      height: 146px;
    //   background: url("~@/assets/pic/23.png") no-repeat;
      background-size: 100% 100%;
    }

    .fath2Box {
      span {
        font-size: 14px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
      }
    }
  }

  // .box {
  //   position: relative;
  //    width: 30px;
  //    height: 30px;
  //    img {
  //      width: 100%;
  //      height: 100%;
  //      z-index: 100;
  //    }
  //   p {
  //     cursor: pointer;
  //     color: white;
  //     font-size: 28px;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     width: 50px;
  //     height: 50px;
  //     background: rgba(0, 0, 0, 0.5);
  //   }
  .left {
    position: absolute;
    top: 51px;
    left: 10px;
    width: 23px;
    height: 32px;
    background: url("~@/assets/pic/left.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    @media only screen and (max-height: 1000px) {
      top: 31px;
    }
  }

  .right {
    position: absolute;
    top: 51px;
    width: 23px;
    background: url("~@/assets/pic/right.png") no-repeat;
    height: 32px;
    right: 10px;
    cursor: pointer;

    @media only screen and (max-height: 1000px) {
      top: 31px;
    }
  }

  //   ul {
  //     list-style: none;
  //     display: flex;
  //     justify-content: space-around;
  //     align-items: center;
  //     position: absolute;
  //     width: 150px;
  //     height: 20px;
  //     top: 90%;
  //     right: 35%;
  //     .color {
  //       background: red;
  //       color: red;
  //     }
  //     li {
  //       cursor: pointer;
  //       width: 10px;
  //       height: 10px;
  //       background: white;
  //       border-radius: 50%;
  //     }
  //   }
  // }
}
</style>
<style>
.el-carousel__arrow--left,
.el-carousel__arrow--right {
  display: none;
}
.el-carousel__container {
  position: relative;
  /* height: 180px !important; */
   height: 200px !important;
}
.el-carousel__indicators--horizontal{
    width:73%
}
.el-carousel__indicator--horizontal {
    display: inline-block;
    padding: 12px 4px;
    /* display: none!important; */
}
.carousel1 .el-carousel__indicators--horizontal {
    bottom: 25px;
    left: 70%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
</style>