Merge branch 'shenzhen-dev' of http://139.9.66.234:18023/yjlHub/zhgdlarge into bjxz-rain

This commit is contained in:
X_Rian 2024-07-08 19:03:14 +08:00
commit 530c64ebf0
5 changed files with 150 additions and 164 deletions

View File

@ -101,7 +101,7 @@
<div class="classify-div-item" @click="openDialogData({ index: 99, title: '质量管理' })"> <div class="classify-div-item" @click="openDialogData({ index: 99, title: '质量管理' })">
<span style="font-size: 12px">质量管理&nbsp;{{ statsDirectorateBigScreen.qualityInspectionRecordNum }}</span> <span style="font-size: 12px">质量管理&nbsp;{{ statsDirectorateBigScreen.qualityInspectionRecordNum }}</span>
</div> </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警报&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span> <span style="font-size: 12px">AI警报&nbsp;{{ statsDirectorateBigScreen.aiAnalyseHardWareAlarmRecordNum }}</span>
</div> </div>
</div> </div>

View File

@ -2,9 +2,9 @@
<div class="political-outlook"> <div class="political-outlook">
<div class="content"> <div class="content">
<!-- v-show="topDangerList.length > 0" --> <!-- v-show="topDangerList.length > 0" -->
<div class="top-statistics" v-show="topDangerList.length > 0"> <div class="top-statistics">
<div class="top-statistics-left"> <div class="top-statistics-left">
<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar"> <el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar" v-if="topDangerList.length > 0">
<div <div
class="statistics-item" class="statistics-item"
:style="{ :style="{
@ -20,38 +20,46 @@
<span class="statistics-item-content">历史报警次数{{ item.alarmNum }}</span> <span class="statistics-item-content">历史报警次数{{ item.alarmNum }}</span>
</div> </div>
</el-scrollbar> </el-scrollbar>
<div style="position: relative; width: 500px; height: 100%;" v-else>
<div class="notoDta">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</div>
</div> </div>
<!-- <div class="top-statistics-right"> <div class="top-statistics-right">
<div>sss</div> <!-- 播放海康 -->
播放海康 <div ref="playWndBox" style="width: 85%; height: 88%">
<div ref="playWndBox" style="width: 96%; height: 100%;">
<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 + 'px' width: playWndWidth + 'px'
}" }" -->
</div> </div>
</div> -->
</div>
<div style="position: relative; height: 180px" v-if="topDangerList.length == 0">
<div class="notoDta">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div> </div>
</div> </div>
<div class="top-search"> <div class="top-search">
<div class="search-item"> <div class="search-item">
<span>设备名称</span> <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>
<div class="search-item"> <div class="search-item">
<span>不安全行为类型</span> <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>
<div class="search-item"> <div class="search-item">
<span>警告时间</span> <span>警告时间</span>
<el-date-picker <el-date-picker
style="width: 240px;" style="width: 240px"
size="small" size="small"
v-model="searchForm.dateRange" v-model="searchForm.dateRange"
type="daterange" type="daterange"
@ -59,10 +67,9 @@
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
@change="conditionSearch"
/> />
</div> </div>
<!-- <el-button @click="getMemberCountList('search')">查询</el-button> --> <el-button size="medium" @click="getMemberCountList('search')">查询</el-button>
</div> </div>
<div class="table-one"> <div class="table-one">
<div class="tabList"> <div class="tabList">
@ -101,14 +108,14 @@
</div> </div>
</el-scrollbar> </el-scrollbar>
<el-pagination <el-pagination
v-if="partyMemberList.length != 0" v-if="partyMemberList.length != 0"
background background
:page-size="10" :page-size="10"
style="justify-content: center" style="justify-content: center"
@current-change="onCurrentChange" @current-change="onCurrentChange"
layout="prev, pager, next" layout="prev, pager, next"
:total="total" :total="total"
/> />
</div> </div>
</div> </div>
<div class="list-detail" v-if="showDialog" @click="handleDetailClick"> <div class="list-detail" v-if="showDialog" @click="handleDetailClick">
@ -145,7 +152,7 @@
</template> </template>
<script lang="ts" setup> <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 { GlobalStore } from "@/stores";
import { getCompanyDataList } from "@/api/modules/labor"; import { getCompanyDataList } from "@/api/modules/labor";
// import type { TabsPaneContext } from "element-plus"; // import type { TabsPaneContext } from "element-plus";
@ -166,9 +173,9 @@ const store = GlobalStore();
// eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars // eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars
const props = defineProps(["tip"]); const props = defineProps(["tip"]);
const searchForm = ref({ const searchForm = ref({
hardwareName: '', hardwareName: "",
alarmTypeName: '', alarmType: "",
dateRange: [], dateRange: []
}); });
const playWndBox = ref(null); const playWndBox = ref(null);
let playWndHeight = ref(""); let playWndHeight = ref("");
@ -176,19 +183,11 @@ let playWndWidth = ref("");
let oWebControl = ref(null); let oWebControl = ref(null);
let pubKey = ref(""); let pubKey = ref("");
let initCount = ref(0); 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({ let objData = ref({
appkey: "23071374", //anjtappkey appkey: "", //appkey
ip: "42.180.188.17", //anjtip ip: "", //ip
secret: "skaSIHSYPRIynnxz7o57", //anjtsecret secret: "", //secret
port: 8443,//anjt port: 443,
playMode: 0, // 0 1 playMode: 0, // 0 1
layout: "1x1" //16 layout: "1x1" //16
}); });
@ -208,22 +207,18 @@ const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const detailData = ref({} as any); const detailData = ref({} as any);
const partyMemberList = ref({} as any); const partyMemberList = ref({} as any);
let aiAlarmTypeEnum = ref([] as any); let aiAlarmTypeEnum = ref([] as any);
//
const conditionSearch = async () => {
getMemberCountList('search')
}
// //
const getVideoList = async () => { const getVideoList = async () => {
// objData.value.appkey = "23071374"; objData.value.appkey = "23071374";
// objData.value.ip = "42.180.188.17"; objData.value.ip = "42.180.188.17";
// objData.value.secret = "skaSIHSYPRIynnxz7o57"; objData.value.secret = "skaSIHSYPRIynnxz7o57";
// objData.value.port = 8443; objData.value.port = 8443;
// cameraIndexCode.value = "210d4649ec0d4e6899b0394e5d8eeec2"; cameraIndexCode.value = "210d4649ec0d4e6899b0394e5d8eeec2";
// objData.value.appkey = "24017757"; // objData.value.appkey = "24017757";
// objData.value.ip = "182.101.141.23"; // objData.value.ip = "182.101.141.23";
// objData.value.secret = "VJz0FbzmE6drPQ7egsBi"; // objData.value.secret = "VJz0FbzmE6drPQ7egsBi";
// objData.value.port = 18443; // objData.value.port = 18443;
// cameraIndexCode.value = "fa34ed90c1564841b14fed388741bbe2"; // cameraIndexCode.value = "c986b80158de4a5e8b332b1fb338e51a";
}; };
// //
const bgImgSet = (index: any) => { const bgImgSet = (index: any) => {
@ -270,10 +265,12 @@ function getWarnName(warnType: any) {
function openDetailDialog(item: any) { function openDetailDialog(item: any) {
detailData.value = item; detailData.value = item;
showDialog.value = true; showDialog.value = true;
oWebControl.JS_HideWnd();
} }
// //
function closeDialog() { function closeDialog() {
showDialog.value = false; showDialog.value = false;
oWebControl.JS_ShowWnd();
detailData.value = {}; detailData.value = {};
} }
function handleDetailClick(event: any) { function handleDetailClick(event: any) {
@ -303,14 +300,14 @@ const getMemberCountList = async (tip: any) => {
let requestData: any = { let requestData: any = {
projectSn: store.sn, projectSn: store.sn,
hardwareName: searchForm.value.hardwareName, hardwareName: searchForm.value.hardwareName,
alarmTypeName: searchForm.value.alarmTypeName, alarmType: searchForm.value.alarmType,
pageNo: tip == "search" ? 1 : pageNo.value, pageNo: tip == "search" ? 1 : pageNo.value,
pageSize: 10, pageSize: 10,
isPushed: 1 isPushed: 1
}; };
if(searchForm.value.dateRange && searchForm.value.dateRange.length > 0){ if (searchForm.value.dateRange && searchForm.value.dateRange.length > 0) {
requestData.startTime = searchForm.value.dateRange[0] requestData.startTime = searchForm.value.dateRange[0];
requestData.endTime = searchForm.value.dateRange[1] requestData.endTime = searchForm.value.dateRange[1];
} }
const res: any = await getAlarmRecordApi(requestData); const res: any = await getAlarmRecordApi(requestData);
partyMemberList.value = res.result.records; partyMemberList.value = res.result.records;
@ -330,10 +327,44 @@ const getMemberCountList = async (tip: any) => {
// pageNo.value = pageNo.value + 1; // pageNo.value = pageNo.value + 1;
// } // }
}; };
// onBeforeMount(async () => { onBeforeMount(async () => {
// getVideoList(); getVideoList();
// }); });
onMounted(async () => { 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 getCompanyList();
await getMemberCountList("search"); await getMemberCountList("search");
await getQualityStatisticsNumDataFn("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(() => { onBeforeUnmount(() => {
// //
// oWebControl.JS_HideWnd(); oWebControl.JS_HideWnd();
// // //
// oWebControl.JS_RequestInterface({ funcName: "destroyWnd" }); oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
// // //
// oWebControl.JS_Disconnect(); oWebControl.JS_Disconnect();
}); });
const initPlugin = () => { const initPlugin = () => {
@ -559,6 +555,7 @@ const getPubKey = (callback: { (): void; (): void }) => {
// //
// //
const previewVideo = (data: string | null) => { const previewVideo = (data: string | null) => {
console.log(data, 666777);
let cameraIndexCode = data; // let cameraIndexCode = data; //
let streamMode = 0; // 0-1- let streamMode = 0; // 0-1-
let transMode = 1; // 0-UDP1-TCP let transMode = 1; // 0-UDP1-TCP
@ -599,9 +596,9 @@ const previewVideo = (data: string | null) => {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
padding: 1%; padding: 1%;
left: 38%; left: 36%;
top: 30%; top: 30%;
width: 25%; width: 32%;
height: 45%; height: 45%;
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat; background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -694,7 +691,7 @@ const previewVideo = (data: string | null) => {
.content { .content {
height: 95%; height: 95%;
width: 100%; width: 100%;
margin-top: 10px; margin-top: 60px;
// background: url("@/assets/images/cardImg.png") no-repeat; // background: url("@/assets/images/cardImg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 20px 15px; padding: 20px 15px;
@ -706,17 +703,17 @@ const previewVideo = (data: string | null) => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
&-left { &-left {
width: 100%; // width: 100%;
height: 100%; height: 100%;
.statistics-listBox { .statistics-listBox {
height: 100%; height: 100%;
:deep() { :deep() {
.el-scrollbar__view { .el-scrollbar__view {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr);
grid-gap: 20px; // grid-gap: 20px;
// grid-row-gap: 20px; grid-row-gap: 20px;
// grid-column-gap: 60px; grid-column-gap: 60px;
} }
} }
} }
@ -754,43 +751,27 @@ const previewVideo = (data: string | null) => {
// margin-top: 8%; // margin-top: 8%;
// } // }
} }
.notoDta {
top: 25%;
width: 50%;
left: 20%;
position: absolute;
text-align: center;
img {
width: 40%;
margin: 5% 30%;
}
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);
margin: -6% 37%;
}
}
} }
&-right { &-right {
width: 390px; width: 45%;
height: 100%; 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 { .top-search {
@include flex; @include flex;
@ -828,7 +809,7 @@ const previewVideo = (data: string | null) => {
} }
} }
.listBox { .listBox {
height: 68%; height: 73%;
.listStyle { .listStyle {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="list-detail" v-if="showDialog && mapsDetail.length == 0"> <div class="list-detail" v-if="showDialog && mapsDetail.length == 0">
<div <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=" :style="
postData.index == 98 postData.index == 98
? { left: '5%', width: '90%', top: '5%', height: '90%' } ? { left: '5%', width: '90%', top: '5%', height: '90%' }
@ -81,7 +81,7 @@
</div> </div>
<div v-else-if="showIndex == 10"> <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="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="warning-bg"></div>
<div class="dialog-title"> <div class="dialog-title">
<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> --> <!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
@ -303,6 +303,18 @@ onMounted(async () => {});
background-size: 100% 100%; background-size: 100% 100%;
z-index: 21; 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 { .dialog-content-more {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
@ -319,7 +331,8 @@ onMounted(async () => {});
.dialog-content, .dialog-content,
.dialog-content-show, .dialog-content-show,
.dialog-content-more, .dialog-content-more,
.dialog-content-three { .dialog-content-three,
.dialog-content-ai {
padding-top: 50px; padding-top: 50px;
position: relative; position: relative;
@ -378,6 +391,10 @@ onMounted(async () => {});
padding-top: 70px; padding-top: 70px;
position: relative; position: relative;
} }
.dialog-content-ai {
padding-top: 70px;
position: relative;
}
} }
.notoDta { .notoDta {

View File

@ -236,10 +236,10 @@ const createdBarCharts = (xData: any, yData1: any, yData2: any, yData3: any, el:
dataZoom: [ dataZoom: [
{ {
type: "slider", // 使 type: "slider", // 使
// start: 0, // start: 0, //
// end: 50, // end: 25, //
startValue: xData.length - 1, // startValue: xData.length - 1,
endValue: xData.length - 9, // endValue: xData.length - 9,
height: 10, // height: 10, //
bottom: 0, // bottom: 0, //
showDetail: false, // showDetail: false, //
@ -267,18 +267,6 @@ const createdBarCharts = (xData: any, yData1: any, yData2: any, yData3: any, el:
color: "#9fa2ad" color: "#9fa2ad"
} }
}, },
// dataZoom: [
// {
// show: true,
// start: 50,
// end: 100,
// height: 8,
// borderColor: "transparent",
// backgroundColor: "#fff",
// filterColor: "#999999",
// bottom: 0,
// },
// ],
series: [ series: [
{ {
name: legendData[1], name: legendData[1],
@ -612,7 +600,7 @@ onMounted(async () => {
} }
} }
.listBox { .listBox {
height: 78%; height: 73%;
.listStyle { .listStyle {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -153,7 +153,7 @@ const checkVideo = async (item: any) => {
// let firstVideoId = ref("" as any); // let firstVideoId = ref("" as any);
// //
const getVideoList = async () => { const getVideoList = async () => {
let res: any = await selectProjectVideoGroupApi({ let res: any = await selectProjectVideoListApi({
projectSn: store.sn projectSn: store.sn
// all: 1 // all: 1
// all=1 // all=1