feat: 对AI警报弹窗页面添加功能以及BUG修改
This commit is contained in:
kun
parent
0031b96c64
commit
24c8809090
@ -4,7 +4,7 @@ NODE_ENV = 'development'
|
||||
# 本地环境接口地址(/api/index.ts文件中使用)
|
||||
# 后端本地
|
||||
# VITE_API_URL = 'http://192.168.34.155:19111'
|
||||
# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
|
||||
VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
|
||||
# VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
|
||||
# VITE_API_URL = 'http://192.168.34.221:28889'
|
||||
# VITE_API_URL = 'http://121.196.214.246/api'
|
||||
@ -25,7 +25,7 @@ NODE_ENV = 'development'
|
||||
# 七参数标准版(演示平台)
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||
# agjt
|
||||
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://jxj.zhgdyun.com:19812'
|
||||
# 苏立信/重庆市南岸区
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
<div class="classify-div-item" @click="openDialogData({ index: 99, title: '质量管理' })">
|
||||
<span style="font-size: 12px">质量管理 {{ statsDirectorateBigScreen.qualityInspectionRecordNum }}</span>
|
||||
</div>
|
||||
<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报' })">
|
||||
<div class="classify-div-item" @click="openDialogData({ index: 6, title: 'AI警报', type: 4 })">
|
||||
<span style="font-size: 12px">AI警报 {{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="political-outlook">
|
||||
<div class="content">
|
||||
<!-- v-show="topDangerList.length > 0" -->
|
||||
<div class="top-statistics" v-show="topDangerList.length > 0">
|
||||
<div class="top-statistics-left">
|
||||
<div class="top-statistics">
|
||||
<div class="top-statistics-left" v-show="topDangerList.length > 0">
|
||||
<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar">
|
||||
<div
|
||||
class="statistics-item"
|
||||
@ -21,17 +21,16 @@
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<!-- <div class="top-statistics-right">
|
||||
<div>sss</div>
|
||||
播放海康
|
||||
<div ref="playWndBox" style="width: 96%; height: 100%;">
|
||||
<div class="top-statistics-right">
|
||||
<!-- 播放海康 -->
|
||||
<div ref="playWndBox" style="width: 85%; height: 88%;">
|
||||
<div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div>
|
||||
:style="{
|
||||
<!-- :style="{
|
||||
height: playWndHeight + 'px',
|
||||
width: playWndWidth + 'px'
|
||||
}"
|
||||
}" -->
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative; height: 180px" v-if="topDangerList.length == 0">
|
||||
<div class="notoDta">
|
||||
@ -42,11 +41,20 @@
|
||||
<div class="top-search">
|
||||
<div class="search-item">
|
||||
<span>设备名称</span>
|
||||
<el-input style="width: 150px;" size="small" v-model="searchForm.hardwareName" placeholder="请输入内容" @input="conditionSearch"></el-input>
|
||||
<el-input style="width: 150px;" size="small" v-model="searchForm.hardwareName" placeholder="请输入内容" clearable></el-input>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<span>不安全行为类型</span>
|
||||
<el-input style="width: 150px;" size="small" v-model="searchForm.alarmTypeName" placeholder="请输入内容" @input="conditionSearch"></el-input>
|
||||
<el-select
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
v-model="searchForm.alarmType"
|
||||
:clearable="true"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option v-for="(item, index) in aiAlarmTypeEnum" :key="index" :label="item.value" :value="item.id" />
|
||||
</el-select>
|
||||
<!-- <el-input style="width: 150px;" size="small" v-model="searchForm.alarmTypeName" placeholder="请输入内容"></el-input> -->
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<span>警告时间</span>
|
||||
@ -59,10 +67,9 @@
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="conditionSearch"
|
||||
/>
|
||||
</div>
|
||||
<!-- <el-button @click="getMemberCountList('search')">查询</el-button> -->
|
||||
<el-button size="medium" @click="getMemberCountList('search')">查询</el-button>
|
||||
</div>
|
||||
<div class="table-one">
|
||||
<div class="tabList">
|
||||
@ -145,7 +152,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeMount, onBeforeUnmount, getCurrentInstance } from "vue";
|
||||
import { ref, onMounted, onBeforeMount, onBeforeUnmount, getCurrentInstance, nextTick } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getCompanyDataList } from "@/api/modules/labor";
|
||||
// import type { TabsPaneContext } from "element-plus";
|
||||
@ -167,7 +174,7 @@ const store = GlobalStore();
|
||||
const props = defineProps(["tip"]);
|
||||
const searchForm = ref({
|
||||
hardwareName: '',
|
||||
alarmTypeName: '',
|
||||
alarmType: '',
|
||||
dateRange: [],
|
||||
});
|
||||
const playWndBox = ref(null);
|
||||
@ -176,19 +183,11 @@ let playWndWidth = ref("");
|
||||
let oWebControl = ref(null);
|
||||
let pubKey = ref("");
|
||||
let initCount = ref(0);
|
||||
// const objData = ref({
|
||||
// appkey: "23071374", //海康提供的appkey
|
||||
// ip: "42.180.188.17", //海康提供的ip
|
||||
// secret: "skaSIHSYPRIynnxz7o57", //海康提供的secret
|
||||
// port: 8443,
|
||||
// playMode: 0, // 0 预览 1回放
|
||||
// layout: "1x1" //页面展示的模块数【16】
|
||||
// });
|
||||
let objData = ref({
|
||||
appkey: "23071374", //anjt的appkey
|
||||
ip: "42.180.188.17", //anjt的ip
|
||||
secret: "skaSIHSYPRIynnxz7o57", //anjt的secret
|
||||
port: 8443,//anjt的端口
|
||||
appkey: "", //海康提供的appkey
|
||||
ip: "", //海康提供的ip
|
||||
secret: "", //海康提供的secret
|
||||
port: 443,
|
||||
playMode: 0, // 0 预览 1回放
|
||||
layout: "1x1" //页面展示的模块数【16】
|
||||
});
|
||||
@ -208,22 +207,18 @@ const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||||
const detailData = ref({} as any);
|
||||
const partyMemberList = ref({} as any);
|
||||
let aiAlarmTypeEnum = ref([] as any);
|
||||
// 条件查询
|
||||
const conditionSearch = async () => {
|
||||
getMemberCountList('search')
|
||||
}
|
||||
//获取视频列表
|
||||
const getVideoList = async () => {
|
||||
// objData.value.appkey = "23071374";
|
||||
// objData.value.ip = "42.180.188.17";
|
||||
// objData.value.secret = "skaSIHSYPRIynnxz7o57";
|
||||
// objData.value.port = 8443;
|
||||
// cameraIndexCode.value = "210d4649ec0d4e6899b0394e5d8eeec2";
|
||||
objData.value.appkey = "23071374";
|
||||
objData.value.ip = "42.180.188.17";
|
||||
objData.value.secret = "skaSIHSYPRIynnxz7o57";
|
||||
objData.value.port = 8443;
|
||||
cameraIndexCode.value = "210d4649ec0d4e6899b0394e5d8eeec2";
|
||||
// objData.value.appkey = "24017757";
|
||||
// objData.value.ip = "182.101.141.23";
|
||||
// objData.value.secret = "VJz0FbzmE6drPQ7egsBi";
|
||||
// objData.value.port = 18443;
|
||||
// cameraIndexCode.value = "fa34ed90c1564841b14fed388741bbe2";
|
||||
// cameraIndexCode.value = "c986b80158de4a5e8b332b1fb338e51a";
|
||||
};
|
||||
// 背景图设置
|
||||
const bgImgSet = (index: any) => {
|
||||
@ -270,10 +265,12 @@ function getWarnName(warnType: any) {
|
||||
function openDetailDialog(item: any) {
|
||||
detailData.value = item;
|
||||
showDialog.value = true;
|
||||
oWebControl.JS_HideWnd();
|
||||
}
|
||||
// 关闭详情弹窗
|
||||
function closeDialog() {
|
||||
showDialog.value = false;
|
||||
oWebControl.JS_ShowWnd();
|
||||
detailData.value = {};
|
||||
}
|
||||
function handleDetailClick(event: any) {
|
||||
@ -303,7 +300,7 @@ const getMemberCountList = async (tip: any) => {
|
||||
let requestData: any = {
|
||||
projectSn: store.sn,
|
||||
hardwareName: searchForm.value.hardwareName,
|
||||
alarmTypeName: searchForm.value.alarmTypeName,
|
||||
alarmType: searchForm.value.alarmType,
|
||||
pageNo: tip == "search" ? 1 : pageNo.value,
|
||||
pageSize: 10,
|
||||
isPushed: 1
|
||||
@ -330,10 +327,44 @@ const getMemberCountList = async (tip: any) => {
|
||||
// pageNo.value = pageNo.value + 1;
|
||||
// }
|
||||
};
|
||||
// onBeforeMount(async () => {
|
||||
// getVideoList();
|
||||
// });
|
||||
onBeforeMount(async () => {
|
||||
getVideoList();
|
||||
});
|
||||
onMounted(async () => {
|
||||
initPlugin();
|
||||
// 获取页面的实例对象 ee
|
||||
const pageInstance = getCurrentInstance();
|
||||
// 获取dom节点对象
|
||||
const tagDomObj = pageInstance?.refs.playWndBox;
|
||||
playWndHeight.value = tagDomObj?.clientHeight;
|
||||
playWndWidth.value = tagDomObj?.clientWidth;
|
||||
|
||||
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("scroll", () => {
|
||||
if (oWebControl.value == undefined) {
|
||||
setTimeout(function () {
|
||||
oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("resize", e => {
|
||||
if (oWebControl.value == undefined) {
|
||||
setTimeout(function () {
|
||||
oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
|
||||
}, 200);
|
||||
}
|
||||
// if (oWebControl.value == undefined) {
|
||||
// // console.log("wwwww", e);
|
||||
// oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
// // oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
|
||||
// // setWndCover();
|
||||
// }
|
||||
});
|
||||
setTimeout(() => {
|
||||
previewVideo(cameraIndexCode.value)
|
||||
}, 1500);
|
||||
await getCompanyList();
|
||||
await getMemberCountList("search");
|
||||
await getQualityStatisticsNumDataFn("search");
|
||||
@ -360,49 +391,14 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
});
|
||||
// 加载海康插件
|
||||
// setTimeout(() => {
|
||||
// }, 2500);
|
||||
// await initPlugin();
|
||||
// 获取页面的实例对象 ee
|
||||
// const pageInstance = getCurrentInstance();
|
||||
// // 获取dom节点对象
|
||||
// const tagDomObj = pageInstance?.refs.playWndBox;
|
||||
// playWndHeight.value = tagDomObj?.clientHeight;
|
||||
// playWndWidth.value = tagDomObj?.clientWidth;
|
||||
|
||||
// // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
// window.addEventListener("scroll", () => {
|
||||
// if (oWebControl.value == undefined) {
|
||||
// setTimeout(function () {
|
||||
// oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
|
||||
// }, 200);
|
||||
// }
|
||||
// });
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
// window.addEventListener("resize", e => {
|
||||
// if (oWebControl.value == undefined) {
|
||||
// setTimeout(function () {
|
||||
// oWebControl.JS_Resize(playWndWidth.value * store.globalScale, playWndHeight.value * store.globalScale);
|
||||
// }, 200);
|
||||
// }
|
||||
// // if (oWebControl.value == undefined) {
|
||||
// // // console.log("wwwww", e);
|
||||
// // oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
// // // oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
|
||||
// // // setWndCover();
|
||||
// // }
|
||||
// });
|
||||
// previewVideo(cameraIndexCode.value)
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
// oWebControl.JS_HideWnd();
|
||||
// // 销毁当前播放的视频
|
||||
// oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
|
||||
// // 断开与插件服务连接
|
||||
// oWebControl.JS_Disconnect();
|
||||
oWebControl.JS_HideWnd();
|
||||
// 销毁当前播放的视频
|
||||
oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
|
||||
// 断开与插件服务连接
|
||||
oWebControl.JS_Disconnect();
|
||||
});
|
||||
|
||||
const initPlugin = () => {
|
||||
@ -559,6 +555,7 @@ const getPubKey = (callback: { (): void; (): void }) => {
|
||||
// 调用这个函数可进行视频播放
|
||||
// 视频预览功能
|
||||
const previewVideo = (data: string | null) => {
|
||||
console.log(data,666777)
|
||||
let cameraIndexCode = data; // 获取输入的监控点编号值，必填
|
||||
let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
|
||||
let transMode = 1; // 传输协议：0-UDP，1-TCP
|
||||
@ -706,17 +703,17 @@ const previewVideo = (data: string | null) => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-left {
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
.statistics-listBox {
|
||||
height: 100%;
|
||||
:deep() {
|
||||
.el-scrollbar__view {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 20px;
|
||||
// grid-row-gap: 20px;
|
||||
// grid-column-gap: 60px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
// grid-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -756,41 +753,9 @@ const previewVideo = (data: string | null) => {
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
width: 390px;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
}
|
||||
// .statistics-item:nth-child(1){
|
||||
// background: url("@/assets/images/commandScreen/bg6.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .statistics-item:nth-child(2){
|
||||
// background: url("@/assets/images/commandScreen/bg2.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .statistics-item:nth-child(3){
|
||||
// background: url("@/assets/images/commandScreen/bg7.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .statistics-item:nth-child(4){
|
||||
// background: url("@/assets/images/commandScreen/bg8.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .statistics-item:nth-child(5){
|
||||
// background: url("@/assets/images/commandScreen/bg1.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .statistics-item:nth-child(6){
|
||||
// background: url("@/assets/images/commandScreen/bg5.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .statistics-item:nth-child(7){
|
||||
// background: url("@/assets/images/commandScreen/bg4.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
// .statistics-item:nth-child(8){
|
||||
// background: url("@/assets/images/commandScreen/bg3.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
}
|
||||
.top-search {
|
||||
@include flex;
|
||||
@ -828,7 +793,7 @@ const previewVideo = (data: string | null) => {
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
height: 68%;
|
||||
height: 86%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="list-detail" v-if="showDialog && mapsDetail.length == 0">
|
||||
<div
|
||||
:class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : postData.type == 3 ? 'dialog-content-three' : 'dialog-content-more'"
|
||||
:class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : postData.type == 3 ? 'dialog-content-three' : postData.type == 4 ? 'dialog-content-ai' : 'dialog-content-more'"
|
||||
:style="
|
||||
postData.index == 98
|
||||
? { left: '5%', width: '90%', top: '5%', height: '90%' }
|
||||
@ -81,7 +81,7 @@
|
||||
</div>
|
||||
<div v-else-if="showIndex == 10">
|
||||
<div class="list-detail" v-for="ele in mapsDetail.filter((option: any) => option.show)" :key="ele.id">
|
||||
<div :class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : postData.type == 3 ? 'dialog-content-three' : 'dialog-content-more'">
|
||||
<div :class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : postData.type == 3 ? 'dialog-content-three' : postData.type == 4 ? 'dialog-content-ai' : 'dialog-content-more'">
|
||||
<div class="warning-bg"></div>
|
||||
<div class="dialog-title">
|
||||
<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
|
||||
@ -303,6 +303,18 @@ onMounted(async () => {});
|
||||
background-size: 100% 100%;
|
||||
z-index: 21;
|
||||
}
|
||||
.dialog-content-ai{
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
padding: 1%;
|
||||
left: 15%;
|
||||
top: 5%;
|
||||
width: 70%;
|
||||
height: 90%;
|
||||
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 21;
|
||||
}
|
||||
.dialog-content-more {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
@ -319,7 +331,8 @@ onMounted(async () => {});
|
||||
.dialog-content,
|
||||
.dialog-content-show,
|
||||
.dialog-content-more,
|
||||
.dialog-content-three {
|
||||
.dialog-content-three,
|
||||
.dialog-content-ai {
|
||||
padding-top: 50px;
|
||||
position: relative;
|
||||
|
||||
@ -378,6 +391,10 @@ onMounted(async () => {});
|
||||
padding-top: 70px;
|
||||
position: relative;
|
||||
}
|
||||
.dialog-content-ai {
|
||||
padding-top: 70px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.notoDta {
|
||||
|
||||
@ -238,8 +238,10 @@ const createdBarCharts = (xData: any, yData1: any, yData2: any, yData3: any, el:
|
||||
type: "slider", // 使用滑动条形式的数据区域缩放组件
|
||||
// start: 0, // 数据窗口范围的起始百分比
|
||||
// end: 50, // 数据窗口范围的结束百分比
|
||||
startValue: xData.length - 1,
|
||||
endValue: xData.length - 9,
|
||||
// startValue: xData.length - 1,
|
||||
// endValue: xData.length - 9,
|
||||
startValue: 0,
|
||||
endValue: xData.length - 2,
|
||||
height: 10, // 滑动条组件高度
|
||||
bottom: 0, // 距离图表区域下边的距离
|
||||
showDetail: false, // 拖拽时是否显示详情
|
||||
@ -612,7 +614,7 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
height: 78%;
|
||||
height: 73%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -153,7 +153,7 @@ const checkVideo = async (item: any) => {
|
||||
// let firstVideoId = ref("" as any);
|
||||
//获取视频列表
|
||||
const getVideoList = async () => {
|
||||
let res: any = await selectProjectVideoGroupApi({
|
||||
let res: any = await selectProjectVideoListApi({
|
||||
projectSn: store.sn
|
||||
// all: 1
|
||||
// all=1查全部
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user