hb_zhgd_screen/js/pages/dataAnalysisOctober/proQualityAnalysis.js

let table, layer, form;
let myChart = null,
    myChart2 = null;
layui.use(["layer", "table", "form"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;

    // 查询工程质量验收项
    getSelectProQualityData()

    //查询工程质量验收项-柱状图
    getSelectProQualityEcharts()
});

function getSelectProQualityData() {
    const url =
        commonUrl +
        "screen/proQuality/selectProQualityData"
    ajaxRequestGet(
        url,
        "GET",
        true,
        function () {
        },
        function (result) {
            if (result.code === 200) {
                setData(result.data);
            } else if (result.code === 500) {
                console.error("实时监测" + result.msg);
                setData(null);
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            errorFn(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );

    /* 实时检测赋值 */
    function setData(data) {
        if (data) {
            $("#totalItem").html(data.totalItem);
            $("#acceptItem").html(data.acceptItem);
            $("#acceptTable").html(data.acceptTable);
            $("#acceptQualifiedTable").html(data.acceptQualifiedTable);
            $("#acceptRate").html(data.acceptRate+"%");

            $("#acceptTbRate").html(data.acceptTbRate+"%");
            $("#mainAcceptRate").html(data.mainAcceptRate+"%");
            $("#commAcceptRate").html(data.commAcceptRate+"%");
        }
    }
}

function getSelectProQualityEcharts() {
    const url =
        commonUrl +
        "screen/proQuality/selectProQualityEcharts"
    ajaxRequestGet(
        url,
        "GET",
        true,
        function () {
        },
        function (result) {
            if (result.code === 200) {
                setData(result.data);
            } else if (result.code === 500) {
                console.error("实时监测" + result.msg);
                setData(null);
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            errorFn(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );

    /* 实时检测赋值 */
    function setData(data) {
        let civilEngineering ="";
        let electrical ="";
        if( data){
            civilEngineering = data["土建"]
            electrical = data["电气"];

        }
        getCivilEngineering(civilEngineering);
        getElectrical(electrical);
    }

}

function getCivilEngineering(civilEngineering) {
    let acceptItem =[];
    let notAcceptItem = [];
    let nameTitle = [];
    if(civilEngineering){
        for (let i = 0; i < civilEngineering.length; i++){
            acceptItem.push(civilEngineering[i].acceptItem);
            notAcceptItem.push(civilEngineering[i].notAcceptItem);
            nameTitle.push(civilEngineering[i].proStructure)
        }
    }
    initCivilEngineering(acceptItem, notAcceptItem,nameTitle);
}

function initCivilEngineering(acceptItem, notAcceptItem,nameTitle) {
    myChart = echarts.init(document.getElementById("civilEngineering"));
    const offsetX = 10;
    const offsetY = 5;
// 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - offsetX, shape.y - offsetY];
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
        },
    });
// 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
            const c4 = [shape.x + offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
// 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
            const c3 = [shape.x, shape.y - offsetX];
            const c4 = [shape.x - offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);

    const legendData = [
        {
            name: '未验收',
            textStyle: {
                color: '#fff',
            },
            itemStyle: {
                color: '#00E6F4',
            },
        },
        {
            name: '已验收',
            textStyle: {
                color: '#fff',
            },
            itemStyle: {
                color: '#1CFFA3',
            },
        }
    ];

    const option = {
        legend: {
            selectedMode: false, // 图例点击失效
            right: '2%', // 右边距离，可以根据实际情况调整
            top: '15%', // 上边距离，可以根据实际情况调整
            textStyle: {
                color: '#cccccc',
                fontSize: 14,
            },
            icon: 'circle', // 设置图例标记为圆点
            data: legendData,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
            formatter: function (params) {
                var str = params[0].name + '<br/>';
                params.forEach(function (item) {
                    var color = item.seriesName === "未验收" ? '#00FEFC' : '#1CFFA3'; // 注意你之前说颜色反了
                    str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'
                        + color + ';"></span>'
                        + item.seriesName + '：' + item.value + '<br/>';
                });
                return str;
            }
        },
        grid: {
            left: '2%',
            right: '2%',
            bottom: '8%',
            top: '25%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#6A7577',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 14,
                color: '#BDC2C2',
            },
            data: nameTitle,
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    width: 2,
                    color: '#2B7BD6',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#24363A',
                    type: 'dashed',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 14,
                color: '#BDC2C2',
            },
        },
        "dataZoom": [{
            "show": true,
            "height": 12,
            "xAxisIndex": [
                0
            ],
            bottom:'8%',
            "start": 10,
            "end": 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
                color:"#d3dee5",

            },
            textStyle:{
                color:"#fff"},
            borderColor:"#90979c"
        }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
        }],
        series: [
            {
                type: 'custom',
                name: '未验收',
                renderItem: function (params, api) {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00FEFC',
                                        },
                                        {
                                            offset: 1,
                                            color: '#00FEFC',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00FEFC',
                                        },
                                        {
                                            offset: 1,
                                            color: '#00FEFC',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00FEFC',
                                        },
                                        {
                                            offset: 1,
                                            color: '#00FEFC',
                                        },
                                    ]),
                                },
                            },
                        ],
                    };
                },
                data: notAcceptItem,
            },
            {
                type: 'custom',
                name: '已验收',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#1CFFA3',
                                        },
                                        {
                                            offset: 1,
                                            color: '#1CFFA3',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#1CFFA3',
                                        },
                                        {
                                            offset: 1,
                                            color: '#1CFFA3',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#1CFFA3',
                                        },
                                        {
                                            offset: 1,
                                            color: '#1CFFA3',
                                        },
                                    ]),
                                },
                            },
                        ],
                    };
                },
                data: acceptItem,
            },
        ],
    };

    // 设置图表（假设你已定义 myChart2）
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function getElectrical(electrical) {
    let acceptItem =[];
    let notAcceptItem = [];
    let nameTitle = [];
    if(electrical){
        for (let i = 0; i < electrical.length; i++){
            acceptItem.push(electrical[i].acceptItem);
            notAcceptItem.push(electrical[i].notAcceptItem);
            nameTitle.push(electrical[i].proStructure)
        }
    }
    initElectrical(acceptItem, notAcceptItem,nameTitle);
}

function initElectrical(acceptItem, notAcceptItem,nameTitle) {
    myChart2 = echarts.init(document.getElementById("electrical"));
    const offsetX = 25;
    const offsetY = 10;
// 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - offsetX, shape.y - offsetY];
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
        },
    });
// 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
            const c4 = [shape.x + offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
// 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
            const c3 = [shape.x, shape.y - offsetX];
            const c4 = [shape.x - offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);

    const legendData = [
        {
            name: '未验收',
            textStyle: {
                color: '#fff',
            },
            itemStyle: {
                color: '#00E6F4',
            },
        },
        {
            name: '已验收',
            textStyle: {
                color: '#fff',
            },
            itemStyle: {
                color: '#1CFFA3',
            },
        }
    ];

    const option = {
        legend: {
            selectedMode: false, // 图例点击失效
            right: '2%', // 右边距离，可以根据实际情况调整
            top: '15%', // 上边距离，可以根据实际情况调整
            textStyle: {
                color: '#cccccc',
                fontSize: 14,
            },
            icon: 'circle', // 设置图例标记为圆点
            data: legendData,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
            formatter: function (params) {
                var str = params[0].name + '<br/>';
                params.forEach(function (item) {
                    var color = item.seriesName === "未验收" ? '#00FEFC' : '#1CFFA3'; // 注意你之前说颜色反了
                    str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'
                        + color + ';"></span>'
                        + item.seriesName + '：' + item.value + '<br/>';
                });
                return str;
            }
        },
        grid: {
            left: '2%',
            right: '2%',
            bottom: '8%',
            top: '25%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#6A7577',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 14,
                color: '#BDC2C2',
            },
            data: nameTitle,
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    width: 2,
                    color: '#2B7BD6',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#24363A',
                    type: 'dashed',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 14,
                color: '#BDC2C2',
            },
        },
        "dataZoom": [{
            "show": true,
            "height": 12,
            "xAxisIndex": [
                0
            ],
            bottom:'8%',
            "start": 10,
            "end": 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
                color:"#d3dee5",

            },
            textStyle:{
                color:"#fff"},
            borderColor:"#90979c"
        }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
        }],
        series: [
            {
                type: 'custom',
                name: '未验收',
                renderItem: function (params, api) {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00FEFC',
                                        },
                                        {
                                            offset: 1,
                                            color: '#00FEFC',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00FEFC',
                                        },
                                        {
                                            offset: 1,
                                            color: '#00FEFC',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00FEFC',
                                        },
                                        {
                                            offset: 1,
                                            color: '#00FEFC',
                                        },
                                    ]),
                                },
                            },
                        ],
                    };
                },
                data: notAcceptItem,
            },
            {
                type: 'custom',
                name: '已验收',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#1CFFA3',
                                        },
                                        {
                                            offset: 1,
                                            color: '#1CFFA3',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#1CFFA3',
                                        },
                                        {
                                            offset: 1,
                                            color: '#1CFFA3',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#1CFFA3',
                                        },
                                        {
                                            offset: 1,
                                            color: '#1CFFA3',
                                        },
                                    ]),
                                },
                            },
                        ],
                    };
                },
                data: acceptItem,
            },
        ],
    };

    // 设置图表（假设你已定义 myChart2）
    myChart2.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart2.resize();
    });
}