fix: AI报警弹窗样式修改以及人员总览样式修改
This commit is contained in:
kun
parent
9aa0790e8b
commit
ebc48e22c2
@ -3,8 +3,8 @@
|
||||
<div class="content">
|
||||
<!-- v-show="topDangerList.length > 0" -->
|
||||
<div class="top-statistics">
|
||||
<div class="top-statistics-left" v-show="topDangerList.length > 0">
|
||||
<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar">
|
||||
<div class="top-statistics-left">
|
||||
<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar" v-if="topDangerList.length > 0">
|
||||
<div
|
||||
class="statistics-item"
|
||||
:style="{
|
||||
@ -20,10 +20,16 @@
|
||||
<span class="statistics-item-content">历史报警次数：{{ item.alarmNum }}</span>
|
||||
</div>
|
||||
</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 class="top-statistics-right">
|
||||
<!-- 播放海康 -->
|
||||
<div ref="playWndBox" style="width: 85%; height: 88%;">
|
||||
<div ref="playWndBox" style="width: 85%; height: 88%">
|
||||
<div id="playWnd" class="playWnd" style="width: 100%; height: 100%"></div>
|
||||
<!-- :style="{
|
||||
height: playWndHeight + 'px',
|
||||
@ -32,26 +38,20 @@
|
||||
</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 class="top-search">
|
||||
<div class="search-item">
|
||||
<span>设备名称</span>
|
||||
<el-input style="width: 150px;" size="small" v-model="searchForm.hardwareName" placeholder="请输入内容" clearable></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-select
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
v-model="searchForm.alarmType"
|
||||
:clearable="true"
|
||||
style="width: 150px"
|
||||
>
|
||||
<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> -->
|
||||
@ -59,7 +59,7 @@
|
||||
<div class="search-item">
|
||||
<span>警告时间</span>
|
||||
<el-date-picker
|
||||
style="width: 240px;"
|
||||
style="width: 240px"
|
||||
size="small"
|
||||
v-model="searchForm.dateRange"
|
||||
type="daterange"
|
||||
@ -108,14 +108,14 @@
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-pagination
|
||||
v-if="partyMemberList.length != 0"
|
||||
background
|
||||
:page-size="10"
|
||||
style="justify-content: center"
|
||||
@current-change="onCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
v-if="partyMemberList.length != 0"
|
||||
background
|
||||
:page-size="10"
|
||||
style="justify-content: center"
|
||||
@current-change="onCurrentChange"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-detail" v-if="showDialog" @click="handleDetailClick">
|
||||
@ -173,9 +173,9 @@ const store = GlobalStore();
|
||||
// eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars
|
||||
const props = defineProps(["tip"]);
|
||||
const searchForm = ref({
|
||||
hardwareName: '',
|
||||
alarmType: '',
|
||||
dateRange: [],
|
||||
hardwareName: "",
|
||||
alarmType: "",
|
||||
dateRange: []
|
||||
});
|
||||
const playWndBox = ref(null);
|
||||
let playWndHeight = ref("");
|
||||
@ -305,9 +305,9 @@ const getMemberCountList = async (tip: any) => {
|
||||
pageSize: 10,
|
||||
isPushed: 1
|
||||
};
|
||||
if(searchForm.value.dateRange && searchForm.value.dateRange.length > 0){
|
||||
requestData.startTime = searchForm.value.dateRange[0]
|
||||
requestData.endTime = searchForm.value.dateRange[1]
|
||||
if (searchForm.value.dateRange && searchForm.value.dateRange.length > 0) {
|
||||
requestData.startTime = searchForm.value.dateRange[0];
|
||||
requestData.endTime = searchForm.value.dateRange[1];
|
||||
}
|
||||
const res: any = await getAlarmRecordApi(requestData);
|
||||
partyMemberList.value = res.result.records;
|
||||
@ -363,7 +363,7 @@ onMounted(async () => {
|
||||
// }
|
||||
});
|
||||
setTimeout(() => {
|
||||
previewVideo(cameraIndexCode.value)
|
||||
previewVideo(cameraIndexCode.value);
|
||||
}, 1500);
|
||||
await getCompanyList();
|
||||
await getMemberCountList("search");
|
||||
@ -555,7 +555,7 @@ const getPubKey = (callback: { (): void; (): void }) => {
|
||||
// 调用这个函数可进行视频播放
|
||||
// 视频预览功能
|
||||
const previewVideo = (data: string | null) => {
|
||||
console.log(data,666777)
|
||||
console.log(data, 666777);
|
||||
let cameraIndexCode = data; // 获取输入的监控点编号值，必填
|
||||
let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
|
||||
let transMode = 1; // 传输协议：0-UDP，1-TCP
|
||||
@ -596,9 +596,9 @@ const previewVideo = (data: string | null) => {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
padding: 1%;
|
||||
left: 38%;
|
||||
left: 36%;
|
||||
top: 30%;
|
||||
width: 25%;
|
||||
width: 32%;
|
||||
height: 45%;
|
||||
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
@ -691,7 +691,7 @@ const previewVideo = (data: string | null) => {
|
||||
.content {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-top: 60px;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20px 15px;
|
||||
@ -751,6 +751,22 @@ const previewVideo = (data: string | null) => {
|
||||
// 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 {
|
||||
width: 45%;
|
||||
@ -793,7 +809,7 @@ const previewVideo = (data: string | null) => {
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
height: 86%;
|
||||
height: 73%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -236,12 +236,10 @@ const createdBarCharts = (xData: any, yData1: any, yData2: any, yData3: any, el:
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider", // 使用滑动条形式的数据区域缩放组件
|
||||
// start: 0, // 数据窗口范围的起始百分比
|
||||
// end: 50, // 数据窗口范围的结束百分比
|
||||
start: 0, // 数据窗口范围的起始百分比
|
||||
end: 25, // 数据窗口范围的结束百分比
|
||||
// startValue: xData.length - 1,
|
||||
// endValue: xData.length - 9,
|
||||
startValue: 0,
|
||||
endValue: xData.length - 2,
|
||||
height: 10, // 滑动条组件高度
|
||||
bottom: 0, // 距离图表区域下边的距离
|
||||
showDetail: false, // 拖拽时是否显示详情
|
||||
@ -269,18 +267,6 @@ const createdBarCharts = (xData: any, yData1: any, yData2: any, yData3: any, el:
|
||||
color: "#9fa2ad"
|
||||
}
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// show: true,
|
||||
// start: 50,
|
||||
// end: 100,
|
||||
// height: 8,
|
||||
// borderColor: "transparent",
|
||||
// backgroundColor: "#fff",
|
||||
// filterColor: "#999999",
|
||||
// bottom: 0,
|
||||
// },
|
||||
// ],
|
||||
series: [
|
||||
{
|
||||
name: legendData[1],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user