hb_sis_zhfx/src/views/reportPandect/index.vue

<template>
  <div class="swiperBox">
    <el-carousel
      style="width: 100%; margin: 5vh 0"
      trigger="click"
      type="card"
      height="80vh"
      :autoplay="false"
      indicator-position="none"
      :initial-index="1"
      arrow="none"
      @change="changeSwiper"
    >
      <!-- card-1 -->
      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
        <div class="itemBox">
          <p class="itemTitle">统计分析</p>
          <iframe
            class="iframe"
            width="100%"
            height="100%"
            src="http://10.155.32.4:8070/analysis/#/"
          />
        </div>
      </el-carousel-item>

      <!-- card-2 -->
      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
        <div class="itemBox">
          <p class="itemTitle">
            自定义报表
            <i
              class="itemMoreBtn el-icon-more"
              @click="jumpUrl('/fdczzdy')"
            ></i>
          </p>
          <div style="margin-top: 200px">
            <div class="inline" @click="jumpUrl('/fdczzdy')">
              <div class="l">风电场站自定义</div>
              <div class="r r4">
                <span>4</span>
              </div>
            </div>
            <div class="inline" @click="jumpUrl('/fdxmzdy')">
              <div class="l">风电项目自定义</div>
              <div class="r r2">
                <span>2</span>
              </div>
            </div>
            <div class="inline" @click="jumpUrl('/gfczzdy')">
              <div class="l">光伏场站自定义</div>
              <div class="r r1">
                <span>1</span>
              </div>
            </div>
            <div class="inline" @click="jumpUrl('/gfxmzdy')">
              <div class="l">光伏场项目定义</div>
              <div class="r r1">
                <span>1</span>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>

      <!-- card-3 -->
      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
        <div class="itemBox">
          <p class="itemTitle">
            固定报表
            <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/oafd')"></i>
          </p>
          <div class="imageBox">
            <div class="imgItem" @click="jumpUrl('/oafd')">
              <el-image class="img" src="./static/img/oa日报.png" fit="fill" />
              <p class="imgTitle">OA日报(风电)</p>
            </div>
            <div class="imgItem" @click="jumpUrl('/xnyrb')">
              <el-image
                class="img"
                src="./static/img/新能源日报.png"
                fit="fill"
              />
              <p class="imgTitle">新能源日报</p>
            </div>
            <div class="imgItem" @click="jumpUrl('/missfdrb')">
              <el-image
                class="img"
                src="./static/img/miss日报.png"
                fit="fill"
              />
              <p class="imgTitle">国电电力MISS日报</p>
            </div>
            <div class="imgItem" @click="jumpUrl('/xnyfdscyb')">
              <el-image
                class="img"
                src="./static/img/新能源生产月报.png"
                fit="fill"
              />
              <p class="imgTitle">新能源风电生产月报</p>
            </div>
            <div class="imgItem" @click="jumpUrl('/mhsscyb')">
              <el-image
                class="img"
                src="./static/img/麻黄山生产月报.png"
                fit="fill"
              />
              <p class="imgTitle">麻黄山生产月报</p>
            </div>
            <div class="imgItem" @click="jumpUrl('/nssscyb')">
              <el-image
                class="img"
                src="./static/img/牛首山生产月报.png"
                fit="fill"
              />
              <p class="imgTitle">牛首山生产月报</p>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  // 名称
  name: "cutAnalyse",

  // 数据
  data() {
    const that = this;
    return {};
  },

  // 函数
  methods: {
    // 切换走马灯，并重新渲染样式
    changeSwiper(index) {
      this.$nextTick(() => {
        const swiperDom = $(".swiperBox .el-carousel__item");
        swiperDom
          .eq(index)
          .css({ background: "rgb(4, 12, 11)", border: "1px solid #05bb4c" });
        for (let i = 0; i < swiperDom.length; i++) {
          if (i !== index) {
            swiperDom.eq(i).find(".el-carousel__mask").css({
              background: "rgb(4, 12, 11)",
            });
            swiperDom.eq(i).css({
              background: "rgb(4, 12, 11)",
              border: "1px solid rgba(5, 187, 76, 0.5)",
            });
          }
        }
      });
    },

    // 页面跳转
    jumpUrl(url) {
      this.$router.push(url);
    },
  },

  created() {},

  mounted() {
    this.$nextTick(() => {
      this.changeSwiper(1);
    });
  },

  unmounted() {},
};
</script>

<style lang="less" scoped>
.swiperBox,
.itemBox {
  width: 100%;
  height: 100%;
  font-size: 20px;

  .itemTitle {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .itemMoreBtn {
      cursor: pointer;
      font-size: 22px;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .inline {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 24px;
    margin-bottom: 30px;
    width: 100%;
    margin: 0 0 30px 0;
    transition: 0.2s;

    .l {
      color: #b3bdc0;
      width: 46%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-right: 4%;
      transition: 0.2s;
    }

    .r {
      color: #05bb4c;
      position: relative;
      width: 46%;
      display: flex;
      justify-content: start;
      align-items: center;
      margin-left: 4%;

      &::after {
        content: "";
        position: absolute;
        height: 10px;
        left: 30px;
        top: calc(50% - 5px);
        background-color: #edbf03;
        border-radius: 2px;
      }
    }

    .r1::after {
      width: 30px;
    }

    .r2::after {
      width: 60px;
    }

    .r3::after {
      width: 90px;
    }

    .r4::after {
      width: 120px;
    }

    &:hover {
      width: 80%;
      margin: 0 10% 30px 10%;
      color: #05bb4c;
      transition: 0.2s;
    }

    &:hover .l {
      color: #05bb4c;
      transition: 0.2s;
    }
  }

  .imageBox {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 100px;

    .imgItem {
      cursor: pointer;
      border: none;
      margin-right: 1%;
      margin-bottom: 20px;
      display: flex;
      justify-content: start;
      align-items: center;
      flex-direction: column;
      width: 32%;

      .img {
        width: 100%;
        height: 150px;
        border: 1px solid #b3bdc0;
        transition: 0.2s;

        &:hover {
          border: 1px solid #05bb4c;
          transition: 0.2s;
        }
      }

      p {
        width: 100%;
        font-size: 16px;
        color: #b3bdc0;
        text-align: center;
        transition: 0.2s;
      }

      &:hover p {
        transition: 0.2s;
        color: #05bb4c;
      }
    }
  }

  .iframe {
    border: 0;
    overflow: scroll;
    background: #fff;
  }
}
</style>

<style lang="less">
.itemBox {
  .el-form-item,
  .el-form-item__label {
    font-size: 16px;
  }

  .el-form-item__label {
    text-align: left;
  }
}
</style>