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

提交

prv
姜玉琦 2023-10-12 23:13:57 +08:00
parent d73a5a6488
commit ae2719f3c5
6 changed files with 1405 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1272
public/css/sichuanTibet.css 100644
View File

File diff suppressed because it is too large Load Diff

1
public/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="https://cdn.makalu.cc/css/element-ui/index.css"> <link rel="stylesheet" href="https://cdn.makalu.cc/css/element-ui/index.css">
<link rel="stylesheet" href="css/largeScreenLayout.css"> <link rel="stylesheet" href="css/largeScreenLayout.css">
<link rel="stylesheet" href="css/largeScreenStyle.css"> <link rel="stylesheet" href="css/largeScreenStyle.css">
<link rel="stylesheet" href="css/sichuanTibet.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=qmQNEi1qbFX628WfMt4imhdT87RbCRzK"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=qmQNEi1qbFX628WfMt4imhdT87RbCRzK"></script>
<script src="https://cdn.makalu.cc/js/vue/vue.js"></script> <script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script> <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>

2
src/api/index.js
View File

@ -19,6 +19,7 @@ import checkDetection from './checkDetection/index'
import standard from './standard/index' import standard from './standard/index'
import flow from './flow/index' import flow from './flow/index'
import video from './video/index' import video from './video/index'
import aiBoxVideo from './video/aiBoxVideo'
import plan from './plan/index' import plan from './plan/index'
import periodical from './periodical/index' import periodical from './periodical/index'
import {axios,download} from '@/utils/request' import {axios,download} from '@/utils/request'
@ -44,6 +45,7 @@ export default {
checkDetection, checkDetection,
http:axios, http:axios,
video, video,
aiBoxVideo,
standard, standard,
flow, flow,
plan, plan,

20
src/api/video/aiBoxVideo.js 100644
View File

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

2
src/pages/projectVideo.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="project-video"> <div class="project-video">
<div class="screen-content"> <div class="screen-content">
<div class="analyse-equipment analyse-equipment-position">视频监控</div> <!-- <div class="analyse-equipment analyse-equipment-position">视频监控</div> -->
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<module-one-1-1 label="视频概况" :amplify="true" name="amplify-spjk"> <module-one-1-1 label="视频概况" :amplify="true" name="amplify-spjk">

211
src/pages/toAIVideoProject.vue
View File

@ -1,75 +1,80 @@
<template> <template>
<div class="project-aivideo"> <div class="project-aivideo">
<div class="ai-content"> <div class="screen-content">
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<!--<div class="ai-content-padding"> <module-one-1-1 label="预警概况" :amplify="true" name="amplify-spjk">
<div class="ai-video-survey"> <div class="equipment-list-max">
<div class="ai-video-title"> <el-row>
<div>视频概况</div> <el-col :span="12">
</div> <div class="equipment-list-min">
<div class="czz-number"> <div class="equipment-list-gif">
<div class="czz-number-content"> <img src="images/video_1.png">
<div class="czz-number-img czz-number-img-blue"> </div>
<img src="/images/circle_icon_12.png"> <div class="equipment-list-data">
<p>项目监控</p>
<div><span v-cloak>{{ cqNum }}</span>个</div>
</div>
</div> </div>
<div class="survey_content_number"> </el-col>
<p>区域内人数</p> <el-col :span="12">
<div class="survey_content_value"><span>1000</span> 人</div> <div class="equipment-list-min">
<div class="equipment-list-gif">
<img src="images/video_2.png">
</div>
<div class="equipment-list-data">
<p>吊钩监控</p>
<div><span v-cloak>{{ dgNum }}</span>个</div>
</div>
</div> </div>
</div> </el-col>
<div class="czz-number-content"> <el-col :span="12">
<div class="czz-number-img czz-number-img-green"> <div class="equipment-list-min">
<img src="/images/circle_icon_13.png"> <div class="equipment-list-gif">
<img src="images/video_3.png">
</div>
<div class="equipment-list-data">
<p>AI识别监控</p>
<div><span v-cloak>{{ aiNum }}</span>个</div>
</div>
</div> </div>
<div class="survey_content_number"> </el-col>
<p>进入车辆</p> <el-col :span="12">
<div class="survey_content_value survey_content_value_color_green"><span>1000</span> 台</div> <div class="equipment-list-min">
<div class="equipment-list-gif">
<img src="images/video_4.png">
</div>
<div class="equipment-list-data">
<p>离线视频</p>
<div><span v-cloak>{{ offLineNum }}</span>个</div>
</div>
</div> </div>
</div> </el-col>
</el-row>
</div>
</module-one-1-1>
<module-one-2-1 label="预警分布">
<div class="video-field-layout" :style="videoMapStyle">
<div class="video-bgd-img-position" :style="{ 'top': video.x + 'px', 'left': video.y + 'px' }"
v-for="video in VideoDistribution" @click="videoPlay(video)">
<div :class="video.type == true ? 'video-bgd-div active' : 'video-bgd-div'"></div>
<img src="/images/camera.png" class="video-bgd-img">
</div> </div>
</div> </div>
</div>--> </module-one-2-1>
<div class="ai-content-padding">
<div class="ai-warning-distribution">
<div class="ai-video-title">
<div>预警概况</div>
</div>
<div style="padding-top: 90px;">
<project-overview-chart :typedata="scaleData" text="预警总次数" :height="230"></project-overview-chart>
</div>
<!-- <cz-warning-survey :height="425" :distribute="scaleData"></cz-warning-survey>-->
</div>
</div>
<div class="ai-content-padding">
<div class="ai-warning-distribution">
<div class="ai-video-title">
<div>预警分布</div>
</div>
<cz-distribution-echart :height="455" :distribute="distributeData"></cz-distribution-echart>
</div>
</div>
</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-video-info-return" @click="goVideoPage">
<img src="/images/return_icon.png"><span>返回视频管理</span>
</div>-->
<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"> <div class="ai-content-nav-min" v-for="(alertorType,index) in alertorTypeList">
<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.alertor_id)" v-html="alertorType.alertor_type_name"> <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>
<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"> <el-col style="position: relative;" :span="8" v-for="(video,index) in videoList">
@ -94,9 +99,9 @@
<div class="ai-video-number">重点关注 视频（<span v-html="majorVideoList.length">0</span>）</div> <div class="ai-video-number">重点关注 视频（<span v-html="majorVideoList.length">0</span>）</div>
</div> </div>
<div class="ai-key-videos-info" style="height: 80%;"> <div class="ai-key-videos-info" style="height: 80%;">
<!--<div class="ai-slip"> <div class="ai-slip">
<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"> <div class="ai-key-videos-max" style="position: relative;" v-for="(video,index) in majorVideoList">
<div class="ai-key-videos-min"> <div class="ai-key-videos-min">
@ -110,45 +115,45 @@
</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">
</div>--> </div>
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="ai-content-padding"> <module-one-3-1 label="预警列表">
<div class="ai-warning-list"> <div class="nav-info" style="padding:20px 20px 10px">
<div class="ai-video-title"> <div class="company-project-introduction" @click="projectIntroduction">
<div>预警列表</div> <span>预警总数:（0）</span>
<div class="ai-video-number">预警总数（<span v-html="warningList.length">0</span>）</div>
</div> </div>
<div class="ai-warning-list-content"> </div>
<div class="ai-warning-list-max" id="warningListMax"> <div class="acceptance-item" v-for="(it,idx) in acceptanceData" :key="idx" style="cursor: pointer;">
<div id="warningListMin"> <div class="row-1">
<div class="ai-warning-list-min" v-for="item in warningList" > <div class="div-img">
<div class="ai-warning-list-info"> <el-image src="getProfileImage(it.mainImage)" :preview-src-list="getBigProfileImage(it)"/></div>
<div class="ai-warning-list-title"> <div class="div-text" style="width: 65%;" @click="doShowChecking(it)">
<div v-html="item.dateTime"></div> <div class="row-3">
<img src="/images/ai/open.png" @click="amplify(item.photo)"> <div v-if="it.checkResult=='1'" class="sp-lbl">验收合格</div>
</div> <div v-if="it.checkResult=='2'" class="sp-err">验收不合格</div>
<div class="ai-warning-list-details"> <div class="sp-date">{{it.checkingDate}}</div>
<div class="ai-warning-list-details-img"> </div>
<img :src="item.photo"> <div class="row-3">
</div> <span class="sp-label">项目:</span>
<div class="ai-warning-list-details-con"> <span class="sp-text">{{it.projectName}}</span>
<p v-html="item.alertor_type_name"></p> </div>
<div v-html="item.stream_name"></div> <div class="row-3">
</div> <span class="sp-label">区域:</span>
</div> <span class="sp-text">{{it.checkWorkingPosition}}</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="row-5" @click="doShowChecking(it)">
</div> 验收描述:{{it.intro}}
</div>
</div>
</module-one-3-1>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -156,7 +161,6 @@
</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'
@ -333,27 +337,30 @@ export default {
this.popupShow = true this.popupShow = true
}, },
getAlertorTypeList(){ getAlertorTypeList(){
axios.post(Host + "/api/video/getAiVideoAlertorTypes", { // axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
projectId: JSON.parse(localStorage.getItem("data")).aqzg // projectId: JSON.parse(localStorage.getItem("data")).aqzg
}).then(res => { // }).then(res => {
var list = [{'alertor_id': 0,'alertor_type': "", 'alertor_type_name': "全部"}]; // var list = [{'alertor_id': 0,'alertor_type': "", 'alertor_type_name': "全部"}];
var data = res.data; // var data = res.data;
data.forEach(item =>{ // data.forEach(item =>{
list.push(item) // list.push(item)
}) // })
if(JSON.parse(localStorage.getItem("data")).id == "98") { // if(JSON.parse(localStorage.getItem("data")).id == "98") {
var newArr = []; // var newArr = [];
newArr.push(list[0]); // newArr.push(list[0]);
newArr.push(data[1]) // newArr.push(data[1])
newArr.push(data[3]) // newArr.push(data[3])
newArr.push(data[2]) // newArr.push(data[2])
newArr.push(data[0]) // newArr.push(data[0])
this.alertorTypeList = newArr; // this.alertorTypeList = newArr;
} else { // } else {
this.alertorTypeList = list; // this.alertorTypeList = list;
} // }
}).catch(err => { // }).catch(err => {
// })
this.$api.dict('aibox_alarm_type').then(d => {
this.alertorTypeList = d || [];
}) })
}, },
getAiVideoInfoList(){ getAiVideoInfoList(){