From c3c065d4a3caab47465dd0190b413e477ff9f991 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E7=8E=89=E7=90=A6?=
<7507756+jiang_yuqi@user.noreply.gitee.com>
Date: Sun, 15 Oct 2023 15:43:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/toAIVideoProject.vue | 673 +++++++++++++++++----------------
1 file changed, 345 insertions(+), 328 deletions(-)
diff --git a/src/pages/toAIVideoProject.vue b/src/pages/toAIVideoProject.vue
index 17540c6..8f5b6f6 100644
--- a/src/pages/toAIVideoProject.vue
+++ b/src/pages/toAIVideoProject.vue
@@ -22,7 +22,7 @@
{{overviewTotal}} 次
-
@@ -189,19 +189,19 @@ export default {
],
overviewTextDay: '今日预警',
overviewTotalDay: 0,
- overviewDay: 999,
+ overviewDay: 0,
legendOpt2: {
icon: "rect",
textStyle: {
fontSize: 14,
+ color: "#c3dbfd",
rich: {
name: {
color: "#c3dbfd",
- padding: [10, 5, 20, 5],
+ padding: [0, 20, 0, 0],
},
percent: {
color: "#f73647",
- padding: [10, 5, 20, 5],
},
},
},
@@ -211,19 +211,26 @@ export default {
{ name: '未穿工服', value: '0' },
{ name: '反光衣/带检测', value: '0' }
],
+ initfunc:null
}
},
mounted() {
this.$bus.$on("projectChange", debounce(res => {
this.projectInfo=res;
+ console.log("项目改变");
+ console.log(this.projectInfo);
this.init();
}));
this.$bus.$on("loadProjects", debounce(prjs => {
this.projectInfos = prjs;
+ console.log("项目加载");
+ console.log(this.projectInfos);
this.init();
}))
this.$bus.$on("deptChange", debounce(dept => {
this.dept = dept;
+ console.log("部门改变");
+ console.log(this.dept);
this.init();
}));
if(this.$root.hasInitHeader){
@@ -234,7 +241,7 @@ export default {
});
},
created() {
- this.init()
+ //this.init()
},
computed: {
playDivCss() {
@@ -351,7 +358,7 @@ export default {
el.scrollTop=0;
}
}
- this.listTimer=setTimeout(func,100);
+ this.listTimer=setTimeout(func,120);
}
func();
},
@@ -359,338 +366,348 @@ export default {
this.projectInfo=this.$root.project;
this.dept=this.$root.dept;
this.projectInfos=this.$root.projects;
+ console.log("initMe");
+ this.init();
},
init(){
+ clearTimeout(this.initfunc);
+ let initfunc=()=>{
this.getAlertorTypeList();
this.getAiVideoInfoList("","");
this.getMajorAiVideoInfoList();
this.getAnalysisDetailList();
this.getAiVideoAlertorTypeCount();
this.initAiVideoAlertorTypeDistribution();
- },
- //head选择项目返回值
- onItemData(e){
- if(e.type == 1){
- location.href = '/weixin/screen/toVideo'
- }else{
- location.href = '/weixin/screen/toVideoProject'
- }
- },
- amplify(url){
- this.popupUrl = url
- this.popupShow = true
- },
- getAlertorTypeList(){
- // axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
- // projectId: JSON.parse(localStorage.getItem("data")).aqzg
- // }).then(res => {
- // var list = [{'alertor_id': 0,'alertor_type': "", 'alertor_type_name': "全部"}];
- // var data = res.data;
-
- // data.forEach(item =>{
- // list.push(item)
- // })
- // if(JSON.parse(localStorage.getItem("data")).id == "98") {
- // var newArr = [];
- // newArr.push(list[0]);
- // newArr.push(data[1])
- // newArr.push(data[3])
- // newArr.push(data[2])
- // newArr.push(data[0])
- // this.alertorTypeList = newArr;
- // } else {
- // this.alertorTypeList = list;
- // }
- // }).catch(err => {
- // })
- 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";
- }else{
- return null;
- }
- },
- getAiVideoInfoList(passageType,importance){
- // axios.post(Host + "/api/video/getAiVideoInfoList", {
- // projectId:JSON.parse(localStorage.getItem("data")).aqzg,
- // alertorId: this.alertorId
- // }).then(res => {
- // var data = res.data;
- // if(data.length < 6){
- // var len = 6 - data.length
- // for (let i = 0; i < len ; i++) {
- // data.push({})
- // }
- // }
- // this.videoList = data;
- // }).catch(err => {
- // })
- this.$api.aiBoxVideo.getVideoPassage(this.dept?.id||0,this.projectInfo?.projectId||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})
- });
- });
- //补全
- let len = 6 - list.length
- for(let i=0;i {
- // var data = res.data;
- // /*if(data.length < 4){
- // var len = 4 - data.length
- // for (let i = 0; i < len ; i++) {
- // data.push({})
- // }
- // }*/
- // this.majorVideoList = data;
- // }).catch(err => {
- // })
- this.$api.aiBoxVideo.getVideoPassage(this.dept?.id||0,this.projectInfo?.projectId||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})
- });
- });
- this.majorVideoSize = list.length;
- //补全
- let len = 3 - list.length;
- for(let i=0;i {
- this.warningList = response.data||[];
- });
-
- },
- getAiVideoAlertorTypeCount(){
- // axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", {
- // projectId: JSON.parse(localStorage.getItem("data")).aqzg
- // }).then(res => {
- // var data = res.data;
- // var num = 0;
- // data.forEach(item =>{
- // num += item.value;
- // })
- // data.forEach(item =>{
- // item.percent = (item.value/num*100)
- // })
- // this.scaleData = data;
- // }).catch(err => {
- // })
-
- //今日视图
- this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.projectId,"Y").then((response) => {
- if(response.data){
- let sum = 0;
- response.data.forEach(datum => {
- sum+=datum.value;
- })
- this.overviewTotalDay = sum;
- this.typeDistributionDataDay = response.data;
- this.overviewDay++;
- }
- });
-
- //累计视图
- this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.projectId,"N").then((response) => {
- if(response.data){
- let sum = 0;
- response.data.forEach(datum => {
- sum+=datum.value;
- })
- this.overviewTotal = sum;
- this.typeDistributionData = response.data;
- this.overview++;
- }
- });
- },
- initAiVideoAlertorTypeDistribution(){
- this.$api.aiBoxVideo.selectGroupCountVideoConfig(this.dept?.id||0,this.projectInfo?.projectId).then((response) => {
- let list=[];
- if(response.data){
- let sum = 0;
- response.data.forEach(datum => {
- sum += datum.value;
- })
- response.data.forEach(datum => {
- datum.text = datum.name;
- datum.prop = (datum.value/sum*100).toFixed(2)
- list.push(datum);
- })
- this.availabilityData = list;
- }
- });
- },
- getAiVideoAlertorTypeWarningCount(){
- axios.post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", {
- projectId: JSON.parse(localStorage.getItem("data")).aqzg
- }).then(res => {
- //预警分布
- var distributeData={
- legend:["接入视频", "预警路数"],
- color:[],
- yAxis:[],
- 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)
- })
- 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 => {
- })
- },
- aiNav(n,id){
- this.nav = n
- this.alertorId = id;
- this.getAiVideoInfoList(this.alertorId,"");
- },
- getImageUrl(it){
- return '/jhapi' + it.imageUrl + ".min.jpg";
- },
- //预警概况 Echart
- warningChart(data,id){
- let newPromise = new Promise((resolve) => {
- resolve()
- })
- //然后异步执行echarts的初始化函数
- newPromise.then(() => {
- var myChart = echarts.init(document.getElementById(id));
- option = {
- color: [
- "#00fff1",
- "#04c8fa",
- "#aa01fe",
- "#4e84fe",
- "#ff7b79",
- "#edae5e",
- "#fe4101",
- "#14d18f",
- ],
- series: [
- // 主要展示层的
- {
- radius: ["45%", "60%"],
- center: ["50%", "50%"],
- type: "pie",
- label: {
- normal: {
- show: true,
- formatter: function (params) {
- return params.value +" "+ params.percent + "%\n{white|" +params.name +"}" ;
- },
- rich:{
- white: {
- color: "#c5d9fe",
- align: "center",
- padding: [0,0,5],
- },
- },
- textStyle: {
- fontSize: 14,
- },
- position: "outside",
- },
- emphasis: {
- show: true,
- },
- },
- labelLine: {
- normal: {
- show: true,
- length: 20,
- length2: 25,
- },
- emphasis: {
- show: true,
- },
- },
- data: data,
- },
- {
- name: "外边框",
- type: "pie",
- clockWise: false, //顺时加载
- hoverAnimation: false, //鼠标移入变大
- center: ["50%", "50%"],
- radius: ["70%", "70%"],
- label: {
- normal: {
- show: false,
- },
- },
- data: [
- {
- value: 1,
- name: "",
- itemStyle: {
- normal: {
- borderWidth: 3,
- borderColor: "#57639d",
- },
- },
- },
- ],
- },
- ],
- };
- myChart.setOption(option);
- window.onresize = myChart.resize;
- })
- },
- goVideoPage() {
- location.href="/weixin/screen/toVideoProject"
}
+ this.initfunc = setTimeout(initfunc, 50); // 定时时间
+ },
+ //head选择项目返回值
+ onItemData(e){
+ if(e.type == 1){
+ location.href = '/weixin/screen/toVideo'
+ }else{
+ location.href = '/weixin/screen/toVideoProject'
+ }
+ },
+ amplify(url){
+ this.popupUrl = url
+ this.popupShow = true
+ },
+ getAlertorTypeList(){
+ // axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
+ // projectId: JSON.parse(localStorage.getItem("data")).aqzg
+ // }).then(res => {
+ // var list = [{'alertor_id': 0,'alertor_type': "", 'alertor_type_name': "全部"}];
+ // var data = res.data;
+
+ // data.forEach(item =>{
+ // list.push(item)
+ // })
+ // if(JSON.parse(localStorage.getItem("data")).id == "98") {
+ // var newArr = [];
+ // newArr.push(list[0]);
+ // newArr.push(data[1])
+ // newArr.push(data[3])
+ // newArr.push(data[2])
+ // newArr.push(data[0])
+ // this.alertorTypeList = newArr;
+ // } else {
+ // this.alertorTypeList = list;
+ // }
+ // }).catch(err => {
+ // })
+ 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";
+ }else{
+ return null;
+ }
+ },
+ getAiVideoInfoList(passageType,importance){
+ // axios.post(Host + "/api/video/getAiVideoInfoList", {
+ // projectId:JSON.parse(localStorage.getItem("data")).aqzg,
+ // alertorId: this.alertorId
+ // }).then(res => {
+ // var data = res.data;
+ // if(data.length < 6){
+ // var len = 6 - data.length
+ // for (let i = 0; i < len ; i++) {
+ // data.push({})
+ // }
+ // }
+ // this.videoList = data;
+ // }).catch(err => {
+ // })
+ 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})
+ });
+ });
+ //补全
+ let len = 6 - list.length
+ for(let i=0;i {
+ // var data = res.data;
+ // /*if(data.length < 4){
+ // var len = 4 - data.length
+ // for (let i = 0; i < len ; i++) {
+ // data.push({})
+ // }
+ // }*/
+ // this.majorVideoList = data;
+ // }).catch(err => {
+ // })
+ 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})
+ });
+ });
+ this.majorVideoSize = list.length;
+ //补全
+ let len = 3 - list.length;
+ for(let i=0;i {
+ this.warningList = response.data||[];
+ });
+
+ },
+ getAiVideoAlertorTypeCount(){
+ // axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", {
+ // projectId: JSON.parse(localStorage.getItem("data")).aqzg
+ // }).then(res => {
+ // var data = res.data;
+ // var num = 0;
+ // data.forEach(item =>{
+ // num += item.value;
+ // })
+ // data.forEach(item =>{
+ // item.percent = (item.value/num*100)
+ // })
+ // this.scaleData = data;
+ // }).catch(err => {
+ // })
+
+ //今日视图
+ this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.id,"Y").then((response) => {
+ if(response.data){
+ let sum = 0;
+ response.data.forEach(datum => {
+ sum+=datum.value;
+ })
+ this.overviewTotalDay = sum;
+ this.typeDistributionDataDay = response.data;
+ this.overviewDay++;
+ }
+ });
+
+ //累计视图
+ this.$api.aiBoxVideo.groupCountByAlarmType(this.dept?.id||0,this.projectInfo?.id,"N").then((response) => {
+ if(response.data){
+ let sum = 0;
+ response.data.forEach(datum => {
+ sum+=datum.value;
+ })
+ this.overviewTotal = sum;
+ this.typeDistributionData = response.data;
+ this.overview++;
+ }
+ });
+ },
+ initAiVideoAlertorTypeDistribution(){
+ 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 => {
+ sum += datum.value;
+ })
+ response.data.forEach(datum => {
+ datum.text = datum.name;
+ if(sum==0){
+ datum.prop = 0.0;
+ }else{
+ 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 => {
+ //预警分布
+ var distributeData={
+ legend:["接入视频", "预警路数"],
+ color:[],
+ yAxis:[],
+ 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)
+ })
+ 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 => {
+ })
+ },
+ aiNav(n,id){
+ this.nav = n
+ this.alertorId = id;
+ this.getAiVideoInfoList(this.alertorId,"");
+ },
+ getImageUrl(it){
+ return '/jhapi' + it.imageUrl + ".min.jpg";
+ },
+ //预警概况 Echart
+ warningChart(data,id){
+ let newPromise = new Promise((resolve) => {
+ resolve()
+ })
+ //然后异步执行echarts的初始化函数
+ newPromise.then(() => {
+ var myChart = echarts.init(document.getElementById(id));
+ option = {
+ color: [
+ "#00fff1",
+ "#04c8fa",
+ "#aa01fe",
+ "#4e84fe",
+ "#ff7b79",
+ "#edae5e",
+ "#fe4101",
+ "#14d18f",
+ ],
+ series: [
+ // 主要展示层的
+ {
+ radius: ["45%", "60%"],
+ center: ["50%", "50%"],
+ type: "pie",
+ label: {
+ normal: {
+ show: true,
+ formatter: function (params) {
+ return params.value +" "+ params.percent + "%\n{white|" +params.name +"}" ;
+ },
+ rich:{
+ white: {
+ color: "#c5d9fe",
+ align: "center",
+ padding: [0,0,5],
+ },
+ },
+ textStyle: {
+ fontSize: 14,
+ },
+ position: "outside",
+ },
+ emphasis: {
+ show: true,
+ },
+ },
+ labelLine: {
+ normal: {
+ show: true,
+ length: 20,
+ length2: 25,
+ },
+ emphasis: {
+ show: true,
+ },
+ },
+ data: data,
+ },
+ {
+ name: "外边框",
+ type: "pie",
+ clockWise: false, //顺时加载
+ hoverAnimation: false, //鼠标移入变大
+ center: ["50%", "50%"],
+ radius: ["70%", "70%"],
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ data: [
+ {
+ value: 1,
+ name: "",
+ itemStyle: {
+ normal: {
+ borderWidth: 3,
+ borderColor: "#57639d",
+ },
+ },
+ },
+ ],
+ },
+ ],
+ };
+ myChart.setOption(option);
+ window.onresize = myChart.resize;
+ })
+ },
+ goVideoPage() {
+ location.href="/weixin/screen/toVideoProject"
}
+ }
};