提交代码
姜玉琦
parent
d0dc1f2085
commit
5abbc49b9f
|
|
@ -2,7 +2,7 @@ import request from '@/utils/request'
|
|||
|
||||
const listView=(deptId,projectId)=> {
|
||||
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'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ export default {
|
|||
fontSize: "12px",
|
||||
height: "32px",
|
||||
},
|
||||
warningInterval: "",
|
||||
warningInterval: undefined,
|
||||
warningTableData: [],
|
||||
|
||||
//视频场布图分布点位
|
||||
|
|
@ -307,16 +307,15 @@ export default {
|
|||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log("-----beforeDestroy------>")
|
||||
this.players.forEach(p=>{
|
||||
console.log("-----beforeDestroy------>");
|
||||
this.players.forEach((p) => {
|
||||
if (p) {
|
||||
try {
|
||||
p.stop();
|
||||
}catch(e){
|
||||
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
clearInterval(this.warningInterval);
|
||||
},
|
||||
mounted() {
|
||||
window.xapp = this;
|
||||
|
|
@ -959,7 +958,6 @@ export default {
|
|||
onMonitoringVideo(n) {
|
||||
this.mvNav = n;
|
||||
},
|
||||
|
||||
// 表格滚动 方法 --------- 开始
|
||||
warningScroll() {
|
||||
let maxHeight = this.$refs.warning.$el.querySelectorAll(".el-table__body")[0]
|
||||
|
|
@ -1531,9 +1529,9 @@ export default {
|
|||
});
|
||||
},
|
||||
// 表格滚动调用的函数
|
||||
beforeDestroy() {
|
||||
clearInterval(this.warningInterval);
|
||||
},
|
||||
// beforeDestroy() {
|
||||
|
||||
// },
|
||||
handlePlay(it, idx) {
|
||||
this.videoReturnData = it;
|
||||
this.currentIndex = idx;
|
||||
|
|
@ -1555,15 +1553,13 @@ export default {
|
|||
//查询视频通道
|
||||
initVideo(videoDvrNumber, url) {
|
||||
let that = this;
|
||||
that.players.forEach(p=>{
|
||||
that.players.forEach((p) => {
|
||||
if (p) {
|
||||
try {
|
||||
p.stop();
|
||||
}catch(e){
|
||||
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
that.players = [];
|
||||
that.parentVM.vd01Flag = false;
|
||||
that.parentVM.vd02Flag = false;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="labour-warning-title">
|
||||
<div class="labour-warning-img">
|
||||
<div class="labour-warning-bgd">
|
||||
<img src="images/labour_warning_icon.png">
|
||||
<img src="images/labour_warning_icon.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="labour-warning-data">
|
||||
|
|
@ -17,43 +17,92 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="labour-warning-data">
|
||||
<p>累计预警</p></p></p>
|
||||
<p>累计预警</p>
|
||||
<div class="labour-warning-number">
|
||||
<span>{{ overviewTotal }}</span> 次
|
||||
</div>
|
||||
</div></div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
:maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
|
||||
:text="overviewText" :height="250"></project-overview-chart>
|
||||
<project-overview-chart
|
||||
:key="'ai2' + overview"
|
||||
: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-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>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="ai-video-info">
|
||||
<div class="ai-video-info-flex">
|
||||
<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="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 class="ai-content-info-max">
|
||||
<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-videos" :class="video.state?'active-video':'videobo'">
|
||||
<H265Player v-if="video.state" :url="getVideoUrl(video)"/>
|
||||
<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
|
||||
class="ai-content-videos"
|
||||
:class="video.state ? 'active-video' : 'videobo'"
|
||||
>
|
||||
<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 v-if="video.state" class="style-con style-red"></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">
|
||||
</div> -->
|
||||
<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 class="ai-key-videos-min" :class="video.state?'imp-video':'videobo'">
|
||||
<H265Player v-if="video.state" :url="getVideoUrl(video)"/>
|
||||
<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
|
||||
class="ai-key-videos-max"
|
||||
style="position: relative"
|
||||
v-for="(video, index) in majorVideoList"
|
||||
: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 v-if="video.state" class="style-con style-red"></div>
|
||||
<div v-if="video.state" class="style-con style-green"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div class="ai-slip">
|
||||
<img src="/images/ai/right_slip.png" id="rightSlip">
|
||||
|
|
@ -94,26 +164,100 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<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 class="analyse-map">
|
||||
<div class="analyse-title">
|
||||
<div class="analyse-text">最近预警</div>
|
||||
</div>
|
||||
<div class="ai-warning-list-content">
|
||||
<div class="ai-warning-list-max scroll" @mouseenter="stopListAnm" @mouseleave="listAnm" 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="afoot-content safe-afoot-content">
|
||||
<div
|
||||
class="afoot-overflow safe-afoot-overflow"
|
||||
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-title">
|
||||
<div class="project-expect-title-No">{{item.projectName}}</div>
|
||||
<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>
|
||||
<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 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>
|
||||
</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>
|
||||
|
|
@ -122,6 +266,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -129,22 +274,22 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import '../components/module/module-one-2-1'
|
||||
import '../components/module/module-one-3-1'
|
||||
import '../components/module/module-one-0-5'
|
||||
import '../components/module/module-one-video'
|
||||
import '../components/staff-survey-chart'
|
||||
import '../components/classify-bar'
|
||||
import '../components/amplify/shipinguanli/amplify-spjk'
|
||||
import '../components/rank-chart'
|
||||
import "../components/module/module-one-2-1";
|
||||
import "../components/module/module-one-3-1";
|
||||
import "../components/module/module-one-0-5";
|
||||
import "../components/module/module-one-video";
|
||||
import "../components/staff-survey-chart";
|
||||
import "../components/classify-bar";
|
||||
import "../components/amplify/shipinguanli/amplify-spjk";
|
||||
import "../components/rank-chart";
|
||||
|
||||
import debounce from 'lodash.debounce'
|
||||
import gsap from 'gsap'
|
||||
import debounce from "lodash.debounce";
|
||||
import gsap from "gsap";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 3,
|
||||
scrollLeft:'',
|
||||
scrollLeft: "",
|
||||
nav: 0,
|
||||
alertorId: 0,
|
||||
videoList: [],
|
||||
|
|
@ -155,13 +300,13 @@ export default {
|
|||
distributeData: {},
|
||||
ptz: false,
|
||||
autoPlay: true,
|
||||
popupUrl:'',
|
||||
popupUrl: "",
|
||||
popupShow: false,
|
||||
majorVideoSize: 0,
|
||||
//预警概况
|
||||
overview: 0,
|
||||
overviewDay: 0,
|
||||
overviewInterval: '',
|
||||
overviewInterval: "",
|
||||
overviewTotal: 0,
|
||||
legendOpt1: {
|
||||
icon: "rect",
|
||||
|
|
@ -174,22 +319,22 @@ export default {
|
|||
padding: [0, 20, 0, 0],
|
||||
},
|
||||
percent: {
|
||||
color: "#4676FD"
|
||||
color: "#4676FD",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
overviewText: '累计预警',
|
||||
overviewText: "累计预警",
|
||||
//原因类型分析
|
||||
availabilityData: [],
|
||||
projectCategoryWidth: 200,
|
||||
//预警概况
|
||||
typeDistributionData: [
|
||||
{ name: '未戴安全帽', value: '0' },
|
||||
{ name: '未穿工服', value: '0' },
|
||||
{ name: '反光衣/带检测', value: '0' }
|
||||
{ name: "未戴安全帽", value: "0" },
|
||||
{ name: "未穿工服", value: "0" },
|
||||
{ name: "反光衣/带检测", value: "0" },
|
||||
],
|
||||
overviewTextDay: '今日预警',
|
||||
overviewTextDay: "今日预警",
|
||||
overviewTotalDay: 0,
|
||||
legendOpt2: {
|
||||
icon: "rect",
|
||||
|
|
@ -208,38 +353,67 @@ export default {
|
|||
},
|
||||
},
|
||||
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() {
|
||||
this.$bus.$on("projectChange", debounce(res => {
|
||||
this.$bus.$on(
|
||||
"projectChange",
|
||||
debounce((res) => {
|
||||
this.projectInfo = res;
|
||||
console.log("项目改变");
|
||||
console.log(this.projectInfo);
|
||||
this.init();
|
||||
}));
|
||||
this.$bus.$on("loadProjects", debounce(prjs => {
|
||||
})
|
||||
);
|
||||
this.$bus.$on(
|
||||
"loadProjects",
|
||||
debounce((prjs) => {
|
||||
this.projectInfos = prjs;
|
||||
console.log("项目加载");
|
||||
console.log(this.projectInfos);
|
||||
this.init();
|
||||
}))
|
||||
this.$bus.$on("deptChange", debounce(dept => {
|
||||
})
|
||||
);
|
||||
this.$bus.$on(
|
||||
"deptChange",
|
||||
debounce((dept) => {
|
||||
this.dept = dept;
|
||||
console.log("部门改变");
|
||||
console.log(this.dept);
|
||||
this.init();
|
||||
}));
|
||||
})
|
||||
);
|
||||
if (this.$root.hasInitHeader) {
|
||||
this.initMe();
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
this.listAnm();
|
||||
});
|
||||
},
|
||||
created() {
|
||||
//this.init()
|
||||
|
|
@ -249,33 +423,33 @@ export default {
|
|||
return {
|
||||
width: (this.width + "").replace("px", "") + "px",
|
||||
height: (this.height + "").replace("px", "") + "px",
|
||||
position: "relative"
|
||||
}
|
||||
position: "relative",
|
||||
};
|
||||
},
|
||||
exStyle() {
|
||||
return {
|
||||
textAlign: "center",
|
||||
width: (this.width + "").replace("px", "") + "px",
|
||||
height: (this.height + "").replace("px", "") + "px"
|
||||
}
|
||||
height: (this.height + "").replace("px", "") + "px",
|
||||
};
|
||||
},
|
||||
PTZDiv() {
|
||||
let W = parseInt((this.width + "").replace("px", ""))
|
||||
let H = parseInt((this.height + "").replace("px", ""))
|
||||
let W = parseInt((this.width + "").replace("px", ""));
|
||||
let H = parseInt((this.height + "").replace("px", ""));
|
||||
if (W < 400) {
|
||||
W = "100px"
|
||||
H = "100px"
|
||||
W = "100px";
|
||||
H = "100px";
|
||||
} else {
|
||||
W = "150px"
|
||||
H = "150px"
|
||||
W = "150px";
|
||||
H = "150px";
|
||||
}
|
||||
return {
|
||||
backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
|
||||
width: W,
|
||||
height: H,
|
||||
backgroundSize: "100%",
|
||||
position: "relative"
|
||||
}
|
||||
position: "relative",
|
||||
};
|
||||
},
|
||||
PTZTop() {
|
||||
return {
|
||||
|
|
@ -284,8 +458,8 @@ export default {
|
|||
position: "absolute",
|
||||
top: "0px",
|
||||
left: "33%",
|
||||
cursor: "pointer"
|
||||
}
|
||||
cursor: "pointer",
|
||||
};
|
||||
},
|
||||
PTZBottom() {
|
||||
return {
|
||||
|
|
@ -294,8 +468,8 @@ export default {
|
|||
position: "absolute",
|
||||
bottom: "0px",
|
||||
left: "33%",
|
||||
cursor: "pointer"
|
||||
}
|
||||
cursor: "pointer",
|
||||
};
|
||||
},
|
||||
PTZLeft() {
|
||||
return {
|
||||
|
|
@ -304,8 +478,8 @@ export default {
|
|||
position: "absolute",
|
||||
top: "33%",
|
||||
left: "0px",
|
||||
cursor: "pointer"
|
||||
}
|
||||
cursor: "pointer",
|
||||
};
|
||||
},
|
||||
PTZRight() {
|
||||
return {
|
||||
|
|
@ -314,8 +488,8 @@ export default {
|
|||
position: "absolute",
|
||||
top: "33%",
|
||||
right: "0px",
|
||||
cursor: "pointer"
|
||||
}
|
||||
cursor: "pointer",
|
||||
};
|
||||
},
|
||||
VIBtnCss() {
|
||||
return {
|
||||
|
|
@ -325,8 +499,8 @@ export default {
|
|||
border: "1px solid #38314b",
|
||||
fontSize: "20px",
|
||||
outline: "0",
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
color: "#FFFFFF",
|
||||
};
|
||||
},
|
||||
zoomViewCss() {
|
||||
return {
|
||||
|
|
@ -337,32 +511,11 @@ export default {
|
|||
textAlign: "center",
|
||||
border: "0px solid rgba(65, 63, 70, 0.5)",
|
||||
outline: "0",
|
||||
fontSize: "14px"
|
||||
}
|
||||
}
|
||||
fontSize: "14px",
|
||||
};
|
||||
},
|
||||
},
|
||||
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() {
|
||||
this.projectInfo = this.$root.project;
|
||||
this.dept = this.$root.dept;
|
||||
|
|
@ -379,20 +532,36 @@ export default {
|
|||
this.getAnalysisDetailList();
|
||||
this.getAiVideoAlertorTypeCount();
|
||||
this.initAiVideoAlertorTypeDistribution();
|
||||
}
|
||||
};
|
||||
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选择项目返回值
|
||||
onItemData(e) {
|
||||
if (e.type == 1) {
|
||||
location.href = '/weixin/screen/toVideo'
|
||||
location.href = "/weixin/screen/toVideo";
|
||||
} else {
|
||||
location.href = '/weixin/screen/toVideoProject'
|
||||
location.href = "/weixin/screen/toVideoProject";
|
||||
}
|
||||
},
|
||||
amplify(url) {
|
||||
this.popupUrl = url
|
||||
this.popupShow = true
|
||||
this.popupUrl = url;
|
||||
this.popupShow = true;
|
||||
},
|
||||
getAlertorTypeList() {
|
||||
// axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
|
||||
|
|
@ -417,16 +586,22 @@ export default {
|
|||
// }
|
||||
// }).catch(err => {
|
||||
// })
|
||||
this.$api.dict('aibox_alarm_type').then(d => {
|
||||
this.$api.dict("aibox_alarm_type").then((d) => {
|
||||
this.alertorTypeList = d || [];
|
||||
if (this.alertorTypeList && this.alertorTypeList[0].dictValue != "") {
|
||||
this.alertorTypeList.unshift({ dictLabel: "全部", dictValue: "" });
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
getVideoUrl(it) {
|
||||
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 {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -446,20 +621,69 @@ export default {
|
|||
// this.videoList = data;
|
||||
// }).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 = [];
|
||||
if (response.data) {
|
||||
response.data.forEach((it) => {
|
||||
it.surProjectVideoPassageList.forEach(v =>{
|
||||
list.push({videoName:it.videoName,passageName:v.passageName,videoDvrNumber:v.videoDvrNumber,passageValue:v.passageValue,state:true})
|
||||
it.surProjectVideoPassageList.forEach((v) => {
|
||||
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++) {
|
||||
list.push({ state: false });
|
||||
}
|
||||
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 {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
list.push({ state: false });
|
||||
|
|
@ -467,7 +691,6 @@ export default {
|
|||
this.videoList = list;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
getMajorAiVideoInfoList() {
|
||||
// axios.post(Host + "/api/video/getAiVideoInfoList", {
|
||||
|
|
@ -485,21 +708,65 @@ export default {
|
|||
// this.majorVideoList = data;
|
||||
// }).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 = [];
|
||||
if (response.data) {
|
||||
response.data.forEach((it) => {
|
||||
it.surProjectVideoPassageList.forEach(v =>{
|
||||
list.push({videoName:it.videoName,passageName:v.passageName,videoDvrNumber:v.videoDvrNumber,passageValue:v.passageValue,state:true})
|
||||
it.surProjectVideoPassageList.forEach((v) => {
|
||||
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;
|
||||
for (let i = 0; i < len; i++) {
|
||||
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 {
|
||||
this.majorVideoSize = 0;
|
||||
for (let i = 0; i < 6; i++) {
|
||||
|
|
@ -510,10 +777,14 @@ export default {
|
|||
});
|
||||
},
|
||||
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 || [];
|
||||
clearInterval(this.warningInterval);
|
||||
//最近预警 定时器
|
||||
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
|
||||
});
|
||||
|
||||
},
|
||||
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) {
|
||||
let sum = 0;
|
||||
response.data.forEach(datum => {
|
||||
response.data.forEach((datum) => {
|
||||
sum += datum.value;
|
||||
})
|
||||
});
|
||||
this.overviewTotalDay = sum;
|
||||
this.typeDistributionDataDay = response.data;
|
||||
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) {
|
||||
let sum = 0;
|
||||
response.data.forEach(datum => {
|
||||
response.data.forEach((datum) => {
|
||||
sum += datum.value;
|
||||
})
|
||||
});
|
||||
this.overviewTotal = sum;
|
||||
this.typeDistributionData = response.data;
|
||||
this.overview++;
|
||||
|
|
@ -558,68 +833,72 @@ export default {
|
|||
});
|
||||
},
|
||||
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 = [];
|
||||
if (response.data) {
|
||||
let sum = 0;
|
||||
response.data.forEach(datum => {
|
||||
response.data.forEach((datum) => {
|
||||
sum += datum.value;
|
||||
})
|
||||
response.data.forEach(datum => {
|
||||
});
|
||||
response.data.forEach((datum) => {
|
||||
datum.text = datum.name;
|
||||
if (sum == 0) {
|
||||
datum.prop = 0.0;
|
||||
} else {
|
||||
datum.prop = (datum.value/sum*100).toFixed(1);
|
||||
datum.prop = ((datum.value / sum) * 100).toFixed(1);
|
||||
}
|
||||
list.push(datum);
|
||||
})
|
||||
});
|
||||
this.availabilityData = list;
|
||||
}
|
||||
});
|
||||
},
|
||||
getAiVideoAlertorTypeWarningCount() {
|
||||
axios.post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", {
|
||||
projectId: JSON.parse(localStorage.getItem("data")).aqzg
|
||||
}).then(res => {
|
||||
axios
|
||||
.post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", {
|
||||
projectId: JSON.parse(localStorage.getItem("data")).aqzg,
|
||||
})
|
||||
.then((res) => {
|
||||
//预警分布
|
||||
var distributeData = {
|
||||
legend: ["接入视频", "预警路数"],
|
||||
color: [],
|
||||
yAxis: [],
|
||||
data:[]
|
||||
}
|
||||
data: [],
|
||||
};
|
||||
var data = res.data;
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
data.forEach(item =>{
|
||||
distributeData.yAxis.push(item.alertor_type_name)
|
||||
data1.push(item.total)
|
||||
data2.push(item.yjTotal)
|
||||
})
|
||||
data.forEach((item) => {
|
||||
distributeData.yAxis.push(item.alertor_type_name);
|
||||
data1.push(item.total);
|
||||
data2.push(item.yjTotal);
|
||||
});
|
||||
var color1 = ["#183e65", "#4bbcff"];
|
||||
var color2 = ["#225254", "#5cd6ad"];
|
||||
distributeData.data.push(data1)
|
||||
distributeData.data.push(data2)
|
||||
distributeData.color.push(color1)
|
||||
distributeData.color.push(color2)
|
||||
this.distributeData = distributeData
|
||||
}).catch(err => {
|
||||
distributeData.data.push(data1);
|
||||
distributeData.data.push(data2);
|
||||
distributeData.color.push(color1);
|
||||
distributeData.color.push(color2);
|
||||
this.distributeData = distributeData;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
aiNav(n, id) {
|
||||
this.nav = n
|
||||
this.nav = n;
|
||||
this.alertorId = id;
|
||||
this.getAiVideoInfoList(this.alertorId, "");
|
||||
},
|
||||
getImageUrl(it) {
|
||||
return '/jhapi' + it.imageUrl + ".min.jpg";
|
||||
return "/jhapi" + it.imageUrl + ".min.jpg";
|
||||
},
|
||||
//预警概况 Echart
|
||||
warningChart(data, id) {
|
||||
let newPromise = new Promise((resolve) => {
|
||||
resolve()
|
||||
})
|
||||
resolve();
|
||||
});
|
||||
//然后异步执行echarts的初始化函数
|
||||
newPromise.then(() => {
|
||||
var myChart = echarts.init(document.getElementById(id));
|
||||
|
|
@ -644,7 +923,14 @@ export default {
|
|||
normal: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
return params.value +" "+ params.percent + "%\n{white|" +params.name +"}" ;
|
||||
return (
|
||||
params.value +
|
||||
" " +
|
||||
params.percent +
|
||||
"%\n{white|" +
|
||||
params.name +
|
||||
"}"
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
white: {
|
||||
|
|
@ -703,13 +989,12 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
window.onresize = myChart.resize;
|
||||
})
|
||||
});
|
||||
},
|
||||
goVideoPage() {
|
||||
location.href="/weixin/screen/toVideoProject"
|
||||
}
|
||||
}
|
||||
|
||||
location.href = "/weixin/screen/toVideoProject";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -745,7 +1030,8 @@ export default {
|
|||
min-width: 100px;
|
||||
text-align: left;
|
||||
}
|
||||
.project-video {}
|
||||
.project-video {
|
||||
}
|
||||
.project-expect-info {
|
||||
width: 50%;
|
||||
float: left;
|
||||
|
|
@ -760,8 +1046,7 @@ export default {
|
|||
}
|
||||
|
||||
.my-svg-icon * {
|
||||
fill: #389DE3;
|
||||
|
||||
fill: #389de3;
|
||||
}
|
||||
|
||||
.people-number-con div.is-split {
|
||||
|
|
@ -786,4 +1071,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.safe-afoot-overflow {
|
||||
height: 900px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,13 +8,13 @@ module.exports = defineConfig({
|
|||
port: 3000,
|
||||
open: true,
|
||||
proxy: {
|
||||
'/jhapi/profile':{
|
||||
target: `http://62.234.3.186/jhapi/profile/`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/jhapi/profile':'/'
|
||||
}
|
||||
},
|
||||
// '/jhapi/profile':{
|
||||
// target: `http://62.234.3.186/jhapi/profile/`,
|
||||
// changeOrigin: true,
|
||||
// pathRewrite: {
|
||||
// '^/jhapi/profile':'/'
|
||||
// }
|
||||
// },
|
||||
'/jhapp':{
|
||||
target: `http://62.234.3.186/`,
|
||||
changeOrigin: true,
|
||||
|
|
@ -46,7 +46,7 @@ module.exports = defineConfig({
|
|||
}
|
||||
},
|
||||
'/profile':{
|
||||
target: `http://62.234.3.186/profile/`,
|
||||
target: `http://szgc.jhncidg.com/jhapi/profile`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/profile':'/'
|
||||
|
|
|
|||
Loading…
Reference in New Issue