flx:修改鄱湖美湾滚动加载

This commit is contained in:
X_Rian 2024-11-15 13:53:37 +08:00
parent 23de1bfb89
commit f9417f5e85
10 changed files with 263 additions and 277 deletions

View File

@ -25,7 +25,7 @@ NODE_ENV = "production"
# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境 # VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境 # VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
# 苏立信/重庆市南岸区 # 苏立信/重庆市南岸区
# VITE_API_URL = 'http://101.43.164.214:11111' VITE_API_URL = 'http://101.43.164.214:11111'
# 中科安信 # 中科安信
# VITE_API_URL = 'http://8.136.222.164:8808' # VITE_API_URL = 'http://8.136.222.164:8808'
# 中科佳成 # 中科佳成
@ -47,7 +47,7 @@ NODE_ENV = "production"
# 新能源智慧基建管理平台 # 新能源智慧基建管理平台
# VITE_API_URL = 'http://121.37.106.37:9820' # VITE_API_URL = 'http://121.37.106.37:9820'
# 国维科技 # 国维科技
VITE_API_URL = 'http://192.168.0.12:9820' # VITE_API_URL = 'http://192.168.0.12:9820'
# 打包 # 打包
VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url=' VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='

View File

@ -17,6 +17,11 @@ export const getAlarmList = (params: {}) => {
return http.post(BASEURL + `/xmgl/aiAnalyseHardWareAlarmRecord/selectAiAnalyseHardWareAlarmList`, params, { headers: { noLoading: true } }); return http.post(BASEURL + `/xmgl/aiAnalyseHardWareAlarmRecord/selectAiAnalyseHardWareAlarmList`, params, { headers: { noLoading: true } });
}; };
// 4.分页查询设备报警记录列表
export const getAlarmPageList = (params: {}) => {
return http.post(BASEURL + `/xmgl/aiAnalyseHardWareAlarmRecord/selectPageList`, params, { headers: { noLoading: true } });
};
// 查询当前实时数据 // 查询当前实时数据
export const getRealTimeTotal = (params: {}) => { export const getRealTimeTotal = (params: {}) => {
return http.post(BASEURL + `/xmgl/aiAnalyseHardWareAlarmRecord/countAiAnalyseHardWareAlarmTotal`, params, { headers: { noLoading: true } }); return http.post(BASEURL + `/xmgl/aiAnalyseHardWareAlarmRecord/countAiAnalyseHardWareAlarmTotal`, params, { headers: { noLoading: true } });

View File

@ -46,7 +46,7 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
// export const COMPANY: string = "jsyc"; // 江苏盐城项目 // export const COMPANY: string = "jsyc"; // 江苏盐城项目
// export const COMPANY: string = "syhy"; //沈阳合盈盘锦项目 (需要去src\routers\modules\staticRouter.ts更换首页) // export const COMPANY: string = "syhy"; //沈阳合盈盘锦项目 (需要去src\routers\modules\staticRouter.ts更换首页)
// export const COMPANY: string = "jxwjj"; //嘉兴王江泾公用码头项目 (需要去src\routers\modules\staticRouter.ts更换首页) // export const COMPANY: string = "jxwjj"; //嘉兴王江泾公用码头项目 (需要去src\routers\modules\staticRouter.ts更换首页)
// export const COMPANY: string = "phmw"; //鄱湖美湾医疗、医美产业集群项目 (需要去src\routers\modules\staticRouter.ts更换首页) export const COMPANY: string = "phmw"; //鄱湖美湾医疗、医美产业集群项目 (需要去src\routers\modules\staticRouter.ts更换首页)
// export const COMPANY: string = "xjnb"; // 新建宁波项目 // export const COMPANY: string = "xjnb"; // 新建宁波项目
// export const COMPANY: string = "ahsa"; // 安徽水安项目 // export const COMPANY: string = "ahsa"; // 安徽水安项目
// export const COMPANY: string = "zkax"; // 中科安信项目 // export const COMPANY: string = "zkax"; // 中科安信项目
@ -54,6 +54,6 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
// export const COMPANY: string = "whzt"; //武汉中铁 // export const COMPANY: string = "whzt"; //武汉中铁
// export const COMPANY: string = "ztsyj"; // 中铁十一局 // export const COMPANY: string = "ztsyj"; // 中铁十一局
// export const COMPANY: string = "xnyzhjj"; // 新能源智慧基建管理平台 // export const COMPANY: string = "xnyzhjj"; // 新能源智慧基建管理平台
export const COMPANY: string = "gwkj"; // 国维科技 // export const COMPANY: string = "gwkj"; // 国维科技

View File

@ -24,13 +24,13 @@ export const staticRouter: RouteRecordRaw[] = [
{ {
path: "/large", path: "/large",
name: "大屏", name: "大屏",
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版 // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏 // component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏 // component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏 // component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
// component: () => import("@/views/locationLive/locationL.vue"), //人员定位大屏 // component: () => import("@/views/locationLive/locationL.vue"), //人员定位大屏
// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏 // component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页) component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
children: [ children: [
{ {
path: "/headNoise", path: "/headNoise",

View File

@ -12,6 +12,7 @@
<div style="width: 10%">操作</div> <div style="width: 10%">操作</div>
</div> </div>
<el-scrollbar class="list-box"> <el-scrollbar class="list-box">
<div class="warn_main" v-infinite-scroll="load">
<div v-for="(item, index) in warnAlarmList" class="list-style" :key="item.id"> <div v-for="(item, index) in warnAlarmList" class="list-style" :key="item.id">
<div style="width: 10%">{{ index + 1 }}</div> <div style="width: 10%">{{ index + 1 }}</div>
<div class="list-img" style="width: 20%"> <div class="list-img" style="width: 20%">
@ -46,6 +47,7 @@
<img src="@/assets/images/noData.png" /> <img src="@/assets/images/noData.png" />
<p>暂无数据</p> <p>暂无数据</p>
</div> </div>
</div>
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
@ -93,12 +95,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { ref, onMounted, computed, onBeforeUnmount } from "vue"; import { ref, onMounted, computed, onBeforeUnmount, reactive } from "vue";
import { getAlarmList, getAlarmTypeOption } from "@/api/modules/aIEarlyWarn"; import { getAlarmList, getAlarmTypeOption, getAlarmPageList } from "@/api/modules/aIEarlyWarn";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { COMPANY } from "@/config/config"; import { COMPANY } from "@/config/config";
import mitts from "@/utils/bus"; // import mitts from "@/utils/bus"; //
import noDataImage from "@/assets/images/vehicleManagement/car.png"; import noDataImage from "@/assets/images/vehicleManagement/car.png";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
// import { aiAlarmTypeEnum } from "@/enums/project/aiAlarmTypeEnum"; // import { aiAlarmTypeEnum } from "@/enums/project/aiAlarmTypeEnum";
let aiAlarmTypeEnum = ref([] as any); let aiAlarmTypeEnum = ref([] as any);
@ -195,14 +199,36 @@ function handleClick(event: any) {
let detailData = ref({} as any); let detailData = ref({} as any);
let warnAlarmList = ref([] as any); let warnAlarmList = ref([] as any);
const pageInfo = reactive({
pageNo: 0,
pageSize: 10,
total: 0,
} as any);
const load = async () => {
console.log("加载", pageInfo.pageNo * pageInfo.pageSize, pageInfo.total);
if(pageInfo.pageNo > 0 && pageInfo.total == 0) return
if(pageInfo.pageNo * pageInfo.pageSize > pageInfo.total) return ElMessage.warning("到底部了!");
pageInfo.pageNo += 1;
await getWarnAlarmList();
}
// //
const getWarnAlarmList = async () => { const getWarnAlarmList = async () => {
const res: any = await getAlarmList({ projectSn: store.sn, selectType: 3 }); const res: any = await getAlarmPageList({
projectSn: store.sn,
selectType: 3,
pageNo: pageInfo.pageNo,
pageSize: pageInfo.pageSize,
startTime: dayjs().format("YYYY-MM-DD") + " 00:00:00",
endTime: dayjs().format("YYYY-MM-DD") + " 23:59:59",
});
console.log("获取告警列表", res); console.log("获取告警列表", res);
if (res.result.length > 0) { if (res.result.records.length > 0) {
warnAlarmList.value = res.result; warnAlarmList.value = warnAlarmList.value.concat(res.result.records);
mitts.emit("warnAlarmList", res.result[0]); if(pageInfo.pageNo == 1){
detailData.value = res.result[0]; mitts.emit("warnAlarmList", res.result.records[0]);
detailData.value = res.result.records[0];
pageInfo.total = Number(res.result.total);
}
} else { } else {
warnAlarmList.value = []; warnAlarmList.value = [];
detailData.value = {}; detailData.value = {};
@ -247,7 +273,7 @@ defineExpose({
}); });
onMounted(async () => { onMounted(async () => {
getWarnTypeOption(); getWarnTypeOption();
getWarnAlarmList(); // getWarnAlarmList();
}); });
onBeforeUnmount(async () => { onBeforeUnmount(async () => {
mitts.off("warnAlarmList"); mitts.off("warnAlarmList");
@ -255,6 +281,9 @@ onBeforeUnmount(async () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warn_main {
min-height: 300px;
}
.list-detail { .list-detail {
position: absolute; position: absolute;
width: 100%; width: 100%;

View File

@ -44,7 +44,7 @@ const callChildFn = async () => {
topRightRef.value.getWarnAlarmTotal() topRightRef.value.getWarnAlarmTotal()
bottomLeftRef.value.getMemberCareList() bottomLeftRef.value.getMemberCareList()
bottomRightRef.value.getWarnTypeOption() bottomRightRef.value.getWarnTypeOption()
bottomRightRef.value.getWarnAlarmList() // bottomRightRef.value.getWarnAlarmList()
}) })
// await topLeftRef.value.getMemberCareList() // await topLeftRef.value.getMemberCareList()
// await topCenterRef.value.getMemberCareList() // await topCenterRef.value.getMemberCareList()

View File

@ -11,7 +11,8 @@
<div>报警时间</div> <div>报警时间</div>
</div> </div>
<el-scrollbar class="list-box" ref="refScrollbar"> <el-scrollbar ref="refScrollbar">
<div class="list-box" v-infinite-scroll="load" :infinite-scroll-immediate="false">
<div v-for="(item, index) in list" class="listStyle" :key="item.id"> <div v-for="(item, index) in list" class="listStyle" :key="item.id">
<div style="width: 5%">{{ index + 1 }}</div> <div style="width: 5%">{{ index + 1 }}</div>
<div>{{ item.location }}</div> <div>{{ item.location }}</div>
@ -22,6 +23,7 @@
<div>{{ item.alarmDetailStatus }}</div> <div>{{ item.alarmDetailStatus }}</div>
<div>{{ item.alarmTime }}</div> <div>{{ item.alarmTime }}</div>
</div> </div>
</div>
<div class="notData" v-if="list.length == 0"> <div class="notData" v-if="list.length == 0">
<img src="@/assets/images/noData.png" alt="" /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
@ -35,12 +37,13 @@
import { reactive, ref, onMounted } from "vue"; import { reactive, ref, onMounted } from "vue";
import { getSmokeDevAlarmPage } from "@/api/modules/securityManagement"; import { getSmokeDevAlarmPage } from "@/api/modules/securityManagement";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { ElMessage } from "element-plus";
const store = GlobalStore(); const store = GlobalStore();
const props = defineProps(["type"]) const props = defineProps(["type"]);
const deviceStatusOptions = ref([ const deviceStatusOptions = ref([
{ label: "报警恢复", value: 0 }, { label: "报警恢复", value: 0 },
{ label: "报警", value: 1 }, { label: "报警", value: 1 },
{ label: "心跳", value: 2 }, { label: "心跳", value: 2 }
]) as any; ]) as any;
const list = ref([] as any); const list = ref([] as any);
const refScrollbar = ref(null as any); // const refScrollbar = ref(null as any); //
@ -66,35 +69,50 @@ const getSmokeAlarmRecordList = async () => {
// //
const getMoreSmokeRecordList = async () => { const getMoreSmokeRecordList = async () => {
const res: any = await getSmokeDevAlarmPage({ projectSn: store.sn, pageNo: pageNo.value, pageSize: pageSize.value, type: props.type }); const res: any = await getSmokeDevAlarmPage({
// console.log("", res); projectSn: store.sn,
pageNo: pageNo.value,
pageSize: pageSize.value,
type: props.type
});
console.log("下拉加载烟感监测告警监测记录列表", res);
list.value = list.value.concat(res.result.records); list.value = list.value.concat(res.result.records);
if (res.result.pages == pageNo.value) { console.log("当前列表", list.value);
moreScroll.value = false; // if (res.result.pages == pageNo.value) {
} else { // moreScroll.value = false;
pageNo.value = pageNo.value + 1; // } else {
} // pageNo.value = pageNo.value + 1;
// }
// console.log("", list.value); // console.log("", list.value);
// console.log("", pageNo.value); // console.log("", pageNo.value);
}; };
const load = async () => {
console.log("加载", pageNo.value * pageSize.value);
if (pageNo.value > 1 && list.value.length == 0) return;
if (pageNo.value * pageSize.value > list.value.length) return ElMessage.warning("到底部了!");
pageNo.value += 1;
await getMoreSmokeRecordList();
};
onMounted(() => { onMounted(() => {
// console.log("", refScrollbar.value); // console.log("", refScrollbar.value);
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => { // refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
// console.log("", e); // // console.log("", e);
const scrollTop = e.target.scrollTop; // const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.scrollHeight; // const scrollHeight = e.target.scrollHeight;
const clientHeight = e.target.clientHeight; // const clientHeight = e.target.clientHeight;
// console.log("", scrollTop, scrollHeight, clientHeight); // // console.log("", scrollTop, scrollHeight, clientHeight);
// // //
if (scrollTop >= scrollHeight - clientHeight) { // if (scrollTop >= scrollHeight - clientHeight) {
// console.log(""); // // console.log("");
if (moreScroll.value) { // if (moreScroll.value) {
// getMoreSmokeRecordList();
// }
// }
// ScrollbarTop.value = scrollTop;
// });
// getSmokeAlarmRecordList();
getMoreSmokeRecordList(); getMoreSmokeRecordList();
}
}
ScrollbarTop.value = scrollTop;
});
getSmokeAlarmRecordList();
}); });
</script> </script>

View File

@ -23,6 +23,7 @@
</div> </div>
<el-scrollbar class="listBox" ref="refScrollbar"> <el-scrollbar class="listBox" ref="refScrollbar">
<template v-if="vehicleData.length > 0"> <template v-if="vehicleData.length > 0">
<div v-infinite-scroll="load">
<div v-for="(item, index) in vehicleData" class="listStyle" :key="item.id"> <div v-for="(item, index) in vehicleData" class="listStyle" :key="item.id">
<div> <div>
<span>{{ index + 1 }}</span> <span>{{ index + 1 }}</span>
@ -55,25 +56,12 @@
> >
<template #error> <template #error>
<div class="image-slot"> <div class="image-slot">
<el-image <el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
:src="noDataImage"
:preview-src-list="[noDataImage]"
fit="contain"
class="el-img"
alt
/>
</div> </div>
</template> </template>
</el-image> </el-image>
<!-- <img v-else src="@/assets/images/vehicleManagement/car.png" alt="" /> --> <!-- <img v-else src="@/assets/images/vehicleManagement/car.png" alt="" /> -->
<el-image <el-image v-else :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
v-else
:src="noDataImage"
:preview-src-list="[noDataImage]"
fit="contain"
class="el-img"
alt
/>
</div> </div>
<div class="list-img"> <div class="list-img">
<el-image <el-image
@ -85,25 +73,13 @@
> >
<template #error> <template #error>
<div class="image-slot"> <div class="image-slot">
<el-image <el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
:src="noDataImage"
:preview-src-list="[noDataImage]"
fit="contain"
class="el-img"
alt
/>
</div> </div>
</template> </template>
</el-image> </el-image>
<!-- <img v-else src="@/assets/images/vehicleManagement/car.png" alt="" /> --> <!-- <img v-else src="@/assets/images/vehicleManagement/car.png" alt="" /> -->
<el-image <el-image v-else :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
v-else </div>
:src="noDataImage"
:preview-src-list="[noDataImage]"
fit="contain"
class="el-img"
alt
/>
</div> </div>
</div> </div>
</template> </template>
@ -126,6 +102,7 @@
</div> </div>
<el-scrollbar class="listBox" ref="refScrollbar"> <el-scrollbar class="listBox" ref="refScrollbar">
<template v-if="nametabledata.length > 0"> <template v-if="nametabledata.length > 0">
<div v-infinite-scroll="load">
<div v-for="(item, index) in nametabledata" class="listStyle" :key="item.id"> <div v-for="(item, index) in nametabledata" class="listStyle" :key="item.id">
<div> <div>
<span>{{ index + 1 }}</span> <span>{{ index + 1 }}</span>
@ -134,7 +111,7 @@
<span>{{ item.carNumber }}</span> <span>{{ item.carNumber }}</span>
</div> </div>
<div> <div>
<span>{{ item.isExceed == 1 ? '是' : '否' }}</span> <span>{{ item.isExceed == 1 ? "是" : "否" }}</span>
</div> </div>
<div> <div>
<span>{{ item.currentSpeed }}</span> <span>{{ item.currentSpeed }}</span>
@ -144,11 +121,11 @@
</div> </div>
<div> <div>
<el-image <el-image
:src="BASEURL + '/image/' +item.snapshotImage" :src="BASEURL + '/image/' + item.snapshotImage"
:preview-src-list="[BASEURL + '/image/' + item.snapshotImage]" :preview-src-list="[BASEURL + '/image/' + item.snapshotImage]"
:initial-index="0" :initial-index="0"
fit="cover" fit="cover"
style="width: 30px; height: 30px;" style="width: 30px; height: 30px"
> >
<template #error> <template #error>
<div class="image-slot"> <div class="image-slot">
@ -158,6 +135,7 @@
</el-image> </el-image>
</div> </div>
</div> </div>
</div>
</template> </template>
<div class="notoDta" v-if="nametabledata.length == 0"> <div class="notoDta" v-if="nametabledata.length == 0">
<img src="@/assets/images/noData.png" alt /> <img src="@/assets/images/noData.png" alt />
@ -174,6 +152,7 @@ import { reactive, ref, onMounted } from "vue";
import { getEntryAndExitListApi, carMeasureSpeedData } from "@/api/modules/vehicle"; import { getEntryAndExitListApi, carMeasureSpeedData } from "@/api/modules/vehicle";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import noDataImage from "@/assets/images/vehicleManagement/car.png"; import noDataImage from "@/assets/images/vehicleManagement/car.png";
import { ElMessage } from "element-plus";
const store = GlobalStore(); const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL; const BASEURL = import.meta.env.VITE_API_URL;
const pageNo = ref(1 as any); const pageNo = ref(1 as any);
@ -206,16 +185,31 @@ const getDateData = (type: any) => {
pageNo.value = 1; pageNo.value = 1;
moreScroll.value = true; moreScroll.value = true;
refScrollbar.value.wrapRef.scrollTop = 0; // refScrollbar.value.wrapRef.scrollTop = 0; //
vehicleData.value = [];
getVehicleList("search"); getVehicleList("search");
}; };
// //
const getDateitem = (type: any) => { const getDateitem = (type: any) => {
checked.value = type; checked.value = type;
pageNo.value = 1; pageNo.value = 1;
vehicleData.value = [];
getAndExitListApi();
}; };
const load = async () => {
console.log("加载", pageNo.value * pageSize.value);
if(pageNo.value > 1 && vehicleData.value.length == 0) return
if(pageNo.value * pageSize.value > vehicleData.value.length) return ElMessage.warning("到底部了!");
if(checked.value == 1 || checked.value == 2){
getVehicleList();
} else {
getAndExitListApi();
}
pageNo.value += 1;
}
// //
const getVehicleList = async (tip: any) => { const getVehicleList = async (tip?: any) => {
const res: any = await getEntryAndExitListApi({ const res: any = await getEntryAndExitListApi({
projectSn: store.sn, projectSn: store.sn,
timeType: checked.value, timeType: checked.value,
@ -223,16 +217,17 @@ const getVehicleList = async (tip: any) => {
pageSize: pageSize.value pageSize: pageSize.value
}); });
if (res.result) { if (res.result) {
if (tip == "more") {
vehicleData.value = vehicleData.value.concat(res.result.records); vehicleData.value = vehicleData.value.concat(res.result.records);
} else { // if (tip == "more") {
vehicleData.value = res.result.records; // vehicleData.value = vehicleData.value.concat(res.result.records);
} // } else {
if (res.result.pages == pageNo.value) { // vehicleData.value = res.result.records;
moreScroll.value = false; // }
} else { // if (res.result.pages == pageNo.value) {
pageNo.value = pageNo.value + 1; // moreScroll.value = false;
} // } else {
// pageNo.value = pageNo.value + 1;
// }
} }
}; };
@ -240,12 +235,14 @@ const getAndExitListApi = async () => {
const res: any = await carMeasureSpeedData({ const res: any = await carMeasureSpeedData({
// projectSn: store.sn, // projectSn: store.sn,
// timeType: checked.value, // timeType: checked.value,
pageNo: 1, // pageNo: 1,
pageSize: 30 // pageSize: 30
pageNo: pageNo.value,
pageSize: pageSize.value
}); });
console.log("测速-历史记录", res); console.log("测速-历史记录", res);
nametabledata.value = res.result.records; nametabledata.value = nametabledata.value.concat(res.result.records);
}; };
// //
@ -254,19 +251,19 @@ defineExpose({
}); });
onMounted(async () => { onMounted(async () => {
// console.log("", refScrollbar.value); // console.log("", refScrollbar.value);
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => { // refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
const scrollTop = e.target.scrollTop; // const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.scrollHeight; // const scrollHeight = e.target.scrollHeight;
const clientHeight = e.target.clientHeight; // const clientHeight = e.target.clientHeight;
// console.log("", scrollTop, scrollHeight, clientHeight); // // console.log("", scrollTop, scrollHeight, clientHeight);
// // //
if (scrollTop >= scrollHeight - clientHeight) { // if (scrollTop >= scrollHeight - clientHeight) {
// console.log(""); // // console.log("");
if (moreScroll.value) { // if (moreScroll.value) {
getVehicleList("more"); // getVehicleList("more");
} // }
} // }
}); // });
await getVehicleList("search"); await getVehicleList("search");
await getAndExitListApi(); await getAndExitListApi();
}); });

View File

@ -42,7 +42,7 @@ const callChildFn = async () => {
topLeftRef.value.getBoxAlarmList() topLeftRef.value.getBoxAlarmList()
topRightRef.value.getExitList() topRightRef.value.getExitList()
bottomLeftRef.value.getMemberCareList() bottomLeftRef.value.getMemberCareList()
bottomRightRef.value.getVehicleList() // bottomRightRef.value.getVehicleList()
}) })
// await topLeftRef.value.getBoxAlarmList() // await topLeftRef.value.getBoxAlarmList()
// await topRightRef.value.getExitList() // await topRightRef.value.getExitList()

View File

@ -15,15 +15,12 @@
}" }"
node-key="id" node-key="id"
@node-click="checkVideo" @node-click="checkVideo"
empty-text empty-text=""
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<img v-if="data.deviceType == 2 && data.videoId" src="@/assets/images/icon-video-blue.png" /> <img v-if="data.deviceType == 2 && data.videoId" src="@/assets/images/icon-video-blue.png" />
<img <img v-else-if="data.deviceType != 2 && data.videoId" src="@/assets/images/icon-video-blue.png" />
v-else-if="data.deviceType != 2 && data.videoId"
src="@/assets/images/icon-video-blue.png"
/>
<span :title="data.name">{{ data.name }}</span> <span :title="data.name">{{ data.name }}</span>
</span> </span>
</template> </template>
@ -41,10 +38,10 @@
</div> </div>
<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div> <div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
</div> </div>
</div>--> </div> -->
</el-scrollbar> </el-scrollbar>
<div class="notoDta" v-if="shipinList.length == 0"> <div class="notoDta" v-if="shipinList.length == 0">
<img src="@/assets/images/noData.png" alt /> <img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p> <p>暂无数据</p>
</div> </div>
</Card> </Card>
@ -57,20 +54,16 @@
<div class="safe-helmet">智能安全帽</div> <div class="safe-helmet">智能安全帽</div>
</div> </div>
<!-- 萤石云播放 --> <!-- 萤石云播放 -->
<div <div ref="playWndBox" style="width: 100%; height: 100%; margin: 0 5% 2% 5%" v-if="videoType === 1">
ref="playWndBox"
style="width: 100%; height: 100%; margin: 0 5% 2% 5%"
v-if="videoType === 1"
>
<ysyPlayAndPlayback :ref="'ysy'" :ysyParams="ysyParams"></ysyPlayAndPlayback> <ysyPlayAndPlayback :ref="'ysy'" :ysyParams="ysyParams"></ysyPlayAndPlayback>
</div> </div>
<!-- 播放海康 --> <!-- 播放海康 -->
<div ref="playWndBox" style="width: 100%; height: 100%; margin: 0 2% 0% 1%"> <div ref="playWndBox" style="width: 100%; height: 100%; margin: 0 2% 0% 1%" >
<div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div> <div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div>
<!-- :style="{ <!-- :style="{
height: playWndHeight + 'px', height: playWndHeight + 'px',
width: playWndWidth + 'xp' width: playWndWidth + 'xp'
}"--> }" -->
</div> </div>
</Card> </Card>
</div> </div>
@ -153,14 +146,12 @@ let objData = ref({
secret: "", //secret secret: "", //secret
port: 443, port: 443,
playMode: 0, // 0 1 playMode: 0, // 0 1
layout: COMPANY == "ztsyj" ? "2x2" : "1x1" //16 layout: "1x1" //16
}); });
// //
const checkVideo = async (item: any) => { const checkVideo = async (item: any) => {
// //
console.log("item", item);
if (item.serialNumber) { if (item.serialNumber) {
ysyParams.value = item; ysyParams.value = item;
cameraIndexCode.value = item.serialNumber; cameraIndexCode.value = item.serialNumber;
@ -179,20 +170,13 @@ const getVideoList = async () => {
// all=1 // all=1
}); });
shipinList.value = res.result.videoList; shipinList.value = res.result.videoList;
if (res.result.videoList[0].list) { if (res.result.videoList[0].list) {
console.log("111");
if (!res.result.videoList[0].list[0]?.outip) { if (!res.result.videoList[0].list[0]?.outip) {
console.log("111-111");
objData.value.appkey = res.result.videoList[0].list[0].appId; objData.value.appkey = res.result.videoList[0].list[0].appId;
objData.value.ip = res.result.videoList[0].list[0].account; objData.value.ip = res.result.videoList[0].list[0].account;
objData.value.secret = res.result.videoList[0].list[0].appSecret; objData.value.secret = res.result.videoList[0].list[0].appSecret;
objData.value.port = +res.result.videoList[0].list[0].password; objData.value.port = +res.result.videoList[0].list[0].password;
} else { } else {
console.log("111-222");
objData.value.appkey = res.result.videoList[0].list[0].appId; objData.value.appkey = res.result.videoList[0].list[0].appId;
objData.value.ip = res.result.videoList[0].list[0].outip; objData.value.ip = res.result.videoList[0].list[0].outip;
objData.value.secret = res.result.videoList[0].list[0].appSecret; objData.value.secret = res.result.videoList[0].list[0].appSecret;
@ -202,11 +186,6 @@ const getVideoList = async () => {
cameraIndexCode.value = res.result.videoList[0].list[0].serialNumber; cameraIndexCode.value = res.result.videoList[0].list[0].serialNumber;
// firstVideoId.value = res.result.videoList[0].serialNumber; // firstVideoId.value = res.result.videoList[0].serialNumber;
// previewVideo(res.result.videoList[0].list[0].serialNumber); // previewVideo(res.result.videoList[0].list[0].serialNumber);
console.log("res.result.videoList[0].list[0].outport", res.result.videoList[0].list[0].appId);
console.log("res.result.videoList[0].list[0].outport", res.result.videoList[0].list[0].outip);
console.log("res.result.videoList[0].list[0].outport", res.result.videoList[0].list[0].outport);
console.log("res.result.videoList[0].list[0].outport", res.result.videoList[0].list[0].outport);
console.log(objData.value); console.log(objData.value);
console.log("视频列表", res); console.log("视频列表", res);
ysyParams.value = res.result.videoList[0].list[0]; ysyParams.value = res.result.videoList[0].list[0];
@ -219,42 +198,16 @@ const getVideoList = async () => {
oWebControl.JS_Disconnect(); oWebControl.JS_Disconnect();
} }
} else { } else {
console.log("222"); if (!res.result.videoList[0].list[0]?.outip) {
if (res.result.videoList[0]) {
if (res.result.videoList[0].appId) {
objData.value.appkey = res.result.videoList[0].appId; objData.value.appkey = res.result.videoList[0].appId;
objData.value.ip = res.result.videoList[0].account; objData.value.ip = res.result.videoList[0].account;
objData.value.secret = res.result.videoList[0].appSecret; objData.value.secret = res.result.videoList[0].appSecret;
objData.value.port = +res.result.videoList[0].password; objData.value.port = +res.result.videoList[0].password;
console.log("222-111");
console.log("res.result.videoList[0].appId", res.result.videoList[0].appId);
console.log("res.result.videoList[0].appId", res.result.videoList[0].account);
console.log("res.result.videoList[0].appId", res.result.videoList[0].appSecret);
console.log("res.result.videoList[0].appId", +res.result.videoList[0].password);
} else {
console.log("222-111 - 没有list");
objData.value.appkey = res.result.videoList[1].list[0].appId || res.result.videoList[2].list[0].appId;
objData.value.ip = res.result.videoList[1].list[0].account || res.result.videoList[2].list[0].account;
objData.value.secret = res.result.videoList[1].list[0].appSecret || res.result.videoList[2].list[0].appSecret;
objData.value.port = +res.result.videoList[1].list[0].password || +res.result.videoList[2].list[0].password;
console.log("res.result.videoList[0].appId", res.result.videoList[1].list[0].appId);
console.log("res.result.videoList[0].appId", res.result.videoList[1].list[0].account);
console.log("res.result.videoList[0].appId", res.result.videoList[1].list[0].appSecret);
console.log("res.result.videoList[0].appId", +res.result.videoList[1].list[0].password);
}
} else { } else {
objData.value.appkey = res.result.videoList[0].appId; objData.value.appkey = res.result.videoList[0].appId;
objData.value.ip = res.result.videoList[0].outip; objData.value.ip = res.result.videoList[0].outip;
objData.value.secret = res.result.videoList[0].appSecret; objData.value.secret = res.result.videoList[0].appSecret;
objData.value.port = +res.result.videoList[0].outport; objData.value.port = +res.result.videoList[0].outport;
console.log("222-222");
console.log("res.result.videoList[0].list[0].outport", res.result.videoList[0].list[0].appId);
console.log("res.result.videoList[0].list[0].outport", res.result.videoList[0].list[0].outip);
console.log("res.result.videoList[0].list[0].outport", res.result.videoList[0].list[0].outport);
console.log("res.result.videoList[0].list[0].outport", res.result.videoList[0].list[0].outport);
} }
cameraIndexCode.value = res.result.videoList[0].serialNumber; cameraIndexCode.value = res.result.videoList[0].serialNumber;
@ -351,11 +304,11 @@ onMounted(async () => {
const tagDomObj = document.querySelector(".videoPlayerBig .content"); const tagDomObj = document.querySelector(".videoPlayerBig .content");
const htmlFontSize = getComputedStyle(window.document.documentElement)["font-size"]; const htmlFontSize = getComputedStyle(window.document.documentElement)["font-size"];
const htmlFontSizeNumber = +htmlFontSize.slice(0, htmlFontSize.indexOf("px")); const htmlFontSizeNumber = +htmlFontSize.slice(0, htmlFontSize.indexOf("px"));
console.log(htmlFontSizeNumber, tagDomObj?.clientWidth, tagDomObj?.clientHeight / 12); console.log(htmlFontSizeNumber,tagDomObj?.clientWidth, tagDomObj?.clientHeight / 12);
// playWndHeight.value = tagDomObj?.clientHeight / 1.2; playWndHeight.value = tagDomObj?.clientHeight / 1.2;
// playWndWidth.value = tagDomObj?.clientWidth / 1.2; playWndWidth.value = tagDomObj?.clientWidth / 1.2;
playWndHeight.value = tagDomObj?.clientHeight / 1.05; // playWndHeight.value = tagDomObj?.clientHeight / 1.05;
playWndWidth.value = tagDomObj?.clientWidth / 1.05; // playWndWidth.value = tagDomObj?.clientWidth / 1.05;
console.log(playWndHeight.value, playWndWidth.value, tagDomObj?.offsetHeight, tagDomObj?.offsetWidth, tagDomObj); console.log(playWndHeight.value, playWndWidth.value, tagDomObj?.offsetHeight, tagDomObj?.offsetWidth, tagDomObj);
// scroll使DIV // scroll使DIV
@ -521,21 +474,6 @@ const init = (callback: (() => void) | undefined) => {
} }
// //
// oWebControl.JS_HideWnd() // oWebControl.JS_HideWnd()
if (COMPANY == "ztsyj") {
console.log("中铁十一局加载成功-视频=====================");
const data = [
"9641071c9d84456d985a6ad04b4bbae3",
"b8bfc814164a4d1ea9bb1c61eb7b524e",
"cc023538969e4f92bf61a1a7ec90c5d6",
"13be2f0d69264dd3978a9cb084ad136b"
];
data.forEach(item => {
previewVideo(item);
});
}
}); });
}); });
}; };
@ -672,7 +610,7 @@ const previewVideo = (data: string | null) => {
} }
::v-deep .h-card .content { ::v-deep .h-card .content {
background: none; background: none;
// position: relative; position: relative;
} }
::v-deep .h-card .title .titltText { ::v-deep .h-card .title .titltText {
margin-bottom: 0%; margin-bottom: 0%;
@ -687,8 +625,7 @@ const previewVideo = (data: string | null) => {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
right: -12%; right: -15%;
// right: -15%;
top: 1%; top: 1%;
.safe-helmet { .safe-helmet {
padding: 0 6%; padding: 0 6%;