jhbigscreen/src/pages/toAIVideoProject.vue

<template>
    <div class="project-aivideo">        
        <div class="screen-content">
            <el-row>
                <el-col :span="6">
                    <module-one-2-1 label="预警概况">
                        <div class="labour-warning-title">
                            <div class="labour-warning-img">
                                <div class="labour-warning-bgd">
                                    <img src="images/labour_warning_icon.png">
                                </div>
                            </div>
                            <div class="labour-warning-data">
                                <p>今日预警</p>
                                <div class="labour-warning-number">
                                    <span>{{overviewTotalDay}}</span> 次
                                </div>
                            </div>
                            <div class="labour-warning-data">
                                <p>累计预警</p></p></p>
                            <div class="labour-warning-number">
                                <span>{{overviewTotal}}</span> 次
                            </div>
                         </div></div>
                        <project-overview-chart :key="overviewDay" :sp="''" txtTop="12" gifTop="70px" 
                            :maintitle="overviewTotalDay" :legend-opt="legendOpt2" :typedata="typeDistributionDataDay"
                            :text="overviewTextDay" :height="250"></project-overview-chart>

                        <project-overview-chart :key="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>
                    </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">
                                    <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>
                                </div>
                            </div>
                        </div>
                        <div class="ai-content-info-max">
                            <el-row>
                                <el-col  style="position: relative;" :span="8" v-for="(video,index) in videoList">
                                    <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>
                                            <div v-if="video.state" class="style-con style-red"></div>
                                            <div v-if="video.state" class="style-con style-green"></div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="ai-content-padding">
                        <div class="ai-key-videos">
                            <div class="ai-video-title">
                                <div>重点视频</div>
                                <div class="ai-video-number">重点关注 视频（{{majorVideoSize}}）</div>
                            </div>
                            <div class="ai-key-videos-info">
                                <!-- <div class="ai-slip">
                                    <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">
                                        <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: 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>
                                        </div>
                                    </div>

                                </div>
                                <!-- <div class="ai-slip">
                                    <img src="/images/ai/right_slip.png" id="rightSlip">
                                </div> -->
                            </div>
                        </div>
                    </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>
                            <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">
                                            <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>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>       
        </div>
</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 debounce from 'lodash.debounce'
import gsap from 'gsap'
export default {
    data() {
        return {
            active:3,
            scrollLeft:'',
            nav:0,
            alertorId:0,
            videoList:[],
            scaleData:[],
            majorVideoList:[],
            alertorTypeList:[],
            warningList:[],
            distributeData:{},
            ptz: false,
            autoPlay:true,
            popupUrl:'',
            popupShow:false,
            majorVideoSize:0,
            //预警概况
            overview: 0,
            overviewInterval: '',
            overviewTotal: 0,
            legendOpt1: {
                icon: "rect",
                textStyle: {
                    fontSize: 14,
                    color: "#c3dbfd",
                    rich: {
                        name: {
                            color: "#c3dbfd",
                            padding: [0, 20, 0, 0],
                        },
                        percent: {
                            color: "#4676FD"
                        },
                    },
                },
            },
            overviewText: '累计预警',
            //原因类型分析
            availabilityData: [],
            projectCategoryWidth: 200,
            //预警概况
            typeDistributionData: [
                { name: '未戴安全帽', value: '0' },
                { name: '未穿工服', value: '0' },
                { name: '反光衣/带检测', value: '0' }
            ],
            overviewTextDay: '今日预警',
            overviewTotalDay: 0,
            overviewDay: 0,
            legendOpt2: {
                icon: "rect",
                textStyle: {
                    fontSize: 14,
                    color: "#c3dbfd",
                    rich: {
                        name: {
                            color: "#c3dbfd",
                            padding: [0, 20, 0, 0],
                        },
                        percent: {
                            color: "#f73647",
                        },
                    },
                },
            },
            typeDistributionDataDay: [
                { name: '未戴安全帽', value: '0' },
                { 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){
            this.initMe();
        }
        this.$nextTick(()=>{
            this.listAnm();
        });
    },
    created() {
        //this.init()
    },
    computed: {
        playDivCss() {
            return {
                width: (this.width + "").replace("px", "") + "px",
                height: (this.height + "").replace("px", "") + "px",
                position: "relative"
            }
        },
        exStyle() {
            return {
                textAlign: "center",
                width: (this.width + "").replace("px", "") + "px",
                height: (this.height + "").replace("px", "") + "px"
            }
        },
        PTZDiv() {
            let W = parseInt((this.width + "").replace("px", ""))
            let H = parseInt((this.height + "").replace("px", ""))
            if (W < 400) {
                W = "100px"
                H = "100px"
            } else {
                W = "150px"
                H = "150px"
            }
            return {
                backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
                width: W,
                height: H,
                backgroundSize: "100%",
                position: "relative"
            }
        },
        PTZTop() {
            return {
                width: "33%",
                height: "25%",
                position: "absolute",
                top: "0px",
                left: "33%",
                cursor: "pointer"
            }
        },
        PTZBottom() {
            return {
                width: "33%",
                height: "25%",
                position: "absolute",
                bottom: "0px",
                left: "33%",
                cursor: "pointer"
            }
        },
        PTZLeft() {
            return {
                width: "25%",
                height: "33%",
                position: "absolute",
                top: "33%",
                left: "0px",
                cursor: "pointer"
            }
        },
        PTZRight() {
            return {
                width: "25%",
                height: "33%",
                position: "absolute",
                top: "33%",
                right: "0px",
                cursor: "pointer"
            }
        },
        VIBtnCss() {
            return {
                width: "30px",
                height: "30px",
                background: "#38314b",
                border: "1px solid #38314b",
                fontSize: "20px",
                outline: "0",
                color: "#FFFFFF"
            }
        },
        zoomViewCss() {
            return {
                width: "75px",
                height: "30px",
                color: "#dddddd",
                background: "rgba(65, 63, 70, 0.5)",
                textAlign: "center",
                border: "0px solid rgba(65, 63, 70, 0.5)",
                outline: "0",
                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;
            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();
            }
            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<len;i++){
                        list.push({state:false});
                    }
                    this.videoList = list;
                }else{
                    for(let i=0;i<6;i++){
                        list.push({state:false});
                    }
                    this.videoList = list;
                }
            });

        },
        getMajorAiVideoInfoList(){
            // axios.post(Host + "/api/video/getAiVideoInfoList", {
            //     projectId: JSON.parse(localStorage.getItem("data")).aqzg,
            //     majorState: "1",
            //     alertorId: this.alertorId
            // }).then(res => {
            //     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<len;i++){
                        list.push({state:false});
                    }
                    this.majorVideoList = list;
                }else{
                    this.majorVideoSize=0;
                    for(let i=0;i<6;i++){
                        list.push({state:false});
                    }
                    this.majorVideoList = list;
                }
            });
        },
        getAnalysisDetailList(){
            this.$api.aiBoxVideo.listView(this.dept?.id||0,this.projectInfo?.id).then((response) => {
                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"
        }
    }
   
};
</script>

<style lang="less" >
.style-green {
    background: #00c240;
}

.style-con {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #00c240;
    border-radius: 50%;
    top: 15px;
    right: 15px;
    z-index: 1;
}
.active-video{
    border: 1px solid #ddcd04;
}
.imp-video{
    border: 2px solid aqua;
}
.videobo{
    border: 1px solid #655f5f;
}
.project-expect-list{
    width:100%;
    margin-bottom:10px;
}
.project-expect-title-No{
    min-width:100px;
    text-align:left;
}
.project-video {}
.project-expect-info{
    width:50%;
    float:left;
}
.project-expect-info img{
    width:90%;
}
.videoView {
    color: aliceblue;
    float: left;
    width: 50%;
    height: 452.5px;
}
.videoViewError {
    background-color: #575e65;
    text-align: center;
    line-height: 420px;
}
.my-svg-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}

.my-svg-icon * {
    fill: #389DE3;

}

.people-number-con div.is-split {
    background: none;
}

.labour-education .number-unit {
    position: relative;
    bottom: -8px;
}

.number-unit {
    word-break: keep-all;
}

.cost-out {
    .labour-education {
        height: 70px;

        .people-number-con {
            padding: 0px;
        }
    }
}
</style>