sy
/
zb_clfxstj


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
							<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title text="登录"></title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css">
    <link rel="stylesheet" href="../../admin/css/other/console1.css"/>
</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10 ">

        <div class="layui-col-xs6 layui-col-md3" style="width: 33.3%!important;">
            <div class="layui-card top-panel">
                <div class="layui-card-header">区县数量</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                             <i class="layui-icon layui-icon-cols"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3" style="width: 33.3%!important;">
             <div class="layui-card top-panel">
                <div class="layui-card-header">中介机构</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <i class="layui-icon layui-icon-user"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3" style="width: 33.3%!important;">
            <div class="layui-card top-panel">
                <div class="layui-card-header">上报条数</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                            <i class="layui-icon layui-icon-slider"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="../../component/js/jquery.min.js"></script>
<script>
    layui.use(['request','layer', 'echarts', 'element', 'count', 'topBar','popup'], function () {
        let count = layui.count,
            request = layui.request,
            popup = layui.popup,
            echarts = layui.echarts;
        layer.ready(function () {
            var loading = layer.load(2, { shade: [0.3, '#333'] });
            request.httpGet("/business/data/v1/count", function (res) {
                layer.close(loading);
                if (res.success) {
                    count.up("value1", {
                        time: 4000,
                        num: 11,
                        bit: 0,
                        regulator: 50
                    })

                    count.up("value2", {
                        time: 4000,
                        num:  res.data.saleNumber,
                        bit: 0,
                        regulator: 50
                    })

                    count.up("value3", {
                        time: 4000,
                        num:  res.data.otherSaleNumber,
                        bit: 0,
                        regulator: 50
                    })
                    const districts = ["张店区", "博山区", "淄川区", "周村区", "临淄区", "桓台县", "高青县", "沂源县", "高新区", "经开区", "文昌湖区"];

// 创建一个映射表，将区名映射到对应的销售数量
                    const saleMap = res.data.dataCountList.reduce((map, item) => {
                        map[item.districtName] = item.saleNumber;
                        return map;
                    }, {});

// 生成新的数组，包含每个区县的销售数量，没有的区县填0
                    const result = districts.map(district => {
                        return saleMap[district] || 0;
                    });

// 初始化 ECharts 实例
                    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

// 设置图表的配置项和数据
                    var option = {
                        title: {
                            text: '各区县上报数量统计',
                            left: 'center',
                            textStyle: {
                                fontSize: 18,
                                color: '#333'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['上报数量'],
                            right: '10%',
                            top: '10',
                            textStyle: {
                                color: '#666'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: districts,
                            axisLine: {
                                lineStyle: {
                                    color: '#999'
                                }
                            },
                            axisLabel: {
                                color: '#666',
                                interval: 0,
                                rotate: 0
                            },
                            axisTick: {
                                show: false
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            splitNumber: 4,
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#DDD'
                                }
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#333'
                                }
                            },
                            nameTextStyle: {
                                color: '#999'
                            },
                            splitArea: {
                                show: false
                            },
                            axisLabel: {
                                color: '#666'
                            }
                        }],
                        series: [{
                            name: '上报数量',
                            type: 'bar',
                            data: result,
                            barWidth: '60%',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#8bc9f8' }, // 0% 处的颜色
                                        { offset: 1, color: '#457fea' } // 100% 处的颜色
                                    ]
                                )
                            }
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表
                    echartsRecords.setOption(option);

                    // 监听窗口大小变化，自动调整图表大小
                    window.onresize = function () {
                        echartsRecords.resize();
                    };
                } else {
                    popup.failure(res.msg);
                }
            });
        });


    });
</script>
</body>
</html>