<template>
    <div class="biology">
       <div class="flex">
           <div class="left">
               <div class="wrapper">
                   <div class="chart-tab-t">
                       <div class="chart-tab-title">每日人员流动情况</div>
                   </div>
                   <div class="wrapper-content">
                       <div ref="chartLeft1" style="width: 100%; height: 100%"></div>
                   </div>
               </div>
               <div class="wrapper">
                   <div class="chart-tab-t">
                       <div class="chart-tab-title">每周人员流动情况</div>
                   </div>
                   <div class="wrapper-content">
                       <div ref="chartLeft2" style="width: 100%; height: 100%"></div>
                   </div>
               </div>
           </div>
           <div class="center">
               <div class="line1">
                   <div class="today">{{date}}</div>
                   <div class="test">生物防控</div>
               </div>
               <div class="line2">
                   <div class="msg-tab-body">
                       <div class="msg-list-content" v-for="(item, i) in outList" :key="i" @click="setOut(item)">
                           <div class="msg-tab-list">
                               <div class="man-dothis">
                                   <img v-if="item.image" class="man-img" :src="item.image" alt="">
                                   <img v-else  class="man-img" src="../../assets/user1.png" alt="">
                               </div>
                               <div class="this-content">
                                   <span class="finish-time">{{item.time}}</span>
                                   <span class="username">{{item.userName}} </span>
                                   <span class="agent"> {{item.sbName}} 人脸识别终端</span>
                                   <span class="gotype">外出</span>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="msg-detail">
                       <div class="jk-img">
                           <img :src="outFirst.image" class="img-size" alt="">
                       </div>
                       <div class="jk-info-list">
                           <div class="jk-info-item">姓名：<span style="color: white; font-size: 16px;">{{outFirst.userName ? outFirst.userName : ''}}</span></div>
                           <div class="jk-info-item">终端名称：<span style="color: white; font-size: 16px;">{{outFirst.userName ? '人脸识别' : ''}}</span></div>
                           <div class="jk-info-item">出入方式：<span style="color: white; font-size: 16px;">{{outFirst.sbName ? outFirst.sbName : ''}}{{outFirst.sbName ? '人脸识别终端外出' : ''}}</span></div>
                           <div class="jk-info-item">出入时间：<span style="color: white; font-size: 16px;">{{outFirst.time ? outFirst.time : ''}}</span></div>
                       </div>
                   </div>
               </div>
           </div>
           <div class="right">
               <div class="wrapper">
                   <div class="tab-t">
                       <div class="right-tabs">
                           <div class="log-tab">视频监控</div>
                       </div>
                   </div>
                    <!-- 视频监控 -->
                   <div v-show="active === 1" class="switch-tab-list">
                       <div class="play-box-content" v-for="(item, i) in spjkList" :key="i">
                           <iframe :class="activeClass == i ? 'actived' : ''" :src="'static/index.html?'+'1'+'&' + item.wsUrl  +'&'+ item.rtspUrl + '&' + '100%' + '&' + i" frameborder="0"  style="height: 100%; width: 100%"></iframe>
                       </div>
                   </div>
               </div>
           </div>
       </div>
        <div class="flex-bottom">
            <div class="chart-tab-t">
                <div class="chart-tab-title">访问统计</div>
            </div>
            <div class="box-visit">
                <!-- 每日统计访问 -->
                <div class="col-30">
                    <div ref="chartBottom1" style="width: 100%; height: 100%"></div>
                </div>
                <!-- 每周统计访问 -->
                <div class="col-30">
                    <div ref="chartBottom2" style="width: 100%; height: 100%"></div>
                </div>
                <!-- 每月统计访问 -->
                <div class="col-30">
                    <div ref="chartBottom3" style="width: 100%; height: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import utils  from "../../utils/utils";
export default {
    name: "biology",
    components: {},
    data() {
        return {
            date: '',
            active: 1,
            activeClass: -1,
            spjkList: [
                {
                    wsUrl: 'ws://183.246.182.241:10080/camera_relay?tcpaddr=admin%3Atx123456%40192.168.1.2',
                    rtspUrl: 'rtsp://admin:tx123456@192.168.1.2'
                },
                {
                    wsUrl: 'ws://183.246.182.241:10080/camera_relay?tcpaddr=admin%3Atx123456%40192.168.1.23',
                    rtspUrl: 'rtsp://admin:tx123456@192.168.1.23'
                }
            ],
            data_rycr_legend: [], // 时间
            outData: [], // 外出人数
            enterData: [], // 进入人数
            // 每日进入人数
            options_stztzfb: {
                color:['#b93b6a'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },


                },
                grid: {
                    x: '3%',
                    y: '13%',
                    x2: '5%',
                    y2: '5%',
                    containLabel: true

                },
                legend: {
                    data: ['进入人数'],
                    icon:'circle',
                    itemGap: 5,
                    itemWidth:10,
                    top: '2%',
                    x:'center',
                    textStyle:{

                        color:'#ccf5f9',
                    },
                },
                xAxis :{
                    type : 'category',
                    data : [],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#4865e3',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#ccf5f9',

                        },

                    }

                },
                yAxis :{
                    type : 'value',
                    scale: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#4865e3',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },
                    splitLine:{
                        lineStyle: {
                            type: 'solid',
                            color: 'rgba(72,101,227,0.7)',
                            width:'1'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#ccf5f9',

                        },

                    }
                },
                dataZoom: [{
                    type: 'inside',
                    start: 80,
                    end: 100
                }],
                series : [
                    {
                        name:"进入人数",
                        type:'bar',
                        barWidth: '30%',
                        data: [],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#ccf5f9',
                                        fontSize: 12
                                    },
                                    formatter: '{c}'
                                }
                            }
                        },
                    }
                ]
            },
            // 每周进入情况
            options_mrldqk: {
                color:['#b93b6a'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },


                },
                grid: {
                    x: '3%',
                    y: '13%',
                    x2: '5%',
                    y2: '5%',
                    containLabel: true

                },
                legend: {
                    data: ['进入人数'],
                    icon:'circle',
                    itemGap: 5,
                    itemWidth:10,
                    top: '2%',
                    x:'center',
                    textStyle:{

                        color:'#ccf5f9',
                    },
                },
                xAxis :{
                    type : 'category',
                    data : [],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#4865e3',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#ccf5f9',

                        },

                    }

                },
                yAxis :{
                    type : 'value',
                    scale: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#4865e3',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },
                    splitLine:{
                        lineStyle: {
                            type: 'solid',
                            color: 'rgba(72,101,227,0.7)',
                            width:'1'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#ccf5f9',

                        },

                    }
                },
                dataZoom: [{
                    type: 'inside',
                    start: 80,
                    end: 100
                }],
                series : [
                    {
                        name:"进入人数",
                        type:'bar',
                        barWidth: '30%',
                        data: [],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#ccf5f9',
                                        fontSize: 12
                                    },
                                    formatter: '{c}'
                                }
                            }
                        },
                    }
                ]
            },
            // 每日访问
            options_mrfw: {
                title: {
                    left: 'center',
                    text: '每日访问统计',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid:{
                    x:40,
                    y:45,
                    x2:40,
                    y2:30,

                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    axisLabel:{
                        color:"#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },

                },
                yAxis: {
                    type: 'value',
                    name: '次数',
                    axisLabel:{
                        color:"#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },
                    splitLine:{
                        lineStyle: {
                            type: 'solid',
                            color: '#1c3860',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },

                },
                series: {
                    name:'每日访问统计',
                    type:'line',
                    data:[],
                }
            },
            // 每周访问
            options_mzfw: {
                title: {
                    left: 'center',
                    text: '每周访问统计',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid:{
                    x:40,
                    y:45,
                    x2:40,
                    y2:30,

                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    axisLabel:{
                        color:"#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },

                },
                yAxis: {
                    type: 'value',
                    name: '次数',
                    axisLabel:{
                        color:"#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },
                    splitLine:{
                        lineStyle: {
                            type: 'solid',
                            color: '#1c3860',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },

                },
                series: {
                    name:'每周访问统计',
                    type:'line',
                    data:[],
                }
            },
            // 每月访问
            options_myfw: {
                title: {
                    left: 'center',
                    text: '每月访问统计',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid:{
                    x:40,
                    y:45,
                    x2:40,
                    y2:30,

                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    axisLabel:{
                        color:"#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },

                },
                yAxis: {
                    type: 'value',
                    name: '次数',
                    axisLabel:{
                        color:"#fff",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },
                    splitLine:{
                        lineStyle: {
                            type: 'solid',
                            color: '#1c3860',//左边线的颜色
                            width:'1'//坐标线的宽度
                        }
                    },

                },
                series: {
                    name:'每月访问统计',
                    type:'line',
                    data:[],
                }
            },
            // 闸机进出
            outList: [],
            // 默认第一位
            outFirst: {
                image: '',
                sbName: '',
                time: '',
                userName: ''
            }
        }
    },
    watch: {
        active(newVal) {
            if(newVal) {
                // console.log(newVal);
            } else {
                console.log('没有改变');
            }
        }
    },
	  methods: {
        init() {
            this.$axios.get('http://122.112.252.100:8081/face/findDb?timeHorizon=oneDay')
            .then(res => {
                let timeArr = [];
                let valueArr = [];
                    res.data.object.forEach(item => {
                        timeArr.push(item.key);
                        valueArr.push(item.value);
                    });
                    this.options_mrfw.xAxis.data = timeArr;
                    this.options_stztzfb.xAxis.data = timeArr;
                    this.options_mrfw.series.data = valueArr;
                    this.options_stztzfb.series[0].data = valueArr;
                    const chartBottom1 = this.$refs.chartBottom1;
                    const myChartBottom1 = this.$echarts.init(chartBottom1);
                    myChartBottom1.setOption(this.options_mrfw);
                    const chartLeft1 = this.$refs.chartLeft1;
                    const myChartLeft1 = this.$echarts.init(chartLeft1);
                    myChartLeft1.setOption(this.options_stztzfb);

            });
            this.$http.get('http://122.112.252.100:8081/face/findDb?timeHorizon=oneWeek')
            .then(res => {
                let timeArr = [];
                let valueArr = [];
                let arr;
                // console.log(res);
                    arr =  res.object.reverse();
                    arr.forEach(item => {
                        timeArr.push(item.key);
                        valueArr.push(item.value);
                    });
                    this.options_mzfw.xAxis.data = timeArr;
                    this.options_mrldqk.xAxis.data = timeArr;
                    this.options_mzfw.series.data = valueArr;
                    this.options_mrldqk.series[0].data = valueArr;
                    const chartBottom2 = this.$refs.chartBottom2;
                    const myChartBottom2 = this.$echarts.init(chartBottom2);
                    myChartBottom2.setOption(this.options_mzfw);
                    const chartLeft2 = this.$refs.chartLeft2;
                    const myChartLeft2 = this.$echarts.init(chartLeft2);
                    myChartLeft2.setOption(this.options_mrldqk);

            });
            this.$http.get('http://122.112.252.100:8081/face/findDb?timeHorizon=oneYear')
                    .then(res => {
                        let timeArr = [];
                        let valueArr = [];

                            res.object.forEach(item => {
                                timeArr.push(item.key);
                                valueArr.push(item.value);
                            });
                            this.options_myfw.xAxis.data = timeArr;
                            this.options_myfw.series.data = valueArr;
                            const chartBottom3 = this.$refs.chartBottom3;
                            const myChartBottom3 = this.$echarts.init(chartBottom3);
                            myChartBottom3.setOption(this.options_myfw);

                    });
        },
        setOut(item) {
            this.outFirst = item;
        }

    },
    created() {
    },
    mounted() {
        let date = Date.parse(new Date());
        this.date = utils.timestamp(date);
        this.init();
        this.$http.get('http://122.112.252.100:8081/face/findEnd')
                .then(res => {
                    this.outList = res.object;
                    this.outFirst = res.object[0];
                })
    }
};
</script>

<style lang="scss" scope>
.biology {
    box-sizing: border-box;
    flex-grow: 1;
    color: #eee;
    padding: 20px;
    .flex  {
        display: flex;
        margin-bottom: 20px;
        .left {
            flex: 0 1 475px;
            .wrapper {
                height: 270px;
                /*background-color: #001346;*/
                overflow: hidden;
                /*background-image: url('../../assets/box_bg.png');*/
                /*background-size: 100% 270px;*/
                border-radius: 8px;
                margin-bottom: 20px;
                .chart-tab-t {
                    /*height: 40px;*/
                    padding-left: 80px;
                    background-color: #0E1E51;
                    line-height: 28px;
                    .chart-tab-title {
                        position: relative;
                        padding-left: 10px;
                    }
                    .chart-tab-title:before {
                        content: '';
                        width: 14px;
                        height: 14px;
                        border-radius: 50%;
                        position: absolute;
                        left: -20px;
                        top: 50%;
                        background-color: #fff;
                        transform: translateY(-50%);
                        -ms-transform: translateY(-50%);
                        -moz-transform: translateY(-50%);
                        -webkit-transform: translateY(-50%);
                        -o-transform: translateY(-50%);
                    }
                }
                .wrapper-content {
                    height: calc(100% - 27.5px);
                    position: relative;
                    background-color: #0D1943;
                }
            }
            .wrapper:last-child {
                margin-bottom: 0;
            }
        }
        .right {
            flex: 0 1 475px;
            .wrapper {
                border-radius: 6px;
                height: 100%;
                background-color: #001346;
                overflow: hidden;
                .tab-t {
                    height: 40px;
                    line-height: 40px;
                    background-color: #0f215c;
                    .right-tabs {
                        height: 40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .log-tab {
                            width: 100%;
                            height: 36px;
                            text-align: center;
                            background-color: #53BAFD;
                            color: #fff;
                            border-right: 2px solid #ddd;
                            cursor: pointer;
                        }
                        .active {
                        }
                    }
                }
                .switch-tab-list {
                    height: 480px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    .play-box-content {
                        width: 90%;
                        height: 48%;
                        text-align: center;
                        .play-box-img {
                            height: 100%;
                        }
                    }
                }
            }
        }
        .center {
            flex-grow: 1;
            padding: 0 10px;
            box-sizing: border-box;
            .line1 {
                width: 100%;
                /*text-align: center;*/
                font-size: 1.3em;
                display: flex;
                margin-bottom: 10px;
                .today {
                    width: 50%;
                    padding-left: 5%;
                    position: relative;
                    /*box-sizing: content-box;*/
                }
                .today:after {
                    content: '';
                    height: 0px;
                    width: 52%;
                    border: 1px solid #06dfff;
                    position: absolute;         /*定位背景横线的位置*/
                    top: 40%;
                    left: 40%;
                }
                .test {
                    width: 50%;
                    position: relative;
                    /*box-sizing: content-box;*/
                }
                .test:after {
                    content: '';
                    height: 0px;
                    width: 52%;
                    border: 1px solid #06dfff;
                    position: absolute;         /*定位背景横线的位置*/
                    top: 40%;
                    left: 30%;
                }
            }
            .line2 {
                height: calc(100% - 27px);
                display: flex;
                align-items: center;
                justify-content: center;
                .msg-tab-body {
                    overflow-y: scroll;
                    height: 480px;
                    width: 50%;
                    .msg-list-content {
                        .msg-tab-list {
                            height: 80px;
                            position: relative;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            flex-wrap: nowrap;
                            margin: 0 20px;
                            padding: 10px;
                            color: #a4cfe5;
                            cursor: pointer;

                            .man-dothis {
                                flex: 1;
                                .man-img {
                                    width: 50px;
                                    height: 50px;
                                    border-radius: 50%;
                                }
                            }
                            .this-content {
                                flex: 4;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                line-height: 1.2em;
                                .finish-time {
                                    margin-right: 15px;
                                }
                            }
                        }

                        .msg-tab-list:before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 10%;
                            height: 2px;
                            width: 80%;
                            background: linear-gradient(to right, rgba(11, 82, 224, 0), #0b52e0, rgba(11, 82, 224, 0));
                        }
                    }
                }
                .msg-tab-body::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                .msg-tab-body::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius   : 8px;
                    background-color:  #535353;
                    background-image: -webkit-linear-gradient(
                                    45deg,
                                    rgba(255, 255, 255, 0.2) 25%,
                                    transparent 25%,
                                    transparent 50%,
                                    rgba(255, 255, 255, 0.2) 50%,
                                    rgba(255, 255, 255, 0.2) 75%,
                                    transparent 75%,
                                    transparent
                    );
                }
                .msg-tab-body::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    /*background   : #ededed;*/
                    border-radius: 10px;
                }
                .msg-detail {
                    width: 50%;
                    height: 100%;
                    .jk-img {
                        height: 50%;
                        text-align: center;
                        overflow: hidden;
                        .img-size {
                            height: 300px;
                        }
                    }
                    .jk-info-list {
                        padding: 20px 40px;
                        .jk-info-item {
                            color: #0b52e0;
                            font-size: 20px;
                            margin: 15px;
                        }
                    }
                }
            }
        }
    }
    .flex-bottom {
        width: 100%;
        height: calc(100% - 580px);
        border-radius: 8px;
        overflow: hidden;
        .chart-tab-t {
            /*height: 40px;*/
            padding-left: 80px;
            line-height: 28px;
            background-color: #0E1E51;
            .chart-tab-title {
                position: relative;
                padding-left: 10px;
            }
            .chart-tab-title:before {
                content: '';
                width: 14px;
                height: 14px;
                border-radius: 50%;
                position: absolute;
                left: -20px;
                top: 50%;
                background-color: #fff;
                transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -o-transform: translateY(-50%);
            }
        }
        .box-visit {
            width: 100%;
            /*margin: 10px  auto 0;*/
            height: calc(100% - 40px);
            box-sizing: content-box;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #0D1943;
            .col-30 {
                width: 30%;
                height: 100%;
            }
        }
    }
}
.actived {
    position: fixed;
    width: 1920px;
    height: 100vh;
    left: 0;
    top: 0;
}
</style>
