zy-crm.git - Gitblit

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script type="text/javascript" src="../../static/js/BI/jquery.js"></script>
    <link rel="stylesheet" href="../../static/css/BI/comon0.css">
    <link rel="stylesheet" href="../../static/swiper/swiper-bundle.min.css">
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })
 
    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });
</script>
<script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
<!--<script language="JavaScript" src="../../static/js/BI/js.js"></script>-->
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
<script src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>
<body>
<div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="./bg-index.html" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"><img src="../../static/js/BI/pictuer/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <h1>CRM集成规划信息看板系统</h1>
    <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日-" + h + "点" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</div>
<div class="mainbox">
    <div style="display: flex;justify-content: space-between">
        <div class="boxall" style="width: 49.7%;height: 3.2rem">
            <div class="alltitle">待审核项目</div>
            <div class="swiper-head">
                <div class="swiper-head-item">业务员</div>
                <div class="swiper-head-item">审核员：梁昌民</div>
                <div class="swiper-head-item">待审核项目</div>
            </div>
            <div style="display: flex;height: 81%">
                <!--业务员滚动-->
                <div style="flex: 1;">
                    <div id="swiper1" class="swiper" style="height: 100%;">
                        <div id="box1" class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="swiper-item" style="">
                                    <div class="swiper-item-item">${k.userId$}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--中间区域-->
                <div style="flex: 1;" ></div>
                <!--<div></div>-->
                <!--待审核项目总数-->
                <div style="flex: 1;" id="innder">3</div>
            </div>
 
 
 
 
 
            <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="width: 49.7%;height: 3.2rem">
            <div class="alltitle">待规划项目</div>
            <div class="swiper-head">
                <div class="swiper-head-item" id="planId">规划员</div>
                <div class="swiper-head-item">规划中业务员</div>
                <div class="swiper-head-item">待规划总数</div>
            </div>
            <div id="swiper2" class="swiper">
                <div id="box2" class="swiper-wrapper">
 
                </div>
            </div>
            <div class="boxfoot"></div>
        </div>
    </div>
    <div class="boxall" style="width: 100%;height: 3.2rem">
        <div class="alltitle">规划数据汇总</div>
        <div class="allnav" id="echart4"></div>
        <div class="boxfoot"></div>
    </div>
    <div class="boxall" style="width: 100%;height: 3.2rem">
        <div class="alltitle">规划信息统计</div>
        <div class="allnav" id="echart1"></div>
        <div class="boxfoot"></div>
    </div>
</div>
<div class="back"></div>
 
 
<script type="text/javascript" src="../../static/js/BI/china.js"></script>
<!--<script type="text/javascript" src="../../static/js/BI/area_echarts.js"></script>-->
<script src="../../static/swiper/swiper-bundle.min.js"></script>
<script>
    setTimeout(()=>{
        getPendingApproval()
        getPendingUser()
        getAllPlan()
        getSumyear()
    },0)
    /*
    *  待审核项目
    * */
    let getPendingApproval = function() {
        $.ajax({
            url: baseUrl + "/pending/approval/auth",
            headers: {'token': localStorage.getItem('token')},
            method: 'GET',
            success(res){
                console.log(res)
                let newList = '', count = 0;
                for (let k of res.data) {
                    let list = `<div class="swiper-slide">
                                    <div class="swiper-item" >
                                        <div class="swiper-item-item">${k.userId$}</div>
                                    </div>
                                </div>`
                    newList = newList + list
                    count = count + k.count
                }
                $("#box1").html(newList)
                $("#innder").html(count)
                runder()
            }
        })
    }
    /*
    *   待规划项目
    * */
    let getPendingUser = function() {
        $.ajax({
            url: baseUrl + "/pending/user/approval/auth",
            headers: {'token': localStorage.getItem('token')},
            method: 'GET',
            success(res){
                //console.log(res)
                let newList = ''
                let len = res.data.length
                for (let k of res.data) {
                    let list = `<div class="swiper-slide">
                                    <div class="swiper-item" style="border-bottom: 1px solid #dedede">
                                        <div class="swiper-item-item">${k.user}</div>
                                        <div class="swiper-item-item">${k.value}</div>
                                        <div class="swiper-item-item">
                                            <span class="swiper-item-lable">${k.anfme}</span>
                                        </div>
                                    </div>
                                </div>`
                    newList = newList + list
                }
                $("#box2").html(newList)
                $("#planId").html(`规划员（${len}）人`)
                runder2()
            }
        })
    }
    function runder() {
        var mySwiper = new Swiper('#swiper1', {
            direction: 'vertical',
            grabCursor: true,
            loop: true,
            slidesPerView: 5,
            slidesPerGroup: 1,
            loopedSlides: 5,
            speed: 1000,
            autoplay: {
                delay: 3000,//1秒切换一次
            },
        })
    }
    function runder2() {
        var mySwiper = new Swiper('#swiper2', {
            direction: 'vertical',
            grabCursor: true,
            loop: true,
            slidesPerView: 5,
            slidesPerGroup: 1,
            loopedSlides: 5,
            speed: 1000,
            autoplay: {
                delay: 3000,//1秒切换一次
            },
        })
    }
    let getAllPlan = function() {
        $.ajax({
            url: baseUrl + "/pending/sum/auth",
            headers: {'token': localStorage.getItem('token')},
            method: 'GET',
            success(res){
                let monthData = []
                let flag = false
                for (let i = 1; i <= 12; i++) {
                    let data = null
                    for (let k of res.data) {
                        if (k.month == i) {
                            data = k.count
                            flag = true
                            break
                        } else {
                            flag = false
                        }
                    }
                    if (flag) {
                        monthData.push(data)
                    } else {
                        monthData.push(0)
                    }
                }
                option.series[0].data = monthData
                myChart.setOption(option);
                myChart.resize();
            }
        })
    }
    var myChart = echarts.init(document.getElementById('echart4'));
 
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#dddc6b'
                }
            }
        },
        legend: {
            top: '0%',
            data: ['规划量'],
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize: '12',
            }
        },
        grid: {
            left: '10',
            top: '30',
            right: '10',
            bottom: '10',
            containLabel: true
        },
 
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12,
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
 
            },
 
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
 
        }, {
 
            axisPointer: {show: false},
            axisLine: {show: false},
            position: 'bottom',
            offset: 20,
 
 
        }],
 
        yAxis: [{
            type: 'value',
            axisTick: {show: false},
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12,
                },
            },
 
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            }
        }],
        series: [
            {
                name: '规划量',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                //showSymbol: false,
                label: {
                    show: true,
                    position: 'top'
                },
                lineStyle: {
 
                    normal: {
                        color: '#00d887',
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0, 216, 135, 0.4)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(0, 216, 135, 0.1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#00d887',
                        borderColor: 'rgba(221, 220, 107, .1)',
                        borderWidth: 12
                    }
                },
                data: [1,2,3,4,5,6,7,8,9,10,11,12]
 
            },
        ]
 
    };
 
    // 使用刚指定的配置项和数据显示图表。
 
    window.addEventListener("resize", function () {
        myChart.resize();
    });
 
    let getSumyear = function() {
        $.ajax({
            url: baseUrl + "/user/sumyear/auth",
            headers: {'token': localStorage.getItem('token')},
            method: 'GET',
            success(res){
                console.log(res)
                let user = []
                let count = []
                for (let k of res.data) {
                    user.push(k.user.username)
                    for (let n of k.obj) {
                        if(n.year == 2023) {
                            count.push(n.count)
                        }
                    }
                }
                option2.xAxis[0].data = user
                option2.series[0].data = count
                myChart2.setOption(option2);
                myChart2.resize();
            }
        })
    }
 
    var myChart2 = echarts.init(document.getElementById('echart1'));
    option2 = {
        //  backgroundColor: '#00265f',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '0%',
            top: '10px',
            right: '0%',
            bottom: '4%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 1,
                    type: "solid"
                },
            },
 
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
        }],
        yAxis: [{
            type: 'value',
            axisLabel: {
                //formatter: '{value} %'
                show: true,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,.1    )",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                }
            }
        }],
        series: [
            {
                type: 'bar',
                data: [200, 300, 300, 900, 1500, 1200, 600],
                barWidth: '35%', //柱子宽度
                // barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color: '#2f89cf',
                        opacity: 1,
                        barBorderRadius: 5,
 
                    }
                },
                label: {
                    show: true,
                    position: 'inside'
                },
            }
 
        ]
    };
 
    // 使用刚指定的配置项和数据显示图表。
    window.addEventListener("resize", function () {
        myChart2.resize();
    });
 
</script>
</body>
</html>