gz_safety_ui/js/welcome/welcome.js

var initTimeType = '1'; //初始化时间类型

var purchaseType = [
    '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'
]

var purchaseData = [
    120, 200, 150, 80, 70, 110, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130
]

var rankingList = [
    { name: '220kvxxxxxxxxxxxxxxxxxx工程220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' }
]

var supplierList = [
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
    { name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' }
]

// 页面初始化
$(function () {
    console.log('DOM is ready!');
    $(`#time-${initTimeType}`).addClass('time-select-item-ac');
    initDelivery()
    initPurchase()
    initBalance()
    initPlan()
    initInstrument()
    rankingDom()
    supplierDom()
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#time_range_id', //指定元素
            type: 'datetime',
            range: true
        });
    });
});


function overviewClick(type) {
    console.log(type)
    let title = '', content = '', width = '95%', height = '95%';
    if (type === '0') {
        title = '工程详情';
        content = '../../page/welconme_child/engineer.html';
    }
    else if (type === '1') {
        title = '需求计划详情';
        content = '../../page/welconme_child/demand.html';
    }
    else if (type === '2') {
        title = '库存详情';
        content = '../../page/welconme_child/inventory.html';
    }
    else if (type === '3') {
        title = '采购详情';
        content = '../../page/welconme_child/purchase.html';
    }
    else if (type === '4') {
        title = '利库详情';
        content = '../../page/welconme_child/liKu.html';
    }
    else if (type === '5') {
        title = '退回详情';
        content = '../../page/welconme_child/goBack.html';
    }
    openIframeByParamObj("engineerDetail", title, content, width, height);
}

// 页面刷新事件
function refreshClick() {
    $(`#refresh_id`).addClass('layui-anim-rotate');
}

function rankingDom() {
    var dom_nav = document.getElementById('table_body_id')
    rankingList.forEach((item, index) => {
        var dom = ''
        var color = ''
        if (index == 0) {
            color = 'rgb(244, 138, 139)'
        } else if (index == 1 || index == 2) {
            color = '#eae13c'
        } else {
            color = '#999999'
        }
        dom += `
            <div style="width: 10%;">
                <div class="serialNumber" style="background:${color}">${index + 1}</div>
            </div>
            <div style="width: 40%;" title="${item.name}">${item.name}</div>
            <div style="width: 16.6%;font-weight: 700;">${item.ly}</div>
            <div style="width: 16.6%;font-weight: 700;color: rgb(68, 206, 66);">${item.th}</div>
            <div style="width: 16.6%;font-weight: 700;color: rgb(244, 138, 139);">${item.cq}</div>
        `
        var itemDom = document.createElement("div");
        itemDom.setAttribute('class', `table_body_item`);
        itemDom.innerHTML = dom;
        dom_nav.appendChild(itemDom);
    })
    rankingScrollTo()
}

function supplierDom() {
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });
    var dom_nav = document.getElementById('supplier_table_body_id')
    rankingList.forEach((item, index) => {
        var dom = ''
        dom += `
            <div class="table_img_nav" style="width: 34%;">
                <img src="../images/logo.png" alt="">
                <div class="table_img_txt">
                    <div style="font-size: 18px;color: #666666;font-weight: 700;">Axxxxxxxxxx供应商名称供应商名称供应商名称
                    </div>
                    <div style="color: #999999;margin-top: 4px;">合同占比：40 % （1,600,000）</div>
                </div>
            </div>
            <div style="width: 18%;">56,2305656</div>
            <div style="width: 18%;">800,000.00</div>
            <div style="width: 15%;">
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" style="width: 100%;">
                    <div class="layui-progress-bar" lay-percent="20%" style="width:20%;">
                        <span class="layui-progress-text">20%</span>
                    </div>
                </div>
            </div>
            <div style="width: 15%;">
                <i class="layui-icon layui-icon-time" style="margin-right: 4px;"></i>   
                2024-10-21
            </div>
        `
        var itemDom = document.createElement("div");
        itemDom.setAttribute('class', `supplier_table_body_item`);
        itemDom.innerHTML = dom;
        dom_nav.appendChild(itemDom);
    })
}

// 排名自动滚动
var rankingTimer = null
var offset = 0

function clearIntervalEvent() {
    clearInterval(rankingTimer)
    rankingTimer = null
}

function startIntervalEvent() {
    let ranking_dom = document.getElementById('table_body_id')
    offset = ranking_dom.scrollTop
    rankingScrollTo()
}

function rankingScrollTo() {
    var dom_nav = document.getElementById('table_body_id')
    dom_nav.addEventListener('mouseenter',clearIntervalEvent)
    dom_nav.addEventListener('mouseleave',startIntervalEvent)
    // 元素可滚动高度
    var scrollHeight = dom_nav.scrollHeight- dom_nav.clientHeight
    // console.dir(dom_nav)
    // console.log(scrollHeight)
    rankingTimer = setInterval(() => {
        offset += 1
        if (offset >= scrollHeight) {
            offset = 0
            dom_nav.scrollTo({
                top: offset
            })
            clearIntervalEvent()
            rankingScrollTo()
        } else {
            dom_nav.scrollTo({
                top: offset
            })
        }
    }, 40)
}


function initInstrument() {
    var dataArr = 80;
    var colorSet = {
        color: "#468EFD",
    };
    var myChart = echarts.init(document.getElementById('instrument_id'));
    var option = {
        tooltip: {
            formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
            {
                name: "内部进度条",
                type: "gauge",
                center: ['50%', '60%'],
                radius: "100%",

                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [dataArr / 100, colorSet.color],
                            [1, "#111F42"],
                        ],
                        width: 8,
                    },
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                },
                detail: {
                    formatter: function (value) {
                        if (value !== 0) {
                            var num = Math.round(value);
                            return parseInt(num).toFixed(0) + "%";
                        } else {
                            return 0;
                        }
                    },
                    offsetCenter: [0, 82],
                    textStyle: {
                        padding: [0, 0, 0, 0],
                        fontSize: 18,
                        fontWeight: "700",
                        color: colorSet.color,
                    },
                },
                title: {
                    //标题
                    show: true,
                    offsetCenter: [0, 46], // x, y，单位px
                    textStyle: {
                        color: "#999999",
                        fontSize: 14, //表盘上的标题文字大小
                        fontWeight: 400,
                        fontFamily: "PingFangSC",
                        marginTop: '20px'
                    },
                },
                data: [
                    {
                        name: "￥3,400,000.00",
                        value: dataArr,
                    },
                ],
                pointer: {
                    show: true,
                    length: "75%",
                    radius: "30%",
                    width: 10, //指针粗细
                },
                animationDuration: 4000,
            },
            {
                name: "外部刻度",
                type: "gauge",
                center: ['50%', '60%'],
                radius: "90%",
                min: 0, //最小刻度
                max: 100, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: [[1, "rgba(0,0,0,0)"]],
                    },
                }, //仪表盘轴线
                axisLabel: {
                    show: true,
                    color: "#4d5bd1",
                    distance: 25,
                    formatter: function (v) {
                        switch (v + "") {
                            case "0":
                                return "0";
                            case "10":
                                return "10";
                            case "20":
                                return "20";
                            case "30":
                                return "30";
                            case "40":
                                return "40";
                            case "50":
                                return "50";
                            case "60":
                                return "60";
                            case "70":
                                return "70";
                            case "80":
                                return "80";
                            case "90":
                                return "90";
                            case "100":
                                return "100";
                        }
                    },
                }, //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 7,
                    lineStyle: {
                        color: colorSet.color, //用颜色渐变函数不起作用
                        width: 1,
                    },
                    length: -8,
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: -20,
                    lineStyle: {
                        color: colorSet.color, //用颜色渐变函数不起作用
                    },
                }, //分隔线样式
                detail: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
            },
        ],
    };
    myChart.setOption(option);
}

function initPlan() {
    var myChart = echarts.init(document.getElementById('plan_id'));
    var option = {
        tooltip: {
            trigger: 'item'
        },
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: '完成率50%', // 要显示的文字
                textAlign: 'center',
                fill: '#0cd68d', // 文字颜色
                fontSize: 20
                // 其他样式配置...
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '14%',
            containLabel: true
        },
        series: [
            {
                name: '需求计划',
                type: 'pie',
                radius: ['60%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1100, name: '已完成', itemStyle: { color: '#0cd68d' } },
                    { value: 1048, name: '未完成', itemStyle: { color: '#eef2f3' } },
                ]
            }
        ]
    };
    myChart.setOption(option);
}

function initBalance() {
    var myChart = echarts.init(document.getElementById('balance_id'));
    var option = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'category',
            boundaryGap: false,
            type: 'value'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['采购金额', '已付金额']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '14%',
            containLabel: true
        },
        series: [
            {
                name: '采购金额',
                type: 'line',
                stack: 'Total',
                itemStyle: {
                    normal: {
                        color: '#3983fe', // 点的颜色
                        lineStyle: {
                            color: '#3983fe' // 线的颜色
                        }
                    }
                },
                areaStyle: {},
                data: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 210, 210]
            },
            {
                name: '已付金额',
                type: 'line',
                stack: 'Total',
                itemStyle: {
                    normal: {
                        color: '#877de3', // 点的颜色
                        lineStyle: {
                            color: '#877de3' // 线的颜色
                        }
                    }
                },
                areaStyle: {},
                data: [220, 182, 191, 234, 290, 330, 310, 210, 210, 210, 210, 210]
            }
        ]
    };
    myChart.setOption(option);
}

function initPurchase() {
    var myChart = echarts.init(document.getElementById('purchase_id'));
    var option = {
        xAxis: {
            type: 'category',
            data: purchaseType
        },
        yAxis: {
            type: 'value'
        },
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '5%',
            containLabel: true
        },
        dataZoom: {
            type: "inside",
            xAxisIndex: [0],
            show: false,
            startValue: 0, // 从头开始
            endValue: 12, // 一次性展示几个
        },
        series: [
            {
                data: purchaseData,
                type: 'bar',
                showBackground: true,
                label: {
                    show: true, // 显示数值
                    position: 'top' // 数值显示的位置
                },
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };

    setInterval(function () {
        // 每次向左滑动一个，最后一个从头开始。
        if (option.dataZoom.endValue == purchaseType.length) {
            option.dataZoom.startValue = 0;
            option.dataZoom.endValue = 12;
        } else {
            option.dataZoom.endValue = option.dataZoom.endValue + 1;
            option.dataZoom.startValue = option.dataZoom.startValue + 1;
        }
        myChart.setOption(option);
    }, 2000);

    myChart.setOption(option);
}

function initDelivery() {
    var myChart = echarts.init(document.getElementById('delivery_id'));
    var option = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'category',
            boundaryGap: false,
            type: 'value'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['采购量', '利库量', '退还量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '14%',
            containLabel: true
        },
        series: [
            {
                name: '采购量',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 210, 210]
            },
            {
                name: '利库量',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310, 210, 210, 210, 210, 210]
            },
            {
                name: '退还量',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410, 210, 210, 210, 210, 210]
            }
        ]
    };
    myChart.setOption(option);
}

function timeClick(type) {
    $(`#time-${type}`).addClass('time-select-item-ac');
    $(`#time-${initTimeType}`).removeClass('time-select-item-ac');
    initTimeType = type
    console.log(initTimeType)
    if(initTimeType == 2) {
        document.getElementById('time_range_nav').style.display = 'block'
    }else {
        document.getElementById('time_range_nav').style.display = 'none'
    }
}