YZProjectCloud/yanzhu-bigscreen/src/views/schedule/photography.vue

<template>
  <div class="project-photography main-page">
    <el-col :span="6" class="h100">
      <module-one-3-1 label="项目全景列表">
        <div class="left-list scroll">
          <template v-if="infoList && infoList.length > 0">
            <div
              v-for="(item, index) in infoList"
              :key="index"
              class="video-item"
              @click.stop="playVideo(item)"
            >
              <span class="div-date">{{ item.videoDate }}</span>
              <i
                class="header-icon el-icon-camera-solid"
                style="font-size: 24px; color: aqua"
              ></i>
            </div>
          </template>
          <div v-else style="text-align: center" class="div-no-data">
            <img src="images/nodata.png" style="width: 120px" />
            <div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
          </div>
        </div>
      </module-one-3-1>
    </el-col>
    <el-col :span="18" class="no-title">
      <module-one-3-3 :notitle="true">
        <template v-if="info">
          <div class="right-title">
            <span class="sp-title">{{ info.videoDate }}</span>
          </div>
          <video style="width: 98%;" controls>
            <source :src="info.videoUrl" type="video/mp4" />
            您的浏览器不支持Video标签。
          </video>
        </template>
        <div v-else style="text-align: center" class="div-no-data">
          <img src="images/nodata.png" style="width: 120px" />
          <div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
        </div>
      </module-one-3-3>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: null,
      activeNames: [],
      infoList: {},
    };
  },
  mounted() {
    window.photography = this;
    this.$store.dispatch("ChangeNav", 501);
    this.$bus.$on("projectChange", (prj) => {
      this.selProject = prj;
      this.init();
    });
    this.selProject = this.$store.getters.selProject;
    this.init();
  },
  methods: {
    playVideo(it) {
      this.info = null;
      setTimeout(() => {
        this.info = it;
      }, 400);
    },
    init() {
      if (!this.selProject) {
        return;
      }
      this.$api.detail.photographyList(this.selProject.id).then((d) => {
        if (d.data.length > 0) {
          this.info = d.data[0];
        } else {
          this.info = null;
        }
        this.infoList = d.data;
      });
    },
  },
};
</script>

<style lang="less">
.project-photography {
  .div-no-data {
    text-align: center;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .no-title {
    .right-title {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sp-title {
      display: inline-block;
      line-height: 72px;
      padding: 0px 40px;
      font-size: 40px;
      background-size: 100% 100%;
      background-image: url("../../assets/images/bgphoto.png");
    }
    video {
      width: 100%;
      height: calc(100% - 201px);
    }
    /deep/ .screen-one-3-3 {
      background-image: none;
      border: solid 1px #409eff5c;
      .module-title {
        display: none;
      }
    }
  }
  .left-list {
    max-height: calc(100% - 40px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
  }
  /deep/ .screen-one-3-1 {
    .el-collapse {
      border: none;
      margin-top: 4px;

      .el-collapse-item {
      }

      .el-collapse-item__header {
        background-color: #097fca2e;
        color: #089fff;
        border-bottom: dotted 1px #089fff77;
      }

      .el-collapse-item__content {
        padding-bottom: 12px;
      }

      .el-collapse-item__wrap {
        background-color: transparent;
        border: none;
        .img-item {
          margin-top: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: #fff;
          position: relative;
        }
        .video-item {
          position: relative;
          line-height: 30px;
          display: flex;
          align-items: center;
          cursor: pointer;
          border-bottom: solid 1px #089fff77;
          .div-date {
            width: calc(90% - 24px);
            text-align: left;
            bottom: 0px;
            color: #089fff;
            padding-left: 24px;
          }
        }
      }
    }
  }
}
</style>