hb_zhgd_screen/js/pages/dataAnalysisOctober/overallEfficiency.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 = "";
    }

    initData( startTime, endTime);
});

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 = "";
    }
    initData(startTime, endTime);
}


function initData(startTime, endTime) {
    const url = commonUrl + "screen/proSafety/selectOverallEfficiencyData";

    ajaxRequest(
        url,
        "get",
        {
            startTime: startTime,
            endTime: endTime,
        },
        true,
        function () {},
        function (result) {
            console.log(result, "数据");

            const data = result.data;
            let weather = "";
            let safetyAlert = "";
            for (const key in data) {
                switch (key) {
                    case "计划施工天数":
                        $("#planWorkDay").text(data[key] + "天");
                        break;
                    case "有效施工天数":
                        $("#effectiveWorkDay").text(data[key] + "天");
                        break;
                    case "总验收项":
                        $("#totalItems").text(data[key] + "个");
                        break;
                    case "已验收项":
                        $("#acceptedItems").text(data[key] + "个");
                        break;
                    case "验收率":
                        $("#acceptanceItemsRate").text(data[key] + "%");
                        break;
                    case "主设备试验调试一次通过率":
                        $("#firstRate").text(data[key] + "%");
                        break;

                    case "当前进度":
                        $("#currentProgress").text(data[key]);
                        break;
                    case "计划进度":
                        $("#planProgress").text(data[key]);
                        break;
                    case "进度偏差":
                        $("#delayProgress").text(data[key]);
                        break;

                    case "计划成本":
                        $("#planCost").text(data[key] + "万元");
                        break;
                    case "实际成本":
                        $("#actualCost").text(data[key] + "万元");
                        break;
                    case "缩减成本":
                        $("#reduceCost").text(data[key]);
                        break;
                    case "天气":
                        weather = data[key];
                        initEnvironmental(weather);
                        break;
                    case "安全预警":
                        safetyAlert = data[key];
                        initSafetyAlert(safetyAlert);
                        break;
                }
            }
        },
        function (xhr) {
            // error(xhr);
        }
    );
}

function getEnvironmental() {
    let yList = [32, 58, 64, 164, 99];
    let xData = ["学前", "小学", "初中", "高中", "qq"];
    initEnvironmental(yList, xData);
}

function initEnvironmental(data) {
    const xData = data.map((item) => item.weather);
    const yList = data.map((item) => item.day);

    let barWidth = 60;
    let colors = [];
    for (let i = 0; i < xData.length; i++) {
        colors.push({
            type: "linear",
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: "#1CFFF4", // 最左边
                },
                {
                    offset: 0.5,
                    color: "#1CFFF4", // 左边的右边 颜色
                },
                {
                    offset: 0.5,
                    color: "#1CFFF4", // 右边的左边 颜色
                },
                {
                    offset: 1,
                    color: "#1CFFF4",
                },
            ],
        });
    }
    const myChart = echarts.init(document.getElementById("environmental"));
    const option = {
        //提示框
        tooltip: {
            trigger: "axis",
            formatter: "{b} : {c}",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        /**区域位置*/
        grid: {
            left: "8%",
            right: "3%",
            top: "30%",
            bottom: "30%",
        },
        //X轴
        xAxis: {
            data: xData,
            type: "category",
            axisLine: {
                show: false,
                lineStyle: {
                    color: "rgba(255,255,255,1)",
                    shadowColor: "rgba(255,255,255,1)",
                    shadowOffsetX: "20",
                },
                symbol: ["none", "arrow"],
                symbolOffset: [0, 25],
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 30,
                fontSize: 15,
            },
        },
        yAxis: {
            show: true,
            splitNumber: 4,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: "#075858",
                },
            },
            axisLabel: {
                color: "#FFFFFF",
                margin: 8,
                fontSize: 15,
            },
        },
        "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: "bar",
                barWidth: barWidth,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex % 7];
                        },
                    },
                },
                label: {
                    show: false,
                    position: [barWidth / 2, -(barWidth + 20)],
                    color: "#ffffff",
                    fontSize: 14,
                    fontStyle: "bold",
                    align: "center",
                },
                data: yList,
            },
            {
                z: 2,
                type: "pictorialBar",
                data: yList,
                symbol: "diamond",
                symbolOffset: [0, "50%"],
                symbolSize: [barWidth, barWidth * 0.5],
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex % 7];
                        },
                    },
                },
            },
            {
                z: 3,
                type: "pictorialBar",
                symbolPosition: "end",
                data: yList,
                symbol: "diamond",
                symbolOffset: [0, "-50%"],
                symbolSize: [barWidth, barWidth * 0.5],
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        color: function (params) {
                            return colors[params.dataIndex % 7].colorStops[0]
                                .color;
                        },
                    },
                },
            },
        ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function getSafetyAlert() {
    let yList = [32, 58, 64, 164, 99];
    let xData = ["学前", "小学", "初中", "高中", "qq"];
    initSafetyAlert(yList, xData);
}

function initSafetyAlert(data) {
    const xData = data.map((item) => item.name);
    const yList = data.map((item) => item.num);
    let barWidth = 60;
    let colors = [];
    for (let i = 0; i < xData.length; i++) {
        colors.push({
            type: "linear",
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: "#1CFFF4", // 最左边
                },
                {
                    offset: 0.5,
                    color: "#1CFFF4", // 左边的右边 颜色
                },
                {
                    offset: 0.5,
                    color: "#1CFFF4", // 右边的左边 颜色
                },
                {
                    offset: 1,
                    color: "#1CFFF4",
                },
            ],
        });
    }
    const myChart = echarts.init(document.getElementById("safetyAlert"));
    const option = {
        //提示框
        tooltip: {
            trigger: "axis",
            formatter: "{b} : {c}",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        /**区域位置*/
        grid: {
            left: "4%",
            right: "3%",
            top: "30%",
            bottom: "30%",
        },
        //X轴
        xAxis: {
            data: xData,
            type: "category",
            axisLine: {
                show: false,
                lineStyle: {
                    color: "rgba(255,255,255,1)",
                    shadowColor: "rgba(255,255,255,1)",
                    shadowOffsetX: "20",
                },
                symbol: ["none", "arrow"],
                symbolOffset: [0, 25],
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 30,
                fontSize: 15,
            },
        },
        yAxis: {
            show: true,
            splitNumber: 4,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: "#075858",
                },
            },
            axisLabel: {
                color: "#FFFFFF",
                margin: 8,
                fontSize: 15,
            },
        },
        "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: "bar",
                barWidth: barWidth,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex % 7];
                        },
                    },
                },
                label: {
                    show: false,
                    position: [barWidth / 2, -(barWidth + 20)],
                    color: "#ffffff",
                    fontSize: 14,
                    fontStyle: "bold",
                    align: "center",
                },
                data: yList,
            },
            {
                z: 2,
                type: "pictorialBar",
                data: yList,
                symbol: "diamond",
                symbolOffset: [0, "50%"],
                symbolSize: [barWidth, barWidth * 0.5],
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex % 7];
                        },
                    },
                },
            },
            {
                z: 3,
                type: "pictorialBar",
                symbolPosition: "end",
                data: yList,
                symbol: "diamond",
                symbolOffset: [0, "-50%"],
                symbolSize: [barWidth, barWidth * 0.5],
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        color: function (params) {
                            return colors[params.dataIndex % 7].colorStops[0]
                                .color;
                        },
                    },
                },
            },
        ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}