bzd_lxf
/
health_manage


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
							<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('DTP处方登记概览')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <script th:src="@{/health/js/echarts.min.js}"></script>
    <style>
        #chart-container {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body class="gray-bg">

    <div class="ui-layout-center">
        <div class="ant-card-head">
            <div class="ant-card-head-wrapper">
                <div class="ant-card-head-title">
                    <div class="index_title-2CoZR">
                        <h1>DTP处方登记概览</h1>

                    </div>
                </div>
            </div>

        </div>
        <div class="query-condition-container">
            <h4 class="query-condition-title">查询条件</h4>
            <div class="query-buttons">
                <button onclick="" class="ant-btn-primary">导出订单</button>
<!--                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                <a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
            </div>
        </div>
        <div class="container-div">
        <form id="report-form">
            <input type="text" class="" hidden="true" value="" name="id">
        <div class="ChartAndTable_chart-and-table-3ib6R">
            <div class="ant-radio-group ant-radio-group-outline">
                <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
                    <span class="ant-radio-button ant-radio-button-checked">
                        <input type="radio" class="ant-radio-button-input" value="1" checked="">
                        <span class="ant-radio-button-inner">

                        </span>
                    </span>
                    <span>订单量模式</span>
                </label>
                <label class="ant-radio-button-wrapper">
                    <span class="ant-radio-button">
                        <input type="radio" class="ant-radio-button-input" value="2">
                        <span class="ant-radio-button-inner">

                        </span>
                    </span>
                    <span>百分比模式</span>
                </label>
            </div>
                <div class="ant-radio-group ant-radio-group-outline">
                <label class="ant-radio-button-wrapper2">
                        <span class="ant-radio-button ant-radio-button-checked">
                            <input type="radio" class="ant-radio-button-input" value="7" checked="">
                            <span class="ant-radio-button-inner"></span>
                        </span><span>本周</span></label>
                <label class="ant-radio-button-wrapper2">
                        <span class="ant-radio-button">
                            <input type="radio" class="ant-radio-button-input" value="30">
                            <span class="ant-radio-button-inner">

                            </span></span><span>本月</span></label>
                <label class="ant-radio-button-wrapper2">
                        <span class="ant-radio-button">
                            <input type="radio" class="ant-radio-button-input" value="60">
                            <span class="ant-radio-button-inner">

                            </span></span><span>上月</span></label>
                <label class="ant-radio-button-wrapper2">
                        <span class="ant-radio-button">
                            <input type="radio" class="ant-radio-button-input" value="365">
                            <span class="ant-radio-button-inner">

                            </span></span>
                    <span>本年</span>
                </label>

                  <label>订单日期 </label>
									<input type="text" class="styled-input time-input" id="startTime" placeholder="开始时间" name="beginTime"/>
									<span>-</span>
									<input type="text" class="styled-input time-input" id="endTime" placeholder="结束时间" name="endTime"/>

            </div>

        </div>
        </form>

        <div id="chart-container"></div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
     </div>
    </div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script th:inline="javascript">
    var prefix = ctx + "dtp/report";
    var names=[];
    var Xnames=[];
    var submitted=[];
    var unsubmitted=[];
    var retData=[];

        // 初始化 ECharts 图表
        var myChart = echarts.init(document.getElementById('chart-container'));
        // 指定图表的配置项和数据
                var option = {
                title: {
                text: 'DTP 处方登记概览',
                left: 'center'
                },
                tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
               },
                formatter: function(params) {
                var submitted = retData[params[0].dataIndex].completedCount;
                var unsubmitted = retData[params[0].dataIndex].pendingCount;
                return '<p>' + params[0].name + '</p><p>已提交：' + submitted + ' 单 | 未提交：' + unsubmitted + ' 单</p>';
               }
               },
                legend: {
                data: ['已提交', '未提交']
               },
                xAxis: {
                 type: 'category',
                 data: names,

                    name: '店铺名称', // X 轴的显示说明
                    nameLocation: 'end', // 名称的位置，可选值有 'start', 'middle', 'end'
                    nameGap: 30, // 名称与轴线之间的距离
                    nameTextStyle: {
                        fontSize: 14,
                        color: 'black'
                    },
                axisLabel: {
                    formatter: function (value, index) {
                        // 获取对应的数据点
                        var data = option.series[0].data[index];
                        // 判断 y 轴数值是否超过 250
                        if (data > 100) {
                            return `{red|${value}}`;
                        } else {
                            return value;
                        }
                    },
                    rich: {
                        red: {
                            color: 'red'
                        }
                    }
                }
            },
                yAxis: {
                   type: 'value',
                    name: '订单量', // Y 轴的显示说明
                    nameLocation: 'end', // 名称的位置，可选值有 'start', 'middle', 'end'
                    nameGap: 30, // 名称与轴线之间的距离
                    nameTextStyle: {
                        fontSize: 14,
                        color: 'black'
                    },
                },
                series:  [
                    {
                        data:Xnames,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        itemStyle: {
                            color: function(params) {
                                // 根据 y 轴数值设置颜色
                                if (params.value > 100) {
                                    return 'red';
                                } else {
                                    return 'blue'; // 默认颜色
                                }
                            }
                        }
                    }
                ]
            };

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

    $(function() {
        var panehHidden = false;
        if ($(this).width() < 1590) {
            panehHidden = true;
        }
        $('body').layout({ initClosed: panehHidden, west__size: 185, resizeWithWindow: false });
        // 回到顶部绑定
        if ($.fn.toTop !== undefined) {
            var opt = {
                win:$('.ui-layout-center'),
                doc:$('.ui-layout-center')
            };
            $('#scroll-up').toTop(opt);
        }
        queryUserList();
    });

    function queryUserList() {
        var options = {
            url: prefix + "/list",
            viewUrl: prefix + "/view/{id}",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            sortName: "createTime",
            sortOrder: "desc",
            modalName: "DTP处方登记概览",
            columns: [
                {
                    field: "id",
                    title: "id",
                    //hidden:false
                    visible: false,
                },
                {
                    field: "chain",
                    title: "连锁店",
                    align: "center",
                    sortable: true,
                    formatter: function(value, row, index) {
                        if (row.id) {
                            // 假设 row.id 是你要传递的 ID 参数
                            return '<a href="javascript:void(0)"   onclick="detail(\'' + row.id + '\')">' + value + '</a>';
                        }
                    }

                },
                {
                    field: "orderCount",
                    title: "订单量",
                    align: "center"
                },
                {
                    field: "pendingCount",
                    title: "待完成订单数量",
                    align: "center"
                },
                {
                    field: "completedCount",
                    title: "已完成订单数量",
                    align: "center"
                },
                {
                    field: "completionRate",
                    title: "订单完成率(%)",
                    align: "center"
                }]
        };
        $.table.init(options);
    }

        /*门店列表-详细*/
        function detail(id) {
            debugger
            $.ajax({
                type : "GET",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : prefix + "/viewDetail/"+id,    //请求发送到TestServlet处
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    debugger

                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    names=[];
                    Xnames=[];
                    unsubmitted=[];
                    submitted=[];
                    retData=[];
                    myChart = echarts.init(document.getElementById('chart-container'))
                    if (result.data.length>0) {
                        retData=result.data;
                        for(var i=0;i<retData.length;i++){
                            names.push(retData[i].chain);    //挨个取出类别并填入类别数组
                            Xnames.push(retData[i].orderCount);
                            unsubmitted.push(retData[i].pendingCount);
                            submitted.push(retData[i].completedCount);
                        }
                    }
                    var updatedOption = {
                        xAxis: {
                            data: names
                        },
                        series: [{
                            data: Xnames
                        }]
                    };

                    // 使用新的数据更新图表
                    myChart.setOption(updatedOption);
                    $("#id").val(id);
                    queryUserList();
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            })
        }

    /* 自定义重置-表单重置/隐藏框/树节点选择色/搜索 */
    function resetPre() {
        resetDate();
        $("#report-form")[0].reset();
        $("#deptId").val("");
        $("#parentId").val("");
        $(".curSelectedNode").removeClass("curSelectedNode");
        $.table.search();
    }
        $.ajax({
            type : "POST",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : prefix + "/listReport",    //请求发送到TestServlet处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                debugger
                //请求成功时执行该函数内容，result即为服务器返回的json对象

                if (result.data.length>0) {
                    retData=result.data;
                    for(var i=0;i<retData.length;i++){
                        names.push(retData[i].chain);    //挨个取出类别并填入类别数组
                        Xnames.push(retData[i].orderCount);
                        unsubmitted.push(retData[i].pendingCount);
                        submitted.push(retData[i].completedCount);
                    }
                    myChart.setOption(option);
                }

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
</script>
<style>
    .ant-btn-primary {
        color: #fff;
        background-color: #1890ff;
        border-color: #1890ff;
        text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
        box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
    }

    .ant-radio-button-wrapper {
        position: relative;
        display: inline-block;
        height: 32px;
        margin: 0;
        padding: 0 15px;
        color: rgba(0,0,0,.65);
        line-height: 30px;
        background: #fff;
        border: 1px solid #d9d9d9;
        border-top-width: 1.02px;
        border-left: 0;
        cursor: pointer;
        transition: color .3s,background .3s,border-color .3s;
    }
    .ant-radio-button-wrapper2 {
        text-align: right;
        position: relative;
        display: inline-block;
        height: 32px;
        margin: 0;
        padding: 0 15px;
        color: rgba(0,0,0,.65);
        line-height: 30px;
        background: #fff;
        border: 1px solid #d9d9d9;
        border-top-width: 1.02px;
        border-left: 0;
        cursor: pointer;
        transition: color .3s,background .3s,border-color .3s;
    }
    .ant-card-head {
        min-height: 48px;
        margin-bottom: -1px;
        padding: 0 24px;
        color: rgba(0,0,0,.85);
        font-weight: 500;
        font-size: 16px;
        background: transparent;
        border-bottom: 1px solid #e8e8e8;
        border-radius: 2px 2px 0 0;
        zoom: 1;
    }
    .ant-card-head-wrapper {
        display: flex;
        align-items: center;
    }
    .ant-card-head-title {
        display: inline-block;
        flex: 1;
        padding: 16px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .index_title-2CoZR {
        width: 100%;
        justify-content: space-between;
        padding-left: 14px;
        border-left: 4px solid #e8514b;
    }
    .ChartAndTable_chart-and-table-3ib6R{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .ant-radio-group {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: rgba(0,0,0,.65);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: "tnum";
        display: inline-block;
    }
    .ant-radio-button-wrapper>.ant-radio-button {
        width: 0;
        height: 0;
        margin-left: 0;
    }


</style>
</body>

</html>