<template>
    <!-- 7日内检查 -->
    <div class="sevendaysschedule">
        <i class="iTop"></i>
        <div class="title">
            <span>七日内检查</span>
            <span>单位：%</span>
        </div>
        <div class="content" id="myChart">

        </div>
    </div>
</template>
<script>
import { fail } from 'assert';
import { setTimeout } from 'timers';
export default {
    name: "sevendaysschedule",
    data() {
        return {
            timeList: [],
            dataList: [],
        }
    },
    mounted(){
        let that = this;
        this.getDataListFn();
        var myChart = this.$echarts.init(document.getElementById('myChart'));

        $(window).resize(function(){
            myChart.resize();
        });


    },
    methods:{
        getDataListFn(){
            let that = this;
            let obj = {
                gId:this.$port.gId,
                cId:this.$port.cId,
                path:this.$api.weeklyCheck,
            }
            this.$axios.AxiosMethods("get","3rd/bigScreenData/bigScreenMessage",obj,function (res) {
                // console.log('七日内检查___________________________',res);
                let data = JSON.parse(res.data);
                that.dataList = data.weeklyCheck[0].data.rpCount;
                that.timeList = data.weeklyCheck[0].data.timeList;
                that.drawLine();
            });
            this.$websocketFn(obj,function (res) {
                let data = JSON.parse(res.data);

              // console.log('七日内检查websocketFn________________',res);
                // 具体数据
                that.dataList = data.weeklyCheck[0].data.rpCount;
                that.timeList = data.weeklyCheck[0].data.timeList;
                that.drawLine();
            });
        },
        drawLine(){
            // 初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('myChart'));
            let barNumber = {
                show: false,        // 是否显示坐标轴轴线
                lineStyle: {
                    color: '#fff'   // 坐标轴线线的颜色
                }
            };
            // 绘制图表
            myChart.setOption({
                color: ['#3398DB'],
                // title: { text: 'echarts' },
                tooltip: {},
                grid: {
                    top: 30,             // grid 组件离容器上侧的距离。
                    left: '3%',
                    right: '3%',
                    bottom: '1%',
                    containLabel: true   // 是否包含坐标轴的刻度标签。
                },
                xAxis: {
                    // data: ["周一","周二","周三","周四","周五","周六","周天"],
                    data: this.timeList,
                    type: 'category',    // 类目轴
                    axisTick: {
                        show: false,     // 是否显示坐标轴刻度
                    },
                    axisLine: barNumber  // 坐标轴轴线相关设置
                },
                yAxis: [{
                    type: 'value',       // 数值轴，适用于连续数据。
                    axisLine: barNumber
                }],
                series: [{
                    // name: '销量',
                    type: 'bar',         // 柱状/条形图
                    barWidth: '40%',
                    data: this.dataList,
                }]
            });
        }
    }
}
</script>
<style lang="less" scoped>
    .sevendaysschedule{
        font-size: 0.1rem;
        margin-top: 0.24rem;
        position: relative;
        border:0.01rem solid rgba(0,122,234,0.6);
        .iTop{
            width: 0.1rem;
            height: 0.1rem;
            display: block;
            position: absolute;
            background: url('../../../assets/image/img_jiao.png');
            left: 0;
        }
        .title{
            line-height: 0.48rem;
            font-size: 0.16rem;
            color: #fff;
            padding-left: 0.17rem;
            display: flex;
            justify-content: space-between ;
            border-bottom:0.01rem solid rgba(0,122,234,0.6);
            background:linear-gradient(90deg,rgba(0,54,128,1) 0%, rgba(0,30,63,1)  100%);
            span:nth-child(2) {
                margin-right: 0.15rem;
            }
        }
        .content{
            // height: 2.54rem;
            // width: 100%;
        }
        #myChart{
            width: 100% - 10px;
            height: 2.54rem;
            overflow: hidden;
            padding: 0 10px;
            div{
                background-color: aqua;
                height: 2.54rem !important;
            }
        }
    }
</style>

