monitor/src/components/CameraList.vue

<template>
  <div class="app-container">
    <div class="naive-select-wrap">
      <NConfigProvider :locale="zhCN">
        <NSelect
          v-model:value="queryParams.query"
          :options="projectList"
          placeholder="请选择项目"
          label-field="PRONAME"
          value-field="PROID"
          @update:value="projectClicked"
        />
      </NConfigProvider>
    </div>

    <!-- <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" class="naive-tabs">
      <NTabs type="segment">
        <NTabPane name="camera" tab="摄像头列表">
          <!-- v-if="queryParams.query && activeIndex == 0" -->
          <div class="camera-list" ref="cameraListRef">
            <camera
              v-for="(item, index) in cameraList"
              :key="index"
              :name="item.address"
              :source="item.flvUrl"
            ></camera>
            <div v-if="!cameraList.length" class="empty">
              <img src="../assets/empty.png" alt="" />
              摄像头列表为空
            </div>
          </div>
        </NTabPane>
        <NTabPane name="image" tab="图片列表">
          <!-- v-else-if="queryParams.query && activeIndex == 1" -->
          <div class="image-list">
            <div class="image-item" v-for="item in imageList" :key="item.PIC">
              <!-- <img :src="`${protocol}//${host}/portal/r/${item}`" alt="" /> -->
              <!-- <img :src="`http://81.68.90.198:8088/portal/r/${item}`" alt="" /> -->
              <!-- TODO:test -->
              <!-- :src="`${protocol}//${host}/portal/r/${item.PIC}`" -->
              <NImage
                class="n-image-item"
                :src="`http://81.68.90.198:8088/portal/r/${item.PIC}`"
                :previewed-img-props="{
                  draggable: true,
                  style: { border: 'none' },
                }"
              ></NImage>
              <div class="uplode-time">{{ item.CREATEDATE }}</div>
            </div>
            <div v-if="!imageList.length" class="empty">
              <img src="../assets/empty.png" alt="" />
              图片列表为空
            </div>
          </div>
        </NTabPane>
      </NTabs>
    </div>
    <!-- <div class="switch" v-if="queryParams.query">
      <div
        :class="`switch-item ${activeIndex == 0 ? 'active' : ''}`"
        @click="activeIndex = 0"
      >
        摄像头列表
      </div>
      <div
        :class="`switch-item ${activeIndex == 1 ? 'active' : ''}`"
        @click="activeIndex = 1"
      >
        图片列表
      </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";
import {
  NSelect,
  NConfigProvider,
  zhCN,
  NTabs,
  NTabPane,
  NImage,
} from "naive-ui";
const cameraLoading = ref(true);
const projectList = ref([
  // {
  //   PROID: "123123",
  //   PRONAME: "项目12",
  // },
]);
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,
  // TODO:test
  sid: "b9e99f78-2f6e-4d1c-aea9-4364f4191d30",
  query: undefined,
});
// const activeIndex = ref(0);
const loadProjectList = async () => {
  // const resp = await axios.get(`http://localhost:3000/project-list`);
  // TODO:test
  const resp = await axios.get(
    "/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=b9e99f78-2f6e-4d1c-aea9-4364f4191d30"
  );
  // const resp = {
  //   data: [{
  //     "SUPERVISORID": "",
  //     "MAP": "40.763291,111.971932",
  //     "PROID": "HT6YXM-202303232023030010",
  //     "PROTYPE": "",
  //     "UPDATEDATE": 1679559863000,
  //     "SUPERVISOR": "",
  //     "DESIGNERID": "",
  //     "STCV": 800000,
  //     "PROOWNER": "六院本部/资产运营部/",
  //     "SURVEY": "",
  //     "UPDATEUSER": "13088880001",
  //     "SURVEYID": "",
  //     "APPENDIX": "",
  //     "PROCOST": 800000,
  //     "PRICELEADERID": "13088880004",
  //     "PRODEPTLEADERID": "13088880003",
  //     "PROLEADERID": "13088880002",
  //     "PROLEADER": "建设单位项目管理人员",
  //     "CONTRACTOR": "",
  //     "FLOORAREA": 2000,
  //     "CREATEUSER": "13088880001",
  //     "ISEND": 0,
  //     "RSTATUS": "1",
  //     "LEADERID": "13088880007",
  //     "PRICELEADER": "工程造价主管部门领导",
  //     "PROSTATUS": "1",
  //     "CBDATE": 1677600000000,
  //     "CONTRACTORID": "",
  //     "LEADER": "主要领导",
  //     "PRODEPTLEADER": "建设单位项目管理部门领导",
  //     "PRONAME": "A区科创园",
  //     "ASSETLEADER": "固定资产投资主管领导",
  //     "BINDID": "47856a34-afa4-4a9b-ae28-ba450a4ab798",
  //     "ORGID": "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
  //     "PROADDRESS": "内蒙古自治区呼和浩特市赛罕区黄合少镇南地村",
  //     "DESIGNER": "",
  //     "PROCESSDEFID": "obj_a48ef53d7a2f4492bf440174e32bef3a",
  //     "PROPIC": "",
  //     "CREATEDATE": 1679559863000,
  //     "ASSETLEADERID": "13088880005",
  //     "CEDATE": 1703260800000,
  //     "PROFILE": "",
  //     "ACCDATE": 1703260800000,
  //     "ID": "a0fb6df5-48e4-442f-8b9d-da5861c1bf41"
  //   }]
  // }
  // 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();
  loadImageList();
};

const loadCameraList = async () => {
  cameraLoading.value = true;
  // TODO:test
  const resp = await axios(`/api/portal/r/jd`, {
    params: queryParams,
  });
  // const resp = {
  //     data: {
  //       "code": 0,
  //       "rows": [{
  //         "address": "A区-科创园南门内",
  //         "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000009_34020000001320000009.flv",
  //         "id": "2e627e9a-afe8-4065-9196-423467396401",
  //         "projectId": "HT6YXM-202303232023030010",
  //         "projectName": "A区科创园"
  //       }, {
  //         "address": "A区科创园东门内",
  //         "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000008_34020000001320000008.flv",
  //         "id": "7ff7ba05-05e4-48e6-a43a-a0983ff1aa2b",
  //         "projectId": "HT6YXM-202303232023030010",
  //         "projectName": "A区科创园"
  //       }, {
  //         "address": "A区科创园东塔吊东北角球机",
  //         "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000010_34020000001320000010.flv",
  //         "id": "e410e322-cceb-40b9-899b-4f3d2e8215eb",
  //         "projectId": "HT6YXM-202303232023030010",
  //         "projectName": "A区科创园"
  //       }, {
  //         "address": "A区科创园东塔吊西南角球机",
  //         "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv",
  //         "id": "ff3e0079-068c-49f0-b1fe-3fa8544d91f2",
  //         "projectId": "HT6YXM-202303232023030010",
  //         "projectName": "A区科创园"
  //       }],
  //       "total": 4
  //     }
  //   }
  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}`
  // ); // 摄像头列表为空时,获取图片列表

  // const rep = await axios.get(
  //   `/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
  // ); // 摄像头列表为空时,获取图片列表
  // imageList.value = rep.data;
  // }
};

const loadImageList = async () => {
  // const resp = await axios.get(
  //   `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
  // ); // 摄像头列表为空时,获取图片列表
  // TODO:test
  const resp = await axios.get(
    `/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=b9e99f78-2f6e-4d1c-aea9-4364f4191d30&proId=${queryParams.query}`
  ); // 摄像头列表为空时,获取图片列表
  imageList.value = resp.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;
  overflow: scroll;
}
.naive-select-wrap {
  width: 750px;
  padding: 20px 20px 0px;
}
.naive-tabs {
  padding: 20px 20px 0;
}
.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;
}
.switch {
  width: 686px;
  height: 76px;
  background: #e4e4e4;
  border-radius: 8px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  .switch-item {
    width: 331px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    &.active {
      background-color: #fff;
    }
  }
}
.camera-list {
  //   margin-top: 108px;
  // padding: 0px 20px 0px;
}
.image-list {
  // padding: 0px 20px 0px;
  .image-item {
    margin-bottom: 20px;
    position: relative;
    .uplode-time {
      color: indianred;
      position: absolute;
      font-weight: bold;
      right: 20px;
      bottom: 20px;
      background-color: rgba(255, 255, 255, 0.4);
      // backdrop-filter: blur(14px) saturate(150%);
      border-radius: 999px;
      padding: 0px 10px;
    }
    // border-radius: 10px;
    // overflow: hidden;
    :deep(.n-image-item) {
      img {
        // width: 100%;
        width: 710px;
        height: 420px;
        object-fit: cover;
        border-radius: 10px;
      }
    }
    // img {
    // object-fit: cover;
    //   border-radius: 10px;
    //   height: 420px;
    //   width: 710px;
    // }
  }
}

#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>