bug fixed
This commit is contained in:
270
src/components/CameraList.vue
Normal file
270
src/components/CameraList.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user