monitor/src/components/CameraList.vue

<template>
  <div class="app-container">
    <select
      name="pets"
      v-model="queryParams.query"
      id="proj-select"
      @change="projectClicked"
    >
      <option value="">请选择项目</option>
      <option v-for="item in projectList" :value="item.PROID">
        {{ item.PRONAME }}
      </option>
    </select>
    <div
      v-if="queryParams.query && cameraList.length"
      class="camera-list"
      ref="cameraListRef"
    >
      <camera
        v-for="(item, index) in cameraList"
        :key="index"
        :name="item.address"
        :source="item.flvUrl"
      ></camera>
    </div>
    <div v-else-if="queryParams.query && !total">
      <div class="image-list">
        <!-- <div class="image-item">
          <img
            src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF"
            alt=""
          />
        </div>
        <div class="image-item">
          <img
            src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF"
            alt=""
          />
        </div> -->
        <div class="image-item" v-for="item in imageList" :key="item">
          <img :src="`${protocol}//${host}/portal/r/${item}`" alt="" />
        </div>
      </div>
    </div>
    <div v-else class="empty">
      <img src="../assets/empty.png" alt="" />
      请选择项目
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import camera from "./camera.vue";
import axios from "axios";

const cameraLoading = ref(true);
const projectList = ref([]);
const cameraList = ref([]);
const imageList = ref([]);
const total = ref(0);
const protocol = ref("");
protocol.value = location.protocol;
const host = ref("");
host.value = location.host;
const queryParams = reactive({
  cmd: "com.awspaas.user.apps.cmp_camera_list",
  pageNum: 1,
  pageSize: 10,
  sid: sid,
  query: "",
});

const loadProjectList = async () => {
  // const resp = await axios.get(`http://localhost:3000/project-list`);
  const resp = await axios.get(
    "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
  );
  return resp.data;
};

const projectClicked = () => {
  // activeIndex.value = index;
  // const proid = ;
  // queryParams.query = proid;
  queryParams.pageNum = 1;
  loadCameraList();
};

const loadCameraList = async () => {
  cameraLoading.value = true;
  const resp = await axios(`./jd`, {
    params: queryParams,
  });
  cameraList.value = resp.data.rows;
  total.value = resp.data.total;
  cameraLoading.value = false;
  if (total.value == 0) {
    const rep = await axios.get(
      `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
    ); // 摄像头列表为空时,获取图片列表
    imageList.value = rep.data;
  }
};
const cameraListRef = ref();
// 滚动操作
const handleScroll = (e) => {
  console.log(e);
  if (!cameraListRef.value) return;
  let dom = document.documentElement;
  //文档内容实际高度（包括超出视窗的溢出部分）
  let scrollHeight = Math.max(dom.scrollHeight, dom.scrollHeight);
  //滚动条滚动距离
  let scrollTop = dom.scrollTop;
  //窗口可视范围高度
  let clientHeight =
    dom.innerHeight || Math.min(dom.clientHeight, dom.clientHeight);
  console.log(clientHeight, scrollTop, scrollHeight);
  if (clientHeight + scrollTop >= scrollHeight) {
    if (queryParams.pageSize * queryParams.pageNum > total.value) return;
    if (cameraLoading.value) return;
    queryParams.pageNum++;
    loadCameraList();
    console.log("到底了");
  }
};

window.addEventListener("scroll", handleScroll, true);

loadProjectList().then((data) => {
  projectList.value = data;
  if (projectList.value.length) return projectList.value[0].PROID;
});
// .then((proid) => {
//   queryParams.query = proid;
//   queryParams.pageNum = 1;
//   loadCameraList();
// });
</script>
<style>
/* body {
  background-color: #f6f6f6;
} */
</style>
<style scoped lang="scss">
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.nav-bar {
  width: 750px;
  height: 88px;
  background: linear-gradient(to top right, #496df6, #2e9ee8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  position: fixed;
}
.camera-list {
  //   margin-top: 108px;
  padding: 0px 20px 0px;
}
.image-list {
  padding: 0px 20px 0px;
  .image-item {
    margin-bottom: 20px;
    // border-radius: 10px;
    // overflow: hidden;
    img {
      border-radius: 10px;
      object-fit: cover;
      height: 420px;
      width: 710px;
    }
  }
}
// .site-list {
//   flex: 1;
//   margin-top: 20px;
//   padding-bottom: 28px;

//   .site-item {
//     margin-left: 16px;
//     margin-right: 16px;
//     border-radius: 8px;
//     background-color: #fff;

//     &:not(:last-child) {
//       margin-bottom: 40px;
//     }

//     .site-title {
//       background-color: #949494;
//       width: 120px;
//       height: 40px;
//       line-height: 20px;
//       border-radius: 8px 0px 18px 0px;
//       display: flex;
//       justify-content: center;
//       align-items: center;

//       text {
//         font-family: YSBiaoTiHei-regular;
//         color: white;
//         font-size: 20px;
//       }
//     }
//     .camera-list {
//       //   margin-top: 108px;
//       padding: 0px 20px 0px;
//     }
//     // .camera-list {
//     //   padding: 0 20px 0;
//     //   margin-top: 12px;
//     //   white-space: nowrap;
//     //   // width: 100%;
//     //   display: flex;
//     //   justify-content: space-between;

//     //   .camera-item {
//     //     // background-color: aquamarine;

//     //     .camera-image {
//     //       width: 200px;
//     //       height: 140px;
//     //     }

//     //     .camera-title {
//     //       font-size: 20px;
//     //       text-align: center;
//     //     }
//     //   }
//     // }

//     // .site-time {
//     //   padding-right: 20px;
//     //   margin-top: 26px;
//     //   border-radius: 0 0 8px 8px;
//     //   text-align: right;
//     //   height: 30px;
//     //   font-size: 20px;
//     //   color: #fff;
//     //   background-color: #d7d7d7;
//     // }
//   }
// }
#proj-select {
  border: none;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  height: 10vw;
  border-radius: 1vw;
  margin: 2vw 2vw 5vw 2vw;
  outline: none;
}
.empty {
  // flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    width: 80%;
  }
  // height:80vh;
}
</style>