hb_zhgd_screen/js/pages/dataAnalysisOctober/projectProgress.js

let table, layer, form, laydate;
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';

layui.use(["layer", "table", "form", "laydate"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;

    laydate = layui.laydate;
    laydate.render({
        elem: "#ID-laydate-rangeLinked",
        range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
        rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
    });

    $("#ID-laydate-start-date-1").val(getOneMonthAgo())
    $("#ID-laydate-end-date-1").val(getNowTime())

    let startTime = "";
    let endTime = "";
    if ($("#ID-laydate-start-date-1").val() != "") {
        startTime = $("#ID-laydate-start-date-1").val();
        endTime = $("#ID-laydate-end-date-1").val();
    } else {
        startTime = "";
        endTime = "";
    }
    //echarts图
    getProProgress(startTime, endTime);
    //土建列表
    getTjProgressList(startTime, endTime);
    //电气列表
    getDqProgressList(startTime, endTime);
});

function getProProgress(startTime, endTime){
    const url =
        commonUrl +
        "screen/proProgress/selectProProgress?startTime=" + startTime + "&endTime=" + endTime;
    ajaxRequestGet(
        url,
        "GET",
        true,
        function () {
        },
        function (result) {
            if (result.code === 200) {
                setData(result);
            } else if (result.code === 500) {
                setData(result);
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            errorFn(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );

    function setData(data) {
        if(data.code === 200){
            var list = data.data
            var date = list.day;
            var plannedCounttj = list.tjplanNum;
            var actualCounttj = list.tjexeNum;

            var plannedCountdq = list.dqplanNum;
            var actualCountdq = list.dqexeNum;
            initCivilEngineering(date, plannedCounttj, actualCounttj)
            initElectrical(date, plannedCountdq, actualCountdq)
        }else{
            layer.msg(data.msg || "暂无数据");
            initCivilEngineering("","","")
            initElectrical("", "", "")
        }
    }
}

function getTjProgressList(startTime, endTime){
    const url =
        commonUrl +
        "screen/proProgress/getTjProgressList?startTime=" + startTime + "&endTime=" + endTime;
    ajaxRequestGet(
        url,
        "GET",
        true,
        function () {
        },
        function (result) {
            if (result.code === 200) {
                setData(result);
            } else if (result.code === 500) {
                setData(result);
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            errorFn(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );

    function setData(data) {
        if(data.code === 200){
            initCivilEngineeringPercent(data.data)
        }else{
            layer.msg(data.msg || "暂无数据");
            initCivilEngineeringPercent("")
        }
    }

}

function getDqProgressList(startTime, endTime){
    const url =
        commonUrl +
        "screen/proProgress/getDqProgressList?startTime=" + startTime + "&endTime=" + endTime;
    ajaxRequestGet(
        url,
        "GET",
        true,
        function () {
        },
        function (result) {
            if (result.code === 200) {
                setData(result);
            } else if (result.code === 500) {
                setData(result);
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            errorFn(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );

    function setData(data) {
        if(data.code === 200){
            initElectricalPercentPercent(data.data)
        }else{
            layer.msg(data.msg || "暂无数据");
            initElectricalPercentPercent()
        }
    }
}



function query() {
    let startTime = "";
    let endTime = "";
    if ($("#ID-laydate-start-date-1").val() != "") {
        startTime = $("#ID-laydate-start-date-1").val();
        endTime = $("#ID-laydate-end-date-1").val();
    } else {
        startTime = "";
        endTime = "";
    }
    //echarts图
    getProProgress(startTime, endTime);
    //土建列表
    getTjProgressList(startTime, endTime);
    //电气列表
    getDqProgressList(startTime, endTime);
}


// 初始化
function initCivilEngineering(date, plannedCount, actualCount) {
    const leftChart = echarts.init(document.getElementById("civilEngineering"));
    const option = {
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
        },
        legend: {
            show: true,
            top: 45,
            right: 50,
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            top: '35%',
            left: '8%',
            right: '4%',
            bottom: '15%'
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: true,
                },
                data: date,
            },
        ],
        yAxis: [{
            min: 0,
            splitNumber: 10,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.6)',
                    type: 'dashed',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    padding: 16
                },
                formatter: function (value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
            axisTick: {
                show: false,
            },
        }],
        "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: [{
            name: '计划',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#00FEFC",
                }
            },
            itemStyle: {
                color: "#00FEFC",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(18,86,100,0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,81, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,63, 0.8)',
                    shadowBlur: 20
                }
            },
            data: plannedCount
        }, {
            name: '实际',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(25,196,134, 1)",
                }
            },
            itemStyle: {
                color: "rgba(25,196,134, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(17,95,82, 0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,67, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,54, 0.8)',
                    shadowBlur: 20
                }
            },
            data: actualCount
        }]
    };

    leftChart.setOption(option);
    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}

// 初始化
function initElectrical(date, plannedCount, actualCount) {
    const leftChart = echarts.init(document.getElementById("electrical"));
    const option = {
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
        },
        legend: {
            show: true,
            top: 45,
            right: 50,
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            top: '35%',
            left: '8%',
            right: '4%',
            bottom: '15%'
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: true,
                },
                data: date,
            },
        ],
        yAxis: [{
            min: 0,
            splitNumber: 10,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.6)',
                    type: 'dashed',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    padding: 16
                },
                formatter: function (value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
            axisTick: {
                show: false,
            },
        }],
        "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: [{
            name: '计划',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#00FEFC",
                }
            },
            itemStyle: {
                color: "#00FEFC",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(18,86,100,0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,81, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,63, 0.8)',
                    shadowBlur: 20
                }
            },
            data: plannedCount
        }, {
            name: '实际',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(25,196,134, 1)",
                }
            },
            itemStyle: {
                color: "rgba(25,196,134, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(17,95,82, 0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,67, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,54, 0.8)',
                    shadowBlur: 20
                }
            },
            data: actualCount
        }]
    };

    leftChart.setOption(option);
    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}

function initCivilEngineeringPercent(civilEngineeringPercentData) {
    let civilEngineeringPercent = document.getElementById('civilEngineeringPercent');
    if (civilEngineeringPercentData) {
        civilEngineeringPercentData.forEach((item, index) => {
            const html = `
            <div class="border">
                <div class="title">
                     ${index + 1} ${item.proType}
                </div>
                <div class="progress-group">
                    <div class="label">计划 ${item.planStartTime} ~ ${item.planEndTime} / 共${item.planDay}天</div>
                    <div class="progress-bar-container">
                        <div class="percentage-box">计划</div>
                        <div class="progress-bar-container-box">
                            <div class="progress-bar-box" style="width: ${item.planAccess}%;"></div>
                        </div>
                        <div class="percentage-box">${item.planAccess}%</div>
                    </div>
                </div>
                <div class="progress-group">
                    <div class="label">实际 ${item.startTime} ~ ${item.endTime} / 共${item.exeDay}天</div>
                    <div class="progress-bar-container">
                        <div class="percentage-box">实际</div>
                        <div class="progress-bar-container-box">
                            <div class="progress-bar-box-sj" style="width: ${item.exeAccess}%;"></div>
                        </div>
                        <div class="percentage-box">${item.exeAccess}%</div>
                    </div>
                </div>
            </div>
        `;
            civilEngineeringPercent.insertAdjacentHTML('beforeend', html);
        });
    }
}

function initElectricalPercentPercent(electricalPercentData) {
    let electricalPercent = document.getElementById('electricalPercent');
    if (electricalPercentData) {
        electricalPercentData.forEach((item, index) => {
            const html = `
            <div class="border">
                <div class="title">
                     ${index + 1} ${item.proType}
                </div>
                <div class="progress-group">
                    <div class="label">计划 ${item.planStartTime} ~ ${item.planEndTime} / 共${item.planDay}天</div>
                    <div class="progress-bar-container">
                        <div class="percentage-box">计划</div>
                        <div class="progress-bar-container-box">
                            <div class="progress-bar-box" style="width: ${item.planAccess}%;"></div>
                        </div>
                        <div class="percentage-box">${item.planAccess}%</div>
                    </div>
                </div>
                <div class="progress-group">
                    <div class="label">实际 ${item.startTime} ~ ${item.endTime} / 共${item.exeDay}天</div>
                    <div class="progress-bar-container">
                        <div class="percentage-box">实际</div>
                        <div class="progress-bar-container-box">
                            <div class="progress-bar-box-sj" style="width: ${item.exeAccess}%;"></div>
                        </div>
                        <div class="percentage-box">${item.exeAccess}%</div>
                    </div>
                </div>
            </div>
        `;
            electricalPercent.insertAdjacentHTML('beforeend', html);
        });
    }
}