ah_jjzhgd_webscreen/js/consQuality/consQuality.js

let element, layer, laydate;
layui.use(['layer', 'element', 'table'], function () {
    element = layui.element;
    layer = layui.layer;
    laydate = layui.laydate;
    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: 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: '#alarm',
        data: data,
        skin: 'line',
        page: false,
        cols: [[
            {field: 'number', width:80,title: '序号', align: 'center', type: 'numbers'},
            {field: 'content', align: 'center', title: '告警内容'},
        ]]
    })

    table.render({
        elem: '#demo',
        data: data,
        skin: 'line',
        cols: [[
            {field: 'number', width:80,title: '序号', align: 'center', type: 'numbers', fixed: 'left'},
            {field: 'content', align: 'center', title: '区域'},
            {field: 'content', align: 'center', title: '设备名称'},
            {field: 'content', align: 'center', title: '施工工艺'},
            {field: 'content', align: 'center', title: '标准值'},
            {field: 'content', align: 'center', title: '检测值'},
            {field: 'content', align: 'center', title: '检测时间'},
            {field: 'content', align: 'center', title: '状态'},
        ]],
        page: true, //开启分页
        loading: true, //数据加载中。。。
        limits: [5, 10, 20, 100],
        limit: 7
    })

    //检测记录对比echarts图表
    detectionRecord();

    laydate.render({
        elem: '#ID-laydate-type-datetime',
        type: 'datetime'
    });
});


//检测记录对比echarts图表
function detectionRecord(){
    var myChart = echarts.init(document.getElementById('dome'));
    option = {
        backgroundColor: "transparent",
        legend: {
            data: ['检测次数','合格次数'],
            icon:'circle',
            right: "3%",
            textStyle: {
                color: "white",
                fontSize: 12
            },
            itemWidth: 12,  // 设置宽度
            itemHeight:16, // 设置高度
            itemGap: 12 // 设置间距
        },
        grid: {
            left: '30',
            right: '0',
            top: '40',
            bottom: '20'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "item",
                crossStyle: {
                    color: '#999'
                }
            },
            confine: true,
            formatter:function(params){
                console.log(params)
                var html = params[0].name+'月';
                for(var i=0;i<params.length;i++){
                    html+='<br />'+params[i].marker+params[i].seriesName+'：'+params[i].value;
                }

                return html;
            }
        },
        xAxis: [{
            type: 'category',
            name:'月',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisPointer: {
                type: 'shadow'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#333'
                }
            },
            axisLabel: {
                formatter: '{value}月',
                show: true,
                color: '#eee'
            },
            axisTick: {
                show: false
            }
        }],
        yAxis: [{
            type: 'value',
            splitNumber:5,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#333'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        series: [
            {
                name: '检测次数',
                type: 'bar',
                symbol: 'bar',
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: '#51AAD1'
                    }
                },
                data: [3, 34, 47, 10, 20, 53, 65, 77, 40, 20, 73, 45]
            },
            {
                name: '合格次数',
                type: 'bar',
                symbol: 'circle',
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: '#70D6B5'
                    }
                },
                data: [3, 34, 47, 10, 20, 53, 65, 77, 40, 20, 73, 45]
            }
        ]
    };
    myChart.setOption(option);
}