CKQ/src/views/home/components/SensorInfoStatistics.vue

<template>
    <div class="item SensorInfoStatistics">
        <div class="title">
            <span class="name">区域入侵预警<span class="number" style="padding-left:10px;">{{total}}</span></span>
            <span class="detail" @click="linkTo">详情>></span>    
        </div>
        <div class="container">
            <!-- <div id="sensor-info-chart" v-if="status"></div>    -->
            <!-- <div class="warn-item" @click="showWarnModel">
                <div class="tag" v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-{{warnInfo.goafName}}</div>
            </div> -->

            <el-carousel trigger="click" height="120px" indicator-position="none" arrow="always" :autoplay="false" :loop="false">
                <el-carousel-item v-for="(items,index) in warnList" :key="index" >
                    <div class="warn-item-box">
                        <div class="warn-item warning" @click="showWarnModel(item)" v-for="(item,_index) in items" :key="_index">
                            <div class="tag">{{NumConvertLM(item.goafOrebelt)}}-{{item.goafOrebody}}-{{item.goafOreheight}}-{{item.goafName}}</div>
                        </div>                    
                    </div>
                </el-carousel-item>
            </el-carousel>

        </div>
        <div class="video-dialog" v-if="videoDialogVisible">
            <div class="video-dialog-container">
                    <div class="header">
                        <div class="name">
                            <!-- <span v-if="warnInfo.goafName">{{NumConvertLM(warnInfo.goafOrebelt)}}-{{warnInfo.goafOrebody}}-{{warnInfo.goafOreheight}}-{{warnInfo.goafName}}</span> -->
                            <span>区域入侵预警</span>
                        </div>
                        <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
                    </div>
                    <!-- <video :src="video.src" id="video" controls></video> -->
                    <div class="demo-image__preview" v-if="capturePhotos.length>0">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="capturePhotos[0]"
                            :zoom-rate="1.2"
                            :preview-src-list="capturePhotos"
                            :initial-index="4"
                        fit="cover"
                        />
                    </div> 
                    <HkwsVideo ref="HkwsVideo"></HkwsVideo>              
            </div>         
        </div> 
    </div>
</template>
    <script>
     import * as echarts from 'echarts';
     import { goafdevstatis,goafCameraAlarmNumber,goafCameraAlarm} from '@/api/goaf/sensor'
     import { NumConvertLM } from '@/utils'
     import HkwsVideo from '@/components/HkwsVideo/iframe.vue'
      export default {
        name:"SensorInfoStatistics",
        components:{
            HkwsVideo
        },        
        data(){
            return{
                status:true,
                warn_status:0,
                total:0,
                videoDialogVisible:false,
                warnList:[],
                warnInfo:{
                    "goafOrebody": "",
                    "goafOrebelt": "",
                    "goafOreheight": "",
                    "fileUrl": "",
                    "goafDevIp": "",
                    "ocId": undefined,
                    "goafName": ""
                },
                capturePhotos:[],
                option :{
                    title:[
                        {
                            text:"压力",
                            textStyle:{
                                color:'#fff',
                                fontSize:12
                            },
                            left:'26%',
                            bottom:'2px'  
                        },
                        {
                            text:"位移",
                            textStyle:{
                                color:'#fff',
                                fontSize:12
                            },
                            left:'52%',
                            bottom:'2px'  
                        }
                        // ,{
                        //     text:"有害气体",
                        //     textStyle:{
                        //         color:'#fff',
                        //         fontSize:12
                        //     },
                        //     left:'74%',
                        //     bottom:'2px'   
                        // }                        
                    ],
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '1%',
                        left: 'center',
                        textStyle:{
                            color:'#fff'
                        }                        
                    },                  
                    series: [
                        {
                            name: '压力',
                            type: 'pie',
                            radius: ['35%', '50%'],
                            center:['30%', '52%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 1,
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            label: {
                                show: false,
                                color:'#fff',
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 10,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 0, name: '异常',itemStyle:{color:'#D4603C'} },
                                { value: 0, name: '正常' ,itemStyle:{color:'#3CD495'}}
                            ]
                        },
                        {
                            name: '位移',
                            type: 'pie',
                            radius: ['35%', '50%'],
                            center:['55%', '52%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 1,
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            label: {
                                show: false,
                                color:'#fff',
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 10,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 0, name: '异常',itemStyle:{color:'#D4603C'} },
                                { value: 0, name: '正常' ,itemStyle:{color:'#3CD495'}}
                            ]
                        },
                        {
                            name: '有害气体',
                            type: 'pie',
                            radius: ['35%', '50%'],
                            center:['80%', '52%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 1,
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            label: {
                                show: false,
                                color:'#fff',
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 10,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 0, name: '异常',itemStyle:{color:'#D4603C'} },
                                { value: 0, name: '正常' ,itemStyle:{color:'#3CD495'}}
                            ]
                        }                                                 
                    ]
                }
            }
        },
        created(){
            this.$nextTick(()=>{
                this.reload()
            })
        },        
        methods:{
            NumConvertLM,
            init(){
                // var chartDom = document.getElementById('sensor-info-chart');
                // var myChart = echarts.init(chartDom);
                // this.option && myChart.setOption(this.option);      
                // myChart.on('click', (params)=> {
                //     // console.log("SensorInfoStatistics",params)
                //     this.$router.push({
                //         path: '/particulars/sensor',
                //         query: {
                //             id: '1'
                //         }
                //     })
                // });                   
            }
            ,reload(){      
                this.$nextTick(()=>{
                    this.goafCameraAlarmNumber()
                    this.goafCameraAlarm()
                })                 
            },  
            warn(data){
                // this.warnInfo=data
                // $('.SensorInfoStatistics').find('.warn-item').addClass('warning')
                this.goafCameraAlarm()
                this.goafCameraAlarmNumber()
            },  
            showWarnModel(item){
                this.videoDialogVisible=true
                if(item){
                    let warn_info=JSON.parse(JSON.stringify(item))
                    this.warnInfo=warn_info
                    this.warnInfo.fileUrl=warn_info.goafSnapPicurl
                }
                this.capturePhotos=[this.warnInfo.fileUrl]
                let warnInfo=item?item:this.warnInfo
                let state=true
                if(this.isNull(warnInfo.goafDevSocketAddr)){
                    state="未配置推流地址"
                    console.error('未配置推流地址')
                    return
                }
                if(this.isNull(this.warnInfo.goafDevIp)){
                    state="未配置设备IP"
                    console.error(state)
                    return
                }    
                if(this.isNull(this.warnInfo.goafDevPort)){
                    state="未配置设备端口"
                    console.error(state)
                    return
                }
                if(this.isNull(this.warnInfo.goafDevAccount)){
                    state="未配置设备账号"
                    console.error(state)
                    return
                }      
                if(this.isNull(this.warnInfo.goafDevPwd)){
                    state="未配置设备密码"
                    console.error(state)
                    return
                }                 
                this.$nextTick(()=>{
                    this.$refs.HkwsVideo.loadData({
                        streamServeUrl:this.warnInfo.goafDevSocketAddr,
                        szIP: this.warnInfo.goafDevIp,    // protocol ip
                        szPort: this.warnInfo.goafDevPort,            // protocol port
                        szUsername:this.warnInfo.goafDevAccount,     // device username
                        szPassword: this.warnInfo.goafDevPwd, // device password       
                    })
                })
            }, 
            // 获取所有采空区摄像头告警数量  
            goafCameraAlarmNumber(){
                goafCameraAlarmNumber({
                    goafAlarmStatus:0
                }).then((res)=>{
                    this.total=res.data                                   
                })
            },
            //获取所有采空区摄像头告警信息
            goafCameraAlarm(){
                goafCameraAlarm({
                    goafAlarmStatus:0
                }).then((res)=>{
                    this.warnList=this.getDataSource(res.data)                                
                })
            },
            goafdevstatis(){
                let   option  =JSON.parse(JSON.stringify(this.option))
                goafdevstatis().then((res)=>{
                    this.total=res.data.goafDevTotalNum                                   
                })
            },
            linkTo(){
                this.$router.push({
                    path: '/goafCameraAlarm'
                })                
            },
            getDataSource(dataList=[],n=4) {
                let newDataList = []
                let current = 0
                if(dataList && dataList.length>0){
                    for(let i=0;i<=dataList.length-1;i++){
                        if(i%n !== 0 || i === 0 ){
                        if(!newDataList[current]){
                            newDataList.push([dataList[i]])
                        }else{
                            newDataList[current].push(dataList[i])
                        }
                        }else{
                            current++
                            newDataList.push([dataList[i]])
                        }
                    }
                }
                return [...newDataList]
            },            
            isNull(val){
                if(val===undefined||val==="undefined"||val===null||val===""){
                    return true
                }
                return false
            },            
        },
        destroyed() {
            this.status=false
        },        
      }
    </script>
    <style lang="scss" scoped>
    .container{
        height: 12vh;
        #sensor-info-chart{
            width: 95%;
            height: 100%;
        }    
    }
    .demo-image__preview{
        padding:0 0  10px 20px;
    }
    .video-dialog{
        position: fixed;
        z-index: 9999;
        left: 10px;
        top: 0;
        right: 10px;
        bottom: 0;
        background-color: rgba(222, 229, 236, 0.45);
        display: flex;
        justify-content: center;
        align-items: center;
        .video-dialog-container{
            width: 860px;
            height: 70%;
            max-width: 80%;
            background-color: #051933;
            border-radius: 20px;
            margin: 20px auto;
        }
        .name{
            color: #fff;
            font-size: 20px;
            line-height:1 ;  
            text-indent: 20px;        
        }
        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .close{
                height: 50px;
                line-height: 50px;
                display: inline-block;
                padding: 10px 20px;
                cursor: pointer;
                color: #fff;
                font-size: 36px;
            }
        }
        #video{
            display: block;
            width: 80%;
            max-height: 80vh;
            box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
            margin: 10px auto;
        }        
    }
    .warn-item-box{
        display: flex;
        align-items: center;
        .warn-item{
            width: 100px;
            height: 100px;
            position: relative;
            margin-left: 15px;
            display: none;
            .tag{
                width: 110px;
                display: inline-block;
                background: #21649c;
                overflow:hidden; 
                text-overflow:ellipsis; 
                white-space:nowrap; 
                color: #fff;
                text-align: center;
                z-index: 9;
                position: absolute;
                bottom: -4px;
                font-size: 12px;
                line-height: 1;
                padding: 2px 0;
            }   
            &::after{
                display: block;
                content: "";
                height: 60%;
                width: 60%;
                border-radius: 50% 50% 10% 10%;
                position: absolute;
                transform: translate(-50%,-50%);
                left: 50%;
                top: 50%;
                z-index: 9;
                background-image: radial-gradient(#dee7f6, #797878);
                box-shadow: 0 0 20px #fff;
            }             
        }    
        .warning {
            display: block;
            &::after{
                background-image: radial-gradient(yellow,red);
                animation: twinkle 0.5s infinite alternate;
                box-shadow: 0 0 20px red;
            }
        }            
    }

  /*动画*/

@keyframes twinkle {
    0% {opacity: 0.9;}
    50% {opacity: 0.5;}
    100% {opacity: 0;}
}
    </style>