@@ -26,11 +26,11 @@ const abilityApi = { | |||||
getPushInfo(params: any) { | getPushInfo(params: any) { | ||||
return http.get("getWarnPushSetting", params); | return http.get("getWarnPushSetting", params); | ||||
}, | }, | ||||
/** 获取告警分组 */ | |||||
/** 获取预警分组 */ | |||||
warnGroup(params: ReqId) { | warnGroup(params: ReqId) { | ||||
return http.get("getWarnGroup", params); | return http.get("getWarnGroup", params); | ||||
}, | }, | ||||
/** 关联摄像头和告警分组 */ | |||||
/** 关联摄像头和预警分组 */ | |||||
setWarnGroup(params: setWarn) { | setWarnGroup(params: setWarn) { | ||||
return http.post("setWarnGroupDevice", params); | return http.post("setWarnGroupDevice", params); | ||||
}, | }, | ||||
@@ -34,15 +34,15 @@ const warnZJRQApi = { | |||||
delete(params: ReqId[]) { | delete(params: ReqId[]) { | ||||
return http.post("deleteInfoD", params); | return http.post("deleteInfoD", params); | ||||
}, | }, | ||||
/** 获取告警分组 */ | |||||
/** 获取预警分组 */ | |||||
warnGroup(params: ReqId) { | warnGroup(params: ReqId) { | ||||
return http.get("getInfo", params); | return http.get("getInfo", params); | ||||
}, | }, | ||||
/** 获取告警分组 */ | |||||
/** 获取预警分组 */ | |||||
warnType(params: ReqId) { | warnType(params: ReqId) { | ||||
return http.get("getAlarmType", params); | return http.get("getAlarmType", params); | ||||
}, | }, | ||||
/** 处理告警 */ | |||||
/** 处理预警 */ | |||||
handWarn(params: ReqId) { | handWarn(params: ReqId) { | ||||
return http.post("handWarn", params); | return http.post("handWarn", params); | ||||
} | } | ||||
@@ -1,81 +1,82 @@ | |||||
<!-- | <!-- | ||||
* @Description: 告警管理 | |||||
* @Description: 预警管理 | |||||
* @Author: huguodong | * @Author: huguodong | ||||
* @Date: 2023-12-15 15:44:05 | * @Date: 2023-12-15 15:44:05 | ||||
!--> | !--> | ||||
<template> | <template> | ||||
<div class="video-box"> | |||||
<videoPlay v-if="options.src" ref="aplayVideo" v-bind="options" @play="onPlay"/> | |||||
</div> | |||||
</template> | |||||
<div class="video-box"> | |||||
<videoPlay v-if="options.src" ref="aplayVideo" v-bind="options" @play="onPlay" /> | |||||
</div> | |||||
</template> | |||||
<script setup lang="tsx" name="sysSpa"> | <script setup lang="tsx" name="sysSpa"> | ||||
import "vue3-video-play/dist/style.css"; | |||||
import {videoPlay} from "vue3-video-play"; | |||||
const onPlay = (ev) => { | |||||
import "vue3-video-play/dist/style.css"; | |||||
import { videoPlay } from "vue3-video-play"; | |||||
const onPlay = ev => { | |||||
console.log("播放"); | console.log("播放"); | ||||
}; | }; | ||||
const props = defineProps({ | const props = defineProps({ | ||||
videoUrl: String, | videoUrl: String, | ||||
videoType: String, | |||||
videoType: String | |||||
}); | }); | ||||
// 视频播放组件 | // 视频播放组件 | ||||
const options = reactive({ | const options = reactive({ | ||||
type: '', | |||||
width: '100%', //播放器高度 | |||||
height: '100%', //播放器高度 | |||||
color: "#409eff", //主题色 | |||||
title: "", //视频名称 | |||||
webFullScreen:false,//网页全屏 | |||||
speed:true,//是否支持快进快退 | |||||
currentTime:0,//跳转到固定播放时间(s) | |||||
muted:false,//静音 | |||||
autoPlay: true, //自动播放 | |||||
loop:false,//循环播放 | |||||
mirror:false,//镜像画面 | |||||
control: true, //是否显示控制器 | |||||
ligthOff:false,//关灯模式 | |||||
volume:0.3,//默认音量0-1 | |||||
src: '', //视频源 | |||||
poster: '', //封面 | |||||
speedRate: [1.0,1.25,1.5,2.0], // 可选的播放速度 | |||||
controlBtns: [ | |||||
"audioTrack",//音轨切换按钮 | |||||
"quality",//视频质量切换按钮 | |||||
"speedRate",//速率切换按钮 | |||||
"volume",//音量 | |||||
"setting",//设置 | |||||
"pip",//画中画按钮 | |||||
"pageFullScreen",//网页全屏按钮 | |||||
"fullScreen",//全屏按钮 | |||||
], //显示所有按钮, | |||||
}) | |||||
type: "", | |||||
width: "100%", //播放器高度 | |||||
height: "100%", //播放器高度 | |||||
color: "#409eff", //主题色 | |||||
title: "", //视频名称 | |||||
webFullScreen: false, //网页全屏 | |||||
speed: true, //是否支持快进快退 | |||||
currentTime: 0, //跳转到固定播放时间(s) | |||||
muted: false, //静音 | |||||
autoPlay: true, //自动播放 | |||||
loop: false, //循环播放 | |||||
mirror: false, //镜像画面 | |||||
control: true, //是否显示控制器 | |||||
ligthOff: false, //关灯模式 | |||||
volume: 0.3, //默认音量0-1 | |||||
src: "", //视频源 | |||||
poster: "", //封面 | |||||
speedRate: [1.0, 1.25, 1.5, 2.0], // 可选的播放速度 | |||||
controlBtns: [ | |||||
"audioTrack", //音轨切换按钮 | |||||
"quality", //视频质量切换按钮 | |||||
"speedRate", //速率切换按钮 | |||||
"volume", //音量 | |||||
"setting", //设置 | |||||
"pip", //画中画按钮 | |||||
"pageFullScreen", //网页全屏按钮 | |||||
"fullScreen" //全屏按钮 | |||||
] //显示所有按钮, | |||||
}); | |||||
// 监视props.msg的变化 | // 监视props.msg的变化 | ||||
watch(() => props.videoType, (newValue) => { | |||||
if(newValue) { | |||||
options.type = newValue; | |||||
console.log(options.type) | |||||
watch( | |||||
() => props.videoType, | |||||
newValue => { | |||||
if (newValue) { | |||||
options.type = newValue; | |||||
console.log(options.type); | |||||
} else { | } else { | ||||
options.type = 'video/mp4'; | |||||
options.type = "video/mp4"; | |||||
} | } | ||||
},{ deep: true, immediate: true }); | |||||
watch(() => props.videoUrl, (newValue) => { | |||||
}, | |||||
{ deep: true, immediate: true } | |||||
); | |||||
watch( | |||||
() => props.videoUrl, | |||||
newValue => { | |||||
options.src = newValue; | options.src = newValue; | ||||
},{ deep: true, immediate: true }); | |||||
}, | |||||
{ deep: true, immediate: true } | |||||
); | |||||
onMounted(() => { | onMounted(() => { | ||||
// 在这里执行其他需要在组件挂载后运行的代码 | |||||
}); | |||||
</script> | |||||
// 在这里执行其他需要在组件挂载后运行的代码 | |||||
}); | |||||
</script> | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
</style> | |||||
</style> | |||||
@@ -1,16 +1,16 @@ | |||||
<template> | <template> | ||||
<div class="tool-bar-ri"> | <div class="tool-bar-ri"> | ||||
<div class="header-icon"> | <div class="header-icon"> | ||||
<el-icon @click="opens" color="#ccc" :size="25" style="margin-right: 5px; cursor: pointer"> | |||||
<!-- <el-icon @click="opens" color="#ccc" :size="25" style="margin-right: 5px; cursor: pointer"> | |||||
<Box /> | <Box /> | ||||
</el-icon> | |||||
</el-icon> --> | |||||
<el-icon @click="open" color="#ccc" :size="29" style="margin-right: 20px; cursor: pointer"> | <el-icon @click="open" color="#ccc" :size="29" style="margin-right: 20px; cursor: pointer"> | ||||
<VideoCamera /> | <VideoCamera /> | ||||
</el-icon> | </el-icon> | ||||
<AssemblySize id="assemblySize" /> | <AssemblySize id="assemblySize" /> | ||||
<SearchMenu id="searchMenu" /> | <SearchMenu id="searchMenu" /> | ||||
<ThemeSetting id="themeSetting" /> | <ThemeSetting id="themeSetting" /> | ||||
<Message id="message" /> | |||||
<!-- <Message id="message" /> --> | |||||
<Fullscreen id="fullscreen" /> | <Fullscreen id="fullscreen" /> | ||||
<ChangeModule id="changeModule" /> | <ChangeModule id="changeModule" /> | ||||
</div> | </div> | ||||
@@ -26,7 +26,7 @@ | |||||
<img src="@/assets/images/home/warn.png" alt="" /> | <img src="@/assets/images/home/warn.png" alt="" /> | ||||
</div> | </div> | ||||
<div class="home-bg-content-item-content"> | <div class="home-bg-content-item-content"> | ||||
<div class="home-bg-content-item-title">告警信息总量</div> | |||||
<div class="home-bg-content-item-title">预警信息总量</div> | |||||
<div class="home-bg-content-item-value">1972</div> | <div class="home-bg-content-item-value">1972</div> | ||||
</div> | </div> | ||||
</div></el-col | </div></el-col | ||||
@@ -61,7 +61,7 @@ | |||||
<div class="home-bg card"> | <div class="home-bg card"> | ||||
<div class="home-bg-title"> | <div class="home-bg-title"> | ||||
<div></div> | <div></div> | ||||
<div>今日告警情况</div> | |||||
<div>今日预警情况</div> | |||||
</div> | </div> | ||||
<div class="home-bg-content"> | <div class="home-bg-content"> | ||||
<div ref="chart1" style="width: 100%; height: 100%"></div> | <div ref="chart1" style="width: 100%; height: 100%"></div> | ||||
@@ -175,7 +175,7 @@ function getCharts1(data: any) { | |||||
}, | }, | ||||
series: [ | series: [ | ||||
{ | { | ||||
name: "今日告警情况", | |||||
name: "今日预警情况", | |||||
type: "pie", | type: "pie", | ||||
radius: ["60%", "90%"], | radius: ["60%", "90%"], | ||||
avoidLabelOverlap: false, | avoidLabelOverlap: false, | ||||
@@ -333,7 +333,7 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||||
}, | }, | ||||
{ | { | ||||
prop: "warntotal", | prop: "warntotal", | ||||
label: "告警总量" | |||||
label: "预警总量" | |||||
// render: () => { | // render: () => { | ||||
// return "楼道"; | // return "楼道"; | ||||
// } | // } | ||||
@@ -1,11 +1,11 @@ | |||||
<!-- | <!-- | ||||
* @Description: 告警管理 | |||||
* @Description: 预警管理 | |||||
* @Author: huguodong | * @Author: huguodong | ||||
* @Date: 2023-12-15 15:44:05 | * @Date: 2023-12-15 15:44:05 | ||||
!--> | !--> | ||||
<template> | <template> | ||||
<div class="table-box"> | <div class="table-box"> | ||||
<ProTable ref="proTable" title="告警列表" :columns="columns" :data="tableData"> | |||||
<ProTable ref="proTable" title="预警列表" :columns="columns" :data="tableData"> | |||||
<!-- 表格 header 按钮 --> | <!-- 表格 header 按钮 --> | ||||
<!-- 表格 菜单类型 按钮 --> | <!-- 表格 菜单类型 按钮 --> | ||||
@@ -2,15 +2,15 @@ | |||||
<div style="width: 100%; height: 100%"> | <div style="width: 100%; height: 100%"> | ||||
<div class="commontitle"> | <div class="commontitle"> | ||||
<div class="left"> | <div class="left"> | ||||
<span>学员课堂告警情况</span> | |||||
<span>学员课堂预警情况</span> | |||||
<img src="/static/screen/img/titleIcon.png" alt="" /> | <img src="/static/screen/img/titleIcon.png" alt="" /> | ||||
</div> | </div> | ||||
<div class="right"> | <div class="right"> | ||||
<img src="/static/screen/img/redLight.png" alt="" /> | <img src="/static/screen/img/redLight.png" alt="" /> | ||||
<span>告警数量({{ alarmList.length }})</span> | |||||
<span>预警数量({{ alarmList.length }})</span> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div style="height: 568px; overflow: auto; margin-top: 4px"> | |||||
<div style="height: 568px; margin-top: 4px; overflow: auto"> | |||||
<ul> | <ul> | ||||
<li v-for="item in alarmList" :key="item.id"> | <li v-for="item in alarmList" :key="item.id"> | ||||
<div class="name">{{ item.personName || "未知" }}</div> | <div class="name">{{ item.personName || "未知" }}</div> | ||||
@@ -20,7 +20,7 @@ | |||||
<div class="title">{{ item.alarmTypeDesc }}</div> | <div class="title">{{ item.alarmTypeDesc }}</div> | ||||
</li> | </li> | ||||
</ul> | </ul> | ||||
<div v-if="alarmList.length == 0" style="text-align: center; margin-top: 160px; color: #78dfff; font-size: 14px">暂无告警</div> | |||||
<div v-if="alarmList.length == 0" style="margin-top: 160px; font-size: 14px; color: #78dfff; text-align: center">暂无预警</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -36,13 +36,13 @@ onMounted(() => { | |||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
.commontitle { | .commontitle { | ||||
.right { | .right { | ||||
color: #ffa1a1; | |||||
font-size: 14px; | font-size: 14px; | ||||
color: #ffa1a1; | |||||
img { | img { | ||||
width: 18px; | |||||
position: relative; | position: relative; | ||||
top: 4px; | top: 4px; | ||||
right: 6px; | right: 6px; | ||||
width: 18px; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -50,43 +50,43 @@ ul { | |||||
display: flex; | display: flex; | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
li { | li { | ||||
box-sizing: border-box; | |||||
width: 129.366px; | width: 129.366px; | ||||
height: 173.506px; | height: 173.506px; | ||||
background: #182665; | |||||
padding: 0 10px; | padding: 0 10px; | ||||
box-sizing: border-box; | |||||
padding-top: 6px; | padding-top: 6px; | ||||
margin-top: 7.8px; | |||||
margin-right: 16px; | margin-right: 16px; | ||||
margin-bottom: 7.8px; | margin-bottom: 7.8px; | ||||
margin-top: 7.8px; | |||||
background: #182665; | |||||
&:nth-child(7n) { | &:nth-child(7n) { | ||||
margin-right: 0px; | |||||
margin-right: 0; | |||||
} | } | ||||
.name { | .name { | ||||
color: #fff; | |||||
text-align: center; | |||||
font-size: 14px; | font-size: 14px; | ||||
color: #ffffff; | |||||
text-align: center; | |||||
} | } | ||||
.imgbox { | .imgbox { | ||||
margin-top: 5px; | |||||
width: 109.702px; | width: 109.702px; | ||||
height: 112.44px; | height: 112.44px; | ||||
object-fit: cover; | |||||
margin-top: 5px; | |||||
text-align: center; | text-align: center; | ||||
object-fit: cover; | |||||
.el-image { | .el-image { | ||||
height: 100%; | |||||
width: 100%; | width: 100%; | ||||
height: 100%; | |||||
} | } | ||||
} | } | ||||
.title { | .title { | ||||
background: #0c4dcf; | |||||
width: 109.702px; | width: 109.702px; | ||||
height: 23px; | height: 23px; | ||||
color: #fff; | |||||
text-align: center; | |||||
font-size: 14px; | font-size: 14px; | ||||
line-height: 23px; | line-height: 23px; | ||||
color: #ffffff; | |||||
text-align: center; | |||||
background: #0c4dcf; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
</style> | |||||
</style> |
@@ -2,7 +2,7 @@ | |||||
<div style="width: 100%; height: 100%"> | <div style="width: 100%; height: 100%"> | ||||
<div class="commontitle"> | <div class="commontitle"> | ||||
<div class="left"> | <div class="left"> | ||||
<span>今日告警信息</span> | |||||
<span>今日预警信息</span> | |||||
<img src="/static/screen/img/titleIcon.png" alt="" /> | <img src="/static/screen/img/titleIcon.png" alt="" /> | ||||
</div> | </div> | ||||
<div class="right"> | <div class="right"> | ||||
@@ -22,14 +22,14 @@ | |||||
<div class="todayBoticeTotal myborder1"> | <div class="todayBoticeTotal myborder1"> | ||||
<div | <div | ||||
style=" | style=" | ||||
position: relative; | |||||
bottom: 3px; | |||||
width: 40px; | width: 40px; | ||||
height: 40px; | height: 40px; | ||||
margin-right: 14px; | |||||
text-align: center; | |||||
border: 1px solid #ab2626; | border: 1px solid #ab2626; | ||||
border-radius: 50%; | border-radius: 50%; | ||||
text-align: center; | |||||
position: relative; | |||||
bottom: 3px; | |||||
margin-right: 14px; | |||||
" | " | ||||
> | > | ||||
<img src="/static/screen/img/redLight.png" alt="" style="width: 22px; margin-top: 5px" /> | <img src="/static/screen/img/redLight.png" alt="" style="width: 22px; margin-top: 5px" /> | ||||
@@ -38,7 +38,7 @@ | |||||
今日<span>7</span>个场景预警总计:<span class="total">{{ count }}</span> 起 | 今日<span>7</span>个场景预警总计:<span class="total">{{ count }}</span> 起 | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div style="width: 100%; height: calc(100% - 136px); overflow: auto; margin-top: 29px"> | |||||
<div style="width: 100%; height: calc(100% - 136px); margin-top: 29px; overflow: auto"> | |||||
<ul> | <ul> | ||||
<template v-for="item in warnList" :key="item.id"> | <template v-for="item in warnList" :key="item.id"> | ||||
<li> | <li> | ||||
@@ -61,7 +61,7 @@ | |||||
</li> | </li> | ||||
</template> | </template> | ||||
<template v-if="!warnList.length"> | <template v-if="!warnList.length"> | ||||
<div style="color: #10cefe; text-align: center; margin-top: 18px; font-size: 14px">暂无数据</div> | |||||
<div style="margin-top: 18px; font-size: 14px; color: #10cefe; text-align: center">暂无数据</div> | |||||
</template> | </template> | ||||
</ul> | </ul> | ||||
</div> | </div> | ||||
@@ -104,36 +104,36 @@ onMounted(() => { | |||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
.todayBoticeTotal { | .todayBoticeTotal { | ||||
box-sizing: border-box; | |||||
display: flex; | |||||
align-content: center; | |||||
width: 588px; | width: 588px; | ||||
height: 59px; | height: 59px; | ||||
background: #0f1e5e; | |||||
color: #78dfff; | |||||
padding-top: 13px; | |||||
padding-left: 25px; | |||||
margin-top: 22px; | |||||
font-family: "Microsoft YaHei UI"; | font-family: "Microsoft YaHei UI"; | ||||
font-size: 16px; | font-size: 16px; | ||||
margin-top: 22px; | |||||
padding-left: 25px; | |||||
padding-top: 13px; | |||||
box-sizing: border-box; | |||||
display: flex; | |||||
align-content: center; | |||||
color: #78dfff; | |||||
background: #0f1e5e; | |||||
span.total { | span.total { | ||||
color: #ff483a; | |||||
font-family: "Microsoft YaHei UI"; | |||||
font-size: 22px; | |||||
position: relative; | position: relative; | ||||
top: 3px; | top: 3px; | ||||
font-family: "Microsoft YaHei UI"; | |||||
font-size: 22px; | |||||
color: #ff483a; | |||||
} | } | ||||
} | } | ||||
ul:not(.el-scrollbar__view) { | ul:not(.el-scrollbar__view) { | ||||
li:first-child { | li:first-child { | ||||
margin-top: 0px; | |||||
margin-top: 0; | |||||
} | } | ||||
li { | li { | ||||
box-sizing: border-box; | |||||
display: flex; | display: flex; | ||||
padding-right: 20px; | |||||
margin-top: 18px; | margin-top: 18px; | ||||
background: #182665; | background: #182665; | ||||
padding-right: 20px; | |||||
box-sizing: border-box; | |||||
.left { | .left { | ||||
width: 195px; | width: 195px; | ||||
height: 114px; | height: 114px; | ||||
@@ -144,72 +144,73 @@ ul:not(.el-scrollbar__view) { | |||||
} | } | ||||
} | } | ||||
.right { | .right { | ||||
position: relative; | |||||
flex: 1; | flex: 1; | ||||
padding-left: 20px; | padding-left: 20px; | ||||
position: relative; | |||||
.status { | .status { | ||||
position: absolute; | |||||
top: 16px; | |||||
right: 0; | |||||
box-sizing: border-box; | |||||
display: flex; | |||||
place-content: center space-between; | |||||
width: 82px; | width: 82px; | ||||
height: 22px; | height: 22px; | ||||
color: #fff; | |||||
padding-right: 16px; | |||||
padding-left: 9px; | |||||
font-size: 12px; | font-size: 12px; | ||||
display: flex; | |||||
justify-content: space-between; | |||||
line-height: 20px; | line-height: 20px; | ||||
align-content: center; | |||||
padding-left: 9px; | |||||
padding-right: 16px; | |||||
box-sizing: border-box; | |||||
position: absolute; | |||||
top: 16px; | |||||
right: 0px; | |||||
color: #ffffff; | |||||
} | } | ||||
.time { | .time { | ||||
color: #78dfff; | |||||
font-size: 14px; | |||||
margin-top: 13px; | margin-top: 13px; | ||||
font-size: 14px; | |||||
color: #78dfff; | |||||
} | } | ||||
.title { | .title { | ||||
color: #fff; | |||||
font-size: 16px; | |||||
margin-top: 13px; | margin-top: 13px; | ||||
font-size: 16px; | |||||
color: #ffffff; | |||||
} | } | ||||
.des { | .des { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
color: #78dfff; | |||||
font-size: 12px; | |||||
margin-top: 16px; | margin-top: 16px; | ||||
font-size: 12px; | |||||
color: #78dfff; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.header-select { | .header-select { | ||||
:deep(.el-select__wrapper) { | :deep(.el-select__wrapper) { | ||||
border: 1px solid #35c9f0; | |||||
background: unset; | |||||
width: 100%; | width: 100%; | ||||
height: 40px; | height: 40px; | ||||
background: unset; | |||||
border: 1px solid #35c9f0; | |||||
outline: none; | outline: none; | ||||
} | } | ||||
// :deep(.el-popper) { | // :deep(.el-popper) { | ||||
// position: absolute !important; | // position: absolute !important; | ||||
// top: 58px !important; | // top: 58px !important; | ||||
// left: 0px !important; | // left: 0px !important; | ||||
// } | // } | ||||
:deep(.el-select-dropdown__item) { | :deep(.el-select-dropdown__item) { | ||||
color: #0c4dcf; | |||||
font-size: 20px; | |||||
height: 55px; | height: 55px; | ||||
font-size: 20px; | |||||
line-height: 55px; | line-height: 55px; | ||||
color: #0c4dcf; | |||||
} | } | ||||
:deep(.el-select__placeholder) { | :deep(.el-select__placeholder) { | ||||
background: linear-gradient(9deg, #10cefe 7.44%, #fff 79.62%); | |||||
font-size: 16px; | |||||
background: linear-gradient(9deg, #10cefe 7.44%, #ffffff 79.62%); | |||||
background-clip: text; | |||||
background-clip: text; | background-clip: text; | ||||
-webkit-background-clip: text; | |||||
-webkit-text-fill-color: transparent; | -webkit-text-fill-color: transparent; | ||||
font-size: 16px; | |||||
} | } | ||||
} | } | ||||
// .header-select.nobg { | // .header-select.nobg { | ||||
// :deep(.el-select__wrapper) { | // :deep(.el-select__wrapper) { | ||||
// background-color: unset; | // background-color: unset; | ||||
@@ -231,4 +232,4 @@ ul:not(.el-scrollbar__view) { | |||||
// font-size: 16px; | // font-size: 16px; | ||||
// } | // } | ||||
// } | // } | ||||
</style> | |||||
</style> |
@@ -2,7 +2,7 @@ | |||||
<div style="width: 100%; height: 100%"> | <div style="width: 100%; height: 100%"> | ||||
<div class="commontitle"> | <div class="commontitle"> | ||||
<div class="left"> | <div class="left"> | ||||
<span>今日场景告警次数</span> | |||||
<span>今日场景预警次数</span> | |||||
<img src="/static/screen/img/titleIcon.png" alt="" /> | <img src="/static/screen/img/titleIcon.png" alt="" /> | ||||
</div> | </div> | ||||
<div class="right"></div> | <div class="right"></div> | ||||
@@ -12,10 +12,10 @@ | |||||
<div class="commonTitle1"> | <div class="commonTitle1"> | ||||
<span class="left">校园安全</span> | <span class="left">校园安全</span> | ||||
<span class="right" | <span class="right" | ||||
>告警次数:<span class="num">{{ typeStatistiCount }}</span></span | |||||
>预警次数:<span class="num">{{ typeStatistiCount }}</span></span | |||||
> | > | ||||
</div> | </div> | ||||
<div style="height: 410px; overflow-y: auto; margin-top: 18px"> | |||||
<div style="height: 410px; margin-top: 18px; overflow-y: auto"> | |||||
<ul> | <ul> | ||||
<template v-for="(item, index) in typeStatisti" :key="index"> | <template v-for="(item, index) in typeStatisti" :key="index"> | ||||
<li> | <li> | ||||
@@ -51,10 +51,10 @@ | |||||
<div class="commonTitle1"> | <div class="commonTitle1"> | ||||
<span class="left">{{ item.name }}</span> | <span class="left">{{ item.name }}</span> | ||||
<span class="right" | <span class="right" | ||||
>告警次数:<span class="num">{{ item.value }}</span></span | |||||
>预警次数:<span class="num">{{ item.value }}</span></span | |||||
> | > | ||||
</div> | </div> | ||||
<div style="height: 146px; overflow: auto; margin-top: 24px"> | |||||
<div style="height: 146px; margin-top: 24px; overflow: auto"> | |||||
<ul> | <ul> | ||||
<template v-for="(item1, index1) in item.subset" :key="index1"> | <template v-for="(item1, index1) in item.subset" :key="index1"> | ||||
<li> | <li> | ||||
@@ -121,36 +121,36 @@ const setBoder1 = () => { | |||||
margin-bottom: 22px; | margin-bottom: 22px; | ||||
} | } | ||||
.safe { | .safe { | ||||
padding: 24px 29px 0px 29px; | |||||
box-sizing: border-box; | box-sizing: border-box; | ||||
width: 456px; | width: 456px; | ||||
height: 494px; | height: 494px; | ||||
padding: 24px 29px 0; | |||||
ul { | ul { | ||||
padding-right: 10px; | padding-right: 10px; | ||||
li { | li { | ||||
display: flex; | display: flex; | ||||
margin-top: 18.6px; | margin-top: 18.6px; | ||||
&:first-child { | &:first-child { | ||||
margin-top: 0px; | |||||
margin-top: 0; | |||||
} | } | ||||
.title { | .title { | ||||
display: flex; | display: flex; | ||||
color: #e3e9f3; | |||||
font-size: 12px; | font-size: 12px; | ||||
color: #e3e9f3; | |||||
.top { | .top { | ||||
box-sizing: border-box; | |||||
display: inline-block; | display: inline-block; | ||||
width: 60px; | width: 60px; | ||||
height: 20px; | height: 20px; | ||||
border-radius: 10px; | |||||
background: linear-gradient(to left, rgba(55, 116, 237, 0.01), rgba(55, 116, 237, 1)); | |||||
box-sizing: border-box; | |||||
padding-left: 10px; | padding-left: 10px; | ||||
background: linear-gradient(to left, rgb(55 116 237 / 1%), rgb(55 116 237 / 100%)); | |||||
border-radius: 10px; | |||||
} | } | ||||
.title_ { | .title_ { | ||||
display: block; | |||||
width: 76px; | |||||
position: relative; | position: relative; | ||||
right: 10px; | right: 10px; | ||||
display: block; | |||||
width: 76px; | |||||
} | } | ||||
} | } | ||||
.progressBox { | .progressBox { | ||||
@@ -158,23 +158,23 @@ const setBoder1 = () => { | |||||
padding-top: 6px; | padding-top: 6px; | ||||
} | } | ||||
.num { | .num { | ||||
color: #fff; | |||||
text-align: right; | |||||
font-size: 14px; | |||||
display: block; | display: block; | ||||
width: 42px; | width: 42px; | ||||
font-size: 14px; | |||||
color: #ffffff; | |||||
text-align: right; | |||||
} | } | ||||
&:nth-child(1) { | &:nth-child(1) { | ||||
.title { | .title { | ||||
.top { | .top { | ||||
background: linear-gradient(to right, rgba(226, 74, 59, 1), rgba(226, 74, 59, 0.01)); | |||||
background: linear-gradient(to right, rgb(226 74 59 / 100%), rgb(226 74 59 / 1%)); | |||||
} | } | ||||
} | } | ||||
} | } | ||||
&:nth-child(2) { | &:nth-child(2) { | ||||
.title { | .title { | ||||
.top { | .top { | ||||
background: linear-gradient(to left, rgba(246, 152, 14, 0.01), rgba(246, 152, 14, 1)); | |||||
background: linear-gradient(to left, rgb(246 152 14 / 1%), rgb(246 152 14 / 100%)); | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -182,10 +182,10 @@ const setBoder1 = () => { | |||||
} | } | ||||
} | } | ||||
.cate { | .cate { | ||||
width: calc(100% - 200px); | |||||
margin-left: 22px; | |||||
box-sizing: border-box; | box-sizing: border-box; | ||||
width: calc(100% - 200px); | |||||
height: 494px; | height: 494px; | ||||
margin-left: 22px; | |||||
overflow-y: auto; | overflow-y: auto; | ||||
> ul { | > ul { | ||||
display: flex; | display: flex; | ||||
@@ -193,33 +193,33 @@ const setBoder1 = () => { | |||||
justify-content: space-between; | justify-content: space-between; | ||||
padding-right: 10px; | padding-right: 10px; | ||||
> li { | > li { | ||||
margin-right: 16px; | |||||
box-sizing: border-box; | |||||
width: 383.228px; | width: 383.228px; | ||||
height: 235.65px; | height: 235.65px; | ||||
margin-bottom: 22px; | |||||
padding: 22px; | padding: 22px; | ||||
box-sizing: border-box; | |||||
margin-right: 16px; | |||||
margin-bottom: 22px; | |||||
} | } | ||||
> li:nth-child(3n) { | > li:nth-child(3n) { | ||||
margin-right: 0px; | |||||
margin-right: 0; | |||||
} | } | ||||
ul { | ul { | ||||
display: flex; | display: flex; | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
li { | li { | ||||
box-sizing: border-box; | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
color: #fff; | |||||
font-size: 12px; | |||||
width: 48%; | width: 48%; | ||||
height: 40.92px; | height: 40.92px; | ||||
box-shadow: 0px 0px 10px 0px #3877f2 inset; | |||||
background: #0e298b; | |||||
box-sizing: border-box; | |||||
padding: 0 8px; | padding: 0 8px; | ||||
line-height: 40.92px; | |||||
margin-bottom: 7.7px; | margin-bottom: 7.7px; | ||||
font-size: 12px; | |||||
line-height: 40.92px; | |||||
color: #ffffff; | |||||
background: #0e298b; | |||||
box-shadow: 0 0 10px 0 #3877f2 inset; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -227,4 +227,4 @@ const setBoder1 = () => { | |||||
:deep(.el-progress-bar__outer) { | :deep(.el-progress-bar__outer) { | ||||
background: #404c80; | background: #404c80; | ||||
} | } | ||||
</style> | |||||
</style> |
@@ -1,5 +1,5 @@ | |||||
<!-- | <!-- | ||||
* @Description: 告警管理 | |||||
* @Description: 预警管理 | |||||
* @Author: huguodong | * @Author: huguodong | ||||
* @Date: 2023-12-15 15:44:05 | * @Date: 2023-12-15 15:44:05 | ||||
!--> | !--> | ||||
@@ -1,5 +1,5 @@ | |||||
<!-- | <!-- | ||||
* @Description: 告警管理 | |||||
* @Description: 预警管理 | |||||
* @Author: huguodong | * @Author: huguodong | ||||
* @Date: 2023-12-15 15:44:05 | * @Date: 2023-12-15 15:44:05 | ||||
!--> | !--> | ||||
@@ -72,7 +72,7 @@ function getCharts1(data: any) { | |||||
const chart = echarts.init(chart1.value); | const chart = echarts.init(chart1.value); | ||||
const option = { | const option = { | ||||
title: { | title: { | ||||
text: "今日告警情况", | |||||
text: "今日预警情况", | |||||
// subtext: "Fake Data", | // subtext: "Fake Data", | ||||
left: "center" | left: "center" | ||||
}, | }, | ||||
@@ -85,7 +85,7 @@ function getCharts1(data: any) { | |||||
}, | }, | ||||
series: [ | series: [ | ||||
{ | { | ||||
name: "今日告警情况", | |||||
name: "今日预警情况", | |||||
type: "pie", | type: "pie", | ||||
radius: "50%", | radius: "50%", | ||||
data, | data, | ||||
@@ -1,18 +1,18 @@ | |||||
<!-- | <!-- | ||||
* @Description: 告警管理 | |||||
* @Description: 预警管理 | |||||
* @Author: huguodong | * @Author: huguodong | ||||
* @Date: 2023-12-15 15:44:05 | * @Date: 2023-12-15 15:44:05 | ||||
!--> | !--> | ||||
<template> | <template> | ||||
<div class="table-box"> | <div class="table-box"> | ||||
<ProTable ref="proTable" title="告警列表" :columns="columns" :request-api="warnZJRQApi.page"> | |||||
<ProTable ref="proTable" title="预警列表" :columns="columns" :request-api="warnZJRQApi.page"> | |||||
<!-- 表格 header 按钮 --> | <!-- 表格 header 按钮 --> | ||||
<template #tableHeader="scope"> | <template #tableHeader="scope"> | ||||
<!-- <s-button suffix="告警" @click="onOpen(FormOptEnum.ADD)" /> --> | |||||
<!-- <s-button suffix="预警" @click="onOpen(FormOptEnum.ADD)" /> --> | |||||
<s-button | <s-button | ||||
type="danger" | type="danger" | ||||
plain | plain | ||||
suffix="告警" | |||||
suffix="预警" | |||||
:opt="FormOptEnum.DELETE" | :opt="FormOptEnum.DELETE" | ||||
:disabled="!scope.isSelected" | :disabled="!scope.isSelected" | ||||
@click="onDelete(scope.selectedListIds, '删除所选数据')" | @click="onDelete(scope.selectedListIds, '删除所选数据')" | ||||
@@ -52,13 +52,13 @@ | |||||
<div class="linebox">姓名:{{ detailData.personName ? detailData.personName : "暂无数据" }}</div> | <div class="linebox">姓名:{{ detailData.personName ? detailData.personName : "暂无数据" }}</div> | ||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<div class="linebox">告警摄像头:{{ detailData.cameraName }}</div> | |||||
<div class="linebox">预警摄像头:{{ detailData.cameraName }}</div> | |||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<div class="linebox">告警类型:{{ detailData.alarmTypeDesc }}</div> | |||||
<div class="linebox">预警类型:{{ detailData.alarmTypeDesc }}</div> | |||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
<div class="linebox">告警时间:{{ detailData.tick }}</div> | |||||
<div class="linebox">预警时间:{{ detailData.tick }}</div> | |||||
</el-col> | </el-col> | ||||
<el-col :span="12"> | <el-col :span="12"> | ||||
@@ -121,7 +121,7 @@ | |||||
<img class="detailpic" :src="faceUrl" alt="" /> | <img class="detailpic" :src="faceUrl" alt="" /> | ||||
</div> | </div> | ||||
</el-dialog> | </el-dialog> | ||||
<!-- 处理告警 --> | |||||
<!-- 处理预警 --> | |||||
<handleForm ref="formRefH" /> | <handleForm ref="formRefH" /> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -181,7 +181,7 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||||
{ type: "selection", fixed: "left", width: 80 }, | { type: "selection", fixed: "left", width: 80 }, | ||||
// { prop: "searchKey", label: "关键字", search: { el: "input" }, isShow: false }, | // { prop: "searchKey", label: "关键字", search: { el: "input" }, isShow: false }, | ||||
// { prop: "cameraId", label: "所属摄像头", search: { el: "input" }, isShow: false }, | // { prop: "cameraId", label: "所属摄像头", search: { el: "input" }, isShow: false }, | ||||
// { prop: "alarmTypeDesc", label: "告警类型", search: { el: "input" }, isShow: false }, | |||||
// { prop: "alarmTypeDesc", label: "预警类型", search: { el: "input" }, isShow: false }, | |||||
{ | { | ||||
prop: "poiId", | prop: "poiId", | ||||
label: "所属学校", | label: "所属学校", | ||||
@@ -199,14 +199,14 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||||
}, | }, | ||||
{ | { | ||||
prop: "cameraName", | prop: "cameraName", | ||||
label: "告警摄像头", | |||||
label: "预警摄像头", | |||||
// render: () => { | // render: () => { | ||||
// return "楼道"; | // return "楼道"; | ||||
// } | // } | ||||
}, | }, | ||||
{ | { | ||||
prop: "snapshotUrl", | prop: "snapshotUrl", | ||||
label: "告警快照", | |||||
label: "预警快照", | |||||
render: scope => { | render: scope => { | ||||
return ( | return ( | ||||
<img src={scope.row.snapshotUrl ? scope.row.snapshotUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/> | <img src={scope.row.snapshotUrl ? scope.row.snapshotUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/> | ||||
@@ -223,7 +223,7 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [ | |||||
{ | { | ||||
prop: "alarmType", | prop: "alarmType", | ||||
label: "告警类型", | |||||
label: "预警类型", | |||||
enum: warnOptions, | enum: warnOptions, | ||||
search: { | search: { | ||||
el: "tree-select", | el: "tree-select", | ||||