377 lines
12 KiB
Vue
377 lines
12 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="naive-select-wrap">
|
|
<NConfigProvider :locale="zhCN">
|
|
<NSelect
|
|
v-model:value="queryParams.query"
|
|
:options="projectList"
|
|
label-field="PRONAME"
|
|
placeholder="请选择项目"
|
|
value-field="PROID"
|
|
@update:value="projectClicked"
|
|
/>
|
|
</NConfigProvider>
|
|
</div>
|
|
<div v-if="queryParams.query" class="naive-tabs">
|
|
<NTabs type="segment">
|
|
<NTabPane name="camera" tab="摄像头列表">
|
|
<!-- v-if="queryParams.query && activeIndex == 0" -->
|
|
<div ref="cameraListRef" class="camera-list">
|
|
<camera
|
|
v-for="(item, index) in cameraList"
|
|
:key="index"
|
|
:name="item.address"
|
|
:source="item.flvUrl"
|
|
></camera>
|
|
<div v-if="!cameraList.length" class="empty">
|
|
<img alt="" src="../assets/empty.png"/>
|
|
摄像头列表为空
|
|
</div>
|
|
</div>
|
|
</NTabPane>
|
|
<NTabPane name="image" tab="图片列表">
|
|
<!-- v-else-if="queryParams.query && activeIndex == 1" -->
|
|
<div class="image-list">
|
|
<div v-for="item in imageList" :key="item.PIC" class="image-item">
|
|
<!-- <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}`" -->
|
|
<!-- :src="`http://81.68.90.198:8088/portal/r/${item.PIC}`"-->
|
|
<NImage
|
|
:previewed-img-props="{
|
|
draggable: true,
|
|
style: { border: 'none' },
|
|
}"
|
|
:src="`${protocol}//${host}/portal/r/${item.PIC}`"
|
|
class="n-image-item"
|
|
></NImage>
|
|
<div class="uplode-time">{{ item.CREATEDATE }}</div>
|
|
</div>
|
|
<div v-if="!imageList.length" class="empty">
|
|
<img alt="" src="../assets/empty.png"/>
|
|
图片列表为空
|
|
</div>
|
|
</div>
|
|
</NTabPane>
|
|
</NTabs>
|
|
</div>
|
|
<div v-else class="empty">
|
|
<img alt="" src="../assets/empty.png"/>
|
|
请选择项目
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {reactive, ref} from "vue";
|
|
import axios from "axios";
|
|
import {NConfigProvider, NImage, NSelect, NTabPane, NTabs, zhCN,} from "naive-ui";
|
|
import Camera from "./CameraItem.vue";
|
|
|
|
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
|
|
// }
|
|
// }
|
|
const resp = await axios.get("./jd", {
|
|
params: queryParams,
|
|
});
|
|
cameraList.value = resp.data.rows;
|
|
total.value = resp.data.total;
|
|
cameraLoading.value = false;
|
|
};
|
|
|
|
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(
|
|
`./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&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;
|
|
});
|
|
</script>
|
|
<style>
|
|
/* body {
|
|
background-color: #f6f6f6;
|
|
} */
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.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>
|