let element, layer;
layui.use(['layer', 'element', 'table'], function () {
    element = layui.element;
    layer = layui.layer;
    var table = layui.table;
    var data = [
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
        {id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
    ];
    table.render({
        elem: '#demo',
        data: data,
        skin: 'line',
        page: true,
        cols: [[
            {field: 'id', title: '排名'},
            {field: 'proName', title: '工程名称'},
            {field: 'teamName', title: '班组名称'},
            {field: 'teamLeader', title: '班组长'},
            {field: 'quality', title: '施工质量'},
        ]]
    })

    connect2();

});


//天气echarts图表
function connect2(){
    var myChart = echarts.init(document.getElementById('weather_time'));
    var option = {
        grid: {
            show: true,
            backgroundColor: 'transparent',
            opacity: 0.3,
            borderWidth: '0',
            top: '150',
            bottom: '0'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show: false
        },
        xAxis: [
            // 日期
            {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 100,
                zlevel: 100,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    formatter: [
                        '{a|{value}}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: 'white',
                            fontSize: 11
                        }
                    }
                },
                nameTextStyle: {

                },
                data: ["25日","26日","27日","28日","29日","30日","31日"]
            },
            // 天气图标
            {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 20,
                zlevel: 100,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    formatter: function(value, index) {
                        return '{' + index + '| }\n{b|' + value + '}'
                    },
                    rich: {
                        0: {
                            backgroundColor: {
                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                                image: '../../img/operEnvironment/多云.png'
                            },
                            height: 30,
                            width: 30
                        },
                        1: {
                            backgroundColor: {
                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                                image: '../../img/operEnvironment/多云.png'
                            },
                            height: 30,
                            width: 30
                        },
                        2: {
                            backgroundColor: {
                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                                image: '../../img/operEnvironment/多云.png'
                            },
                            height: 30,
                            width: 30
                        },
                        3: {
                            backgroundColor: {
                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                                image: '../../img/operEnvironment/多云.png'
                            },
                            height: 30,
                            width: 30
                        },
                        4: {
                            backgroundColor: {
                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                                image: '../../img/operEnvironment/多云.png'
                            },
                            height: 30,
                            width: 30
                        },
                        5: {
                            backgroundColor: {
                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                                image: '../../img/operEnvironment/多云.png'
                            },
                            height: 30,
                            width: 30
                        },
                        6: {
                            backgroundColor: {
                                // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                                image: '../../img/operEnvironment/多云.png'
                            },
                            height: 30,
                            width: 30
                        },
                        b: {
                            color: 'white',
                            fontSize: 12,
                            lineHeight: 30,
                            height: 20
                        }
                    }
                },
                nameTextStyle: {
                    fontWeight: 'bold',
                    fontSize: 19
                },
                // data: this.weatherdata.weather
                data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
            }
        ],
        yAxis: {
            type: 'value',
            show: false,
            axisLabel: {
                formatter: '{value} °C',
                color: 'white'
            }
        },
        series: [
            {
                name: '最高气温',
                type: 'line',
                data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#C95843'
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    color: 'white',
                    formatter: '{c} °C'
                },
                lineStyle: {
                    width: 1,
                    // shadowOffsetY: -10,
                    // color: 'white'
                },
                areaStyle: {
                    opacity: 1,
                    // shadowOffsetY: -10,
                    color: 'transparent'
                }
            }
        ]
    }

    myChart.setOption(option);
}