sxyanzhu
/
jhbigscreen
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

提交代码

prv
姜玉琦 2024-03-24 01:36:02 +08:00
parent d0dc1f2085
commit 5abbc49b9f
4 changed files with 1099 additions and 815 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/video/aiBoxVideo.js
View File

@ -2,7 +2,7 @@ import request from '@/utils/request'
const listView=(deptId,projectId)=> { const listView=(deptId,projectId)=> {
return request({ return request({
url: `/bgscreen/aiBoxVideo/listView?deptId=${deptId||0}&projectId=${projectId||0}`, url: `/bgscreen/aiBoxVideo/listView?deptId=${deptId||0}&projectId=${projectId||0}&pageSize=20&pageNum=1`,
method: 'get' method: 'get'
}) })
} }

28
src/pages/projectVideo.vue
View File

@ -242,7 +242,7 @@ export default {
fontSize: "12px", fontSize: "12px",
height: "32px", height: "32px",
}, },
warningInterval: "", warningInterval: undefined,
warningTableData: [], warningTableData: [],
//视频场布图分布点位 //视频场布图分布点位
@ -307,16 +307,15 @@ export default {
}; };
}, },
beforeDestroy() { beforeDestroy() {
console.log("-----beforeDestroy------>") console.log("-----beforeDestroy------>");
this.players.forEach(p=>{ this.players.forEach((p) => {
if (p) { if (p) {
try { try {
p.stop(); p.stop();
}catch(e){ } catch (e) {}
} }
} });
}) clearInterval(this.warningInterval);
}, },
mounted() { mounted() {
window.xapp = this; window.xapp = this;
@ -959,7 +958,6 @@ export default {
onMonitoringVideo(n) { onMonitoringVideo(n) {
this.mvNav = n; this.mvNav = n;
}, },
// 表格滚动 方法 --------- 开始 // 表格滚动 方法 --------- 开始
warningScroll() { warningScroll() {
let maxHeight = this.$refs.warning.$el.querySelectorAll(".el-table__body")[0] let maxHeight = this.$refs.warning.$el.querySelectorAll(".el-table__body")[0]
@ -1531,9 +1529,9 @@ export default {
}); });
}, },
// 表格滚动调用的函数 // 表格滚动调用的函数
beforeDestroy() { // beforeDestroy() {
clearInterval(this.warningInterval);
}, // },
handlePlay(it, idx) { handlePlay(it, idx) {
this.videoReturnData = it; this.videoReturnData = it;
this.currentIndex = idx; this.currentIndex = idx;
@ -1555,15 +1553,13 @@ export default {
//查询视频通道 //查询视频通道
initVideo(videoDvrNumber, url) { initVideo(videoDvrNumber, url) {
let that = this; let that = this;
that.players.forEach(p=>{ that.players.forEach((p) => {
if (p) { if (p) {
try { try {
p.stop(); p.stop();
}catch(e){ } catch (e) {}
} }
} });
})
that.players = []; that.players = [];
that.parentVM.vd01Flag = false; that.parentVM.vd01Flag = false;
that.parentVM.vd02Flag = false; that.parentVM.vd02Flag = false;

640
src/pages/toAIVideoProject.vue
View File

@ -7,7 +7,7 @@
<div class="labour-warning-title"> <div class="labour-warning-title">
<div class="labour-warning-img"> <div class="labour-warning-img">
<div class="labour-warning-bgd"> <div class="labour-warning-bgd">
<img src="images/labour_warning_icon.png"> <img src="images/labour_warning_icon.png" />
</div> </div>
</div> </div>
<div class="labour-warning-data"> <div class="labour-warning-data">
@ -17,43 +17,92 @@
</div> </div>
</div> </div>
<div class="labour-warning-data"> <div class="labour-warning-data">
<p>累计预警</p></p></p> <p>累计预警</p>
<div class="labour-warning-number"> <div class="labour-warning-number">
<span>{{ overviewTotal }}</span> 次 <span>{{ overviewTotal }}</span> 次
</div> </div>
</div></div> </div>
<project-overview-chart :key="'ai1'+overviewDay" :sp="''" txtTop="12" gifTop="70px" </div>
:maintitle="overviewTotalDay" :legend-opt="legendOpt2" :typedata="typeDistributionDataDay" <project-overview-chart
:text="overviewTextDay" :height="250"></project-overview-chart> :key="'ai1' + overviewDay"
:sp="''"
txtTop="12"
gifTop="70px"
:maintitle="overviewTotalDay"
:legend-opt="legendOpt2"
:typedata="typeDistributionDataDay"
:text="overviewTextDay"
:height="250"
></project-overview-chart>
<project-overview-chart :key="'ai2'+overview" :sp="''" txtTop="12" gifTop="70px" <project-overview-chart
:maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData" :key="'ai2' + overview"
:text="overviewText" :height="250"></project-overview-chart> :sp="''"
txtTop="12"
gifTop="70px"
:maintitle="overviewTotal"
:legend-opt="legendOpt1"
:typedata="typeDistributionData"
:text="overviewText"
:height="250"
></project-overview-chart>
</module-one-2-1> </module-one-2-1>
<module-one-1-1 label="预警分布"> <module-one-1-1 label="预警分布">
<rank-chart :data="availabilityData" :showval="true" :height="300"></rank-chart> <rank-chart
:data="availabilityData"
:showval="true"
:height="300"
></rank-chart>
</module-one-1-1> </module-one-1-1>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="ai-video-info"> <div class="ai-video-info">
<div class="ai-video-info-flex"> <div class="ai-video-info-flex">
<div class="ai-content-nav-max" style="width: 100%"> <div class="ai-content-nav-max" style="width: 100%">
<div class="ai-content-nav-min" v-for="(alertorType,index) in alertorTypeList" :key="index"> <div
class="ai-content-nav-min"
v-for="(alertorType, index) in alertorTypeList"
:key="index"
>
<div class="ai-content-nav-con"> <div class="ai-content-nav-con">
<div :class="nav == index?'ai-content-nav active':'ai-content-nav'" @click="aiNav(index,alertorType.dictValue)" v-html="alertorType.dictLabel"> <div
</div> :class="nav == index ? 'ai-content-nav active' : 'ai-content-nav'"
@click="aiNav(index, alertorType.dictValue)"
v-html="alertorType.dictLabel"
></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="ai-content-info-max"> <div class="ai-content-info-max">
<el-row> <el-row>
<el-col style="position: relative;" :span="8" v-for="(video,index) in videoList" :key="index"> <el-col
style="position: relative"
:span="8"
v-for="(video, index) in videoList"
:key="index"
>
<div class="ai-content-info-min"> <div class="ai-content-info-min">
<div class="ai-content-videos" :class="video.state?'active-video':'videobo'"> <div
<H265Player v-if="video.state" :url="getVideoUrl(video)"/> class="ai-content-videos"
<div class="ai-video-name" style="position: absolute;height: 35px;line-height: 35px;padding: 0px 15px;z-index: 99999;bottom: 8px;font-size: 13px;"> :class="video.state ? 'active-video' : 'videobo'"
<span v-if="video.state">{{video.videoName}}（{{video.passageName}}）</span> >
<div v-if="video.state" :id="'vd0' + index"></div>
<div
class="ai-video-name"
style="
position: absolute;
height: 35px;
line-height: 35px;
padding: 0px 15px;
z-index: 99999;
bottom: 8px;
font-size: 13px;
"
>
<span v-if="video.state"
>{{ video.videoName }}（{{ video.passageName }}）</span
>
</div> </div>
<div v-if="video.state" class="style-con style-red"></div> <div v-if="video.state" class="style-con style-red"></div>
<div v-if="video.state" class="style-con style-green"></div> <div v-if="video.state" class="style-con style-green"></div>
@ -74,17 +123,38 @@
<img src="/images/ai/left_slip.png" id="leftSlip"> <img src="/images/ai/left_slip.png" id="leftSlip">
</div> --> </div> -->
<div class="ai-key-videos-content" id="videosContent"> <div class="ai-key-videos-content" id="videosContent">
<div class="ai-key-videos-max" style="position: relative;" v-for="(video,index) in majorVideoList" :key="index"> <div
<div class="ai-key-videos-min" :class="video.state?'imp-video':'videobo'"> class="ai-key-videos-max"
<H265Player v-if="video.state" :url="getVideoUrl(video)"/> style="position: relative"
<div class="ai-video-name" style="position: absolute;height: 35px;line-height: 35px;padding: 0px 15px;z-index: 1;bottom: 8px;font-size: 13px;"> v-for="(video, index) in majorVideoList"
<span v-if="video.state">{{video.videoName}}（{{video.passageName}}）</span> :key="index"
>
<div
class="ai-key-videos-min"
:class="video.state ? 'imp-video' : 'videobo'"
>
<!-- <H265Player v-if="video.state" :url="getVideoUrl(video)"/> -->
<div v-if="video.state" :id="'wVd0' + index"></div>
<div
class="ai-video-name"
style="
position: absolute;
height: 35px;
line-height: 35px;
padding: 0px 15px;
z-index: 1;
bottom: 8px;
font-size: 13px;
"
>
<span v-if="video.state"
>{{ video.videoName }}（{{ video.passageName }}）</span
>
</div> </div>
<div v-if="video.state" class="style-con style-red"></div> <div v-if="video.state" class="style-con style-red"></div>
<div v-if="video.state" class="style-con style-green"></div> <div v-if="video.state" class="style-con style-green"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="ai-slip"> <!-- <div class="ai-slip">
<img src="/images/ai/right_slip.png" id="rightSlip"> <img src="/images/ai/right_slip.png" id="rightSlip">
@ -94,26 +164,100 @@
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="ai-content-padding"> <div class="analyse-map">
<div class="ai-warning-list"> <div class="analyse-title">
<div class="ai-video-title"> <div class="analyse-text">最近预警</div>
<div>最新预警 <span class="ai-video-number">（<span v-html="warningList.length"></span>）</span></div>
</div> </div>
<div class="ai-warning-list-content"> <div class="afoot-content safe-afoot-content">
<div class="ai-warning-list-max scroll" @mouseenter="stopListAnm" @mouseleave="listAnm" id="warningListMax" style="overflow-y:auto"> <div
<div id="warningListMin"> class="afoot-overflow safe-afoot-overflow"
<div class="project-expect-list active" v-for="(item,idx) in warningList" v-if="idx<50" :key="idx"> id="afootOverflow"
@mouseout="warningListMinMouseout"
@mouseover="warningListMinMouseover"
>
<div v-if="warningList.length == 0" class="not-data">暂无预警数据</div>
<div
v-if="warningList.length > 0"
class="afoot-con-for"
style="height: 180px"
v-for="item in warningList"
>
<div class="project-expect-con"> <div class="project-expect-con">
<div class="project-expect-title"> <div class="project-expect-title">
<div class="project-expect-title-No">{{item.projectName}}</div> <div class="project-expect-title-No">
{{ item.projectName }}
</div>
</div> </div>
<div class="project-expect-info"> <div class="project-expect-info">
<el-image :src="getImageUrl(item)" :preview-src-list="[$apiPath + item.imageUrl]"></el-image> <el-image
:src="getImageUrl(item)"
:preview-src-list="[$apiPath + item.imageUrl]"
></el-image>
</div> </div>
<div class="project-expect-info"> <div class="project-expect-info">
<div class="el-row" style="padding-top: 5px;">单位名称：{{item.deptName}}</div> <div class="el-row" style="padding-top: 5px">
<div class="el-row" style="padding-top: 5px;">预警类型：{{item.alarmTypeName}}</div> 单位名称：{{ item.deptName }}
<div class="el-row" style="padding-top: 5px;">预警时间：<span class="project-expect-time">{{item.createTime}}</span></div> </div>
<div class="el-row" style="padding-top: 5px">
预警类型：{{ item.alarmTypeName }}
</div>
<div class="el-row" style="padding-top: 5px">
预警时间：<span class="project-expect-time">{{
item.createTime
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="ai-content-padding">
<div class="ai-warning-list">
<div class="ai-video-title">
<div>
最新预警
<span class="ai-video-number"
>（<span v-html="warningList.length"></span>）</span
>
</div>
</div>
<div class="ai-warning-list-content">
<div
class="ai-warning-list-max scroll"
id="warningListMax"
style="overflow-y: auto"
>
<div id="warningListMin">
<div
class="project-expect-list active"
v-for="(item, idx) in warningList"
v-if="idx < 50"
:key="idx"
>
<div class="project-expect-con">
<div class="project-expect-title">
<div class="project-expect-title-No">
{{ item.projectName }}
</div>
</div>
<div class="project-expect-info">
<el-image
:src="getImageUrl(item)"
:preview-src-list="[$apiPath + item.imageUrl]"
></el-image>
</div>
<div class="project-expect-info">
<div class="el-row" style="padding-top: 5px">
单位名称：{{ item.deptName }}
</div>
<div class="el-row" style="padding-top: 5px">
预警类型：{{ item.alarmTypeName }}
</div>
<div class="el-row" style="padding-top: 5px">
预警时间：<span class="project-expect-time">{{
item.createTime
}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -122,6 +266,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> -->
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -129,22 +274,22 @@
</template> </template>
<script> <script>
import '../components/module/module-one-2-1' import "../components/module/module-one-2-1";
import '../components/module/module-one-3-1' import "../components/module/module-one-3-1";
import '../components/module/module-one-0-5' import "../components/module/module-one-0-5";
import '../components/module/module-one-video' import "../components/module/module-one-video";
import '../components/staff-survey-chart' import "../components/staff-survey-chart";
import '../components/classify-bar' import "../components/classify-bar";
import '../components/amplify/shipinguanli/amplify-spjk' import "../components/amplify/shipinguanli/amplify-spjk";
import '../components/rank-chart' import "../components/rank-chart";
import debounce from 'lodash.debounce' import debounce from "lodash.debounce";
import gsap from 'gsap' import gsap from "gsap";
export default { export default {
data() { data() {
return { return {
active: 3, active: 3,
scrollLeft:'', scrollLeft: "",
nav: 0, nav: 0,
alertorId: 0, alertorId: 0,
videoList: [], videoList: [],
@ -155,13 +300,13 @@ export default {
distributeData: {}, distributeData: {},
ptz: false, ptz: false,
autoPlay: true, autoPlay: true,
popupUrl:'', popupUrl: "",
popupShow: false, popupShow: false,
majorVideoSize: 0, majorVideoSize: 0,
//预警概况 //预警概况
overview: 0, overview: 0,
overviewDay: 0, overviewDay: 0,
overviewInterval: '', overviewInterval: "",
overviewTotal: 0, overviewTotal: 0,
legendOpt1: { legendOpt1: {
icon: "rect", icon: "rect",
@ -174,22 +319,22 @@ export default {
padding: [0, 20, 0, 0], padding: [0, 20, 0, 0],
}, },
percent: { percent: {
color: "#4676FD" color: "#4676FD",
}, },
}, },
}, },
}, },
overviewText: '累计预警', overviewText: "累计预警",
//原因类型分析 //原因类型分析
availabilityData: [], availabilityData: [],
projectCategoryWidth: 200, projectCategoryWidth: 200,
//预警概况 //预警概况
typeDistributionData: [ typeDistributionData: [
{ name: '未戴安全帽', value: '0' }, { name: "未戴安全帽", value: "0" },
{ name: '未穿工服', value: '0' }, { name: "未穿工服", value: "0" },
{ name: '反光衣/带检测', value: '0' } { name: "反光衣/带检测", value: "0" },
], ],
overviewTextDay: '今日预警', overviewTextDay: "今日预警",
overviewTotalDay: 0, overviewTotalDay: 0,
legendOpt2: { legendOpt2: {
icon: "rect", icon: "rect",
@ -208,38 +353,67 @@ export default {
}, },
}, },
typeDistributionDataDay: [ typeDistributionDataDay: [
{ name: '未戴安全帽', value: '0' }, { name: "未戴安全帽", value: "0" },
{ name: '未穿工服', value: '0' }, { name: "未穿工服", value: "0" },
{ name: '反光衣/带检测', value: '0' } { name: "反光衣/带检测", value: "0" },
], ],
initfunc:null initfunc: null,
players: [],
wPlayers: [],
warningInterval: undefined,
forIndex: 0,
};
},
beforeDestroy() {
console.log("-----beforeDestroy------>");
this.players.forEach((p) => {
if (p) {
try {
p.stop();
} catch (e) {}
} }
});
this.wPlayers.forEach((wp) => {
if (wp) {
try {
wp.stop();
} catch (e) {}
}
});
clearInterval(this.warningInterval);
this.forIndex = 0;
}, },
mounted() { mounted() {
this.$bus.$on("projectChange", debounce(res => { this.$bus.$on(
"projectChange",
debounce((res) => {
this.projectInfo = res; this.projectInfo = res;
console.log("项目改变"); console.log("项目改变");
console.log(this.projectInfo); console.log(this.projectInfo);
this.init(); this.init();
})); })
this.$bus.$on("loadProjects", debounce(prjs => { );
this.$bus.$on(
"loadProjects",
debounce((prjs) => {
this.projectInfos = prjs; this.projectInfos = prjs;
console.log("项目加载"); console.log("项目加载");
console.log(this.projectInfos); console.log(this.projectInfos);
this.init(); this.init();
})) })
this.$bus.$on("deptChange", debounce(dept => { );
this.$bus.$on(
"deptChange",
debounce((dept) => {
this.dept = dept; this.dept = dept;
console.log("部门改变"); console.log("部门改变");
console.log(this.dept); console.log(this.dept);
this.init(); this.init();
})); })
);
if (this.$root.hasInitHeader) { if (this.$root.hasInitHeader) {
this.initMe(); this.initMe();
} }
this.$nextTick(()=>{
this.listAnm();
});
}, },
created() { created() {
//this.init() //this.init()
@ -249,33 +423,33 @@ export default {
return { return {
width: (this.width + "").replace("px", "") + "px", width: (this.width + "").replace("px", "") + "px",
height: (this.height + "").replace("px", "") + "px", height: (this.height + "").replace("px", "") + "px",
position: "relative" position: "relative",
} };
}, },
exStyle() { exStyle() {
return { return {
textAlign: "center", textAlign: "center",
width: (this.width + "").replace("px", "") + "px", width: (this.width + "").replace("px", "") + "px",
height: (this.height + "").replace("px", "") + "px" height: (this.height + "").replace("px", "") + "px",
} };
}, },
PTZDiv() { PTZDiv() {
let W = parseInt((this.width + "").replace("px", "")) let W = parseInt((this.width + "").replace("px", ""));
let H = parseInt((this.height + "").replace("px", "")) let H = parseInt((this.height + "").replace("px", ""));
if (W < 400) { if (W < 400) {
W = "100px" W = "100px";
H = "100px" H = "100px";
} else { } else {
W = "150px" W = "150px";
H = "150px" H = "150px";
} }
return { return {
backgroundImage: "url('https://video.makalu.cc/img/jt.png')", backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
width: W, width: W,
height: H, height: H,
backgroundSize: "100%", backgroundSize: "100%",
position: "relative" position: "relative",
} };
}, },
PTZTop() { PTZTop() {
return { return {
@ -284,8 +458,8 @@ export default {
position: "absolute", position: "absolute",
top: "0px", top: "0px",
left: "33%", left: "33%",
cursor: "pointer" cursor: "pointer",
} };
}, },
PTZBottom() { PTZBottom() {
return { return {
@ -294,8 +468,8 @@ export default {
position: "absolute", position: "absolute",
bottom: "0px", bottom: "0px",
left: "33%", left: "33%",
cursor: "pointer" cursor: "pointer",
} };
}, },
PTZLeft() { PTZLeft() {
return { return {
@ -304,8 +478,8 @@ export default {
position: "absolute", position: "absolute",
top: "33%", top: "33%",
left: "0px", left: "0px",
cursor: "pointer" cursor: "pointer",
} };
}, },
PTZRight() { PTZRight() {
return { return {
@ -314,8 +488,8 @@ export default {
position: "absolute", position: "absolute",
top: "33%", top: "33%",
right: "0px", right: "0px",
cursor: "pointer" cursor: "pointer",
} };
}, },
VIBtnCss() { VIBtnCss() {
return { return {
@ -325,8 +499,8 @@ export default {
border: "1px solid #38314b", border: "1px solid #38314b",
fontSize: "20px", fontSize: "20px",
outline: "0", outline: "0",
color: "#FFFFFF" color: "#FFFFFF",
} };
}, },
zoomViewCss() { zoomViewCss() {
return { return {
@ -337,32 +511,11 @@ export default {
textAlign: "center", textAlign: "center",
border: "0px solid rgba(65, 63, 70, 0.5)", border: "0px solid rgba(65, 63, 70, 0.5)",
outline: "0", outline: "0",
fontSize: "14px" fontSize: "14px",
} };
} },
}, },
methods: { methods: {
stopListAnm(){
if(this.listTimer){
clearTimeout(this.listTimer);
this.listTimer=null;
}
},
listAnm(){
let func=()=>{
let el=document.querySelector("#warningListMax");
if(el.clientHeight<el.scrollTop+el.scrollHeight){
if(el.scrollTop+el.clientHeight<el.scrollHeight){
el.scrollTop+=2;
}
else{
el.scrollTop=0;
}
}
this.listTimer=setTimeout(func,120);
}
func();
},
initMe() { initMe() {
this.projectInfo = this.$root.project; this.projectInfo = this.$root.project;
this.dept = this.$root.dept; this.dept = this.$root.dept;
@ -379,20 +532,36 @@ export default {
this.getAnalysisDetailList(); this.getAnalysisDetailList();
this.getAiVideoAlertorTypeCount(); this.getAiVideoAlertorTypeCount();
this.initAiVideoAlertorTypeDistribution(); this.initAiVideoAlertorTypeDistribution();
} };
this.initfunc = setTimeout(initfunc, 50); // 定时时间 this.initfunc = setTimeout(initfunc, 50); // 定时时间
}, },
//正在发生
safeAutomaticRoll() {
var height = $(".safe-afoot-overflow").innerHeight();
if (this.forIndex == this.warningList.length) {
this.forIndex = 0;
} else {
this.forIndex = parseFloat(this.forIndex + 0.22221);
}
$("#afootOverflow").animate({ scrollTop: parseInt(height * this.forIndex) + "px" });
},
warningListMinMouseover() {
clearInterval(this.warningInterval);
},
warningListMinMouseout() {
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
},
//head选择项目返回值 //head选择项目返回值
onItemData(e) { onItemData(e) {
if (e.type == 1) { if (e.type == 1) {
location.href = '/weixin/screen/toVideo' location.href = "/weixin/screen/toVideo";
} else { } else {
location.href = '/weixin/screen/toVideoProject' location.href = "/weixin/screen/toVideoProject";
} }
}, },
amplify(url) { amplify(url) {
this.popupUrl = url this.popupUrl = url;
this.popupShow = true this.popupShow = true;
}, },
getAlertorTypeList() { getAlertorTypeList() {
// axios.post(Host + "/api/video/getAiVideoAlertorTypes", { // axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
@ -417,16 +586,22 @@ export default {
// } // }
// }).catch(err => { // }).catch(err => {
// }) // })
this.$api.dict('aibox_alarm_type').then(d => { this.$api.dict("aibox_alarm_type").then((d) => {
this.alertorTypeList = d || []; this.alertorTypeList = d || [];
if (this.alertorTypeList && this.alertorTypeList[0].dictValue != "") { if (this.alertorTypeList && this.alertorTypeList[0].dictValue != "") {
this.alertorTypeList.unshift({ dictLabel: "全部", dictValue: "" }); this.alertorTypeList.unshift({ dictLabel: "全部", dictValue: "" });
} }
}) });
}, },
getVideoUrl(it) { getVideoUrl(it) {
if (it.state) { if (it.state) {
return "http://111.21.209.230:7086/live/cameraid/"+it.videoDvrNumber+"$"+it.passageValue+"/substream/2.m3u8"; return (
"http://111.21.209.230:7086/live/cameraid/" +
it.videoDvrNumber +
"$" +
it.passageValue +
"/substream/2.m3u8"
);
} else { } else {
return null; return null;
} }
@ -446,20 +621,69 @@ export default {
// this.videoList = data; // this.videoList = data;
// }).catch(err => { // }).catch(err => {
// }) // })
this.$api.aiBoxVideo.getVideoPassage(this.dept?.id||0,this.projectInfo?.id||0,passageType,importance).then((response) => { let that = this;
this.players.forEach((p) => {
if (p) {
try {
p.stop();
} catch (e) {}
}
});
this.$api.aiBoxVideo
.getVideoPassage(
this.dept?.id || 0,
this.projectInfo?.id || 0,
passageType,
importance
)
.then((response) => {
let list = []; let list = [];
if (response.data) { if (response.data) {
response.data.forEach((it) => { response.data.forEach((it) => {
it.surProjectVideoPassageList.forEach(v =>{ it.surProjectVideoPassageList.forEach((v) => {
list.push({videoName:it.videoName,passageName:v.passageName,videoDvrNumber:v.videoDvrNumber,passageValue:v.passageValue,state:true}) list.push({
videoName: it.videoName,
passageName: v.passageName,
videoDvrNumber: v.videoDvrNumber,
passageValue: v.passageValue,
state: true,
}); });
}); });
});
let vList = list;
//补全 //补全
let len = 6 - list.length let len = 6 - list.length;
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
list.push({ state: false }); list.push({ state: false });
} }
this.videoList = list; this.videoList = list;
setTimeout(() => {
if (vList.length > 0) {
vList.forEach((v, vidx) => {
if (v.state) {
let player = new WasmPlayer(null, "vd0" + vidx, null, {
Height: true,
});
that.players.push(player);
}
});
}
}, 400);
setTimeout(() => {
if (vList.length > 0) {
vList.forEach((v, vidx) => {
if (v.state) {
let url =
"http://111.21.209.230:7086/live/cameraid/" +
v.videoDvrNumber +
"$" +
v.passageValue +
"/substream/2.m3u8";
that.players[vidx].play(url, 1);
}
});
}
}, 800);
} else { } else {
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
list.push({ state: false }); list.push({ state: false });
@ -467,7 +691,6 @@ export default {
this.videoList = list; this.videoList = list;
} }
}); });
}, },
getMajorAiVideoInfoList() { getMajorAiVideoInfoList() {
// axios.post(Host + "/api/video/getAiVideoInfoList", { // axios.post(Host + "/api/video/getAiVideoInfoList", {
@ -485,21 +708,65 @@ export default {
// this.majorVideoList = data; // this.majorVideoList = data;
// }).catch(err => { // }).catch(err => {
// }) // })
this.$api.aiBoxVideo.getVideoPassage(this.dept?.id||0,this.projectInfo?.id||0,"","Y").then((response) => { let that = this;
this.wPlayers.forEach((wp) => {
if (wp) {
try {
wp.stop();
} catch (e) {}
}
});
this.$api.aiBoxVideo
.getVideoPassage(this.dept?.id || 0, this.projectInfo?.id || 0, "", "Y")
.then((response) => {
let list = []; let list = [];
if (response.data) { if (response.data) {
response.data.forEach((it) => { response.data.forEach((it) => {
it.surProjectVideoPassageList.forEach(v =>{ it.surProjectVideoPassageList.forEach((v) => {
list.push({videoName:it.videoName,passageName:v.passageName,videoDvrNumber:v.videoDvrNumber,passageValue:v.passageValue,state:true}) list.push({
videoName: it.videoName,
passageName: v.passageName,
videoDvrNumber: v.videoDvrNumber,
passageValue: v.passageValue,
state: true,
}); });
}); });
this.majorVideoSize = list.length; });
let zdVList = list;
that.majorVideoSize = list.length;
//补全 //补全
let len = 3 - list.length; let len = 3 - list.length;
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
list.push({ state: false }); list.push({ state: false });
} }
this.majorVideoList = list; that.majorVideoList = list;
setTimeout(() => {
if (zdVList.length > 0) {
zdVList.forEach((zdv, zdidx) => {
if (zdv.state) {
let player = new WasmPlayer(null, "wVd0" + zdidx, null, {
Height: true,
});
that.wPlayers.push(player);
}
});
}
}, 400);
setTimeout(() => {
if (zdVList.length > 0) {
zdVList.forEach((zdv, zdidx) => {
if (zdv.state) {
let url =
"http://111.21.209.230:7086/live/cameraid/" +
zdv.videoDvrNumber +
"$" +
zdv.passageValue +
"/substream/2.m3u8";
that.wPlayers[zdidx].play(url, 1);
}
});
}
}, 800);
} else { } else {
this.majorVideoSize = 0; this.majorVideoSize = 0;
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
@ -510,10 +777,14 @@ export default {
}); });
}, },
getAnalysisDetailList() { getAnalysisDetailList() {
this.$api.aiBoxVideo.listView(this.dept?.id||0,this.projectInfo?.id).then((response) => { this.$api.aiBoxVideo
.listView(this.dept?.id || 0, this.projectInfo?.id)
.then((response) => {
this.warningList = response.data || []; this.warningList = response.data || [];
clearInterval(this.warningInterval);
//最近预警 定时器
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
}); });
}, },
getAiVideoAlertorTypeCount() { getAiVideoAlertorTypeCount() {
// axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", { // axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", {
@ -532,12 +803,14 @@ export default {
// }) // })
//今日视图 //今日视图
this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.id,"Y").then((response) => { this.$api.aiBoxVideo
.groupCountByAlarmType(this.dept?.id || 0, this.projectInfo?.id, "Y")
.then((response) => {
if (response.data) { if (response.data) {
let sum = 0; let sum = 0;
response.data.forEach(datum => { response.data.forEach((datum) => {
sum += datum.value; sum += datum.value;
}) });
this.overviewTotalDay = sum; this.overviewTotalDay = sum;
this.typeDistributionDataDay = response.data; this.typeDistributionDataDay = response.data;
this.overviewDay++; this.overviewDay++;
@ -545,12 +818,14 @@ export default {
}); });
//累计视图 //累计视图
this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.id,"N").then((response) => { this.$api.aiBoxVideo
.groupCountByAlarmType(this.dept?.id || 0, this.projectInfo?.id, "N")
.then((response) => {
if (response.data) { if (response.data) {
let sum = 0; let sum = 0;
response.data.forEach(datum => { response.data.forEach((datum) => {
sum += datum.value; sum += datum.value;
}) });
this.overviewTotal = sum; this.overviewTotal = sum;
this.typeDistributionData = response.data; this.typeDistributionData = response.data;
this.overview++; this.overview++;
@ -558,68 +833,72 @@ export default {
}); });
}, },
initAiVideoAlertorTypeDistribution() { initAiVideoAlertorTypeDistribution() {
this.$api.aiBoxVideo.selectGroupCountVideoConfig(this.dept?.id||0,this.projectInfo?.id).then((response) => { this.$api.aiBoxVideo
.selectGroupCountVideoConfig(this.dept?.id || 0, this.projectInfo?.id)
.then((response) => {
let list = []; let list = [];
if (response.data) { if (response.data) {
let sum = 0; let sum = 0;
response.data.forEach(datum => { response.data.forEach((datum) => {
sum += datum.value; sum += datum.value;
}) });
response.data.forEach(datum => { response.data.forEach((datum) => {
datum.text = datum.name; datum.text = datum.name;
if (sum == 0) { if (sum == 0) {
datum.prop = 0.0; datum.prop = 0.0;
} else { } else {
datum.prop = (datum.value/sum*100).toFixed(1); datum.prop = ((datum.value / sum) * 100).toFixed(1);
} }
list.push(datum); list.push(datum);
}) });
this.availabilityData = list; this.availabilityData = list;
} }
}); });
}, },
getAiVideoAlertorTypeWarningCount() { getAiVideoAlertorTypeWarningCount() {
axios.post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", { axios
projectId: JSON.parse(localStorage.getItem("data")).aqzg .post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", {
}).then(res => { projectId: JSON.parse(localStorage.getItem("data")).aqzg,
})
.then((res) => {
//预警分布 //预警分布
var distributeData = { var distributeData = {
legend: ["接入视频", "预警路数"], legend: ["接入视频", "预警路数"],
color: [], color: [],
yAxis: [], yAxis: [],
data:[] data: [],
} };
var data = res.data; var data = res.data;
var data1 = []; var data1 = [];
var data2 = []; var data2 = [];
data.forEach(item =>{ data.forEach((item) => {
distributeData.yAxis.push(item.alertor_type_name) distributeData.yAxis.push(item.alertor_type_name);
data1.push(item.total) data1.push(item.total);
data2.push(item.yjTotal) data2.push(item.yjTotal);
}) });
var color1 = ["#183e65", "#4bbcff"]; var color1 = ["#183e65", "#4bbcff"];
var color2 = ["#225254", "#5cd6ad"]; var color2 = ["#225254", "#5cd6ad"];
distributeData.data.push(data1) distributeData.data.push(data1);
distributeData.data.push(data2) distributeData.data.push(data2);
distributeData.color.push(color1) distributeData.color.push(color1);
distributeData.color.push(color2) distributeData.color.push(color2);
this.distributeData = distributeData this.distributeData = distributeData;
}).catch(err => {
}) })
.catch((err) => {});
}, },
aiNav(n, id) { aiNav(n, id) {
this.nav = n this.nav = n;
this.alertorId = id; this.alertorId = id;
this.getAiVideoInfoList(this.alertorId, ""); this.getAiVideoInfoList(this.alertorId, "");
}, },
getImageUrl(it) { getImageUrl(it) {
return '/jhapi' + it.imageUrl + ".min.jpg"; return "/jhapi" + it.imageUrl + ".min.jpg";
}, },
//预警概况 Echart //预警概况 Echart
warningChart(data, id) { warningChart(data, id) {
let newPromise = new Promise((resolve) => { let newPromise = new Promise((resolve) => {
resolve() resolve();
}) });
//然后异步执行echarts的初始化函数 //然后异步执行echarts的初始化函数
newPromise.then(() => { newPromise.then(() => {
var myChart = echarts.init(document.getElementById(id)); var myChart = echarts.init(document.getElementById(id));
@ -644,7 +923,14 @@ export default {
normal: { normal: {
show: true, show: true,
formatter: function (params) { formatter: function (params) {
return params.value +" "+ params.percent + "%\n{white|" +params.name +"}" ; return (
params.value +
" " +
params.percent +
"%\n{white|" +
params.name +
"}"
);
}, },
rich: { rich: {
white: { white: {
@ -703,13 +989,12 @@ export default {
}; };
myChart.setOption(option); myChart.setOption(option);
window.onresize = myChart.resize; window.onresize = myChart.resize;
}) });
}, },
goVideoPage() { goVideoPage() {
location.href="/weixin/screen/toVideoProject" location.href = "/weixin/screen/toVideoProject";
} },
} },
}; };
</script> </script>
@ -745,7 +1030,8 @@ export default {
min-width: 100px; min-width: 100px;
text-align: left; text-align: left;
} }
.project-video {} .project-video {
}
.project-expect-info { .project-expect-info {
width: 50%; width: 50%;
float: left; float: left;
@ -760,8 +1046,7 @@ export default {
} }
.my-svg-icon * { .my-svg-icon * {
fill: #389DE3; fill: #389de3;
} }
.people-number-con div.is-split { .people-number-con div.is-split {
@ -786,4 +1071,7 @@ export default {
} }
} }
} }
.safe-afoot-overflow {
height: 900px !important;
}
</style> </style>

16
vue.config.js
View File

@ -8,13 +8,13 @@ module.exports = defineConfig({
port: 3000, port: 3000,
open: true, open: true,
proxy: { proxy: {
'/jhapi/profile':{ // '/jhapi/profile':{
target: `http://62.234.3.186/jhapi/profile/`, // target: `http://62.234.3.186/jhapi/profile/`,
changeOrigin: true, // changeOrigin: true,
pathRewrite: { // pathRewrite: {
'^/jhapi/profile':'/' // '^/jhapi/profile':'/'
} // }
}, // },
'/jhapp':{ '/jhapp':{
target: `http://62.234.3.186/`, target: `http://62.234.3.186/`,
changeOrigin: true, changeOrigin: true,
@ -46,7 +46,7 @@ module.exports = defineConfig({
} }
}, },
'/profile':{ '/profile':{
target: `http://62.234.3.186/profile/`, target: `http://szgc.jhncidg.com/jhapi/profile`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/profile':'/' '^/profile':'/'