flx:修改鄱湖美湾滚动加载
This commit is contained in:
parent
23de1bfb89
commit
f9417f5e85
@ -25,7 +25,7 @@ NODE_ENV = "production"
|
||||
# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
|
||||
# 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'
|
||||
# 中科佳成
|
||||
@ -47,7 +47,7 @@ NODE_ENV = "production"
|
||||
# 新能源智慧基建管理平台
|
||||
# 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='
|
||||
|
||||
|
||||
@ -17,6 +17,11 @@ export const getAlarmList = (params: {}) => {
|
||||
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: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/aiAnalyseHardWareAlarmRecord/countAiAnalyseHardWareAlarmTotal`, params, { headers: { noLoading: true } });
|
||||
|
||||
@ -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 = "syhy"; //沈阳合盈盘锦项目 (需要去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 = "ahsa"; // 安徽水安项目
|
||||
// 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 = "ztsyj"; // 中铁十一局
|
||||
// export const COMPANY: string = "xnyzhjj"; // 新能源智慧基建管理平台
|
||||
export const COMPANY: string = "gwkj"; // 国维科技
|
||||
// export const COMPANY: string = "gwkj"; // 国维科技
|
||||
|
||||
|
||||
|
||||
@ -24,13 +24,13 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/large",
|
||||
name: "大屏",
|
||||
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
|
||||
// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
|
||||
// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
|
||||
// component: () => import("@/views/locationLive/locationL.vue"), //人员定位大屏
|
||||
// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
|
||||
component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
|
||||
children: [
|
||||
{
|
||||
path: "/headNoise",
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
<div style="width: 10%">操作</div>
|
||||
</div>
|
||||
<el-scrollbar class="list-box">
|
||||
<div v-for="(item, index) in warnAlarmList" class="list-style" :key="item.id">
|
||||
<div class="warn_main" v-infinite-scroll="load">
|
||||
<div v-for="(item, index) in warnAlarmList" class="list-style" :key="item.id">
|
||||
<div style="width: 10%">{{ index + 1 }}</div>
|
||||
<div class="list-img" style="width: 20%">
|
||||
<div class="img-style">
|
||||
@ -46,6 +47,7 @@
|
||||
<img src="@/assets/images/noData.png" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,12 +95,14 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { ref, onMounted, computed, onBeforeUnmount } from "vue";
|
||||
import { getAlarmList, getAlarmTypeOption } from "@/api/modules/aIEarlyWarn";
|
||||
import { ref, onMounted, computed, onBeforeUnmount, reactive } from "vue";
|
||||
import { getAlarmList, getAlarmTypeOption, getAlarmPageList } from "@/api/modules/aIEarlyWarn";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { COMPANY } from "@/config/config";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
import noDataImage from "@/assets/images/vehicleManagement/car.png";
|
||||
import { ElMessage } from "element-plus";
|
||||
import dayjs from "dayjs";
|
||||
// import { aiAlarmTypeEnum } from "@/enums/project/aiAlarmTypeEnum";
|
||||
|
||||
let aiAlarmTypeEnum = ref([] as any);
|
||||
@ -195,14 +199,36 @@ function handleClick(event: any) {
|
||||
|
||||
let detailData = 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 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);
|
||||
if (res.result.length > 0) {
|
||||
warnAlarmList.value = res.result;
|
||||
mitts.emit("warnAlarmList", res.result[0]);
|
||||
detailData.value = res.result[0];
|
||||
if (res.result.records.length > 0) {
|
||||
warnAlarmList.value = warnAlarmList.value.concat(res.result.records);
|
||||
if(pageInfo.pageNo == 1){
|
||||
mitts.emit("warnAlarmList", res.result.records[0]);
|
||||
detailData.value = res.result.records[0];
|
||||
pageInfo.total = Number(res.result.total);
|
||||
}
|
||||
} else {
|
||||
warnAlarmList.value = [];
|
||||
detailData.value = {};
|
||||
@ -247,7 +273,7 @@ defineExpose({
|
||||
});
|
||||
onMounted(async () => {
|
||||
getWarnTypeOption();
|
||||
getWarnAlarmList();
|
||||
// getWarnAlarmList();
|
||||
});
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("warnAlarmList");
|
||||
@ -255,6 +281,9 @@ onBeforeUnmount(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warn_main {
|
||||
min-height: 300px;
|
||||
}
|
||||
.list-detail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
@ -44,7 +44,7 @@ const callChildFn = async () => {
|
||||
topRightRef.value.getWarnAlarmTotal()
|
||||
bottomLeftRef.value.getMemberCareList()
|
||||
bottomRightRef.value.getWarnTypeOption()
|
||||
bottomRightRef.value.getWarnAlarmList()
|
||||
// bottomRightRef.value.getWarnAlarmList()
|
||||
})
|
||||
// await topLeftRef.value.getMemberCareList()
|
||||
// await topCenterRef.value.getMemberCareList()
|
||||
|
||||
@ -2,16 +2,17 @@
|
||||
<div class="political-outlook">
|
||||
<div class="content">
|
||||
<div class="tab-list">
|
||||
<div style="width: 5%">序号</div>
|
||||
<div>安装位置</div>
|
||||
<div>设备名称</div>
|
||||
<div>设备编号</div>
|
||||
<div>设备状态</div>
|
||||
<div>警情状态</div>
|
||||
<div>报警时间</div>
|
||||
</div>
|
||||
<div style="width: 5%">序号</div>
|
||||
<div>安装位置</div>
|
||||
<div>设备名称</div>
|
||||
<div>设备编号</div>
|
||||
<div>设备状态</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 style="width: 5%">{{ index + 1 }}</div>
|
||||
<div>{{ item.location }}</div>
|
||||
@ -22,11 +23,12 @@
|
||||
<div>{{ item.alarmDetailStatus }}</div>
|
||||
<div>{{ item.alarmTime }}</div>
|
||||
</div>
|
||||
<div class="notData" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="notData" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -35,12 +37,13 @@
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { getSmokeDevAlarmPage } from "@/api/modules/securityManagement";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { ElMessage } from "element-plus";
|
||||
const store = GlobalStore();
|
||||
const props = defineProps(["type"])
|
||||
const props = defineProps(["type"]);
|
||||
const deviceStatusOptions = ref([
|
||||
{ label: "报警恢复", value: 0 },
|
||||
{ label: "报警", value: 1 },
|
||||
{ label: "心跳", value: 2 },
|
||||
{ label: "心跳", value: 2 }
|
||||
]) as any;
|
||||
const list = ref([] as any);
|
||||
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||||
@ -66,35 +69,50 @@ const getSmokeAlarmRecordList = async () => {
|
||||
|
||||
// 下拉加载
|
||||
const getMoreSmokeRecordList = async () => {
|
||||
const res: any = await getSmokeDevAlarmPage({ projectSn: store.sn, pageNo: pageNo.value, pageSize: pageSize.value, type: props.type });
|
||||
// console.log("下拉加载烟感监测告警监测记录列表", res);
|
||||
const res: any = await getSmokeDevAlarmPage({
|
||||
projectSn: store.sn,
|
||||
pageNo: pageNo.value,
|
||||
pageSize: pageSize.value,
|
||||
type: props.type
|
||||
});
|
||||
console.log("下拉加载烟感监测告警监测记录列表", res);
|
||||
list.value = list.value.concat(res.result.records);
|
||||
if (res.result.pages == pageNo.value) {
|
||||
moreScroll.value = false;
|
||||
} else {
|
||||
pageNo.value = pageNo.value + 1;
|
||||
}
|
||||
console.log("当前列表", list.value);
|
||||
// if (res.result.pages == pageNo.value) {
|
||||
// moreScroll.value = false;
|
||||
// } else {
|
||||
// pageNo.value = pageNo.value + 1;
|
||||
// }
|
||||
// console.log("当前列表", list.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(() => {
|
||||
// console.log("滚动容器", refScrollbar.value);
|
||||
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||||
// console.log("滚动容器", e);
|
||||
const scrollTop = e.target.scrollTop;
|
||||
const scrollHeight = e.target.scrollHeight;
|
||||
const clientHeight = e.target.clientHeight;
|
||||
// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
|
||||
// 向上加载更多
|
||||
if (scrollTop >= scrollHeight - clientHeight) {
|
||||
// console.log("加载更多");
|
||||
if (moreScroll.value) {
|
||||
getMoreSmokeRecordList();
|
||||
}
|
||||
}
|
||||
ScrollbarTop.value = scrollTop;
|
||||
});
|
||||
getSmokeAlarmRecordList();
|
||||
// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||||
// // console.log("滚动容器", e);
|
||||
// const scrollTop = e.target.scrollTop;
|
||||
// const scrollHeight = e.target.scrollHeight;
|
||||
// const clientHeight = e.target.clientHeight;
|
||||
// // console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
|
||||
// // 向上加载更多
|
||||
// if (scrollTop >= scrollHeight - clientHeight) {
|
||||
// // console.log("加载更多");
|
||||
// if (moreScroll.value) {
|
||||
// getMoreSmokeRecordList();
|
||||
// }
|
||||
// }
|
||||
// ScrollbarTop.value = scrollTop;
|
||||
// });
|
||||
// getSmokeAlarmRecordList();
|
||||
getMoreSmokeRecordList();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -23,87 +23,63 @@
|
||||
</div>
|
||||
<el-scrollbar class="listBox" ref="refScrollbar">
|
||||
<template v-if="vehicleData.length > 0">
|
||||
<div v-for="(item, index) in vehicleData" class="listStyle" :key="item.id">
|
||||
<div>
|
||||
<span>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.carNumber }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.passTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.type == 1 ? "出" : "进" }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.location }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.carColor }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.carType ? carTypeList[item.carType - 1].name : "" }}</span>
|
||||
</div>
|
||||
<div class="list-img">
|
||||
<el-image
|
||||
v-if="item.imageUrl"
|
||||
fit="contain"
|
||||
class="el-img"
|
||||
:src="BASEURL + '/image/' + item.imageUrl"
|
||||
:preview-src-list="[BASEURL + '/image/' + item.imageUrl]"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-image
|
||||
:src="noDataImage"
|
||||
:preview-src-list="[noDataImage]"
|
||||
fit="contain"
|
||||
class="el-img"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<!-- <img v-else src="@/assets/images/vehicleManagement/car.png" alt="" /> -->
|
||||
<el-image
|
||||
v-else
|
||||
:src="noDataImage"
|
||||
:preview-src-list="[noDataImage]"
|
||||
fit="contain"
|
||||
class="el-img"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div class="list-img">
|
||||
<el-image
|
||||
v-if="item.panoramaUrl"
|
||||
fit="contain"
|
||||
class="el-img"
|
||||
:src="BASEURL + '/image/' + item.panoramaUrl"
|
||||
:preview-src-list="[BASEURL + '/image/' + item.panoramaUrl]"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-image
|
||||
:src="noDataImage"
|
||||
:preview-src-list="[noDataImage]"
|
||||
fit="contain"
|
||||
class="el-img"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<!-- <img v-else src="@/assets/images/vehicleManagement/car.png" alt="" /> -->
|
||||
<el-image
|
||||
v-else
|
||||
:src="noDataImage"
|
||||
:preview-src-list="[noDataImage]"
|
||||
fit="contain"
|
||||
class="el-img"
|
||||
alt
|
||||
/>
|
||||
<div v-infinite-scroll="load">
|
||||
<div v-for="(item, index) in vehicleData" class="listStyle" :key="item.id">
|
||||
<div>
|
||||
<span>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.carNumber }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.passTime }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.type == 1 ? "出" : "进" }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.location }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.carColor }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.carType ? carTypeList[item.carType - 1].name : "" }}</span>
|
||||
</div>
|
||||
<div class="list-img">
|
||||
<el-image
|
||||
v-if="item.imageUrl"
|
||||
fit="contain"
|
||||
class="el-img"
|
||||
:src="BASEURL + '/image/' + item.imageUrl"
|
||||
:preview-src-list="[BASEURL + '/image/' + item.imageUrl]"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<!-- <img v-else src="@/assets/images/vehicleManagement/car.png" alt="" /> -->
|
||||
<el-image v-else :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
|
||||
</div>
|
||||
<div class="list-img">
|
||||
<el-image
|
||||
v-if="item.panoramaUrl"
|
||||
fit="contain"
|
||||
class="el-img"
|
||||
:src="BASEURL + '/image/' + item.panoramaUrl"
|
||||
:preview-src-list="[BASEURL + '/image/' + item.panoramaUrl]"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<!-- <img v-else src="@/assets/images/vehicleManagement/car.png" alt="" /> -->
|
||||
<el-image v-else :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-img" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -126,36 +102,38 @@
|
||||
</div>
|
||||
<el-scrollbar class="listBox" ref="refScrollbar">
|
||||
<template v-if="nametabledata.length > 0">
|
||||
<div v-for="(item, index) in nametabledata" class="listStyle" :key="item.id">
|
||||
<div>
|
||||
<span>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.carNumber }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.isExceed == 1 ? '是' : '否' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.currentSpeed }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.exceedingThreshold }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-image
|
||||
:src="BASEURL + '/image/' +item.snapshotImage"
|
||||
:preview-src-list="[BASEURL + '/image/' + item.snapshotImage]"
|
||||
:initial-index="0"
|
||||
fit="cover"
|
||||
style="width: 30px; height: 30px;"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div v-infinite-scroll="load">
|
||||
<div v-for="(item, index) in nametabledata" class="listStyle" :key="item.id">
|
||||
<div>
|
||||
<span>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.carNumber }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.isExceed == 1 ? "是" : "否" }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.currentSpeed }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.exceedingThreshold }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-image
|
||||
:src="BASEURL + '/image/' + item.snapshotImage"
|
||||
:preview-src-list="[BASEURL + '/image/' + item.snapshotImage]"
|
||||
:initial-index="0"
|
||||
fit="cover"
|
||||
style="width: 30px; height: 30px"
|
||||
>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -174,6 +152,7 @@ import { reactive, ref, onMounted } from "vue";
|
||||
import { getEntryAndExitListApi, carMeasureSpeedData } from "@/api/modules/vehicle";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import noDataImage from "@/assets/images/vehicleManagement/car.png";
|
||||
import { ElMessage } from "element-plus";
|
||||
const store = GlobalStore();
|
||||
const BASEURL = import.meta.env.VITE_API_URL;
|
||||
const pageNo = ref(1 as any);
|
||||
@ -206,16 +185,31 @@ const getDateData = (type: any) => {
|
||||
pageNo.value = 1;
|
||||
moreScroll.value = true;
|
||||
refScrollbar.value.wrapRef.scrollTop = 0; // 滚动条置顶
|
||||
vehicleData.value = [];
|
||||
getVehicleList("search");
|
||||
};
|
||||
// 车辆超速记录
|
||||
const getDateitem = (type: any) => {
|
||||
checked.value = type;
|
||||
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({
|
||||
projectSn: store.sn,
|
||||
timeType: checked.value,
|
||||
@ -223,16 +217,17 @@ const getVehicleList = async (tip: any) => {
|
||||
pageSize: pageSize.value
|
||||
});
|
||||
if (res.result) {
|
||||
if (tip == "more") {
|
||||
vehicleData.value = vehicleData.value.concat(res.result.records);
|
||||
} else {
|
||||
vehicleData.value = res.result.records;
|
||||
}
|
||||
if (res.result.pages == pageNo.value) {
|
||||
moreScroll.value = false;
|
||||
} else {
|
||||
pageNo.value = pageNo.value + 1;
|
||||
}
|
||||
vehicleData.value = vehicleData.value.concat(res.result.records);
|
||||
// if (tip == "more") {
|
||||
// vehicleData.value = vehicleData.value.concat(res.result.records);
|
||||
// } else {
|
||||
// vehicleData.value = res.result.records;
|
||||
// }
|
||||
// if (res.result.pages == pageNo.value) {
|
||||
// moreScroll.value = false;
|
||||
// } else {
|
||||
// pageNo.value = pageNo.value + 1;
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
@ -240,12 +235,14 @@ const getAndExitListApi = async () => {
|
||||
const res: any = await carMeasureSpeedData({
|
||||
// projectSn: store.sn,
|
||||
// timeType: checked.value,
|
||||
pageNo: 1,
|
||||
pageSize: 30
|
||||
// pageNo: 1,
|
||||
// pageSize: 30
|
||||
pageNo: pageNo.value,
|
||||
pageSize: pageSize.value
|
||||
});
|
||||
|
||||
console.log("测速-历史记录", res);
|
||||
nametabledata.value = res.result.records;
|
||||
nametabledata.value = nametabledata.value.concat(res.result.records);
|
||||
};
|
||||
|
||||
//将方法暴露给父组件
|
||||
@ -254,19 +251,19 @@ defineExpose({
|
||||
});
|
||||
onMounted(async () => {
|
||||
// console.log("滚动容器", refScrollbar.value);
|
||||
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||||
const scrollTop = e.target.scrollTop;
|
||||
const scrollHeight = e.target.scrollHeight;
|
||||
const clientHeight = e.target.clientHeight;
|
||||
// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
|
||||
// 向上加载更多
|
||||
if (scrollTop >= scrollHeight - clientHeight) {
|
||||
// console.log("加载更多");
|
||||
if (moreScroll.value) {
|
||||
getVehicleList("more");
|
||||
}
|
||||
}
|
||||
});
|
||||
// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||||
// const scrollTop = e.target.scrollTop;
|
||||
// const scrollHeight = e.target.scrollHeight;
|
||||
// const clientHeight = e.target.clientHeight;
|
||||
// // console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
|
||||
// // 向上加载更多
|
||||
// if (scrollTop >= scrollHeight - clientHeight) {
|
||||
// // console.log("加载更多");
|
||||
// if (moreScroll.value) {
|
||||
// getVehicleList("more");
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
await getVehicleList("search");
|
||||
await getAndExitListApi();
|
||||
});
|
||||
|
||||
@ -42,7 +42,7 @@ const callChildFn = async () => {
|
||||
topLeftRef.value.getBoxAlarmList()
|
||||
topRightRef.value.getExitList()
|
||||
bottomLeftRef.value.getMemberCareList()
|
||||
bottomRightRef.value.getVehicleList()
|
||||
// bottomRightRef.value.getVehicleList()
|
||||
})
|
||||
// await topLeftRef.value.getBoxAlarmList()
|
||||
// await topRightRef.value.getExitList()
|
||||
|
||||
@ -15,15 +15,12 @@
|
||||
}"
|
||||
node-key="id"
|
||||
@node-click="checkVideo"
|
||||
empty-text
|
||||
empty-text=""
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<img v-if="data.deviceType == 2 && data.videoId" src="@/assets/images/icon-video-blue.png" />
|
||||
<img
|
||||
v-else-if="data.deviceType != 2 && data.videoId"
|
||||
src="@/assets/images/icon-video-blue.png"
|
||||
/>
|
||||
<img v-else-if="data.deviceType != 2 && data.videoId" src="@/assets/images/icon-video-blue.png" />
|
||||
<span :title="data.name">{{ data.name }}</span>
|
||||
</span>
|
||||
</template>
|
||||
@ -41,10 +38,10 @@
|
||||
</div>
|
||||
<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div> -->
|
||||
</el-scrollbar>
|
||||
<div class="notoDta" v-if="shipinList.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt />
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</Card>
|
||||
@ -57,20 +54,16 @@
|
||||
<div class="safe-helmet">智能安全帽</div>
|
||||
</div>
|
||||
<!-- 萤石云播放 -->
|
||||
<div
|
||||
ref="playWndBox"
|
||||
style="width: 100%; height: 100%; margin: 0 5% 2% 5%"
|
||||
v-if="videoType === 1"
|
||||
>
|
||||
<div ref="playWndBox" style="width: 100%; height: 100%; margin: 0 5% 2% 5%" v-if="videoType === 1">
|
||||
<ysyPlayAndPlayback :ref="'ysy'" :ysyParams="ysyParams"></ysyPlayAndPlayback>
|
||||
</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>
|
||||
<!-- :style="{
|
||||
height: playWndHeight + 'px',
|
||||
width: playWndWidth + 'xp'
|
||||
}"-->
|
||||
}" -->
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
@ -153,14 +146,12 @@ let objData = ref({
|
||||
secret: "", //海康提供的secret
|
||||
port: 443,
|
||||
playMode: 0, // 0 预览 1回放
|
||||
layout: COMPANY == "ztsyj" ? "2x2" : "1x1" //页面展示的模块数【16】
|
||||
layout: "1x1" //页面展示的模块数【16】
|
||||
});
|
||||
|
||||
//设备列表的点击操作
|
||||
const checkVideo = async (item: any) => {
|
||||
// 避免点击父节点导致无法出现视频
|
||||
console.log("item", item);
|
||||
|
||||
if (item.serialNumber) {
|
||||
ysyParams.value = item;
|
||||
cameraIndexCode.value = item.serialNumber;
|
||||
@ -179,20 +170,13 @@ const getVideoList = async () => {
|
||||
// all=1查全部
|
||||
});
|
||||
shipinList.value = res.result.videoList;
|
||||
|
||||
if (res.result.videoList[0].list) {
|
||||
console.log("111");
|
||||
|
||||
if (!res.result.videoList[0].list[0]?.outip) {
|
||||
console.log("111-111");
|
||||
|
||||
objData.value.appkey = res.result.videoList[0].list[0].appId;
|
||||
objData.value.ip = res.result.videoList[0].list[0].account;
|
||||
objData.value.secret = res.result.videoList[0].list[0].appSecret;
|
||||
objData.value.port = +res.result.videoList[0].list[0].password;
|
||||
} else {
|
||||
console.log("111-222");
|
||||
|
||||
objData.value.appkey = res.result.videoList[0].list[0].appId;
|
||||
objData.value.ip = res.result.videoList[0].list[0].outip;
|
||||
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;
|
||||
// firstVideoId.value = res.result.videoList[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("视频列表", res);
|
||||
ysyParams.value = res.result.videoList[0].list[0];
|
||||
@ -219,42 +198,16 @@ const getVideoList = async () => {
|
||||
oWebControl.JS_Disconnect();
|
||||
}
|
||||
} else {
|
||||
console.log("222");
|
||||
|
||||
if (res.result.videoList[0]) {
|
||||
if (res.result.videoList[0].appId) {
|
||||
objData.value.appkey = res.result.videoList[0].appId;
|
||||
objData.value.ip = res.result.videoList[0].account;
|
||||
objData.value.secret = res.result.videoList[0].appSecret;
|
||||
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);
|
||||
}
|
||||
if (!res.result.videoList[0].list[0]?.outip) {
|
||||
objData.value.appkey = res.result.videoList[0].appId;
|
||||
objData.value.ip = res.result.videoList[0].account;
|
||||
objData.value.secret = res.result.videoList[0].appSecret;
|
||||
objData.value.port = +res.result.videoList[0].password;
|
||||
} else {
|
||||
objData.value.appkey = res.result.videoList[0].appId;
|
||||
objData.value.ip = res.result.videoList[0].outip;
|
||||
objData.value.secret = res.result.videoList[0].appSecret;
|
||||
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;
|
||||
@ -351,11 +304,11 @@ onMounted(async () => {
|
||||
const tagDomObj = document.querySelector(".videoPlayerBig .content");
|
||||
const htmlFontSize = getComputedStyle(window.document.documentElement)["font-size"];
|
||||
const htmlFontSizeNumber = +htmlFontSize.slice(0, htmlFontSize.indexOf("px"));
|
||||
console.log(htmlFontSizeNumber, tagDomObj?.clientWidth, tagDomObj?.clientHeight / 12);
|
||||
// playWndHeight.value = tagDomObj?.clientHeight / 1.2;
|
||||
// playWndWidth.value = tagDomObj?.clientWidth / 1.2;
|
||||
playWndHeight.value = tagDomObj?.clientHeight / 1.05;
|
||||
playWndWidth.value = tagDomObj?.clientWidth / 1.05;
|
||||
console.log(htmlFontSizeNumber,tagDomObj?.clientWidth, tagDomObj?.clientHeight / 12);
|
||||
playWndHeight.value = tagDomObj?.clientHeight / 1.2;
|
||||
playWndWidth.value = tagDomObj?.clientWidth / 1.2;
|
||||
// playWndHeight.value = tagDomObj?.clientHeight / 1.05;
|
||||
// playWndWidth.value = tagDomObj?.clientWidth / 1.05;
|
||||
console.log(playWndHeight.value, playWndWidth.value, tagDomObj?.offsetHeight, tagDomObj?.offsetWidth, tagDomObj);
|
||||
|
||||
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
@ -521,21 +474,6 @@ const init = (callback: (() => void) | undefined) => {
|
||||
}
|
||||
// 隐藏
|
||||
// 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 {
|
||||
background: none;
|
||||
// position: relative;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .h-card .title .titltText {
|
||||
margin-bottom: 0%;
|
||||
@ -687,8 +625,7 @@ const previewVideo = (data: string | null) => {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
right: -12%;
|
||||
// right: -15%;
|
||||
right: -15%;
|
||||
top: 1%;
|
||||
.safe-helmet {
|
||||
padding: 0 6%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user